/* ============================================================================
 * Workforce Skills Platform — design system
 *
 * A dependency-free stylesheet: design tokens, base reset, component layer and
 * a compact utility layer. There is deliberately no build-time CSS pipeline, so
 * the app runs anywhere without PostCSS/Tailwind tooling.
 *
 * Stepwise: skills and careers at work. "Grow at work, one step at a time."
 *
 * Design direction: the platform helps employees of precision-engineering SMEs
 * grow into the work their roles need, so it is warm in voice and honest in
 * measurement, borrowing its visual vocabulary from the shop floor.
 *   * A skill level is shown against the level the role needs (see .gauge):
 *     the triangle marks the next step, the steps still to take are hatched
 *     like a section on an engineering drawing.
 *   * Status colours are go / near / no-go, as on a go/no-go gauge. They mean
 *     pass or fail and nothing else.
 *   * The tenant's brand colour marks only where a person acts: links, primary
 *     buttons, the current page.
 *   * Readouts sit in a ruled strip like a drawing title block, not in cards.
 *   * Type is Figtree: friendly and open, legible on a phone on the shop
 *     floor, with tabular figures for the readings. Sentence case throughout.
 *
 * Tenant branding overrides the --brand-* tokens at runtime (see tenantTheme in
 * src/views/layout.ts), so components only reference semantic tokens.
 * ========================================================================== */

/* ----------------------------------------------------------------- fonts -- */
/* Self-hosted (the Content-Security-Policy allows fonts from 'self' only). SIL OFL — see fonts/OFL.txt. */
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/figtree-400.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/figtree-500.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/figtree-600.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/figtree-700.woff2') format('woff2'); }

/* ---------------------------------------------------------------- tokens -- */
:root {
  /* Platform default brand: machinist's layout-fluid blue. Tenants override it. */
  --brand-50: #eef1fb;
  --brand-100: #d9e0f6;
  --brand-200: #b3c1ec;
  --brand-300: #8197dc;
  --brand-400: #4f6cc6;
  --brand-500: #2747a8;
  --brand-600: #203b8e;
  --brand-700: #1a3074;
  --brand-800: #14265b;
  --brand-900: #0f1c44;

  /* Steel and plate: the page is the machine bed, panels are the plates on it. */
  --surface: #ffffff;
  --surface-muted: #e9ecee;
  --surface-sunken: #f1f3f4;
  --border: #d5dade;
  --border-strong: #b4bcc2;

  /* Graphite ink and scribe-line grey. */
  --ink: #20272c;
  --ink-muted: #5a6670;
  --ink-subtle: #7d8891;
  --ink-inverse: #f4f6f7;

  /* Go / near / no-go. */
  --ready: #1d7a4e;
  --ready-soft: #e3f1e9;
  --developing: #9a6400;
  --developing-soft: #f8eedb;
  --gap: #b42318;
  --gap-soft: #fbe7e5;
  --info: #3b5568;
  --info-soft: #e8edf1;
  --ai: #5b4a9a;
  --ai-soft: #efedf7;

  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-pill: 999px;

  --shadow-sm: none;
  --shadow: 0 1px 2px rgb(32 39 44 / 0.08);
  --shadow-lg: 0 8px 24px rgb(32 39 44 / 0.14);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;

  /* Latin in Figtree; Chinese and Tamil fall through to the system's Noto faces. */
  --font-sans: 'Figtree', 'Noto Sans', 'Noto Sans SC', 'Microsoft YaHei', 'Noto Sans Tamil', 'Nirmala UI',
    system-ui, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --sidebar-width: 15rem;
  --topbar-height: 3.5rem;
}

/* ------------------------------------------------------------------ base -- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--surface-muted);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
}

/* A modular scale (ratio 1.2) from the 15px body. */
h1 { font-size: 1.75rem; letter-spacing: -0.02em; }
h2 { font-size: 1.3125rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }

p { margin: 0; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.15em; }

ul, ol { margin: 0; padding-left: 1.25rem; }

hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-5) 0; }

code, pre { font-family: var(--font-mono); font-size: 0.8125rem; }

