/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  color-scheme: light;
  --bg: #f5f6f8;
  --card-bg: #ffffff;
  --border: #e4e6eb;
  --text: #1c2430;
  --text-muted: #69707d;
  --accent: #4f46e5;
  --accent-soft: #eef0fe;
  --green: #22c55e;
  --amber: #f5b829;
  --red: #ef4444;
  --track: #edeef2;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(16, 24, 40, 0.06);

  /* Semantic surfaces / states (overridden for dark below) */
  --surface-2: #eef0f3;
  --card-border-hover: #d2d6df;
  --shadow-hover: 0 8px 24px rgba(16, 24, 40, 0.10);
  --overlay: rgba(255, 255, 255, 0.8);
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --danger-text: #b91c1c;
  --success-bg: #e8f8ee;
  --success-border: #bbf7d0;
  --success-text: #15803d;
  --badge-closed-bg: #fdeaea;
  --badge-closed-text: #b42318;
}

/* Whole-app dark theme, driven by the OS/browser setting. Redefines the
   palette variables so every component that reads them adapts automatically.
   The results sidebar is dark in both themes by design, so its own colors
   stay hardcoded below. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --bg: #0b0f19;
    --card-bg: #151b28;
    --border: #262d3d;
    --text: #e5e7eb;
    --text-muted: #9aa3b2;
    --accent: #6366f1;
    --accent-soft: rgba(99, 102, 241, 0.16);
    --green: #4ade80;
    --amber: #fbbf24;
    --red: #f87171;
    --track: #2a3244;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4);

    --surface-2: #232a3a;
    --card-border-hover: #3a445c;
    --shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
    --overlay: rgba(11, 15, 25, 0.8);
    --danger-bg: rgba(153, 27, 27, 0.22);
    --danger-border: rgba(248, 113, 113, 0.35);
    --danger-text: #fca5a5;
    --success-bg: rgba(22, 101, 52, 0.22);
    --success-border: rgba(74, 222, 128, 0.35);
    --success-text: #86efac;
    --badge-closed-bg: rgba(153, 27, 27, 0.22);
    --badge-closed-text: #fca5a5;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 0.25rem; line-height: 1.25; }
h1 { font-size: 1.75rem; font-weight: 700; }
h2 { font-size: 1.1rem; font-weight: 650; }
h3 { font-size: 0.95rem; font-weight: 600; }

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

.muted, .results-meta { color: var(--text-muted); font-size: 0.875rem; margin: 0.25rem 0 0; }
.empty { color: var(--text-muted); font-size: 0.875rem; text-align: center; padding: 1.5rem 0; margin: 0; }

/* --- Auth (sign in / password reset), Beyond-style centered card --- */

