/* ==========================================================================
   Maturity Diagnoses — stylesheet

   Fluent-inspired: rounded cards, soft shadows, a restrained accent, and
   generous spacing. Both themes are driven from the custom properties in
   :root, so nothing below hard-codes a theme colour.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
  --surface: #ffffff;
  --surface-alt: #fafafa;
  --window: #f3f3f3;
  --header: #ffffff;

  --text: #1b1b1b;
  --text-secondary: #616161;
  --text-disabled: #a0a0a0;

  --border: #e1e1e1;
  --border-strong: #c7c7c7;
  --divider: #ededed;
  --grid: #e6e6e6;

  /* Primary colour, drawn from the KAMMS mark's deep corporate blue. */
  --accent: #1c4e8f;
  --accent-hover: #163f74;
  --accent-pressed: #0f2c52;
  --accent-subtle: #e8f0f9;

  /* Secondary brand colour, the orange of the mark's swoosh. Used for
     emphasis only — never for large fills, where it would compete with the
     maturity-band palette. */
  --brand-orange: #e8621a;

  --success: #107c10;
  --warning: #e26b0a;
  --danger: #c00000;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .06), 0 2px 8px rgba(0, 0, 0, .05);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .07), 0 8px 24px rgba(0, 0, 0, .07);

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  --font: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system,
          "Inter", sans-serif;
  --mono: "Cascadia Mono", Consolas, "Courier New", monospace;

  --header-height: 68px;
  --footer-height: 68px;
}

:root[data-theme="dark"] {
  --surface: #2b2b2b;
  --surface-alt: #262626;
  --window: #1f1f1f;
  --header: #2b2b2b;

  --text: #f5f5f5;
  --text-secondary: #b8b8b8;
  --text-disabled: #6e6e6e;

  --border: #3d3d3d;
  --border-strong: #4f4f4f;
  --divider: #383838;
  --grid: #3d3d3d;

  --accent: #5aa9ee;
  --accent-hover: #78bbf4;
  --accent-pressed: #3d8ed4;
  --accent-subtle: #1b3350;
  --brand-orange: #f4802f;

  --success: #54b054;
  --warning: #f0932b;
  --danger: #e05252;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 2px 8px rgba(0, 0, 0, .28);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

html, body {
  margin: 0;
  padding: 0;
}

/*
 * App-shell layout. The bar, the screen and the bottom navigation are the
 * three rows of a full-height flex column, so the screen itself can own its
 * scrolling. Without this the whole document scrolls and the area navigation
 * disappears off the top while working through a section.
 */
/*
 * `height` rather than `min-height`: the body must be exactly the viewport so
 * the middle row can be the only thing that scrolls. With `min-height` the
 * body grows to fit its content, the document scrolls instead, and the area
 * navigation slides off the top while working through a section.
 */
body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;   /* accounts for mobile browser chrome */
  overflow: hidden;
}

#app {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* Management screens scroll normally... */
#app.screen-home,
#app.screen-saved,
#app.screen-backup,
#app.screen-setup { overflow-y: auto; }

/* ...while the assessment and dashboard screens scroll internally, keeping
   their headers and area navigation pinned. */
#app.screen-assessment,
#app.screen-dashboard { overflow: hidden; }

/* The canvas colour is set on <html> as well as <body>: it is what paints
   the overscroll area, so without it a dark-theme page flashes white when
   scrolled past its bounds. */
html {
  background: var(--window);
  color-scheme: light;
}

:root[data-theme="dark"] { color-scheme: dark; }

body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
  background: var(--window);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { list-style: none; padding: 0; }

/* An author-defined `display` (e.g. `.busy { display: grid }`) outranks the
   browser's `[hidden] { display: none }`, which would leave overlays on
   screen and swallowing clicks. Restate it with !important so the `hidden`
   attribute always wins. */
[hidden] { display: none !important; }

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

mark {
  background: var(--accent-subtle);
  color: var(--accent);
  border-radius: 3px;
  padding: 0 2px;
}

.muted { color: var(--text-secondary); }

