@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700;800;900&family=Space+Mono:wght@400;700&display=swap");

/* Asen Pro is a licensed font (not on Google Fonts) - self-hosted from Assets/fonts/AsenPro,
   used only for headers/titles (--font-display). Body text uses Space Mono (--font-body). */
@font-face {
  font-family: "Asen Pro";
  src: url("../Assets/fonts/AsenPro/AsenPro-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Asen Pro";
  src: url("../Assets/fonts/AsenPro/AsenPro-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Asen Pro";
  src: url("../Assets/fonts/AsenPro/AsenPro-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Asen Pro";
  src: url("../Assets/fonts/AsenPro/AsenPro-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Asen Pro";
  src: url("../Assets/fonts/AsenPro/AsenPro-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Asen Pro";
  src: url("../Assets/fonts/AsenPro/AsenPro-ExtraBold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand primitives */
  --obsidian: #000000;
  --pearl: #f5f8fc;
  --quantum-blue: #0033b5;
  --neon-pulse: #00c6ff;
  --cloud-alloy: #c5d4e3;
  --graphite: #5e5e5e;
  --deep-core: #2b2b2b;

  /* Quantum Blue ramp */
  --quantum-100: #e3eaf9;
  --quantum-200: #b9c9ef;
  --quantum-300: #7d99df;
  --quantum-400: #3a63c9;
  --quantum-500: #0033b5;
  --quantum-600: #002a95;
  --quantum-700: #001f6e;
  --quantum-800: #00154a;
  --quantum-900: #000d2c;

  /* Neon Pulse ramp */
  --neon-100: #dcf6ff;
  --neon-200: #a8e9ff;
  --neon-300: #5cd8ff;
  --neon-500: #00c6ff;
  --neon-600: #00a0d1;
  --neon-700: #0079a0;

  /* Status (derived, functional only) */
  --status-positive: #00c68a;
  --status-warning: #ffb300;
  --status-danger: #ff4d4d;
  --status-info: var(--neon-pulse);

  /* Tint = the ink laid over the page to lift or sink a surface. Every "translucent
     white" surface, border, and hairline in this file goes through one of these. */
  --tint-3: rgba(245, 248, 252, 0.03);
  --tint-4: rgba(245, 248, 252, 0.04);
  --tint-5: rgba(245, 248, 252, 0.05);
  --tint-6: rgba(245, 248, 252, 0.06);
  --tint-7: rgba(245, 248, 252, 0.07);
  --tint-8: rgba(245, 248, 252, 0.08);
  --tint-10: rgba(245, 248, 252, 0.10);
  --tint-14: rgba(245, 248, 252, 0.14);
  --tint-18: rgba(245, 248, 252, 0.18);
  --tint-24: rgba(245, 248, 252, 0.24);

  /* A dark overlay used as a "recessed" surface (e.g. .card.outline). Distinct from the
     tint scale because it sinks with black rather than just changing opacity. */
  --scrim-soft: rgba(0, 0, 0, 0.35);

  /* Semantic surface/text tokens - dark (Obsidian) is the only register. */
  --bg-page: #000000;
  --bg-surface: #0a0d14;
  --bg-surface-sunken: var(--tint-6);
  --surface-card: var(--tint-4);
  --surface-card-strong: var(--tint-7);
  --surface-card-soft: var(--tint-3);
  --bg-accent-quiet: rgba(0, 51, 181, 0.18);
  --bg-positive-quiet: rgba(0, 198, 138, 0.14);
  --border-subtle: var(--tint-14);
  --border-strong: var(--tint-24);
  --text-heading: #f5f8fc;
  --text-body-color: #c5d4e3;
  --text-muted: #8593a3;
  --text-accent: #00c6ff;
  --text-positive: #00c68a;
  --focus-ring: #00c6ff;

  /* Gradients - used only in these five roles, nowhere else */
  --gradient-page:
    radial-gradient(circle at top left, rgba(0, 51, 181, 0.22), transparent 38%),
    radial-gradient(circle at top right, rgba(0, 198, 255, 0.10), transparent 30%),
    linear-gradient(180deg, #000000 0%, #030509 60%, #000000 100%);
  --gradient-card: linear-gradient(200deg, #05070d 0%, #001f6e 45%, #0033b5 72%, #00c6ff 100%);
  --gradient-card-soft: linear-gradient(180deg, #0b1020 0%, #002a95 70%, #0089d6 100%);
  --gradient-headline: linear-gradient(90deg, #f5f8fc 0%, #93a9e6 45%, #0033b5 100%);
  --gradient-rule: linear-gradient(90deg, #0033b5 0%, #00c6ff 60%, rgba(0, 198, 255, 0) 100%);
  --scrim-image: linear-gradient(90deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .72) 45%, rgba(0, 0, 0, 0) 100%);

  /* Elevation: glow on resting surfaces, real shadow only for true overlays */
  --shadow-lg: 0 30px 80px rgba(0, 0, 0, 0.45);
  --glow-quantum: 0 0 48px rgba(0, 51, 181, 0.45);
  --glow-neon: 0 0 24px rgba(0, 198, 255, 0.45);
  --inset-hairline: inset 0 1px 0 var(--tint-10);

  /* Typography */
  --font-display: "Asen Pro", "Cairo", "Segoe UI", "Segoe UI Variable Display", sans-serif;
  --font-body: "Space Mono", "Cairo", "Segoe UI", "Segoe UI Variable Text", monospace;
  --font-mono: "Space Mono", "Segoe UI", monospace;
  --text-display: 72px;
  --text-headline: 53px;
  --text-subheadline: 32px;
  --text-highlight: 26px;
  --text-body-title: 18px;
  --text-micro: 11px;
  --text-label: 13px;
  --text-body-sm: 14px;
  --text-body: 16px;
  --leading-tight: 1.02;
  --leading-headline: 1.08;
  --leading-snug: 1.25;
  --leading-body: 1.55;
  --leading-loose: 1.7;
  --tracking-wordmark: 0.42em;
  --tracking-eyebrow: 0.22em;
  --tracking-label: 0.08em;
  --tracking-headline: -0.01em;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Radius */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-card: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Motion */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);
  --duration-hover: 140ms;
  --duration-standard: 220ms;
  --duration-entrance: 420ms;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--gradient-page);
  color: var(--text-body-color);
  font-family: var(--font-body);
  font-weight: var(--weight-light);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 0;
}

.app-shell {
  min-height: 100vh;
  background:
    radial-gradient(circle at 0 0, rgba(0, 51, 181, 0.14), transparent 22%),
    radial-gradient(circle at 100% 0, rgba(0, 198, 255, 0.10), transparent 18%),
    var(--gradient-page);
}

.survey-app-shell {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.6) 45%, rgba(0, 0, 0, 0.88) 100%),
    url("../Assets/BG-blue.jpg") center / cover no-repeat fixed;
}

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

.rail {
  width: 232px;
  flex: 0 0 auto;
  padding: 24px 16px;
  border-right: 1px solid var(--border-subtle);
  background: var(--surface-card-strong);
  backdrop-filter: blur(18px);
}

.rail-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 8px 12px 24px;
  color: var(--text-heading);
}

.rail-logo-img {
  height: 32px;
  width: auto;
  filter: brightness(1.15) contrast(1.15);
}

.brand-logo {
  height: 28px;
  width: auto;
  filter: brightness(1.15) contrast(1.15);
}

/* Faint diagonal XLRA mark, pinned to the viewport corner - decorative only, so it's
   unclickable and never announced to screen readers. A sibling of #app (not inside it)
   so render()'s innerHTML swaps never wipe it out. Matches gm.html's watermark. */
.xlra-watermark {
  position: fixed;
  right: 24px;
  bottom: 22px;
  width: 200px;
  height: auto;
  display: block;
  opacity: 0.16;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

@media (max-width: 640px) {
  .xlra-watermark {
    width: 130px;
    right: 14px;
    bottom: 14px;
  }
}

/* Employee survey topbar: XLRA and Mention shown as one paired lockup. */
.brand-divider {
  width: 1px;
  height: 22px;
  background: var(--border-subtle);
}

.brand-logo-mention {
  height: 20px;
}

.rail-logo-copy,
.brand-copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-logo-copy strong,
.brand-copy strong {
  color: var(--text-heading);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rail-logo-copy span,
.brand-copy span {
  font-size: 11px;
  color: var(--text-muted);
}

.rail-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rail-nav button {
  width: 100%;
  min-height: 42px;
  padding: 0 14px;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  transition: background var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard);
}

.rail-nav button:hover {
  color: var(--text-heading);
  background: var(--tint-4);
}

.rail-nav button.is-active {
  color: var(--text-heading);
  font-weight: 700;
  background: var(--bg-accent-quiet);
}

.page {
  flex: 1;
  min-width: 0;
  padding: 40px 48px 64px;
}

.page.narrow {
  max-width: 1080px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-accent);
  font-weight: 700;
}

.page h1,
.hero-copy h1,
.survey-panel h1,
.survey-panel h2 {
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-headline);
}

.page h1 {
  margin: 4px 0 32px;
  font-size: var(--text-subheadline);
}

.hero-copy h1 {
  margin: 0;
  font-size: var(--text-headline);
  line-height: var(--leading-headline);
}

.hero-copy p,
.survey-panel p {
  margin: 0;
  font-weight: var(--weight-light);
  line-height: 2;
}

.hero-shell {
  min-height: 100vh;
  padding: 40px;
}

.hero-topbar,
.employee-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
}

.employee-topbar {
  padding: 20px 40px;
  border-bottom: 1px solid var(--border-subtle);
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(12px);
}

.hero-topbar .brand,
.employee-topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brand {
  color: var(--text-heading);
}

.hero-actions,
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.page-actions {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 28px;
  align-items: stretch;
  padding-top: 36px;
}

.auth-layout {
  display: grid;
  grid-template-columns: minmax(0, 640px);
  justify-content: center;
  gap: 28px;
  align-items: start;
  padding-top: 48px;
}

.auth-panel {
  min-height: 420px;
  justify-content: space-between;
}

.auth-logo img {
  height: 36px;
  width: auto;
}

.auth-form,
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.auth-signin-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.google-signin-slot {
  display: flex;
  justify-content: center;
}

.auth-input {
  min-height: 56px;
  padding: 0 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--tint-5);
  color: var(--text-heading);
}

.auth-input::placeholder {
  color: var(--text-muted);
}

.textarea-field {
  width: 100%;
  min-height: 140px;
  padding: 14px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--tint-5);
  color: var(--text-heading);
  font-family: inherit;
  resize: vertical;
}

.textarea-field::placeholder {
  color: var(--text-muted);
}

.input-field {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--tint-5);
  color: var(--text-heading);
}