.auth {
  min-height: calc(100vh - 6rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.auth-card { width: 100%; max-width: 22rem; }

.auth-logo { display: block; height: 40px; width: auto; margin: 0 auto 2.5rem; }
.auth-title { text-align: center; font-size: 1.5rem; font-weight: 700; margin: 0 0 2rem; }

.auth-form { display: flex; flex-direction: column; gap: 1.25rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-field label { font-size: 0.85rem; font-weight: 600; color: var(--text); }

.auth-label-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.auth-forgot { font-size: 0.82rem; font-weight: 600; }

.auth-field input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.auth-field input::placeholder { color: var(--text-muted); }
.auth-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.auth-submit {
  width: 100%;
  padding: 0.6rem 1rem;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.auth-submit:hover { filter: brightness(1.05); }

.auth-alt { text-align: center; font-size: 0.875rem; margin: 1.5rem 0 0; }

/* Two logo variants; show the one matching the theme (default: light). */
.auth-logo-dark, .sidebar-brand-dark { display: none; }

/* Flash banners on the auth pages */
.flash { border-radius: 8px; padding: 0.6rem 0.85rem; font-size: 0.875rem; margin-bottom: 1.25rem; }
.flash-alert { background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text); }
.flash-notice { background: var(--success-bg); border: 1px solid var(--success-border); color: var(--success-text); }

/* --- Layout --- */

/* App shell: Beyond-style navigation rail + content column. The rail reuses
   the results sidebar's look (dark in both themes by design). */
.app-shell { display: flex; align-items: stretch; min-height: 100vh; }

.app-sidebar {
  flex: 0 0 264px;
  width: 264px;
  background: #0f1729;
  color: #cbd2e0;
}

.app-sidebar-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.85rem;
  overflow-y: auto;
}

.app-sidebar-home { display: block; padding: 0.35rem 0.6rem 0; }
.app-sidebar-home:hover { text-decoration: none; }
.app-sidebar-org {
  display: block;
  color: #f8fafc;
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app-sidebar-logo { height: 20px; width: auto; margin: 1rem 0 0.15rem; padding: 0 0.6rem; opacity: 0.75; }

.app-nav { flex: 1; margin-top: 1.75rem; }
.app-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.app-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: #cbd2e0;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.3;
}
.app-nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.app-nav-link.is-active { background: rgba(255, 255, 255, 0.13); color: #fff; }
.app-nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }

.app-sidebar-footer {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.app-sidebar-user { display: flex; align-items: center; gap: 0.6rem; padding: 0.2rem 0.6rem 0.7rem; }
.app-sidebar-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  color: #8e99b3;
}
.app-sidebar-avatar svg { display: block; width: 100%; height: 100%; }
.app-sidebar-user-info { min-width: 0; }
.app-sidebar-email { margin: 0; font-size: 0.75rem; color: #9aa4bd; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.app-sidebar-footer form { margin: 0; }
.app-signout { width: 100%; border: none; background: none; font: inherit; cursor: pointer; text-align: left; }

.app-sidebar-locales { display: flex; gap: 4px; padding: 0 0.6rem 0.7rem; }
.app-locale {
  border: none;
  background: rgba(255, 255, 255, 0.06);
  color: #9aa4bd;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.55rem;
  border-radius: 6px;
  cursor: pointer;
}
.app-locale:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.app-locale.is-active { background: rgba(255, 255, 255, 0.16); color: #fff; cursor: default; }

.app-main { flex: 1; min-width: 0; }

/* Narrow screens: the rail becomes a top bar with horizontal nav. */
@media (max-width: 900px) {
  .app-shell { flex-direction: column; }
  .app-sidebar { flex-basis: auto; width: 100%; }
  .app-sidebar-inner {
    position: static;
    height: auto;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
  }
  .app-sidebar-home { padding: 0; }
  .app-nav { flex: 1; margin: 0; }
  .app-nav ul { flex-direction: row; flex-wrap: wrap; }
  .app-sidebar-footer { margin: 0; padding: 0; border: none; display: flex; align-items: center; }
  .app-sidebar-user { display: none; }
  .app-sidebar-locales { padding: 0; margin-right: 0.5rem; }
  .app-sidebar-logo { display: none; }
  .app-signout span { display: none; }
  .app-signout { width: auto; }
}

.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.link-button:hover { color: var(--text); }

.page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.page-header { margin-bottom: 1.25rem; }

/* --- Cards --- */

.card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}

.overall-card { margin-bottom: 1rem; }

.overall-score {
  font-size: 3rem;
  font-weight: 750;
  line-height: 1;
  margin: 0.75rem 0 0.5rem;
}

.score-legend {
  display: flex;
  gap: 0.9rem;
  font-size: 0.75rem;
  color: var(--text-muted);
}
.score-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.swatch { width: 14px; height: 7px; border-radius: 3px; display: inline-block; }
.swatch-high { background: var(--green); }
.swatch-mid { background: var(--amber); }
.swatch-low { background: var(--red); }

.question-card { display: flex; flex-direction: column; }
.question-prompt { margin-bottom: 0.75rem; }

/* Section groupings on the results page */
.results-section { margin-top: 1.75rem; }
.results-section-head {
  margin-bottom: 0.25rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}
.results-section-head h2 { font-size: 1.15rem; margin: 0; }
.results-section-heading { min-width: 0; }

.section-score { flex-shrink: 0; text-align: center; }
.section-score-value {
  display: inline-block;
  min-width: 2.5rem;
  padding: 0.1rem 0.55rem;
  border-radius: 8px;
  color: #fff;
  font-weight: 750;
  font-size: 1.1rem;
}
.section-score-caption {
  display: block;
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}
.yes-no-skipped { font-size: 0.8rem; margin-top: 0.35rem; }

/* --- Bars --- */

.bar-track {
  width: 100%;
  height: 9px;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}

.bar-fill { height: 100%; border-radius: 999px; }
.bar-high { background: var(--green); }
.bar-mid { background: var(--amber); }
.bar-low { background: var(--red); }
.bar-neutral { background: var(--accent); }

.score-bar { margin: 0.4rem 0; }
.score-bar-labels, .option-bar-labels {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  color: var(--text-muted);
}
.score-bar-value, .option-bar-value { font-weight: 650; color: var(--text); white-space: nowrap; }

.segment-bars { display: flex; flex-direction: column; gap: 0.35rem; }
.option-bars { display: flex; flex-direction: column; gap: 0.6rem; }

/* --- Rating distribution --- */

.distribution {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  margin-top: 0.9rem;
}

.distribution-col { flex: 1; text-align: center; }

.distribution-track {
  height: 44px;
  display: flex;
  align-items: flex-end;
  background: transparent;
}

.distribution-fill {
  width: 100%;
  background: var(--accent-soft);
  border-top: 2px solid var(--accent);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}

.distribution-label { font-size: 0.7rem; color: var(--text-muted); }

/* --- Text answers --- */

.quote-list { display: flex; flex-direction: column; gap: 0.5rem; }

.quote {
  margin: 0;
  padding: 0.65rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  color: var(--text);
}

/* --- Three-words word cloud --- */

.word-cloud {
  width: 100%;
  height: 16rem;
  background: var(--bg);
  border-radius: 8px;
}

/* --- eNPS --- */

.enps-score { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.75rem; }
.enps-value { font-size: 2rem; font-weight: 700; color: var(--text); }
.enps-caption { font-size: 0.75rem; color: var(--text-muted); }

.enps-bar { display: flex; height: 12px; }
.enps-bar .bar-fill { border-radius: 0; }

.enps-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
}
.enps-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }

.enps-segment {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.85rem;
}
.enps-segment-name { color: var(--text-muted); }
.enps-segment-score { font-weight: 650; color: var(--text); }

/* --- Filters --- */

.filters { margin-bottom: 1.25rem; }

.filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.filter-field { display: flex; flex-direction: column; gap: 0.2rem; min-width: 150px; }
.filter-field label { font-size: 0.72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.03em; }

.filter-field select {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
}
.filter-field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.filter-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.filter-chips-label { font-size: 0.75rem; color: var(--text-muted); }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 550;
}
.chip:hover { text-decoration: none; filter: brightness(0.96); }

/* A locked scope chip is informational, not a removable filter. */
.chip-locked {
  background: var(--surface-2, #eef0f3);
  color: var(--text-muted);
  cursor: default;
}

/* --- Suppressed notice --- */

.suppressed-notice { text-align: center; padding: 3rem 1.5rem; }
.suppressed-icon { font-size: 1.6rem; margin-bottom: 0.5rem; }
.suppressed-notice .muted { max-width: 28rem; margin: 0.25rem auto 0; }

/* --- Results: Beyond-style sidebar shell + section pages --- */

.results-body { margin: 0; }

.results-shell {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* The rail stays dark in light mode by design (matches Beyond). */
.results-sidebar {
  flex: 0 0 264px;
  width: 264px;
  background: #0f1729;
  color: #cbd2e0;
}

.results-sidebar-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 0.85rem;
  overflow-y: auto;
}

.results-sidebar-back {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: #f8fafc;
  font-weight: 650;
}
.results-sidebar-back:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.results-back-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; }
.results-back-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.results-nav { flex: 1; margin-top: 1.25rem; }
.results-nav-group + .results-nav-group { margin-top: 1.4rem; }
.results-nav-label {
  margin: 0 0 0.4rem;
  padding: 0 0.6rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6b7591;
}
.results-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.results-nav-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  color: #cbd2e0;
  font-size: 0.9rem;
  font-weight: 550;
  line-height: 1.3;
}
.results-nav-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }
.results-nav-link.is-active { background: rgba(255, 255, 255, 0.13); color: #fff; }
.results-nav-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.85; }