.caption {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.page-title { font-size: 28px; font-weight: 600; letter-spacing: -.3px; }
.section-title { font-size: 17px; font-weight: 600; }
.required { color: var(--danger); }
.error-text { color: var(--danger); font-size: 13px; margin-top: var(--space-sm); }

/* --------------------------------------------------------------------------
   App chrome
   -------------------------------------------------------------------------- */

.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 56px;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Brand lockup: small mark plus the application and owner names, present on
   every screen. */
.app-bar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-md);
  padding: 2px 6px 2px 2px;
  min-width: 0;
}

.app-bar-brand:hover { background: var(--surface-alt); }

.app-bar-titles {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  min-width: 0;
}

.app-bar-app {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -.1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-bar-owner {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: .3px;
  white-space: nowrap;
}

.app-bar-spacer { flex: 1; }

/* ---- Logo sizes -------------------------------------------------------- */

.brand-logo {
  display: block;
  object-fit: contain;
  flex: none;
}

/* Header mark, on every screen. */
.logo-bar { width: 34px; height: 34px; }

/* Large Home-screen mark. */
.logo-hero {
  width: min(200px, 44vw);
  height: auto;
  margin: 0 auto var(--space-sm);
}

/* Inline mark used on the dashboard summary card. */
.logo-small { width: 40px; height: 40px; }

.saved-badge {
  font-size: 12px;
  color: var(--success);
  opacity: 0;
  transition: opacity .18s ease;
}
.saved-badge.is-visible { opacity: 1; }

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

.page {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  min-width: 0;
}

.page-narrow { max-width: 1180px; margin: 0 auto; width: 100%; }
.page-form { max-width: 780px; margin: 0 auto; width: 100%; }

.page-full {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.page-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* Flex items default to min-width:auto, which lets a wide table push the
     card — and the page — wider than the viewport. */
  min-width: 0;
}

.card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--divider);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  font: inherit;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 9px 18px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .06s ease;
  white-space: nowrap;
}

.btn:hover:not(:disabled) { background: var(--surface-alt); border-color: var(--accent); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { color: var(--text-disabled); background: var(--surface-alt); cursor: not-allowed; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 600;
}
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled { background: var(--border); border-color: var(--border); color: var(--text-disabled); }

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

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

.btn-lg { padding: 11px 24px; font-size: 15px; }
.btn-sm { padding: 5px 11px; font-size: 13px; }

.btn-icon {
  font: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  padding: 4px 9px;
  line-height: 1;
}
.btn-icon:hover { background: var(--surface-alt); color: var(--text); }

.button-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }

.form-actions {
  display: flex;
  justify-content: space-between;
  gap: var(--space-sm);
}

/* --------------------------------------------------------------------------
   Inputs
   -------------------------------------------------------------------------- */

.input {
  font: inherit;
  width: 100%;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 9px 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-subtle);
}

.input::placeholder { color: var(--text-disabled); }
.input.is-invalid { border-color: var(--danger); }

.textarea { resize: vertical; min-height: 58px; font-family: inherit; }
.input-date { max-width: 220px; }
.input-search { max-width: 280px; }

.field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: calc(var(--space-xs) * -1);
}

/* Dark theme: make the native date/search affordances legible. */
:root[data-theme="dark"] .input::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] .input::-webkit-search-cancel-button {
  filter: invert(1) opacity(.7);
}

/* --------------------------------------------------------------------------
   Radio groups
   -------------------------------------------------------------------------- */

.control-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.control-group legend { padding: 0 0 var(--space-xs); }

.radio-row { display: flex; align-items: center; gap: var(--space-xs); flex-wrap: wrap; }

.radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  user-select: none;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.radio:hover { border-color: var(--accent); }

.radio input {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  width: 14px;
  height: 14px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  cursor: pointer;
  transition: border-width .12s ease, border-color .12s ease;
}

.radio input:checked { border-width: 4px; border-color: var(--accent); }

