@import './tokens.css';

/* ── Reset & base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Impersonation banner ─────────────────────────────────────── */
#impersonation-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9999;
  background: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 20px;
  font-size: 0.8125rem;
  font-weight: 600;
  box-shadow: 0 -2px 8px rgba(0,0,0,.15);
}
#impersonation-bar button {
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.5);
  color: #fff;
  border-radius: 4px;
  padding: 3px 12px;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
}
#impersonation-bar button:hover { background: rgba(255,255,255,.35); }

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  color: var(--colour-text);
  background: var(--colour-surface);
  line-height: 1.6;
  text-align: left;
}

a { color: var(--purple); text-decoration: underline; }
a:hover { color: var(--teal-text); }

img { display: block; max-width: 100%; }

h1, h2, h3, h4, h5 {
  font-weight: var(--font-weight-bold);
  line-height: 1.25;
  color: var(--colour-text);
}

/* ── App shell ────────────────────────────────────────────── */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--topbar-height) 1fr;
  min-height: 100vh;
  transition: grid-template-columns 0.2s ease;
}
.app-shell.sidebar-collapsed {
  grid-template-columns: 0 1fr;
}

/* Top bar */
.topbar {
  grid-column: 1 / -1;
  background: var(--purple);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-6);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-md);
}

.topbar__wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
}

.topbar__wordmark img {
  height: 32px;
  width: auto;
}

.topbar__user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--white);
  font-size: var(--font-size-sm);
  position: relative;
}

.topbar__user-name {
  display: none;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  transition: background .15s;
}

@media (min-width: 768px) {
  .topbar__user-name { display: block; }
}

.topbar .topbar__profile-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: 2px 6px 2px 2px;
  transition: background .15s;
}

.topbar .topbar__profile-link:hover,
.topbar #btn-logout:hover { background: rgba(255,255,255,.18); color: #fff; }

.avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--teal-text);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.font-size-ctrl {
  display: flex;
  align-items: center;
  gap: 2px;
}
.font-size-btn {
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: var(--white);
  cursor: pointer;
  border-radius: var(--radius-sm);
  padding: 2px 7px;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .02em;
  transition: background 0.15s, border-color 0.15s;
  font-family: var(--font-family);
}
.font-size-btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

/* Sidebar */
.sidebar {
  background: var(--white);
  border-right: 1px solid var(--colour-border);
  padding: var(--space-6) 0;
  overflow-y: auto;
  overflow-x: hidden;
  position: sticky;
  top: var(--topbar-height);
  height: calc(100vh - var(--topbar-height));
  transition: padding 0.2s ease;
}
.app-shell.sidebar-collapsed .sidebar {
  padding: 0;
  border-right: none;
}

/* Sidebar toggle button (sits in topbar) */
.sidebar-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,.8);
  cursor: pointer;
  padding: var(--space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
  flex-shrink: 0;
}
.sidebar-toggle:hover { color: #fff; background: rgba(255,255,255,.1); }

.sidebar__section {
  margin-bottom: var(--space-6);
}

.sidebar__nav { list-style: none; }

.sidebar__item {
  position: relative;
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--colour-text);
  text-decoration: none;
  border-radius: 0;
  transition: background 0.12s, color 0.12s;
  border-left: 3px solid transparent;
}

.sidebar__link:hover {
  background: var(--colour-surface);
  color: var(--purple);
}

.sidebar__link.active {
  background: rgba(66, 42, 126, .06);
  color: var(--purple);
  border-left-color: var(--purple);
  font-weight: var(--font-weight-bold);
}

/* Disabled / greyed nav items */

/* Chevron on expandable top-level links */
.sidebar__chevron {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--grey);
  cursor: pointer;
  padding: 4px;
  margin-right: -4px;
}
.sidebar__item--open > .sidebar__link .sidebar__chevron {
  transform: rotate(180deg);
  color: var(--purple);
}

/* Sub-navigation — collapsed by default, revealed when parent is open */
.sidebar__subnav {
  list-style: none;
  display: none;
  margin-bottom: var(--space-2);
}
.sidebar__item--open > .sidebar__subnav {
  display: block;
}

.sidebar__sublink {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem var(--space-5) 0.25rem calc(var(--space-5) + 20px + var(--space-3));
  font-size: var(--font-size-sm);
  color: var(--colour-text-muted);
  text-decoration: none;
  transition: color 0.12s, background 0.12s;
  border-left: 3px solid transparent;
}

.sidebar__sublink:hover {
  background: var(--colour-surface);
  color: var(--purple);
}

.sidebar__sublink.active {
  background: rgba(66, 42, 126, .06);
  color: var(--purple);
  font-weight: var(--font-weight-medium);
}

/* Icon placeholder */
.nav-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main content */
.main-content {
  padding: var(--space-8);
  overflow-y: auto;
  scrollbar-gutter: stable; /* a scrollbar appearing/disappearing (e.g. filtering a long list) mustn't shift the page sideways */
  min-width: 0;
}

/* Ops dashboard iframe fills the entire content area, no portal padding */
.main-content:has(.ops-dashboard-frame) {
  padding: 0;
  overflow: hidden;
}
.ops-dashboard-frame {
  display: block;
  width: 100%;
  height: calc(100vh - var(--topbar-height));
  border: none;
}

/* ── The Corner graphic element ───────────────────────────── */
.corner {
  position: absolute;
  width: 0; height: 0;
  border-style: solid;
}
.corner--tl {
  top: 0; left: 0;
  border-width: 40px 40px 0 0;
  border-color: var(--teal) transparent transparent transparent;
}
.corner--br {
  bottom: 0; right: 0;
  border-width: 0 0 40px 40px;
  border-color: transparent transparent var(--teal) transparent;
}
.corner--tr {
  top: 0; right: 0;
  border-width: 40px 0 0 40px;
  border-color: var(--teal) transparent transparent transparent;
}
.corner--lg.corner--tl {
  border-width: 60px 60px 0 0;
}
.corner--lg.corner--br {
  border-width: 0 0 60px 60px;
}

/* ── EOY withdrawn holding page ───────────────────────────── */
.eoy-withdrawn-card {
  max-width: 640px;
  margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--colour-border);
  overflow: hidden;
}
.eoy-withdrawn-header {
  position: relative;
  overflow: hidden;
  background: var(--purple);
  padding: var(--space-6);
}
.eoy-withdrawn-eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #EEEDFE;
  margin-bottom: var(--space-3);
}
.eoy-withdrawn-header h1 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--white);
  margin: 0;
}
.eoy-withdrawn-body {
  padding: var(--space-6);
}
.eoy-withdrawn-body p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--colour-text-muted);
  margin: 0 0 var(--space-4);
}
.eoy-withdrawn-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}
.eoy-withdrawn-actions .btn {
  flex: 1 1 200px;
  justify-content: center;
}

/* Opt-out modifier — suppresses the auto-corner on specific cards */
.card--no-corner::before { display: none; }
/* Page-level suppressions */
.page--leave .card::before { display: none; }

/* Auto-corner on cards — small teal accent top-left */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 22px 22px 0 0;
  border-color: var(--teal) transparent transparent transparent;
  border-radius: var(--radius-lg) 0 0 0;
  z-index: 1;
}

/* Auto-corner on modals — small teal accent top-left */
.modal::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 0;
  border-style: solid;
  border-width: 22px 22px 0 0;
  border-color: var(--teal) transparent transparent transparent;
  border-radius: var(--radius-lg) 0 0 0;
  z-index: 1;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--colour-border);
  overflow: hidden;
  position: relative;
}

.card__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.card__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--purple);
}

.card__body {
  padding: var(--space-5) var(--space-6);
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
  white-space: nowrap;
  line-height: 1.4;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
/* Looks disabled but stays a real, clickable button — so clicking it can
   explain why it's not ready yet instead of doing nothing (native
   `disabled` suppresses click events entirely). */
.btn--soft-disabled { opacity: 0.45; }

.btn--primary {
  background: var(--purple);
  color: var(--white);
  border-color: var(--purple);
}
.btn--primary:hover:not(:disabled) { background: #341e62; border-color: #341e62; color: var(--white); }

.btn--secondary {
  background: var(--white);
  color: var(--purple);
  border-color: var(--purple);
}
.btn--secondary:hover:not(:disabled) { background: rgba(66,42,126,.06); }

.btn--ghost {
  background: transparent;
  color: var(--colour-text-muted);
  border-color: transparent;
}
.btn--ghost:hover:not(:disabled) { background: var(--colour-surface); color: var(--colour-text); }

/* Ghost button in the purple topbar needs its own hover so text stays readable */
.topbar #btn-logout:hover { background: rgba(255,255,255,.18); color: #fff; }

.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--font-size-xs); }

.btn--danger { background: var(--bright-red); color: var(--white); border-color: var(--bright-red); }
.btn--danger:hover:not(:disabled) { background: #c74252; }

/* Instant hover tooltip — use [data-tooltip="..."] instead of the native
   title attribute, which has an uncontrollable ~1.5s browser delay. The
   bubble itself is a single shared element positioned by JS (see ui.js)
   rather than a CSS ::after, so it can be clamped inside the viewport —
   a centred ::after overflows off-screen for triggers near an edge. */
.tooltip-bubble {
  position: fixed;
  top: 0;
  left: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  line-height: 1.4;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  max-width: 260px;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.08s ease;
  z-index: 9999;
}
.tooltip-bubble--visible { opacity: 1; }

/* ── Forms ────────────────────────────────────────────────── */
.form-group {
  margin-bottom: var(--space-5);
}
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

.form-label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--colour-text);
  margin-bottom: var(--space-2);
}

.form-label--required::after {
  content: ' *';
  color: var(--bright-red);
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  color: var(--colour-text);
  background: var(--white);
  border: 1.5px solid var(--colour-border);
  border-radius: var(--radius-md);
  transition: border-color 0.12s, box-shadow 0.12s;
  line-height: 1.5;
}

.form-control:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(66,42,126,.3);
}

.form-control::placeholder { color: #aaa; }

textarea.form-control {
  resize: vertical;
  min-height: 100px;
}

select.form-control { cursor: pointer; }

.richtext-toolbar {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}

.richtext-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--white);
  color: var(--colour-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}

.richtext-btn:hover { border-color: var(--teal); background: rgba(88,166,172,.08); }

.richtext-editor {
  min-height: 220px;
  max-height: 420px;
  overflow-y: auto;
  cursor: text;
}

.richtext-editor:focus { outline: none; }
.richtext-editor ul { margin: 0 0 8px 20px; padding: 0; }
.richtext-editor div, .richtext-editor p { margin: 0 0 8px; }
.richtext-editor div:last-child, .richtext-editor p:last-child { margin-bottom: 0; }

/* Manager response fields on the End of Year review — match the employee
   column's .text-sm read-only text so the two sides feel consistent, with
   a bit more height since the smaller font fits less per line. */
textarea.mgr-field {
  font-size: var(--font-size-sm);
  min-height: 140px;
}

.form-hint {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin-top: var(--space-1);
}

/* ── RAG elements ─────────────────────────────────────────── */
.rag-dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}
.rag-dot--green  { background: var(--rag-green); }
.rag-dot--amber  { background: var(--rag-amber); }
.rag-dot--red    { background: var(--rag-red); }
.rag-dot--none   { background: var(--rag-none); border: 1px solid #ccc; }
/* Directorate KR tracker — director/admin can click a dot to rate it directly
   (public/js/pages/directorate-krs.js's cycleDkrRag); everyone else still sees the
   plain static dot above. */
.rag-dot--editable { cursor: pointer; }
.rag-dot--editable:hover { opacity: .7; }
.rag-dot--editable:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.rag-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.rag-pill--green { background: rgba(30,158,87,.12); color: #1E9E57; }
.rag-pill--amber { background: rgba(239,128,50,.12); color: #c9621a; }
.rag-pill--red   { background: rgba(235,86,99,.12);  color: #a8202f; }
.rag-pill--none  { background: var(--rag-none); color: var(--colour-text-muted); }

/* ── Tables ───────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; }

/* End of Year review — Professional Development table (edit + read-only).
   Long focus-area/support text was clipping in single-line inputs; give the
   columns room, wrap the read-only cells, and let the edit textareas grow. */
#pd-table th:nth-child(1), #pd-table td:nth-child(1) { width: 20%; }
#pd-table th:nth-child(2), #pd-table td:nth-child(2) { width: 26%; }
#pd-table th:nth-child(3), #pd-table td:nth-child(3) { width: 13%; }
#pd-table th:nth-child(4), #pd-table td:nth-child(4) { width: 26%; }
#pd-table th:nth-child(5), #pd-table td:nth-child(5) { width: 32px; }
#pd-table td { vertical-align: top; }
/* Mid-probation "Agreed Next Actions" table — same look as #pd-table, different columns */
#na-table th:nth-child(1), #na-table td:nth-child(1) { width: 36%; }
#na-table th:nth-child(2), #na-table td:nth-child(2) { width: 16%; }
#na-table th:nth-child(3), #na-table td:nth-child(3) { width: 16%; }
#na-table th:nth-child(4), #na-table td:nth-child(4) { width: 28%; }
#na-table th:nth-child(5), #na-table td:nth-child(5) { width: 32px; }
#na-table td { vertical-align: top; }
#na-table .pd-cell-text { white-space: pre-wrap; }
#na-table .form-control { width: 100%; }
#pd-table .pd-cell-text {
  font-size: var(--font-size-xs);
  white-space: pre-wrap;
  word-break: break-word;
}
#pd-table textarea.pd-cell-textarea.form-control {
  min-height: 44px;
  font-size: var(--font-size-xs);
  padding: var(--space-2) var(--space-3);
  line-height: 1.4;
  resize: vertical;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

th {
  background: var(--colour-surface);
  color: var(--purple);
  font-weight: var(--font-weight-bold);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--colour-border);
  white-space: nowrap;
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  vertical-align: middle;
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(66,42,126,.02); }

/* ── Badges & tags ────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}
.badge--purple  { background: rgba(66,42,126,.12); color: var(--purple); }
.badge--teal    { background: rgba(88,166,172,.15); color: #3b7c80; }
.badge--grey    { background: var(--off-white); color: var(--grey); }
.badge--green   { background: rgba(30,158,87,.12);  color: #1E9E57; }
.badge--amber   { background: rgba(239,128,50,.12); color: #c9621a; }
.badge--red     { background: rgba(235,86,99,.12);  color: #a8202f; }

/* ── Status chips (review stages) ─────────────────────────── */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
}
.status-chip--not-started   { background: var(--off-white); color: var(--grey); }
.status-chip--self-draft    { background: rgba(239,128,50,.12); color: #c9621a; }
.status-chip--submitted     { background: rgba(88,166,172,.15); color: #3b7c80; }
.status-chip--manager-review{ background: rgba(66,42,126,.12); color: var(--purple); }
.status-chip--signed-off    { background: rgba(30,158,87,.12);  color: #1E9E57; }
.status-chip--complete      { background: rgba(30,158,87,.20);  color: #166b3c; }
.status-chip--withdrawn     { background: var(--off-white); color: var(--grey); font-style: italic; }

/* ── Page header ──────────────────────────────────────────── */
.page-header {
  margin-bottom: var(--space-8);
}
.page-header__top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: var(--space-2);
}
.page-header__top-row .page-header__eyebrow { margin-bottom: 0; }
.page-header__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-text);
  margin-bottom: var(--space-2);
}
.page-header__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--purple);
  margin-bottom: var(--space-3);
}
.page-header__subtitle {
  font-size: var(--font-size-base);
  color: var(--colour-text-muted);
  max-width: 65ch;
}

/* ── Wayfinder tab strip ──────────────────────────────────── */
.page-header__nav-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  max-width: 100%;
}
.wf-help-btn {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--colour-border);
  background: #fff;
  color: var(--sig-strong, var(--purple));
  font-family: inherit;
  font-weight: 800;
  font-size: 0.9375rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wf-help-btn:hover { border-color: var(--sig-strong, var(--purple)); }
.wf-help-btn:focus-visible { outline: 2px solid var(--sig-strong, var(--purple)); outline-offset: 1px; }

.wf-tabs {
  display: flex;
  gap: 3px;
  background: #E7E4EE;
  border-radius: 8px;
  padding: 3px;
  flex-shrink: 1;
  min-width: 0;
  overflow-x: auto;
}
.wf-tab {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: #6A6577;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.wf-tab svg { flex-shrink: 0; }
.wf-tab:hover { background: #DEDAE8; }
.wf-tab:focus-visible {
  outline: 2px solid var(--tab-colour, var(--purple));
  outline-offset: 1px;
}
.wf-tab--on {
  color: #fff;
  background: var(--sig-strong, var(--purple));
  cursor: default;
}
.wf-tab--on:hover { background: var(--sig-strong, var(--purple)); }
@media (max-width: 480px) {
  .page-header__top-row { justify-content: flex-start; }
  .page-header__nav-row { width: 100%; }
  .wf-tabs { flex: 1 1 auto; }
}

/* ── Hero panel (Performance landing) ─────────────────────── */
.hero {
  background: var(--purple);
  color: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-10) var(--space-8);
  position: relative;
  overflow: hidden;
  margin-bottom: var(--space-8);
}

/* ── Summary stats ────────────────────────────────────────── */
.stat-row {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-bottom: var(--space-8);
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  min-width: 140px;
  flex: 1;
}
.stat-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--purple);
}
.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--colour-text-muted);
  margin-top: var(--space-1);
}

.stat-card--amber .stat-card__value { color: var(--rag-amber); }

/* ── Alerts / banners ─────────────────────────────────────── */
.alert {
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.alert--info    { background: rgba(88,166,172,.12); color: #2d6b70; }
.alert--warn    { background: rgba(239,128,50,.12); color: #8a4510; }
.alert--error   { background: rgba(235,86,99,.12);  color: #7b1824; }
.alert--success { background: rgba(30,158,87,.12);  color: #0e5a31; }

/* ── Modal overlay ────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16,16,16,.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}
/* A .demo-multiselect dropdown (position:absolute) inside a modal gets
   clipped by the modal's own overflow-y:auto the moment its panel extends
   past the modal's current (often short) content height — confirmed live:
   a 7-option, 260px-tall panel rendered at ~1 row visible inside a 130px
   modal, cut off right where .modal__footer sits, regardless of the
   panel's own z-index (a clipping ancestor always wins over z-index).
   Scoped to only the moment a dropdown is actually open, via :has(), so
   every other modal's normal internal scrolling for long content is
   completely unaffected — reverts the instant the dropdown closes. */
.modal:has(.demo-multiselect.open) { overflow: visible; }
.modal--wide { max-width: 920px; }
@media (max-width: 640px) {
  .modal--wide { max-width: 100%; margin: 0; height: 100%; max-height: 100%; border-radius: 0; }
}
.modal__header {
  padding: var(--space-6);
  border-bottom: 1px solid var(--colour-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--purple); }
.modal__close {
  background: none; border: none; cursor: pointer;
  color: var(--colour-text-muted); font-size: 1.25rem; line-height: 1;
  padding: var(--space-2); border-radius: var(--radius-sm);
}
.modal__close:hover { background: var(--colour-surface); }
.modal__body { padding: var(--space-6); }
.modal__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--colour-border);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

/* ── Profile hover menu ───────────────────────────────────── */
.profile-menu {
  position: relative;
}
.profile-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 160px;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--colour-border);
  z-index: 200;
  display: none;
  overflow: hidden;
}
/* Visibility is owned by JS (.open, toggled with a close-delay so briefly
   overshooting the trigger while moving the mouse down doesn't lose hover —
   see the mouseenter/mouseleave wiring in ui.js). :focus-within covers
   keyboard users tabbing into the menu. */
.profile-menu.open .profile-dropdown,
.profile-menu:focus-within .profile-dropdown {
  display: block;
}
.profile-dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--colour-text);
  text-decoration: none;
  transition: background 0.1s;
  white-space: nowrap;
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-family);
  font-weight: var(--font-weight-regular);
}
.profile-dropdown__item:hover { background: var(--colour-surface); color: var(--purple); }
.profile-dropdown__item + .profile-dropdown__item { border-top: 1px solid var(--colour-border); }

/* ── KPI table ────────────────────────────────────────────── */
.kpi-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.kpi-table th {
  text-align: left;
  color: var(--purple);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid var(--purple);
}
.kpi-table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  vertical-align: middle;
}
.kpi-table__group td {
  background: var(--colour-surface);
  color: var(--sig-strong, var(--purple));
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  padding: var(--space-2) var(--space-4);
}
.kpi-table__row:hover td { background: rgba(66,42,126,.03); }
.kpi-table__title { font-weight: var(--font-weight-medium); color: var(--purple); }
.kpi-table__title:hover { text-decoration: underline; }

.kpi-num-pill {
  display: inline-block;
  background: #ece9f6;
  color: var(--purple);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  padding: 1px 7px;
  font-size: var(--font-size-xs);
}
.kpi-num-pill--light {
  background: rgba(255,255,255,.18);
  color: #fff;
}

/* ── KR table (My Key Results) ────────────────────────────── */
.kr-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--font-size-sm);
}
.kr-table thead th {
  background: var(--purple);
  color: #fff;
  font-weight: 700;
  font-size: 0.6875rem;
  padding: 8px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: none;
}
.kr-table__month-th {
  text-align: center !important;
  width: 36px;
  padding: 8px 4px !important;
}

.kr-table__meta-th { width: 72px; font-size: 0.75rem !important; }
.kr-table__group td.kr-table__meta-th:nth-child(3),
.kr-table__group td.kr-table__meta-th:nth-child(4) { width: 96px; }
.kr-table--fixed { table-layout: fixed; min-width: 760px; }
.kr-table--fixed .kr-col-by { width: 84px; }
.kr-table--fixed .kr-col-owner { width: 64px; }
.kr-table--fixed .kr-col-supporting { width: 104px; }
.kr-table--fixed .kr-col-month { width: 44px; }
.kr-table--fixed .kr-col-complete { width: 72px; }
/* By / Owner / Supporting: centred under their headers and vertically
   centred against the row, so the three columns line up whatever the row holds. */
.kr-table--fixed .kr-table__meta-cell { text-align: center; vertical-align: middle; padding: 8px 4px !important; white-space: normal; }
.kr-table--fixed .kr-table__kr-row td.kr-table__title-cell { vertical-align: middle; }
/* Activity rows stay compact: a one-line Activity sits snug against the next,
   so their badges are smaller and their cells carry almost no padding. */
.kr-table--fixed .kr-act-tr .kr-table__meta-cell { padding: 1px 4px !important; }
.kr-table--fixed .kr-act-tr .kr-table__rag-cell,
.kr-table--fixed .kr-act-tr .kr-table__complete-cell { padding-top: 1px !important; padding-bottom: 1px !important; }
/* One badge size throughout the table — Key Result and Activity rows alike. */
.kr-table--fixed .initials-badge { width: 22px; height: 22px; font-size: 0.5625rem; }
/* Three initials badges to a row, then wrap. */
.kr-supporters { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; width: 78px; margin: 0 auto; }
.kr-act-owner { display: inline-flex; align-items: center; gap: 6px; color: var(--colour-text); }
.kr-act-owner .initials-badge { background: var(--purple); }
.kr-table__title-th { min-width: 260px; }

/* Sub-section rows (You own / You're supporting) */
.kr-subsection-row td,
.kr-subsection-row:hover td {
  padding: 6px 10px 6px !important;
  background: var(--sig-band, var(--teal)) !important;
  border-bottom: none !important;
}
.kr-subsection-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
}
.kr-subsection-label svg { stroke: #fff; }
.kr-subsection-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--colour-border);
  color: var(--colour-text-muted);
  font-size: 0.5625rem;
  font-weight: 700;
}

/* Supporting KR rows */
.kr-table__kr-row--supporting td { background: #f9f9fb; }
.kr-table__kr-row--supporting .kr-title { color: var(--colour-text); font-weight: 500; }

.kr-readonly-chip {
  font-size: 0.5625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--colour-text-muted);
  background: var(--colour-border);
  border-radius: 3px;
  padding: 1px 5px;
  flex-shrink: 0;
  align-self: center;
}

/* Read-only RAG cell */
.kr-rag--readonly {
  cursor: default;
  opacity: .65;
  pointer-events: none;
}
.kr-rag--locked {
  cursor: default;
  opacity: .5;
  pointer-events: none;
}
.kr-table__group td,
.kr-table__group:hover td {
  background: var(--sig-strong, var(--purple)) !important;
  padding: 7px 10px;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  border-top: none;
}
.kr-table__group td.kr-table__meta-th,
.kr-table__group td.kr-table__month-th,
.kr-table__group td.kr-table__complete-th {
  font-size: 0.6875rem;
  font-weight: 600;
  color: rgba(255,255,255,.8);
  text-align: center;
  vertical-align: middle;
}
.kr-table__kr-row td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--colour-border);
  vertical-align: top;
}

.kr-table__rag-cell { text-align: center; padding: 10px 3px !important; }
.kr-table__meta-cell {
  font-size: 0.6875rem;
  color: var(--colour-text-muted);
  white-space: nowrap;
  padding-top: 12px !important;
}
.kr-meta-val { color: var(--colour-text); }
.kr-meta-empty { color: var(--colour-text-muted); opacity: .5; }

/* KR title row */
.kr-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.kr-title {
  font-weight: 600;
  color: var(--purple);
  font-size: 0.8125rem;
  line-height: 1.35;
}
.kr-desc {
  font-size: 0.6875rem;
  color: var(--colour-text-muted);
  line-height: 1.4;
  margin-bottom: 6px;
}
.kr-actions { display: flex; gap: 4px; flex-shrink: 0; opacity: 0; transition: opacity .15s; }
.kr-table__kr-row:hover .kr-actions { opacity: 1; }
.kr-action-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
  padding: 2px 4px;
  border-radius: 3px;
  line-height: 1;
}
.kr-action-btn:hover { background: var(--colour-surface-alt); color: var(--purple); }
.kr-action-btn--del:hover { background: #fde8ea; color: var(--bright-red); }

/* Activities inline */
/* Activity table rows */
.kr-act-tr td {
  background: #fafafa;
  border-top: none;
  border-bottom: none !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}
.kr-act-tr:last-of-type td,
.kr-act-tr + .kr-add-act-tr td { border-bottom: 1px solid var(--colour-border) !important; }
.kr-act-tr--done .kr-act-desc { text-decoration: line-through; color: var(--colour-text-muted); }
.kr-act-tr.kr-table__kr-row--supporting td { background: #f8f7fb; }
.kr-act-td {
  padding-left: 32px !important;
  border-left: 3px solid rgba(88,166,172,.35) !important;
  vertical-align: middle;
}
/* The flex layout lives on an inner wrapper — making the <td> itself
   display:flex pulled it out of the table grid, so activity rows' title cells
   didn't line up with their KR's and shifted as rows were filtered. */
.kr-act-td__inner { display: flex; align-items: center; gap: 6px; }
.kr-act-body { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; flex: 1; min-width: 0; }
.kr-act-desc { font-size: 0.75rem; flex: 1; min-width: 0; }
.kr-act-tr[draggable="true"] { cursor: grab; }
.kr-act-tr.kr-act-dragging { opacity: 0.4; background: rgba(88,166,172,.08); }
.kr-act-drag-handle--off, .kr-act-tr:hover .kr-act-drag-handle--off { visibility: hidden; cursor: default; }
.kr-act-drag-handle { width: 10px; display: flex; align-items: center; color: var(--colour-text-muted); cursor: grab; opacity: 0; transition: opacity .15s; flex-shrink: 0; }
.kr-act-tr:hover .kr-act-drag-handle { opacity: 1; }
.kr-add-act-tr td { background: transparent; border-top: none !important; border-bottom: 1px solid var(--colour-border) !important; padding-top: 2px !important; padding-bottom: 4px !important; }
.kr-add-act {
  font-size: 0.6562rem;
  color: var(--purple);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0 4px 32px;
  opacity: .75;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.kr-add-act:hover { opacity: 1; text-decoration: underline; }
.kr-act-edit-btn {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--colour-text-muted);
  padding: 0 3px;
  opacity: 0;
  transition: opacity .15s;
  flex-shrink: 0;
  line-height: 1;
}
.kr-act-td:hover .kr-act-edit-btn { opacity: 1; }
.kr-act-edit-btn:hover { color: var(--purple); }

/* Keep old div-based styles for any remaining uses */

/* RAG squares */
.kr-rag {
  width: 28px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
  line-height: 24px;
  font-weight: 700;
  font-size: 0.625rem;
  user-select: none;
  margin: 0 auto;
  transition: opacity .1s;
}
.kr-rag--editable { cursor: pointer; }
.kr-rag--editable:hover { opacity: .8; }
.kr-rag--green { background: var(--rag-green); color: #fff; }
.kr-rag--amber { background: var(--orange); color: #fff; }
.kr-rag--red   { background: var(--bright-red); color: #fff; }
.kr-rag--none  { background: #e3e0d9; color: var(--colour-text-muted); }

/* Segmented control */
.kr-seg-ctrl {
  display: flex;
  background: rgba(0,0,0,.06);
  border-radius: 7px;
  padding: 3px;
  gap: 2px;
}
.kr-seg-btn {
  font-family: inherit;
  border: none;
  background: transparent;
  color: var(--colour-text-muted);
  font-size: 0.6875rem;
  padding: 5px 12px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
}
.kr-seg-btn--on {
  background: #fff;
  color: var(--purple);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

/* Pill-style filter control — a labelled toggle/select that reads as one
   self-contained control, matching .kr-seg-ctrl's visual language. */
.kr-filter-pill {
  display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,.06); border-radius: 7px;
  padding: 6px 10px;
  font-size: 0.6875rem; color: var(--colour-text-muted);
  white-space: nowrap; cursor: pointer;
}
.kr-filter-pill select {
  border: none; background: transparent; padding: 0; margin: 0;
  font-family: inherit; font-size: 0.75rem; font-weight: 600;
  color: var(--purple); cursor: pointer;
}
.kr-filter-pill select:focus { outline: none; }
.kr-filter-pill input[type="checkbox"] { cursor: pointer; }

/* Footer + hint */

.kr-hint { font-size: 0.6875rem; color: var(--colour-text-muted); margin-top: var(--space-3); }

/* ── Review form ──────────────────────────────────────────── */
.review-section {
  margin-bottom: var(--space-8);
}
.review-section__header {
  background: var(--purple);
  color: var(--white);
  padding: var(--space-4) var(--space-6);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md);
}
.review-section__body {
  border: 1px solid var(--colour-border);
  border-top: none;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
}
.review-section__tag {
  font-size: var(--font-size-xs);
  background: rgba(255,255,255,.18);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 1px 7px;
  font-weight: 500;
  margin-left: 6px;
}
.review-col-header {
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 1px;
  background: var(--colour-border);
  border-bottom: 1px solid var(--colour-border);
}
.review-qa {
  border-bottom: 1px solid var(--colour-border);
  display: grid;
  grid-template-columns: 220px 1fr 1fr;
  gap: 1px;
  background: var(--colour-border);
}
.review-qa:last-child { border-bottom: none; }
.review-qa__q {
  background: rgba(66,42,126,.04);
  padding: var(--space-4) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--colour-text);
  display: flex;
  align-items: flex-start;
}
.review-kpi-group {
  margin-bottom: var(--space-4);
}
.review-kpi-group__header {
  background: var(--purple);
  color: #fff;
  padding: 6px 12px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.review-kr-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 6px 12px;
  border-bottom: 1px solid var(--colour-border);
}
.review-kr-row:last-child { border-bottom: none; }
.review-col-label {
  background: rgba(66,42,126,.05);
  padding: var(--space-3) var(--space-5);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--purple);
}
.review-cols {
  display: contents;
}
.review-col {
  background: var(--white);
  padding: var(--space-4) var(--space-5);
  white-space: pre-wrap;
}

/* ── Manager review: form + synthesis sidebar layout ─────── */
.review-form-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-6);
  align-items: start;
}
/* Sidebar hidden — review form takes the full width; the reopen handle
   below is fixed-positioned so it doesn't need a grid track of its own. */
.review-form-layout--sidebar-collapsed { grid-template-columns: 1fr; }
.review-form-layout__main { min-width: 0; }

.synth-sidebar-reopen {
  position: fixed;
  top: 160px;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--teal);
  color: var(--on-teal);
  border: none;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  box-shadow: -2px 2px 8px rgba(0,0,0,.15);
  transition: opacity .12s;
}
.synth-sidebar-reopen:hover { opacity: .9; }