.input-field::placeholder {
  color: var(--text-muted);
}

.card,
.panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--inset-hairline);
  backdrop-filter: blur(18px);
  transition: border-color var(--duration-hover) var(--ease-standard);
}

.card {
  padding: 22px;
}

.card.surface {
  background: var(--surface-card-strong);
}

.card.quantum {
  background: var(--gradient-card);
  border-color: var(--tint-18);
}

.card.outline {
  background: var(--scrim-soft);
}

.card:hover,
.panel:hover {
  border-color: var(--border-strong);
}

.card h2,
.card h3,
.panel h2,
.panel h3 {
  margin: 0;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
}

.card-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.metric-grid,
.split-grid,
.triple-grid,
.double-grid {
  display: grid;
  gap: 16px;
}

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

.split-grid {
  grid-template-columns: 1.4fr 1fr;
}

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

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

.metric-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 160px;
}

.metric-label {
  font-size: var(--text-micro);
  letter-spacing: var(--tracking-eyebrow);
  color: var(--text-muted);
  text-transform: uppercase;
  font-weight: 700;
}

.metric-value {
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 800;
}

.metric-copy {
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-muted);
}

.chart-row,
.list-row,
.inline-row,
.employee-row,
.question-row,
.enablement-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.chart-row,
.list-row,
.employee-row,
.question-row,
.enablement-row {
  padding: 10px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.chart-row:last-child,
.list-row:last-child,
.employee-row:last-child,
.question-row:last-child,
.enablement-row:last-child {
  border-bottom: 0;
}

.progress-track {
  /* No longer sits inside a row alongside a label (it's now the sole, direct child of
     the column-direction .survey-progress) - flex:1 here would set flex-basis:0% on
     the vertical axis and collapse the box to 0px tall, since its .progress-fill child
     has height:100% and can't resolve a percentage against an indefinite parent size.
     A plain block height is all that's needed; it already stretches to full width via
     the flex column's default align-items:stretch. */
  height: 12px;
  border-radius: 999px;
  background: var(--bg-surface-sunken);
  border: 1px solid var(--border-subtle);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  min-width: 12px;
  border-radius: inherit;
  background: var(--gradient-rule);
  box-shadow: var(--glow-neon);
  transition: width 0.4s ease;
}

.label-pair,
.column {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.label-pair strong,
.column strong {
  color: var(--text-heading);
  font-size: 14px;
}

.label-pair span,
.column span {
  color: var(--text-muted);
  font-size: 12px;
}

.badge {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
}

.badge.neon {
  background: rgba(0, 198, 255, 0.16);
  color: var(--neon-pulse);
}

.badge.neutral {
  background: var(--tint-8);
  color: var(--text-muted);
}

.badge.positive {
  background: var(--bg-positive-quiet);
  color: var(--status-positive);
}

.badge.warning {
  background: rgba(255, 179, 0, 0.16);
  color: var(--status-warning);
}

.chip,
.filter-button {
  min-height: 32px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard), background var(--duration-hover) var(--ease-standard);
}

.chip.is-active,
.filter-button.is-active,
.chip:hover,
.filter-button:hover {
  border-color: var(--quantum-blue);
  color: var(--text-heading);
  background: var(--bg-accent-quiet);
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-md);
  cursor: pointer;
  color: var(--pearl);
  font-weight: var(--weight-bold);
  transition: background var(--duration-hover) var(--ease-standard), box-shadow var(--duration-hover) var(--ease-standard);
}