.radio:has(input:checked) {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.radio:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   Home — branding and one dominant call to action
   -------------------------------------------------------------------------- */

.home-page {
  min-height: calc(100vh - 56px - 72px);
  display: grid;
  place-items: center;
  padding: var(--space-xl) var(--space-md);
}

.home-hero {
  text-align: center;
  max-width: 640px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.home-title {
  font-size: clamp(26px, 4.2vw, 40px);
  font-weight: 700;
  letter-spacing: -.6px;
  line-height: 1.15;
  margin-top: var(--space-xs);
}

.home-owner {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .6px;
  color: var(--accent);
  text-transform: uppercase;
}

.home-subtitle { max-width: 46ch; margin-bottom: var(--space-md); }
.home-resume { margin-top: var(--space-md); font-size: 13px; }

/* The primary action: deliberately the largest thing on the screen. */
.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 600;
  padding: 20px 46px;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(28, 78, 143, .28);
  transition: transform .12s ease, box-shadow .18s ease, background .15s ease;
}

.btn-hero:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(28, 78, 143, .34);
}

.btn-hero:active:not(:disabled) { transform: translateY(0); }

.btn-hero-plus { font-size: 26px; line-height: 1; font-weight: 400; }

:root[data-theme="dark"] .btn-hero { box-shadow: 0 6px 22px rgba(0, 0, 0, .5); }

/* --------------------------------------------------------------------------
   Bottom navigation — secondary destinations
   -------------------------------------------------------------------------- */

.bottom-nav {
  flex: none;
  z-index: 40;
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

.bottom-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Grow to a comfortable size but shrink rather than overflow. */
  flex: 0 1 210px;
  min-width: 0;
  justify-content: center;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bottom-nav-btn.is-active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  color: var(--accent);
  font-weight: 600;
}

.bottom-nav-icon { font-size: 15px; }

/* --------------------------------------------------------------------------
   Saved assessments
   -------------------------------------------------------------------------- */

.saved-table td { vertical-align: middle; }

/* Marks a record carried over from the previous questionnaire version. */
.legacy-flag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--warning);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Sector chip
   -------------------------------------------------------------------------- */

.sector-chip {
  display: inline-block;
  padding: 2px 11px;
  border-radius: 999px;
  background: var(--accent-subtle);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Definition lists (backup stats, dashboard summary)
   -------------------------------------------------------------------------- */

.stat-list, .summary-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-md);
  margin: 0;
}

.stat-list dt, .summary-fields dt {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 2px;
}

.stat-list dd, .summary-fields dd {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}

.card-danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }

/* --------------------------------------------------------------------------
   Dashboard summary card
   -------------------------------------------------------------------------- */

.summary-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: center;
}

.summary-brand {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-right: var(--space-lg);
  border-right: 1px solid var(--divider);
}