/* Synthesis sidebar */
.synth-sidebar {
  position: sticky;
  top: 20px;
  background: rgba(88,166,172,.07);
  border: 1px solid rgba(88,166,172,.3);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.synth-sidebar__header {
  background: var(--teal);
  color: var(--on-teal);
  padding: var(--space-4) var(--space-5);
}
.synth-sidebar__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.synth-sidebar__header-row .synth-sidebar__title { margin-bottom: 0; }
.synth-sidebar__toggle {
  background: none;
  border: none;
  color: #fff;
  font-size: var(--font-size-base);
  line-height: 1;
  cursor: pointer;
  padding: var(--space-1);
  opacity: .85;
}
.synth-sidebar__toggle:hover { opacity: 1; }
.synth-sidebar__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--space-2);
}
.synth-sidebar__subtitle {
  font-size: var(--font-size-xs);
  opacity: .88;
  margin: 0;
  line-height: 1.45;
}
.synth-sidebar__subtitle strong { font-weight: var(--font-weight-bold); }
.synth-sidebar__section {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid rgba(88,166,172,.2);
}
.synth-sidebar__section:last-child { border-bottom: none; }
.synth-sidebar__section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--teal-text);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: var(--space-3);
}
.synth-sidebar__chunk { margin-top: var(--space-2); }
.synth-sidebar__chunk + .synth-sidebar__chunk {
  border-top: 1px solid rgba(88,166,172,.18);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}
.synth-sidebar__chunk-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--colour-text-muted);
  margin-bottom: 3px;
}
.synth-sidebar__chunk-body {
  font-size: var(--font-size-xs);
  color: var(--colour-text);
  white-space: pre-wrap;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
  line-height: 1.5;
}
.synth-sidebar__chunk-body:focus {
  background: rgba(255,255,255,.8);
  box-shadow: 0 0 0 2px rgba(88,166,172,.35);
}
.synth-sidebar__empty {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  font-style: italic;
  margin: var(--space-1) 0;
}

/* Saved (non-focused) footer cell in accordion */
.synth-footer-cell--saved { background: rgba(66,42,126,.03); }
.synth-footer-saved-text {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  white-space: pre-wrap;
  margin: 0;
  line-height: 1.5;
}

/* ── Manager review: within-page tabs ────────────────────── */
.review-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--colour-border);
  margin-bottom: var(--space-6);
}
.review-tab {
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: var(--space-3) var(--space-6);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--colour-text-muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.review-tab:hover { color: var(--purple); }
.review-tab--active { color: var(--purple); border-bottom-color: var(--purple); }

/* ── 360 synthesis helper box (Review form) ─────────────── */
.synth-helper-box {
  background: rgba(88,166,172,.08);
  border: 1px solid rgba(88,166,172,.35);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin: var(--space-4) var(--space-5);
}
.synth-helper-box--empty {
  background: var(--colour-surface);
  border-style: dashed;
}
.synth-helper-box__header {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.synth-helper-box__title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--teal-text);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.synth-helper-box__caption {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin: 0 0 var(--space-3);
  font-style: italic;
}
.synth-helper-chunk { margin-top: var(--space-3); }
.synth-helper-chunk + .synth-helper-chunk { border-top: 1px solid rgba(88,166,172,.25); padding-top: var(--space-3); }
.synth-helper-chunk__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--colour-text-muted);
  margin-bottom: 4px;
}
.synth-helper-chunk__body {
  font-size: var(--font-size-sm);
  color: var(--colour-text);
  white-space: pre-wrap;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 2px 4px;
  margin: -2px -4px;
}
.synth-helper-chunk__body:focus {
  background: rgba(255,255,255,.7);
  box-shadow: 0 0 0 2px rgba(88,166,172,.4);
}

/* ── Synthesise feedback tab ─────────────────────────────── */
.synth-meta {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.synth-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
}
.synth-count--ok  { background: rgba(76,175,80,.12); color: #2e7d32; }
.synth-count--warn{ background: rgba(255,152,0,.12);  color: #e65100; }
.synth-confidentiality-banner {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  background: rgba(66,42,126,.05);
  border: 1px solid rgba(66,42,126,.12);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  flex: 1;
}
.synth-table-wrap { overflow-x: auto; }
.synth-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.synth-reviewer-th {
  text-align: left;
  padding: 10px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--colour-text-muted);
  background: var(--colour-surface);
  border-bottom: 2px solid var(--colour-border);
  border-right: 1px solid var(--colour-border);
  width: 160px;
}
.synth-col-header {
  text-align: left;
  padding: 10px 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--colour-text-muted);
  background: var(--colour-surface);
  border-bottom: 2px solid var(--colour-border);
  border-right: 1px solid var(--colour-border);
  vertical-align: top;
  cursor: pointer;
  transition: background .15s;
}
.synth-col-header:hover { background: rgba(66,42,126,.04); }
.synth-col-header--focused {
  background: rgba(66,42,126,.07);
  border-bottom-color: var(--purple);
  color: var(--purple);
}
.synth-col-header__label { font-weight: var(--font-weight-bold); }
.synth-col-header__section {
  font-size: 0.625rem;
  font-weight: 400;
  color: var(--teal-text);
  margin-top: 2px;
}
.synth-reviewer-cell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 12px;
  border-bottom: 1px solid var(--colour-border);
  border-right: 1px solid var(--colour-border);
  background: var(--colour-surface);
  vertical-align: top;
}
.synth-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--purple);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.synth-reviewer-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--colour-text);
}
.synth-reviewer-meta {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin-top: 1px;
}
.synth-ext-tag {
  display: inline-block;
  background: var(--orange);
  color: #fff;
  font-size: 0.5625rem;
  font-weight: var(--font-weight-bold);
  padding: 1px 4px;
  border-radius: 3px;
  vertical-align: middle;
  margin-left: 3px;
}
.synth-answer-cell {
  padding: var(--space-3) 12px;
  border-bottom: 1px solid var(--colour-border);
  border-right: 1px solid var(--colour-border);
  vertical-align: top;
  font-size: var(--font-size-sm);
  color: var(--colour-text);
}
.synth-answer-cell--focused { background: #fff; }
.synth-answer-cell--preview { background: var(--colour-surface); cursor: pointer; transition: background .15s; }
.synth-answer-cell--preview:hover { background: rgba(66,42,126,.04); }
.synth-preview-text {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--colour-text-muted);
}
.synth-footer-row { background: rgba(66,42,126,.04); }
.synth-footer-label {
  padding: var(--space-3) 12px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--purple);
  border-top: 2px solid var(--purple);
  border-right: 1px solid var(--colour-border);
  vertical-align: top;
}
.synth-footer-cell {
  padding: var(--space-3) 12px;
  border-top: 2px solid var(--colour-border);
  border-right: 1px solid var(--colour-border);
  vertical-align: top;
  cursor: pointer;
  transition: background .15s;
}
.synth-footer-cell:hover { background: rgba(66,42,126,.04); }
.synth-footer-cell--focused {
  border-top-color: var(--purple);
  background: #fff;
  cursor: default;
}
.synth-footer-cell--focused:hover { background: #fff; }
.synth-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-size: var(--font-size-sm);
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
}
.synth-textarea:focus { outline: none; border-color: var(--purple); box-shadow: 0 0 0 2px rgba(66,42,126,.15); }
.synth-footer-hint {
  font-size: var(--font-size-xs);
  color: var(--teal-text);
  margin: 4px 0;
}
.synth-footer-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-2); }
.synth-saved-state { font-size: var(--font-size-xs); color: var(--teal-text); font-weight: var(--font-weight-bold); }

/* ── 360 form (public) ────────────────────────────────────── */
.feedback-shell {
  min-height: 100vh;
  background: var(--colour-surface);
  display: flex;
  flex-direction: column;
}
.feedback-header {
  background: var(--purple);
  padding: var(--space-4) var(--space-8);
  display: flex;
  align-items: center;
}
.feedback-header img { height: 28px; }
.feedback-body {
  flex: 1;
  padding: var(--space-8);
  max-width: 740px;
  margin: 0 auto;
  width: 100%;
}
.feedback-footer {
  background: var(--white);
  border-top: 1px solid var(--colour-border);
  padding: var(--space-4) var(--space-8);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
}

/* ── Admin table ──────────────────────────────────────────── */
.admin-table { font-size: var(--font-size-xs); }
.admin-table th { font-size: var(--font-size-xs); padding-top: var(--space-2); padding-bottom: var(--space-2); }
.admin-table td { padding-top: var(--space-1); padding-bottom: var(--space-1); }
.admin-table .form-control { font-size: var(--font-size-xs); padding: 2px 6px; height: auto; }
.admin-table th:first-child, .admin-table td:first-child { padding-left: var(--space-4); }
.admin-table th:last-child,  .admin-table td:last-child  { padding-right: var(--space-4); }

.tracker-sort-th { cursor: pointer; user-select: none; }
.tracker-sort-th:hover { color: var(--purple); }
.tracker-sort-arrow { display: inline-block; margin-left: 3px; font-size: 0.85em; }
.tracker-sort-arrow--inactive { opacity: 0.35; }
.tracker-sort-arrow--active { color: var(--purple); }

/* Key-figure column highlight (Admin Leave Management tracker) */
.lm-key-col { background: rgba(88, 166, 172, 0.14); font-weight: 600; }

/* ── Login page ───────────────────────────────────────────── */
.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--purple);
  position: relative;
  overflow: hidden;
}
.login-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: var(--space-10);
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  position: relative;
  z-index: 1;
}
.login-box__logo { margin: 0 auto var(--space-8); }
.login-box__logo img { width: 150px; height: auto; margin: 0 auto; display: block; }
.login-box__title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--purple); margin-bottom: var(--space-2); }
.login-box__sub   { font-size: var(--font-size-sm); color: var(--colour-text-muted); margin-bottom: var(--space-8); text-align: center; }
.login-box .btn   { width: 100%; justify-content: center; }
.login-box__footer { font-size: var(--font-size-xs); color: var(--colour-text-muted); margin-top: var(--space-6); }

.google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-6);
  background: var(--white);
  border: 1.5px solid var(--colour-border);
  border-radius: var(--radius-md);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--colour-text);
  cursor: pointer;
  text-decoration: none;
  width: 100%;
  transition: box-shadow 0.12s, border-color 0.12s;
}
.google-btn:hover { box-shadow: var(--shadow-sm); border-color: #ccc; color: var(--colour-text); }

.dr-held-text { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ── Utilities ────────────────────────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
.text-muted { color: var(--colour-text-muted); }
.text-sm { font-size: var(--font-size-sm); }
.text-xs { font-size: var(--font-size-xs); }
.font-bold { font-weight: var(--font-weight-bold); }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); }
.mt-4 { margin-top: var(--space-4); }
.mt-6 { margin-top: var(--space-6); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.hidden { display: none !important; }
.divider { border: none; border-top: 1px solid var(--colour-border); margin: var(--space-6) 0; }

/* DKR completion */
.dkr-complete-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--rag-green);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  flex-shrink: 0;
  cursor: default;
}
.dkr-card__row--complete .dkr-col-title a,
.dkr-card__row--complete .dkr-col-title span { opacity: 0.55; text-decoration: line-through; }
.dkr-complete-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
/* IKR completion */
.kr-row--complete .kr-title { opacity: 0.55; text-decoration: line-through; }

/* DKR multi-select checkbox list */
.dkr-multi-select {
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-sm);
  padding: 4px 0;
  background: var(--colour-surface);
}
.dkr-multi-select__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  font-size: 0.8125rem;
  cursor: pointer;
  user-select: none;
}
.dkr-multi-select__opt:hover { background: var(--colour-hover); }
.dkr-multi-select__opt input[type="checkbox"] { margin: 0; cursor: pointer; }
.dkr-filter-select {
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23595959'/%3E%3C/svg%3E") no-repeat right 8px center;
  border: 1.5px solid var(--colour-border);
  border-radius: 7px;
  padding: 5px 24px 5px 10px;
  font-size: 0.75rem;
  color: var(--colour-text-muted);
  cursor: pointer;
  line-height: 1.4;
  transition: border-color 0.15s, color 0.15s;
}
.dkr-filter-select:hover,
.dkr-filter-select:focus { border-color: var(--purple); color: var(--purple); outline: none; }

/* ── KPI table inline edit ───────────────────────────────────── */

.kpi-trash-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 4px;
  color: var(--colour-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.kpi-table__row:hover .kpi-trash-btn { opacity: 1; }
.kpi-trash-btn:hover { background: #fde8ea; color: var(--bright-red); }
.form-control--sm { padding: 4px 8px; font-size: var(--font-size-sm); }

/* ── KPI Dashboard controls ──────────────────────────────── */
.kpi-dash-ctrls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; justify-content: flex-end; }
.kpi-ctrl-btn {
  font-family: inherit; font-size: 0.75rem; padding: 5px 13px;
  border: 1.5px solid var(--colour-border); border-radius: 7px;
  background: #fff; color: var(--colour-text-muted); cursor: pointer;
  transition: border-color .15s, color .15s;
}
.kpi-ctrl-btn:hover { border-color: var(--purple); color: var(--purple); }
/* ── KPI header summary ──────────────────────────────────── */
.kpi-header-summary {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  border: 1.5px solid var(--colour-border); border-radius: 10px;
  padding: 7px 14px; background: #fff;
  width: fit-content;
}
.kpi-header-summary__month { font-size: 0.8125rem; color: var(--colour-text-muted); font-weight: 500; }
.kpi-header-summary__pill { font-size: 0.8125rem; border-radius: 6px; padding: 4px 12px; }
.kpi-header-summary__pill--green { background: #e6f4ec; color: #1a6e3c; }
.kpi-header-summary__pill--amber { background: #fef3e2; color: #7a4a00; }
.kpi-header-summary__pill--red   { background: #fdecea; color: #8b1c1c; }
.kpi-header-summary__pill--none  { background: #f0f0f0; color: #595959; }
/* ── KPI matrix multi-value cell ────────────────────────── */
.kpi-matrix__cell-vals { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.kpi-matrix__cell-val-line { font-size: 0.625rem; font-weight: 700; color: #fff; line-height: 1.3; text-align: center; }
.kpi-matrix__cell--none .kpi-matrix__cell-val-line { color: var(--colour-text-muted); }
.kpi-seg { display: flex; background: #f3f1ec; border-radius: 7px; padding: 3px; gap: 2px; }
.kpi-seg__btn {
  border: none; background: transparent; color: var(--colour-text-muted);
  font-size: 0.75rem; padding: 5px 13px; border-radius: 5px; cursor: pointer;
  font-family: inherit; transition: background .1s, color .1s;
}
.kpi-seg__btn--on { background: #fff; color: var(--purple); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

/* ── Full-width segmented control (e.g. leave duration) ───── */
.seg-control { display: flex; background: #f3f1ec; border-radius: 8px; padding: 3px; gap: 2px; }
.seg-control__btn {
  flex: 1; border: none; background: transparent; color: var(--colour-text-muted);
  font-size: 14px; font-weight: 500; padding: 10px 12px; border-radius: 6px; cursor: pointer;
  font-family: inherit; transition: background .1s, color .1s;
}
.seg-control__btn--on { background: #fff; color: var(--purple); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,.12); }

/* ── KPI year navigation ─────────────────────────────────── */

/* ── Page title year nav (flanks an <h1>, e.g. KPI Dashboard) ─── */
.page-header__year-btn {
  flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 50%;
  border: 1.5px solid var(--colour-border);
  background: #fff;
  color: var(--purple);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.page-header__year-btn:hover { border-color: var(--purple); background: rgba(66,42,126,.04); }

/* ── KPI Dashboard matrix ───────────────────────────────── */
.kpi-matrix-scroll { overflow-x: auto; }
.kpi-matrix-table { table-layout: auto; }
.kpi-matrix-table td, .kpi-matrix-table th { padding: 4px 8px !important; }
.kpi-matrix__month-th { text-align: center; width: 90px; min-width: 90px; max-width: 90px; font-size: 0.75rem; }
.kpi-matrix__notes-th { min-width: 180px; }
.kpi-matrix__kpi-th, .kpi-matrix__kpi-td { min-width: 220px; font-size: 0.875rem; }
.kpi-matrix__target-th, .kpi-matrix__target-td { width: 150px; max-width: 170px; font-size: 0.75rem; white-space: normal; }
.kpi-matrix__target-milestone { display: block; line-height: 1.4; white-space: nowrap; }
.kpi-matrix__cell-td { padding: 2px 3px !important; vertical-align: middle; width: 90px; max-width: 90px; }
.kpi-matrix__cell {
  position: relative;
  border-radius: 6px;
  min-height: 28px;
  min-width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 5px;
}
.kpi-notes-expand { background: none; border: none; cursor: pointer; color: var(--purple); font-size: inherit; padding: 0; }
/* ── KPI edit modal sections ─────────────────────────────── */

/* Shared target/milestone row — used by both the Add KPI modal and the Update KPI modal's Settings card */
.kpi-milestone-row { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.kpi-milestone-row .milestone-label,
.kpi-milestone-row .milestone-target { flex: 1; min-width: 90px; }
.kpi-milestone-row .milestone-remove { color: var(--bright-red); padding: 2px 6px; }
/* ── Update KPI modal — compact card grid ────────────────── */
.kpi-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 640px) { .kpi-card-grid { grid-template-columns: 1fr; } }
.kpi-card { background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: 16px; }
.kpi-card--span2 { grid-column: 1 / -1; }
.kpi-card--muted { background: var(--colour-surface); border-color: var(--colour-surface); }
.kpi-card--muted .kpi-card__head { margin-bottom: 0; }
.kpi-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--colour-text-muted); }
.kpi-card__head svg { flex-shrink: 0; }

.rag-segmented { display: flex; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--colour-border); }
.rag-segment { flex: 1; display: flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 0; font-size: var(--font-size-sm); font-weight: 600; color: var(--colour-text-muted); cursor: pointer; position: relative; }
.rag-segment + .rag-segment { border-left: 1px solid var(--colour-border); }
.rag-segment input { position: absolute; opacity: 0; pointer-events: none; }
.rag-segment__check { display: none; }
.rag-segment:has(input:checked) .rag-segment__check { display: inline-flex; }
.rag-segment--green:has(input:checked) { background: var(--rag-green); color: var(--white); }
.rag-segment--amber:has(input:checked) { background: var(--rag-amber); color: var(--white); }
.rag-segment--red:has(input:checked)   { background: var(--rag-red); color: var(--white); }

.kpi-target-row { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; }
.kpi-target-row:last-of-type { margin-bottom: 0; }
.kpi-card .form-control.kpi-target-tag { flex: 0 0 72px; width: 72px; text-align: center; background: var(--white); border: none; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 600; color: var(--colour-text-muted); padding: 9px 4px; }
.kpi-card--muted .milestone-remove { color: #b7b3c4; }
.kpi-card--muted .milestone-remove:hover { color: var(--bright-red); background: transparent; }
.kpi-matrix__cell--green { background: var(--rag-green); }
.kpi-matrix__cell--amber { background: var(--rag-amber); }
.kpi-matrix__cell--red   { background: var(--rag-red); }
.kpi-matrix__cell--none  { background: var(--rag-none); }
.kpi-matrix__cell-val {
  font-size: 0.6562rem; font-weight: 700; text-align: center;
  color: #fff; line-height: 1.2;
}
.kpi-matrix__cell--none .kpi-matrix__cell-val { color: var(--colour-text-muted); }
.kpi-matrix__edit-btn {
  position: absolute; top: 3px; right: 3px;
  background: rgba(255,255,255,.25); border: none; border-radius: 3px;
  padding: 2px 3px; cursor: pointer; opacity: 0; transition: opacity .15s;
  display: flex; align-items: center; color: #fff;
}
.kpi-matrix__cell--none .kpi-matrix__edit-btn { color: var(--colour-text-muted); background: rgba(0,0,0,.06); }
.kpi-matrix__cell:hover .kpi-matrix__edit-btn { opacity: 1; }
.kpi-matrix__edit-btn:hover { background: rgba(255,255,255,.45); }
.kpi-matrix__cell-td[data-editable] { cursor: pointer; }
.kpi-title-link { color: var(--colour-text); text-decoration: none; }
.kpi-title-link:hover { color: var(--purple); text-decoration: underline; }
.kpi-matrix__row:hover td { background: rgba(66,42,126,.03); }

/* ── Initials badge ──────────────────────────────────────────── */
.initials-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--teal-text);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  flex-shrink: 0;
  cursor: default;
  user-select: none;
}
/* ── DKR table ───────────────────────────────────────────────── */
.dkr-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}
.dkr-table thead tr {
  background: var(--colour-surface-alt, #f5f5f5);
  border-bottom: 2px solid var(--colour-border);
}
.dkr-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--colour-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.dkr-table td {
  padding: var(--space-3) var(--space-3);
  vertical-align: middle;
  border-bottom: 1px solid var(--colour-border);
}
/* ── DKR card layout ─────────────────────────────────── */
.dkr-cards { display: flex; flex-direction: column; gap: 14px; }
.dkr-card { border: 1px solid rgba(0,0,0,.1); border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.dkr-card__header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--sig-strong, var(--purple)); color: #fff;
}
.dkr-card__kpi-badge {
  background: rgba(255,255,255,.2); border-radius: 5px;
  padding: 2px 9px; font-size: 0.6875rem; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.dkr-card__kpi-name { flex: 1; font-size: 0.8125rem; font-weight: 600; min-width: 0; }
.dkr-card__pct { font-size: 0.6875rem; opacity: .85; white-space: nowrap; flex-shrink: 0; }

/* Table layout */
.dkr-table { width: 100%; border-collapse: collapse; }
.dkr-table thead th {
  font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--colour-text-muted); padding: 6px 8px; border-bottom: 1px solid rgba(0,0,0,.08);
  white-space: nowrap;
}
.dkr-table tbody tr { border-top: 0.5px solid rgba(0,0,0,.07); }
.dkr-table tbody tr:first-child { border-top: none; }
.dkr-table tbody td { padding: 9px 8px; vertical-align: middle; }
.dkr-table tbody tr:hover { background: rgba(0,0,0,.015); }
.dkr-col-owner { width: 38px; padding-left: 14px !important; }
.dkr-col-title { font-size: 0.7812rem; color: var(--colour-text); line-height: 1.35; min-width: 160px; }
.dkr-title-wrap { display: flex; align-items: center; gap: 4px; }
.dkr-title-wrap .dkr-pencil-btn { opacity: 0; flex-shrink: 0; }
.dkr-table tbody tr:hover .dkr-pencil-btn { opacity: 1; }
.dkr-col-with { width: 80px; font-size: 0.6875rem; color: var(--colour-text-muted); white-space: nowrap; }
.dkr-col-month { width: 52px; text-align: right !important; padding-right: 6px !important; }
.dkr-table thead th.dkr-col-month { text-align: right !important; }
.dkr-col-delete { width: 36px; padding-right: 10px !important; }
.dkr-card__krtitle-link { color: var(--colour-text); text-decoration: none; }
.dkr-card__krtitle-link:hover { color: var(--purple); text-decoration: underline; }
.dkr-card__actions {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  opacity: 0; transition: opacity .15s;
}
.dkr-table tbody tr:hover .dkr-card__actions { opacity: 1; }
.dkr-pencil-btn {
  background: none; border: none; cursor: pointer; padding: 3px 4px; border-radius: 4px;
  color: var(--colour-text-muted); display: flex; align-items: center;
}
.dkr-pencil-btn:hover { color: var(--purple); background: rgba(66,42,126,.08); }
.dkr-col-drag { width: 22px; padding-left: 10px !important; padding-right: 0 !important; }
.dkr-drag-handle { display: flex; align-items: center; color: var(--colour-text-muted); cursor: grab; opacity: 0; transition: opacity .15s; }
.dkr-table tbody tr:hover .dkr-drag-handle { opacity: 1; }
.dkr-table tbody tr[draggable="true"] { cursor: grab; }
.dkr-table tbody tr.dkr-dragging { opacity: 0.4; background: rgba(66,42,126,.06); }

/* ── People list (Everyone's Activities) ─────────────────────── */

.people-row__avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal-text); color: var(--white);
  font-size: 0.75rem; font-weight: var(--font-weight-bold);
  display: flex; align-items: center; justify-content: center;
  letter-spacing: 0.03em;
}

.people-rag-bar {
  display: flex; width: 64px; height: 8px; border-radius: 4px; overflow: hidden; flex-shrink: 0;
  background: var(--colour-border);
}
.people-rag-bar__seg { height: 100%; }
.people-rag-bar__seg--green { background: var(--rag-green); }
.people-rag-bar__seg--amber { background: var(--rag-amber); }
.people-rag-bar__seg--red   { background: var(--rag-red); }

/* ── Management sub-tab ───────────────────────────────────────── */
.perf-subtabs {
  display: flex; gap: 0; border-bottom: 2px solid var(--colour-border);
  margin-bottom: var(--space-5);
}
.perf-subtab {
  padding: var(--space-2) var(--space-4); font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold); color: var(--colour-text-muted);
  text-decoration: none; border-bottom: 2px solid transparent;
  margin-bottom: -2px; transition: color .15s, border-color .15s;
}
.perf-subtab:hover { color: var(--purple); }
.perf-subtab--active { color: var(--purple); border-bottom-color: var(--purple); }

/* Tiles */
.mgmt-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-4); margin-bottom: var(--space-6);
}
.mgmt-tile {
  background: #fff; border: 1px solid var(--colour-border); border-radius: 8px;
  padding: var(--space-4); position: relative; overflow: hidden;
}
.mgmt-tile--hoverable { cursor: default; }
.mgmt-tile--red { border-left: 4px solid var(--rag-red); }
.mgmt-tile__label { font-size: 0.6875rem; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--colour-text-muted); margin-bottom: var(--space-1); }
.mgmt-tile__value { font-size: 1.75rem; font-weight: var(--font-weight-bold); color: var(--purple); line-height: 1.1; }
.mgmt-tile--red .mgmt-tile__value { color: var(--rag-red); }
.mgmt-tile__unit { font-size: 1rem; font-weight: var(--font-weight-regular); color: var(--colour-text-muted); margin-left: 2px; }
.mgmt-tile__sub { font-size: 0.6875rem; color: var(--colour-text-muted); margin-top: 2px; }

/* Progress bar */
.mgmt-progress { width: 100%; height: 6px; background: var(--colour-border); border-radius: 3px; overflow: hidden; }
.mgmt-progress--sm { width: 60px; display: inline-flex; vertical-align: middle; }
.mgmt-progress__bar { height: 100%; border-radius: 3px; transition: width .3s; }

/* Fully-updated popover */
.mgmt-popover {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  background: #fff; border: 1px solid var(--colour-border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.12); padding: var(--space-3);
  min-width: 200px; z-index: 200; display: none; pointer-events: none;
}
.mgmt-popover--visible { display: block; }
.mgmt-popover__title { font-size: 0.6875rem; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .06em; color: var(--purple); margin-bottom: var(--space-2); }
.mgmt-popover-person { display: flex; align-items: center; gap: var(--space-2); padding: 3px 0; font-size: var(--font-size-sm); }

/* Scorecard */
.mgmt-scorecard { border: 1px solid var(--colour-border); border-radius: 8px; overflow: hidden; }
.mgmt-scorecard__header-row {
  display: grid; grid-template-columns: 20px 1fr 56px 56px 120px 90px 72px;
  gap: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--purple); border-bottom: 1px solid rgba(255,255,255,.15);
}
.mgmt-scorecard__col-label { font-size: 0.625rem; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.8); text-align: right; }
.mgmt-scorecard__col-label:first-child { text-align: left; }