.results-sidebar-footer {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.results-sidebar-foot-link {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: none;
  color: #9aa4bd;
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.results-sidebar-foot-link:hover { background: rgba(255, 255, 255, 0.06); color: #fff; text-decoration: none; }

.results-main {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 1080px;
  padding: 2.25rem 2.5rem 4rem;
}

/* Results page header */
.results-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.results-header h1 { margin: 0; }
.results-header .results-meta { margin-top: 0.35rem; }
.results-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
}

/* Overview highlights row */
.highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  margin-bottom: 1.75rem;
}
.overall-caption { margin-top: 0.6rem; text-align: center; }
.enps-card .question-prompt { margin: 0.1rem 0 0.9rem; font-weight: 500; color: var(--text-muted); }

/* Section cards (overview) */
.section-cards-title { font-size: 1.15rem; margin-bottom: 0.25rem; }
.section-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.section-card {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--text);
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.section-card:hover {
  text-decoration: none;
  transform: translateY(-2px);
  border-color: var(--card-border-hover);
  box-shadow: var(--shadow-hover);
}
/* Unfiltered reference score shown under a gauge when a filter is active. */
.baseline-note {
  text-align: center;
  margin-top: 0.35rem;
  font-size: 0.8rem;
}

/* Success-factor cards reuse the section-card look but aren't links: no hover lift. */
.factor-card:hover {
  transform: none;
  border-color: var(--border);
  box-shadow: var(--shadow);
}
.factor-card .segment-bars { margin-top: 0.75rem; }
.section-card-head h3 { margin: 0; font-size: 1rem; }
.section-card-desc { margin-top: 0.25rem; font-size: 0.8rem; }
.section-card .gauge { margin: 0.6rem auto 0.35rem; }
.section-card-noscore { text-align: center; padding: 1.75rem 0; }
.section-card-meta {
  margin-top: auto;
  padding-top: 0.85rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.section-card-cta { color: var(--accent); font-weight: 600; }

.section-summary-card { margin-bottom: 1.5rem; }

/* Pure-SVG semicircular gauge */
.gauge { position: relative; width: 100%; max-width: 240px; margin: 0.25rem auto 0; }
.gauge-svg { display: block; width: 100%; height: auto; overflow: visible; }
.gauge-zone { fill: none; stroke-width: 13; }
.gauge-marker { fill: #fff; stroke: var(--text); stroke-width: 3; }
.gauge-readout {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7%;
  text-align: center;
  line-height: 1;
}
.gauge-value { display: block; font-size: 2.4rem; font-weight: 750; }
.gauge-out { font-size: 0.7rem; color: var(--text-muted); }

.gauge-small { max-width: 156px; }
.gauge-small .gauge-zone { stroke-width: 15; }
.gauge-small .gauge-value { font-size: 1.6rem; }
.gauge-small .gauge-out { font-size: 0.62rem; }

.text-high { color: var(--green); }
.text-mid { color: var(--amber); }
.text-low { color: var(--red); }

/* Narrow screens: rail collapses to a top strip. */
@media (max-width: 720px) {
  .results-shell { flex-direction: column; }
  .results-sidebar { flex-basis: auto; width: 100%; }
  .results-sidebar-inner { position: static; height: auto; }
  .results-main { padding: 1.5rem 1.25rem 3rem; }
}

/* --- Surveys index --- */

.survey-card-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.75rem;
}
.survey-card-top h2 a { color: var(--text); }

.survey-card-meta { color: var(--text-muted); font-size: 0.82rem; margin: 0.5rem 0 0.9rem; }

.badge {
  font-size: 0.7rem;
  font-weight: 650;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-live { background: var(--success-bg); color: var(--success-text); }
.badge-draft { background: var(--track); color: var(--text-muted); }
.badge-closed { background: var(--badge-closed-bg); color: var(--badge-closed-text); }

/* --- Survey show --- */

.survey-show-title { display: flex; align-items: center; gap: 0.6rem; }
.survey-show-title h1 { margin: 0.15rem 0; }
.survey-show-actions { display: flex; align-items: center; gap: 0.5rem; }
.survey-show-actions form { margin: 0; }

.survey-summary { margin-bottom: 1.25rem; }
.survey-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1.25rem;
  margin: 0;
}
.survey-summary-grid dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}
.survey-summary-grid dd { margin: 0; font-size: 0.95rem; font-weight: 600; }
.survey-summary-grid dd .muted { font-weight: 400; }

.survey-recipients-head { margin-bottom: 0.75rem; }
.survey-recipients-head h2 { margin: 0; font-size: 1.05rem; }
.survey-recipients-head .muted { margin-top: 0.2rem; }

.survey-recipient-rows { list-style: none; margin: 0; padding: 0; }
.survey-recipient-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border, #eee);
}
.survey-recipient-row:first-child { border-top: none; }
.survey-recipient-name { font-weight: 600; }
.survey-recipient-email { margin: 0; }
.survey-recipient-row .badge { margin-left: auto; }

.button {
  display: inline-block;
  padding: 0.45rem 0.9rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.button:hover { text-decoration: none; filter: brightness(1.05); }

.empty-state { text-align: center; color: var(--text-muted); padding: 3rem; }

/* --- Submission wizard --- */

.wizard-body { background: var(--bg); }

/* Two-column submission shell (step pages) */
.submission-shell { display: flex; min-height: 100vh; background: var(--bg); }

.submission-sidebar {
  display: none;
  width: 280px;
  flex-shrink: 0;
  border-right: 1px solid var(--border);
  background: var(--card-bg);
}
@media (min-width: 960px) { .submission-sidebar { display: block; } }

.submission-sidebar-inner {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 2rem 1.75rem;
}

.sidebar-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.7rem; font-weight: 600; color: var(--text-muted); margin: 0; }
.sidebar-section-of { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 0; }
.sidebar-percent { margin: 0.15rem 0 0; font-size: 0.78rem; }
.sidebar-track { height: 4px; margin-top: 0.8rem; }