.button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.38;
  cursor: wait;
}

.button.primary {
  background: var(--quantum-blue);
}

.button.primary:hover {
  background: var(--quantum-600);
}

.button.primary:active {
  background: var(--quantum-700);
}

/* Solid buttons keep brand blue in both themes, so pearl text stays right there. Secondary
   and ghost sit on a tint that follows the theme, so their text has to follow too - otherwise
   light mode paints near-white text on a near-white surface. */
.button.secondary {
  background: var(--tint-6);
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
}

.button.secondary:hover {
  border-color: var(--border-strong);
}

.button.neon {
  background: var(--neon-pulse);
  color: var(--obsidian);
}

.button.neon:hover {
  background: var(--neon-600);
  box-shadow: var(--glow-neon);
}

.button.ghost {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-heading);
}

.button.danger {
  background: rgba(255, 77, 77, 0.14);
  border: 1px solid var(--status-danger);
  color: var(--status-danger);
}

.button.lg {
  min-height: 56px;
  padding: 0 24px;
  font-size: 15px;
}

.dashboard-table,
.question-table,
.enablement-table {
  display: flex;
  flex-direction: column;
}

.table-head,
.table-row {
  display: grid;
  gap: 16px;
  align-items: center;
}

.table-head {
  padding: 0 0 10px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

.table-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.table-row:last-child {
  border-bottom: 0;
}

.table-row.row-button,
.table-row button.row-button {
  width: 100%;
  padding: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.overview-grid .card h3 {
  margin-bottom: 16px;
  font-size: 18px;
}

.department-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.mini-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mini-bar span {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.mini-track {
  height: 6px;
  border-radius: 999px;
  background: var(--bg-surface-sunken);
  overflow: hidden;
}

.mini-fill {
  height: 100%;
  border-radius: inherit;
  background: var(--gradient-rule);
}

.quadrant {
  position: relative;
  width: 100%;
  min-height: 320px;
  border-left: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.quadrant::before,
.quadrant::after {
  content: "";
  position: absolute;
  background: var(--border-subtle);
}

.quadrant::before {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
}

.quadrant::after {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
}

.quadrant-label {
  position: absolute;
  font-size: 11px;
  color: var(--text-muted);
}

.quadrant-label.top-right {
  top: 10px;
  right: 10px;
}

.quadrant-label.top-left {
  top: 10px;
  left: 10px;
}

.quadrant-label.bottom-right {
  right: 10px;
  bottom: 10px;
}

.quadrant-label.bottom-left {
  left: 10px;
  bottom: 10px;
}

.quadrant-point {
  position: absolute;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  margin-bottom: -6px;
  border-radius: 999px;
  box-shadow: 0 0 0 4px var(--tint-3);
}

.launch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}

.launch-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
}

.launch-card .button {
  align-self: flex-start;
}

.launch-preview {
  height: 140px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background:
    radial-gradient(circle at 20% 20%, rgba(0, 51, 181, 0.28), transparent 25%),
    linear-gradient(160deg, #05070d, #001f3d);
  overflow: hidden;
  position: relative;
}

.launch-preview::before,
.launch-preview::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  background: var(--tint-8);
}

.launch-preview::before {
  width: 72%;
  height: 12px;
  left: 14%;
  top: 24px;
}

.launch-preview::after {
  width: 48%;
  height: 12px;
  left: 14%;
  top: 52px;
}

.launch-preview.management .preview-bars,
.launch-preview.admin .preview-bars,
.launch-preview.employee .preview-bars {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 20px;
  display: flex;
  gap: 10px;
}

.launch-preview.management .preview-bars span,
.launch-preview.admin .preview-bars span,
.launch-preview.employee .preview-bars span {
  flex: 1;
  border-radius: var(--radius-sm);
  background: rgba(0, 198, 255, 0.24);
}

.launch-preview.management .preview-bars span:nth-child(1) {
  height: 28px;
}

.launch-preview.management .preview-bars span:nth-child(2) {
  height: 46px;
}

.launch-preview.management .preview-bars span:nth-child(3) {
  height: 64px;
}

.launch-preview.admin .preview-bars span:nth-child(1) {
  height: 60px;
}

.launch-preview.admin .preview-bars span:nth-child(2) {
  height: 42px;
}

.launch-preview.admin .preview-bars span:nth-child(3) {
  height: 78px;
}

.launch-preview.employee .preview-bars {
  flex-direction: column;
}

.launch-preview.employee .preview-bars span:nth-child(1) {
  height: 14px;
}

.launch-preview.employee .preview-bars span:nth-child(2) {
  height: 14px;
  width: 80%;
}

.launch-preview.employee .preview-bars span:nth-child(3) {
  height: 54px;
}

.employee-nav {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}

/* Hidden by default - only shown on phone-width screens, where .employee-nav is
   hidden entirely (see the 560px media query) and this tagline takes its place. */
.employee-tagline {
  display: none;
}

/* Hidden by default - .employee-nav already gives desktop a way back to Home. Only shown
   on phone-width screens (see the 560px media query), on the Knowledge Base / AI Help Desk
   screens specifically, since those are reached from .quick-links on Home but have no nav
   of their own to get back - see renderKnowledgeBase()/renderHelpDesk() in employee.js. */
.mobile-home-link {
  display: none;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}

.quick-links {
  display: none;
}

.employee-nav button {
  padding: 0;
  background: none;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  cursor: pointer;
}

.employee-nav button.is-active {
  color: var(--text-heading);
}

/* Knowledge Base and AI Help Desk stay in the nav at all times so their existence isn't a
   surprise, but they don't do anything until the assessment is complete - see surveyIsComplete()
   in employee.js. Native `disabled` blocks the click without a second layer of JS guarding. */
.employee-nav button:disabled {
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

.nav-lock-icon {
  filter: invert(1);
  opacity: 0.8;
  vertical-align: middle;
  margin-left: 6px;
}

.persona-frame {
  padding: 8px 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card-soft);
  box-shadow: var(--inset-hairline), var(--shadow-lg);
}

.persona-meta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.persona-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-accent-quiet);
  color: var(--text-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  border: 1px solid var(--border-strong);
  flex-shrink: 0;
  overflow: hidden;
}

.persona-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.session-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

.session-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  color: var(--text-muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: border-color var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard), background var(--duration-hover) var(--ease-standard);
}