/* Directorate row */
.mgmt-dir-row {
  width: 100%; display: grid; grid-template-columns: 20px 1fr 56px 56px 120px 90px 72px;
  gap: var(--space-2); padding: var(--space-3) var(--space-3);
  background: rgba(66,42,126,.04); border: none; cursor: pointer;
  align-items: center; text-align: left; border-bottom: 1px solid var(--colour-border);
  font-family: inherit; font-size: var(--font-size-sm); color: var(--colour-text);
  transition: background .15s;
}
.mgmt-dir-row:hover { background: rgba(66,42,126,.08); }
.mgmt-dir-row--open { background: rgba(66,42,126,.06); }
.mgmt-dir-row__name { font-weight: var(--font-weight-bold); color: var(--purple); display: flex; align-items: center; gap: var(--space-2); }
.mgmt-dir-row__cell { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: var(--font-size-sm); }
.mgmt-dir-row__upd-pct { font-size: 0.6875rem; color: var(--colour-text-muted); }
.mgmt-dir-row__green { color: var(--rag-green); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); text-align: right; }

.mgmt-chevron { flex-shrink: 0; color: var(--colour-text-muted); transition: transform .2s; }
.mgmt-dir-row--open .mgmt-chevron { transform: rotate(90deg); }

/* Person rows within a directorate */
.mgmt-people-rows { border-bottom: 1px solid var(--colour-border); }
.mgmt-person-row {
  display: grid; grid-template-columns: 28px 1fr auto auto auto auto;
  gap: var(--space-3); align-items: center;
  padding: var(--space-2) var(--space-3) var(--space-2) calc(var(--space-3) + 22px);
  background: #fff; border-bottom: 1px solid rgba(0,0,0,.04);
}
.mgmt-person-row:last-child { border-bottom: none; }
.mgmt-person-row__identity { min-width: 0; }
.mgmt-person-row__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--purple); text-decoration: none; }
.mgmt-person-row__name:hover { text-decoration: underline; }
.mgmt-person-row__role { display: block; font-size: 0.6875rem; color: var(--colour-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mgmt-person-row__chip { white-space: nowrap; }
.mgmt-person-row__green { font-size: 0.6875rem; color: var(--rag-green); white-space: nowrap; min-width: 60px; text-align: right; }

/* Status chips */
.mgmt-chip { display: inline-block; font-size: 0.6875rem; font-weight: var(--font-weight-bold); padding: 2px 8px; border-radius: 12px; }
.mgmt-chip--green { background: rgba(30,158,87,.12);  color: #1E9E57; }
.mgmt-chip--amber { background: rgba(239,128,50,.12); color: #c9621a; }
.mgmt-chip--red   { background: rgba(235,86,99,.12);  color: #a8202f; }
.mgmt-chip--grey  { background: rgba(89,89,89,.10);   color: var(--colour-text-muted); }

.mgmt-norag { font-size: 0.6875rem; color: var(--colour-text-muted); }
.mgmt-nudge-btn { white-space: nowrap; }

/* ── Directorate management rows (Settings) ──────────────────── */
.dir-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--colour-border); }
.dir-row:last-child { border-bottom: none; }
.dir-row__name { flex: 1; font-size: var(--font-size-sm); }
.dir-edit-row { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; }

/* ── How this page works ─────────────────────────────────────── */

.how-it-works__cols { display: grid; grid-template-columns: 1fr 1fr 1fr 3fr; gap: 16px; align-items: start; }
@media (max-width: 600px) { .how-it-works__cols { grid-template-columns: 1fr; } }
.how-it-works__divider { border: none; border-top: 1px solid var(--teal); opacity: 0.3; margin: 14px 0; }
.how-it-works__label { font-size: 0.8125rem; font-weight: var(--font-weight-bold); color: var(--teal-text); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 6px; }
.how-it-works__text { font-size: var(--font-size-sm); color: var(--colour-text); line-height: 1.5; }
.how-it-works__link { color: var(--teal-text); text-decoration: underline; }
.how-it-works__link:hover { color: var(--colour-purple); }
.how-it-works__ol { margin: 0; padding-left: 1.25em; display: flex; flex-direction: column; gap: 6px; }

/* ── Activities: Complete column ─────────────────────────────── */
.kr-table__complete-th { width: 64px; min-width: 56px; text-align: center; font-size: 0.75rem; padding: 6px 4px; }
.kr-table__complete-cell { width: 64px; text-align: center; vertical-align: middle; padding: 4px; }
.act-complete-cb { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
.kr-act-desc--done { text-decoration: line-through; color: var(--colour-text-muted); }

/* ── Loading spinner ─────────────────────────────────────────── */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 20px;
  color: var(--colour-text-muted);
  font-size: var(--font-size-sm);
}
.loading::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border: 2px solid var(--off-white);
  border-top-color: var(--colour-purple);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Skeleton shimmer ────────────────────────────────────────── */
@keyframes shimmer {
  from { background-position: -600px 0; }
  to   { background-position:  600px 0; }
}
.skeleton-wrap { display: flex; flex-direction: column; gap: 16px; padding: 8px 0; }
.skeleton-card {
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--colour-border) 25%, #e8e4f0 50%, var(--colour-border) 75%);
  background-size: 600px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
}
.skeleton-line--title  { height: 18px; width: 55%; }
.skeleton-line--short  { width: 30%; }
.skeleton-line--medium { width: 65%; }

/* ── Page-level error state ──────────────────────────────────── */
.page-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 60px 20px;
  text-align: center;
  color: var(--colour-text-muted);
}
.page-error__icon { font-size: 2rem; }
.page-error__title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--colour-text); }
.page-error__msg { font-size: var(--font-size-sm); max-width: 380px; }
.page-error__retry { margin-top: 4px; }

/* ── Empty state ─────────────────────────────────────────────── */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 24px;
  text-align: center;
  color: var(--colour-text-muted);
}
.empty-state__icon { font-size: 2rem; line-height: 1; }
.empty-state__title { font-size: var(--font-size-base); font-weight: var(--font-weight-bold); color: var(--colour-text); }
.empty-state__body { font-size: var(--font-size-sm); max-width: 340px; }
.empty-state__actions { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ── Profile & Admin User Detail ─────────────────────────────── */
.profile-wrap {
  padding: 0;
}

.profile-header {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--purple);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 0;
}

.profile-header__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  font-size: 1.125rem;
  color: #04342C;
  flex-shrink: 0;
}

.profile-header__info { flex: 1; }

.profile-header__name {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 500;
  color: #fff;
}

.profile-header__sub {
  margin: 2px 0 0;
  font-size: var(--font-size-sm);
  color: #CECBF6;
}

.profile-tabs {
  display: flex;
  gap: 4px;
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--colour-border);
  background: var(--colour-bg);
  border-left: 1px solid var(--colour-border);
  border-right: 1px solid var(--colour-border);
}

.profile-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 11px 10px;
  font-size: var(--font-size-sm);
  color: var(--colour-text-muted);
  cursor: pointer;
  font-family: var(--font-family);
  transition: color .15s, border-color .15s;
}

.profile-tab:hover { color: var(--colour-text); }

.profile-tab--active {
  border-bottom-color: var(--purple);
  color: var(--purple);
  font-weight: 500;
}

.profile-panel {
  background: var(--colour-bg);
  border: 1px solid var(--colour-border);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: 1.5rem;
}

.profile-meta-note {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin-bottom: 1rem;
}

.profile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.profile-grid--wide .profile-field--full {
  grid-column: 1 / -1;
}

.profile-field {
  display: block;
}

.profile-field__label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin-bottom: 4px;
}

.profile-ro-value {
  margin: 2px 0 0;
  font-size: 0.9375rem;
}

.profile-ro-value--strong {
  font-weight: 500;
}

.profile-section-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--colour-text);
}

.profile-card {
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
}

.profile-card--row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.profile-hist-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--purple);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  margin-top: 10px;
  font-family: var(--font-family);
}

.profile-hist-icon {
  transition: transform .2s;
}

.profile-hist-body {
  margin-top: 10px;
  border-top: 1px solid var(--colour-border);
  padding-top: 10px;
}

.profile-hint {
  margin: 10px 2px 0;
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
}

.profile-rtw-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.profile-rtw-icon--ok {
  background: rgba(30,158,87,.12);
  color: #1E9E57;
}

.profile-rtw-icon--none {
  background: var(--colour-surface);
  color: var(--colour-text-muted);
}

/* Admin edit badge */
.badge--admin-edit {
  font-size: var(--font-size-xs);
  color: #04342C;
  background: #9FE1CB;
  padding: 5px 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
  white-space: nowrap;
}

/* Working week day grid */
.week-day-grid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.week-day-btn {
  width: 64px;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  padding: 10px 0;
  cursor: pointer;
  text-align: center;
  background: var(--colour-bg);
  font-family: var(--font-family);
  transition: background .15s, border-color .15s;
}

.week-day-btn--on {
  background: #EEEDFE;
  border-color: #7F77DD;
}

.week-day-btn__label {
  font-size: var(--font-size-sm);
  font-weight: 500;
}

.week-day-btn__state {
  font-size: var(--font-size-xs);
  margin-top: 2px;
  color: var(--colour-text-muted);
}

.week-day-btn--on .week-day-btn__state {
  color: #3C3489;
}

.profile-fte {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--purple);
}

.week-day-dots {
  display: flex;
  gap: 5px;
}

.week-day-dots--header {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-regular);
  color: var(--colour-text-muted);
}

.week-day-dots--header span {
  display: inline-block;
  width: 16px;
  text-align: center;
}

.week-day-dot__outline {
  fill: none;
  stroke: var(--colour-border);
  stroke-width: 1.5;
}

.week-day-dot__fill {
  fill: var(--colour-primary);
}

/* ── Leaver / archived ──────────────────────────────────────── */
.profile-leaver-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #FFF8E1;
  border: 1px solid #F9A825;
  border-radius: var(--border-radius-md, 6px);
  padding: 10px 14px;
  margin: 0 0 1.25rem;
  font-size: var(--font-size-sm);
  color: #5D4037;
  line-height: 1.4;
}

.profile-leaver-notice svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: #F9A825;
}

.profile-field__hint {
  display: block;
  font-weight: 400;
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin-top: 4px;
  line-height: 1.35;
}

.profile-field--leaving-set input {
  border-color: #F9A825;
  background: #FFFDE7;
}

.profile-leaver-row {
  display: flex;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid var(--colour-border);
  font-size: var(--font-size-sm);
}

.profile-leaver-row__label {
  flex: 0 0 200px;
  color: var(--colour-text-muted);
}

.profile-leaver-row__body {
  flex: 1;
  color: var(--colour-text);
}

.profile-leaver-row__body a {
  color: var(--purple);
}

.profile-leaver-row--task .profile-leaver-row__body {
  display: flex;
  align-items: center;
}

.lc-task-circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  flex-shrink: 0;
}

.lc-task-circle.done { background: var(--purple); }
.lc-task-circle.no   { background: transparent; border: 2px solid var(--colour-border); }
.lc-task-circle.na   { background: transparent; border: 2px dashed var(--colour-border); }
.lc-task-circle:hover { border-color: var(--purple); }

/* ── Demographic data (equality monitoring) ─────────────────── */

.demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--teal);
  color: var(--black);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 1.5rem;
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.demo-banner svg { flex-shrink: 0; margin-top: 2px; }
.demo-banner p { margin: 0; }
.demo-banner strong { font-weight: 700; }

.demo-rows {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.5rem;
  border-top: 1px solid var(--colour-border);
}

.demo-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 1rem 0;
  border-bottom: 1px solid var(--colour-border);
}

.demo-row__label {
  flex: 0 0 190px;
  width: 190px;
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--colour-text);
  padding-top: 8px;
}

.demo-chip-group {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.demo-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: #F1EEF7;
  color: var(--colour-text);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .15s, color .15s, border-color .15s;
}

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

.demo-chip:has(.demo-chip__input:checked) {
  background: var(--purple);
  color: #fff;
}

.demo-chip--decline {
  background: transparent;
  border: 1px dashed #B7B2C9;
  color: var(--colour-text-muted);
}

.demo-chip--decline:has(.demo-chip__input:checked) {
  background: var(--off-white);
  border-style: solid;
  border-color: var(--grey);
  color: var(--colour-text);
}

.demo-chip:has(.demo-chip__input:focus-visible) {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.demo-other-input {
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 320px;
}

/* Nature-of-disability multi-select dropdown */
.demo-multiselect {
  position: relative;
  flex: 1;
  max-width: 360px;
}

.demo-multiselect__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--colour-border);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--colour-text-muted);
  cursor: pointer;
  transition: border-color .15s;
}

.demo-multiselect.has-selection .demo-multiselect__toggle { color: var(--colour-text); }
.demo-multiselect__toggle:hover { border-color: var(--grey); }
.demo-multiselect__toggle:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.demo-multiselect__summary {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.demo-multiselect__toggle svg {
  flex-shrink: 0;
  color: var(--colour-text-muted);
  transition: transform .15s;
}

.demo-multiselect.open .demo-multiselect__toggle svg { transform: rotate(180deg); }

.demo-multiselect__panel {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: 50;
  max-height: 260px;
  overflow-y: auto;
  padding: 6px 0;
}

.demo-multiselect.open .demo-multiselect__panel { display: block; }

.demo-multiselect__opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: var(--font-size-sm);
  color: var(--colour-text);
  cursor: pointer;
}

.demo-multiselect__opt:hover { background: var(--colour-surface); }
.demo-multiselect__opt input[type="checkbox"] { margin: 0; cursor: pointer; accent-color: var(--purple); flex-shrink: 0; }

.demo-multiselect__opt--decline {
  color: var(--colour-text-muted);
}

/* Single-select variant of the same dropdown (no checkboxes — click an
   option to choose it and close the panel), used for fields like Owner so
   it opens and looks identical to a Supported-by-style multi-select. */
.demo-select__opt {
  padding: 7px 12px;
  font-size: var(--font-size-sm);
  color: var(--colour-text);
  cursor: pointer;
}
.demo-select__opt:hover { background: var(--colour-surface); }
.demo-select__opt--active { background: var(--colour-surface); font-weight: var(--font-weight-bold); }

.demo-multiselect__divider {
  height: 1px;
  background: var(--colour-border);
  margin: 6px 12px;
}

.demo-multiselect__other {
  padding: 2px 12px 6px 34px;
}

.demo-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--font-size-sm);
  color: var(--colour-text);
  cursor: pointer;
  margin-bottom: 6px;
}

.demo-consent input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--purple);
}

.demo-consent-error {
  color: var(--bright-red);
  font-size: var(--font-size-xs);
  margin: 0 0 1rem;
}

.demo-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.demo-clear-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--dark-red);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  cursor: pointer;
  text-decoration: underline;
}

.demo-clear-link:hover { opacity: 0.8; }

.demo-updated {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin-left: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Employee Handbook — shared styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Page scaffold ─────────────────────────────────────────── */
.hb-page { padding: var(--space-6) var(--space-6) var(--space-16); max-width: 960px; }

.hb-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.hb-page-title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
  color: var(--colour-text);
  margin-bottom: var(--space-1);
}
.hb-page-sub {
  font-size: var(--font-size-sm);
  color: var(--colour-text-muted);
  max-width: 600px;
}

.hb-stamp {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--colour-text-muted);
  white-space: nowrap;
  padding-top: 4px;
}
.hb-stamp-pos { position: absolute; top: var(--space-4); right: var(--space-4); }

.hb-section { margin-bottom: var(--space-8); }
.hb-section-heading {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--colour-text);
  margin-bottom: var(--space-4);
}
.hb-body { color: var(--colour-text); line-height: 1.7; margin-bottom: var(--space-4); }

.hb-back-link {
  display: inline-block;
  font-size: var(--font-size-sm);
  color: var(--purple);
  text-decoration: none;
  margin-bottom: var(--space-5);
}
.hb-back-link:hover { text-decoration: underline; }

/* ── Tabs ──────────────────────────────────────────────────── */
.hb-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--off-white);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}
.hb-tab {
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--colour-text-muted);
  padding: var(--space-3) var(--space-4);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  white-space: nowrap;
  transition: color 0.15s;
}
.hb-tab:hover { color: var(--colour-text); }
.hb-tab--active {
  color: var(--purple);
  border-bottom-color: var(--purple);
  font-weight: 600;
}
.hb-tab-panel { animation: fadeIn 0.15s ease; }

.hb-empty-tab {
  padding: var(--space-12) var(--space-6);
  text-align: center;
  color: var(--colour-text-muted);
}

/* ── Hero banner ───────────────────────────────────────────── */
.hb-hero-banner {
  background: #422A7E;
  border-radius: 12px;
  padding: var(--space-8) var(--space-8);
  margin-bottom: var(--space-8);
  position: relative;
  overflow: hidden;
}
.hb-hero-heading {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-3);
}
.hb-hero-body {
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.8);
  line-height: 1.7;
}

/* ── Icon square ───────────────────────────────────────────── */
.hb-icon-sq {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  flex-shrink: 0;
}

/* ── Icon cards grid ───────────────────────────────────────── */
.hb-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.hb-card-grid--2col { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

.hb-icon-card {
  display: flex;
  gap: var(--space-3);
  background: #fff;
  border: 0.5px solid var(--off-white);
  border-radius: 12px;
  padding: var(--space-4);
  align-items: flex-start;
}
.hb-icon-card__body { flex: 1; min-width: 0; }
.hb-icon-card__title {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--colour-text);
  margin-bottom: var(--space-1);
}
.hb-icon-card__desc {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  line-height: 1.6;
}
.hb-detail-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--teal-text);
  text-decoration: none;
}
.hb-detail-link:hover { text-decoration: underline; }

/* ── Group label (Benefits sections) ───────────────────────── */
.hb-group-label {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--off-white);
}
.hb-group-label__text {
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--colour-text);
}

/* ── Callout boxes ─────────────────────────────────────────── */
.hb-callout {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  border-radius: 10px;
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-4);
  font-size: var(--font-size-sm);
  line-height: 1.7;
}
.hb-callout--purple { background: #EEEDFE; color: #26215C; }
.hb-callout--pink   { background: #FBEAF0; color: #501A28; }
.hb-callout__icon   { flex-shrink: 0; margin-top: 2px; }
.hb-callout__heading { font-weight: 700; margin-bottom: var(--space-1); }

/* ── Cross-link card ───────────────────────────────────────── */
.hb-cross-link {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: #EEEDFE;
  border: 0.5px solid #D6D3F5;
  border-radius: 12px;
  padding: var(--space-4) var(--space-5);
  text-decoration: none;
  color: inherit;
  margin-top: var(--space-6);
  transition: box-shadow 0.15s;
}
.hb-cross-link:hover { box-shadow: var(--shadow-sm); }
.hb-cross-link__icon { flex-shrink: 0; color: #422A7E; }
.hb-cross-link__title { font-size: var(--font-size-sm); font-weight: 700; color: #422A7E; margin-bottom: 2px; }
.hb-cross-link__body  { font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.hb-cross-link__arrow { margin-left: auto; flex-shrink: 0; color: #422A7E; }

/* ── Values page ───────────────────────────────────────────── */

.hb-values-graphic-wrap { width: 100%; }
.hb-values-graphic { width: auto; max-width: 100%; height: auto; border-radius: 12px; display: block; }

.hb-values-fallback {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-4);
}
.hb-value-card {
  background: #fff;
  border: 0.5px solid var(--off-white);
  border-radius: 12px;
  padding: var(--space-5);
}
.hb-value-card__title { font-size: var(--font-size-md); font-weight: 700; margin-bottom: var(--space-2); }
.hb-value-card__body  { font-size: var(--font-size-sm); color: var(--colour-text-muted); line-height: 1.6; }

/* ── EAP panel (Wellbeing page) ────────────────────────────── */
.hb-eap-panel {
  background: #422A7E;
  border-radius: 12px;
  padding: var(--space-6);
  color: #fff;
}
.hb-eap-panel__header {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  align-items: flex-start;
}
.hb-eap-panel__eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
  margin-bottom: var(--space-1);
}
.hb-eap-panel__body { font-size: var(--font-size-sm); color: rgba(255,255,255,.9); line-height: 1.6; }

.hb-eap-phone {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: rgba(255,255,255,.12);
  border-radius: 10px;
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-5);
}
.hb-eap-phone__number { font-size: var(--font-size-2xl); font-weight: 700; color: #fff; }
.hb-eap-phone__note   { font-size: var(--font-size-xs); color: rgba(255,255,255,.7); }

.hb-eap-offerings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-5);
}
.hb-eap-offering {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: rgba(255,255,255,.9);
}
.hb-eap-offering__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #58A6AC;
  flex-shrink: 0;
}
.hb-eap-footnote {
  font-size: var(--font-size-xs);
  color: rgba(255,255,255,.6);
  border-top: 1px solid rgba(255,255,255,.15);
  padding-top: var(--space-4);
  margin: 0;
}

/* ── Stat tiles (Bike2Work, Cinema) ────────────────────────── */
.hb-stat-row {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
}
.hb-stat-tile {
  flex: 1;
  min-width: 140px;
  background: #EEEDFE;
  border-radius: 12px;
  padding: var(--space-5) var(--space-4);
  text-align: center;
}
.hb-stat-tile__value { font-size: var(--font-size-xl); font-weight: 700; color: #422A7E; margin-bottom: 4px; }
.hb-stat-tile__label { font-size: var(--font-size-xs); color: var(--colour-text-muted); }

/* ── Numbered steps ────────────────────────────────────────── */
.hb-steps { display: flex; flex-direction: column; gap: var(--space-4); }
.hb-steps--row { flex-direction: row; flex-wrap: wrap; gap: var(--space-3); }

.hb-step {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  background: #fff;
  border: 0.5px solid var(--off-white);
  border-radius: 12px;
  padding: var(--space-4);
}
.hb-step--compact {
  flex: 1;
  min-width: 130px;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hb-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #422A7E;
  color: #fff;
  font-size: var(--font-size-xs);
  font-weight: 700;
  flex-shrink: 0;
}
.hb-step__body { font-size: var(--font-size-sm); color: var(--colour-text); line-height: 1.6; }

/* ── Info boxes ────────────────────────────────────────────── */
.hb-info-row { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.hb-info-box {
  flex: 1;
  min-width: 200px;
  border-radius: 12px;
  padding: var(--space-5);
}
.hb-info-box--purple { background: #EEEDFE; }
.hb-info-box--teal   { background: #C5E5E7; }
.hb-info-box__label  { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--colour-text-muted); margin-bottom: var(--space-1); }
.hb-info-box__value  { font-size: var(--font-size-xl); font-weight: 700; color: #26215C; margin-bottom: 2px; }
.hb-info-box--teal .hb-info-box__value { color: #2E7A80; }
.hb-info-box__sub    { font-size: var(--font-size-xs); color: var(--colour-text-muted); }

/* ═══════════════════════════════════════════════════════════════
   Admin inline editing system
   ═══════════════════════════════════════════════════════════════ */

/* ── Edit toggle bar ───────────────────────────────────────── */
#hb-edit-bar {
  margin-bottom: var(--space-4);
}
.hb-edit-bar {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: #EEEDFE;
  border-radius: 8px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
}
.hb-edit-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-weight: 600;
  color: #26215C;
  user-select: none;
}
.hb-edit-toggle input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.hb-toggle-track {
  display: inline-flex;
  width: 36px;
  height: 20px;
  border-radius: 10px;
  background: #B7AEE8;
  position: relative;
  transition: background 0.2s;
}
.hb-edit-toggle input:checked ~ .hb-toggle-track { background: #422A7E; }
.hb-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.hb-edit-toggle input:checked ~ .hb-toggle-track .hb-toggle-thumb { transform: translateX(16px); }
.hb-edit-hint { font-size: var(--font-size-xs); color: #6057A8; }

/* ── Editable fields ───────────────────────────────────────── */
.hb-editable { border-radius: 3px; }
.hb-editable--on {
  outline: 1.5px dashed #B7AEE8;
  outline-offset: 2px;
  cursor: pointer;
  padding: 1px 2px;
  border-radius: 3px;
  position: relative;
  transition: outline-color 0.15s;
}
.hb-editable--on:hover { outline-color: #422A7E; background: rgba(66,42,126,.04); }

.hb-inline-input {
  width: 100%;
  font-family: var(--font-family);
  font-size: inherit;
  color: var(--colour-text);
  border: 1.5px solid #422A7E;
  border-radius: 6px;
  padding: var(--space-2) var(--space-3);
  background: #fff;
  outline: none;
  margin-bottom: var(--space-2);
  display: block;
}
.hb-inline-textarea { resize: vertical; min-height: 80px; }
.hb-inline-actions { display: flex; gap: var(--space-2); }

/* ── Sticky action bar ─────────────────────────────────────── */
#hb-sticky-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 9998;
  background: #fff;
  border-top: 1px solid var(--off-white);
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  gap: var(--space-4);
}
#hb-sticky-bar.hidden { display: none; }
.hb-sticky-bar__left { display: flex; flex-direction: column; gap: 2px; }
.hb-sticky__count { font-size: var(--font-size-sm); font-weight: 600; color: #26215C; }
.hb-sticky__meta  { font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.hb-sticky-bar__right { display: flex; gap: var(--space-2); }

/* Recruitment guide — two-column split layout (2026-09-23). Rail is a fixed
   ~340px column; the detail view drops it and goes full-width. */
.rg-split { display: flex; align-items: flex-start; gap: var(--space-8); }
.rg-rail { flex: 0 0 340px; width: 340px; position: sticky; top: var(--space-6); }
.rg-main { flex: 1 1 auto; min-width: 0; }
.rg-rail-heading { font-size: var(--font-size-lg); font-weight: 700; color: var(--colour-text); margin-bottom: var(--space-1); }
.rg-rail-intro { font-size: var(--font-size-sm); color: var(--colour-text-muted); margin-bottom: var(--space-4); }
.rg-search-wrap { margin-bottom: var(--space-5); }
.rg-nav, .rg-results { display: flex; flex-direction: column; gap: var(--space-2); }
.rg-nav-row, .rg-result-row {
  display: flex; align-items: flex-start; gap: var(--space-3); text-align: left; width: 100%;
  border: 1px solid var(--colour-border); background: var(--white); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); cursor: pointer; font-family: inherit;
}
.rg-nav-row:hover, .rg-result-row:hover { border-color: var(--purple); box-shadow: var(--shadow-sm); }
.rg-nav-row__title, .rg-result-row__title { display: block; font-size: var(--font-size-sm); font-weight: 700; color: var(--colour-text); }
.rg-nav-row__desc, .rg-result-row__snippet { display: block; font-size: var(--font-size-xs); color: var(--colour-text-muted); margin-top: 2px; }
.rg-no-results { font-size: var(--font-size-sm); color: var(--colour-text-muted); }
.rg-back-link {
  display: inline-block; border: none; background: none; font-family: inherit; font-size: var(--font-size-sm);
  font-weight: 600; color: #422A7E; cursor: pointer; padding: 0; margin-bottom: var(--space-4);
}
.rg-back-link:hover { text-decoration: underline; }
.rg-detail-title { font-size: var(--font-size-xl); font-weight: 700; color: var(--colour-text); margin-bottom: var(--space-6); }
@media (max-width: 900px) {
  .rg-split { flex-direction: column; }
  .rg-rail { width: 100%; position: static; }
}

/* Values page — full-width layout (no max-width cap) */
.hb-page--full { max-width: none; padding-right: 0; }
.hb-page--full .hb-values-graphic-wrap { margin-top: var(--space-2); }
.hb-page--full .hb-values-graphic { border-radius: 8px; }

/* ── Working Culture tab ────────────────────────────────────── */
.hb-hero-banner--full {
  width: calc(100% + 2 * var(--space-6));
  margin-left: calc(var(--space-6) * -1);
}

.hb-subsection-label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-3);
}

.hb-culture-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) {
  .hb-culture-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .hb-culture-grid { grid-template-columns: 1fr; }
}

.hb-culture-card {
  background: #fff;
  border: 0.5px solid var(--off-white);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.hb-culture-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.hb-cadence-pill {
  font-size: 0.6875rem;
  font-weight: 500;
  color: #2E7A80;
  background: #C5E5E7;
  padding: 2px 8px;
  border-radius: 6px;
  white-space: nowrap;
}
.hb-culture-card__title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--colour-text);
  margin-bottom: var(--space-2);
}
.hb-culture-card__desc {
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   Home page
   ══════════════════════════════════════════════════════════════ */

/* ── Page wrapper ─────────────────────────────────────────────── */
.home-page {
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: grid;
  grid-template-columns: 1fr 206px;
  gap: 16px;
  align-items: start;
}
.home-main { min-width: 0; }
.home-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  position: sticky;
  top: var(--space-4);
}
@media (max-width: 900px) {
  .home-page {
    grid-template-columns: 1fr;
    padding: var(--space-4) var(--space-4) var(--space-8);
  }
  .home-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
  .home-sidebar > * { flex: 1 1 200px; }
}
@media (max-width: 540px) {
  .home-sidebar { flex-direction: column; }
  .home-sidebar > * { flex: none; }
}

/* ── Welcome bar ──────────────────────────────────────────────── */
.home-welcome {
  position: relative;
  overflow: hidden;
  background: var(--purple);
  border-radius: 14px;
  padding: 1.75rem 2rem 1.5rem;
  margin-bottom: var(--space-6);
}
.home-welcome__content { position: relative; z-index: 1; }
.home-welcome__eyebrow {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #a89dd4;
  margin: 0 0 5px;
}
.home-welcome__heading {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--space-1);
  line-height: 1.15;
}
.home-welcome__date {
  font-size: 0.6875rem;
  color: #c4b8e8;
  margin: 0;
}
.home-welcome__circle {
  position: absolute;
  background: #58A6AC;
  opacity: 0.18;
  border-radius: 50%;
  pointer-events: none;
}
.home-welcome__circle--1 { width: 160px; height: 160px; top: -55px; right: 50px; }
.home-welcome__circle--2 { width: 80px;  height: 80px;  bottom: -28px; right: 18px; }

/* ── Section labels ───────────────────────────────────────────── */
.home-section-label {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin: 0 0 var(--space-3);
}

/* ── Snapshot grid — flex row, equal cards, one line ─────────── */
.home-snapshot-grid {
  display: flex;
  gap: var(--space-4);
  align-items: stretch;
}
.home-snapshot-grid > .home-card {
  flex: 1;
  min-width: 0;
}
/* KPI owners: 2×2 grid — tighter padding */
.home-snapshot-grid--4 { flex-wrap: wrap; gap: var(--space-3); }
.home-snapshot-grid--4 > .home-card {
  flex: 1 1 calc(50% - var(--space-2));
  padding: 0.65rem 0.85rem;
  gap: var(--space-1);
}
@media (max-width: 900px) {
  .home-snapshot-grid { flex-wrap: wrap; }
  .home-snapshot-grid > .home-card { flex: 1 1 calc(50% - var(--space-2)); }
}
@media (max-width: 540px) {
  .home-snapshot-grid > .home-card { flex: 1 1 100%; }
}

/* ── Snapshot card — culture-card style ──────────────────────── */
.home-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  background: #fff;
  border: 0.5px solid var(--off-white);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.home-card:hover,
.home-card:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 2px 12px rgba(88,166,172,0.15);
  outline: none;
}
/* Push whichever pill a card renders down to a shared baseline, so cards
   with shorter body text (e.g. no dateline, no sub-copy) don't leave their
   pill sitting higher than the rest of the row. */
.home-card > .home-pill {
  margin-top: auto;
}

/* Card header: icon sq + label inline */
.home-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.home-card__title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--colour-text);
}