.sidebar-sections { list-style: none; margin: 1.5rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.1rem; flex: 1; overflow-y: auto; }
.sidebar-link {
  display: flex; align-items: center; gap: 0.7rem;
  padding: 0.5rem 0.65rem; border-radius: 9px;
  font-size: 0.9rem; color: var(--text-muted); text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.sidebar-link.is-done { color: var(--text); }
.sidebar-link.is-done:hover { background: var(--bg); }
.sidebar-link.is-current { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.sidebar-link.is-future { opacity: 0.7; cursor: default; }
.sidebar-link-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.sidebar-marker {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 0.78rem; font-weight: 600;
  border: 1px solid var(--border); background: var(--card-bg); color: var(--text-muted);
}
.sidebar-marker-current { background: var(--accent); border-color: var(--accent); color: #fff; }
.sidebar-marker-completed { background: var(--green); border-color: var(--green); color: #fff; }
.sidebar-check { width: 14px; height: 14px; }

.sidebar-brand { margin: 1.5rem 0 0; height: 28px; width: auto; }

/* Main column */
.submission-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }

.submission-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--card-bg);
}
.topbar-back {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; color: var(--text); text-decoration: none;
}
.topbar-back:hover { background: var(--bg); }
.topbar-back.is-disabled { color: var(--border); }
.topbar-autosave { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; font-weight: 500; color: var(--text-muted); }
.topbar-autosave svg { width: 16px; height: 16px; color: var(--green); }

.submission-content {
  flex: 1;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

.section-intro { text-align: center; margin-bottom: 2rem; }
.section-pill {
  display: inline-block;
  background: var(--track); color: var(--text-muted);
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.3rem 0.75rem; border-radius: 999px;
}
.section-title { font-size: 1.85rem; font-weight: 700; line-height: 1.2; margin: 0.9rem 0 0; }
.section-desc { color: var(--text-muted); margin: 0.6rem auto 0; max-width: 30rem; }
.section-progress { margin-top: 1.5rem; text-align: left; }
.section-progress-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin: 0 0 0.4rem; }
.section-track { height: 4px; }
.progress-fill-muted { background: var(--text-muted); }

.submission-content .wizard-actions .button { padding: 0.6rem 1.3rem; font-size: 0.95rem; border-radius: 10px; }

.wizard {
  max-width: 560px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

.wizard-alert {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
  margin: 0 0 1rem;
}

.wizard-progress { margin-bottom: 1.25rem; }
.wizard-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.progress-track {
  height: 8px;
  width: 100%;
  background: var(--track);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.3s ease-out;
}

.wizard-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.75rem;
}

.wizard-prompt { font-size: 1.1rem; font-weight: 600; margin: 0; line-height: 1.45; }
.wizard-optional { margin: 0.35rem 0 0; }
.wizard-prompt + .wizard-input,
.wizard-prompt + .scale,
.wizard-prompt + .choice-list { margin-top: 1.25rem; }

.hidden { display: none; }

/* Conditional follow-ups revealed under a yes/no question. */
.wizard-follow-ups {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.wizard-follow-ups.hidden { display: none; } /* beats .wizard-follow-ups' display:flex */
.wizard-follow-up-prompt { font-size: 1rem; }
.review-follow-up { padding-left: 1.25rem; border-left: 2px solid var(--border); border-top: none; }

.wizard-input {
  display: block;
  width: 100%;
  padding: 0.6rem 0.75rem;
  font: inherit;
  color: var(--text);
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 1.25rem;
}
.wizard-input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

/* Scale (rating / eNPS) */
.scale { border: none; padding: 0; margin: 1.25rem 0 0; }
.scale-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 0.4rem; }
.scale-option { position: relative; }
.scale-option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.scale-option span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-weight: 650;
  background: var(--card-bg);
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.scale-option:hover span { border-color: var(--accent); }
.scale-option:has(input:checked) span { background: var(--accent); border-color: var(--accent); color: #fff; }
.scale-option:has(input:focus-visible) span { outline: 2px solid var(--accent); outline-offset: 2px; }
.scale-ends { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-top: 0.4rem; }

/* Choice lists */
.choice-list { border: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; }
.choice-option {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.choice-option:hover { border-color: var(--accent); }
.choice-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.choice-option input { accent-color: var(--accent); width: 1.1rem; height: 1.1rem; }

.word-hint { font-size: 0.8rem; color: var(--text-muted); margin: 0.5rem 0 0; }
.word-hint-ok { color: var(--green); font-weight: 600; }

/* Actions */
.wizard-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.75rem;
}
.wizard-actions-right { display: flex; align-items: center; gap: 1rem; }
.wizard-back { font-size: 0.9rem; color: var(--text-muted); }
.skip-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
  padding: 0;
}
.skip-link:hover { color: var(--text); }
.button-lg { padding: 0.6rem 1.4rem; font-size: 0.95rem; border: none; cursor: pointer; }

/* Intro */
.intro { text-align: center; }
.intro-eyebrow { text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; font-weight: 600; color: var(--text-muted); margin: 0 0 0.5rem; }
.intro .wizard-actions { justify-content: center; }
.intro-resume { text-align: center; }

/* Review */
.review-list { margin: 1.5rem 0; padding: 0; }
.review-item { padding: 0.85rem 0; border-top: 1px solid var(--border); }
.review-item dt { font-weight: 600; margin-bottom: 0.25rem; }
.review-item dd { margin: 0; display: flex; justify-content: space-between; gap: 1rem; color: var(--text-muted); }
.review-edit { font-size: 0.85rem; white-space: nowrap; }
.review-section { font-weight: 650; font-size: 0.95rem; color: var(--accent); padding-top: 1rem; margin-bottom: -0.5rem; }

/* Thank you / closed */
.thank-you { text-align: center; }
.thank-you-mark {
  width: 56px;
  height: 56px;
  margin: 0 auto 1rem;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--green);
  font-size: 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- People directory --- */

/* Master/detail: list on the left, person panel on the right once one is open. */
.people-layout-detail {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 900px) {
  .people-layout-detail { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); }
}

.people-main { min-width: 0; }

.people-search-field { flex: 1; min-width: 200px; }
.people-search-field input {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  width: 100%;
}
.people-search-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.people-table { padding: 0; overflow: hidden; }
.people-rows { list-style: none; margin: 0; padding: 0; }

/* Shared row grid: name grows, the two meta columns are fixed-ish. */
.people-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.3fr) minmax(0, 1.3fr);
  align-items: center;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
}