.summary-app { font-size: 14px; font-weight: 700; line-height: 1.2; max-width: 22ch; }
.summary-owner { font-size: 11px; letter-spacing: .3px; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   Inline banner
   -------------------------------------------------------------------------- */

.banner {
  padding: 11px var(--space-xl);
  font-size: 13px;
  border-bottom: 1px solid var(--border);
}

.banner-warn {
  background: color-mix(in srgb, var(--warning) 14%, var(--surface));
  color: var(--text);
  border-left: 4px solid var(--warning);
}

.field-note { font-size: 12px; margin-top: -6px; }

.mini-progress { display: flex; align-items: center; gap: var(--space-sm); justify-content: center; }

.mini-progress-track {
  width: 74px;
  height: 6px;
  border-radius: 3px;
  background: var(--divider);
  overflow: hidden;
}

.mini-progress-fill { height: 100%; background: var(--accent); border-radius: 3px; }

.cell-actions { text-align: right; white-space: nowrap; }
.cell-actions .btn { margin-left: var(--space-xs); }

.empty-state { text-align: center; padding: var(--space-xl) var(--space-md); }
.empty-icon { font-size: 34px; margin-bottom: var(--space-sm); }

/* --------------------------------------------------------------------------
   Team roster
   -------------------------------------------------------------------------- */

.member-entry {
  display: grid;
  grid-template-columns: 3fr 2fr auto;
  gap: var(--space-sm);
}

.member-list { display: flex; flex-direction: column; gap: var(--space-xs); }

.member-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 8px 10px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.member-name { font-weight: 500; }
.member-role { color: var(--text-secondary); font-size: 13px; }
.member-item .btn-icon { margin-left: auto; }

/* --------------------------------------------------------------------------
   Assessment header
   -------------------------------------------------------------------------- */

.app-header {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: var(--space-md) var(--space-xl);
  background: var(--header);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}

.header-field { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.header-field-right { text-align: right; }
.header-spacer { flex: 1; }

.header-value {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 26ch;
}

.header-metric { font-size: 24px; font-weight: 700; color: var(--accent); line-height: 1.1; }
.header-actions { display: flex; gap: var(--space-sm); }

/* --------------------------------------------------------------------------
   Area navigation
   -------------------------------------------------------------------------- */

.area-nav {
  padding: var(--space-md) var(--space-xl);
  background: var(--surface-alt);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.area-pills { display: grid; grid-template-columns: repeat(10, 1fr); gap: var(--space-sm); }

.area-pill {
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  min-width: 0;
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}

.area-pill:hover { border-color: var(--accent); color: var(--text); }

.area-pill.is-current {
  background: var(--accent-subtle);
  border-color: var(--accent);
  border-width: 2px;
  padding: 6px 8px;
  color: var(--accent);
}

.pill-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.pill-number { font-size: 15px; font-weight: 700; }
.pill-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

.pill-name {
  font-size: 10.5px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.progress-row { display: flex; align-items: center; gap: var(--space-md); }

.progress-track {
  flex: 1;
  height: 10px;
  border-radius: 5px;
  background: var(--divider);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: 5px;
  transition: width .3s ease;
}

/* --------------------------------------------------------------------------
   Question area
   -------------------------------------------------------------------------- */

.area-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.area-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--divider);
  flex-wrap: wrap;
}

.area-header-right { display: flex; align-items: center; gap: var(--space-md); }

.question-list { display: flex; flex-direction: column; gap: var(--space-md); }

.question-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.question-card.is-answered { border-left-color: var(--success); }
.question-card:hover { box-shadow: var(--shadow-md); }

.question-head { display: flex; align-items: flex-start; gap: var(--space-sm); }

.question-number {
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
  margin-top: 1px;
}

.question-text-block { flex: 1; min-width: 0; }
.question-text { font-size: 15px; font-weight: 600; line-height: 1.35; }

/*
 * The explanation from the "Questions and Explanation" worksheet. It sits
 * directly beneath the question and is always visible — no click, no tooltip,
 * no pop-up. `pre-line` preserves the line breaks the workbook uses to put
 * financial ratio formulas on their own line.
 */
.question-explanation {
  margin-top: 3px;
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-line;
  max-width: 88ch;
}

.question-controls {
  display: flex;
  align-items: flex-end;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.btn-details { margin-left: auto; }
.dot-mark { color: var(--accent); }

.question-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--divider);
}

.detail-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.detail-wide { grid-column: span 2; }

.area-comment-card { gap: var(--space-sm); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.app-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: var(--surface);
  border-top: 1px solid var(--border);
}

/* Let the navigation buttons shrink rather than push the page wider than
   the viewport on a narrow screen. */
.app-footer .btn { min-width: 0; flex-shrink: 1; }

.footer-note { flex: 1; }

/* --------------------------------------------------------------------------
   Badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.badge-sm { padding: 2px 10px; font-size: 11px; }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */

/* Wide tables scroll inside their own container so the page never does. */
.table-scroll { overflow-x: auto; max-width: 100%; min-width: 0; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-alt);
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  position: sticky;
  top: 0;
}

.data-table td { padding: 9px 12px; border-bottom: 1px solid var(--divider); }
.data-table tbody tr:nth-child(even) { background: var(--surface-alt); }
.data-table tbody tr:hover { background: var(--accent-subtle); }

.data-table tfoot td {
  background: var(--accent-subtle);
  font-weight: 700;
  border-top: 2px solid var(--border);
  border-bottom: none;
}

.home-table tbody tr { cursor: pointer; }