.home-card__label {
  font-size: var(--font-size-sm);
  color: var(--colour-text);
}
.home-card__sub {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
}
.home-card__label--leave {
  font-size: var(--font-size-xs);
  line-height: 14px;
  margin: 0;
}
.home-card__sub--link {
  text-decoration: underline;
}
.home-card__empty {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin: 0;
}

/* ── Status pills ─────────────────────────────────────────────── */
.home-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1.5;
  margin-top: var(--space-1);
  width: fit-content;
}
.home-pill--teal   { background: #e6f5f5; color: #2d8a8f; }
.home-pill--red    { background: var(--bright-red); color: #fff; font-size: 0.75rem; padding: 4px 10px; font-weight: 700; }
.home-pill--green  { background: #eaf3de; color: #3B6D11; }
.home-pill--amber  { background: #fff8e6; color: #854F0B; }

/* ── Action-required card treatment ──────────────────────────── */
.home-card--urgent {
  border-color: var(--bright-red);
  border-width: 1.5px;
}
.home-card__action-flag {
  font-size: 0.625rem;
  font-weight: 800;
  color: var(--bright-red);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 2px;
}

/* ── Outstanding feedback-owed banner ─────────────────────────── */
.home-feedback-owed {
  border: 1.5px solid var(--bright-red);
  border-radius: var(--radius-md);
  background: #fcebeb;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-6);
}
.home-feedback-owed__header {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--dark-red);
}
.home-feedback-owed__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 6px 0 0;
  color: var(--colour-text);
  text-decoration: none;
}
.home-feedback-owed__row:hover .home-feedback-owed__cta { text-decoration: underline; }
.home-feedback-owed__cta {
  font-weight: 600;
  color: var(--bright-red);
  flex-shrink: 0;
  font-size: var(--font-size-sm);
}

/* ── Disabled card (e.g. coming-soon features) ───────────────── */

/* ── RAG dots row ─────────────────────────────────────────────── */
.home-rag-dots {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}
.home-rag-dot {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}
.home-rag-extra {
  font-size: 0.6875rem;
  color: var(--colour-text-muted);
}

/* ── Digest component (home page + Settings → Home page) ─────── */
.digest-component {
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid #e0ddf0;
}

.digest-header {
  background: var(--purple);
  padding: 0.85rem 1.2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.digest-header__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.digest-header__controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.digest-nav-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: #fff;
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.1s;
  padding: 0;
}
.digest-nav-btn:hover { background: rgba(255,255,255,0.28); }
.digest-add-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 600;
  transition: background 0.1s;
  white-space: nowrap;
}
.digest-add-btn:hover { background: rgba(255,255,255,0.28); }
.digest-mode-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.6875rem;
  font-weight: 600;
  transition: background 0.1s;
  white-space: nowrap;
}
.digest-mode-btn:hover { background: rgba(255,255,255,0.22); }

.digest-body {
  background: #fff;
}

/* ── Read-only grid ─────────────────────────────────────────── */
.digest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.digest-entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 0.5px solid #f0edf9;
}
.digest-entry:nth-child(odd) {
  border-right: 0.5px solid #f0edf9;
}
.digest-entry:last-child { border-bottom: none; }
.digest-entry:nth-last-child(2):nth-child(odd) { border-bottom: none; }
.digest-entry--filler {
  border-bottom: none;
  background: transparent;
}

.digest-badge {
  width: 52px;
  min-width: 52px;
  height: 52px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  word-break: break-word;
  overflow: hidden;
  padding: 2px;
}
.digest-badge--date  { background: var(--purple); color: #fff; }
.digest-badge--label { background: var(--teal);   color: var(--on-teal); text-transform: uppercase; letter-spacing: 0.02em; }

.digest-entry__body { flex: 1; min-width: 0; }
.digest-entry__title {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--purple);
  margin: 0;
  line-height: 1.3;
}
.digest-entry__icon {
  color: #c5bce8;
  flex-shrink: 0;
}

/* ── Empty state ────────────────────────────────────────────── */
.digest-empty {
  min-height: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--space-8) var(--space-4);
  background: #faf9fc;
}
.digest-empty__label {
  font-size: var(--font-size-sm);
  color: var(--colour-text-muted);
  margin: 0;
  text-align: center;
}
.digest-empty__add {
  font-size: var(--font-size-xs);
  color: var(--teal-text);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

/* ── Admin edit list ────────────────────────────────────────── */
.digest-edit-list {
  display: flex;
  flex-direction: column;
}
.digest-edit-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 0.5px solid #f0edf9;
}
.digest-type-toggle {
  display: flex;
  border: 1px solid #d8d3ec;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
}
.digest-type-btn {
  padding: 4px 8px;
  font-size: 0.6875rem;
  font-weight: 600;
  border: none;
  background: #f8f7fc;
  cursor: pointer;
  color: #9590b8;
  font-family: inherit;
  transition: background 0.1s, color 0.1s;
}
.digest-type-btn.is-active { background: var(--purple); color: #fff; }
.digest-type-btn.is-active.is-teal { background: var(--teal); }

.digest-edit-tag {
  width: 60px;
  min-width: 60px;
  height: 34px;
  border: 1px solid #d8d3ec;
  border-radius: 7px;
  font-size: 0.75rem;
  font-weight: 700;
  text-align: center;
  padding: 0 4px;
  font-family: inherit;
  color: var(--purple);
}
.digest-edit-title {
  flex: 1;
  min-width: 0;
  height: 34px;
  border: 1px solid #d8d3ec;
  border-radius: 7px;
  font-size: 0.8125rem;
  padding: 0 8px;
  font-family: inherit;
  color: var(--colour-text);
}
.digest-edit-tag:focus,
.digest-edit-title:focus,
.digest-icon-select:focus { outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal); }

.digest-icon-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.digest-icon-select {
  border: 1px solid #d8d3ec;
  border-radius: 7px;
  font-size: 0.75rem;
  padding: 4px 6px;
  height: 34px;
  font-family: inherit;
  color: var(--colour-text);
  max-width: 140px;
}
.digest-icon-preview {
  color: var(--teal-text);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.digest-delete-btn {
  background: none;
  border: none;
  color: #b5aed4;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: 4px 6px;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 0.1s;
}
.digest-delete-btn:hover { color: var(--bright-red); }

.tracker-withdraw-btn {
  background: none;
  border: none;
  color: #b5aed4;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.1s;
}
.tracker-withdraw-btn:hover { color: var(--bright-red); }

.tracker-undo-signoff-btn {
  background: none;
  border: none;
  color: #b5aed4;
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 4px;
  transition: color 0.1s;
}
.tracker-undo-signoff-btn:hover { color: var(--purple); }

.digest-add-row {
  padding: 10px 14px;
  display: flex;
  justify-content: flex-start;
}
.digest-add-row-btn {
  background: none;
  border: none;
  color: var(--teal-text);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  font-family: inherit;
  padding: 0;
  text-decoration: underline;
}

/* ── Save bar ───────────────────────────────────────────────── */
.digest-save-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) 0 0;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 600px) {
  .digest-grid { grid-template-columns: 1fr; }
  .digest-entry:nth-child(odd) { border-right: none; }
  .digest-entry:nth-last-child(2):nth-child(odd) { border-bottom: 0.5px solid #f0edf9; }
  .digest-entry:last-child { border-bottom: none; }
  .digest-edit-row { flex-wrap: wrap; }
  .digest-icon-select { max-width: 120px; }
}

/* ── Impact counter card ─────────────────────────────────────── */
.home-impact-card {
  border-radius: 12px;
  overflow: hidden;
  border: 0.5px solid #e0ddf0;
}
.home-impact-card__header {
  background: var(--teal);
  color: var(--on-teal);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.home-impact-edit-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  line-height: 1;
  border-radius: 3px;
}
.home-impact-edit-toggle:hover { color: #fff; }
.home-impact-card__rows { background: #fff; }
.home-impact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 10px 14px;
  border-bottom: 0.5px solid #f0edf0;
}
.home-impact-row:last-child { border-bottom: none; }
.home-impact-row__num {
  font-size: 1rem;
  font-weight: 700;
  color: var(--purple);
  white-space: nowrap;
  flex-shrink: 0;
}
.home-impact-row__label {
  font-size: 0.6875rem;
  color: #888;
  text-align: right;
  line-height: 1.35;
}
.home-impact-empty {
  padding: 10px 14px;
  font-size: 0.6875rem;
  color: #aaa;
}
.home-impact-edit-row {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border-bottom: 0.5px solid #f0edf0;
  background: #fff;
}
.home-impact-edit-row:last-child { border-bottom: none; }
.home-impact-edit-val {
  width: 52px;
  flex-shrink: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--purple);
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px 5px;
}
.home-impact-edit-lbl {
  flex: 1;
  min-width: 0;
  font-size: 0.6875rem;
  color: #555;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px 5px;
}
.home-impact-edit-val:focus,
.home-impact-edit-lbl:focus { outline: none; border-color: var(--teal); }
.home-impact-del-btn {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: #bbb;
  font-size: 1.0625rem;
  line-height: 1;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
}
.home-impact-del-btn:hover { color: var(--bright-red, #EB5663); }
.home-impact-add-row {
  padding: 7px 14px;
  background: #fafafa;
  border-top: 0.5px solid #f0edf0;
}
.home-impact-add-btn {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--teal-text);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.home-impact-add-btn:hover { text-decoration: underline; }
.home-impact-save-bar {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border-top: 0.5px solid #f0edf0;
}

/* ── Quote card ─────────────────────────────────────────────── */
.home-quote-card {
  border-radius: 12px;
  border: 0.5px solid #e0ddf0;
  background: #fff;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.home-quote-card__tag {
  display: inline-block;
  background: #e6f5f5;
  color: #2d8a8f;
  font-size: 0.5625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 7px;
  border-radius: 20px;
  align-self: flex-start;
}
.home-quote-card__mark {
  font-family: Georgia, serif;
  font-size: 2.25rem;
  line-height: 0.8;
  color: #e0ddf0;
  margin-top: 4px;
  user-select: none;
}
.home-quote-card__text {
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--purple);
  line-height: 1.55;
  margin: 0;
}
.home-quote-card__attr {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--teal-text);
  margin: 2px 0 0;
}

/* ── Admin quote bank ────────────────────────────────────────── */
.quote-bank-row {
  padding: var(--space-3) 0;
  border-bottom: 0.5px solid var(--off-white);
}
.quote-bank-row:last-child { border-bottom: none; }
.quote-bank-row__info { margin-bottom: 4px; }
.quote-bank-row__actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.quote-bank-row__text {
  font-size: var(--font-size-sm);
  color: var(--colour-text);
  margin: 0 0 2px;
  font-style: italic;
}
.quote-bank-row__attr {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin: 0;
}
.quote-bank-row__form { margin-top: var(--space-3); }
.quote-form {
  background: #faf9fc;
  border: 0.5px solid #e0ddf0;
  border-radius: 8px;
  padding: var(--space-4);
}

.table-responsive { overflow-x: auto; }

/* ── KPI updates: access badge ────────────────────────────────── */
.kpiupd-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--radius-full);
  background: #ece9f6;
  color: var(--purple);
  font-size: 0.75rem;
  font-weight: var(--font-weight-bold);
  vertical-align: middle;
  margin-left: 10px;
}
.kpiupd-badge svg { flex-shrink: 0; }

/* ── KPI updates: toolbar ─────────────────────────────────────── */
.kpiupd-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}
.kpiupd-toolbar .form-control { font-size: var(--font-size-sm); padding: 6px 10px; width: auto; }
.kpiupd-view-seg, .kpiupd-filter-seg {
  display: flex;
  background: #f3f1ec;
  border: 1px solid var(--colour-border);
  border-radius: 7px;
  padding: 3px;
  gap: 2px;
}
.kpiupd-seg-btn {
  border: none; background: transparent; color: var(--colour-text-muted);
  font-size: 0.75rem; padding: 6px 12px; border-radius: 5px; cursor: pointer;
  font-family: inherit; font-weight: 600; transition: background .1s, color .1s;
  white-space: nowrap;
}
.kpiupd-seg-btn--on { background: #fff; color: var(--purple); box-shadow: 0 1px 3px rgba(0,0,0,.1); }

.kpiupd-summary {
  font-size: 0.8125rem;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-3);
}
.kpiupd-summary strong { color: var(--colour-text); }