.people-head {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}

.people-link {
  color: var(--text);
  border-top: 1px solid var(--border);
  transition: background 0.12s;
}
.people-rows li:first-child .people-link { border-top: none; }
.people-link:hover { background: var(--bg); text-decoration: none; }
.people-link.is-selected { background: var(--accent-soft); }

.people-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-title { font-weight: 400; font-size: 0.82rem; margin-left: 0.3rem; }
.people-cell { color: var(--text-muted); font-size: 0.875rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.people-dash { color: var(--border); }

.people-sort { color: inherit; display: inline-flex; align-items: center; gap: 0.3rem; }
.people-sort:hover { color: var(--text); text-decoration: none; }
.people-sort-arrow { color: var(--accent); }

/* Person side panel */
.person-panel { position: sticky; top: 1.5rem; }
.person-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
}
.person-panel-head h2 { margin: 0; }
.person-panel-close {
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.2rem 0.4rem;
  border-radius: 6px;
}
.person-panel-close:hover { background: var(--bg); color: var(--text); text-decoration: none; }

.person-title { margin: 0.35rem 0 0; }
.person-title + .person-email { margin-top: 0.15rem; }

.person-section { margin-top: 1.25rem; }
.person-section h3 {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}
.person-empty { color: var(--text-muted); font-size: 0.875rem; margin: 0; }
.person-link { font-weight: 550; }

.person-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.person-chip-kind { color: var(--text-muted); font-weight: 500; }

.person-reports { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }

/* Index header with an action on the right */
.people-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

/* Panel admin actions */
.person-panel-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.button-light {
  background: var(--card-bg);
  color: var(--text);
  border: 1px solid var(--border);
}
.button-light:hover { background: var(--bg); filter: none; }
.person-remove {
  margin-left: auto;
  background: none;
  border: none;
  padding: 0.45rem 0.6rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-muted);
  border-radius: 8px;
  cursor: pointer;
}
.person-remove:hover { color: var(--red); background: var(--danger-bg); }

/* New / edit person form */
.form-page { max-width: 560px; }
.form-back { font-size: 0.85rem; color: var(--text-muted); display: inline-block; margin-bottom: 0.6rem; }
.form-back:hover { color: var(--text); }

.person-form { display: flex; flex-direction: column; gap: 1.25rem; margin-top: 1rem; }

.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field > label, .form-fieldset > legend {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field select {
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  width: 100%;
}
.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field select:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row > .form-field { flex: 1; min-width: 160px; }
.form-field-check { justify-content: flex-end; }
.form-field-check label { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 500; color: var(--text); }
.form-field-check input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }

.form-fieldset { border: none; padding: 0; margin: 0; position: relative; }
.form-fieldset legend { padding: 0; margin-bottom: 0.5rem; }
.form-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.form-check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.9rem; }
.form-check input { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }

/* Searchable chip multi-select (0..n relation fields) */
.multi-select {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  cursor: text;
}
.multi-select:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.ms-chips { display: contents; }
.ms-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.3rem 0.2rem 0.65rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 550;
}
.ms-chip-remove {
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  padding: 0.05rem 0.3rem;
  border-radius: 999px;
  cursor: pointer;
}
.ms-chip-remove:hover { background: var(--card-bg); }
/* Outranks the .form-field input[type="text"] chrome — the box is the field. */
.multi-select input[type="text"].ms-input {
  flex: 1;
  width: auto;
  min-width: 8rem;
  border: none;
  outline: none;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  padding: 0.25rem 0.15rem;
}
.ms-options {
  position: absolute;
  top: 100%; /* fieldsets misplace an absolute child's static position */
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0.3rem 0 0;
  padding: 0.25rem;
  list-style: none;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  max-height: 14rem;
  overflow-y: auto;
}
.ms-options button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.35rem 0.6rem;
  border: none;
  background: none;
  font: inherit;
  font-size: 0.9rem;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.ms-options button:hover { background: var(--bg); }
.ms-empty { padding: 0.35rem 0.6rem; font-size: 0.9rem; }

.form-errors {
  background: var(--danger-bg);
  border: 1px solid var(--danger-border);
  color: var(--danger-text);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.875rem;
}
.form-errors ul { margin: 0; padding-left: 1.1rem; }

.form-actions { display: flex; align-items: center; gap: 1rem; }
.form-cancel { font-size: 0.9rem; color: var(--text-muted); }
.form-cancel:hover { color: var(--text); }

/* Tabs shared by the Directory and Org chart views */
.people-tabs {
  display: flex;
  gap: 1.25rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.25rem;
}
.people-tab {
  padding: 0.5rem 0.1rem;
  margin-bottom: -1px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
}
.people-tab:hover { color: var(--text); text-decoration: none; }
.people-tab.is-active { color: var(--text); border-bottom-color: var(--accent); }

/* --- Org chart --- */

