* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  background: #F7F5F1;
  color: #1A1D1B;
}

a { color: inherit; }

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

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #123832;
  display: flex;
  flex-direction: column;
  padding: 28px 0;
}

.sidebar-brand {
  padding: 0 24px 10px 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.sidebar-brand:hover span { text-decoration: underline; text-underline-offset: 3px; }
.sidebar-brand:focus-visible { outline: 2px solid #FF8A80; outline-offset: 2px; border-radius: 6px; }

.sidebar-user {
  padding: 0 24px 18px 58px;
  margin-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}

.sidebar-brand span {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: 0;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
}

.sidebar-nav-bottom {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
  margin-top: auto;
}

.sidebar-footer {
  margin-top: auto;
  padding: 16px 24px 0 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.sidebar-footer-label {
  font-size: 12px;
  color: #9FC2B8;
}

.sidebar-footer-name {
  font-size: 13px;
  color: #FFFFFF;
  font-weight: 500;
  margin-top: 2px;
}

.main-column {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  height: 72px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
  border-bottom: 1px solid #E4DFD3;
  background: #FFFFFF;
}

.school-switch {
  font-size: 14px;
  font-weight: 500;
  color: #1A1D1B;
  border: 1px solid #E4DFD3;
  padding: 8px 14px;
  border-radius: 8px;
  background: #FBFAF7;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #E4DFD3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

.content {
  flex-grow: 1;
  padding: 32px 40px 48px 40px;
}

h1.page-title {
  margin: 0;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 25px;
  font-weight: 600;
  color: #1A1D1B;
  letter-spacing: 0;
}

.page-subtitle {
  margin: 6px 0 0 0;
  font-size: 14px;
  color: #6B6659;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-family: 'IBM Plex Sans', sans-serif;
  text-decoration: none;
}

.btn-primary {
  background: #1B5E52;
  color: #FFFFFF;
}

.btn-secondary {
  background: #FFFFFF;
  color: #1A1D1B;
  border: 1px solid #E4DFD3;
}

.card {
  background: #FFFFFF;
  border: 1px solid #E4DFD3;
  border-radius: 12px;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.stat-tile {
  background: #FFFFFF;
  border: 1px solid #E4DFD3;
  border-radius: 12px;
  padding: 16px 20px;
}

.stat-label {
  font-size: 12px;
  color: #6B6659;
  font-weight: 500;
}

.stat-value {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 25px;
  font-weight: 600;
  color: #1A1D1B;
  margin-top: 2px;
}

.filter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.search-input {
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid #E4DFD3;
  font-size: 13px;
  font-family: 'IBM Plex Sans', sans-serif;
  background: #FFFFFF;
  min-width: 240px;
}

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.chip {
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid #E4DFD3;
  background: #FFFFFF;
  color: #6B6659;
  text-decoration: none;
}

.chip.active {
  border-color: #1B5E52;
  background: #1B5E52;
  color: #FFFFFF;
}

/* Risk-level filter chips use the same pastel palette as the risk badges,
   so a level is recognisable by colour before you even read the label.
   The active chip for a level fills with that level's badge-text colour
   (mirroring how the neutral "All" chip fills dark green when active)
   rather than switching to the app's default green. */
.chip-low { background: #E4F3EA; color: #2F7D5A; border-color: #E4F3EA; }
.chip-medium { background: #FBEBD0; color: #B7791F; border-color: #FBEBD0; }
.chip-high { background: #FBE7D6; color: #C2600F; border-color: #FBE7D6; }
.chip-extreme { background: #FBE0DD; color: #C0392B; border-color: #FBE0DD; }

.chip-low.active { background: #2F7D5A; color: #FFFFFF; border-color: #2F7D5A; }
.chip-medium.active { background: #B7791F; color: #FFFFFF; border-color: #B7791F; }
.chip-high.active { background: #C2600F; color: #FFFFFF; border-color: #C2600F; }
.chip-extreme.active { background: #C0392B; color: #FFFFFF; border-color: #C0392B; }

/* Equipment status filter chips, same pastel-palette treatment as the risk
   chips above. */
.chip-operational { background: #E4F3EA; color: #2F7D5A; border-color: #E4F3EA; }
.chip-needs-repair { background: #FBEBD0; color: #B7791F; border-color: #FBEBD0; }
.chip-out-of-service { background: #FBE0DD; color: #C0392B; border-color: #FBE0DD; }

.chip-operational.active { background: #2F7D5A; color: #FFFFFF; border-color: #2F7D5A; }
.chip-needs-repair.active { background: #B7791F; color: #FFFFFF; border-color: #B7791F; }
.chip-out-of-service.active { background: #C0392B; color: #FFFFFF; border-color: #C0392B; }

.admin-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  border-bottom: 1px solid #E4DFD3;
  overflow-x: auto;
}

.admin-tab {
  display: inline-block;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #6B6659;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}

.admin-tab:hover {
  color: #1A1D1B;
}

.admin-tab.active {
  color: #1B5E52;
  border-bottom-color: #1B5E52;
}

/* Same look as .admin-tabs, but for switching between panels on the same
   page (e.g. Log an inspection / Log maintenance on the equipment detail
   page) instead of navigating to a different URL. */
.section-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  border-bottom: 1px solid #E4DFD3;
}

.section-tab {
  display: inline-block;
  padding: 8px 4px;
  margin-right: 20px;
  font-size: 13px;
  font-family: inherit;
  font-weight: 600;
  color: #6B6659;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  white-space: nowrap;
}

.section-tab:hover {
  color: #1A1D1B;
}

.section-tab.active {
  color: #1B5E52;
  border-bottom-color: #1B5E52;
}

/* Log an inspection/maintenance checklist: bold category headings, regular-
   weight criterion text, and a tick/cross/N-A control per item (green for
   pass, red for fail) instead of a plain checkbox. */
.criteria-category-header {
  font-size: 13px;
  font-weight: 700;
  color: #1A1D1B;
  background: #F3F0E8;
  padding: 8px 12px;
  border-radius: 6px;
  margin: 16px 0 6px;
}

.criteria-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 4px;
  border-bottom: 1px solid #E4DFD3;
}

.criteria-row-label {
  font-size: 13px;
  font-weight: 400;
  color: #1A1D1B;
  flex: 1;
}

.criteria-status-group {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.criteria-status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 15px;
  border: 1.5px solid #E4DFD3;
  background: #FFFFFF;
  color: #B0AA9A;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  line-height: 1;
}

.criteria-status-btn:hover {
  border-color: #6B6659;
  color: #1A1D1B;
}

.criteria-status-btn.status-yes.active {
  background: #2F7D5A;
  border-color: #2F7D5A;
  color: #FFFFFF;
}

.criteria-status-btn.status-no.active {
  background: #C0392B;
  border-color: #C0392B;
  color: #FFFFFF;
}

.criteria-status-btn.status-na.active {
  background: #6B6659;
  border-color: #6B6659;
  color: #FFFFFF;
}

.log-status-icon {
  display: inline-block;
  font-weight: 700;
}

.log-status-icon.log-status-yes {
  color: #2F7D5A;
}

.log-status-icon.log-status-no {
  color: #C0392B;
}

.log-status-icon.log-status-na {
  color: #6B6659;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* The PERA hazards/controls table mixes very short columns (Risk, Type,
   Mandatory, Applies to) with two long free-text ones (Hazard, Control
   measure). Left to auto layout, the browser can squeeze a long-text
   column down to almost nothing while wrapping every other word onto its
   own line -- table-layout:fixed plus the <colgroup> widths in the markup
   give every column a sane, stable share of the available width instead.
   The selector here is deliberately more specific than the general
   ".card:has(> table) table { min-width: 560px }" responsive-table rule
   below, which would otherwise win and squash this back down. */
.card:has(> table.hazards-table) table.hazards-table {
  table-layout: fixed;
  min-width: 840px;
}

.hazards-table td,
.hazards-table th {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.hazards-table td {
  vertical-align: top;
}

th {
  text-align: left;
  padding: 12px 16px;
  font-size: 11px;
  font-weight: 600;
  color: #6B6659;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: #FBFAF7;
  border-bottom: 1px solid #E4DFD3;
}

td {
  padding: 11px 16px;
  font-size: 13px;
  color: #1A1D1B;
  border-bottom: 1px solid #F0EDE5;
}

tr:last-child td {
  border-bottom: none;
}

tr.row-link:hover {
  background: #FBFAF7;
  cursor: pointer;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
}

.badge-low { background: #E4F3EA; color: #2F7D5A; }
.badge-medium { background: #FBEBD0; color: #B7791F; }
.badge-high { background: #FBE7D6; color: #C2600F; }
.badge-extreme { background: #FBE0DD; color: #C0392B; }

.badge-draft { background: #F0EDE5; color: #6B6659; }
.badge-pending { background: #FBEBD0; color: #B7791F; }
.badge-approved { background: #E4F3EA; color: #2F7D5A; }
.badge-changes { background: #FBE0DD; color: #C0392B; }

.badge-operational { background: #E4F3EA; color: #2F7D5A; }
.badge-needs-repair { background: #FBEBD0; color: #B7791F; }
.badge-out-of-service { background: #FBE0DD; color: #C0392B; }

.empty-state {
  padding: 48px 24px;
  text-align: center;
  color: #6B6659;
  font-size: 14px;
}

.detail-grid {
  display: grid;
  /* minmax(0, ...) lets the main column shrink so the side card stays on screen */
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  align-items: start;
}
/* A wide table (hazards) scrolls inside the main column instead of pushing the page wider */
.detail-grid > :first-child { min-width: 0; overflow-x: auto; }

.detail-section {
  margin-bottom: 14px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 20px;
  box-shadow: 0 1px 2px rgba(26, 29, 27, 0.06);
}

.detail-label {
  font-size: 11px;
  font-weight: 600;
  color: #6B6659;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 6px;
}

.detail-value {
  font-size: 14px;
  color: #1A1D1B;
  line-height: 1.5;
  white-space: pre-line;
}

.form-card {
  background: #FFFFFF;
  border: 1px solid #E4DFD3;
  border-radius: 12px;
  padding: 28px;
  max-width: 640px;
}

.form-row {
  margin-bottom: 18px;
}

.form-row label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #1A1D1B;
  margin-bottom: 6px;
}

.form-row input[type="text"],
.form-row input[type="number"],
.form-row input[type="email"],
.form-row input[type="password"],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #E4DFD3;
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  background: #FFFFFF;
}

.form-row textarea {
  min-height: 90px;
  resize: vertical;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.checkbox-row label {
  margin: 0;
  font-weight: 500;
}

.form-actions {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.note-box {
  padding: 12px;
  background: #FBFAF7;
  border: 1px solid #E4DFD3;
  border-radius: 8px;
  font-size: 12px;
  color: #6B6659;
  margin-bottom: 20px;
}

.back-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #1B5E52;
  text-decoration: none;
  margin-bottom: 16px;
}

.form-section-title {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #1A1D1B;
  margin: 32px 0 4px 0;
  padding-top: 20px;
  border-top: 1px solid #E4DFD3;
}

.form-card .form-section-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.form-section-hint {
  font-size: 12px;
  color: #6B6659;
  margin: 0 0 16px 0;
}

.tool-picker {
  border: 1px solid #E4DFD3;
  border-radius: 8px;
  overflow: hidden;
}

.tool-picker-search {
  padding: 10px;
  border-bottom: 1px solid #E4DFD3;
  background: #FBFAF7;
}

.tool-picker-search input {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #E4DFD3;
  font-size: 13px;
  font-family: 'IBM Plex Sans', sans-serif;
}

.tool-picker-list {
  max-height: 400px;
  overflow-y: auto;
  padding: 4px 0;
}

.tool-picker-group {
  border-bottom: 1px solid #E4DFD3;
}

.tool-picker-group:last-child {
  border-bottom: none;
}

.tool-picker-group-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  color: #6B6659;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.tool-picker-group-label::-webkit-details-marker {
  display: none;
}

.tool-picker-group-label::before {
  content: '▸';
  display: inline-block;
  font-size: 10px;
  color: #A8A296;
  transition: transform 0.15s ease;
}

.tool-picker-group[open] > .tool-picker-group-label::before {
  transform: rotate(90deg);
}

.tool-picker-group-count {
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: #A8A296;
}

.tool-picker-group-items {
  padding-bottom: 4px;
}

.tool-picker-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  font-size: 13px;
}

.tool-picker-item:hover {
  background: #FBFAF7;
}

.tool-picker-item input {
  flex-shrink: 0;
}

.tool-picker-item label {
  flex-grow: 1;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

/* ---------- Change history (collapsible tree) ---------- */

.change-log {
  border: 1px solid #E4DFD3;
  border-radius: 8px;
  overflow: hidden;
}

.change-log-entry {
  border-bottom: 1px solid #E4DFD3;
}

.change-log-entry:last-child {
  border-bottom: none;
}

.change-log-summary {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 12px 14px 12px 30px;
  position: relative;
  cursor: pointer;
  user-select: none;
  list-style: none;
}

.change-log-summary::-webkit-details-marker {
  display: none;
}

.change-log-summary::before {
  content: '▸';
  position: absolute;
  left: 12px;
  top: 13px;
  font-size: 13px;
  font-weight: 700;
  color: #6B6659;
  transition: transform 0.15s ease;
}

.change-log-entry[open] > .change-log-summary::before {
  transform: rotate(90deg);
}

.change-log-datetime {
  font-size: 13px;
  font-weight: 600;
  color: #1A1D1B;
}

.change-log-brief {
  font-size: 13px;
  color: #6B6659;
}

.change-log-detail {
  padding: 0 14px 14px 30px;
  font-size: 13px;
  color: #1A1D1B;
  line-height: 1.5;
  white-space: pre-line;
}

/* Equipment Inspection/Maintenance history reuses .change-log above --
   these two are the only additions it needed: a failed-check brief line
   stands out the same red as the tick/cross icons, and a note attached to
   a check (or a return-to-service note) reads as a positive, resolved
   comment rather than plain body text. */
.change-log-brief.log-brief-fail {
  color: #C0392B;
  font-weight: 600;
}

.log-note-positive {
  color: #2F7D5A;
  font-style: italic;
  margin-top: 8px;
}

.tool-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid #E4DFD3;
  background: #FBFAF7;
  text-decoration: none;
  color: #1A1D1B;
}

.monitoring-row {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 10px 0;
  border-bottom: 1px solid #F0EDE5;
  font-size: 13px;
}

.monitoring-row:last-of-type {
  border-bottom: none;
}

.monitoring-row .monitoring-question {
  flex-grow: 1;
}

.monitoring-row label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-weight: 400;
  font-size: 13px;
}

.signature-pad-wrap {
  margin: 6px 0 0;
}

.signature-pad {
  display: block;
  width: 100%;
  height: 150px;
  border: 1px solid #E0DDD3;
  border-radius: 8px;
  background: #fff;
  touch-action: none;
  cursor: crosshair;
}

.signature-pad-actions {
  display: flex;
  justify-content: flex-end;
  margin: 6px 0 14px;
}

.signature-image {
  display: block;
  max-width: 280px;
  border: 1px solid #E0DDD3;
  border-radius: 6px;
  background: #fff;
  padding: 6px;
}

/* ---------- Bottom navigation (mobile) ---------- */

.bottom-nav {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  align-items: center;
  justify-content: space-around;
  background: #123832;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)) 4px;
  border-top: 1px solid rgba(255,255,255,0.12);
}

.bottom-nav a svg {
  width: 20px;
  height: 20px;
}

/* ---------- Responsive tables ---------- */
/* Tables scroll horizontally on narrow screens instead of squashing columns. */

.card:has(> table) {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.card:has(> table) table {
  min-width: 560px;
}

/* ---------- Mobile layout ---------- */

@media (max-width: 768px) {
  .sidebar {
    display: none;
  }

  .bottom-nav {
    display: flex;
  }

  .topbar {
    height: 56px;
    padding: 0 16px;
  }

  .school-switch {
    font-size: 12px;
    padding: 6px 10px;
  }

  .content {
    padding: 20px 16px calc(80px + env(safe-area-inset-bottom, 0px)) 16px;
  }

  h1.page-title {
    font-size: 22px;
  }

  .page-header {
    align-items: flex-start;
  }

  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .detail-grid {
    grid-template-columns: 1fr;
  }

  .detail-grid > .card {
    order: -1;
  }

  .form-card {
    padding: 18px;
  }

  .form-actions {
    flex-wrap: wrap;
  }

  .form-actions .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .filter-row form {
    width: 100%;
  }

  .search-input {
    min-width: 0;
    width: 100%;
  }

  .monitoring-row {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

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

/* ---------- PERA summary tiles ---------- */
.summary-strip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px;
  margin: 16px 0 20px;
}
.summary-strip-item {
  background: #FFFFFF;
  border: 1px solid #E4DFD3;
  border-radius: 12px;
  padding: 14px 16px;
  min-width: 0;
}
.summary-strip-item .detail-label {
  margin-bottom: 8px;
}
.summary-strip-item .detail-value {
  font-size: 15px;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.summary-strip-item-wide {
  grid-column: span 2;
}
@media (max-width: 520px) {
  .summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .summary-strip-item-wide { grid-column: 1 / -1; }
}

/* ---------- PERA minimum safety requirements checklist ---------- */
.min-req-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #1A1D1B;
  margin: 4px 0 12px;
}
.min-req-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.min-req-item {
  background: #FFFFFF;
  border: 1px solid #E4DFD3;
  border-left: 4px solid #D9D3C4;
  border-radius: 10px;
  padding: 12px 14px;
}
.min-req-item.min-req-current { border-left-color: #2F7D5A; }
.min-req-item.min-req-due-soon { border-left-color: #B7791F; }
.min-req-item.min-req-missing { border-left-color: #C0392B; }
.min-req-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.min-req-name {
  font-size: 14px;
  font-weight: 600;
  color: #1A1D1B;
  flex: 1 1 220px;
  min-width: 0;
}
.min-req-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
  background: #F5F3EE;
  border-radius: 999px;
  padding: 3px;
}
.min-req-pill { position: relative; cursor: pointer; margin: 0; }
.min-req-pill input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.min-req-pill span {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  color: #6B6659;
  padding: 5px 12px;
  border-radius: 999px;
  white-space: nowrap;
}
.min-req-pill input:focus-visible + span { outline: 2px solid #1B5E52; outline-offset: 1px; }
.min-req-pill input:disabled + span { cursor: default; }
.min-req-pill-current input:checked + span { background: #E4F3EA; color: #2F7D5A; }
.min-req-pill-required input:checked + span { background: #FFFFFF; color: #1A1D1B; box-shadow: 0 0 0 1px #D9D3C4; }
.min-req-pill-due-soon input:checked + span { background: #FBEBD0; color: #B7791F; }
.min-req-pill-missing input:checked + span { background: #FBE0DD; color: #C0392B; }
.min-req-notes {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px solid #E4DFD3;
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
  background: #FAF9F6;
}
.min-req-notes:focus { outline: none; border-color: #1B5E52; background: #FFFFFF; }
.min-req-notes-text { margin-top: 8px; font-size: 13px; color: #6B6659; }
@media (max-width: 520px) {
  .min-req-pills { width: 100%; justify-content: space-between; }
  .min-req-pill span { padding: 5px 8px; }
}
.min-req-hint {
  font-size: 12px;
  font-weight: 400;
  color: #6B6659;
  margin-top: 3px;
  line-height: 1.4;
}
.min-req-item.min-req-not-applicable { border-left-color: #E4DFD3; background: #FAF9F6; }
.min-req-item.min-req-not-applicable .min-req-name { color: #6B6659; }
.min-req-pill-not-applicable input:checked + span { background: #E9E6DE; color: #4A463D; }

/* ---------- Sidebar admin section ---------- */
.sidebar { overflow-y: auto; }
.sidebar-divider { height: 1px; background: rgba(255,255,255,0.14); margin: 14px 24px; }
.sidebar-section-label {
  display: flex; align-items: center; gap: 12px;
  padding: 6px 24px; font-size: 14px; font-weight: 600; color: #FFFFFF;
}
.sidebar-section-label svg { color: #CFE3DD; }
.sidebar-subnav { display: flex; flex-direction: column; gap: 1px; padding: 2px 12px 0 12px; }
.sidebar-sublink {
  display: block; padding: 7px 12px 7px 42px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: #CFE3DD; text-decoration: none;
}
.sidebar-sublink:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; }
.sidebar-sublink.active { background: #1B5E52; color: #FFFFFF; }

/* ---------- Front page safety cycle flowchart ---------- */
.sg-flow-card { padding: 24px 24px 12px; margin-bottom: 20px; overflow: hidden; }
.sg-flow-heading { font-family: 'Permanent Marker', 'IBM Plex Sans', cursive; font-weight: 400; font-size: 22px; color: #B3261E; margin: 0 0 4px; }
.sg-flow-intro { margin: 0; font-size: 14px; color: #6B6659; }
.sg-flow { display: block; width: 100%; max-width: 780px; height: auto; margin: 4px auto 0; }
.sg-flow-arrow { fill: none; stroke: #C62828; stroke-width: 3.2; stroke-linecap: round; }
.sg-flow.sg-wait .sg-flow-arrow { stroke-dasharray: 400; stroke-dashoffset: 400; }
.sg-flow.sg-wait .sg-flow-node, .sg-flow.sg-wait marker path { opacity: 0; }
.sg-flow.sg-go .sg-flow-arrow { stroke-dasharray: 400; stroke-dashoffset: 400; animation: sgFlowDraw 0.7s ease-out forwards; animation-delay: var(--d); }
.sg-flow-headpath { fill: none; stroke: #C62828; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sg-flow-ring { fill: none; stroke: #C62828; stroke-width: 3; }
.sg-flow-ring2 { stroke-width: 1.6; opacity: 0.6; }
.sg-flow-centre-text { font-family: 'Permanent Marker', cursive; font-size: 30px; fill: #B3261E; letter-spacing: 1px; }
.sg-flow-title { font-family: 'Permanent Marker', cursive; font-size: 27px; fill: #B3261E; letter-spacing: 0.5px; }
.sg-flow-sub { font-family: 'IBM Plex Sans', sans-serif; font-size: 13.5px; fill: #4A463D; }
.sg-flow-badge { font-family: 'IBM Plex Sans', sans-serif; font-size: 12.5px; font-weight: 600; fill: #1B5E52; }
.sg-flow-badge-warn { fill: #B26A00; }
.sg-flow-badge-ok { fill: #2E7D32; }
.sg-flow-hit { fill: transparent; transition: fill 0.15s; }
.sg-flow-node { transform-box: fill-box; transform-origin: center; }
.sg-flow.sg-go .sg-flow-node { opacity: 0; animation: sgFlowPop 0.45s ease-out forwards; animation-delay: var(--d); }
.sg-flow-link { cursor: pointer; }
.sg-flow-link:hover .sg-flow-hit, .sg-flow-link:focus .sg-flow-hit { fill: rgba(198, 40, 40, 0.07); }
.sg-flow-link:hover .sg-flow-title { fill: #8E1B15; }
.sg-flow-link:focus { outline: none; }
.sg-flow-link:focus-visible .sg-flow-hit { stroke: #1B5E52; stroke-width: 2; }
@keyframes sgFlowDraw { to { stroke-dashoffset: 0; } }
@keyframes sgFlowPop { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .sg-flow.sg-go .sg-flow-arrow { animation: none; stroke-dashoffset: 0; }
  .sg-flow.sg-go .sg-flow-node { animation: none; opacity: 1; }
}
.sg-flow-list { display: none; }
@media (max-width: 640px) {
  .sg-flow-card { padding: 18px 16px 14px; }
  .sg-flow { display: none; }
  .sg-flow-list { display: block; list-style: none; margin: 14px 0 0; padding: 0; }
  .sg-flow-list li { position: relative; margin: 0 0 30px; }
  .sg-flow-list li:not(.sg-flow-list-loop)::after { content: ''; position: absolute; left: 30px; bottom: -26px; width: 3px; height: 20px;
    background: #C62828; border-radius: 2px; transform: rotate(4deg); }
  .sg-flow-list li:not(.sg-flow-list-loop)::before { content: ''; position: absolute; left: 25px; bottom: -28px; width: 9px; height: 9px;
    border-right: 3px solid #C62828; border-bottom: 3px solid #C62828; transform: rotate(45deg); }
  .sg-flow-list a, .sg-flow-list li > div { display: block; padding: 10px 14px; border: 2.5px solid #C62828;
    border-radius: 18px 12px 20px 10px / 12px 20px 10px 18px; text-decoration: none; color: inherit; background: #fff; }
  .sg-flow-list a:active { background: rgba(198, 40, 40, 0.06); }
  .sg-flow-list-title { display: block; font-family: 'Permanent Marker', 'IBM Plex Sans', cursive; font-size: 22px; color: #B3261E; line-height: 1.2; }
  .sg-flow-list-sub { display: block; font-size: 14px; color: #4A463D; }
  .sg-flow-badge-html { display: inline-block; margin-top: 4px; font-size: 13px; font-weight: 600; color: #1B5E52; }
  .sg-flow-badge-html.sg-flow-badge-warn { color: #B26A00; }
  .sg-flow-badge-html.sg-flow-badge-ok { color: #2E7D32; }
  .sg-flow-list-loop { font-family: 'Permanent Marker', 'IBM Plex Sans', cursive; font-size: 18px; color: #B3261E; margin: 0; text-align: center; }
}

/* ---------- Public landing page ---------- */
.lp-body { background: #F7F5F1; color: #1A1D1B; }
.lp-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.lp-marker { font-family: 'Permanent Marker', 'IBM Plex Sans', cursive; font-weight: 400; color: #C62828; }
.lp-top { background: #123832; color: #fff; position: sticky; top: 0; z-index: 10; }
.lp-top-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.lp-brand { display: inline-flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-weight: 700; font-size: 18px; }
.lp-btn { display: inline-block; padding: 10px 18px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; font-family: inherit; text-align: center; }
.lp-btn-primary { background: #1B5E52; color: #fff; }
.lp-btn-primary:hover { background: #154A41; }
.lp-btn-ghost { border-color: rgba(255,255,255,0.5); color: #fff; padding: 7px 16px; }
.lp-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.lp-btn-light { background: #fff; color: #123832; }
.lp-btn-block { display: block; width: 100%; margin-top: 18px; }
.lp-hero { background: linear-gradient(180deg, #123832 0%, #1B5E52 100%); color: #fff; padding: 56px 0 72px; }
.lp-hero-inner { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 48px; align-items: center; }
.lp-eyebrow { text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px; font-weight: 600; color: #9FD3C7; margin: 0 0 12px; }
.lp-h1 { font-size: 46px; line-height: 1.12; margin: 0 0 18px; font-weight: 700; }
.lp-h1 .lp-marker { color: #FF8A80; font-size: 0.95em; letter-spacing: 0.5px; }
.lp-lead { font-size: 18px; line-height: 1.55; color: #DCEBE7; margin: 0 0 22px; max-width: 560px; }
.lp-ticks { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; max-width: 560px; }
.lp-ticks li { position: relative; padding-left: 28px; font-size: 15px; color: #fff; }
.lp-ticks li::before { content: ''; position: absolute; left: 2px; top: 3px; width: 12px; height: 7px;
  border-left: 3px solid #FF8A80; border-bottom: 3px solid #FF8A80; transform: rotate(-45deg); }
.lp-signin { background: #fff; color: #1A1D1B; border-radius: 14px; padding: 28px; box-shadow: 0 20px 50px rgba(0,0,0,0.25); }
.lp-signin-title { margin: 0 0 6px; font-size: 22px; }
.lp-label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 6px; }
.lp-input { width: 100%; padding: 11px 12px; border: 1px solid #CFCAC0; border-radius: 8px; font-size: 16px; font-family: inherit; }
.lp-input:focus { outline: 2px solid #1B5E52; outline-offset: 1px; border-color: #1B5E52; }
.lp-signin-note { font-size: 13px; color: #6B6659; margin: 14px 0 0; }
.lp-error { background: #FDECEA; color: #8E1B15; border: 1px solid #F5C2BD; border-radius: 8px; padding: 10px 12px; font-size: 14px; margin-top: 10px; }
.lp-signout { margin-top: 12px; text-align: center; }
.lp-link-btn { background: none; border: none; color: #1B5E52; font-weight: 600; cursor: pointer; font-family: inherit; font-size: 14px; }
.lp-section { padding: 64px 0; }
.lp-h2 { font-size: 32px; margin: 0 0 10px; text-align: center; }
.lp-h2 .lp-marker { display: inline-block; }
.lp-section-lead { text-align: center; color: #6B6659; font-size: 17px; margin: 0 auto 8px; max-width: 620px; }
.lp-flow-section { background: #fff; padding: 36px 0 28px; }
.sg-flow-bare .sg-flow { max-width: 800px; margin-top: 8px; }
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
.lp-feature { background: #fff; border: 1px solid #E6E1D8; border-radius: 12px; padding: 22px; }
.lp-feature-icon { width: 44px; height: 44px; border-radius: 10px; background: #E6F0ED; color: #1B5E52; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.lp-feature h3 { margin: 0 0 6px; font-size: 18px; }
.lp-feature p { margin: 0; color: #4A463D; font-size: 15px; line-height: 1.5; }
.lp-built { background: #123832; color: #DCEBE7; padding: 48px 0; }
.lp-built-inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.lp-built p { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.55; }
.lp-h2-light { color: #fff; text-align: left; font-size: 26px; }
.lp-footer { padding: 24px 0; font-size: 13px; color: #6B6659; text-align: center; }
@media (max-width: 900px) {
  .lp-hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .lp-features { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .lp-wrap { padding: 0 16px; }
  .lp-hero { padding: 36px 0 44px; }
  .lp-h1 { font-size: 34px; }
  .lp-lead { font-size: 16px; }
  .lp-ticks { grid-template-columns: 1fr; }
  .lp-signin { padding: 22px; }
  .lp-section { padding: 44px 0; }
  .lp-h2 { font-size: 26px; }
  .lp-features { grid-template-columns: 1fr; }
  .lp-built-inner { flex-direction: column; align-items: flex-start; }
  .lp-built .lp-btn { width: 100%; }
}

/* Landing page: coming-soon state, labels, focus */
.lp-badge-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.lp-badge-row .lp-eyebrow { margin: 0; }
.lp-soon { display: inline-flex; align-items: center; gap: 8px; background: #FF8A80; color: #4A0F0B; font-weight: 700;
  font-size: 13px; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px 6px 12px; border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255, 138, 128, 0.18); }
.lp-soon::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #8E1B15; }
.lp-soon-light { font-size: 11.5px; padding: 4px 10px 4px 9px; margin-right: 8px; box-shadow: none; vertical-align: 1px; }
.lp-ticks-label { margin: 0 0 10px; font-size: 15px; font-weight: 600; color: #9FD3C7; }
.lp-ticks li::before { width: 10px; height: 10px; left: 3px; top: 4px; border: 2.5px dashed #FF8A80; border-radius: 50%; transform: none; }
.lp-signin-note-top { margin: 0 0 4px; }
.lp-section-eyebrow { text-align: center; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12.5px; font-weight: 600; color: #1B5E52; margin: 0 0 6px; }
.lp-flow-section .lp-h2 { font-size: 28px; margin-bottom: 6px; }
.lp-flow-section .lp-section-lead { font-size: 16px; max-width: 700px; }
.lp-built-status { margin-top: 14px !important; font-size: 15px; color: #fff; }
.lp-brand:focus-visible, .lp-btn:focus-visible, .lp-link-btn:focus-visible { outline: 3px solid #FF8A80; outline-offset: 3px; }
.lp-signin .lp-btn:focus-visible, .lp-link-btn:focus-visible { outline-color: #1B5E52; }
@media (max-width: 640px) {
  .lp-flow-section { padding: 32px 0 24px; }
  .lp-flow-section .lp-h2 { font-size: 24px; }
  .lp-soon { font-size: 12px; }
}

.lp-product { display: block; font-size: 30px; font-weight: 700; letter-spacing: 0.5px; color: #9FD3C7; margin-bottom: 8px; }
@media (max-width: 640px) { .lp-product { font-size: 24px; } }

/* CARA: PERAs not yet approved */
.tool-picker-flag { margin-left: auto; white-space: nowrap; }
.tool-picker-flag + .badge { margin-left: 6px; }
.tool-chip .tool-picker-flag { margin-left: 6px; }
.cara-unapproved { background: #FFF4E5; border: 1px solid #F3D19E; color: #6B4500; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-bottom: 12px; }
.cara-unapproved ul { margin: 6px 0 0; padding-left: 18px; }
.cara-unapproved a { color: #6B4500; font-weight: 600; }

/* ---------- CARA AI assistant ---------- */
.ai-draft-panel { margin: 18px 0 8px; padding: 14px 16px; border: 1px dashed #1B5E52; border-radius: 12px; background: #F2F8F6; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.ai-draft-text { flex: 1 1 320px; font-size: 13.5px; color: #3D4A45; }
.ai-draft-text strong { display: block; color: #1B5E52; font-size: 14.5px; margin-bottom: 2px; }
.ai-draft-status { flex-basis: 100%; font-size: 13.5px; color: #3D4A45; }
.ai-draft-status:empty { display: none; }
.ai-draft-notes { margin: 6px 0 0; padding-left: 18px; }
.ai-suggest { margin: 6px 0 12px; padding: 10px 12px; border-left: 4px solid #1B5E52; background: #F2F8F6; border-radius: 8px; font-size: 13.5px; }
.ai-suggest-title { font-weight: 600; color: #1B5E52; margin-bottom: 4px; }
.ai-suggest-body { white-space: pre-wrap; color: #1A1D1B; margin-bottom: 8px; }
.ai-suggest-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-check-panel { border: 1px solid #E4DFD3; border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; background: #fff; }
.ai-check-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ai-check-head h3 { margin: 0; font-size: 16px; }
.ai-check-head form { margin: 0; }
.ai-sub { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #6B6659; margin: 12px 0 6px; }
.ai-allclear { text-transform: none; letter-spacing: 0; font-size: 13.5px; color: #2E7D32; }
.ai-issues { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ai-issues li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.45; }
.ai-sev { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; margin-top: 1px; }
.ai-sev-must .ai-sev { background: #FDECEA; color: #8E1B15; }
.ai-sev-should .ai-sev { background: #FFF4E5; color: #8A5300; }
.ai-sev-sugg .ai-sev { background: #E6F0ED; color: #1B5E52; }
.ai-fix { color: #4A463D; margin-top: 2px; }
.ai-result { margin-top: 14px; padding-top: 12px; border-top: 1px solid #EEE9DF; }
.ai-overall { display: inline-block; font-weight: 700; font-size: 13px; padding: 4px 10px; border-radius: 8px; }
.ai-ok { background: #E8F5E9; color: #2E7D32; }
.ai-mid { background: #FFF4E5; color: #8A5300; }
.ai-bad { background: #FDECEA; color: #8E1B15; }
.ai-summary { font-size: 14px; margin: 8px 0 10px; }
.ai-meta { font-size: 12px; color: #6B6659; margin: 10px 0 0; }
.ai-notice { background: #FFF4E5; color: #6B4500; border-radius: 8px; padding: 8px 10px; font-size: 13px; margin-top: 10px; }
.btn-sm { padding: 6px 12px; font-size: 13px; }

/* Row delete (System Administrator) */
.row-action { width: 1%; white-space: nowrap; text-align: right; cursor: default; }
.row-action form { margin: 0; }
.btn-delete { background: none; border: 1px solid #E8C3BF; color: #B3261E; border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.btn-delete:hover, .btn-delete:focus-visible { background: #FDECEA; border-color: #B3261E; outline: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Checklist: keep Save visible while there are unsaved changes */
.min-req-actions.is-dirty { position: sticky; bottom: 0; z-index: 5; background: #FFFFFF; border: 1px solid #E4DFD3; border-radius: 12px; padding: 12px 14px; box-shadow: 0 -6px 18px rgba(0,0,0,0.08); margin-top: 12px; }
.min-req-unsaved { margin-left: 12px; font-size: 13.5px; font-weight: 600; color: #8A5300; }
@media (max-width: 640px) { .min-req-actions.is-dirty { bottom: 64px; } }

/* Formatted view of multi-line text (see public/pretty-text.js) */
.pretty-view {
  width: 100%;
  min-height: 90px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #E4DFD3;
  background: #FFFFFF;
  font-size: 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  line-height: 1.5;
  cursor: text;
  box-sizing: border-box;
}
.pretty-view:hover { border-color: #C9C1AE; }
.pretty-view:focus { outline: 2px solid #1B5E52; outline-offset: 1px; }
.pretty-view p, .pretty-done p { margin: 0 0 4px; }
.pretty-view ul, .pretty-done ul { margin: 2px 0 6px; padding-left: 20px; }
.pretty-view li, .pretty-done li { margin: 0 0 2px; }
.pretty-view > :last-child, .pretty-done > :last-child { margin-bottom: 0; }
.pt-subhead { color: #1B5E52; }
.pretty-done { white-space: normal !important; }

/* CARA class group: year level / class size / age range side by side */
.cohort-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
@media (max-width: 600px) { .cohort-grid { grid-template-columns: 1fr; } }

/* CARA projects (cara-projects.js) */
.prj-panel { border: 1px solid #E4DFD3; border-radius: 12px; padding: 14px 16px; background: #FFFFFF; margin-bottom: 18px; }
.prj-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.prj-table-wrap { overflow-x: auto; }
.prj-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.prj-table th, .prj-table td { border-bottom: 1px solid #ECE7DC; padding: 7px 8px; text-align: left; vertical-align: top; }
.prj-table th { color: #1B5E52; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; background: #F7F5F1; }
.prj-sub { color: #6B6659; font-size: 12px; }
.prj-flag-item { margin-top: 10px; padding-top: 8px; border-top: 1px dashed #F3D19E; }
.prj-flag-item form { margin-top: 6px; }
.prj-class-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0 4px; }
.prj-class-strip > div { background: #F7F5F1; border: 1px solid #E4DFD3; border-radius: 10px; padding: 8px 10px; }
.prj-class-strip span { display: block; font-size: 11.5px; color: #6B6659; text-transform: uppercase; letter-spacing: .3px; }
.prj-class-strip strong { color: #1B5E52; }
@media (max-width: 700px) { .prj-class-strip { grid-template-columns: 1fr 1fr; } }
.prj-flags { display: grid; gap: 6px; margin: 10px 0 14px; }
.prj-flags > div { padding: 8px 12px; border-radius: 8px; font-size: 14px; }
.prj-flag-stop { background: #FBE0DD; color: #8f1111; font-weight: 600; }
.prj-flag-bad { background: #FFF0EC; color: #9a3b00; }
.prj-flag-mid { background: #FFF6E0; color: #6b4a00; }
.prj-trigger { border: 1px solid #E4DFD3; border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.prj-trigger-head { margin-bottom: 4px; }
.prj-confirm { margin-top: 6px; font-size: 13.5px; }
.prj-confirm-missing { color: #9a3b00; font-weight: 600; }
.prj-inline-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.prj-inline-form input[type=text], .prj-inline-form select { padding: 6px 8px; border: 1px solid #E4DFD3; border-radius: 8px; font: inherit; font-size: 13.5px; }
.prj-inline-form label { font-size: 13px; color: #6B6659; display: flex; flex-direction: column; gap: 2px; }
.prj-review { border: 1px solid #1B5E52; border-radius: 12px; padding: 12px 14px; background: #F2F8F6; }
.prj-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prj-row-missing td { background: #FFF0EC; }
.prj-row-unsure td { background: #FFF6E0; }
.prj-versions { margin: 6px 0 0; padding-left: 18px; font-size: 13.5px; }
.prj-cara-ref { margin-bottom: 14px; background: #F7F5F1; border-radius: 10px; padding: 8px 12px; }
.prj-cara-ref summary { cursor: pointer; font-weight: 600; color: #1B5E52; }
.prj-qgroup { border: 1px solid #E4DFD3; border-radius: 10px; padding: 8px 12px 4px; margin: 0 0 12px; }
.prj-qgroup legend { font-weight: 600; color: #1B5E52; padding: 0 6px; }
.prj-q { padding: 8px 0; border-bottom: 1px solid #F0EDE5; }
.prj-q:last-child { border-bottom: none; }
.prj-q-text { font-size: 14px; margin-bottom: 4px; }
.prj-q-opts { display: flex; gap: 16px; font-size: 14px; }
.prj-q-note { font-size: 12.5px; color: #6B6659; margin-top: 4px; }
.prj-q-focus .prj-q-text::before { content: "Likely relevant · "; color: #1B5E52; font-size: 12px; font-weight: 600; }
.prj-q-missing { background: #FFF6E0; margin: 0 -12px; padding: 8px 12px; }
.prj-crit { color: #C0392B; font-weight: 700; }
.prj-steps { display: grid; gap: 10px; margin-bottom: 8px; }
.prj-step { display: grid; grid-template-columns: 28px 1fr 1fr 1fr auto; gap: 8px; align-items: start; border: 1px solid #E4DFD3; border-radius: 10px; padding: 8px; }
.prj-step label { display: flex; flex-direction: column; font-size: 12px; color: #6B6659; gap: 2px; }
.prj-step textarea { width: 100%; padding: 6px 8px; border: 1px solid #E4DFD3; border-radius: 8px; font: inherit; font-size: 13.5px; box-sizing: border-box; }
.prj-step-num { font-weight: 700; color: #1B5E52; padding-top: 18px; }
@media (max-width: 700px) { .prj-step { grid-template-columns: 1fr; } .prj-step-num { padding-top: 0; } }

/* Approval checks (cara-checks.js) */
.chk-panel { border: 1px solid #E8C9A0; background: #FFF9F0; border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; font-size: 14px; }
.chk-panel.chk-ok { border-color: #BFDCCB; background: #F1F8F4; color: #1d5a37; }
.chk-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.chk-head span { color: #6B6659; font-size: 13px; }
.chk-list { margin: 0; padding-left: 18px; }
.chk-list li { margin: 6px 0; }
.chk-list a { color: #1A1D1B; }
.chk-block::marker { color: #C0392B; }
.chk-review::marker { color: #B7791F; }
.chk-tag { font-size: 12px; color: #B7791F; margin-left: 6px; }
.chk-resolve { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.chk-resolve input[type=text] { flex: 1; min-width: 200px; padding: 5px 8px; border: 1px solid #E4DFD3; border-radius: 8px; font: inherit; font-size: 13px; }
.chk-resolved { margin-top: 8px; font-size: 13px; color: #6B6659; }
.chk-alert { background: #FBE0DD; color: #8f1111; border-radius: 10px; padding: 10px 12px; margin: 0 0 12px; font-size: 14px; }
:target { scroll-margin-top: 90px; }
.form-row:has(> :target), .form-row:has(:target) { outline: 3px solid #F3D19E; outline-offset: 4px; border-radius: 8px; }
.fa-insert { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: -4px 0 12px; font-size: 13px; color: #6B6659; }
.ai-privacy-note { display: block; font-size: 12.5px; color: #6B6659; margin-top: 4px; }
.prj-qrelevant { border-color: #1B5E52; background: #F7FBF9; }
.prj-screen-head { font-size: 13.5px; color: #3f3b33; margin: 4px 0 10px; }
.cr-unsafe { border-left: 4px solid #C0392B; padding: 6px 10px; margin: 8px 0; background: #FFF6F5; border-radius: 6px; }
.cr-ph { color: #6b4a00; font-size: 13.5px; margin: 6px 0; }
.cr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
@media (max-width: 700px) { .cr-cols { grid-template-columns: 1fr; } }
.cr-pre { white-space: pre-wrap; font-family: inherit; font-size: 13px; background: #fff; border: 1px solid #E4DFD3; border-radius: 8px; padding: 8px; margin: 4px 0; }

/* CARA type (cara-type.js) */
.type-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
@media (max-width: 700px) { .type-choice { grid-template-columns: 1fr; } }
.type-card { display: block; border: 1px solid #E4DFD3; border-radius: 14px; background: #fff; padding: 18px; text-decoration: none; color: #1A1D1B; }
.type-card:hover { border-color: #1B5E52; box-shadow: 0 2px 10px rgba(27,94,82,.12); }
.type-card strong { display: block; font-size: 17px; color: #1B5E52; margin-bottom: 6px; }
.type-card span { font-size: 14px; color: #3f3b33; line-height: 1.45; }
.type-bar { background: #F2F8F6; border: 1px solid #CFE3DC; border-radius: 10px; padding: 10px 12px; margin-bottom: 14px; }
.type-bar label { font-weight: 600; display: block; margin-bottom: 4px; }
.type-bar select { padding: 8px 10px; border: 1px solid #CFE3DC; border-radius: 8px; font: inherit; }
.vet-section { border-left: 3px solid #1B5E52; padding-left: 12px; }
.prj-panel-vet { border-color: #1B5E52; border-width: 2px; }
.prj-q .prj-crit { display: none; }
.prj-q.prj-q-critical .prj-crit { display: inline; }
.prj-more summary { cursor: pointer; color: #1B5E52; font-weight: 600; padding: 6px 0; }

/* Staged CARA / project forms (cara-form.js) */
.stage-nav ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; }
.stage-btn { width: 100%; text-align: left; border: 1px solid #E4DFD3; background: #F7F5F1; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: 13.5px; color: #3f3b33; cursor: pointer; min-height: 44px; }
.stage-btn.current { background: #1B5E52; color: #fff; border-color: #1B5E52; }
.stage-btn:focus-visible { outline: 3px solid #F3D19E; outline-offset: 2px; }
.stage-num { display: inline-block; width: 20px; height: 20px; line-height: 20px; text-align: center; border-radius: 50%; background: rgba(0,0,0,.08); font-weight: 700; margin-right: 4px; font-size: 12px; }
.stage-btn.current .stage-num { background: rgba(255,255,255,.25); }
.stage-todo { display: block; font-size: 11.5px; margin-top: 2px; opacity: .85; }
.stage-todo.has-todo { color: #B7791F; }
.stage-btn.current .stage-todo.has-todo { color: #FFE2A8; }
.stage-todo.done { color: #2F7D5A; }
.stage-btn.current .stage-todo.done { color: #CDEFD9; }
@media (max-width: 640px) { .stage-nav ol { grid-template-columns: 1fr 1fr; } }
.stage-title { font-size: 18px; margin: 0 0 12px; color: #1A1D1B; }
.stage-sub { font-size: 15px; margin: 18px 0 6px; color: #1B5E52; }
.field-help { font-size: 12.5px; color: #6B6659; margin: 4px 0 0; }
.stage-bar { position: sticky; bottom: 0; background: #fff; border-top: 1px solid #E4DFD3; padding: 10px 0 4px; margin-top: 18px; display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; z-index: 5; }
.stage-bar #stage_back { margin-right: auto; }
.saved-msg { background: #E4F3EA; color: #1d5a37; border-radius: 8px; padding: 6px 10px; margin-bottom: 10px; font-size: 13.5px; }
.type-radios { border: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.type-radios legend { font-weight: 600; margin-bottom: 6px; padding: 0; }
.type-radio { display: flex; gap: 8px; align-items: flex-start; border: 1px solid #E4DFD3; border-radius: 12px; padding: 10px 12px; cursor: pointer; background: #fff; }
.type-radio:has(input:checked) { border-color: #1B5E52; background: #F2F8F6; }
.type-radio strong { display: block; color: #1B5E52; }
.type-radio small { display: block; color: #6B6659; font-size: 12.5px; line-height: 1.4; margin-top: 2px; }
@media (max-width: 640px) { .type-radios { grid-template-columns: 1fr; } }
.tool-selected { font-size: 13.5px; margin: 6px 0 10px; line-height: 2; }
.tool-chip-sel { display: inline-block; background: #E4F3EA; color: #1d5a37; border-radius: 999px; padding: 0 10px; font-size: 12.5px; }
.tool-chip-sel.unapproved { background: #FBEBD0; color: #7a5a00; }
.equip-info { font-size: 13px; color: #1B5E52; margin: 6px 0; }
.draft-group { border: 1px solid #E4DFD3; border-radius: 12px; padding: 4px 12px 8px; margin: 10px 0; background: #fff; }
.draft-group > summary { cursor: pointer; font-weight: 600; color: #1B5E52; padding: 8px 0; }
.draft-count { font-weight: 400; font-size: 12.5px; color: #B7791F; margin-left: 6px; }
.hz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 640px) { .hz-grid { grid-template-columns: 1fr; } }
.ai-privacy-more { display: inline; }
.ai-privacy-more summary { display: inline; cursor: pointer; color: #1B5E52; text-decoration: underline; }
.prj-q-note summary { cursor: pointer; color: #1B5E52; font-size: 12.5px; }

/* CARA overview workspace */
.ws-next { display: flex; align-items: center; gap: 12px; background: #F2F8F6; border: 1px solid #CFE3DC; border-radius: 12px; padding: 10px 14px; margin: 0 0 16px; flex-wrap: wrap; }
.ws-next span { font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: #6B6659; }
.ws-next-bad { background: #FBE0DD; border-color: #E8A39B; }
.ws-next-ok { background: #E4F3EA; border-color: #BFDCCB; }
.ws-h { font-size: 15px; margin: 0 0 8px; color: #1A1D1B; }
.ws-checks { margin-bottom: 16px; }
.chk-groups { display: grid; gap: 8px; }
.chk-group { border: 1px solid #E4DFD3; border-radius: 10px; padding: 6px 12px; background: #fff; }
.chk-group > summary { cursor: pointer; padding: 4px 0; }
.chk-count { display: inline-block; min-width: 20px; text-align: center; border-radius: 999px; background: #F0EDE5; padding: 0 6px; font-size: 12px; margin-left: 4px; }
.chk-sub { color: #6B6659; font-size: 12.5px; margin-left: 6px; }
.chk-g-teacher { border-left: 4px solid #C0392B; }
.chk-g-equipment { border-left: 4px solid #B7791F; }
.chk-g-projects { border-left: 4px solid #B7791F; }
.chk-g-reviewer { border-left: 4px solid #3E7D71; }
.ws-actions { padding: 18px; margin-bottom: 16px; }
.ws-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ws-tools form { margin: 0; }
.full-assessment { border: 1px solid #E4DFD3; border-radius: 12px; background: #fff; padding: 4px 14px; margin-bottom: 16px; }
.full-assessment > summary { cursor: pointer; font-weight: 600; color: #1B5E52; padding: 10px 0; }
.full-assessment-body { padding-bottom: 10px; }

/* The hidden attribute always wins over button/display styles. */
[hidden] { display: none !important; }
.loc-mode { border: 1px solid var(--border, #e3dfd6); border-radius: 10px; padding: 10px 14px 12px; margin: 4px 0 12px; }
.loc-mode legend { font-weight: 600; font-size: 14px; padding: 0 6px; }
.loc-mode label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; margin: 6px 0; font-weight: 400; }
.loc-mode input[type="radio"] { margin-top: 3px; flex: none; }

/* --- Stage refinements --- */
.req-mark { color: #B4462F; font-weight: 700; }
.req-legend { margin-top: -4px; }
.stage-todo.st-not-started { color: #8A8578; }
.stage-todo.st-in-progress { color: #A8641B; }
.stage-todo.st-ready { color: #2E7D5B; }
.stage-btn.current .stage-todo { color: #E8F3EE; }
.stage-title:focus { outline: none; }
.stage-title:focus-visible { outline: 2px solid #1B5E52; outline-offset: 4px; border-radius: 4px; }
.prj-gate-hint { font-size: 13px; color: #6B6659; margin: 2px 0 6px; }
.prj-q-gate-open { background: #FFF7E6; border-radius: 8px; }
.prj-unsure-note { display: none; font-size: 13px; color: #A8641B; margin: 4px 0 0; }
.prj-q-unsure { border-left: 3px solid #E0A33B; padding-left: 8px; }
.prj-q-unsure .prj-unsure-note { display: block; }
.ai-draft-ready { flex-basis: 100%; font-size: 13px; color: #6B6659; }
.ai-draft-ready a { color: #1B5E52; }
.chk-stage { font-size: 12px; color: #6B6659; background: #F1EEE6; border-radius: 10px; padding: 1px 7px; margin-left: 4px; white-space: nowrap; }
.submit-blocked { background: #FFF4E5; border: 1px solid #F0C98A; border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
.submit-blocked a { color: #1B5E52; font-weight: 600; }
.submit-ready { border: 1px solid #BFDCCD; background: #F2FAF5; border-radius: 10px; padding: 12px 14px; margin-top: 10px; }
.submit-stale { color: #A8641B; font-weight: 600; }
.sig-block .signature-pad { max-width: 100%; }
.sig-msg { color: #B4462F; font-size: 13px; min-height: 0; margin: 4px 0; }
.risk-help { margin: 6px 0 10px; font-size: 14px; }
.risk-help summary { cursor: pointer; color: #1B5E52; font-weight: 600; }
.risk-help ol { margin: 6px 0 6px 18px; padding: 0; }
.risk-levels { border: 1px solid #E3DFD6; border-radius: 10px; padding: 10px 12px; margin: 6px 0 12px; background: #FBFAF7; }
.risk-level-row { display: flex; gap: 10px; align-items: baseline; font-size: 14px; margin: 4px 0; }
.risk-level-row .badge { flex: none; min-width: 64px; text-align: center; }

/* ---------- Laptop layout for CARA and project pages ----------
   Forms are wider (640 → 1056px) and overview pages are capped
   for readable line length. The sidebar is unchanged. Grids respond to
   the form's own width (container queries), so zoom and narrow windows
   fall back to fewer columns without horizontal scrolling. */
:root { --stage-form-max: 1056px; --ws-page-max: 1370px; --stage-bar-h: 64px; }
.form-card.cara-stages { max-width: var(--stage-form-max); width: 100%; box-sizing: border-box; container-type: inline-size; container-name: stageform; }
.ws-page { max-width: var(--ws-page-max); min-width: 0; }
.ws-page .prj-table-wrap { overflow-x: auto; }
.ws-page img, .form-card.cara-stages img { max-width: 100%; height: auto; }

/* Keep a focused field clear of the sticky action bar. */
html { scroll-padding-bottom: calc(var(--stage-bar-h) + 24px); scroll-padding-top: 16px; }
.stage-bar { box-shadow: 0 -6px 12px -10px rgba(26, 29, 27, .25); align-items: center; }
.stage-bar .btn { white-space: nowrap; }

/* Progress steps: number + label on one line, status on the next. */
.stage-btn { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; align-items: start; line-height: 1.3; }
.stage-btn .stage-num { margin: 0; }
.stage-lbl { font-weight: 600; padding-top: 1px; overflow-wrap: anywhere; }
.stage-btn .stage-todo { grid-column: 1 / -1; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Short related fields share a row; long text stays full width. */
.form-card.cara-stages .cohort-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.form-card.cara-stages .hz-grid { gap: 0 16px; }
.ai-suggest-wide { grid-column: 1 / -1; }
.form-card.cara-stages textarea { max-width: 100%; box-sizing: border-box; }

@container stageform (max-width: 620px) {
  .cohort-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cohort-grid > [style*="span 2"] { grid-column: 1 / -1 !important; }
  .stage-nav ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container stageform (max-width: 480px) {
  .cohort-grid, .hz-grid { grid-template-columns: 1fr !important; }
  .cohort-grid > * { grid-column: auto !important; }
  .type-radios { grid-template-columns: 1fr; }
  .stage-bar { justify-content: stretch; }
  .stage-bar .btn { flex: 1 1 auto; }
  .stage-bar #stage_back { margin-right: 0; }
}

/* Phones: the bottom navigation is fixed, so the action bar sits above it. */
@media (max-width: 768px) {
  .form-card.cara-stages { padding: 18px 14px; }
  .form-card.cara-stages .stage-bar { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
  html { scroll-padding-bottom: calc(var(--stage-bar-h) + 84px); }
  .ws-page .page-header { flex-wrap: wrap; gap: 8px; }
}
/* Phones: linked projects table becomes stacked cards. */
@media (max-width: 640px) {
  .ws-page .prj-table thead { display: none; }
  .ws-page .prj-table, .ws-page .prj-table tbody, .ws-page .prj-table tr, .ws-page .prj-table td { display: block; width: auto; }
  .ws-page .prj-table tr { border: 1px solid #E4DFD3; border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
  .ws-page .prj-table td { padding: 2px 0; border: none; }
  .ws-page .prj-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: #6B6659; font-size: 12.5px; }
}
/* Placeholders still to fill in, shown under the text box */
.ph-hint { font-size: 13px; color: #8A4B0F; background: #FFF4E5; border: 1px solid #F0C98A; border-radius: 8px; padding: 6px 10px; margin: 6px 0 4px; line-height: 1.9; }
.ph-chip { font: inherit; font-size: 12.5px; background: #fff; border: 1px solid #E0A33B; color: #7A4A00; border-radius: 999px; padding: 0 9px; margin: 0 4px 0 0; cursor: pointer; }
.ph-chip:hover, .ph-chip:focus-visible { background: #FBE3B8; outline: none; }
textarea.ph-flash { animation: phflash 1.6s ease-out; }
@keyframes phflash { 0% { box-shadow: 0 0 0 4px #F3C16B; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ph-mark { background: #FBE3B8; color: #7A4A00; border-radius: 4px; padding: 0 3px; font-weight: 600; }
/* Reviewer decision: approve or send back, side by side */
.review-decision { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 12px 0 16px; }
.review-col { border: 1px solid #E4DFD3; border-radius: 12px; padding: 14px 16px; background: #fff; display: flex; flex-direction: column; }
.review-col h3 { margin: 0 0 8px; font-size: 15px; color: #1A1D1B; }
.review-col .form-row { margin-bottom: 12px; flex: 1; }
.review-col input[type="text"] { max-width: 360px; }
.review-col .btn { align-self: flex-start; width: auto; min-width: 140px; }
.review-approve { border-color: #BFDCCD; background: #F6FBF8; }
.review-return { border-color: #F0C98A; background: #FFFBF4; }
.btn-return { background: #fff; color: #8A4B0F; border: 1px solid #D9962E; }
.btn-return:hover { background: #FBE3B8; }
.review-sentback { background: #FFF4E5; border: 1px solid #F0C98A; border-radius: 10px; padding: 10px 14px; margin: 10px 0; font-size: 14px; }
@media (max-width: 760px) { .review-decision { grid-template-columns: 1fr; } }
.review-blocked { font-size: 13.5px; color: #8A4B0F; margin: 0 0 10px; } .review-blocked a { color: #1B5E52; font-weight: 600; }
.review-col .btn { justify-content: center; text-align: center; }
/* Long PERA forms: Save stays visible at the bottom of the screen. */
.form-actions.sticky-actions { position: sticky; bottom: 0; z-index: 5; background: #fff; border-top: 1px solid #E4DFD3; padding: 10px 0 6px; margin-top: 18px; box-shadow: 0 -6px 12px -10px rgba(26, 29, 27, .25); }
@media (max-width: 768px) { .form-actions.sticky-actions { bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } }

/* ---------- Teacher dashboard (teacher-dashboard.js) ---------- */
.td-next { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 20px 22px; margin-bottom: 16px; border-left: 4px solid #1B5E52; }
.td-next-changes, .td-next-approvals { border-left-color: #C0392B; }
.td-next-induction, .td-next-draft, .td-next-equipment { border-left-color: #B7791F; }
.td-next-none { border-left-color: #2F7D5A; }
.td-next-title { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6B6659; font-weight: 700; }
.td-next-text { font-size: 17px; font-weight: 600; color: #1A1D1B; margin-top: 4px; }
.td-next-sub { font-size: 13px; color: #6B6659; margin-top: 4px; }
.td-next-btn { font-size: 15px; padding: 12px 22px; }
.td-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
.td-action { display: flex; flex-direction: column; gap: 4px; background: #FFFFFF; border: 1px solid #E4DFD3; border-top: 4px solid #D9D3C4; border-radius: 12px; padding: 14px 16px; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.td-action:hover, .td-action:focus-visible { box-shadow: 0 4px 14px rgba(26,29,27,.08); transform: translateY(-1px); }
.td-action-title { font-size: 15px; font-weight: 700; color: #1A1D1B; }
.td-action-hint { font-size: 12.5px; color: #6B6659; line-height: 1.35; }
.td-count { display: inline-block; min-width: 22px; text-align: center; font-size: 12px; font-weight: 700; background: #F0EDE5; color: #1A1D1B; border-radius: 999px; padding: 1px 7px; margin-left: 4px; vertical-align: 2px; }
.td-primary { border-top-color: #1B5E52; background: #F3F8F6; }
.td-alert { border-top-color: #C0392B; } .td-alert .td-count { background: #FBE0DD; color: #8A2A1E; }
.td-warn { border-top-color: #B7791F; } .td-warn .td-count { background: #FBEBD0; color: #7A4F0F; }
.td-ok { border-top-color: #2F7D5A; }
.td-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 16px; }
.td-card { padding: 18px 20px; margin: 0; }
.td-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.td-card-head h2 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #6B6659; margin: 0; }
.td-card-head a { font-size: 13px; color: #1B5E52; font-weight: 600; text-decoration: none; }
.td-list { list-style: none; margin: 0; padding: 0; }
.td-list > li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 9px 0; border-top: 1px solid #F0EDE5; font-size: 14px; }
.td-list > li:first-child { border-top: none; }
.td-row-main { color: #1A1D1B; font-weight: 600; text-decoration: none; flex: 1 1 200px; min-width: 0; overflow-wrap: anywhere; }
.td-row-main:hover { color: #1B5E52; }
.td-row-act { font-size: 13px; font-weight: 600; color: #1B5E52; text-decoration: none; }
.td-meta { font-size: 12.5px; color: #6B6659; width: 100%; margin: 0; }
.td-issues { width: 100%; }
.td-empty { font-size: 14px; color: #6B6659; margin: 0; }
.td-empty a, .td-ind-next a { color: #1B5E52; font-weight: 600; }
.td-ind-next { font-size: 14px; margin: 0 0 6px; }
.td-totals { margin-top: 8px; }
.td-totals .stat-grid { margin-top: 4px; }
@media (max-width: 520px) {
  .td-actions { grid-template-columns: 1fr 1fr; gap: 10px; }
  .td-action { padding: 12px; }
  .td-next-btn { width: 100%; justify-content: center; text-align: center; }
}
@media (max-width: 360px) { .td-actions { grid-template-columns: 1fr; } }

/* ---------- Equipment attention (equipment-attention.js) ---------- */
.chip-attention { background: #FBE0DD; color: #8A2A1E; border-color: #FBE0DD; }
.chip-attention.active { background: #C0392B; color: #FFFFFF; border-color: #C0392B; }
.eq-cell-date { font-size: 12px; color: #6B6659; margin-top: 3px; }
.eq-name-link { color: #1A1D1B; font-weight: 600; text-decoration: none; }
tr.row-attention td:first-child { box-shadow: inset 3px 0 0 #C0392B; }
.eq-anchor { display: block; position: relative; top: -16px; }
@media (max-width: 768px) {
  .card:has(> table.eq-table) table.eq-table { min-width: 0; }
  table.eq-table thead { display: none; }
  table.eq-table, table.eq-table tbody, table.eq-table tr, table.eq-table td { display: block; width: 100%; box-sizing: border-box; }
  table.eq-table tr { border-bottom: 1px solid #E4DFD3; padding: 10px 14px; }
  table.eq-table td { border: none; padding: 3px 0; }
  table.eq-table tr.row-attention { box-shadow: inset 4px 0 0 #C0392B; }
  table.eq-table tr.row-attention td:first-child { box-shadow: none; }
  table.eq-table td[data-label]:not([data-label="Name"])::before { content: attr(data-label) ": "; font-size: 12px; color: #6B6659; font-weight: 600; }
  table.eq-table td[data-label="Inspection"] .eq-cell-date, table.eq-table td[data-label="Maintenance"] .eq-cell-date { display: inline; margin-left: 6px; }
}

/* ---------- CARA step 2: tool selection (cara-form.js) ---------- */
.tool-help p { font-size: 13px; color: #4A463D; margin: 0 0 8px; line-height: 1.45; }
.tool-help a { color: #1B5E52; font-weight: 600; }
.tool-selected { position: sticky; top: 0; z-index: 3; background: #FFFFFF; padding: 6px 0; margin: 4px 0 10px; border-bottom: 1px solid transparent; }
.tool-selected.has-sel { border-bottom-color: #E4DFD3; }
.tool-chip-sel { display: inline-flex; align-items: center; gap: 2px; line-height: 1.6; margin: 2px 0; }
.tool-chip-x { border: none; background: transparent; color: inherit; font-size: 15px; line-height: 1; padding: 0 2px 0 6px; cursor: pointer; opacity: .7; }
.tool-chip-x:hover, .tool-chip-x:focus-visible { opacity: 1; }
.tool-room { border: 1px solid #CFE3DD; background: #F3F8F6; border-radius: 8px; padding: 10px 0 6px; margin-bottom: 12px; }
.tool-room-h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #1B5E52; margin: 0 14px 6px; }
.tool-room-empty { margin: 0 14px 6px; }
.tool-room-empty:empty { display: none; }
.tool-room-item:hover { background: #E9F2EE; }
.tool-picker-item label { display: flex; flex-direction: column; min-width: 0; }
.tp-name { font-weight: 500; color: #1A1D1B; }
.tp-meta { font-size: 11.5px; color: #6B6659; line-height: 1.35; overflow-wrap: anywhere; }
.tp-kind { font-weight: 600; color: #4A463D; }
.tp-attn { color: #8A2A1E; font-weight: 600; text-decoration: none; }
.tool-picker-group-sel { margin-left: auto; text-transform: none; letter-spacing: normal; color: #1B5E52; font-weight: 600; }
.tp-search-label { display: block; font-size: 12px; font-weight: 600; color: #4A463D; margin-bottom: 4px; }
#tool_search_count { display: block; margin-top: 4px; }
#tool_search_count:empty { display: none; }

/* ---------- CARA step 3: completion summary (cara-form.js) ---------- */
.draft-summary { border: 1px solid #E4DFD3; border-radius: 12px; background: #FBFAF7; padding: 12px 14px; margin: 10px 0 14px; }
.draft-summary-h { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: #1A1D1B; }
.draft-summary-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@container stageform (max-width: 620px) { .draft-summary-cols { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .draft-summary-cols { grid-template-columns: 1fr; } }
.ds-col-h { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.ds-done .ds-col-h { color: #2F7D5A; } .ds-todo .ds-col-h { color: #A8641B; } .ds-review .ds-col-h { color: #6B4FA0; }
.ds-col ul { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.ds-col li { padding: 3px 0; line-height: 1.35; }
.ds-col a { color: #1B5E52; font-weight: 600; }
.ds-why { color: #6B6659; font-size: 12px; }
.draft-status { font-size: 11.5px; font-weight: 600; margin-left: 8px; padding: 1px 8px; border-radius: 999px; vertical-align: 1px; }
.draft-status.ds-st-done { background: #E4F3EA; color: #2F7D5A; }
.draft-status.ds-st-todo { background: #FBEBD0; color: #7A4F0F; }
.draft-status.ds-st-opt { background: #F0EDE5; color: #6B6659; }
@media (max-width: 640px) {
  .tool-picker-item { flex-wrap: wrap; row-gap: 2px; }
  .tool-picker-item label { flex: 1 1 calc(100% - 34px); }
  .tool-picker-item .badge { margin-left: 0; }
  .tool-picker-item .tool-picker-flag { margin-left: 26px; }
  .tool-picker-item > input + label + .badge { margin-left: 26px; }
}

/* CARA step 2: the teacher's own induction for the selected equipment */
.ind-gaps { border: 1px solid #E4DFD3; border-left: 4px solid #B7791F; background: #FFFBF2; border-radius: 8px; padding: 10px 14px; margin: 8px 0 14px; font-size: 13.5px; }
.ind-gaps-h { margin: 0 0 6px; font-size: 14px; }
.ind-gaps ul { margin: 0 0 6px; padding-left: 18px; }
.ind-gaps li { margin: 3px 0; }

/* Dashboard next step: one main button, optional quieter link */
.td-next-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.td-next-secondary { color: #1B5E52; font-weight: 600; font-size: 14px; }
@media (max-width: 640px) { .td-next-acts { width: 100%; align-items: stretch; } .td-next-secondary { text-align: center; padding: 6px 0; } }

/* Entry card for the guided first visit (onboarding.js) on My induction */
.ob-entry { padding: 16px 20px; margin-bottom: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; border-left: 4px solid #1B5E52; }
.ob-entry p { margin: 0; font-size: 15px; }
@media (max-width: 520px) { .ob-entry .btn { width: 100%; justify-content: center; text-align: center; } }

/* Staff invitations (staff-invitations.js, Manage Staff) */
a.school-switch-link { text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
a.school-switch-link:hover, a.school-switch-link:focus-visible { border-color: #1B5E52; }
.staff-flash { background: #E4F3EA; border: 1px solid #9BCDB4; color: #1F5C40; border-radius: 8px; padding: 12px 14px; margin: 0 0 14px; font-size: 14px; }
.staff-table td { vertical-align: top; }
.staff-name { color: #1B5E52; font-weight: 600; }
.staff-inv-detail { display: block; font-size: 12px; color: #6B6659; margin-top: 3px; max-width: 280px; }
.staff-inline-form { display: inline-block; margin: 0 6px 4px 0; }
.staff-inv-card { padding: 14px 18px; margin-bottom: 16px; max-width: 520px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.staff-inv-card .form-section-hint { margin: 0; }
.inv-join-kv { display: grid; grid-template-columns: 160px 1fr; gap: 6px 12px; font-size: 14px; margin: 14px 0; padding: 12px 14px; background: #F5F3EE; border-radius: 8px; }
.inv-join-kv span { color: #6B6659; }
.inv-join-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 16px; }
.inv-join-later { color: #1B5E52; font-weight: 600; }
.acct-schools { list-style: none; margin: 0; padding: 0; }
.acct-schools li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #F0EDE5; }
.acct-schools li:first-child { border-top: none; }
@media (max-width: 760px) {
  .staff-table thead { display: none; }
  .staff-table tr { display: block; border-top: 1px solid #E4DFD3; padding: 10px 0; }
  .staff-table td { display: block; border: none; padding: 3px 12px; }
  .inv-join-kv { grid-template-columns: 1fr; }
  .acct-schools li { flex-direction: column; align-items: flex-start; }
}

/* Active school (school-guards.js / layout) */
.school-switch strong { font-weight: 600; }
.school-switch-label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #6B6659; margin-right: 4px; }
@media (max-width: 520px) { .school-switch-label { display: none; } }

/* PERA templates, school setup guide, platform schools */
.tpl-list { list-style: none; margin: 0; padding: 0; }
.tpl-list li { padding: 6px 0; border-top: 1px solid #F0EDE5; }
.tpl-list li:first-child { border-top: none; }
.tpl-row { display: flex; justify-content: space-between; gap: 14px; align-items: center; padding: 12px 0 !important; }
.tpl-diff { width: 100%; font-size: 13.5px; }
.tpl-diff td { vertical-align: top; }
.tpl-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tpl-banner { margin-bottom: 14px; }
.setup-progress { height: 8px; background: #F0EDE5; border-radius: 99px; overflow: hidden; margin: 0 0 16px; max-width: 760px; }
.setup-progress span { display: block; height: 100%; background: #1B5E52; }
.setup-list { list-style: none; margin: 0; padding: 0; max-width: 860px; }
.setup-item { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: start; background: #fff; border: 1px solid #E4DFD3; border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; }
.setup-mark { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #D9D3C4; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; color: #2F7D5A; }
.setup-done .setup-mark { background: #E4F3EA; border-color: #9BCDB4; }
.setup-state { font-size: 12px; font-weight: 600; color: #6B6659; margin-left: 6px; }
.setup-done .setup-state { color: #2F7D5A; }
.setup-todo .setup-state { color: #B7791F; }
.setup-why { margin-top: 2px; }
.setup-acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.pf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pf-invite { max-width: 520px; margin-top: 10px; }
@media (max-width: 760px) {
  .setup-item { grid-template-columns: 28px 1fr; }
  .setup-acts { grid-column: 2; align-items: flex-start; flex-direction: row; flex-wrap: wrap; }
  .pf-grid { grid-template-columns: 1fr; }
  .tpl-row { flex-direction: column; align-items: flex-start; }
}

/* Disabled buttons look disabled (e.g. "Mark setup complete" before every item is done) */
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.setup-finish-help { margin-top: 8px; }

/* Read-only support access by a PracReady platform administrator */
.support-banner { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; background: #FFF4C2; border: 1px solid #C9A400; border-left: 6px solid #1A1D1B; color: #1A1D1B; border-radius: 8px; padding: 10px 14px; margin: 0 0 16px; font-size: 14px; }
.support-banner form { margin: 0; }

/* Read-only support access: controls that change records are hidden (the
   server refuses every change regardless; see support-workspace.js). */
.support-mode form[method="post" i]:not(.support-end) :is(button, input[type="submit"], input[type="file"]),
.support-mode a[href$="/new"], .support-mode a[href*="/new?"], .support-mode a[href$="/edit"], .support-mode a[href*="/edit?"],
.support-mode a[href^="/cara/new"], .support-mode a[href^="/pera/new"], .support-mode a[href^="/equipment/new"],
.support-mode a[href^="/induction/start"], .support-mode a[href^="/induction/me"] { display: none !important; }
.support-mode .support-readonly-note { display: block; font-size: 12.5px; color: #6B6659; font-style: italic; margin: 4px 0; }
/* School overview (support) */
.sw-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin: 0 0 16px; }
.sw-tile { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid #E4DFD3; border-top: 4px solid #1B5E52; border-radius: 10px; padding: 12px 14px; text-decoration: none; color: #1A1D1B; }
.sw-tile.sw-warn { border-top-color: #B7791F; }
.sw-num { font-size: 24px; font-weight: 700; }
.sw-label { font-size: 13px; color: #4A463D; }
.sw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.sw-card { padding: 16px 20px; }
.sw-card h2 { font-size: 16px; margin: 0 0 8px; }
.sw-list { list-style: none; margin: 0 0 8px; padding: 0; font-size: 14px; }
.sw-list li { padding: 6px 0; border-top: 1px solid #F0EDE5; }
.sw-list li:first-child { border-top: 0; }

.support-mode form[method="post" i]:not(.support-end) :is(input, select, textarea):disabled { background: #F3F1EC; color: #6B6659; cursor: not-allowed; }