/* ── KPI updates: legend ──────────────────────────────────────── */
.kpiupd-legend {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 0.75rem;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-3);
}
.kpiupd-legend__item { display: flex; align-items: center; gap: 5px; }
.kpiupd-legend__dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* ── KPI updates: table ───────────────────────────────────────── */
.kpiupd-row__kpi { display: flex; align-items: center; gap: 6px; }
.kpiupd-row__owner { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.kpiupd-expand-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--colour-text-muted); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: transform 0.15s;
}
.kpiupd-expand-btn[aria-expanded="true"] { transform: rotate(90deg); }
.kpiupd-edit-title-btn, .kpiupd-edit-owner-btn, .kpiupd-edit-num-btn {
  background: none; border: none; cursor: pointer; padding: 2px;
  color: var(--colour-text-muted); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; transition: color 0.15s;
}
.kpiupd-edit-title-btn:hover, .kpiupd-edit-title-btn:focus-visible,
.kpiupd-edit-owner-btn:hover, .kpiupd-edit-owner-btn:focus-visible,
.kpiupd-edit-num-btn:hover, .kpiupd-edit-num-btn:focus-visible { color: var(--purple); }
.kpiupd-inline-input, .kpiupd-inline-select {
  display: inline-block; width: auto; min-width: 120px;
  padding: 2px 6px; font-size: inherit; height: auto;
}
.kpiupd-inline-input--num { min-width: 56px; width: 56px; }
.kpiupd-last-updated { font-size: 0.6875rem; color: var(--colour-text-muted); margin-top: 2px; }
.kpiupd-row-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.kpiupd-delete-btn, .kpiupd-hide-btn {
  background: none; border: none; cursor: pointer; padding: 4px;
  color: var(--colour-text-muted); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; border-radius: 4px; transition: color 0.15s, background 0.15s;
}
.kpiupd-delete-btn:hover, .kpiupd-delete-btn:focus-visible { color: var(--bright-red); background: #fde8ea; }
.kpiupd-hide-btn:hover, .kpiupd-hide-btn:focus-visible { color: var(--purple); background: var(--colour-surface); }
.kpiupd-hide-btn[aria-label^="Show"] { color: var(--orange); }

.kpiupd-pill { display: inline-block; padding: 3px 10px; border-radius: 6px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.kpiupd-pill--updated { background: #e6f4ec; color: #1a6e3c; }
.kpiupd-pill--not-yet { background: #f0f0f0; color: #595959; }
.kpiupd-pill--overdue { background: #fdecea; color: #8b1c1c; }

.kpiupd-track { display: flex; gap: 2px; align-items: center; overflow-x: auto; max-width: 230px; padding: 2px 0; }
.kpiupd-track__cell { width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0; }
.kpiupd-track__cell--on_time { background: #5CA36F; }
.kpiupd-track__cell--late    { background: #E79A4C; }
.kpiupd-track__cell--missed  { background: #D8635A; }
.kpiupd-track__cell--not_due { background: #E6E2EC; }
.kpiupd-track-pct { font-size: 0.75rem; font-weight: 700; color: var(--colour-text); margin-left: 8px; white-space: nowrap; }
.kpiupd-track-wrap { display: flex; align-items: center; }

.kpiupd-nudge-count { font-size: 0.8125rem; }
.kpiupd-nudge-count__latest { color: var(--colour-text-muted); font-size: 0.6875rem; }

/* Expandable detail row */
.kpiupd-detail-row td { background: #faf9fc; padding: var(--space-4) var(--space-5); }
.kpiupd-detail-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
@media (max-width: 700px) { .kpiupd-detail-cols { grid-template-columns: 1fr; } }
.kpiupd-detail-heading { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--purple); margin-bottom: var(--space-2); }
.kpiupd-detail-list { display: flex; flex-direction: column; gap: 6px; font-size: var(--font-size-sm); }
.kpiupd-detail-list__row { display: flex; align-items: baseline; gap: 6px; }
.kpiupd-detail-list__empty { color: var(--colour-text-muted); font-size: var(--font-size-sm); }

/* ── KPI updates: nudge modal ─────────────────────────────────── */
.kpiupd-nudge-to { display: flex; align-items: center; gap: 10px; padding: var(--space-3); background: var(--colour-surface); border-radius: 8px; margin-bottom: var(--space-4); }
.kpiupd-nudge-to__meta { font-size: var(--font-size-sm); }
.kpiupd-nudge-to__email { color: var(--colour-text-muted); font-size: 0.75rem; }
.kpiupd-nudge-footer-note { font-size: 0.75rem; color: var(--colour-text-muted); margin-right: auto; align-self: center; }

@media (max-width: 640px) {
  .kpiupd-toolbar { justify-content: flex-start; }
  .kpiupd-track { max-width: 140px; }
}

/* ── Policies (Life at The Difference → Policies) ────────────────── */

/* Hub (/handbook/policies) — Handbook-style tab bar (Search + one tab per
   category); browsing mode reuses the global .hb-tabs/.hb-tab component. */
.pol-hub-intro {
  font-size: var(--font-size-sm);
  color: var(--colour-text);
  line-height: 1.6;
  max-width: 640px;
  margin: var(--space-4) 0 var(--space-4);
}

.pol-search-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--white);
  border: 1px solid var(--off-white);
  border-radius: 8px;
  padding: 10px 14px;
  max-width: 420px;
  margin-bottom: var(--space-5);
  color: var(--colour-text-muted);
}
.pol-search-bar svg { flex: 0 0 auto; }
.pol-search-bar input {
  border: none;
  outline: none;
  flex: 1;
  font-family: inherit;
  font-size: var(--font-size-sm);
  color: var(--colour-text);
  background: transparent;
}

.pol-list { margin-top: var(--space-5); }
.pol-list-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  padding: 15px 18px;
  background: var(--white);
  border-radius: 7px;
  margin-bottom: var(--space-2);
  border: 1px solid var(--off-white);
  text-decoration: none;
  color: inherit;
}
.pol-list-row:hover { cursor: pointer; border-color: #2E7379; }
.pol-list-row__link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.pol-list-row__name { font-weight: 700; font-size: var(--font-size-sm); color: var(--colour-text); }
.pol-list-row__meta { color: var(--colour-text-muted); font-size: var(--font-size-xs); margin-top: 3px; }
.pol-list-row__go { color: #2E7379; font-weight: 700; font-size: var(--font-size-xs); flex: 0 0 auto; }

.pol-detail { max-width: 680px; }
.pol-detail h1 { color: var(--purple); font-size: var(--font-size-2xl); margin-bottom: var(--space-1); }
.pol-meta-row {
  display: flex;
  gap: var(--space-6);
  color: var(--colour-text-muted);
  font-size: var(--font-size-xs);
  margin: var(--space-3) 0 var(--space-6);
  flex-wrap: wrap;
}
.pol-meta-row b { color: var(--colour-text); font-weight: 700; }
.pol-summary-body { color: var(--colour-text); font-size: var(--font-size-sm); line-height: 1.65; }

.pol-drive-actions { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.pol-drive-btn { text-decoration: none; }
.pol-drive-unlinked { color: var(--colour-text-muted); font-size: var(--font-size-sm); margin-top: var(--space-5); }

.pol-link-editor {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-top: var(--space-5);
  flex-wrap: wrap;
}
.pol-link-editor input {
  flex: 1;
  min-width: 260px;
}

/* ── Policy visual layouts (layout = 'visual', PolicyBlockRenderer) ──
   Shared component library across every visual-layout policy — do not
   duplicate these per policy; add a new block type here instead. */

.pol-visual-wrap { max-width: 1040px; }
.pol-visual-wrap .hb-page-header { margin-bottom: var(--space-2); }
.pol-visual-title { font-size: var(--font-size-2xl); font-weight: 700; color: var(--purple); margin-bottom: var(--space-1); }
.pol-visual-wrap #pol-drive-area .pol-drive-actions,
.pol-visual-wrap #pol-drive-area .pol-drive-unlinked,
.pol-visual-wrap #pol-drive-area .pol-link-editor { margin-top: 0; }

/* section_heading */
.pol-sec-label {
  font-size: var(--font-size-sm);
  font-weight: 800;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: #2E7379;
  margin: var(--space-8) 0 var(--space-3);
}
.pol-sec-label:first-of-type { margin-top: var(--space-6); }

/* paragraph / bullet_list — the two plain block types (JD sections, Shared
   content, Bias-awareness gate content, Person specification). Every other
   .pol-* block styles itself explicitly; these two didn't, so the global
   `* { margin:0; padding:0; }` reset left <ul> with browser-default
   list-style-position:outside and zero padding-left — the bullet marker
   rendered outside the content box (off to the left of the card) instead of
   indented alongside its text. */
.pol-paragraph { font-size: var(--font-size-sm); line-height: 1.65; color: var(--colour-text); margin-bottom: var(--space-3); }
.pol-paragraph:last-child { margin-bottom: 0; }
.pol-bullet-list { list-style: disc; margin: 0 0 var(--space-3) 0; padding-left: 20px; font-size: var(--font-size-sm); line-height: 1.65; color: var(--colour-text); }
.pol-bullet-list:last-child { margin-bottom: 0; }
.pol-table-wrap { margin: 0 0 var(--space-3) 0; }
.pol-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0 4px; font-size: var(--font-size-sm); line-height: 1.55; color: var(--colour-text); text-align: left; }
.pol-table th, .pol-table td { padding: 10px 14px; vertical-align: top; text-align: left; font-weight: 400; background: var(--colour-surface); border: 0; box-shadow: none; overflow-wrap: anywhere; white-space: normal; text-transform: none; letter-spacing: normal; }
.pol-table thead th { background: var(--purple); color: #fff; font-weight: 700; }
.pol-table thead th:first-child { width: 30%; }
.pol-table--c40 thead th:first-child { width: 40%; }
.pol-table--c50 thead th:first-child { width: 50%; }
.pol-table tbody th { font-weight: 700; color: var(--colour-text); }
.pol-table tbody tr th:first-child, .pol-table thead th:first-child { border-radius: 6px 0 0 6px; }
.pol-table tbody tr td:last-child, .pol-table thead th:last-child { border-radius: 0 6px 6px 0; }
.pol-bullet-list li { margin-bottom: 6px; }
.pol-bullet-list li:last-child { margin-bottom: 0; }

/* tone_card_grid */
.pol-card-grid { display: grid; gap: var(--space-4); }
.pol-card-grid--cols-2 { grid-template-columns: 1fr 1fr; }
.pol-card-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pol-card-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
  .pol-card-grid--cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .pol-card-grid--cols-2, .pol-card-grid--cols-3, .pol-card-grid--cols-4 { grid-template-columns: 1fr; }
}
.pol-tone-card { border-radius: 10px; padding: 18px 18px 20px; color: var(--white); position: relative; }
.pol-tone-card--teal   { background: #2E7379; }
.pol-tone-card--purple { background: var(--purple); }
.pol-tone-card--maroon { background: var(--dark-red); }
.pol-tone-card--amber  { background: var(--orange); }
.pol-tone-badge {
  width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-3);
}
.pol-tone-badge svg { width: 18px; height: 18px; }
.pol-tone-card h3 { font-size: var(--font-size-sm); margin-bottom: 4px; color: var(--white); }
.pol-tone-card__big { font-size: var(--font-size-lg); font-weight: 800; margin-bottom: 4px; }
.pol-tone-card__sub { font-size: var(--font-size-xs); opacity: 0.9; line-height: 1.5; }
.pol-tone-card ul { margin: 0; padding: 0; list-style: none; font-size: var(--font-size-xs); line-height: 1.6; }
.pol-tone-card li { margin-bottom: 6px; padding-left: 16px; position: relative; }
.pol-tone-card li::before { content: "–"; position: absolute; left: 0; opacity: 0.7; }

/* tone_card_grid — 'outline' card_style: white card, coloured border,
   inline icon+heading, plain stacked lines instead of a bulleted list.
   Default since the Travel & Expenses retrofit (2026); 'solid' (above) is
   the original coloured-background look, kept available for any future
   policy that wants it deliberately — see docs/handbook.md. */
.pol-tone-card--outline { background: var(--white); color: var(--colour-text); border: 2px solid transparent; }
.pol-tone-card--outline.pol-tone-card--teal   { border-color: #2E7379; }
.pol-tone-card--outline.pol-tone-card--purple { border-color: var(--purple); }
.pol-tone-card--outline.pol-tone-card--maroon { border-color: var(--dark-red); }
.pol-tone-card--outline.pol-tone-card--amber  { border-color: var(--orange); }
.pol-tone-card__head-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.pol-tone-card--outline .pol-tone-badge { margin-bottom: 0; }
.pol-tone-card--outline.pol-tone-card--teal   .pol-tone-badge { background: rgba(46, 115, 121, 0.1); color: #2E7379; }
.pol-tone-card--outline.pol-tone-card--purple .pol-tone-badge { background: rgba(66, 42, 126, 0.1); color: var(--purple); }
.pol-tone-card--outline.pol-tone-card--maroon .pol-tone-badge { background: rgba(80, 26, 40, 0.1); color: var(--dark-red); }
.pol-tone-card--outline.pol-tone-card--amber  .pol-tone-badge { background: rgba(239, 128, 50, 0.12); color: var(--orange); }
.pol-tone-card--outline.pol-tone-card--teal   h3 { color: #2E7379; }
.pol-tone-card--outline.pol-tone-card--purple h3 { color: var(--purple); }
.pol-tone-card--outline.pol-tone-card--maroon h3 { color: var(--dark-red); }
.pol-tone-card--outline.pol-tone-card--amber  h3 { color: var(--orange); }
.pol-tone-card__line { font-size: var(--font-size-sm); line-height: 1.65; color: var(--black); margin-bottom: var(--space-3); }
.pol-tone-card__line:last-child { margin-bottom: 0; }
.pol-tone-card__line b { font-weight: 800; color: var(--black); }
.pol-amount { color: var(--bright-red); font-weight: 800; }

/* timeline_hero / accent_card_grid / link_buttons — the Data protection page. Purple panel (about 80%) with
   teal accent bars (about 20%). The accent bar is a block, not a border, so there are no divider lines. */
.pol-hero {
  background: var(--purple);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-8) var(--space-6) var(--space-6);
  margin-top: var(--space-6);
}
/* A card grid straight after a steps panel (Recruitment) needs the same gap the panel has above it. */
.pol-hero + .pol-card-grid { margin-top: var(--space-6); }
/* A card grid straight after a key message needs a gap (Prevention of harm and harassment). */
.pol-callout + .pol-card-grid { margin-top: var(--space-6); }
.pol-hero__heading {
  font-size: var(--font-size-xl);
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
  margin: 0 0 var(--space-6);
}
.pol-hero__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.pol-hero__row + .pol-hero__row { margin-top: var(--space-6); }
.pol-hero__row-label { font-size: var(--font-size-md); font-weight: 700; color: var(--white); text-align: left; margin: 0 0 var(--space-3); }
/* Steps and card-grid cards share the outlined-card look and type scale of the other blocks (coloured outline cards such as
   All time off and leave): white, 2px teal outline, 10px radius, small text. Teal here is a border, never text. */
.pol-hero__step, .pol-accent-card {
  position: relative;
  background: var(--white);
  color: var(--colour-text);
  border: 2px solid #2E7379;
  border-radius: 10px;
  padding: 16px 16px 18px;
  text-align: left;
  overflow: hidden;
}
.pol-hero__step { display: flex; flex-direction: column; gap: var(--space-2); }
.pol-hero__step-label { font-size: var(--font-size-sm); font-weight: 700; color: var(--purple); }
.pol-hero__step-text { font-size: var(--font-size-sm); line-height: 1.65; }
.pol-hero a, .pol-accent-card a { color: var(--purple); text-decoration: underline; overflow-wrap: anywhere; }
.pol-hero a:hover { color: var(--black); }
.pol-hero a:focus-visible, .pol-link-btn:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }

.pol-accent-grid { display: grid; gap: var(--space-4); margin-top: var(--space-6); }
.pol-accent-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.pol-accent-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.pol-accent-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.pol-accent-card h2 { font-size: var(--font-size-sm); font-weight: 700; color: var(--purple); margin: 0 0 var(--space-3); }
.pol-accent-card p { font-size: var(--font-size-sm); line-height: 1.65; margin: 0 0 var(--space-3); }
.pol-accent-card p:last-child { margin-bottom: 0; }

.pol-link-row { margin-top: var(--space-8); }
.pol-link-row__label { font-size: var(--font-size-sm); color: var(--black); margin: 0 0 var(--space-3); }
.pol-link-row__btns { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pol-link-btn { font-size: var(--font-size-sm); white-space: normal; }
.pol-link-btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

@media (max-width: 1024px) {
  .pol-hero__steps { grid-template-columns: repeat(2, 1fr); }
  .pol-accent-grid--cols-3 { grid-template-columns: 1fr; }
  .pol-accent-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .pol-meta-row { font-size: var(--font-size-sm); }
  .pol-hero { padding: var(--space-6) var(--space-4) var(--space-4); }
  .pol-hero__steps, .pol-accent-grid--cols-2, .pol-accent-grid--cols-4 { grid-template-columns: 1fr; }
  .pol-hero__heading { font-size: var(--font-size-lg); }
  /* The title, then the Drive button and Edit link under it, instead of a row that pushes the page wider. */
  .pol-visual-wrap .hb-page-header { flex-wrap: wrap; }
  .pol-drive-btn { white-space: normal; }
  .pol-visual-wrap #pol-drive-area .btn--sm { font-size: 0.875rem; }
}

/* checklist_card — always teal tick bullets, no per-item variant */
.pol-check-list { background: var(--white); border-radius: 10px; padding: 18px 20px; border: 1px solid var(--off-white); margin-top: var(--space-3); }
.pol-check-list__title { font-weight: 700; font-size: var(--font-size-sm); margin-bottom: var(--space-3); }
.pol-check-list__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px var(--space-6); }
.pol-check-list--single .pol-check-list__grid { grid-template-columns: 1fr; }
@media (max-width: 640px) {
  .pol-check-list__grid { grid-template-columns: 1fr; }
}
.pol-check-item { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--font-size-sm); padding: 6px 0; }
.pol-check-item__tick {
  width: 20px; height: 20px; border-radius: 50%; background: #2E7379; color: var(--white);
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.pol-check-item__tick svg { width: 11px; height: 11px; }

/* callout — reserved for the single most important line per section */
.pol-callout {
  margin-top: var(--space-4); padding: 12px 14px; background: var(--orange);
  border-radius: 7px; font-size: var(--font-size-sm); color: var(--white); font-weight: 800;
}
/* callout inside a row loses its standalone top margin and centres vertically
   next to whatever (usually taller) block it sits alongside */
.pol-callout--in-row { margin-top: 0; display: flex; align-items: center; }

/* note_line */
.pol-note-line { font-size: var(--font-size-xs); color: var(--colour-text-muted); margin-top: var(--space-3); line-height: 1.5; }

/* chip_row */
.pol-chip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.pol-chip { background: #EEEDFE; color: var(--purple); font-size: var(--font-size-xs); font-weight: 600; padding: 6px 12px; border-radius: 20px; }

/* action_card_grid */
.pol-action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 640px) {
  .pol-action-grid { grid-template-columns: 1fr; }
}
.pol-action-card { background: var(--white); border-radius: 10px; padding: 18px 20px; border: 1px solid var(--off-white); }
.pol-action-card h4 { font-size: var(--font-size-sm); color: var(--purple); margin-bottom: var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
.pol-action-card h4 svg { width: 18px; height: 18px; flex: 0 0 auto; }
.pol-action-card ol, .pol-action-card ul { margin: 0; padding-left: 18px; font-size: var(--font-size-sm); line-height: 1.7; color: var(--colour-text); }
.pol-action-card__intro { font-size: var(--font-size-sm); color: var(--colour-text); margin: 0 0 var(--space-2); }
.pol-action-card__warn { margin-top: var(--space-3); font-size: var(--font-size-xs); color: var(--dark-red); font-weight: 700; }

/* spotlight — single high-contrast card for the one named contact/fact that
   matters most in a policy (e.g. the DSL for Safeguarding) */
.pol-spotlight {
  border-radius: 10px; padding: 20px 24px; color: var(--white);
  display: flex; align-items: center; gap: var(--space-4);
}
.pol-spotlight--teal   { background: #2E7379; }
.pol-spotlight--purple { background: var(--purple); }
.pol-spotlight--maroon { background: var(--dark-red); }
.pol-spotlight__avatar {
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.pol-spotlight__avatar svg { width: 24px; height: 24px; }
.pol-spotlight__eyebrow { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: 0.6px; color: rgba(255, 255, 255, 0.75); font-weight: 700; }
.pol-spotlight__name { font-size: var(--font-size-md); font-weight: 800; margin-top: 2px; }
.pol-spotlight__role { font-size: var(--font-size-sm); color: rgba(255, 255, 255, 0.85); margin-top: 2px; }

/* spotlight — 'outline' style (default since the Travel & Expenses
   retrofit): white card, coloured border, icon/eyebrow/name coloured to
   match instead of white-on-solid. 'solid' (above) kept available. */
.pol-spotlight--outline { background: var(--white); border: 2px solid transparent; }
.pol-spotlight--outline.pol-spotlight--teal   { border-color: #2E7379; }
.pol-spotlight--outline.pol-spotlight--purple { border-color: var(--purple); }
.pol-spotlight--outline.pol-spotlight--maroon { border-color: var(--dark-red); }
.pol-spotlight--outline .pol-spotlight__avatar { background: rgba(0, 0, 0, 0.06); }
.pol-spotlight--outline.pol-spotlight--teal   .pol-spotlight__avatar { background: rgba(46, 115, 121, 0.1); color: #2E7379; }
.pol-spotlight--outline.pol-spotlight--purple .pol-spotlight__avatar { background: rgba(66, 42, 126, 0.1); color: var(--purple); }
.pol-spotlight--outline.pol-spotlight--maroon .pol-spotlight__avatar { background: rgba(80, 26, 40, 0.1); color: var(--dark-red); }
.pol-spotlight--outline .pol-spotlight__eyebrow { color: var(--grey); }
.pol-spotlight--outline .pol-spotlight__role { color: var(--grey); }
.pol-spotlight--outline.pol-spotlight--teal   .pol-spotlight__eyebrow,
.pol-spotlight--outline.pol-spotlight--teal   .pol-spotlight__name   { color: #2E7379; }
.pol-spotlight--outline.pol-spotlight--purple .pol-spotlight__eyebrow,
.pol-spotlight--outline.pol-spotlight--purple .pol-spotlight__name   { color: var(--purple); }
.pol-spotlight--outline.pol-spotlight--maroon .pol-spotlight__eyebrow,
.pol-spotlight--outline.pol-spotlight--maroon .pol-spotlight__name   { color: var(--dark-red); }

/* row — generic wrapper laying out child blocks side by side in equal-width
   columns instead of stacking full-width; any block type can nest inside */
.pol-row { display: grid; gap: var(--space-4); align-items: stretch; margin-top: var(--space-3); }
.pol-row--cols-2 { grid-template-columns: 1fr 1fr; }
.pol-row--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 760px) {
  .pol-row--cols-2, .pol-row--cols-3 { grid-template-columns: 1fr; }
}

/* tiered_card_grid — comparing several things side by side, each with a
   headline stat plus one or more labelled tiers of detail. Wraps
   responsively (auto-fit) rather than a fixed columns count. */
.pol-tiered-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-4); margin-top: var(--space-3); }
.pol-tiered-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .pol-tiered-grid--cols-3 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } }
.pol-tiered-card { border-radius: 10px; padding: 16px 16px 18px; color: var(--white); }
.pol-tiered-card--teal   { background: #2E7379; }
.pol-tiered-card--purple { background: var(--purple); }
.pol-tiered-card--maroon { background: var(--dark-red); }
.pol-tiered-card__head-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); margin-bottom: 2px; }
.pol-tiered-card__link { display: inline-block; margin-top: var(--space-3); font-size: var(--font-size-xs); font-weight: 700; color: var(--teal-text); text-decoration: underline; }
.pol-tiered-card h3 { font-size: var(--font-size-sm); color: var(--white); }
.pol-tiered-card__tag {
  font-size: 0.625rem; background: rgba(255, 255, 255, 0.2); padding: 3px 8px; border-radius: 10px;
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; flex: 0 0 auto;
}
.pol-tiered-card__headline { font-size: var(--font-size-lg); font-weight: 800; margin-top: 2px; }
.pol-tiered-card__note { font-size: var(--font-size-xs); opacity: 0.88; margin: 5px 0 4px; line-height: 1.45; }
.pol-tier { margin-top: 11px; padding-top: 9px; }
.pol-tier + .pol-tier { border-top: 1px solid rgba(255, 255, 255, 0.18); }
.pol-tier__label { font-size: 0.656rem; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 800; opacity: 0.8; margin-bottom: 5px; }
.pol-tier ul { margin: 0; padding: 0; list-style: none; font-size: var(--font-size-xs); line-height: 1.55; }
.pol-tier li { padding-left: 13px; position: relative; margin-bottom: 3px; }
.pol-tier li::before { content: "–"; position: absolute; left: 0; opacity: 0.65; }

/* tiered_card_grid — 'outline' card_style (default since the Travel &
   Expenses retrofit): white card, coloured border, heading coloured to
   match. 'solid' (above) kept available. */
.pol-tiered-card--outline { background: var(--white); color: var(--colour-text); border: 2px solid transparent; }
.pol-tiered-card--outline.pol-tiered-card--teal   { border-color: #2E7379; }
.pol-tiered-card--outline.pol-tiered-card--purple { border-color: var(--purple); }
.pol-tiered-card--outline.pol-tiered-card--maroon { border-color: var(--dark-red); }
.pol-tiered-card--outline.pol-tiered-card--teal   h3 { color: #2E7379; }
.pol-tiered-card--outline.pol-tiered-card--purple h3 { color: var(--purple); }
.pol-tiered-card--outline.pol-tiered-card--maroon h3 { color: var(--dark-red); }
.pol-tiered-card--outline .pol-tiered-card__tag { background: rgba(0, 0, 0, 0.06); }
.pol-tiered-card--outline.pol-tiered-card--teal   .pol-tiered-card__tag { background: rgba(46, 115, 121, 0.12); color: #2E7379; }
.pol-tiered-card--outline.pol-tiered-card--purple .pol-tiered-card__tag { background: rgba(66, 42, 126, 0.12); color: var(--purple); }
.pol-tiered-card--outline.pol-tiered-card--maroon .pol-tiered-card__tag { background: rgba(80, 26, 40, 0.12); color: var(--dark-red); }
.pol-tiered-card--outline .pol-tiered-card__note { opacity: 1; color: var(--grey); }
.pol-tiered-card--outline .pol-tier + .pol-tier { border-top-color: var(--off-white); }
.pol-tiered-card--outline .pol-tier__label { opacity: 1; color: var(--grey); }

/* info_box — reference detail/caveats, distinct from callout's single
   "act on this now" line; soft-purple, no icon */
.pol-info-box { background: #EEEDFE; color: var(--purple); border-radius: 8px; padding: 14px 18px; font-size: var(--font-size-xs); line-height: 1.7; margin-top: var(--space-5); }
.pol-info-box b { font-weight: 800; }
.pol-info-box__segment { margin-right: var(--space-2); }
.pol-info-box__segment:last-child { margin-right: 0; }

/* ── WTFI framework overview page ────────────────────────────── */
.wtfi-hero {
  position: relative;
  overflow: hidden;
  background: var(--purple);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
}
.wtfi-hero__corner { border-color: var(--teal) transparent transparent transparent; }
.wtfi-hero__eyebrow {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal-text);
  margin-bottom: var(--space-3);
}
.wtfi-hero__title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--white); margin: 0 0 var(--space-3); }
.wtfi-hero__body { font-size: 0.9375rem; line-height: 1.6; color: #EEEDFE; margin: 0; }

.wtfi-section-title { font-size: var(--font-size-xl); font-weight: var(--font-weight-bold); color: var(--purple); margin: 0 0 var(--space-3); }
.wtfi-section-intro { font-size: 0.9375rem; line-height: 1.65; color: var(--colour-text-muted); margin: 0 0 var(--space-6); }

.wtfi-framework, .wtfi-flow, .wtfi-related { margin-bottom: var(--space-8); }

.wtfi-pyramid-grid {
  display: grid;
  grid-template-columns: 336px 1fr;
  grid-template-rows: 90px 125px 120px 125px;
  column-gap: var(--space-6);
  align-items: stretch;
}
.wtfi-pyramid-svg { grid-column: 1; grid-row: 1 / 5; width: 100%; height: auto; align-self: start; }

.wtfi-tier-card {
  grid-column: 2;
  background: var(--colour-surface);
  border-left: 5px solid var(--wtfi-tier-colour, var(--purple));
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-4) var(--space-5);
  margin: 6px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  text-decoration: none;
}
a.wtfi-tier-card:hover { background: #EEEDFE; }
.wtfi-tier-card--toc         { --wtfi-tier-colour: #422A7E; grid-row: 1; }
.wtfi-tier-card--kpis        { --wtfi-tier-colour: #5B4AA0; grid-row: 2; }
.wtfi-tier-card--key-results { --wtfi-tier-colour: #58A6AC; grid-row: 3; }
.wtfi-tier-card--activities  { --wtfi-tier-colour: #8FC3C7; grid-row: 4; }
.wtfi-tier-card__label { font-size: 0.8125rem; line-height: 1.2; font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--wtfi-tier-colour, var(--purple)); }
.wtfi-tier-card__body { font-size: 0.9375rem; line-height: 1.5; color: var(--colour-text); margin: 0; }
.wtfi-tier-card__tag {
  display: inline-block;
  align-self: flex-start;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--dark-red);
  background: rgba(80, 26, 40, 0.08);
  border-radius: var(--radius-sm);
  padding: 3px var(--space-3);
}

.wtfi-flow-strip { display: flex; align-items: stretch; gap: var(--space-3); flex-wrap: wrap; }
.wtfi-flow-card {
  flex: 1 1 160px;
  background: var(--white);
  border: 1px solid var(--colour-border);
  border-top: 3px solid var(--purple);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}
.wtfi-flow-card__title { font-weight: var(--font-weight-bold); color: var(--purple); margin-bottom: var(--space-2); }
.wtfi-flow-card__body { font-size: 0.875rem; line-height: 1.55; color: var(--colour-text-muted); margin: 0; }
.wtfi-flow-arrow { display: flex; align-items: center; color: var(--teal-text); font-size: 1.25rem; font-weight: var(--font-weight-bold); }

.wtfi-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-4); }
.wtfi-related-card {
  position: relative;
  overflow: hidden;
  display: block;
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-decoration: none;
  color: var(--white);
}
.wtfi-related-card--purple { background: var(--purple); }
.wtfi-related-card--teal { background: var(--teal); }
.wtfi-related-card__corner { width: 0; height: 0; }
.wtfi-related-card--purple .wtfi-related-card__corner { border-color: transparent transparent var(--teal) transparent; }
.wtfi-related-card--teal .wtfi-related-card__corner { border-color: transparent transparent var(--purple) transparent; }
.wtfi-related-card__title { font-size: 1.0625rem; font-weight: var(--font-weight-bold); color: var(--white); margin-bottom: var(--space-2); }
.wtfi-related-card__body { font-size: 0.875rem; line-height: 1.55; color: rgba(255, 255, 255, 0.9); margin: 0; }

@media (max-width: 760px) {
  .wtfi-pyramid-grid { grid-template-columns: 1fr; grid-template-rows: auto; row-gap: var(--space-4); }
  .wtfi-pyramid-svg { grid-column: 1; grid-row: auto; max-width: 280px; margin: 0 auto; }
  .wtfi-tier-card { grid-column: 1; grid-row: auto; border-radius: var(--radius-md); }
  .wtfi-related-grid { grid-template-columns: 1fr; }
}

/* ── WTFI 2030 Theory of Change ──────────────────────────────── */
.toc-matrix-wrap { overflow-x: auto; padding-bottom: var(--space-2); }
.toc-matrix {
  display: grid;
  grid-template-columns: 108px 1fr 1.5fr 1.15fr 1.9fr 1.35fr;
  gap: 10px;
  min-width: 1220px;
}
.toc-col-head {
  background: var(--purple);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
  display: flex;
  align-items: center;
}
.toc-headline-cell {
  background: #F3E7EA;
  border: 1px solid #E3C9CF;
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  line-height: 1.35;
  color: var(--dark-red);
  display: flex;
  align-items: center;
}
.toc-row-label {
  background: var(--white);
  border: 1px solid #D8D3EE;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 0.8125rem;
  font-weight: var(--font-weight-bold);
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-3) 0;
}
.toc-cell {
  border-radius: var(--radius-md);
  padding: 13px var(--space-4);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--colour-text);
  text-align: left;
}
.toc-cell--problem { background: #F3E7EA; color: #3D1420; }
.toc-cell--assets { background: #EEEDFE; color: #3C3489; }
.toc-cell--activities { background: #F0EEF9; color: #3C3489; }
.toc-cell--outputs { background: #E4F0F0; color: #2E7379; }
.toc-cell--outcomes { padding: 0; background: transparent; display: flex; flex-direction: column; gap: var(--space-2); }
.toc-cell ul { margin: 0; padding-left: 15px; }
.toc-cell li { margin-bottom: 4px; }
.toc-cell li:last-child { margin-bottom: 0; }
.toc-cell b { font-weight: var(--font-weight-bold); }
.toc-but { font-style: italic; }

.toc-outcome-box { background: #EEEDFE; color: #3C3489; border-radius: var(--radius-md); padding: 13px var(--space-4); font-size: 0.8125rem; line-height: 1.5; flex: 1; }
.toc-outcome-box--final { background: var(--purple); color: var(--white); font-weight: var(--font-weight-bold); font-size: 0.875rem; display: flex; align-items: center; }

.toc-mobile { display: none; }
.toc-mobile-final { margin-bottom: var(--space-6); }
.toc-mobile-section { margin-bottom: var(--space-6); }
.toc-mobile-section__title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--purple);
  margin: 0 0 var(--space-3);
}
.toc-mobile-card { margin-bottom: var(--space-3); }
.toc-mobile-card__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--colour-text-muted);
  margin-bottom: var(--space-2);
}
.toc-mobile-card .toc-cell--outcomes { padding: 0; gap: var(--space-2); }

@media (max-width: 1024px) {
  .toc-matrix-wrap { display: none; }
  .toc-mobile { display: block; }
}

/* ── Org chart (Life at The Difference) ──────────────────────────── */

.oc-page { padding: var(--space-6) var(--space-8) var(--space-16); text-align: left; }

.oc-toolbar { display: flex; gap: var(--space-3); align-items: center; justify-content: flex-end; margin-bottom: var(--space-6); }
.oc-search { width: 240px; }
.oc-live-pill {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--teal-deep, #2E7379);
  background: rgba(88,166,172,.12); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
  white-space: nowrap;
}
.oc-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }

.oc-legend { display: flex; gap: var(--space-5); align-items: center; margin-bottom: var(--space-5); font-size: var(--font-size-xs); color: var(--colour-text-muted); flex-wrap: wrap; }
.oc-legend-item { display: inline-flex; align-items: center; gap: var(--space-2); }
.oc-legend-dash { width: 26px; height: 0; border-top: 3px dashed #2E7379; display: inline-block; }

.oc-empty { color: var(--colour-text-muted); font-size: var(--font-size-sm); padding: var(--space-6) 0; }

/* Shared card (Clusters top) */
.oc-card {
  background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-md);
  width: 150px; padding: var(--space-3) var(--space-3) var(--space-4); text-align: left; position: relative;
  box-shadow: var(--shadow-sm);
}
.oc-card--top { border-color: var(--purple); border-width: 1.5px; }
.oc-card.oc-match { border-color: var(--dark-red); box-shadow: 0 0 0 3px rgba(80,26,40,.1); }
.oc-card .oc-avatar {
  width: 34px; height: 34px; border-radius: 50%; background: var(--purple-tint, #EDEAF7);
  display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm); color: var(--purple); margin-bottom: var(--space-2);
}
.oc-card .oc-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--black); line-height: 1.25; }
.oc-card .oc-jobtitle { font-size: var(--font-size-xs); color: var(--colour-text-muted); margin-top: 2px; line-height: 1.3; }

/* Clusters view */
.oc-cluster-top { display: flex; justify-content: center; margin-bottom: var(--space-8); }
/* grid-template-columns is set inline (per render, one column per directorate) so
   a hub and its panel always share the same column — see _ocClustersHtml. */
.oc-cluster-grid { display: grid; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-3); }
.oc-hub {
  width: 190px; border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-3);
  cursor: pointer; color: var(--white); text-align: center; transition: opacity .15s; border: none;
  justify-self: center; /* centres the hub within its grid column, above its panel below */
}
.oc-hub:hover, .oc-hub--active { opacity: .92; }
.oc-hub-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.oc-hub-count { font-size: var(--font-size-xs); opacity: .85; margin-top: var(--space-1); }

#oc-cluster-panels {
  display: grid; justify-content: center; gap: var(--space-4);
}
.oc-cluster-detail {
  background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-md);
  padding: var(--space-5); margin: 0; width: 100%; min-width: 0; display: none;
}
.oc-cluster-detail.open { display: block; }

@media (max-width: 900px) {
  /* Below desktop widths, stack hubs/panels in a single column instead of
     the side-by-side layout — overrides the inline per-render column count
     and each item's explicit column assignment. */
  .oc-cluster-grid, #oc-cluster-panels { grid-template-columns: 1fr !important; }
  .oc-hub, .oc-cluster-detail { grid-column: 1 !important; }
}
.oc-detail-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); }
.oc-detail-head h3 { margin: 0; font-size: var(--font-size-md); color: var(--purple); }
.oc-close-btn {
  font-size: var(--font-size-xs); color: var(--colour-text-muted); cursor: pointer; background: none;
  border: 1px solid var(--colour-border); border-radius: var(--radius-sm); padding: var(--space-1) var(--space-3);
}
.oc-cluster-rows { display: flex; flex-direction: column; gap: var(--space-3); }
.oc-cluster-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--colour-surface); }
.oc-cluster-row.oc-match { outline: 2px solid var(--dark-red); outline-offset: 2px; }
.oc-row-avatar {
  width: 28px; height: 28px; border-radius: 50%; background: var(--purple-tint, #EDEAF7); color: var(--purple);
  font-weight: var(--font-weight-bold); font-size: var(--font-size-xs); display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.oc-row-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.oc-row-sub { font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.oc-dotted-tag { color: #2E7379; font-weight: var(--font-weight-medium); }

/* ── Digest: calendar-linked entries (read-only, edited on the Calendar page) ─── */
.digest-calendar-linked {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px dashed var(--colour-border);
}
.digest-calendar-linked__label {
  font-size: var(--font-size-xs);
  color: var(--colour-text-muted);
  margin: 0 0 var(--space-2);
}
.digest-calendar-linked__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-1) 0;
  font-size: var(--font-size-sm);
}
.digest-calendar-linked__title { color: var(--colour-text); }

/* ── Calendar (Life at The Difference) ────────────────────────────── */
.cal-page { padding: var(--space-6) var(--space-8) var(--space-16); text-align: left; }

.cal-toggles {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.cal-toggle-chip {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--font-size-sm); color: var(--colour-text-muted);
  background: var(--colour-surface); border: 1px solid var(--colour-border);
  border-radius: var(--radius-full); padding: var(--space-1) var(--space-3);
  cursor: pointer; user-select: none; transition: opacity 0.15s;
}
.cal-toggle-chip:not(.is-on) { opacity: 0.45; }
.cal-toggle-chip__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }

.cal-legend {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6);
  margin-bottom: var(--space-6);
}
.cal-legend-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); }
.cal-legend-group__name { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--purple); margin-right: var(--space-1); }
.cal-legend-item { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.cal-legend-item__dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.cal-nav { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.cal-year-label { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--purple); min-width: 56px; text-align: center; }

.cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.cal-month-card {
  background: var(--colour-surface); border: 0.5px solid var(--colour-border);
  border-radius: var(--radius-lg); padding: var(--space-3);
}
.cal-month-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); margin-bottom: var(--space-2); color: var(--colour-text); }
.cal-dow-row {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px;
  font-size: var(--font-size-xs); color: var(--colour-text-muted); text-align: center; margin-bottom: 2px;
}
.cal-days-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cal-daycell { font-size: var(--font-size-xs); text-align: center; padding: 3px 0; color: var(--colour-text-muted); }
.cal-daycell--holiday { background: rgba(120,120,120,0.22); border-radius: 5px; }
.cal-daynum-event {
  font-size: var(--font-size-xs); text-align: center; padding: 3px 0;
  border-radius: 50%; font-weight: var(--font-weight-medium); cursor: pointer;
}
.cal-daynum-event:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

/* ── Calendar tabs — segmented, purple fill on the active tab ────── */
.cal-tabs {
  display: inline-flex; flex-wrap: wrap; background: var(--colour-surface-alt, #EEECF5);
  border-radius: var(--radius-full); padding: 4px; gap: 2px; margin-bottom: var(--space-4);
}
.cal-tab {
  font-family: inherit; border: none; background: transparent;
  padding: var(--space-2) var(--space-5); border-radius: var(--radius-full);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
  color: var(--colour-text-muted); cursor: pointer; white-space: nowrap;
}
.cal-tab.is-active { background: var(--purple); color: #fff; font-weight: var(--font-weight-bold); }

/* ── Legend disclosure — closed by default, swaps content with the tab ─ */
.cal-legend-disclosure { margin-bottom: var(--space-5); }
.cal-legend-disclosure summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--purple);
}
.cal-legend-disclosure summary::before { content: "\25B8"; font-size: 0.7em; }
.cal-legend-disclosure[open] summary::before { content: "\25BE"; }
.cal-legend-disclosure .cal-legend { margin-top: var(--space-3); margin-bottom: 0; }