.orgchart-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.orgchart-search, .orgchart-filter {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.45rem 0.65rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
}
.orgchart-search { width: 18rem; max-width: 100%; }
.orgchart-search:focus, .orgchart-filter:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.orgchart-reset {
  margin-left: auto;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.45rem 0.4rem;
}
.orgchart-reset:hover { color: var(--text); }
.orgchart-zoom { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.orgchart-canvas {
  position: relative;
  overflow: hidden;
  height: 70vh;
  min-height: 480px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.orgchart-viewport {
  position: absolute;
  inset: 0;
  cursor: grab;
  user-select: none;
}
.orgchart-viewport:active { cursor: grabbing; }
.orgchart-surface { transform-origin: top left; }

.orgchart-lines { stroke: var(--border); stroke-width: 1; }
.orgchart-lines path { transition: opacity 150ms ease-out; }

.orgnode-bg { fill: var(--card-bg); stroke: var(--border); }
.orgnode-ring { stroke: var(--accent); }
.orgnode-name { fill: var(--text); }
.orgnode-sub { fill: var(--text-muted); }
.orgnode-toggle-circle { fill: var(--card-bg); stroke: var(--border); }
.orgnode-toggle-text { fill: var(--text-muted); }

.orgchart-nomatch {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--overlay);
  pointer-events: none;
}
.orgchart-nomatch.is-active { display: flex; }
.orgchart-nomatch p { color: var(--text-muted); font-size: 0.9rem; }

/* --- Forms (new survey) --- */

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.survey-form {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-field { display: flex; flex-direction: column; gap: 0.35rem; }
.form-field > label,
.form-field > legend { font-size: 0.8rem; font-weight: 600; color: var(--text-muted); }

.survey-form input[type="text"],
.survey-form textarea,
.survey-form select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font: inherit;
  color: var(--text);
}
.survey-form input[type="text"]:focus,
.survey-form textarea:focus,
.survey-form select:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.form-fieldset { border: none; padding: 0; margin: 0; }
.form-fieldset legend { padding: 0; margin-bottom: 0.5rem; }

.audience-option {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}
.audience-option + .audience-option { margin-top: 0.5rem; }
.audience-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.audience-option input { margin-top: 0.2rem; accent-color: var(--accent); }
.audience-option span { display: flex; flex-direction: column; }
.audience-option .muted { font-size: 0.8rem; margin: 0.1rem 0 0; }

.audience-unit {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin: 0.6rem 0 0 1.9rem;
}
/* Author `display` would otherwise beat the UA [hidden] rule, so restate it:
   keeps the Stimulus toggle (which sets the hidden attribute) actually hiding. */
.audience-unit[hidden] { display: none; }

.form-actions { display: flex; align-items: center; gap: 1rem; }
.form-cancel { font-size: 0.85rem; color: var(--text-muted); }

.form-errors {
  border: 1px solid var(--red);
  background: var(--danger-bg);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  color: var(--red);
}
.form-errors ul { margin: 0; padding-left: 1.1rem; }

.survey-card-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.25rem; }
.survey-card-actions form { margin: 0; }
.button-secondary { background: var(--card-bg); color: var(--accent); border: 1px solid var(--accent); }
.button-secondary:hover { background: var(--accent-soft); filter: none; }

/* --- Clickable cards + overflow menu ---
   The card's title link is stretched over the whole card; the ⋯ menu (and
   anything else in .survey-card-side) is lifted above it with a z-index so it
   stays independently clickable. */

.clickable-card { position: relative; transition: border-color 0.12s ease, box-shadow 0.12s ease; }
.clickable-card:hover { border-color: var(--card-border-hover); box-shadow: var(--shadow-hover); }
.clickable-card .stretched-link::after { content: ""; position: absolute; inset: 0; }
.clickable-card .stretched-link:hover { text-decoration: none; }

.survey-card-side { display: flex; align-items: center; gap: 0.5rem; position: relative; z-index: 1; }

.card-menu { position: relative; }
.card-menu-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 8px;
  color: var(--text-muted);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.card-menu-button::-webkit-details-marker { display: none; }
.card-menu-button:hover, .card-menu[open] .card-menu-button { background: var(--surface-2); color: var(--text); }

.card-menu-list {
  position: absolute;
  top: calc(100% + 0.25rem);
  right: 0;
  z-index: 20;
  min-width: 9.5rem;
  padding: 0.3rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow-hover);
}
.card-menu-list form { margin: 0; }
.card-menu-item {
  display: block;
  width: 100%;
  padding: 0.4rem 0.65rem;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-align: left;
  cursor: pointer;
}
.card-menu-item:hover { background: var(--surface-2); text-decoration: none; }
.card-menu-item-danger { color: var(--danger-text); }
.card-menu-item-danger:hover { background: var(--danger-bg); }
.card-menu-sep { height: 1px; margin: 0.3rem 0.35rem; background: var(--border); }

/* --- Questionnaire builder --- */

.qb-page { max-width: 820px; }

.qb-form { display: flex; flex-direction: column; gap: 1.25rem; }

/* Hideable, type-dependent panels. The class+attribute selector outranks any
   author display rule (e.g. .qb-check's flex), so the Stimulus `hidden` toggle
   actually hides the panel. */
.qb-toggle[hidden] { display: none; }

.qb-field { display: flex; flex-direction: column; gap: 0.35rem; }
.qb-field-label { font-size: 0.78rem; font-weight: 600; color: var(--text); }

.qb-form input[type="text"],
.qb-form select,
.qb-form textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font: inherit;
  color: var(--text);
}
.qb-form input[type="text"]:focus,
.qb-form select:focus,
.qb-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.qb-fieldset { border: none; padding: 0; margin: 0; }
.qb-fieldset .muted { margin: 0.1rem 0 0.6rem; }

.qb-language-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.4rem 1rem;
}

.qb-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; color: var(--text); }
.qb-check input[type="checkbox"] { accent-color: var(--accent); width: 1.05rem; height: 1.05rem; }

.qb-languages-readonly {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  background: var(--bg);
}
.qb-languages-readonly p { margin: 0.2rem 0 0; font-size: 0.9rem; }

/* Per-locale translatable inputs, side by side. */
.qb-translatable {
  display: grid;
  grid-template-columns: repeat(var(--qb-cols, 1), minmax(0, 1fr));
  gap: 0.75rem;
}
.qb-locale { display: flex; flex-direction: column; gap: 0.25rem; }
.qb-locale-label { font-size: 0.72rem; color: var(--text-muted); }
.qb-default-star { color: var(--accent); }

.qb-sections { display: flex; flex-direction: column; gap: 1rem; }

.qb-section {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card-bg);
  box-shadow: var(--shadow);
  padding: 0;
  margin: 0;
}
.qb-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.qb-section-title { margin: 0; font-size: 1rem; }
.qb-section-body { display: flex; flex-direction: column; gap: 1rem; padding: 1.1rem; }

.qb-row-actions { display: flex; align-items: center; gap: 0.25rem; }

.qb-icon-button {
  background: none;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
}
.qb-icon-button:hover { color: var(--text); background: var(--bg); }
.qb-icon-danger:hover { color: var(--red); background: var(--danger-bg); }

.qb-questions { display: flex; flex-direction: column; gap: 0.75rem; }
.qb-questions-heading,
.qb-followups-heading,
.qb-options-heading {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}
.qb-questions-list { display: flex; flex-direction: column; gap: 0.75rem; }

.qb-question {
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--bg);
  padding: 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.qb-question-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.qb-question-title { font-size: 0.85rem; font-weight: 650; color: var(--text); }