.session-link:hover,
.session-link.is-active {
  color: var(--text-heading);
  border-color: var(--quantum-blue);
  background: var(--bg-accent-quiet);
}

.persona-meta select {
  min-height: 38px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--tint-4);
  color: var(--text-heading);
}

.survey-shell {
  max-width: 760px;
  margin: 0 auto;
  padding: 64px 24px 120px;
}

.survey-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.survey-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.survey-card {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
  /* Questions shouldn't be copy/pasted out (e.g. into another AI tool for an answer) -
     doesn't affect the "Other"/short-answer inputs, which keep their own text selection
     regardless of an ancestor's user-select. */
  -webkit-user-select: none;
  user-select: none;
}

.survey-card.animating {
  opacity: 0;
  transform: translateY(6px);
}

.survey-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.survey-option,
.rank-item,
.matrix-row,
.bullet-line {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-card-soft);
}

.survey-option {
  width: 100%;
  padding: 16px 18px;
  color: var(--text-heading);
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  text-align: justify;
}

.survey-option.is-selected {
  border-color: var(--quantum-blue);
  background: var(--bg-accent-quiet);
}

.option-dot,
.option-check {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 1px solid var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.option-dot {
  border-radius: 999px;
}

.option-dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: transparent;
}

.survey-option.is-selected .option-dot,
.survey-option.is-selected .option-check {
  border-color: var(--quantum-blue);
}