@media (max-width: 640px) {
  .cal-tabs { display: flex; width: 100%; }
  .cal-tab { flex: 1; text-align: center; padding: var(--space-2) var(--space-2); }
}

/* ── Management page ──────────────────────────────────────────── */
.cal-mgmt-back { display: inline-block; font-size: var(--font-size-sm); color: var(--purple); margin-bottom: var(--space-4); }
/* One line: "Calendar: [select]  Subscribe: [link] Copy" — every piece
   inline (a label beside its control, not stacked above it) and the same
   `form-control--sm` height, rather than the calendar select's own
   `.form-group`-plus-label block reading taller than the rest of the row. */
.cal-mgmt-toolbar {
  display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.cal-mgmt-toolbar__label { font-size: var(--font-size-sm); color: var(--colour-text-muted); flex-shrink: 0; }
.cal-mgmt-select { width: auto; flex-shrink: 0; }
.cal-ical-input { flex: 1; min-width: 320px; }
.cal-modal-tabs { display: flex; gap: var(--space-2); border-bottom: 1px solid var(--colour-border); margin-bottom: var(--space-4); }
.cal-modal-tab {
  background: none; border: none; padding: var(--space-2) var(--space-1);
  font-size: var(--font-size-sm); color: var(--colour-text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.cal-modal-tab.is-active { color: var(--purple); font-weight: var(--font-weight-bold); border-bottom-color: var(--purple); }
.cal-editor-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 6px; }

/* ── School holidays modal ────────────────────────────────────── */
.cal-holidays-row {
  display: grid; grid-template-columns: 1fr 150px 150px 24px;
  gap: var(--space-2); align-items: center; margin-bottom: var(--space-2);
}

/* ── Calendar settings (management page, admin only) ─────────────── */
.cal-settings-disclosure { margin-bottom: var(--space-5); }
.cal-settings-disclosure summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--purple);
}
.cal-settings-disclosure summary::before { content: "\25B8"; font-size: 0.7em; }
.cal-settings-disclosure[open] summary::before { content: "\25BE"; }
.cal-settings-form { margin-top: var(--space-3); max-width: 480px; }
.cal-settings-form .hb-edit-toggle { margin-bottom: var(--space-3); }

/* The holidays modal's delete ×. */
.cal-cat-delete-btn {
  background: none; border: none; color: var(--colour-text-muted); cursor: pointer;
  padding: 4px; display: flex; align-items: center;
}
.cal-cat-delete-btn:hover { color: var(--bright-red); }

/* ── Manage calendar — Events tab (calendar-manage.js) ────────────────
   A list on the left, an always-visible edit panel on the right. No
   dividers: items are separated by spacing and soft tints only. */
.cal-mg [hidden] { display: none !important; }
.cal-mg-bar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-3); }
.cal-mg-search { width: 240px; flex-shrink: 0; }
.cal-mg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); flex: 1; min-width: 0; }
.cal-mg-count { margin-left: auto; font-size: var(--font-size-sm); color: var(--colour-text-muted); white-space: nowrap; }
.cal-mg-chip {
  display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
  font: inherit; font-size: var(--font-size-sm); color: var(--colour-text);
  background: var(--white); border-radius: var(--radius-full); padding: 5px 12px;
}
.cal-mg-chip:hover { background: rgba(66,42,126,.10); }
.cal-mg-chip.is-on { background: var(--purple); color: #fff; }
.cal-mg-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.cal-mg-textbtn {
  border: none; background: none; cursor: pointer; font: inherit; font-size: var(--font-size-xs);
  color: var(--purple); padding: 4px 6px; border-radius: var(--radius-sm);
}
.cal-mg-textbtn:hover { background: rgba(66,42,126,.08); }
.cal-mg-seg { display: inline-flex; background: var(--white); border-radius: var(--radius-full); padding: 3px; }
.cal-mg-seg__btn {
  border: none; background: none; cursor: pointer; font: inherit; font-size: var(--font-size-sm);
  color: var(--colour-text-muted); padding: 5px 14px; border-radius: var(--radius-full);
}
.cal-mg-seg__btn.is-on { background: var(--purple); color: #fff; }
.cal-mg-check { display: inline-flex; align-items: center; gap: 6px; font-size: var(--font-size-sm); color: var(--colour-text); cursor: pointer; }
.cal-mg-add { margin-left: auto; }

.cal-mg-layout { display: grid; grid-template-columns: minmax(0, 1fr) 390px; gap: var(--space-6); align-items: start; margin-top: var(--space-4); }
.cal-mg-list { max-height: calc(100vh - 260px); min-height: 200px; overflow-y: auto; padding-right: var(--space-2); }
.cal-mg-panel {
  position: sticky; top: var(--space-4); background: var(--white); box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg); padding: var(--space-5); max-height: calc(100vh - 120px); overflow-y: auto;
}
.cal-mg-empty { color: var(--colour-text-muted); font-size: var(--font-size-sm); padding: var(--space-4) 0; }
.cal-mg-empty-panel h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-md); color: var(--purple); }
.cal-mg-empty-panel p { margin: 0; font-size: var(--font-size-sm); color: var(--colour-text-muted); }

/* By cohort or activity */
.cal-mg-sec { margin-bottom: var(--space-6); }
.cal-mg-sec__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.cal-mg-sec__name { margin: 0; font-size: var(--font-size-md); color: var(--colour-text); }
.cal-mg-sec__name--muted { color: var(--colour-text-muted); font-size: var(--font-size-sm); }
.cal-mg-sec__count { font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.cal-mg-sec__acts { margin-left: auto; display: inline-flex; align-items: center; gap: var(--space-2); }
.cal-mg-swatch { width: 16px; height: 16px; border-radius: var(--radius-sm); flex-shrink: 0; display: inline-block; }
.cal-mg-swatch--sm { width: 12px; height: 12px; }
.cal-mg-co { padding: var(--space-3); border-radius: var(--radius-md); margin-bottom: var(--space-1); }
.cal-mg-co.is-selected { background: rgba(66,42,126,.07); }
.cal-mg-co__top { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-2); }
.cal-mg-co__name {
  border: none; background: none; cursor: pointer; font: inherit; font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold); color: var(--colour-text); padding: 2px 4px; border-radius: var(--radius-sm); text-align: left;
}
.cal-mg-co__name:hover { background: rgba(66,42,126,.08); color: var(--purple); }
.cal-mg-co__n { font-size: var(--font-size-xs); color: var(--colour-text-muted); margin-left: auto; }
.cal-mg-leads { display: inline-flex; gap: 3px; flex-wrap: wrap; }
.cal-mg-leads .initials-badge, .cal-mg-row__meta .initials-badge, .cal-mg-pills .initials-badge { width: 20px; height: 20px; font-size: 0.5625rem; }
.cal-mg-leadtext { font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.cal-mg-chiprow { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cal-mg-sess {
  display: inline-flex; align-items: baseline; gap: 6px; border: none; cursor: pointer; font: inherit;
  font-size: var(--font-size-xs); color: var(--colour-text); background: var(--white);
  border-radius: var(--radius-full); padding: 5px 12px;
}
.cal-mg-sess:hover { background: rgba(66,42,126,.12); }
.cal-mg-sess.is-past { opacity: .55; }
.cal-mg-sess.is-selected, .cal-mg-sess.is-selected:hover { background: var(--purple); color: #fff; opacity: 1; }
.cal-mg-sess__lbl { font-size: 0.6875rem; color: var(--colour-text-muted); }
.cal-mg-sess__title { font-weight: var(--font-weight-medium); }
.cal-mg-sess__lead { font-size: 0.6875rem; color: var(--teal-text); }
.cal-mg-sess.is-selected .cal-mg-sess__lbl, .cal-mg-sess.is-selected .cal-mg-sess__lead { color: rgba(255,255,255,.85); }
.cal-mg-sess--add { background: none; color: var(--purple); outline: 1px dashed rgba(66,42,126,.45); outline-offset: -1px; }
.cal-mg-sess--add:hover { background: rgba(66,42,126,.08); }
.cal-mg-sesslist { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.cal-mg-sesslist .cal-mg-sess { background: var(--colour-surface); }
.cal-mg-sesslist .cal-mg-sess:hover { background: rgba(66,42,126,.12); }

/* By date */
.cal-mg-month { margin-bottom: var(--space-4); }
.cal-mg-month__head {
  position: sticky; top: 0; z-index: 2; margin: 0 0 var(--space-2); padding: var(--space-2) var(--space-1);
  background: var(--colour-surface); font-size: var(--font-size-sm); color: var(--purple);
  display: flex; align-items: baseline; gap: var(--space-2);
}
.cal-mg-month__head small { color: var(--colour-text-muted); font-weight: var(--font-weight-regular); }
.cal-mg-row {
  display: flex; align-items: center; gap: var(--space-4); width: 100%; text-align: left; cursor: pointer;
  border: none; font: inherit; color: var(--colour-text); background: none;
  padding: var(--space-3); border-radius: var(--radius-md); border-left: 3px solid transparent; margin-bottom: 2px;
}
.cal-mg-row:hover { background: var(--white); }
.cal-mg-row.is-past { opacity: .55; }
.cal-mg-row.is-selected { background: rgba(66,42,126,.07); border-left-color: var(--purple); opacity: 1; }
.cal-mg-row__date { display: flex; flex-direction: column; align-items: center; min-width: 40px; line-height: 1.1; }
.cal-mg-row__date b { font-size: var(--font-size-lg); color: var(--purple); }
.cal-mg-row__date small { font-size: 0.6875rem; text-transform: uppercase; color: var(--colour-text-muted); }
.cal-mg-row__main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.cal-mg-row__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.cal-mg-row__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.cal-mg-row__chips { display: flex; gap: var(--space-2); flex-shrink: 0; }
.cal-mg-pill-chip {
  font-size: 0.6875rem; padding: 3px 10px; border-radius: var(--radius-full);
  background: var(--purple); color: #fff; white-space: nowrap;
}
.cal-mg-pill-chip--plain { background: var(--white); color: var(--colour-text-muted); }
.cal-mg-override { font-size: var(--font-size-xs); color: var(--colour-text); }
.cal-mg-tag { font-size: 0.625rem; padding: 1px 7px; border-radius: var(--radius-full); background: rgba(88,166,172,.2); color: #2E7379; }

/* Edit panel */
.cal-mg-panel__head { margin-bottom: var(--space-4); }
.cal-mg-panel__head h3 { margin: 0; font-size: var(--font-size-md); color: var(--purple); }
.cal-mg-sub { margin: 2px 0 0; font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.cal-mg-panel .form-group { margin-bottom: var(--space-4); }
.cal-mg-help { margin: var(--space-2) 0 0; font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.cal-mg-hint { min-height: 1.2em; margin: 0 0 var(--space-2); font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.cal-mg-lead-other { margin-top: var(--space-2); }
.cal-mg-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.cal-mg-delete {
  margin-left: auto; border: none; background: none; cursor: pointer; font: inherit; font-size: var(--font-size-sm);
  color: var(--bright-red); padding: 6px 10px; border-radius: var(--radius-sm); text-align: right;
}
.cal-mg-delete:hover { background: rgba(235,86,99,.1); }
.cal-mg-delete.is-armed { background: var(--bright-red); color: #fff; }
.cal-mg-link { border: none; background: none; cursor: pointer; font: inherit; font-size: var(--font-size-xs); color: var(--purple); text-decoration: underline; padding: 0; }
.cal-mg-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.cal-mg-sw {
  aspect-ratio: 1; border: none; border-radius: var(--radius-md); cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-mg-sw:hover { transform: scale(1.08); }
.cal-mg-sw:focus-visible, .cal-mg-lp:focus-visible, .cal-mg-pk__day:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.cal-mg-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cal-mg-lp { border: none; background: var(--colour-surface); border-radius: var(--radius-full); padding: 3px; cursor: pointer; opacity: .55; }
.cal-mg-lp .initials-badge { background: var(--grey); }
.cal-mg-lp.is-on { opacity: 1; background: rgba(66,42,126,.15); }
.cal-mg-lp.is-on .initials-badge { background: var(--purple); }

/* Date range picker */
.cal-mg-pk { background: var(--colour-surface); border-radius: var(--radius-md); padding: var(--space-3); }
.cal-mg-pk__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.cal-mg-pk__field {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; cursor: pointer;
  font: inherit; border: 1px solid var(--colour-border); background: var(--white); border-radius: var(--radius-md); padding: 8px 10px;
}
.cal-mg-pk__field.is-active { outline: 2px solid var(--purple); outline-offset: -1px; border-color: var(--purple); }
.cal-mg-pk__label { font-size: 0.6875rem; color: var(--colour-text-muted); }
.cal-mg-pk__val { font-size: var(--font-size-sm); color: var(--colour-text); }
.cal-mg-pk__val.is-empty { color: var(--colour-text-muted); }
.cal-mg-pk__summary { margin: var(--space-2) 0; font-size: var(--font-size-xs); color: var(--purple); font-weight: var(--font-weight-medium); }
.cal-mg-pk__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.cal-mg-pk__month { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); }
.cal-mg-pk__navbtn { border: none; background: var(--white); border-radius: 50%; width: 28px; height: 28px; cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--purple); }
.cal-mg-pk__navbtn:hover { background: rgba(66,42,126,.12); }
.cal-mg-pk__dow, .cal-mg-pk__grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-mg-pk__dow span { text-align: center; font-size: 0.6875rem; color: var(--colour-text-muted); padding: 2px 0; }
.cal-mg-pk__grid { row-gap: 2px; }
.cal-mg-pk__day {
  position: relative; border: none; background: none; cursor: pointer; font: inherit; font-size: var(--font-size-xs);
  height: 32px; padding: 0; color: var(--colour-text); display: flex; align-items: center; justify-content: center;
}
.cal-mg-pk__day span { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cal-mg-pk__day:hover span { background: rgba(66,42,126,.12); }
.cal-mg-pk__day.is-today span { font-weight: var(--font-weight-bold); color: var(--teal-text); }
.cal-mg-pk__day.is-in::before, .cal-mg-pk__day.is-start::before, .cal-mg-pk__day.is-end::before {
  content: ""; position: absolute; top: 1px; bottom: 1px; background: rgba(66,42,126,.14);
}
.cal-mg-pk__day.is-in::before { left: 0; right: 0; }
.cal-mg-pk__day.is-start::before { left: 50%; right: 0; }
.cal-mg-pk__day.is-end::before { left: 0; right: 50%; }
.cal-mg-pk__day.is-in.c0::before { left: 2px; border-radius: 16px 0 0 16px; }
.cal-mg-pk__day.is-in.c6::before { right: 2px; border-radius: 0 16px 16px 0; }
.cal-mg-pk__day.is-start span, .cal-mg-pk__day.is-end span, .cal-mg-pk__day.is-single span { background: var(--purple); color: #fff; }
.cal-mg-pk__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-2); min-height: 20px; }
.cal-mg-pk__hint { font-size: var(--font-size-xs); color: var(--colour-text-muted); }

@media (max-width: 1000px) {
  .cal-mg-layout { grid-template-columns: minmax(0, 1fr); }
  .cal-mg-panel { position: static; max-height: none; }
  .cal-mg-list { max-height: 70vh; }
  .cal-mg-search { width: 100%; }
}

/* ── Recruitment (Phase 1) ────────────────────────────────────
   Deliberately no "Corner" motif (card--no-corner throughout) — opted out
   for this module, same as Trainings. Non-RAG status colours only. */
.badge--maroon { background: rgba(80,26,40,.10); color: var(--dark-red); }

.breadcrumb { font-size: var(--font-size-sm); color: var(--colour-text-muted); margin-bottom: var(--space-2); }
.breadcrumb a { color: var(--colour-text-muted); }
.breadcrumb b { color: var(--purple); }

/* Unified stat bar (Option B redesign) — replaces the three flat
   .stat-card boxes above for this page only; other pages keep .stat-row.
   Neutral surface rather than solid purple (2026-09-10) — sitting directly
   under the already-solid-purple .hb-hero-banner, a second full-width
   purple block read as too much of one colour; purple now carries the
   values only, same restrained role it plays in .stat-card. */
.rec-stat-bar {
  display: flex; background: var(--colour-surface); border: 1px solid var(--colour-border);
  border-radius: var(--radius-lg); margin-bottom: var(--space-8); overflow: hidden;
}
.rec-stat-bar__segment {
  flex: 1; padding: var(--space-5) var(--space-6); text-align: center;
  border-left: 1px solid var(--colour-border);
}
.rec-stat-bar__segment:first-child { border-left: none; }
.rec-stat-bar__value { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); color: var(--purple); }
.rec-stat-bar__label {
  font-size: var(--font-size-xs); color: var(--colour-text-muted); font-weight: var(--font-weight-medium);
  text-transform: uppercase; letter-spacing: .04em; margin-top: var(--space-1);
}

.rec-posting-list { display: flex; flex-direction: column; gap: var(--space-4); }
.rec-posting-card {
  background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); position: relative;
}
.rec-posting-top { padding-right: var(--space-6); }
.rec-posting-status { position: absolute; top: var(--space-5); right: var(--space-6); }
.rec-posting-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); color: var(--purple); }
.rec-posting-meta-grid {
  font-size: var(--font-size-sm); color: var(--colour-text-muted); margin-top: var(--space-2);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-4);
}
.rec-posting-meta-col { display: flex; flex-direction: column; gap: var(--space-1); }
.rec-posting-foot {
  display: flex; justify-content: space-between; align-items: center; margin-top: var(--space-4);
  padding-top: var(--space-3); border-top: 1px solid var(--colour-border); font-size: var(--font-size-sm); color: var(--colour-text-muted);
}

.rec-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-6); }
/* Was --font-size-xs label / unset-size(=1rem)+medium-weight value — with
   no font-size of its own, .v inherited whatever ran the modal/page (often
   larger than the .k caption above it), so the value routinely read bigger
   and heavier than its own label across every reuse of this pattern (Key
   facts, Applications detail, Sift/round-question answers, etc.) — the
   same backwards heading/body relationship already fixed once for
   .rubric-band below. .k now sizes up to read as the heading it is; .v
   gets an explicit, smaller, non-bold size so long answer text doesn't
   out-shout its own caption. */
.rec-field .k { color: var(--colour-text-muted); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: .3px; font-weight: var(--font-weight-bold); margin-bottom: 2px; }
.rec-field .v { color: var(--colour-text); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); }

/* Sift/interview scoring rubric (CV screen's .rec-field .k/.v is a small-
   caption-over-normal-body pattern built for short metadata — reusing it
   for a rubric heading + paragraph-length descriptor made the heading look
   smaller than its own body text and the descriptor read as bold, both
   backwards for a heading/body relationship, and wasted vertical space. */
.rubric-band { margin-bottom: var(--space-3); }
.rubric-band__label { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--colour-text); margin-bottom: 2px; }
.rubric-band__descriptor { font-weight: var(--font-weight-regular); font-size: var(--font-size-xs); color: var(--colour-text-muted); line-height: 1.4; }

/* Role page header's status dropdown — replaces the old Status card, see
   docs/recruitment.md's "Status lifecycle" section. */
.rec-status-menu { position: relative; }
.rec-status-menu__toggle { display: flex; align-items: center; gap: 4px; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: var(--colour-text-muted); }
.rec-status-menu__toggle svg { transition: transform .15s; }
.rec-status-menu.open .rec-status-menu__toggle svg { transform: rotate(180deg); }
.rec-status-menu__panel {
  display: none; position: absolute; top: calc(100% + 6px); right: 0;
  background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); z-index: 50; min-width: 170px; padding: 6px;
}
.rec-status-menu.open .rec-status-menu__panel { display: block; }
.rec-status-menu__label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); color: var(--colour-text-muted); text-transform: uppercase; letter-spacing: .3px; padding: 6px 8px 4px; }
.rec-status-menu__opt { display: block; width: 100%; text-align: left; padding: 7px 8px; font-size: var(--font-size-sm); font-family: inherit; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; color: var(--colour-text); }
.rec-status-menu__opt:hover { background: var(--colour-surface); }
.rec-status-menu__opt.sel { font-weight: var(--font-weight-bold); color: var(--purple); }

/* Role page (/recruitment/:id) — status/stats ribbon + single-row combined
   nav (group pills + active group's sub-tabs). Deliberately scoped classes:
   .profile-tab/.profile-tabs/.profile-panel are shared with admin-user.js,
   leave.js and profile.js's own tab bars, and .rec-toggle-row/.rec-toggle-opt
   are reused elsewhere on this same page for unrelated pill-toggle rows
   (application-form type, comms round, interview round/task-mode, equality
   stage) — none of those may be restyled by this change. */
.recm-ribbon { display: flex; align-items: center; gap: var(--space-5); background: var(--teal); border-radius: var(--radius-md); padding: var(--space-3) var(--space-5); margin-bottom: var(--space-4); flex-wrap: wrap; }
.recm-ribbon__item { display: flex; align-items: center; gap: var(--space-2); color: #fff; font-size: var(--font-size-sm); }
.recm-ribbon__item svg { flex-shrink: 0; opacity: .85; }
.recm-ribbon__div { width: 1px; align-self: stretch; background: rgba(255,255,255,.22); }
.recm-ribbon .rec-status-menu__toggle { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--radius-full); background: rgba(255,255,255,.18); color: #fff; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); letter-spacing: .3px; text-transform: uppercase; }
.recm-ribbon .rec-status-menu__toggle svg { stroke: #fff; }
/* Ribbon's status pill sits at the far left of the row, unlike its old
   header-actions spot at the far right — .rec-status-menu__panel's default
   `right: 0` anchored the panel to the toggle's right edge, which put a
   170px-wide panel almost entirely to the left of the toggle and under the
   240px sidebar. Anchor from the left instead so it opens into the ribbon. */
.recm-ribbon .rec-status-menu__panel { left: 0; right: auto; }

.recm-nav-row { display: flex; align-items: center; gap: var(--space-4); background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap; }
.recm-nav-pills { display: flex; gap: 4px; background: var(--colour-surface); border-radius: var(--radius-full); padding: 4px; }
.recm-nav-pill { background: none; border: none; padding: 7px 16px; border-radius: var(--radius-full); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--colour-text-muted); cursor: pointer; font-family: var(--font-family); }
.recm-nav-pill.sel { background: var(--purple); color: #fff; }
.recm-nav-divider { width: 1px; height: 22px; background: var(--colour-border); }
.recm-nav-subtabs { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.recm-nav-subtab { background: none; border: none; padding: 0; font-size: var(--font-size-sm); color: var(--colour-text-muted); cursor: pointer; font-family: var(--font-family); }
.recm-nav-subtab:hover { color: var(--colour-text); }
.recm-nav-subtab--active { color: var(--purple); font-weight: var(--font-weight-bold); }

.recm-tab-panel { background: var(--colour-bg); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); padding: 1.5rem; }

.jd-block { background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); margin-bottom: var(--space-4); }
.jd-block-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); flex-wrap: wrap; }
.jd-block-head h4 { font-size: var(--font-size-sm); color: var(--purple); margin: 0; }
.jd-tag { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); padding: 3px 10px; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .3px; }

.jd-tag--custom { background: rgba(66,42,126,.12); color: var(--purple); }
.jd-body { font-size: var(--font-size-sm); line-height: 1.6; }
.jd-body ul { margin: 6px 0 0; padding-left: 20px; }
.edit-link { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: #3b7c80; cursor: pointer; display: inline-block; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 700px) { .two-col, .rec-field-grid { grid-template-columns: 1fr; } }

.rec-toggle-row { display: flex; gap: var(--space-3); background: var(--colour-surface); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4); }
.rec-toggle-opt {
  border: none; background: transparent; padding: 8px 18px; border-radius: var(--radius-full);
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--colour-text-muted); font-family: inherit; cursor: pointer;
}
.rec-toggle-opt.sel { background: var(--purple); color: #fff; }
/* Task type: every option reads as a button, not just the selected one */
.rec-toggle-row--buttons { background: transparent; padding: 0; flex-wrap: wrap; gap: var(--space-2); }
.rec-toggle-row--buttons .rec-toggle-opt { border: 1.5px solid var(--purple); background: var(--white); color: var(--purple); }
.rec-toggle-row--buttons .rec-toggle-opt:hover { background: rgba(66,42,126,.08); }
.rec-toggle-row--buttons .rec-toggle-opt.sel { background: var(--purple); color: #fff; }

/* Edit round: numbered step cards + pill nav */
.rec-stepnav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.rec-stepnav__pill {
  padding: 6px 14px; border-radius: var(--radius-full); border: 1.5px solid var(--teal); color: var(--purple);
  background: var(--white); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); text-decoration: none;
}
.rec-stepnav__pill:hover { background: rgba(88,166,172,.12); }
.rec-stepnav__pill.active { background: var(--purple); border-color: var(--purple); color: #fff; }
.rec-step {
  border: 1px solid var(--colour-border); border-top: 3px solid var(--purple); border-radius: var(--radius-md);
  background: var(--white); box-shadow: 0 1px 3px rgba(16,16,16,.08);
  padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); scroll-margin-top: 16px;
}
.rec-step__head { display: flex; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.rec-step__num {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; background: var(--purple); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm);
}
.rec-step__title { margin: 0; line-height: 1.2; font-size: 1.05rem; color: var(--purple); }
.rec-sift-q { background: var(--colour-surface); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: var(--space-2); font-size: var(--font-size-sm); }

.team-section { margin-bottom: var(--space-6); }
.team-section-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.team-section-head h4 { font-size: var(--font-size-sm); color: var(--purple); margin: 0; }
.person-row {
  display: flex; align-items: center; gap: var(--space-3); background: var(--colour-surface);
  border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: var(--space-2);
}
.person-row .pname { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); flex: 1; }
.person-row .prole { font-size: var(--font-size-xs); color: var(--colour-text-muted); font-weight: var(--font-weight-regular); }
.add-person {
  border: 1.5px dashed var(--colour-border); border-radius: var(--radius-md); padding: 10px 14px;
  font-size: var(--font-size-sm); color: var(--colour-text-muted); text-align: center;
}

.round-card-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.round-card-actions .btn--ghost { border-color: var(--colour-border); }
.round-card-actions .btn--ghost:hover:not(:disabled) { border-color: var(--purple); }

.rec-channel-row { display: flex; justify-content: space-between; gap: var(--space-3); background: var(--colour-surface); border-radius: var(--radius-md); padding: 10px 14px; margin-bottom: var(--space-2); font-size: var(--font-size-sm); }
.rec-channel-row > div:first-child { flex: 1; min-width: 0; }

/* Posting channel cards (Job description → Posting channels) */
.rec-chan { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 16px 18px; margin-bottom: var(--space-3); }
.rec-chan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.rec-chan__name { font-size: 17px; font-weight: 700; overflow-wrap: anywhere; }
.rec-chan__edit { border: 0; background: none; cursor: pointer; color: var(--purple); font: inherit; font-size: 14px; font-weight: 700; padding: 4px 8px; border-radius: 8px; }
.rec-chan__edit:hover { background: var(--colour-surface); }
.rec-chan__edit:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.rec-chan__row { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
.rec-chan__row + .rec-chan__row { margin-top: 9px; }
.rec-chan__label { font-size: 13px; font-weight: 700; color: var(--grey); }
.rec-chan__label--referral { color: #2E7379; }
.rec-chan__field { width: 100%; min-width: 0; box-sizing: border-box; border: 0; background: var(--colour-surface); border-radius: 10px; padding: 9px 12px; font: 13.5px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: var(--colour-text); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.rec-chan__field:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.rec-chan__empty { grid-column: 2 / -1; color: var(--grey); font-style: italic; font-size: 13.5px; padding: 9px 0; }
.rec-chan__actions { display: flex; align-items: center; gap: var(--space-3); }
.rec-chan__open { color: var(--purple); font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; }
.rec-chan__open:hover { text-decoration: underline; }
.rec-chan__copy { display: inline-flex; align-items: center; gap: 6px; border: 0; cursor: pointer; background: var(--white); color: var(--purple); font: inherit; font-size: 14px; font-weight: 700; padding: 8px 14px; border-radius: 10px; box-shadow: var(--shadow-sm); }
.rec-chan__copy--primary { background: var(--purple); color: var(--white); }
.rec-chan__copy:hover { box-shadow: var(--shadow-md); }
.rec-chan__copy:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.rec-chan__copy.rec-chan__copy--done { background: #2E7379; color: var(--white); }
@media (max-width: 900px) {
  .rec-chan__row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .rec-chan__row + .rec-chan__row { margin-top: var(--space-4); }
  .rec-chan__empty { grid-column: 1; padding: 0; }
  .rec-chan__actions { justify-content: space-between; }
  .rec-chan__copy { flex: 1; justify-content: center; }
  .rec-chan__open { padding: 8px 4px; }
}

/* Timeline subtab — reuses .cal-month-card/.cal-dow-row/.cal-days-grid/
   .cal-daycell/.cal-daynum-event/.cal-legend* from the Handbook Calendar
   page (same grid geometry, same [data-tooltip] hover), just with its own
   milestone-type shading instead of per-calendar colour mixing. */
.recm-tl-daycell--sifting { background: rgba(66,42,126,.10); border-radius: 5px; }
.recm-tl-daycell--win-cv { background: rgba(88,166,172,.28); border-radius: 5px; }
.recm-tl-daycell--win-sift { background: rgba(66,42,126,.18); border-radius: 5px; }
.recm-tl-daycell--win-round { background: rgba(239,128,50,.25); border-radius: 5px; }

.section-note, .note { font-size: var(--font-size-xs); color: var(--colour-text-muted); font-style: italic; margin: 0; }

/* Applicant detail modal redesign (Overview/Application/Communications/
   Compliance & data tabs, 2026-09-10) — class names match the static
   reference mockup (recruitmentscoping/14-applicant-detail-page-mockup.html)
   but values are pulled from this app's own tokens rather than the mockup's
   hardcoded hex, so the modal stays in sync with the rest of the design
   system automatically. See docs/recruitment.md. */
.ap-section-title { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--purple); text-transform: uppercase; letter-spacing: .3px; margin: 0 0 var(--space-3); }
.ap-card { border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); background: var(--white); }
.ap-card--surface { background: var(--colour-surface); border-color: transparent; }
.ap-card--hold { background: rgba(235,86,99,.08); border-color: rgba(235,86,99,.3); }

.ap-stage { display: flex; align-items: stretch; margin-bottom: var(--space-2); }
.ap-stage__step { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); flex: 1; position: relative; }
.ap-stage__line { position: absolute; top: 15px; left: -50%; width: 100%; height: 3px; z-index: 0; background: var(--off-white); }
.ap-stage__step--done .ap-stage__line, .ap-stage__step--current .ap-stage__line, .ap-stage__step--terminal .ap-stage__line { background: var(--purple); }
.ap-stage__circle {
  width: 32px; height: 32px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); position: relative; z-index: 1;
  background: var(--off-white); color: var(--colour-text-muted);
}
.ap-stage__step--done .ap-stage__circle, .ap-stage__step--current .ap-stage__circle, .ap-stage__step--terminal .ap-stage__circle { background: var(--purple); color: var(--white); }
.ap-stage__step--terminal .ap-stage__circle { background: var(--bright-red); }
.ap-stage__label { font-size: var(--font-size-xs); text-align: center; max-width: 100px; color: var(--colour-text-muted); }
.ap-stage__step--done .ap-stage__label, .ap-stage__step--current .ap-stage__label { color: var(--purple); font-weight: var(--font-weight-bold); }
.ap-stage__step--terminal .ap-stage__label { color: var(--dark-red); font-weight: var(--font-weight-bold); }