.qb-add-button {
  align-self: flex-start;
  background: var(--card-bg);
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
}
.qb-add-button:hover { background: var(--accent-soft); border-color: var(--accent); }
.qb-add-button-sm { font-size: 0.8rem; padding: 0.35rem 0.65rem; }
.qb-add-section { margin-top: 0.25rem; }

/* Conditional follow-ups, set apart with the soft accent tint. */
.qb-followups {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--accent-soft);
}
.qb-followups-list { display: flex; flex-direction: column; gap: 0.6rem; }
.qb-followup {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
}
.qb-followup-head { display: flex; align-items: center; justify-content: space-between; }
.qb-followup-label { font-size: 0.8rem; font-weight: 600; color: var(--text); }

.qb-scale-labels { display: flex; flex-direction: column; gap: 0.75rem; }

.qb-delete { color: var(--text-muted); border-color: var(--border); }
.qb-delete:hover { color: var(--red); border-color: var(--red); background: var(--danger-bg); }

/* Read-only show page */
.qb-show-section { margin-bottom: 1rem; }
.qb-show-section-head { display: flex; align-items: baseline; gap: 0.6rem; }
.qb-show-section-head h2 { font-size: 1.1rem; }
.qb-show-questions { margin: 0.75rem 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.6rem; }
.qb-show-question-prompt { font-weight: 550; }
.qb-show-type {
  display: inline-block;
  margin-left: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--track);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  vertical-align: middle;
}
.qb-show-scale { margin: 0.25rem 0 0; font-size: 0.85rem; }
.qb-show-followups { list-style: none; margin: 0.4rem 0 0; padding: 0 0 0 0.9rem; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 0.3rem; }
.qb-show-followups li { font-size: 0.9rem; color: var(--text-muted); }
.qb-show-followup-label { font-weight: 600; color: var(--text); }
.qb-show-options { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: 0.9rem; color: var(--text-muted); }

/* Answer-option editor (choice questions) */
.qb-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
}
.qb-options-list { display: flex; flex-direction: column; gap: 0.6rem; }
.qb-option { display: flex; align-items: flex-end; gap: 0.5rem; }
.qb-option > .qb-field { flex: 1; }

/* --- Questionnaire preview --- */
.qb-preview-langs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.25rem; }
.qb-preview-lang {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
}
.qb-preview-lang:hover { color: var(--text); text-decoration: none; background: var(--bg); }
.qb-preview-lang.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }

.qb-preview-section { margin-bottom: 1.25rem; }
.qb-preview-section h2 { font-size: 1.25rem; margin: 0.5rem 0 0; }
.qb-preview-questions { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 1.5rem; }
.qb-preview-prompt { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.75rem; }
.qb-preview-required { color: var(--red); margin-left: 0.15rem; }
.qb-preview-followups {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 2px solid var(--accent-soft);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.qb-preview-followup-note { font-size: 0.78rem; margin: 0 0 0.35rem; }
.qb-preview-followup .qb-preview-prompt { font-size: 0.95rem; margin-bottom: 0.5rem; }

.results-print-button { cursor: pointer; font-family: inherit; }

/* --- Print / Save-as-PDF: lay the results report out for paper ---
   Reuses the on-screen results page; the @media print rules strip the app
   chrome and interactive controls so the browser's "Save as PDF" yields a clean
   report. No server-side rendering, so the anonymity floor is honored for free
   (suppressed data is never in the DOM to begin with). */
@media print {
  /* Force the light palette on paper even when the OS is in dark mode, so the
     PDF is always dark-ink-on-white and readable. */
  :root {
    color-scheme: light;
    --bg: #f5f6f8;
    --card-bg: #ffffff;
    --border: #e4e6eb;
    --text: #1c2430;
    --text-muted: #69707d;
    --accent: #4f46e5;
    --accent-soft: #eef0fe;
    --green: #22c55e;
    --amber: #f5b829;
    --red: #ef4444;
    --track: #edeef2;
    --surface-2: #eef0f3;
    --danger-bg: #fef2f2;
    --danger-border: #fecaca;
    --danger-text: #b91c1c;
    --success-bg: #e8f8ee;
    --success-border: #bbf7d0;
    --success-text: #15803d;
    --badge-closed-bg: #fdeaea;
    --badge-closed-text: #b42318;
  }

  /* Print background colors so the score bars/badges actually render. */
  *, *::before, *::after {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Drop the app chrome and any interactive-only controls. */
  .app-sidebar,
  .results-sidebar,
  .no-print,
  .filters form,
  .filter-chips .chip span[aria-hidden] { display: none !important; }

  body { background: #fff; }
  .page { max-width: none; margin: 0; padding: 0; }
  /* The sidebar is gone on paper, so the report takes the full width. */
  .results-shell { display: block; }
  .results-main { max-width: none; padding: 0; }
  .results-header { margin-bottom: 0.5rem; }

  /* Active-filter/scope chips stay as static, non-clickable context. */
  .chip { border: 1px solid var(--border); color: var(--text); }

  /* Keep cards and sections from splitting across page breaks. */
  .overall-card,
  .results-section,
  .highlights,
  .section-card,
  .card,
  .question-card { break-inside: avoid; }

  .results-section { margin-top: 1rem; }

  @page { margin: 1.4cm; }
}

/* Respondent language switcher, fixed in the corner of the submission wizard. */
.lang-picker {
  position: fixed;
  top: 0.85rem;
  right: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  box-shadow: var(--shadow);
}
.lang-picker-icon { font-size: 0.9rem; line-height: 1; }
.lang-picker select {
  border: none;
  background: transparent;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}

/* Admin key-takeaways narrative + per-run threshold settings on the report. */
.takeaways-card { margin-bottom: 1rem; }
.report-settings-card { margin-bottom: 1rem; }
.report-settings-card > summary { cursor: pointer; font-weight: 650; color: var(--text); }
.report-settings-form { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 0.85rem; }
.report-field { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.85rem; color: var(--text-muted); }
.report-field textarea,
.report-field input {
  font: inherit;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
}
.report-thresholds { display: flex; gap: 1rem; flex-wrap: wrap; }
.report-thresholds .report-field { flex: 1; min-width: 170px; }
.report-settings-hint { font-size: 0.78rem; margin: 0; }

/* Dark-theme visual swaps that must beat the default light rules on source
   order (media queries don't add specificity), so they live at the end of the
   file rather than in the :root override block near the top. */
@media (prefers-color-scheme: dark) {
  /* Show the white logo variants, hide the graphite ones. */
  .auth-logo-light,
  .sidebar-brand-light { display: none; }
  .auth-logo-dark { display: block; }
  .sidebar-brand-dark { display: block; }

  /* The results/submission rails are dark in both themes; add an edge so they
     read against the now-dark page background. */
  .results-sidebar,
  .submission-sidebar { border-right: 1px solid var(--border); }
}

/* ── Org structure settings (organization/structure) ─────────────────── */
.structure-stack { display: flex; flex-direction: column; gap: 1.25rem; max-width: 1100px; }
.structure-card h2 { margin: 0; font-size: 1.05rem; }
.structure-card > .muted { margin: 0.35rem 0 0.5rem; max-width: 60rem; }
.structure-rows { display: flex; flex-direction: column; margin-top: 0.75rem; overflow-x: auto; }
.structure-row {
  display: grid;
  gap: 0.6rem;
  align-items: center;
  padding: 0.55rem 0;
  border-top: 1px solid var(--border);
}
.structure-row.structure-head { border-top: none; padding-bottom: 0.1rem; font-size: 0.75rem; color: var(--text-muted); }
.kind-row { grid-template-columns: minmax(11rem, 16rem) 8rem 1fr auto 5.5rem; }
.rule-row {
  grid-template-columns:
    minmax(7.5rem, 1fr) minmax(6.5rem, 0.9fr) auto minmax(6.5rem, 0.9fr)
    minmax(7rem, 1fr) auto auto 4rem auto 5.5rem;
}
.structure-row input[type="text"],
.structure-row input[type="number"],
.structure-row select {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--text);
  font: inherit;
  font-size: 0.875rem;
}
.structure-row input:focus, .structure-row select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.structure-check { display: flex; gap: 0.35rem; align-items: center; font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.structure-check input { accent-color: var(--accent); }
.structure-arrow { color: var(--text-muted); }
.kind-slug { font-family: ui-monospace, monospace; font-size: 0.8rem; color: var(--text-muted); }
.structure-use { font-size: 0.8rem; color: var(--text-muted); white-space: nowrap; }
.structure-save { cursor: pointer; font-family: inherit; font-size: 0.85rem; padding: 0.4rem 0.8rem; border: none; }
.structure-add { border-top: 2px solid var(--border); }
.structure-dimensions { margin-top: 1rem; }
/* Rows hold two sibling forms (update + delete); flatten them so all cells
   join the row's grid and columns align across rows. button_to's wrapper
   form gets the same treatment. */
.structure-row > form { display: contents; }

/* Units card: one collapsible group per kind, one row per unit. */
.structure-units { border-top: 1px solid var(--border); }
.structure-units summary {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.6rem 0.15rem;
  cursor: pointer;
  font-size: 0.9rem;
}
.structure-units summary:hover { color: var(--accent); }
.structure-units .structure-rows { margin: 0 0 0.75rem 1rem; }
.structure-units-empty { margin: 0.15rem 0 0.5rem; }
.unit-row { grid-template-columns: minmax(11rem, 18rem) 1fr auto 5.5rem; }
.unit-add-row { grid-template-columns: minmax(8rem, 12rem) minmax(11rem, 18rem) auto 1fr; }

/* --- Translation review screen ------------------------------------------- */

.tr-filter { margin: -0.5rem 0 1rem; }
.tr-filter-link { color: var(--text-muted); font-weight: 600; }
.tr-filter-link.is-active { color: var(--accent); }
.tr-attention-note { color: var(--danger-text); font-weight: 600; }

.tr-section { margin-bottom: 1.25rem; }
.tr-section-title { font-size: 1.05rem; margin: 0 0 0.5rem; }

.tr-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(18rem, 1.2fr);
  gap: 1rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--border);
}
.tr-row:first-child { border-top: 0; }
@media (max-width: 720px) { .tr-row { grid-template-columns: 1fr; } }

.tr-label {
  font-size: 0.7rem;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin: 0 0 0.25rem;
}
.tr-source-text { margin: 0; }

.tr-form input[type="text"],
.tr-form textarea {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  font: inherit;
  color: var(--text);
}
.tr-form input[type="text"]:focus,
.tr-form textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

.tr-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.tr-actions .button { padding: 0.3rem 0.7rem; font-size: 0.82rem; }

.tr-state {
  font-size: 0.7rem;
  font-weight: 650;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
  margin-right: auto;
}
.tr-state-missing { background: var(--danger-bg); color: var(--danger-text); }
.tr-state-stale { background: var(--amber); color: #422006; }
.tr-state-machine { background: var(--accent-soft); color: var(--accent); }
.tr-state-edited { background: var(--track); color: var(--text-muted); }
.tr-state-verified { background: var(--success-bg); color: var(--success-text); }

/* ── Viewer access (bulk leader-login provisioning) ───────────────────── */
.viewers-row {
  grid-template-columns: minmax(0, 1.8fr) minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.7fr) minmax(0, 1.4fr);
}
.viewers-row + .viewers-row { border-top: 1px solid var(--border); }
.viewers-person { display: flex; flex-direction: column; min-width: 0; }
.viewers-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0.8rem 0; }
.viewers-actions { display: flex; gap: 0.4rem; justify-content: flex-end; flex-wrap: wrap; }

.button-small { padding: 0.3rem 0.7rem; font-size: 0.78rem; border: none; cursor: pointer; }
.button-quiet { background: var(--track); color: var(--text-muted); }

.chip-warn { background: var(--badge-closed-bg); color: var(--badge-closed-text); border: none; font-size: 0.7rem; }

.credentials-card { margin-bottom: 1.2rem; border: 1px solid var(--success-border); }
.credentials-list { list-style: none; margin: 0.6rem 0 0; padding: 0; }
.credentials-list li {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 0.45rem 0;
  border-top: 1px solid var(--border);
  align-items: center;
}
.credentials-name { font-weight: 600; }
.credentials-list code { font-size: 0.85rem; user-select: all; }