/* 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;
  /* .brand-logo's contrast boost is for the XLRA mark - the Mention mark keeps its own
     true appearance rather than being pushed to match it. */
  filter: none;
}

/* A subsidiary without a logo yet: its name, sized to sit where the Mention mark does. */
.subsidiary-wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--text-heading);
  white-space: nowrap;
}

/* Solutions tab (employee and head dashboards). */
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

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

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

.rail-logo-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;
  text-decoration: none;
  box-sizing: border-box;
  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;
}

.embedded-dashboard-frame {
  width: 100%;
  height: calc(100vh - 180px);
  min-height: 560px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: #fff;
}

.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: 5;
  background: var(--surface-card-strong);
  backdrop-filter: blur(18px);
}

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

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

.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;
}

.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-signin-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

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

.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 {
  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 {
  border-color: var(--border-strong);
}

.card h2,
.card 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: 110px;
}

.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: 46px;
  font-weight: 800;
}

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

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

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

.chart-row:last-child,
.list-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);
}

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

/* Hidden by default - only shown on phone-width screens (see the 560px media query). */
.employee-tagline {
  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;
}

.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;
}

/* Shows the person's real photo when one exists (see js/core/own-photo.js), with their
   initials as the base layer so a missing/broken photo just falls back to that. */
.persona-avatar {
  position: relative;
  overflow: hidden;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--bg-accent-quiet);
  color: var(--quantum-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  border: 1px solid var(--border-subtle);
  flex-shrink: 0;
}

.persona-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.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;
  user-select: none;
  -webkit-user-select: none;
}

/* The copy guard above shouldn't stop someone typing/pasting into an actual answer
   field (the "Other" text input) - only the question text and options are locked. */
.survey-card input,
.survey-card textarea {
  user-select: text;
  -webkit-user-select: text;
}

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

.survey-option,
.rank-item,
.matrix-row {
  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);
}

/* Head survey reads as a denser, more businesslike tool than the employee survey -
   tighter gaps and smaller type throughout, scoped to .head-survey-shell so none of
   this touches the friendlier, more spacious employee survey. */
.head-survey-shell .survey-panel {
  gap: 14px;
}

.head-survey-shell .survey-panel p {
  line-height: 1.5;
}

.head-survey-shell .card-stack {
  gap: 10px;
}

.head-survey-shell .survey-progress {
  gap: 4px;
  margin-bottom: 14px;
}

.head-survey-shell .survey-options {
  gap: 6px;
}

.head-survey-shell .survey-option {
  padding: 11px 16px;
}

.head-survey-shell .survey-shell {
  max-width: 820px;
  padding: 32px 24px 64px;
}

/* Distinct brand identity for the head survey, pulled from the XLRA.ai design system
   (Quantum Blue + Neon Pulse glow, gradient headlines, Cloud Alloy body copy) instead
   of reusing the employee survey's warm photo background - the two should read as
   deliberately different registers, not re-skins of each other. Stays dark - just a
   different dark than the employee survey's photo-backed one. */
.survey-app-shell.head-survey-shell {
  background:
    radial-gradient(circle at 0 0, rgba(0, 51, 181, 0.18), transparent 24%),
    radial-gradient(circle at 100% 0, rgba(0, 198, 255, 0.14), transparent 20%),
    var(--gradient-page);
}

.head-survey-shell .survey-panel h1,
.head-survey-shell .survey-panel h2 {
  background: var(--gradient-headline);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.head-question-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-accent);
}

.head-survey-shell .survey-panel p.muted,
.head-survey-shell .card-stack p.muted,
.head-survey-shell .card-stack > p:not(.muted) {
  color: var(--cloud-alloy);
}

.head-survey-shell .survey-option:hover {
  border-color: var(--quantum-400);
}

.head-survey-shell .survey-option.is-selected {
  border-color: var(--neon-pulse);
  background: var(--bg-accent-quiet);
  box-shadow: 0 0 0 1px var(--neon-pulse), var(--glow-neon);
}