.cell-center { text-align: center; }
.cell-strong { font-weight: 600; }
.cell-muted { color: var(--text-secondary); }
.cell-bar { font-family: var(--mono); letter-spacing: 1px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Dashboard
   -------------------------------------------------------------------------- */

.dashboard-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.hero-card {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.3fr) minmax(180px, .8fr);
  gap: var(--space-lg);
  align-items: center;
}

.hero-score { display: flex; flex-direction: column; gap: var(--space-xs); align-items: flex-start; }
.hero-value { font-size: 52px; font-weight: 700; line-height: 1; letter-spacing: -1.5px; }
.hero-description { font-size: 13px; }
.hero-gauge { min-width: 0; }
.hero-legend { display: flex; flex-direction: column; gap: var(--space-xs); }

.legend-list { display: flex; flex-direction: column; gap: 3px; font-size: 12px; font-weight: 600; }

.metric-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: var(--space-md);
}

.metric-card { gap: var(--space-xs); }
.metric-value { font-size: 32px; font-weight: 700; line-height: 1.1; color: var(--accent); }
.metric-footnote { font-size: 12px; }

.chart-row { display: grid; grid-template-columns: 4fr 5fr; gap: var(--space-md); }
.split-row { display: grid; grid-template-columns: 5fr 4fr; gap: var(--space-md); }

.chart-card { gap: var(--space-sm); }
.chart-holder { width: 100%; min-width: 0; }
.chart-svg { display: block; width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Toast, busy overlay, loading
   -------------------------------------------------------------------------- */

.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 16px);
  z-index: 200;
  max-width: min(560px, calc(100vw - 48px));
  padding: 11px 18px;
  border-radius: var(--radius-lg);
  background: #1b1b1b;
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast-success { background: var(--success); }
.toast-warn { background: var(--warning); }
.toast-error { background: var(--danger); }

.busy {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  gap: var(--space-md);
  background: color-mix(in srgb, var(--window) 82%, transparent);
  backdrop-filter: blur(2px);
}

.busy-inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-md); }