.ap-stat-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.ap-stat { flex: 1 1 160px; border: 1px solid var(--colour-border); border-radius: var(--radius-md); padding: 10px 14px; background: var(--colour-surface); }
.ap-stat__label { font-size: var(--font-size-xs); color: var(--colour-text-muted); text-transform: uppercase; font-weight: var(--font-weight-bold); letter-spacing: .3px; margin-bottom: 4px; }
.ap-stat__value { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--colour-text); }
.ap-stat__value--ok { color: var(--rag-green); }

.ap-qa { margin-bottom: var(--space-3); }
.ap-qa .q { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); margin-bottom: 4px; }
.ap-qa .a { font-size: var(--font-size-sm); white-space: pre-wrap; }

 .ap-hold-reasons { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-3); }
.ap-template-pill {
  border: 1.5px solid var(--colour-border); background: var(--white); color: var(--colour-text-muted);
  font-family: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-regular);
  padding: 6px 14px; border-radius: var(--radius-full); cursor: pointer;
}
.ap-template-pill:hover { border-color: var(--purple); color: var(--purple); }
.ap-template-pill--active { background: var(--purple); border-color: var(--purple); color: var(--white); }

/* Comms tab (Send / Templates / History, 2026-09-10) — see
   docs/recruitment.md. Reuses .hb-callout/.admin-table/.badge/.form-control/
   .ap-card/.ap-section-title throughout; only these two are genuinely new. */
/* .hb-callout is a flex row (icon + text) by default; this usage has no
   icon and needs its heading and pill-line stacked, not laid out side by
   side as flex siblings. */
.recm-na-callout { flex-direction: column; align-items: stretch; margin-bottom: var(--space-4); }
.recm-na-lines { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }
.recm-na-line {
  border: none; background: rgba(66,42,126,.10); color: var(--purple); font-family: inherit;
  font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); padding: 6px 14px;
  border-radius: var(--radius-full); cursor: pointer;
}
.recm-na-line:hover { background: var(--purple); color: var(--white); }

/* History tab rows — clickable through to the read-only "view this email"
   modal (2026-09-15); .admin-table's global tr:hover already tints the
   row, this just adds the affordance. */
.recm-hist-row { cursor: pointer; }

/* Template dropdown + System/Custom badge + one-line subject preview */
.tmpl-pick-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }

/* Sticky bottom bar, scoped to the page column (not viewport-wide like
   #hb-sticky-bar) — Send is deliberately not full-width even on narrow
   screens (align-items: flex-start, not stretch, in the column layout). */
.sendbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4); margin-top: var(--space-4);
  box-shadow: 0 -2px 12px rgba(0,0,0,.06);
}
.sendbar__count { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: #26215C; }
.sendbar__meta { font-size: var(--font-size-xs); color: var(--colour-text-muted); }
@media (max-width: 540px) {
  .sendbar { flex-direction: column; align-items: flex-start; }
  .sendbar .btn { align-self: flex-start; }
}

/* Recruitment — Equality tab ("pick a question" layout, 2026-10-08;
   recruitment-manage.js's _recmEq* functions). Own copy of the bar styles —
   the ops-dashboard mini-app has its own stylesheet and is unchanged. */
.eq-hatch { background: repeating-linear-gradient(45deg, #F8F8F8, #F8F8F8 4px, #ECECEC 4px, #ECECEC 8px); }
.eq-status { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; font-size: 13px; color: var(--grey); }
.eq-live-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: #2E7379; background: rgba(88,166,172,.12); padding: 4px 10px; border-radius: 999px; }
.eq-live-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); display: inline-block; }
.eq-status__funnel { color: var(--black); }
.eq-split { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 20px; align-items: start; }
.eq-questions { display: flex; flex-direction: column; gap: 6px; }
.eq-questions__title { font-size: 15px; font-weight: 700; margin: 0; }
.eq-questions__note { font-size: 12px; color: var(--grey); margin: 0 0 6px; }
.eq-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; font: inherit; font-size: 13px; color: var(--black); background: #F3F0FA; border: 2px solid transparent; border-radius: 8px; padding: 10px 12px; cursor: pointer; }
.eq-q:hover { background: #EAE5F6; }
.eq-q:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.eq-q--selected, .eq-q--selected:hover { background: #fff; border-color: var(--purple); }
.eq-q__label { flex: 1; min-width: 0; }
.eq-q__squares { display: flex; gap: 4px; flex-shrink: 0; }
.eq-sq { width: 14px; height: 14px; border-radius: 3px; box-sizing: border-box; display: inline-block; }
.eq-sq--shown { background: #422A7E; }
.eq-sq--withheld { box-shadow: inset 0 0 0 1px #CFCFCF; }
.eq-sq--empty { background: #fff; border: 1.5px solid #CFCFCF; }
.eq-detail { padding: 20px; }
.eq-detail__title { font-size: 17px; font-weight: 700; margin: 0 0 14px; }
.eq-detail__subtitle { font-size: 14px; font-weight: 700; margin: 22px 0 8px; }
.eq-notice { font-size: 13px; color: var(--grey); margin: 0; }
.eq-footnote { font-size: 12px; color: var(--grey); margin: 18px 0 0; }
.eq-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 16px; }
.eq-legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--grey); }
.eq-legend-swatch { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; display: inline-block; box-shadow: inset 0 0 0 1px rgba(31,20,66,.15); }
.eq-legend-swatch--suppressed { background: repeating-linear-gradient(45deg, #F8F8F8, #F8F8F8 3px, #DADADA 3px, #DADADA 6px); box-shadow: inset 0 0 0 1px #CFCFCF; }
.eq-bar-row { display: flex; align-items: center; gap: 14px; margin-bottom: 10px; }
.eq-bar-row__label { width: 120px; flex-shrink: 0; display: flex; flex-direction: column; gap: 2px; }
.eq-bar-row__name { font-size: 13px; font-weight: 600; color: var(--black); }
.eq-bar-row__sub { font-size: 11.5px; font-weight: 400; color: var(--grey); }
.eq-bar { flex: 1; display: flex; gap: 2px; height: 40px; border-radius: 8px; overflow: hidden; }
.eq-bar-seg { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; box-sizing: border-box; cursor: default; box-shadow: inset 0 0 0 1px rgba(31,20,66,.12); }
.eq-bar-seg:focus-visible { outline: 2px solid var(--purple); outline-offset: -2px; }
.eq-bar-block { flex: 1; display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 8px; font-size: 13px; color: #262626; }
.eq-table-wrap { overflow-x: auto; }
.eq-table { min-width: 560px; width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 13px; }
.eq-table th, .eq-table td { text-align: left; padding: 6px 14px; font-weight: 400; vertical-align: middle; background: none; border: none; color: var(--black); white-space: normal; }
.eq-table tr:hover td, .eq-table tr:hover th { background: none; }
.eq-table thead th { vertical-align: bottom; padding-bottom: 8px; }
.eq-table thead th .eq-bar-row__name, .eq-table thead th .eq-bar-row__sub { display: block; }
.eq-table tbody th { font-weight: 400; white-space: nowrap; }
.eq-table__label { display: inline-flex; align-items: center; gap: 8px; }
.eq-table td.eq-table__nil { color: var(--grey); }
.eq-table td.eq-table__block, .eq-table tr:hover td.eq-table__block { text-align: center; vertical-align: middle; border-radius: 8px; padding: 12px; color: #262626; font-size: 13px; background: repeating-linear-gradient(45deg, #F8F8F8, #F8F8F8 4px, #ECECEC 4px, #ECECEC 8px); }
.eq-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.eq-completion-pill { display: inline-block; font-size: 12px; font-weight: 600; color: var(--purple); background: #f0edf8; border-radius: 999px; padding: 5px 12px; margin-bottom: 10px; white-space: nowrap; }
.eq-dn-note { font-size: 12px; color: var(--grey); margin: 0 0 12px; }
.eq-dn-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.eq-dn-row__label { width: 320px; flex-shrink: 0; font-size: 12.5px; color: var(--black); }
.eq-dn-bar-track { flex: 1; height: 16px; background: #f4f3f8; border-radius: 4px; overflow: hidden; }
.eq-dn-bar { height: 100%; background: var(--purple); border-radius: 4px; }
.eq-dn-row__value { width: 90px; flex-shrink: 0; text-align: right; font-size: 12px; color: var(--grey); }
@media (max-width: 900px) {
  .eq-split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .eq-bar-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .eq-bar-row__label { width: auto; flex-direction: row; align-items: baseline; gap: 8px; }
  .eq-dn-row { flex-direction: column; align-items: stretch; gap: 4px; }
  .eq-dn-row__label, .eq-dn-row__value { width: auto; text-align: left; }
}

/* Edit round: interview question cards */
.round-q-card { background: var(--off-white); border: 1px solid #d4d4d4; border-radius: var(--radius-md); padding: 14px; margin-bottom: var(--space-3); }
.round-q-card__label { font-weight: var(--font-weight-bold); color: var(--purple); margin-bottom: 8px; }
.round-q-card .richtext-editor, .round-q-card .form-control { background: var(--white); }
.round-q-total { margin: 4px 0 10px; }

/* Panellist Introduction card + Edit round task email panel */
.rec-intro-card { border-left: 4px solid var(--teal); }
.rec-intro-card--lead { border-left-color: var(--purple); background: rgba(66,42,126,.05); }
.rec-intro-list { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: var(--font-size-sm); line-height: 1.55; }
.rec-task-files { margin: 0 0 8px; padding: 0; list-style: none; display: grid; gap: 6px; }
.rec-task-files li { display: flex; align-items: center; gap: 12px; background: var(--colour-surface); border-radius: var(--radius-md); padding: 6px 12px; font-size: var(--font-size-sm); }
.rec-task-email { border: 1px solid var(--colour-border); border-left: 4px solid var(--teal); border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-4); background: var(--colour-surface); }
.rec-task-email__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

/* Panel-only prompts under an interview question */
.rec-prompts { background: rgba(88,166,172,.12); border-left: 3px solid var(--teal); border-radius: var(--radius-md); padding: 8px 12px; margin: 0 0 10px; font-size: var(--font-size-sm); }
.rec-prompts__label { display: block; font-weight: var(--font-weight-bold); color: var(--purple); margin-bottom: 4px; }

/* Edit round step 1: fields on the left, hiring-manager sidebar on the right */
.rec-details-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; }
.rec-details-fields { display: grid; grid-template-columns: 110px minmax(0, 1fr) 190px; gap: var(--space-3); }
.rec-details-side .ap-card { margin-bottom: 0 !important; }
@media (max-width: 900px) {
  .rec-details-layout { grid-template-columns: 1fr; }
  .rec-details-fields { grid-template-columns: 1fr 1fr; }
}

/* ── Application process: stage by stage (recruitment manage) ─────────────
   Master-detail: a sticky rail of hiring stages + a detail pane. Amber and
   maroon are for genuine status only (to-fix chips/tags, the safer-
   recruitment gap), never decoration. No dividers — spacing and tints. */
.initials-badge--external { background: rgba(66,42,126,.14); color: var(--purple); }
.initials-badge--more { background: var(--off-white); color: var(--grey); }

.recm-stage-layout { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.recm-stage-rail { background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); padding: var(--space-3); position: sticky; top: 16px; }
.recm-stage-rail-title { font-size: var(--font-size-sm); color: var(--purple); margin: 0; padding: 4px 12px 8px; }
.recm-stage-rail-item {
  display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: start; width: 100%; text-align: left;
  background: none; border: none; border-radius: var(--radius-lg); padding: 12px; margin-bottom: 4px;
  font-family: var(--font-family); font-size: inherit; color: inherit; cursor: pointer;
}
.recm-stage-rail-item:hover { background: var(--colour-surface); }
.recm-stage-rail-item:focus-visible, .recm-stage-linkbtn:focus-visible, .recm-stage-add:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.recm-stage-rail-item--on, .recm-stage-rail-item--on:hover { background: rgba(66,42,126,.10); }
.recm-stage-num {
  width: 30px; height: 30px; border-radius: 50%; background: rgba(66,42,126,.14); color: var(--purple);
  display: flex; align-items: center; justify-content: center; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm);
}
.recm-stage-rail-item--on .recm-stage-num { background: var(--purple); color: #fff; }
.recm-stage-rail-body { display: block; min-width: 0; }
.recm-stage-rail-name { display: block; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); }
.recm-stage-rail-sub { display: block; font-size: var(--font-size-xs); color: var(--colour-text-muted); margin: 1px 0 6px; }
.recm-stage-rail-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.recm-stage-addround { display: block; padding: 10px 12px; font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--colour-text-muted); }
.recm-stage-addround:hover { color: var(--purple); }
.recm-stage-empty { margin: 4px 0; padding: 12px; border: 1.5px dashed var(--colour-border); border-radius: var(--radius-lg); font-size: var(--font-size-sm); color: var(--colour-text-muted); }
.recm-stage-rail-note { padding: 8px 12px 4px; }

/* Overlapping name circles: 5px overlap, 2px white ring. Internal = teal-deep. */
.recm-stage-circles { display: inline-flex; align-items: center; }
.recm-stage-circles .initials-badge { width: 28px; height: 28px; font-size: 0.625rem; border: 2px solid var(--white); background: var(--teal-deep, #2E7379); margin-left: -5px; }
.recm-stage-circles .initials-badge:first-child { margin-left: 0; }
.recm-stage-circles .initials-badge--external { background: rgba(66,42,126,.14); color: var(--purple); }
.recm-stage-circles .initials-badge--more { background: var(--off-white); color: var(--grey); }

.recm-stage-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--radius-full); padding: 3px 11px; font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); white-space: nowrap; }
.recm-stage-chip svg { width: 12px; height: 12px; flex-shrink: 0; }
.recm-stage-chip--ok { background: rgba(88,166,172,.15); color: #2E7379; }
.recm-stage-chip--fix { background: rgba(239,128,50,.15); color: #8A4400; }
.recm-stage-chip--risk { background: rgba(80,26,40,.10); color: var(--dark-red); }
.recm-stage-chip--neutral { background: rgba(66,42,126,.10); color: var(--purple); }

.recm-stage-pane { background: var(--white); border: 1px solid var(--colour-border); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); min-width: 0; }
.recm-stage-pane-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.recm-stage-pane-head h2 { font-size: 1.5rem; color: var(--purple); margin: 0; }
.recm-stage-pane-head-r { display: flex; align-items: center; gap: 12px; }
.recm-stage-sub { color: var(--colour-text-muted); margin-top: 2px; }
.recm-stage-linkbtn { background: none; border: none; padding: 0; font-family: var(--font-family); font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: #3b7c80; cursor: pointer; }
.recm-stage-linkbtn:hover { text-decoration: underline; }
.recm-stage-callout { background: rgba(80,26,40,.08); color: var(--dark-red); border-radius: var(--radius-lg); padding: 14px 18px; margin-bottom: var(--space-4); font-size: var(--font-size-sm); }
.recm-stage-callout ul { margin: 6px 0 0; padding-left: 18px; }
.recm-stage-callout .recm-stage-linkbtn { color: var(--dark-red); }

.recm-stage-check { background: var(--colour-surface); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: var(--space-4); }
.recm-stage-block-label { font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: .4px; color: var(--colour-text-muted); margin-bottom: 4px; }
.recm-stage-check-li { display: flex; gap: 9px; align-items: flex-start; font-size: var(--font-size-sm); padding: 3px 0; }
.recm-stage-check-li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.recm-stage-check-li--ok svg { color: #2E7379; }
.recm-stage-check-li--fix svg { color: var(--dark-red); }
.recm-stage-check-li--info svg { color: var(--grey); }

.recm-stage-cols { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-5); align-items: start; }
.recm-stage-cols > div { min-width: 0; }
.recm-stage-block { background: var(--colour-surface); border-radius: var(--radius-lg); padding: 14px 16px; margin-bottom: var(--space-3); }
.recm-stage-block:last-child { margin-bottom: 0; }
.recm-stage-block-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); flex-wrap: wrap; }
.recm-stage-block-head h5 { font-size: var(--font-size-sm); color: var(--purple); margin: 0; }

.recm-stage-q { background: var(--white); border-radius: var(--radius-md); padding: 10px 12px; margin-bottom: var(--space-2); font-size: var(--font-size-sm); }
.recm-stage-q:last-child { margin-bottom: 0; }
.recm-stage-q-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.recm-stage-q-meta { display: flex; gap: 14px; align-items: center; margin-top: 5px; }
.recm-stage-q-meta .initials-badge { width: 24px; height: 24px; font-size: 0.5625rem; background: var(--teal-deep, #2E7379); }
.recm-stage-block .person-row { background: var(--white); flex-wrap: wrap; align-items: flex-start; }
.recm-stage-block .person-row .pname { min-width: 170px; overflow-wrap: anywhere; }
.recm-stage-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.recm-stage-tag { border-radius: var(--radius-full); padding: 2px 9px; font-size: 0.6875rem; font-weight: var(--font-weight-bold); }
.recm-stage-tag--ok { background: rgba(88,166,172,.15); color: #2E7379; }
.recm-stage-tag--warn { background: rgba(239,128,50,.15); color: #8A4400; }
.recm-stage-tag--neutral { background: rgba(66,42,126,.10); color: var(--purple); }
.recm-stage-add { display: block; width: 100%; background: none; font-family: var(--font-family); cursor: pointer; }
.recm-stage-add:hover { border-color: var(--purple); color: var(--purple); }

@media (max-width: 1200px) {
  .recm-stage-layout, .recm-stage-cols { grid-template-columns: 1fr; }
  .recm-stage-rail { position: static; }
}

/* Job description tab — reuses the rail/pane/chip/check/block styles above. */
.recm-stage-note { font-size: var(--font-size-sm); font-style: italic; color: var(--colour-text-muted); margin: var(--space-3) 0 0; }
.recm-stage-missing { color: #8A4400; font-style: italic; }
.rec-field--wide { grid-column: 1 / -1; }
.recm-stage-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recm-stage-fields .rec-field { min-width: 0; overflow-wrap: anywhere; }
.recm-stage-spec { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.recm-stage-block .rec-channel-row { background: var(--white); }
@media (max-width: 1200px) {
  .recm-stage-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .recm-stage-fields, .recm-stage-spec { grid-template-columns: 1fr; }
}

/* Timeline strip at the top of every stage; sifting and rounds stack full width. */
.recm-stage-dates { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; background: rgba(66,42,126,.08); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: var(--space-4); font-size: var(--font-size-sm); }
.recm-stage-datepair b { color: var(--purple); margin-right: 6px; }
.recm-stage-stack > .recm-stage-block { margin-bottom: var(--space-3); }

/* ── Applications stage view (recruitment-applications.js) ─────────────────
   Reuses the .recm-stage-* rail/pane/chip/circle styles above; everything
   specific to the Applications view is .recm-apps-*. No decoration: spacing
   and tinted backgrounds only. Amber (--hot) is for "to decide", nothing else. */
.recm-apps-rail-gap { padding-top: var(--space-4); }
.recm-apps-rail-item--muted .recm-stage-rail-name { color: var(--colour-text-muted); }

.recm-apps-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.recm-apps-tile { background: var(--colour-surface); border-radius: var(--radius-lg); padding: 12px 16px; }
.recm-apps-tile__n { font-size: 1.625rem; font-weight: var(--font-weight-bold); color: var(--purple); line-height: 1.1; }
.recm-apps-tile__l { font-size: var(--font-size-xs); color: var(--colour-text-muted); margin-top: 2px; }
.recm-apps-tile--hot .recm-apps-tile__n { color: #8A4400; }

.recm-apps-panelline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--colour-text-muted); margin-bottom: var(--space-3); }
.recm-apps-roundbtns { display: flex; gap: 8px; margin: calc(-1 * var(--space-1)) 0 var(--space-3); }
.recm-apps-scope { font-size: var(--font-size-sm); font-style: italic; color: var(--colour-text-muted); margin: 0 0 var(--space-3); }
.recm-apps-guidance { margin: 0 0 var(--space-3); }
.recm-apps-empty { background: var(--colour-surface); border-radius: var(--radius-lg); padding: 22px; text-align: center; color: var(--colour-text-muted); }

.recm-apps-bulkbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--colour-surface); border-radius: var(--radius-lg); padding: 9px 14px; margin-bottom: 10px; font-size: var(--font-size-sm); }
.recm-apps-bulkbar--on { background: rgba(66,42,126,.10); }
.recm-apps-selall { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.recm-apps-bspace { flex: 1; }
.recm-apps-bulkbar .btn:disabled { opacity: .45; cursor: not-allowed; }
.recm-apps-bulkbar .recm-stage-linkbtn[hidden] { display: none; }
.recm-apps-cbx { width: 34px; text-align: center; }
.recm-apps-cbx input, .recm-apps-selall input { width: 16px; height: 16px; accent-color: var(--purple); cursor: pointer; }
.recm-apps-cbx input:disabled { cursor: not-allowed; }
.recm-apps-btn-danger { color: var(--bright-red); }
.recm-apps-btn-primary { color: var(--purple); border-color: var(--purple); }
.recm-apps-acts { display: flex; gap: 6px; flex-wrap: wrap; }

.recm-apps-tablewrap { overflow-x: auto; }
.recm-apps-tablewrap table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--font-size-sm); }
.recm-apps-tablewrap th { text-align: left; font-size: 0.6875rem; font-weight: var(--font-weight-bold); letter-spacing: .5px; text-transform: uppercase; color: var(--colour-text-muted); padding: 8px 10px; background: var(--colour-surface); }
.recm-apps-tablewrap th:first-child { border-radius: var(--radius-md) 0 0 var(--radius-md); }
.recm-apps-tablewrap th:last-child { border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.recm-apps-tablewrap td { padding: 11px 10px; vertical-align: middle; border: 0; }
.recm-apps-tablewrap tbody tr:nth-child(even) td { background: rgba(66,42,126,.025); }
.recm-apps-row--dim td { color: var(--colour-text-muted); }
.recm-apps-open { background: none; border: none; padding: 0; font: inherit; font-weight: var(--font-weight-bold); color: var(--purple); cursor: pointer; text-align: left; }
.recm-apps-open:hover { text-decoration: underline; }
.recm-apps-open:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.recm-apps-row--dim .recm-apps-open { color: var(--colour-text-muted); }
.recm-apps-sub { display: block; font-size: var(--font-size-xs); color: var(--colour-text-muted); font-weight: 400; }
.recm-apps-findrow { cursor: pointer; }
.recm-apps-findrow:hover td { background: rgba(66,42,126,.06); }

.recm-apps-funnel { display: flex; gap: 8px; align-items: stretch; margin-bottom: var(--space-3); flex-wrap: wrap; }
.recm-apps-fstep { flex: 1; min-width: 120px; background: var(--colour-surface); border: none; border-radius: var(--radius-lg); padding: 12px 14px; text-align: left; font-family: var(--font-family); cursor: pointer; }
.recm-apps-fstep:hover { background: rgba(66,42,126,.10); }
.recm-apps-fstep:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.recm-apps-fstep__n { display: block; font-size: 1.5rem; font-weight: var(--font-weight-bold); color: var(--purple); line-height: 1.1; }
.recm-apps-fstep__l { display: block; font-size: var(--font-size-xs); color: var(--colour-text-muted); }
.recm-apps-fstep--muted .recm-apps-fstep__n { color: var(--colour-text-muted); }
.recm-apps-attention { background: rgba(66,42,126,.08); border-radius: var(--radius-lg); padding: 12px 16px; margin-bottom: var(--space-3); font-size: var(--font-size-sm); }
.recm-apps-attention ul { margin: 6px 0 0; padding-left: 18px; }
.recm-apps-find { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.recm-apps-find input { max-width: 380px; }
.recm-apps-find__count { margin-left: auto; font-size: var(--font-size-xs); color: var(--colour-text-muted); }

.recm-apps-reflist { max-height: 180px; overflow-y: auto; margin: 0 0 var(--space-3); padding: 10px 14px 10px 30px; background: var(--colour-surface); border-radius: var(--radius-md); font-size: var(--font-size-sm); }
.recm-apps-failures { margin: 0 0 var(--space-3); padding-left: 20px; font-size: var(--font-size-sm); }
.recm-apps-progress { min-height: 1.4em; font-weight: var(--font-weight-bold); color: var(--purple); }

/* The score matrix is wide: compact cells and stacked row buttons keep the
   Actions column on screen beside the 310px rail. */
#recm-apps-pane .table-wrap th, #recm-apps-pane .table-wrap td { padding-left: 8px; padding-right: 8px; }
#recm-apps-pane .table-wrap .recm-apps-open, #recm-apps-pane .table-wrap .recm-apps-sub { white-space: nowrap; }
#recm-apps-pane .table-wrap .recm-apps-acts, #recm-apps-pane .recm-ir-actions { flex-direction: column; align-items: flex-start; }

@media (max-width: 1200px) {
  .recm-apps-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Keyboard focus and skip link (staff app) ─────────────────────────────
   Every focusable control gets a clear ring when reached by keyboard. Purple on light
   surfaces; white on the purple top bar. Rules that remove the outline for a mouse click
   (:focus without :focus-visible) are untouched. */
:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.topbar :focus-visible { outline-color: var(--white); }
.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 10000; background: var(--white); color: var(--purple); padding: 10px 16px; border-radius: var(--radius-md); font-weight: 700; box-shadow: var(--shadow-lg); }
.skip-link:focus { left: 8px; }

/* ── Policy editor (public/js/pages/policy-editor*.js) ─────────────────────────
   Spacing and shadows, no divider lines. Teal is only ever a background or a decoration here. */
.pe-page { max-width: 1480px; }
.pe-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pe-top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-3) 0 var(--space-4); }
.pe-top__title { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.pe-top__title h1 { margin: 0; font-size: var(--font-size-2xl); color: var(--purple); }
.pe-dirty { font-size: var(--font-size-sm); color: var(--dark-red); }
.pe-pill { display: inline-block; border-radius: var(--radius-full); padding: 2px var(--space-3); font-size: var(--font-size-xs); font-weight: var(--font-weight-bold); white-space: nowrap; }
.pe-pill--draft { background: #EFEBF7; color: var(--purple); }
.pe-pill--live { background: #E3F3EA; color: #1F6B3E; }
.pe-pill--old { background: #F0F0F0; color: var(--grey); }
.pe-steps { display: flex; gap: var(--space-2); flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 var(--space-5); }
.pe-step { border: 0; border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); background: #F0EEF5; color: var(--grey); font: inherit; font-size: var(--font-size-sm); cursor: pointer; }
.pe-step--on { background: var(--purple); color: var(--white); }
.pe-step--done { background: #E4F1F2; color: var(--black); }
.pe-step:disabled { opacity: .55; cursor: not-allowed; }
.pe-problems ul { margin: var(--space-2) 0 0 var(--space-5); padding: 0; }
.pe-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6); }
.pe-lead { color: var(--grey); margin: 0 0 var(--space-5); max-width: 62ch; }
.pe-details { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.pe-formgrid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.pe-field { margin: 0 0 var(--space-4); min-width: 0; padding: 0; border: 0; }
.pe-formgrid .pe-field { margin: 0; }
.pe-field--full { grid-column: 1 / -1; }
.pe-field label, .pe-field legend { display: block; font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--purple); margin-bottom: var(--space-1); padding: 0; }
.pe-field label.pe-check, .pe-field label.pe-choice__opt { color: var(--colour-text); font-weight: var(--font-weight-regular); }
.pe-field--missing > .form-control { box-shadow: 0 0 0 2px rgba(235, 86, 99, .55); }
.pe-req { font-weight: var(--font-weight-regular); color: var(--grey); font-size: var(--font-size-xs); margin-left: var(--space-1); }
.pe-hint { display: block; color: var(--grey); font-size: var(--font-size-sm); margin-top: var(--space-1); }
.pe-footer { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.pe-side__title, .pe-col__title { font-size: var(--font-size-md); color: var(--purple); margin: 0 0 var(--space-3); }
.pe-hdr-preview { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-4); }
.pe-hdr-preview .hb-page { padding: 0; }
.pe-check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--font-size-sm); }
.pe-check input { width: 18px; height: 18px; accent-color: var(--purple); }
.pe-builder { display: grid; grid-template-columns: 250px minmax(0, 1fr) 360px; gap: var(--space-4); align-items: start; }
.pe-col { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-4); min-width: 0; }
.pe-col--list, .pe-col--form { position: sticky; top: var(--space-3); max-height: calc(100vh - 32px); overflow-y: auto; }
.pe-sections { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pe-sec { display: flex; align-items: stretch; gap: var(--space-1); background: #F7F5FB; border-radius: var(--radius-md); }
.pe-sec--on { background: var(--purple); }
.pe-sec--on .pe-sec__type, .pe-sec--on .pe-sec__sum { color: var(--white); }
.pe-sec--problem { box-shadow: 0 0 0 2px var(--bright-red); }
.pe-sec__main { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: var(--space-2) var(--space-3); font: inherit; cursor: pointer; display: flex; flex-direction: column; }
.pe-sec__type { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--purple); }
.pe-sec__sum { font-size: var(--font-size-xs); color: var(--grey); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-sec__btns { display: flex; flex-direction: column; justify-content: center; padding: var(--space-1); gap: 2px; }
.pe-sec__btns .btn { padding: 0 var(--space-2); line-height: 1.4; }
.pe-add { width: 100%; }
.pe-picker { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.pe-pick { text-align: left; background: #F7F5FB; border: 0; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font: inherit; cursor: pointer; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); }
.pe-pick:hover { background: #EFEBF7; }
.pe-pick__name { font-weight: var(--font-weight-bold); color: var(--purple); font-size: var(--font-size-sm); }
.pe-pick__use { font-size: var(--font-size-xs); color: var(--grey); }
.pe-preview-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.pe-preview-bar .pe-col__title { margin: 0; }
.pe-preview { background: #FBFAFD; border-radius: var(--radius-md); padding: var(--space-2); overflow-x: auto; }
.pe-preview .hb-page { padding: var(--space-3); max-width: none; }
.pe-preview--phone { max-width: 390px; margin: 0 auto; }
.pe-preview--modal { max-height: 70vh; overflow-y: auto; }
.pe-prev-block { border-radius: var(--radius-md); cursor: pointer; margin: 0 calc(var(--space-1) * -1); padding: 0 var(--space-1); }
.pe-prev-block:hover { box-shadow: 0 0 0 2px rgba(66, 42, 126, .25); }
.pe-prev-block--on { box-shadow: 0 0 0 3px var(--purple); }
.pe-form .pe-hint:first-child { margin-top: 0; margin-bottom: var(--space-4); }
.pe-list { background: #F7F5FB; border-radius: var(--radius-md); padding: var(--space-3); }
.pe-list__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); gap: var(--space-2); }
.pe-list__title { font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--purple); }
.pe-item { background: var(--white); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); padding: var(--space-3); margin-bottom: var(--space-3); }
.pe-item--compact { display: flex; gap: var(--space-2); align-items: flex-start; }
.pe-item--compact .pe-field { flex: 1; margin: 0; }
.pe-item__bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); gap: var(--space-2); }
.pe-item__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-bold); color: var(--grey); }
.pe-item__btns { display: inline-flex; gap: var(--space-1); flex-shrink: 0; }
.pe-cells { display: grid; gap: var(--space-2); }
.pe-cells .pe-field { margin: 0; }
.pe-obj { background: #F7F5FB; border-radius: var(--radius-md); padding: var(--space-3); }
.pe-union { margin-bottom: var(--space-4); }
.pe-union > .pe-field { margin-bottom: var(--space-2); }
.pe-choice { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pe-choice__opt { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); cursor: pointer; }
.pe-choice__opt--block { display: flex; margin-bottom: var(--space-2); }
.pe-choice__opt input { accent-color: var(--purple); width: 16px; height: 16px; }
.pe-swatch { width: 14px; height: 14px; border-radius: var(--radius-full); display: inline-block; }
.pe-swatch--teal { background: var(--teal); }
.pe-swatch--purple { background: var(--purple); }
.pe-swatch--maroon { background: var(--dark-red); }
.pe-swatch--amber { background: var(--orange); }
.pe-icon-row { display: flex; align-items: center; gap: var(--space-3); }
.pe-icon-prev { width: 32px; height: 32px; color: var(--purple); flex-shrink: 0; display: inline-block; }
.pe-icon-prev svg { width: 100%; height: 100%; }
.pe-tip { background: #EFEBF7; border-radius: var(--radius-md); padding: var(--space-3); font-size: var(--font-size-sm); }
.pe-tip ul { margin: var(--space-1) 0; padding-left: var(--space-5); }
.pe-danger { margin-top: var(--space-5); }
.pe-review { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6); align-items: start; }
.pe-checks { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pe-check-item { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: #F7F5FB; }
.pe-check-item__icon { font-weight: var(--font-weight-bold); width: 1.2em; text-align: center; flex-shrink: 0; }
.pe-check-item--ok .pe-check-item__icon { color: #1F6B3E; }
.pe-check-item--warn { background: #FFF4DA; }
.pe-check-item--warn .pe-check-item__icon { color: #8A4B00; }
.pe-check-item--error { background: #FDE5E8; }
.pe-check-item--error .pe-check-item__icon { color: #A12B38; }
.pe-versions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pe-version { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); background: #F7F5FB; border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); font-size: var(--font-size-sm); }
.pe-version__btns { margin-left: auto; display: inline-flex; gap: var(--space-2); }
@media (max-width: 1100px) {
  .pe-builder, .pe-details, .pe-review { grid-template-columns: 1fr; }
  .pe-col--list, .pe-col--form { position: static; max-height: none; }
  .pe-formgrid { grid-template-columns: 1fr; }
}

/* ── Policy import screen (public/js/pages/policy-import.js) ─────────────────── */
.pi-page { max-width: 980px; }
.pi-title { margin: var(--space-3) 0 var(--space-2); font-size: var(--font-size-2xl); color: var(--purple); }
.pi-steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.pi-step { display: flex; gap: var(--space-4); align-items: flex-start; }
.pi-step__num { flex-shrink: 0; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--teal); color: var(--on-teal); display: grid; place-items: center; font-weight: var(--font-weight-bold); }
.pi-step__body { flex: 1; min-width: 0; }
.pi-step__title { margin: 0 0 var(--space-1); font-size: var(--font-size-md); color: var(--purple); }
.pi-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0; }
.pi-prompt { margin-top: var(--space-3); }
.pi-prompt pre { margin: 0; max-height: 380px; overflow: auto; white-space: pre-wrap; word-break: break-word; background: #F7F5FB; border-radius: var(--radius-md); padding: var(--space-4); font-size: var(--font-size-xs); line-height: 1.55; }
.pi-text { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--font-size-xs); resize: vertical; }
.pi-result { margin-top: var(--space-4); }
.pi-error { margin-top: var(--space-3); }
@media (max-width: 700px) { .pi-step { flex-direction: column; } }


/* ── Welcome (new joiners): Home banner and the /welcome page ───────────────
   No divider lines: sections are separated by space and soft shadows. Teal is decoration only
   (backgrounds); text on it uses var(--on-teal), and teal-coloured text would be var(--teal-text). */
.home-welcome-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
  background: var(--purple); color: #fff; border-radius: 14px; padding: 1.1rem 1.5rem; margin-bottom: var(--space-6);
}
.home-welcome-card__title { margin: 0 0 4px; font-size: 1.15rem; color: #fff; }
.home-welcome-card__text { margin: 0; font-size: 0.9rem; color: #E8E2F6; }
.home-welcome-card__btn { background: var(--teal); color: var(--on-teal); font-weight: 700; text-decoration: none; }
.home-welcome-card__btn:hover { background: #6BB5BB; color: var(--on-teal); }

.wl-page { max-width: 1120px; }
.wl-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-6); align-items: end;
  background: var(--purple); color: #fff; border-radius: 16px; padding: 1.75rem 2rem; margin-bottom: var(--space-6);
}
.wl-hero__title { margin: 0 0 var(--space-2); color: #fff; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.15; }
.wl-hero__lead { margin: 0 0 var(--space-3); color: #E8E2F6; max-width: 62ch; line-height: 1.55; }
.wl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wl-chip { background: rgba(255,255,255,.14); color: #fff; border-radius: 999px; padding: 4px 12px; font-size: 0.8125rem; }
.wl-chip a { color: #fff; text-decoration: underline; }
.wl-progress__count { margin: 0 0 6px; font-size: 0.9rem; color: #fff; }
.wl-progress__count b { font-size: 1.6rem; }
.wl-bar { height: 8px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.wl-bar > span { display: block; height: 100%; background: var(--teal); border-radius: 999px; }
.wl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-6); align-items: start; }
.wl-stage { margin-bottom: var(--space-6); }
.wl-stage__title { margin: 0 0 var(--space-2); font-size: 1.05rem; color: var(--purple); }
.wl-stage__count { font-size: 0.8125rem; font-weight: 500; color: var(--grey); margin-left: 8px; }
.wl-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.wl-task { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: start; background: #fff; border-radius: 12px; padding: 12px 14px; box-shadow: 0 1px 3px rgba(16,16,16,.08), 0 4px 14px rgba(66,42,126,.06); }
.wl-task.is-done { background: #F7F5FB; }
.wl-task__title { margin: 0; font-weight: 600; color: #101010; }
.wl-task__desc, .wl-task__detail, .wl-task__meta { margin: 3px 0 0; font-size: 0.8125rem; color: var(--grey); }
.wl-task__detail--open { color: #8F1F2C; font-weight: 600; }
.wl-task__list { margin: 4px 0 0; padding-left: 18px; font-size: 0.8125rem; color: var(--grey); }
.wl-task__action { align-self: center; }
.wl-box { width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 0.8125rem; padding: 0; background: #fff; }
.wl-box--tick { border: 2px solid var(--purple); color: #fff; cursor: pointer; font: inherit; font-weight: 700; }
.wl-box--tick.is-done { background: var(--purple); }
.wl-box--tick:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.wl-box--fixed { border: 2px dashed #A59CC0; color: var(--purple); }
.wl-box--fixed.is-done { background: #EDEAF7; }
.wl-side { display: grid; gap: var(--space-4); }
.wl-card { background: #fff; border-radius: 14px; padding: 1rem 1.25rem; box-shadow: 0 1px 3px rgba(16,16,16,.08), 0 6px 18px rgba(66,42,126,.07); }
.wl-card--calm { background: #E3F0F1; color: var(--on-teal); }
.wl-card__title { margin: 0 0 var(--space-2); font-size: 0.95rem; color: var(--purple); }
.wl-card--calm .wl-card__title { color: var(--on-teal); }
.wl-card--calm a { color: var(--on-teal); text-decoration: underline; }
.wl-plain { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 0.875rem; }
.wl-muted { margin: 0; font-size: 0.8125rem; color: var(--grey); }
@media (max-width: 860px) {
  .wl-hero, .wl-layout { grid-template-columns: minmax(0, 1fr); }
  .wl-task { grid-template-columns: 28px minmax(0, 1fr); }
  .wl-task__action { grid-column: 2; }
}

/* ── Welcome: line manager page (/welcome/team/:id) ───────────────────────── */
.wt-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
.wt-main, .wt-side { display: grid; gap: var(--space-4); min-width: 0; }
.wt-progress { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.wt-progress__big { margin: 0; font-size: 1.9rem; font-weight: 700; line-height: 1; color: var(--purple); }
.wt-progress .wt-bar { flex: 1 1 200px; max-width: 380px; }
.wt-bar { height: 8px; border-radius: 6px; background: var(--off-white, #E6E6E6); overflow: hidden; }
.wt-bar > span { display: block; height: 100%; background: var(--purple); border-radius: 6px; }
.wt-bar--thin { height: 5px; margin-bottom: var(--space-2); }
.wt-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.wt-tile { background: #fff; border-radius: 14px; padding: 0.85rem 1rem; box-shadow: 0 1px 3px rgba(16,16,16,.08), 0 6px 18px rgba(66,42,126,.07); }
.wt-tile__name { margin: 0 0 2px; font-size: 0.8125rem; color: var(--grey); }
.wt-tile__count { margin: 0 0 var(--space-2); font-size: 1.35rem; font-weight: 700; color: var(--purple); }
.wt-status { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.wt-status--none { background: #E6E6E6; color: var(--grey); }
.wt-status--prog { background: #EFEBF7; color: var(--purple); }
.wt-status--done { background: #E3F3EA; color: #14663A; }
.wt-status--due { background: #FFF4DA; color: #8A4600; }
.wt-status--overdue { background: #FDE5E8; color: #A81D2D; }
.wt-tasks .wl-task { background: #F3F0F9; box-shadow: none; align-items: center; }
.wt-tasks .wl-task.is-done { background: #F7F5FB; }
.wt-group { margin-top: var(--space-2); }
.wt-group > summary, .wt-disclosure > summary { cursor: pointer; font-weight: 700; color: var(--purple); padding: 8px 4px; list-style: none; display: flex; gap: 8px; align-items: center; }
.wt-group > summary::-webkit-details-marker, .wt-disclosure > summary::-webkit-details-marker { display: none; }
.wt-group > summary::before, .wt-disclosure > summary::before { content: "▸"; font-size: 0.75rem; color: var(--grey); }
.wt-group[open] > summary::before, .wt-disclosure[open] > summary::before { content: "▾"; }
.wt-group > summary:focus-visible, .wt-disclosure > summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-radius: 6px; }
.wt-group__count { margin-left: auto; font-weight: 500; font-size: 0.8125rem; color: var(--grey); }
.wt-rows { list-style: none; margin: 0; padding: 0 0 var(--space-2); }
.wt-row { display: flex; gap: 12px; align-items: flex-start; padding: 6px 4px; font-size: 0.875rem; }
.wt-row__text { flex: 1; min-width: 0; }
.wt-row__note { display: block; font-size: 0.8125rem; color: var(--grey); }
.wt-dot { width: 20px; height: 20px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 0.6875rem; font-weight: 700; background: #E6E6E6; color: var(--grey); }
.wt-dot.is-done { background: #E3F3EA; color: #14663A; }
.wt-empty { margin: var(--space-2) 0 0; font-size: 0.875rem; color: var(--grey); background: #F3F0F9; border-radius: 10px; padding: 10px 12px; }
.wt-link-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 0.875rem; }
.wt-link-row a { color: var(--purple); overflow-wrap: anywhere; }
.wt-form { display: grid; gap: 8px; margin-top: var(--space-2); }
.wt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--space-3); }
.wt-review { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; background: #F3F0F9; border-radius: 12px; padding: 12px 14px; margin-top: var(--space-2); }
.wt-review__body { flex: 1 1 150px; min-width: 0; }
.wt-review__title { margin: 0; font-weight: 700; }
.wt-review__sub { margin: 0; font-size: 0.8125rem; color: var(--grey); }
.wt-review .btn:disabled { opacity: 0.55; cursor: not-allowed; }
.wt-note { background: #E3F0F1; color: var(--on-teal); border-radius: 10px; padding: 10px 14px; font-size: 0.875rem; margin-bottom: var(--space-4); }
@media (max-width: 1000px) { .wt-grid, .wt-tiles { grid-template-columns: minmax(0, 1fr); } }

/* ── Home: new starters card for a line manager ───────────────────────────── */
.hm-starters { background: #fff; border-radius: 14px; padding: 1rem 1.25rem; margin-bottom: var(--space-6); border-left: 6px solid var(--purple); box-shadow: 0 1px 3px rgba(16,16,16,.08), 0 6px 18px rgba(66,42,126,.07); }
.hm-starters--due { border-left-color: var(--yellow); }
.hm-starters--overdue { border-left-color: #A81D2D; }
.hm-starters--ok { border-left-color: #14663A; }
.hm-starters__title { margin: 0; font-size: 1.05rem; color: var(--purple); }
.hm-starters__help { margin: 2px 0 var(--space-2); font-size: 0.8125rem; color: var(--grey); }
.hm-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 6px 0; }
.hm-line__text { flex: 1 1 220px; min-width: 0; }
.hm-line__headline { margin: 0; font-weight: 700; color: var(--purple); }
.hm-line__detail { margin: 2px 0 0; font-size: 0.8125rem; color: var(--grey); }
.hm-line--lead .hm-line__headline { font-size: 1.05rem; }


/* ── Utilities ─────────────────────────────────────────────────────────────
   Replace repeated inline style="" attributes in the page files (public/js/pages).
   One declaration per class, named u-<property>-<value> (mb = margin-bottom, c = color,
   fs = font-size and so on). !important makes them behave exactly as the inline styles
   did, which no stylesheet rule could override. Never use these for anything JS toggles
   with element.style (display, visibility): an !important class would beat the script. */
.u-br-3 { border-radius: 3px !important; }
.u-c-1d7a80 { color: #1D7A80 !important; }
.u-c-422a7e { color: #422A7E !important; }
.u-c-bright-red { color: var(--bright-red) !important; }
.u-c-colour-text-muted { color: var(--colour-text-muted) !important; }
.u-c-purple { color: var(--purple) !important; }
.u-cur-pointer { cursor: pointer !important; }
.u-flex-1 { flex: 1 !important; }
.u-flex-1-1-auto { flex: 1 1 auto !important; }
.u-fs-12 { font-size: 12px !important; }
.u-fs-13 { font-size: 13px !important; }
.u-fs-14 { font-size: 14px !important; }
.u-fs-15 { font-size: 15px !important; }
.u-fs-16 { font-size: 16px !important; }
.u-fs-18 { font-size: 18px !important; }
.u-fs-32 { font-size: 32px !important; }
.u-fs-font-size-sm { font-size: var(--font-size-sm) !important; }
.u-fshrink-0 { flex-shrink: 0 !important; }
.u-fw-500 { font-weight: 500 !important; }
.u-fw-600 { font-weight: 600 !important; }
.u-fw-700 { font-weight: 700 !important; }
.u-h-28 { height: 28px !important; }
.u-h-9 { height: 9px !important; }
.u-lh-1 { line-height: 1 !important; }
.u-ls-0p03em { letter-spacing: 0.03em !important; }
.u-ls-0p05em { letter-spacing: 0.05em !important; }
.u-m-0 { margin: 0 !important; }
.u-m-0-0-12 { margin: 0 0 12px !important; }
.u-m-0-0-4 { margin: 0 0 4px !important; }
.u-m-0-0-6 { margin: 0 0 6px !important; }
.u-m-0-0-8 { margin: 0 0 8px !important; }
.u-m-10-0-0 { margin: 10px 0 0 !important; }
.u-m-8-0-0 { margin: 8px 0 0 !important; }
.u-mb-0 { margin-bottom: 0 !important; }
.u-mb-10 { margin-bottom: 10px !important; }
.u-mb-12 { margin-bottom: 12px !important; }
.u-mb-14 { margin-bottom: 14px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-mb-1rem { margin-bottom: 1rem !important; }
.u-mb-3 { margin-bottom: 3px !important; }
.u-mb-6 { margin-bottom: 6px !important; }
.u-mb-8 { margin-bottom: 8px !important; }
.u-minw-0 { min-width: 0 !important; }
.u-mt-1 { margin-top: 1px !important; }
.u-mt-10 { margin-top: 10px !important; }
.u-mt-12 { margin-top: 12px !important; }
.u-mt-16 { margin-top: 16px !important; }
.u-mt-22 { margin-top: 22px !important; }
.u-mt-4 { margin-top: 4px !important; }
.u-mt-6 { margin-top: 6px !important; }
.u-mt-7 { margin-top: 7px !important; }
.u-mt-8 { margin-top: 8px !important; }
.u-mw-220 { max-width: 220px !important; }
.u-mw-420 { max-width: 420px !important; }
.u-mw-760 { max-width: 760px !important; }
.u-mw-none { max-width: none !important; }
.u-p-0 { padding: 0 !important; }
.u-p-12-16 { padding: 12px 16px !important; }
.u-p-1p1rem-1p25rem { padding: 1.1rem 1.25rem !important; }
.u-p-2rem { padding: 2rem !important; }
.u-ta-center { text-align: center !important; }
.u-ta-right { text-align: right !important; }
.u-w-100pct { width: 100% !important; }
.u-w-9 { width: 9px !important; }
.u-ws-nowrap { white-space: nowrap !important; }
.u-ws-pre-wrap { white-space: pre-wrap !important; }
.u-br-0-0-radius-md-radius-md { border-radius: 0 0 var(--radius-md) var(--radius-md) !important; }
.u-br-radius-md { border-radius: var(--radius-md) !important; }
.u-c-colour-error { color: var(--colour-error) !important; }
.u-c-colour-text { color: var(--colour-text) !important; }
.u-c-teal { color: var(--teal-text) !important; }
.u-fs-0p75rem { font-size: 0.75rem !important; }
.u-fs-10 { font-size: 10px !important; }
.u-fs-22 { font-size: 22px !important; }
.u-fs-font-size-base { font-size: var(--font-size-base) !important; }
.u-fw-400 { font-weight: 400 !important; }
.u-fw-normal { font-weight: normal !important; }
.u-m-0-0-0p75rem { margin: 0 0 0.75rem !important; }
.u-m-0-0-10 { margin: 0 0 10px !important; }
.u-m-0-0-14 { margin: 0 0 14px !important; }
.u-m-0-0-1p1rem { margin: 0 0 1.1rem !important; }
.u-m-0-0-1rem { margin: 0 0 1rem !important; }
.u-mb-space-4 { margin-bottom: var(--space-4) !important; }
.u-ml-auto { margin-left: auto !important; }
.u-mr-4 { margin-right: 4px !important; }
.u-mr-6 { margin-right: 6px !important; }
.u-mt-14 { margin-top: 14px !important; }
.u-mt-1p25rem { margin-top: 1.25rem !important; }
.u-mt-1p5rem { margin-top: 1.5rem !important; }
.u-mt-1rem { margin-top: 1rem !important; }
.u-mt-3 { margin-top: 3px !important; }
.u-mw-200 { max-width: 200px !important; }
.u-mw-260 { max-width: 260px !important; }
.u-mw-320 { max-width: 320px !important; }
.u-p-1p25rem-1p5rem { padding: 1.25rem 1.5rem !important; }
.u-p-6-26-6-10 { padding: 6px 26px 6px 10px !important; }
.u-p-space-2-space-3-0 { padding: var(--space-2) var(--space-3) 0 !important; }
.u-p-space-5 { padding: var(--space-5) !important; }
.u-pl-20 { padding-left: 20px !important; }
.u-td-none { text-decoration: none !important; }
.u-w-90 { width: 90px !important; }
.u-w-auto { width: auto !important; }
.u-ws-normal { white-space: normal !important; }

/* Reduced motion (accessibility): people who ask their system for less motion get no skeleton shimmer,
   no fade-in on handbook panels and no animated transitions or smooth scrolling. The loading spinner is
   kept: it is the only sign that something is happening. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .skeleton-line, .hb-tab-panel { animation: none !important; }
}

/* Candidate-facing SPA pages (task submission, interview scheduling): field borders and a keyboard
   focus ring that meet 3:1 contrast, readable placeholders, and a skip link (accessibility, 2026-10-09). */
.rec-candidate .form-control { border-color: var(--grey); }
.rec-candidate .form-control::placeholder { color: #6B6B6B; }
.rec-candidate .form-control:focus, .rec-candidate .form-control:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; border-color: var(--purple); box-shadow: none; }
.rec-candidate a:focus-visible, .rec-candidate button:focus-visible, .rec-candidate summary:focus-visible { outline: 3px solid var(--purple); outline-offset: 2px; }
.rec-candidate .skip-link { position: absolute; left: -9999px; top: 8px; background: var(--white); color: var(--purple); padding: 8px 14px; border-radius: var(--radius-md); font-weight: 700; z-index: 10; }
.rec-candidate .skip-link:focus { left: 8px; }
.rec-candidate main:focus { outline: none; }
.rec-candidate .u-c-bright-red { color: #A8202F !important; }
.u-accent-purple { accent-color: var(--purple) !important; }
.u-bg-colour-surface { background: var(--colour-surface) !important; }
.u-bg-f0edf8 { background: #F0EDF8 !important; }
.u-bg-fff { background: #fff !important; }
.u-bg-none { background: none !important; }
.u-bg-off-white { background: var(--off-white) !important; }
.u-bg-rgba88-166-172-p15 { background: rgba(88,166,172,.15) !important; }
.u-br-999 { border-radius: 999px !important; }
.u-c-3b7c80 { color: #3b7c80 !important; }
.u-c-dark-red { color: var(--dark-red) !important; }
.u-c-orange { color: var(--orange) !important; }
.u-c-rag-green { color: var(--rag-green) !important; }
.u-fi-normal { font-style: normal !important; }
.u-flex-0-0-200 { flex: 0 0 200px !important; }
.u-flex-1-1-160 { flex: 1 1 160px !important; }
.u-fs-0p7rem { font-size: 0.7rem !important; }
.u-fs-0p875rem { font-size: 0.875rem !important; }
.u-fs-0p8rem { font-size: 0.8rem !important; }
.u-fs-11 { font-size: 11px !important; }
.u-fs-p875rem { font-size: .875rem !important; }
.u-gtc-60-1fr-120-60 { grid-template-columns: 60px 1fr 120px 60px !important; }
.u-h-18 { height: 18px !important; }
.u-h-8 { height: 8px !important; }
.u-lh-1p6 { line-height: 1.6 !important; }
.u-m-0-auto-1rem { margin: 0 auto 1rem !important; }
.u-m-1p25rem-0-10 { margin: 1.25rem 0 10px !important; }
.u-m-4-0-6 { margin: -4px 0 6px !important; }
.u-m-6-0-0 { margin: 6px 0 0 !important; }
.u-mb-1p25rem { margin-bottom: 1.25rem !important; }
.u-mb-20 { margin-bottom: 20px !important; }
.u-minh-48 { min-height: 48px !important; }
.u-minh-64 { min-height: 64px !important; }
.u-minw-130 { min-width: 130px !important; }
.u-minw-160 { min-width: 160px !important; }
.u-minw-200 { min-width: 200px !important; }
.u-minw-90 { min-width: 90px !important; }
.u-mt-2 { margin-top: 2px !important; }
.u-mt-space-2 { margin-top: var(--space-2) !important; }
.u-mw-100 { max-width: 100px !important; }
.u-mw-280 { max-width: 280px !important; }
.u-mw-520 { max-width: 520px !important; }
.u-mw-600 { max-width: 600px !important; }
.u-ov-hidden { overflow: hidden !important; }
.u-p-0-space-5-space-3 { padding: 0 var(--space-5) var(--space-3) !important; }
.u-p-1-6 { padding: 1px 6px !important; }
.u-p-10-14 { padding: 10px 14px !important; }
.u-p-12-6 { padding: 12px 6px !important; }
.u-p-16 { padding: 16px !important; }
.u-p-24-0 { padding: 24px 0 !important; }
.u-p-6-10 { padding: 6px 10px !important; }
.u-p-space-12 { padding: var(--space-12) !important; }
.u-p-space-3 { padding: var(--space-3) !important; }
.u-p-space-4 { padding: var(--space-4) !important; }
.u-p-space-4-space-5-0 { padding: var(--space-4) var(--space-5) 0 !important; }
.u-pb-8 { padding-bottom: 8px !important; }
.u-pb-space-3 { padding-bottom: var(--space-3) !important; }
.u-pl-18 { padding-left: 18px !important; }
.u-pl-1p1rem { padding-left: 1.1rem !important; }
.u-pt-space-3 { padding-top: var(--space-3) !important; }
.u-tl-fixed { table-layout: fixed !important; }
.u-va-2 { vertical-align: -2px !important; }
.u-va-middle { vertical-align: middle !important; }
.u-w-100 { width: 100px !important; }
.u-w-18 { width: 18px !important; }
.u-w-32 { width: 32px !important; }
.u-w-40pct { width: 40% !important; }