/* Marks the signed-in person as a department head - the same gradient ring around their
   photo and around the name/role frame next to it, Neon Pulse/Quantum Blue pairing used
   throughout this page. The two-background trick paints the gradient into the border
   while keeping each element's own fill underneath (initials layer for the avatar,
   the card surface for the frame). */
.head-survey-shell .persona-avatar {
  border: 2px solid transparent;
  background-image: linear-gradient(var(--bg-accent-quiet), var(--bg-accent-quiet)), linear-gradient(135deg, var(--neon-pulse), var(--quantum-blue));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.head-survey-shell .persona-frame {
  border-top: 2px solid var(--quantum-blue);
  border-bottom: 2px solid var(--neon-pulse);
}

.option-dot {
  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 {
  border-color: var(--quantum-blue);
}

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

.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 {
  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;
}

.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%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  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);
}

.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,
  .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;
  }

  .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,
  .rail-logo-copy {
    align-items: center;
  }

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

  .google-signin-slot {
    justify-content: 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 {
    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 {
    display: none;
  }

  /* The header nav stays on a phone too - it is the only way between Solutions, Survey,
     Knowledge Base, AI Support and AI Tool Request. Its own full-width row under the
     tagline, wrapping onto a second line when the tabs don't fit; the padding gives each
     tab a tap target taller than its text. */
  .employee-nav {
    width: 100%;
    justify-content: center;
    gap: 4px 20px;
  }

  .employee-nav button {
    padding: 8px 0;
  }

  /* .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);
  }
}

/* Faint XLRA mark, pinned to the bottom-right corner of the viewport - decorative
   only, so it's unclickable and never announced to screen readers. Same treatment
   as the GM dashboard's watermark, shared here so every page reads as one system. */
.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;
  }
}

/* ------------------------------------------------------------------ *
 * XLRA dashboard: group / subsidiary / group-unit sections
 * ------------------------------------------------------------------ */

/* The rail now lists every section, so it scrolls on its own rather than stretching the page. */
.dashboard-shell > .rail {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
}

.rail-heading {
  display: block;
  margin: 18px 14px 6px;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* XLRA rail: the list covers every section and keeps growing, so rows are a little tighter
   and each heading after the first starts a new block with a hairline above it. */
.xlra-rail .rail-nav {
  gap: 2px;
}

.xlra-rail .rail-nav button {
  min-height: 38px;
}

.xlra-rail .rail-heading {
  margin: 14px 14px 4px;
  padding-top: 14px;
  border-top: 1px solid var(--tint-8);
}

.xlra-rail .rail-heading:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* "Group units" is a heading that folds its list open, so it reads like the others. */
.xlra-rail .rail-nav button.rail-toggle {
  min-height: 0;
  margin-top: 14px;
  padding: 14px 14px 6px;
  border-top: 1px solid var(--tint-8);
  border-radius: 0;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  gap: 8px;
}

.xlra-rail .rail-nav button.rail-toggle:hover {
  background: transparent;
}

.xlra-rail .rail-nav button.rail-toggle::after {
  top: calc(50% + 4px);
  opacity: 0.6;
  border-color: var(--text-muted);
  transform: translateY(-50%) rotate(45deg);
}

.xlra-rail .rail-nav button.rail-toggle.is-open::after {
  transform: translateY(-75%) rotate(135deg);
}

.rail-count {
  padding: 1px 7px;
  border-radius: var(--radius-pill);
  background: var(--tint-8);
  letter-spacing: 0;
}

.rail-section.is-open {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 0 8px;
  border-left: 1px solid var(--border-subtle);
  margin-left: 8px;
}

.rail-section-name {
  padding: 4px 14px;
  font-weight: 700;
  font-size: 13px;
  color: var(--text-heading);
}

.rail-nav button.rail-sub {
  min-height: 34px;
  padding-left: 22px;
  font-size: 12px;
}

.rail-nav button.rail-unit {
  opacity: 0.6;
}

/* XLRA Overview: totals, then active subsidiaries, then empty ones, then group units. */
.overview-stack {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.overview-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.overview-section-head {
  display: flex;
  align-items: baseline;
  gap: 8px 16px;
  flex-wrap: wrap;
}

.overview-section-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body-title);
  font-weight: var(--weight-extrabold);
  color: var(--text-heading);
}