.spinner {
  width: 38px;
  height: 38px;
  border: 4px solid var(--divider);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.busy-text { font-size: 13px; color: var(--text-secondary); }

.loading {
  display: grid;
  place-items: center;
  min-height: 60vh;
  color: var(--text-secondary);
}

.noscript {
  max-width: 560px;
  margin: 15vh auto;
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1180px) {
  .chart-row, .split-row { grid-template-columns: 1fr; }
  .hero-card { grid-template-columns: 1fr 1fr; }
  .hero-legend { grid-column: span 2; }
  .question-details { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .page, .area-body, .dashboard-body { padding: var(--space-md); }
  .app-header, .area-nav, .app-footer { padding: var(--space-md); }
  .area-pills { grid-template-columns: repeat(5, 1fr); }
  .hero-card { grid-template-columns: 1fr; }
  .hero-legend { grid-column: auto; }
  .header-spacer { display: none; }
  .app-header { gap: var(--space-md); }
  .question-controls { gap: var(--space-md); }
  .btn-details { margin-left: 0; }
  .footer-note { display: none; }
}

@media (max-width: 620px) {
  .area-pills { grid-template-columns: repeat(3, 1fr); }
  .member-entry { grid-template-columns: 1fr; }
  .question-details { grid-template-columns: 1fr; }
  .detail-wide { grid-column: auto; }
  .page-title { font-size: 22px; }
  .hero-value { font-size: 40px; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions .btn { width: 100%; }

  /* Stack the secondary destinations so both labels stay readable. */
  .bottom-nav { flex-direction: column; gap: var(--space-sm); padding: var(--space-sm); }
  .bottom-nav-btn { flex: none; width: 100%; }

  /* The owner name alone carries the branding when space is tight. */
  .app-bar-app { font-size: 12.5px; }
  .app-bar-owner { font-size: 10px; }
  .logo-bar { width: 28px; height: 28px; }

  .btn-hero { font-size: 17px; padding: 16px 30px; width: 100%; }
  .summary-card { grid-template-columns: 1fr; }
  .summary-brand { border-right: none; border-bottom: 1px solid var(--divider);
                   padding: 0 0 var(--space-md); }

  /* Drop the "Area n of 10" caption and shrink the buttons so Previous and
     Next still fit side by side. */
  #area-indicator { display: none; }
  .app-footer .btn-lg { padding: 10px 14px; font-size: 14px; }
  .cell-actions .btn { margin: 2px 0 2px var(--space-xs); }
}

/* --------------------------------------------------------------------------
   Print — the dashboard is the useful thing to print
   -------------------------------------------------------------------------- */

@media print {
  .app-bar, .app-footer, .area-nav, .header-actions,
  .toast, .busy { display: none !important; }

  body, .dashboard-body { background: #fff; overflow: visible; }
  .page-full { min-height: auto; }
  .dashboard-body { padding: 0; overflow: visible; }
  .card { box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .chart-row, .split-row { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Installable app (PWA) and phones
   ========================================================================== */

/* ---- Update banner: a newer version has downloaded ---------------------- */

.update-banner {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  padding: 8px var(--space-md);
  background: var(--accent-subtle);
  color: var(--text);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
  font-size: 13px;
  font-weight: 500;
}

/* ---- iPhone / iPad install instructions -------------------------------- */

.install-dialog {
  width: min(420px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-md);
  padding: var(--space-lg);
}

.install-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.install-dialog .section-title { margin-bottom: var(--space-md); }
.install-dialog .button-row { justify-content: flex-end; margin-top: var(--space-md); }

.install-steps {
  list-style: decimal;
  padding-left: 1.3em;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: var(--space-md);
}

/* ---- Backup screen: how the app is running ----------------------------- */

.status-list dd { font-weight: 500; }

/* ---- Notched phones ----------------------------------------------------
   With viewport-fit=cover the page reaches under the notch and the home
   indicator; pad the edge bars by the unsafe areas so nothing hides there. */

.app-bar {
  padding-top: max(var(--space-sm), env(safe-area-inset-top));
  padding-left: max(var(--space-md), env(safe-area-inset-left));
  padding-right: max(var(--space-md), env(safe-area-inset-right));
}

.bottom-nav,
.app-footer {
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom));
}

/* ---- Touch screens ----------------------------------------------------- */

@media (pointer: coarse) {
  /* 44px is the smallest target a finger hits reliably. */
  .btn, .area-pill { min-height: 44px; }
  .btn-sm { min-height: 40px; }
  .btn-icon { min-width: 44px; min-height: 44px; }
  .radio { min-height: 44px; padding: 8px 14px; }

  /* iOS Safari zooms into any field smaller than 16px when it gains focus. */
  .input, select.input, textarea.input { font-size: 16px; }

  button, a, .radio { -webkit-tap-highlight-color: transparent; }
}

/* ---- Phones ------------------------------------------------------------ */

@media (max-width: 620px) {
  /* Ten area pills as one sideways-swipeable strip, not four rows of three.
     app.js keeps the current area centred in it. */
  .area-pills {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }

  .area-pills::-webkit-scrollbar { display: none; }

  .area-pill {
    flex: 0 0 auto;
    width: 112px;
    scroll-snap-align: center;
  }

  /* Give the questions the room. The header collapses to one row: company,
     sector and the primary action. Consultant and date stay on the dashboard
     summary; completion is already shown by the progress bar beneath; and
     the logo in the top bar is the way Home, so the Home button goes. */
  .header-field-optional,
  .app-header .header-field-right,
  .header-actions .btn-ghost { display: none; }

  .app-header {
    flex-wrap: nowrap;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .app-header .header-field { min-width: 0; }
  .app-header .header-field:first-child { flex: 1 1 auto; }
  .app-header .header-value { max-width: none; }
  .header-actions { flex: none; }

  .area-nav { padding: var(--space-sm) var(--space-md); }

  /* The saved tick would otherwise hold its width while invisible. */
  .saved-badge { display: none; }
  .saved-badge.is-visible { display: inline; }

  .update-banner { flex-wrap: wrap; text-align: center; }
}

@media (max-width: 420px) {
  /* Icon-only install button on the narrowest phones. */
  #install-button .btn-label { display: none; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}