.survey-option.is-selected .option-dot::after,
.survey-option.is-selected .option-check {
  background: var(--quantum-blue);
}

.option-check {
  border-radius: var(--radius-sm);
  color: transparent;
  font-size: 12px;
  font-weight: 800;
}

.survey-option.is-selected .option-check {
  color: var(--pearl);
}

.rating-row,
.matrix-scale {
  display: flex;
  gap: 10px;
}

.rating-row {
  justify-content: space-between;
}

.rating-row button,
.matrix-scale button {
  cursor: pointer;
  transition: background var(--duration-hover) var(--ease-standard), border-color var(--duration-hover) var(--ease-standard), color var(--duration-hover) var(--ease-standard);
}

.rating-row button {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}

.rating-row button.is-selected,
.matrix-scale button.is-selected {
  background: var(--quantum-blue);
  border-color: var(--quantum-blue);
  color: var(--pearl);
}

.tool-license-row .button.secondary.is-selected {
  background: var(--quantum-blue);
  border-color: var(--quantum-blue);
  color: var(--pearl);
}

.rating-hint,
.matrix-hint {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
}

.rank-list,
.matrix-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rank-item {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  touch-action: none;
  cursor: grab;
  transition: transform 0.15s ease;
  position: relative;
}

.rank-item.is-dragging {
  cursor: grabbing;
  z-index: 2;
  transition: none;
  box-shadow: var(--shadow-lifted, 0 8px 24px rgba(0, 0, 0, 0.25));
  border-color: var(--text-accent);
}

.rank-drag-handle {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 1;
  letter-spacing: -2px;
  user-select: none;
}

.rank-index {
  width: 20px;
  color: var(--text-accent);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
}

.rank-controls {
  display: flex;
  gap: 4px;
  touch-action: auto;
}

.rank-controls button {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.matrix-row {
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.matrix-scale button {
  flex: 1;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-heading);
}

/* ---------------------------------------------------------------- *
 * Knowledge Base - prompt library
 * ---------------------------------------------------------------- */

.prompt-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.prompt-tags .chip {
  min-height: 24px;
  padding: 0 10px;
  font-size: var(--text-micro);
}

.prompt-body {
  margin: 0;
  padding: 14px;
  max-height: 320px;
  overflow: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-surface-sunken);
  color: var(--text-body-color);
  font-size: 12px;
  line-height: var(--leading-body);
  white-space: pre-wrap;
  word-break: break-word;
}

/* Compact secondary actions - "Show prompt" / "Copy" next to each card - where the standard
   44px-tall .button would dominate a row of small cards. */
.icon-button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
  background: transparent;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.icon-button:hover {
  color: var(--text-heading);
  border-color: var(--border-strong);
}

/* ---------------------------------------------------------------- *
 * AI Help Desk - the employee's own tickets, read as a thread
 * ---------------------------------------------------------------- */

.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 320px;
  overflow-y: auto;
  padding-right: 4px;
}

.ticket-bubble {
  align-self: flex-end;
  max-width: 85%;
  padding: 12px 14px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-xs);
  background: var(--bg-accent-quiet);
}

.ticket-bubble p {
  margin: 0 0 8px;
  color: var(--text-heading);
  font-size: var(--text-body-sm);
  white-space: pre-wrap;
}

.ticket-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-micro);
}

.error-note {
  color: var(--status-warning);
  font-size: var(--text-body-sm);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal {
  width: min(520px, 100%);
  background: var(--surface-card-strong);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  padding: 24px;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.modal-head h2 {
  margin-bottom: 4px;
}

.modal-close {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  background: var(--tint-6);
  color: var(--text-heading);
  cursor: pointer;
}

.hidden {
  display: none !important;
}

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

.accent {
  color: var(--text-accent);
}

.positive {
  color: var(--status-positive);
}

.warning {
  color: var(--status-warning);
}


/* ---------------------------------------------------------------- *
 * Admin dashboard - Employees table (sortable, scored) and radar
 * ---------------------------------------------------------------- */

.sort-header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  transition: color var(--duration-hover) var(--ease-standard);
}

.sort-header:hover {
  color: var(--text-heading);
}

.sort-header.is-active {
  color: var(--text-accent);
}

.sort-arrow {
  font-size: 10px;
}

.score-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.score-track {
  flex: 1;
  min-width: 30px;
  height: 6px;
  background: var(--tint-9, var(--tint-8));
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.score-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width var(--duration-entrance) var(--ease-standard);
}

.score-number {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--text-body-color);
  min-width: 20px;
  text-align: right;
}

/* A score below the attention threshold reads as a warning, not just a short bar. */
.score-cell.is-low .score-number {
  color: var(--status-warning);
  font-weight: var(--weight-semibold);
}

.score-empty {
  font-size: 12px;
}

.radar-block {
  display: flex;
  gap: 20px;
  align-items: center;
  flex-wrap: wrap;
  padding: 16px;
  background: var(--surface-card-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}

.radar {
  width: 190px;
  height: 190px;
  flex: 0 0 auto;
}

.radar-label {
  font-size: 8.5px;
  fill: var(--text-muted);
  letter-spacing: 0.08em;
}

/* The shape draws itself in when a profile opens. */
.radar-shape {
  transform-origin: center;
  animation: radar-grow var(--duration-entrance) var(--ease-standard) both;
}

@keyframes radar-grow {
  from {
    transform: scale(0.4);
    opacity: 0;
  }
}

.radar-legend {
  flex: 1;
  min-width: 190px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.radar-legend-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
}

.radar-legend-label {
  width: 74px;
  color: var(--text-body-color);
}

.radar-legend .sw {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  flex: 0 0 auto;
}

.radar-overall {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-body-color);
}