.overview-section-head .muted {
  font-size: 12px;
}

.subsidiary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}

.subsidiary-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  text-align: left;
  cursor: pointer;
  width: 100%;
  font: inherit;
  color: inherit;
}

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

.subsidiary-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.subsidiary-card-title {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.subsidiary-card-name {
  font-size: 18px;
  line-height: var(--leading-snug);
  color: var(--text-heading);
  font-family: var(--font-display);
}

.subsidiary-card-meta {
  font-size: 12px;
  color: var(--text-muted);
}

/* The brand chevron, as on the rail, marking the card as something that opens. */
.subsidiary-card-open {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin: 8px 4px 0 0;
  border-right: 1.5px solid var(--text-accent);
  border-top: 1.5px solid var(--text-accent);
  transform: rotate(45deg);
  opacity: 0.5;
  transition: opacity var(--duration-hover) var(--ease-standard), transform var(--duration-standard) var(--ease-standard);
}

.subsidiary-card:hover .subsidiary-card-open,
.subsidiary-card:focus-visible .subsidiary-card-open {
  opacity: 1;
  transform: translateX(3px) rotate(45deg);
}

.subsidiary-card-score {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subsidiary-card-value {
  color: var(--text-heading);
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: var(--weight-extrabold);
  line-height: 1;
}

.subsidiary-card-value small {
  margin-left: 6px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.subsidiary-card-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.subsidiary-card-progress .progress-track {
  height: 6px;
}

.subsidiary-card-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.subsidiary-card-row strong {
  color: var(--text-heading);
  font-size: 14px;
}

.subsidiary-card-foot {
  display: flex;
  gap: 20px;
  padding-top: 14px;
  border-top: 1px solid var(--tint-8);
  font-size: 12px;
  color: var(--text-body-color);
}

/* An empty subsidiary: a dashed outline reads as "a slot waiting to be filled". */
.subsidiary-card.is-pending {
  gap: 6px;
  padding: 18px 20px;
  background: transparent;
  border-style: dashed;
}

.subsidiary-card.is-pending .subsidiary-card-name {
  font-size: 16px;
}

.subsidiary-card-cta {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-accent);
}

/* The same brand chevron the rail and the active cards use. */
.subsidiary-card-cta::after {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 8px;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  transition: transform var(--duration-standard) var(--ease-standard);
}

.subsidiary-card.is-pending:hover {
  border-color: var(--quantum-400);
  background: var(--tint-3);
}

.subsidiary-card.is-pending:hover .subsidiary-card-cta::after {
  transform: translate(3px, -1px) rotate(45deg);
}

/* On narrow screens the rail wraps into rows, where the hairlines between blocks just add noise. */
@media (max-width: 860px) {
  .xlra-rail .rail-heading,
  .xlra-rail .rail-nav button.rail-toggle {
    width: 100%;
    margin-top: 8px;
    padding-top: 0;
    border-top: 0;
    justify-content: center;
    text-align: center;
  }

  .xlra-rail .rail-nav button.rail-toggle {
    width: 100%;
    padding: 6px 14px;
  }

  .xlra-rail .rail-nav button.rail-toggle::after {
    position: static;
    margin-left: 4px;
  }
}

/* Group units: one quiet line rather than a row of empty cards. */
.overview-units {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  flex-wrap: wrap;
  padding: 18px 22px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--scrim-soft);
}

.overview-units-copy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.overview-units-copy strong {
  color: var(--text-heading);
  font-size: 14px;
}

.overview-units-copy .muted {
  font-size: 12px;
}

.overview-units-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.overview-units-list .chip {
  font-size: 12px;
}

.feature-ticks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
}

.feature-tick {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

.link-button {
  background: none;
  border: none;
  padding: 0 0 0 6px;
  color: var(--quantum-400);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.link-button:hover {
  text-decoration: underline;
}
/* The signed-in person's own photo stays out of sight until it has loaded (js/core/own-photo.js). */
img[data-own-photo][hidden] {
  display: none !important;
}