pre {
  background: var(--surface-sunken);
  padding: var(--space-4);
  border-radius: var(--radius);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

::selection { background: var(--brand-100); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

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

/* A quiet light rail: the work, not the chrome, carries the page. */
.sidebar {
  width: var(--sidebar-width);
  flex: 0 0 var(--sidebar-width);
  background: var(--surface);
  color: var(--ink);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar__brand {
  padding: var(--space-5) var(--space-4) var(--space-4);
}

.sidebar__brand-name { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 600; line-height: 1.2; color: var(--ink); }

.sidebar__brand-meta { font-size: 0.75rem; color: var(--ink-subtle); margin-top: 2px; }

.sidebar__section-label {
  padding: var(--space-4) var(--space-4) var(--space-1);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-subtle);
}

.sidebar__nav { list-style: none; margin: 0; padding: 0 var(--space-2) var(--space-2); }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: 0.4375rem var(--space-3);
  color: var(--ink-muted);
  font-size: 0.9375rem;
  border-radius: var(--radius);
}

.sidebar__link:hover { background: var(--surface-sunken); color: var(--ink); text-decoration: none; }

.sidebar__link--active {
  background: var(--brand-50);
  color: var(--brand-700);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-500);
}

.sidebar__link-icon { flex: 0 0 1.125rem; text-align: center; opacity: 0.85; }

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

.topbar {
  min-height: var(--topbar-height);
  flex: 0 0 auto;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  position: sticky;
  top: 0;
  z-index: 20;
}

.topbar__title { font-size: 1rem; font-weight: 600; }
.topbar__subtitle { font-size: 0.75rem; color: var(--ink-subtle); }
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }

.content { padding: var(--space-5); flex: 1 1 auto; min-width: 0; }

.content--narrow { max-width: 56rem; margin: 0 auto; width: 100%; }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}

.page-header__description {
  color: var(--ink-muted);
  font-size: 0.875rem;
  margin-top: var(--space-1);
  max-width: 68ch;
}

.page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ----------------------------------------------------------------- panel -- */
/* Flat plates on the steel bed: a rule, a small radius, no shadow. */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.card__header {
  padding: var(--space-4) var(--space-5) var(--space-3);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* The header rule sits only above flush tables, where it frames the columns. */
.card__header + .card__body--flush { border-top: 1px solid var(--border); }
.card__header + .card__body:not(.card__body--flush) { padding-top: var(--space-2); }

.card__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; }
.card__subtitle { font-size: 0.875rem; color: var(--ink-muted); margin-top: 2px; }
.card__body { padding: var(--space-5); }
.card__body--flush { padding: 0; }

.card__footer {
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border);
  background: var(--surface-muted);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

/* ------------------------------------------------------------- readouts -- */
/* Readouts share one ruled strip, cell against cell, like a drawing's title
   block: the grid gap draws the rules, the strip's border closes the frame. */
.metric-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.metric {
  background: var(--surface);
  padding: var(--space-3) var(--space-4) var(--space-4);
  min-width: 0;
}

.metric__label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
}