.radar-overall strong {
  color: var(--text-heading);
}

/* ---------------------------------------------------------------- *
 * Management dashboard - department drill-down accordion
 * ---------------------------------------------------------------- */

.dept-caret {
  display: inline-block;
  font-size: 11px;
  color: var(--text-muted);
  transition: transform var(--duration-entrance) var(--ease-standard);
}

.dept-caret.is-open {
  transform: rotate(90deg);
  color: var(--text-accent);
}

/* ---------------------------------------------------------------- *
 * Admin dashboard - Question Bank add/edit form + delete dialog
 * ---------------------------------------------------------------- */

.modal-wide {
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
}

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

.form-label {
  font-size: var(--text-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--text-muted);
  font-weight: var(--weight-bold);
}

.form-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.input-field,
.textarea-field {
  transition: border-color var(--duration-hover) var(--ease-standard),
    background var(--duration-hover) var(--ease-standard);
}

.input-field:hover,
.textarea-field:hover {
  border-color: var(--border-strong);
  background: var(--tint-7);
}

.input-field:focus-visible,
.textarea-field:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
  border-color: transparent;
}

select.input-field {
  appearance: none;
  cursor: pointer;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select.input-field option {
  background: var(--bg-surface);
  color: var(--text-heading);
}

.checkbox-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: var(--text-body-sm);
  color: var(--text-body-color);
}

.checkbox-field input {
  width: 18px;
  height: 18px;
  accent-color: var(--quantum-blue);
  cursor: pointer;
}

.option-editor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.option-row {
  display: grid;
  grid-template-columns: 90px 1fr 90px auto;
  gap: 8px;
  align-items: center;
  animation: option-row-in var(--duration-standard) var(--ease-standard) both;
}

.option-row .input-field {
  min-height: 38px;
}

.icon-button {
  transition: color var(--duration-hover) var(--ease-standard),
    border-color var(--duration-hover) var(--ease-standard),
    background var(--duration-hover) var(--ease-standard);
}

.icon-button:hover {
  background: var(--tint-6);
}

.icon-button.danger:hover {
  color: var(--status-danger);
  border-color: var(--status-danger);
  background: rgba(255, 77, 77, 0.12);
}

.icon-button:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  opacity: 0;
  transition: opacity var(--duration-hover) var(--ease-standard);
}

.table-row:hover .row-actions,
.row-actions:focus-within {
  opacity: 1;
}

.table-row.is-inactive {
  opacity: 0.55;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 40px 24px;
  text-align: center;
}

.quote-block {
  padding: 12px 16px;
  border-left: 2px solid var(--quantum-blue);
  background: var(--surface-card-soft);
  border-radius: var(--radius-sm);
  color: var(--text-heading);
}

/* Sits at the top of the question form. Given weight because a refused save is otherwise
   indistinguishable from the form simply redrawing itself. */
.form-error {
  font-weight: 600;
  background: rgba(255, 179, 0, 0.14);
  border-left: 2px solid var(--status-warning);
  border-radius: 6px;
  padding: 10px 14px;
}

/* Confirms a save or delete. Given a weight the error note does not need, because this is
   the only thing telling the admin their action landed. */
.success-note {
  color: var(--status-positive);
  font-size: var(--text-body-sm);
  font-weight: 600;
  background: var(--bg-positive-quiet);
  border-left: 2px solid var(--status-positive);
  border-radius: 6px;
  padding: 10px 14px;
}

/* ---------------------------------------------------------------- *
 * Admin dashboard - motion: page entrance, row transitions, nav rail
 * ---------------------------------------------------------------- */

@keyframes page-enter {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Rows resolve left-to-right, following the direction of the brand chevron. */
@keyframes row-enter {
  from {
    opacity: 0;
    transform: translateX(-10px);
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Removal collapses the row away rather than letting it vanish on re-render. */
@keyframes row-exit {
  to {
    opacity: 0;
    transform: translateX(24px);
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
  }
}

@keyframes rule-draw {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
}

/* Named for the brand's own accent colour - a save confirms with a Neon Pulse. */
@keyframes neon-pulse {
  0% {
    background: var(--bg-accent-quiet);
    box-shadow: inset 2px 0 0 var(--neon-pulse), var(--glow-neon);
  }
  100% {
    background: transparent;
    box-shadow: inset 2px 0 0 transparent, 0 0 0 rgba(0, 198, 255, 0);
  }
}

@keyframes option-row-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
  }
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.98);
  }
}

/* Cards lift slightly toward the light on hover, with the Quantum Blue glow. */
@keyframes card-settle {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

@keyframes skeleton-sweep {
  to {
    background-position: 200% 0;
  }
}

.page-enter {
  animation: page-enter var(--duration-entrance) var(--ease-standard) both;
}

.row-enter {
  animation: row-enter var(--duration-standard) var(--ease-standard) both;
}

.table-row.is-flashed {
  animation: neon-pulse 1.6s var(--ease-standard);
}

.table-row.is-exiting {
  animation: row-exit var(--duration-standard) var(--ease-standard) both;
  overflow: hidden;
  pointer-events: none;
}

/* Cards on the page settle in just behind the page itself. */
.page-enter .card {
  animation: card-settle var(--duration-entrance) var(--ease-standard) 60ms both;
}

.card.surface:hover {
  border-color: var(--border-strong);
  box-shadow: var(--inset-hairline), var(--glow-quantum);
  transform: translateY(-1px);
}

.card {
  transition: border-color var(--duration-hover) var(--ease-standard),
    box-shadow var(--duration-standard) var(--ease-standard),
    transform var(--duration-standard) var(--ease-standard);
}

.modal-backdrop {
  animation: modal-backdrop-in var(--duration-standard) var(--ease-standard);
}

.modal {
  animation: modal-in var(--duration-standard) var(--ease-standard);
}

/* Buttons already transition colour on hover; this adds the press feedback. */
.button:active:not(:disabled),
.icon-button:active {
  transform: translateY(1px);
}

.button {
  transition: background var(--duration-hover) var(--ease-standard),
    box-shadow var(--duration-hover) var(--ease-standard),
    transform var(--duration-hover) var(--ease-standard);
}

/* One marker that travels between tabs, rather than each button lighting up on its own.
   Position comes from --marker-top / --marker-height, set by admin.js after each render. */
.rail-nav {
  position: relative;
}

.rail-nav::before {
  content: "";
  position: absolute;
  left: 0;
  top: var(--marker-top, 0px);
  height: var(--marker-height, 0px);
  width: 2px;
  border-radius: var(--radius-pill);
  background: var(--gradient-rule);
  box-shadow: var(--glow-neon);
  opacity: var(--marker-opacity, 0);
  transition: top var(--duration-entrance) var(--ease-standard),
    height var(--duration-entrance) var(--ease-standard),
    opacity var(--duration-standard) var(--ease-standard);
}

.rail-nav button {
  position: relative;
}

/* The chevron is the brand's own accent shape, taken from the X in the wordmark. */
.rail-nav button::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-right: 1.5px solid var(--text-accent);
  border-top: 1.5px solid var(--text-accent);
  transform: translateY(-50%) translateX(-4px) rotate(45deg);
  opacity: 0;
  transition: opacity var(--duration-standard) var(--ease-standard),
    transform var(--duration-standard) var(--ease-standard);
}

.rail-nav button.is-active::after,
.rail-nav button:hover::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0) rotate(45deg);
}

.rail-nav button:hover::after {
  opacity: 0.45;
}

/* A rule under the page title that draws itself in, using the brand gradient. */
.title-rule {
  display: block;
  height: 2px;
  margin-top: 10px;
  border-radius: var(--radius-pill);
  background: var(--gradient-rule);
  transform-origin: left center;
  animation: rule-draw var(--duration-entrance) var(--ease-standard) both;
}

.skeleton-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.skeleton-row {
  height: 18px;
  border-radius: var(--radius-sm);
  /* Sweep carries Quantum Blue into Neon Pulse, so even loading is on-brand. */
  background: linear-gradient(
    90deg,
    var(--tint-4) 0%,
    rgba(0, 51, 181, 0.28) 38%,
    rgba(0, 198, 255, 0.22) 52%,
    var(--tint-4) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-sweep 1.4s linear infinite;
}

.skeleton-row:nth-child(even) {
  width: 82%;
}

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

  .card.surface:hover {
    transform: none;
  }

  .button:active:not(:disabled),
  .icon-button:active {
    transform: none;
  }

  .row-actions {
    opacity: 1;
  }
}