.metric__value {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  margin-top: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.metric__hint { font-size: 0.8125rem; color: var(--ink-subtle); margin-top: var(--space-1); }

/* The dashboard's opening reading: a sentence, then the spread of every skill. */
.readout {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
}
.readout__main { padding: var(--space-5) var(--space-5) var(--space-4); min-width: 0; }

/* Department breakdown under the overall spread: same colours, smaller bars. */
.dept-spread { margin-top: var(--space-5); padding-top: var(--space-4); border-top: 1px solid var(--border); }
.dept-spread__title { font-size: 0.9375rem; margin-bottom: var(--space-2); }
.dept-spread__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.375rem; }
.dept-spread__row { display: grid; grid-template-columns: minmax(7rem, 11rem) 1fr 4.5rem; align-items: center; gap: var(--space-3); font-size: 0.875rem; }
.dept-spread__name { color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dept-spread__bar { display: flex; gap: 2px; height: 0.5rem; }
.dept-spread__value { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }

/* What is waiting on someone, beside the reading it affects. */
.attention {
  border-left: 1px solid var(--border);
  background: var(--surface-sunken);
  padding: var(--space-5) var(--space-4) var(--space-4);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.attention__title { font-size: 1rem; margin-bottom: var(--space-3); }
.attention__clear { color: var(--ink-muted); font-size: 0.875rem; }
.attention__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.attention__item {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  line-height: 1.3;
}
.attention__item:hover { border-color: var(--brand-400); text-decoration: none; }
.attention__count {
  font-size: 1.375rem;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.attention__label { font-size: 0.875rem; color: var(--ink-muted); }
.attention__item--gap .attention__count { color: var(--gap); }
.attention__item--developing .attention__count { color: var(--developing); }
.attention__item--ai .attention__count { color: var(--ai); }

@media (max-width: 1000px) {
  .readout { grid-template-columns: 1fr; }
  .attention { border-left: 0; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
}
.readout__headline { font-size: 2rem; line-height: 1.1; max-width: 26ch; text-wrap: balance; }
.readout__detail { margin-top: var(--space-2); color: var(--ink-muted); max-width: 64ch; }

.spread { display: flex; gap: 2px; height: 1rem; margin-top: var(--space-5); }
.spread__part { flex-basis: 0; min-width: 4px; }
.spread__part--ready { background: var(--ready); }
.spread__part--developing { background: var(--developing); }
.spread__part--gap { background: var(--gap); }
.spread__part--pending {
  background: repeating-linear-gradient(135deg, var(--border-strong) 0 1.5px, transparent 1.5px 5px);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.spread__legend {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: 0.875rem;
  color: var(--ink-muted);
}
.spread__legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.spread__legend strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.spread__key { width: 0.75rem; height: 0.75rem; display: inline-block; }

@media (max-width: 640px) {
  .readout__main { padding: var(--space-4); }
  .readout__headline { font-size: 1.5rem; }
}

.metric--ready .metric__value { color: var(--ready); }
.metric--gap .metric__value { color: var(--gap); }
.metric--developing .metric__value { color: var(--developing); }

/* --------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0.4688rem 0.875rem;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }

.btn--primary { background: var(--brand-600); color: #fff; }
.btn--primary:hover:not(:disabled) { background: var(--brand-700); }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--surface-sunken); }

.btn--ghost { background: transparent; color: var(--brand-600); }
.btn--ghost:hover:not(:disabled) { background: var(--brand-50); }

.btn--danger { background: var(--gap); color: #fff; }
.btn--danger:hover:not(:disabled) { background: #a53125; }

.btn--sm { padding: 0.3125rem 0.625rem; font-size: 0.8125rem; }
.btn--lg { padding: 0.625rem 1.25rem; font-size: 0.9375rem; }
.btn--block { width: 100%; }

/* ---------------------------------------------------------------- badges -- */
/* Inspection tags: square-cornered, with a status edge on the left. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.4375rem 0.0625rem 0.375rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid currentColor;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.45;
  white-space: nowrap;
}

.badge--neutral { background: var(--surface-sunken); color: var(--ink-muted); }
.badge--ready, .badge--success { background: var(--ready-soft); color: var(--ready); }
.badge--developing, .badge--warning { background: var(--developing-soft); color: var(--developing); }
.badge--gap, .badge--danger { background: var(--gap-soft); color: var(--gap); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--ai { background: var(--ai-soft); color: var(--ai); }
.badge--brand { background: var(--brand-50); color: var(--brand-700); }

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

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

.table th {
  text-align: left;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink-muted);
  padding: var(--space-2) var(--space-4);
  background: var(--surface-sunken);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.table td { padding: 0.625rem var(--space-4); border-bottom: 1px solid var(--border); vertical-align: middle; }

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-sunken); }
.table--compact th, .table--compact td { padding: var(--space-2) var(--space-3); }

.table__num { text-align: right; font-variant-numeric: tabular-nums; }

.table caption { caption-side: bottom; padding-top: var(--space-2); }

/* ----------------------------------------------------------------- forms -- */
.form-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 0.8125rem; font-weight: 500; color: var(--ink); }
.field__hint { font-size: 0.75rem; color: var(--ink-subtle); }
.field__error { font-size: 0.75rem; color: var(--gap); font-weight: 500; }

.input, .select, .textarea {
  width: 100%;
  padding: 0.4688rem 0.625rem;
  font-family: inherit;
  font-size: 0.875rem;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}

.input:focus, .select:focus, .textarea:focus {
  border-color: var(--brand-500);
  outline: 2px solid var(--brand-100);
  outline-offset: 0;
}

.input[aria-invalid='true'], .textarea[aria-invalid='true'], .select[aria-invalid='true'] {
  border-color: var(--gap);
}

.textarea { min-height: 6rem; resize: vertical; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2357707a' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.625rem center;
  padding-right: 2rem;
}

.checkbox { display: flex; align-items: flex-start; gap: var(--space-2); font-size: 0.875rem; }
.checkbox input { margin-top: 0.2rem; accent-color: var(--brand-600); }

.form-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; margin-top: var(--space-4); }

/* ---------------------------------------------------------------- alerts -- */
.alert {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.875rem;
}

.alert__icon { flex: 0 0 auto; line-height: 1.55; }

.alert--error { background: var(--gap-soft); border-color: #f0c4bd; color: #8c2a1f; }
.alert--success { background: var(--ready-soft); border-color: #b9e3d1; color: #10603f; }
.alert--warning { background: var(--developing-soft); border-color: #ecd6a6; color: #7a5210; }
.alert--info { background: var(--info-soft); border-color: #c3dcec; color: #1d4f6e; }
.alert--ai { background: var(--ai-soft); border-color: #d5c8ee; color: #4b3579; }

/* ------------------------------------------------------------ empty state -- */
.empty-state { text-align: center; padding: var(--space-7) var(--space-5); color: var(--ink-muted); }
.empty-state__icon { font-size: 1.75rem; opacity: 0.6; }
.empty-state__title { margin-top: var(--space-3); font-weight: 600; color: var(--ink); }
.empty-state__text { font-size: 0.875rem; margin-top: var(--space-1); max-width: 52ch; margin-left: auto; margin-right: auto; }
.empty-state__actions { margin-top: var(--space-4); display: flex; justify-content: center; gap: var(--space-2); flex-wrap: wrap; }

/* ------------------------------------------------------------ progress/gap -- */
.progress { height: 0.375rem; background: var(--surface-sunken); border-radius: 1px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.progress__bar { height: 100%; background: var(--brand-500); }
.progress__bar--ready { background: var(--ready); }
.progress__bar--developing { background: var(--developing); }
.progress__bar--gap { background: var(--gap); }

/* The gauge: a level read against its required level, like a dimension against
   its tolerance. Filled cells are the reading; the datum triangle marks the
   requirement; a shortfall is hatched like a section on a drawing. */
.gauge { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.gauge__scale { display: inline-grid; grid-template-columns: repeat(5, 0.875rem); gap: 2px; padding-bottom: 6px; }
.gauge__cell {
  position: relative;
  height: 0.625rem;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.gauge__cell--fill { background: var(--ink-muted); box-shadow: none; }
.gauge--met .gauge__cell--fill { background: var(--ready); }
.gauge__cell--short {
  --hatch: var(--gap);
  background: repeating-linear-gradient(135deg, var(--hatch) 0 1.5px, transparent 1.5px 4px);
  box-shadow: inset 0 0 0 1px var(--hatch);
}
.gauge--near .gauge__cell--short { --hatch: var(--developing); }
.gauge__cell--datum::after {
  content: '';
  position: absolute;
  right: -5px;
  bottom: -7px;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-bottom: 6px solid var(--ink);
}
.gauge__value { font-size: 0.875rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.gauge__of { font-weight: 400; color: var(--ink-subtle); }
.gauge--short .gauge__value { color: var(--gap); }
.gauge--near .gauge__value { color: var(--developing); }

/* ---------------------------------------------------------------- heatmap -- */
.heatmap { display: grid; gap: 3px; font-size: 0.75rem; min-width: 32rem; }

.heatmap__cell {
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  white-space: nowrap;
}

.heatmap__cell--ready { background: var(--ready-soft); color: var(--ready); }
.heatmap__cell--developing { background: var(--developing-soft); color: var(--developing); }
.heatmap__cell--gap { background: var(--gap-soft); color: var(--gap); }
.heatmap__cell--none { background: var(--surface-sunken); color: var(--ink-subtle); }
.heatmap__cell--label { background: transparent; color: var(--ink); text-align: left; font-weight: 500; white-space: normal; }
.heatmap__cell--head { background: transparent; color: var(--ink-muted); font-weight: 600; text-align: left; white-space: normal; }

/* ------------------------------------------------------------------ tabs -- */
.tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); overflow-x: auto; }

.tabs__tab {
  padding: 0.5rem 0.875rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-muted);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.tabs__tab:hover { color: var(--ink); text-decoration: none; }
.tabs__tab--active { color: var(--brand-700); border-bottom-color: var(--brand-600); }

/* --------------------------------------------------------------- AI panel -- */
.ai-panel {
  border: 1px solid #d5c8ee;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border-left: 3px solid var(--ai);
}

.ai-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid #e2d8f3;
  flex-wrap: wrap;
}

.ai-panel__title { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; font-size: 0.9375rem; color: #4b3579; }

.ai-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  font-size: 0.75rem;
  color: var(--ink-muted);
  padding: var(--space-2) var(--space-4);
  background: rgb(107 79 168 / 0.05);
  border-top: 1px solid #e2d8f3;
}

.ai-provenance__item { display: flex; gap: 0.25rem; }
.ai-provenance__label { color: var(--ink-subtle); }

.ai-draft { border-left: 3px solid var(--ai); padding-left: var(--space-4); }

.ai-citation {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.0625rem 0.4375rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  font-size: 0.75rem;
  color: var(--ink-muted);
}

.ai-answer { white-space: pre-wrap; line-height: 1.65; }

/* ----------------------------------------------------------- chat / copilot */
.chat { display: flex; flex-direction: column; gap: var(--space-4); }

.chat__message { display: flex; gap: var(--space-3); }
.chat__message--user { flex-direction: row-reverse; }

.chat__bubble {
  max-width: 46rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.9375rem;
}

.chat__message--user .chat__bubble { background: var(--brand-50); border-color: var(--brand-200); }

.chat__avatar {
  flex: 0 0 2rem;
  height: 2rem;
  width: 2rem;
  border-radius: var(--radius-pill);
  display: grid;
  place-items: center;
  font-size: 0.8125rem;
  font-weight: 600;
  background: var(--brand-100);
  color: var(--brand-700);
}

.chat__message--assistant .chat__avatar { background: var(--ai-soft); color: var(--ai); }

/* -------------------------------------------------------------- comparison */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }

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

.compare__column { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.compare__heading {
  padding: var(--space-2) var(--space-4);
  background: var(--surface-sunken);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.compare__heading--to-be { background: var(--brand-50); color: var(--brand-700); }

/* ------------------------------------------------------------------ misc -- */
.stack { display: flex; flex-direction: column; }
.stack-1 { gap: var(--space-1); }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-5 { gap: var(--space-5); }
.stack-6 { gap: var(--space-6); }

.row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.row--end { justify-content: flex-end; }
.row--top { align-items: flex-start; }

.grid-2 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.grid-3 { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

.grid-side {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: start;
}

@media (max-width: 1000px) {
  .grid-side { grid-template-columns: minmax(0, 1fr); }
}

.text-muted { color: var(--ink-muted); }
.text-subtle { color: var(--ink-subtle); }
.text-sm { font-size: 0.8125rem; }
.text-xs { font-size: 0.75rem; }
.text-lg { font-size: 1.0625rem; }
.text-bold { font-weight: 600; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-mono { font-family: var(--font-mono); }
.text-gap { color: var(--gap); }
.text-ready { color: var(--ready); }
.text-developing { color: var(--developing); }
.uppercase { font-weight: 500; }
.nowrap { white-space: nowrap; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.w-full { width: 100%; }
.flex-1 { flex: 1 1 auto; min-width: 0; }
.spacer { flex: 1 1 auto; }

.divider { border-top: 1px solid var(--border); margin: var(--space-4) 0; }

.list-plain { list-style: none; padding: 0; margin: 0; }
.list-plain > li { padding: var(--space-2) 0; border-bottom: 1px solid var(--border); }
.list-plain > li:last-child { border-bottom: 0; }

.definition-list {
  display: grid;
  grid-template-columns: minmax(8rem, auto) 1fr;
  gap: var(--space-2) var(--space-4);
  font-size: 0.875rem;
}

.definition-list dt { color: var(--ink-muted); }
.definition-list dd { margin: 0; }

.section-label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--ink-subtle);
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------------- sign-in -- */
/* The product introduces itself on the steel; the form sits on its own plate. */
.auth-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(22rem, 30rem);
}
.auth-intro {
  padding: var(--space-7) clamp(1.5rem, 6vw, 5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-intro__inner { width: 100%; max-width: 34rem; display: flex; flex-direction: column; gap: var(--space-4); }
.auth-intro__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--brand-600);
}
.auth-intro__line {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  max-width: 14ch;
  text-wrap: balance;
}
.auth-intro__detail { color: var(--ink-muted); max-width: 44ch; font-size: 1rem; }
.auth-intro__descriptor {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-strong);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink-muted);
}

/* A worked example of the gauge, so people learn to read it before they sign in. */
.specimen {
  margin: var(--space-4) 0 0;
  max-width: 26rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}
.specimen__caption { font-size: 0.875rem; font-weight: 600; margin-bottom: var(--space-3); }
.specimen__rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.specimen__rows li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: 0.9375rem; }
.specimen__key { margin-top: var(--space-3); font-size: 0.8125rem; color: var(--ink-subtle); }
.auth-panel {
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: var(--space-7) var(--space-6);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.auth-panel--wide { grid-column: 1 / -1; border-left: 0; }
.auth-panel__title { font-size: 1.5rem; margin-bottom: var(--space-4); }
.auth-panel .card { border: 0; background: transparent; }
.auth-panel .card__body { padding: 0; }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-intro { padding: var(--space-6) var(--space-4) var(--space-5); gap: var(--space-2); }
  .auth-intro__line { font-size: 2rem; }
  .specimen { display: none; }
  .auth-panel { border-left: 0; padding: var(--space-5) var(--space-4) var(--space-6); justify-content: flex-start; }
}

/* The platform mark at the foot of the navigation rail. */
.sidebar__footer {
  margin-top: auto;
  padding: var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink-subtle);
}

/* "Sign in with company account" separator on the sign-in card. */
.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: 0.75rem;
  color: var(--ink-subtle);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--border); }

/* Metric tiles inside a card sit two-up even in a narrow side column. */
.card .metric-grid { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); gap: var(--space-3); }

/* Rendered markdown (module bodies, AI drafts, copilot answers). */
.rich-text { white-space: normal; line-height: 1.6; }
.rich-text > * + * { margin-top: var(--space-2); }
.rich-text h3, .rich-text h4 { font-size: 1.0625rem; margin-top: var(--space-5); }
.rich-text h5 {
  font-size: 1rem;
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}
.rich-text h6 { font-size: 0.9375rem; margin-top: var(--space-4); }
.rich-text > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rich-text ul, .rich-text ol { margin: 0; padding-left: 1.25rem; }
.rich-text li + li { margin-top: var(--space-1); }

/* -------------------------------------------------------------- responsive */
.sidebar__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.sidebar__toggle { display: none; }

/* Grid and flex children must be allowed to shrink, or a wide table pushes the page sideways. */
.grid-2 > *, .grid-3 > *, .grid-side > *, .card, .card__body { min-width: 0; }
.definition-list dd { overflow-wrap: anywhere; }

@media (max-width: 860px) {
  .app-shell { flex-direction: column; }

  .sidebar {
    width: 100%;
    flex: 0 0 auto;
    height: auto;
    position: sticky;
    top: 0;
    z-index: 40;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
  }

  .sidebar__head { padding: var(--space-3) var(--space-4); border-bottom: 0; }
  .sidebar__brand { padding: 0; border-bottom: 0; min-width: 0; }
  .sidebar__brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .sidebar__toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    min-height: 2.5rem;
    padding: 0 var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
    font: inherit;
    font-size: 0.875rem;
    cursor: pointer;
  }

  /* With JavaScript the menu is a drawer; without it the full list stays visible. */
  .js .sidebar__menu { display: none; }
  .js .sidebar--open .sidebar__menu {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100vh - 4rem);
    overflow-y: auto;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding-bottom: var(--space-3);
  }
  .sidebar__footer { display: none; }

  .sidebar__link { min-height: 2.75rem; }

  .content { padding: var(--space-4); }
  .topbar { padding: var(--space-3) var(--space-4); }
  .topbar__actions .text-right { display: none; }

  .page-header { flex-direction: column; align-items: stretch; gap: var(--space-3); }
}

/* Tables become stacked cards on phones: one record per card, each value labelled. */
@media (max-width: 640px) {
  .table--stacked thead { display: none; }
  .table--stacked, .table--stacked tbody, .table--stacked tr, .table--stacked td { display: block; width: 100%; }
  .table--stacked tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); }
  .table--stacked tbody tr:last-child { border-bottom: 0; }
  .table--stacked td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-1) 0;
    border: 0;
    text-align: right;
    overflow-wrap: anywhere;
  }
  .table--stacked td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    max-width: 45%;
    text-align: left;
    font-size: 0.75rem;
    color: var(--ink-muted);
  }
  /* The first cell names the record, so it reads as the card's heading. */
  .table--stacked td:first-child { display: block; text-align: left; font-weight: 600; padding-bottom: var(--space-2); }
  .table--stacked td:first-child::before { content: none; }
  .table--stacked td[data-label=""]::before { content: none; }
  .table--stacked td[data-label=""] { justify-content: flex-end; }
  .table--stacked td:empty { display: none; }

  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric__value { font-size: 1.5rem; }
}

/* ------------------------------------------------------------------ print -- */
@media print {
  .no-print, .sidebar, .topbar__actions, .tabs { display: none !important; }

  .app-shell { display: block; }
  .card { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
  .content { padding: 0; }
  a { color: var(--ink); text-decoration: none; }
}