@media (max-width: 1100px) {
  .metric-grid,
  .triple-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* minmax(0, 1fr), not bare 1fr: a plain 1fr track still carries an implicit
     minmax(auto, 1fr), so a single-column grid can't shrink below its content's
     min-content width. With fixed-width children inside (e.g. .chart-row's label
     spans), that forces the column - and the page - wider than the viewport. */
  .split-grid,
  .double-grid,
  .hero-layout,
  .auth-layout {
    grid-template-columns: minmax(0, 1fr);
  }

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

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

  .rail {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .rail-logo {
    align-items: center;
  }

  .rail-nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .rail-nav button {
    width: auto;
    justify-content: center;
  }

  .page,
  .hero-shell,
  .employee-topbar,
  .survey-shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  .launch-grid,
  .metric-grid,
  .double-grid,
  .triple-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .employee-topbar,
  .hero-topbar {
    flex-direction: column;
    align-items: center;
  }

  .hero-topbar .brand,
  .employee-topbar .brand,
  .brand-copy,
  .rail-logo-copy {
    align-items: center;
  }

  .employee-nav {
    justify-content: center;
  }

  .google-signin-slot {
    justify-content: center;
  }

  .launch-card .button {
    align-self: center;
  }

  .session-footer,
  .page-actions {
    width: 100%;
    justify-content: center;
  }

  /* Wide per-row grids (7 columns for employees/questions, 4 for enablement) are set via
     inline styles from admin.js - scroll the whole table as a unit instead of crushing columns. */
  .dashboard-table,
  .question-table {
    overflow-x: auto;
  }

  .dashboard-table .table-head,
  .dashboard-table .table-row,
  .question-table .table-head,
  .question-table .table-row {
    min-width: 680px;
  }

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

  .enablement-table .table-head,
  .enablement-table .table-row {
    min-width: 520px;
  }
}

/* ------------------------------------------------------------------ *
 * Phone breakpoint - covers the 320-430px range (iPhone SE through the
 * larger modern phones). Everything above 860px is untouched; this tier
 * only refines spacing, typography, and a handful of components that are
 * still awkward once the 860px tier's column-collapsing has already run.
 * ------------------------------------------------------------------ */
@media (max-width: 640px) {
  body {
    overflow-x: hidden;
  }

  /* A 5+ point scale in a no-wrap row squeezes illegibly on a phone. */
  .matrix-scale {
    flex-direction: column;
  }

  .matrix-scale button {
    flex: none;
    width: 100%;
  }

  .page,
  .hero-shell,
  .employee-topbar,
  .survey-shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .page {
    padding-top: 24px;
    padding-bottom: 40px;
  }

  .hero-shell {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  .survey-shell {
    padding-top: 32px;
    padding-bottom: 64px;
  }

  .employee-topbar {
    padding-top: 16px;
    padding-bottom: 16px;
    gap: 14px;
  }

  .card {
    padding: 16px;
  }

  .modal-backdrop {
    padding: 16px;
  }

  .modal,
  .modal-wide {
    padding: 18px;
  }

  /* Single column below 860px already; this narrows it further so two KPI tiles
     don't get squeezed to the point their 38px value can't fit. */
  .metric-grid,
  .triple-grid,
  .double-grid,
  .launch-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .metric-card {
    min-height: 0;
  }

  .metric-value {
    font-size: 28px;
  }

  /* Rows built from a fixed-width label + a flexible bar + a fixed-width value
     (Four-dimension analysis, department mini-bars, etc.) can't fit that many
     fixed pixels next to each other on a phone - stack them instead. Each
     child keeps its own inline width, but since it's now alone on its own
     line that width is never in competition with the others, and the
     progress bar (no explicit width) stretches to fill the row instead of
     being squeezed to a sliver. */
  .chart-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  /* Absolutely-positioned, unconstrained-width labels in each corner of the
     Insights quadrant chart - long dimension names could otherwise extend
     past the container's edge and force the page wider. */
  .quadrant-label {
    max-width: 44%;
    font-size: 9.5px;
    line-height: 1.3;
  }

  .quadrant-label.top-right,
  .quadrant-label.bottom-right {
    text-align: right;
  }

  .radar-block {
    padding: 12px;
    gap: 14px;
  }

  .radar {
    width: 160px;
    height: 160px;
  }

  .radar-legend {
    min-width: 0;
  }

  /* Admin/management data tables (Employees, Question Bank, Help Desk, Prompt
     Library): the desktop layout is a CSS grid with 4-7 columns defined inline
     per table. There's no reasonable way to fit that many columns side by side
     on a phone, so each row becomes a small labelled card instead - the column
     header row is hidden and every cell grows its own label from data-label,
     via ::before, so the meaning of each value isn't lost when it drops out of
     its column. */
  .table-head {
    display: none;
  }

  .table-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 14px 0;
  }

  .table-row > * {
    width: auto !important;
    min-width: 0;
  }

  .table-row [data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: 2px;
  }

  /* Row actions (edit/delete) only ever showed on :hover, which never fires on
     a touch screen - without this they were both invisible AND still taking
     up layout space, which is what was pushing the Question Bank table wide. */
  .row-actions {
    opacity: 1;
    justify-content: flex-start;
  }

  /* Question Bank's per-option editor row (key / label / points / delete). */
  .option-row {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Rating-scale questions can have five or more options at a fixed 56px each,
     which doesn't fit a 320-375px screen in one line. */
  .rating-row {
    flex-wrap: wrap;
    justify-content: center;
  }

  .rating-row button {
    width: 52px;
    height: 52px;
    font-size: 16px;
  }
}

@media (max-width: 560px) {
  .page h1,
  .hero-copy h1 {
    font-size: 34px;
  }

  .survey-panel h2 {
    font-size: 24px;
  }

  .department-bars {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Answer options: centered label so it matches the centered survey-panel text below. */
  .survey-option {
    justify-content: center;
    text-align: center;
  }

  .option-dot,
  .option-check {
    display: none;
  }

  /* The header nav (AI Enablement Hub / Knowledge Base / AI Help Desk) is hidden entirely on
     a phone - Knowledge Base/Help Desk move into .quick-links under the survey's Continue
     button and the home/done screens instead (see employee.js renderQuickLinks()). Home itself
     needs no separate entry there since the logo row above already reads as the home screen,
     but Knowledge Base/Help Desk still need a way back - see .mobile-home-link below. */
  .employee-nav {
    display: none;
  }

  .mobile-home-link {
    display: inline-flex;
  }

  /* .employee-brand-row/.employee-persona-row are the two wrapped groups inside the topbar's
     outer justify-content:space-between row - with only one group per wrapped line at this
     width, space-between has nothing to distribute so it sits that lone group at the start
     (left), not centered. Give each group its own centering directly rather than relying on
     the parent row. */
  .employee-brand-row,
  .employee-persona-row {
    justify-content: center;
    width: 100%;
  }

  .employee-tagline {
    display: block;
    width: 100%;
    margin-top: 6px;
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-align: center;
    color: var(--text-muted);
  }

  /* Knowledge Base / AI Help Desk quick-links - locked teaser under the survey's Continue
     button while in progress, and the actual (unlocked once complete) access point on the
     home/done screens now that the header nav is gone on mobile. */
  .quick-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
  }

  .quick-link-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--surface-card-soft);
    color: var(--text-heading);
    font-family: var(--font-display);
    font-size: var(--text-label);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-label);
    cursor: pointer;
  }

  .quick-link-row:disabled {
    color: var(--text-muted);
    cursor: not-allowed;
    opacity: 0.6;
  }

  .quick-link-row svg {
    width: 12px;
    height: 12px;
    flex: none;
    margin-right: 5px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}