:root {
  --brand: #aa182c;
  --brand-dark: #7f1020;
  --brand-light: #ff2745;
  --accent: #00a3c8;
  --accent-light: #7dc7d8;
  --accent-soft: #e3f5f9;
  --accent-tint: #def4f9;
  --ink: #1d252c;
  --muted: #7b868c;
  --line: #d9dee1;
  --bg: #f7f5f4;
  --panel: #ffffff;
  --panel-soft: #eef1f2;
  --danger: #ff2745;
  --danger-soft: #ffe4e8;
  --score-high: #2f8f67;
  --go: #22c55e;
  --go-strong: #15803d;
  --go-ink: #052e16;
  --go-soft: #bbf7d0;
  --score-mid: #f2c94c;
  --score-low: #aa182c;
  --shadow: 0 14px 32px rgba(29, 37, 44, 0.1);
  --text-xs: 13px;
  --text-sm: 15px;
  --text-md: 17px;
  --text-lg: 22px;
  --text-xl: 28px;
  --text-2xl: 36px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--text-sm);
  line-height: 1.45;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: default;
  opacity: 0.86;
}

textarea {
  resize: vertical;
}

.app-shell {
  min-height: 100vh;
}

.loading-panel {
  display: grid;
  min-height: 100vh;
  place-items: center;
  color: var(--muted);
}

.spinner {
  width: 34px;
  height: 34px;
  border: 3px solid var(--line);
  border-top-color: var(--brand);
  border-radius: 999px;
  animation: spin 0.9s linear infinite;
}

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

.topbar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: center;
  padding: 18px clamp(16px, 4vw, 40px);
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(170, 24, 44, 0.08);
}

.brand {
  display: flex;
  gap: 14px;
  align-items: center;
  min-width: 0;
}

.brand-mark {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #ffffff;
  background: var(--brand);
  border-radius: 8px;
  font-weight: 800;
}

.brand h1 {
  margin: 0;
  font-size: var(--text-lg);
  line-height: 1.1;
  font-weight: 700;
}

@media (min-width: 640px) {
  .brand h1 {
    font-size: var(--text-2xl);
  }
}

.top-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
}

.user-pill {
  font-weight: 700;
}

.select-label,
.field,
.field label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.checkbox-field {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 40px;
  color: var(--ink);
  font-size: 0.92rem;
  font-weight: 750;
}

.checkbox-field input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--brand);
}

select,
input,
textarea {
  width: 100%;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: none;
}

select,
input {
  min-height: 40px;
  padding: 8px 10px;
}

textarea {
  min-height: 82px;
  padding: 10px;
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 163, 200, 0.18);
}

.nav {
  display: flex;
  gap: 6px;
  padding: 10px clamp(12px, 4vw, 40px);
  background: #ffffff;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
}

.nav button,
.button,
.ghost-button,
.icon-button,
.danger-button,
.link-button {
  min-height: 38px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 8px 12px;
  background: transparent;
  color: var(--ink);
  font-weight: 750;
  font-size: var(--text-sm);
}

.nav button {
  color: var(--muted);
  white-space: nowrap;
}

.nav button.active {
  color: #ffffff;
  background: var(--brand);
}

.button {
  color: #ffffff;
  background: var(--brand);
}

.button:hover,
.nav button.active:hover {
  background: var(--brand-dark);
}

.ghost-button {
  background: #ffffff;
  border-color: var(--line);
}

.ghost-button:hover,
.icon-button:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 163, 200, 0.1);
}

.link-button {
  padding: 0;
  min-height: auto;
  color: var(--accent);
  text-decoration: underline;
  background: none;
  font-weight: 700;
}

.danger-button {
  color: var(--danger);
  background: #ffffff;
  border-color: var(--brand-light);
}

.danger-button:hover {
  background: var(--danger-soft);
}

.icon-button {
  width: 38px;
  padding: 0;
  background: #ffffff;
  border-color: var(--line);
}

.main {
  display: grid;
  gap: 20px;
  padding: 22px clamp(14px, 4vw, 40px) 44px;
  max-width: 100%;
  overflow-x: hidden;
}

.section {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.section-header {
  display: flex;
  gap: 14px;
  justify-content: space-between;
  align-items: end;
}

.section-header h2,
.panel h2,
.panel h3,
.candidate-card h3,
.question-card h3 {
  margin: 0;
}

.section-header h2,
.panel h2 {
  font-size: var(--text-lg);
}

.panel h3 {
  font-size: var(--text-md);
}

.section-header p,
.panel p {
  margin: 4px 0 0;
  color: var(--muted);
}

.panel {
  display: grid;
  gap: 16px;
  padding: 18px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.toolbar > * {
  min-width: 160px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

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

.role-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.role-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.role-card.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.role-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 750;
}

.role-context {
  display: grid;
  min-height: 40px;
  align-content: center;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 750;
}

.role-context strong {
  color: var(--ink);
  font-size: 1rem;
}

.role-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.multi-select {
  position: relative;
}

.multi-select summary {
  min-height: 40px;
  padding: 8px 10px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 750;
  list-style: none;
  cursor: pointer;
}

.multi-select[open] summary {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 163, 200, 0.12);
}

.multi-select summary::-webkit-details-marker {
  display: none;
}

.multi-select[open] .role-checklist {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  min-width: min(360px, 90vw);
  padding: 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.role-option {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 34px;
  padding: 6px 9px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 750;
}

.role-option input {
  width: 16px;
  min-height: 16px;
  accent-color: var(--brand);
}

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

.metric {
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.metric strong {
  display: block;
  margin-top: 4px;
  font-size: 1.55rem;
}

.metric span {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.metric em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.78rem;
  font-style: normal;
}

/* ---------------------------------------------------------------------
   Interview: shared bits (idle / live / debrief, lead + panelist)
   ------------------------------------------------------------------- */

.compact-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
  box-shadow: none;
}

.view-toggle {
  display: flex;
  justify-content: flex-end;
}

.stage-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stage-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 750;
}

.stage-pill.selected {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

.stage-pill-count {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.stage-pill.selected .stage-pill-count {
  color: rgba(255, 255, 255, 0.85);
}

.live-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--brand);
}

.stage-pill.selected .live-dot {
  background: #ffffff;
}

.stage-pill.active .stage-pill-count {
  color: rgba(255, 255, 255, 0.85);
}

.pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 800;
}

.pill.live {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

/* Someone else asks: muted, so your own turn stands out (grey text still about
   5.4:1, so the name stays readable). */
.pill.asker {
  color: #56636b;
  background: var(--panel-soft);
  border-color: var(--line);
}

/* "Your question": near-black green text on bright green (about 9:1). */
.pill.asker.self {
  color: var(--go-ink);
  background: var(--go);
  border-color: var(--go-strong);
  font-weight: 850;
}

/* "You're up!" beside your own pill on the live question, "You're next" on Up
   next. White on deep green (about 5:1). It pops in once per question
   (renderAskerPill adds .pop only the first time). */
.youre-up {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  color: #ffffff;
  background: var(--go-strong);
  border-radius: 999px;
  box-shadow: 0 0 0 3px var(--go-soft);
  font-size: var(--text-xs);
  font-weight: 850;
  white-space: nowrap;
}

.youre-up.pop {
  animation: youre-up-pop 420ms cubic-bezier(0.2, 0.9, 0.3, 1.4) both;
}

@keyframes youre-up-pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    opacity: 1;
    transform: scale(1.08);
  }
  to {
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .youre-up.pop {
    animation: none;
  }
}

.up-next .youre-up {
  min-height: 22px;
  padding: 1px 8px;
  font-size: 12px;
}

/* The corner prompt's asker line when the live question is yours. */
.catchup-asker.self {
  justify-self: start;
  padding: 1px 8px;
  color: var(--go-ink);
  background: var(--go);
  border-radius: 999px;
  font-weight: 850;
}

.pill.elapsed {
  font-variant-numeric: tabular-nums;
}

.pill.decision-pill {
  background: var(--accent-soft);
  border-color: var(--accent-light);
}

.pill.call-strong-yes {
  background: var(--score-high);
  color: #fff;
  border-color: var(--score-high);
}

.pill.call-yes {
  background: var(--accent-soft);
  border-color: var(--accent-light);
}

.pill.call-no {
  background: var(--panel-soft);
}

.pill.call-strong-no {
  background: var(--score-low);
  color: #fff;
  border-color: var(--score-low);
}

/* Idle screens */

.idle-grid {
  display: grid;
  grid-template-columns: minmax(240px, 340px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.idle-candidate-list {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.idle-candidate-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.idle-candidate-item.selected {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.idle-decided {
  margin-bottom: 12px;
}

.idle-decided summary {
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 750;
  cursor: pointer;
}

.history-list {
  display: grid;
  gap: 12px;
}

.history-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.history-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.history-calls {
  display: grid;
  gap: 6px;
}

.history-call {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
}

.history-call p {
  margin: 0;
  color: var(--muted);
}

.history-details summary {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.history-note {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.history-note-line {
  color: var(--muted);
  font-size: var(--text-xs);
}

.history-note-line span {
  color: var(--ink);
  font-weight: 700;
}

/* Live screens */

.live-shell {
  gap: 14px;
}

.live-top-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reviewing-banner,
.moved-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 700;
}

.reviewing-banner {
  color: var(--brand-dark);
  background: var(--danger-soft);
  border: 1px solid var(--brand-light);
}

/* The lead moved on while this panelist still has an unscored question:
   informational, so cyan rather than the crimson of "you are off live". */
.moved-banner {
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}

.reviewing-banner .ghost-button,
.moved-banner .button {
  flex: 0 0 auto;
}

.lead-control-bar {
  display: flex;
}

.live-card {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 4vw, 30px);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  min-width: 0;
}

.live-card.compact {
  gap: 10px;
  padding: 18px;
}

.question-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.live-question {
  margin: 0;
  max-width: 40ch;
  font-size: var(--text-lg);
  line-height: 1.2;
  font-weight: 700;
}

@media (min-width: 640px) {
  .live-question {
    font-size: var(--text-xl);
  }
}

.live-question.small {
  max-width: none;
  font-size: var(--text-md);
  font-weight: 700;
}

.competency-description {
  margin: 0;
  color: var(--muted);
  font-size: var(--text-sm);
}

.score-block {
  display: grid;
  gap: 12px;
}

.save-mark {
  display: block;
  min-height: 1.2em;
  color: var(--score-high);
  font-size: var(--text-xs);
  font-weight: 700;
}

.score-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.score-button {
  display: grid;
  min-height: 76px;
  place-items: center;
  padding: 8px 4px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.score-button strong {
  font-size: 1.5rem;
}

.score-button span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.score-button.selected {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

.score-button.selected span {
  color: #ffffff;
}

/* Hover and keyboard focus must never look like a selection: selected is solid
   crimson with white text, hover is only a thin accent border and a faint tint.
   Hover is skipped on touch screens, where it sticks to the last thing tapped. */
@media (hover: hover) {
  .score-button:hover:not(.selected):not(.arming) {
    background: var(--accent-soft);
    border-color: var(--accent);
  }
}

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

/* Arming: right after the question changes the buttons wait out a short delay
   so a tap aimed at the previous question cannot land on this one. */
.score-button.arming {
  opacity: 0.6;
  cursor: wait;
}

.score-confirmation {
  min-height: 1.4em;
  margin: 0;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 750;
}

.score-buttons.compact {
  gap: 6px;
}

.score-buttons.compact .score-button {
  min-height: 52px;
  padding: 4px 2px;
}

.score-buttons.compact .score-button strong {
  font-size: 1.15rem;
}

/* Up next: what the room hears after the live question. A muted card under the
   question (lead and panelist screens), quieter than the question and the score
   block on purpose. The text is clamped to three lines; bindUpNext shows
   Show more only when it overflows. */
.up-next {
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 10px 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.up-next-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: center;
}

.up-next-label {
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.up-next .pill {
  min-height: 22px;
  padding: 1px 8px;
  font-size: 12px;
  font-weight: 700;
}

.up-next .pill:not(.self) {
  background: #ffffff;
}

.up-next-text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--ink);
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.4;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.up-next-text.expanded {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  line-clamp: unset;
}

.up-next-text.clickable {
  cursor: pointer;
}

.up-next-toggle {
  justify-self: start;
  padding: 2px 0;
  color: var(--brand-dark);
  font-size: var(--text-xs);
}

/* Corner prompt: "Question N is up" (built once by mountCatchUpPrompt, outside
   #app). A toast-style card, fixed top right under the top bar. --catchup-top is
   set from the nav's position by placeCatchUpPrompt. */
.catchup-prompt {
  position: fixed;
  top: var(--catchup-top, 144px);
  right: 16px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title close"
    "asker asker"
    "go go";
  gap: 4px 8px;
  align-items: center;
  width: min(320px, calc(100vw - 32px));
  padding: 12px 12px 14px 16px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(29, 37, 44, 0.22);
  animation: catchup-in 180ms ease-out;
}

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

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .catchup-prompt {
    animation: none;
  }
}

.catchup-text {
  display: contents;
}

.catchup-title {
  grid-area: title;
  font-size: var(--text-md);
  line-height: 1.25;
}

.catchup-asker {
  grid-area: asker;
  font-size: var(--text-sm);
}

.catchup-go {
  grid-area: go;
  width: 100%;
  margin-top: 6px;
}

.catchup-close {
  grid-area: close;
  display: grid;
  width: 32px;
  height: 32px;
  padding: 0;
  place-items: center;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  font-size: 24px;
  line-height: 1;
}

.catchup-close:hover {
  color: var(--ink);
  background: var(--panel-soft);
}

.catchup-close:focus-visible,
.catchup-go:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Phone: full width with a 12px margin and one slim row (title over asker, the
   button and close beside them), so it hides as little of the screen as it can. */
@media (max-width: 599px) {
  .catchup-prompt {
    right: 12px;
    left: 12px;
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-areas:
      "title go close"
      "asker go close";
    gap: 0 8px;
    width: auto;
    padding: 8px 6px 8px 12px;
  }

  .catchup-title,
  .catchup-asker {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catchup-title {
    font-size: var(--text-sm);
  }

  .catchup-asker {
    font-size: var(--text-xs);
  }

  .catchup-go {
    width: auto;
    min-height: 36px;
    margin-top: 0;
    padding: 6px 10px;
    font-size: var(--text-xs);
    white-space: nowrap;
  }

  .up-next {
    gap: 4px;
    padding: 8px 10px;
  }
}

.question-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.question-square {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 800;
}

.question-square.scored {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
}

.question-square.current {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.question-square {
  position: relative;
}

/* The live question, drawn only when it is not the one on screen. */
.question-square.live::after {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 11px;
  height: 11px;
  background: var(--brand);
  border: 2px solid #ffffff;
  border-radius: 999px;
  content: "";
}

.question-strip-wrap {
  display: grid;
  gap: 6px;
}

.strip-legend {
  margin: 0;
}

.question-square:disabled {
  color: var(--muted);
  background: var(--panel-soft);
  opacity: 0.6;
}

.progress-list {
  display: grid;
  gap: 8px;
}

.progress-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

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

.status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--line);
}

.status-dot.done {
  background: var(--accent);
}

/* Review my scores (Debrief screens), Awaiting a decision (idle screen) */

.review-scores {
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.review-scores > summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  cursor: pointer;
  list-style: none;
}

.review-scores > summary::-webkit-details-marker {
  display: none;
}

.review-scores > summary::before {
  color: var(--muted);
  content: "▸";
}

.review-scores[open] > summary::before {
  content: "▾";
}

.review-body {
  display: grid;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.review-list {
  display: grid;
  gap: 10px;
}

.review-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.review-row.unscored {
  background: #ffffff;
  border-color: var(--score-mid);
  border-left-width: 4px;
}

.review-row-head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: flex-start;
  justify-content: space-between;
}

.review-q {
  flex: 1 1 14rem;
  min-width: 0;
}

.review-row .score-block {
  gap: 8px;
}

.review-row textarea {
  min-height: 56px;
}

.review-note {
  margin: 0;
  color: var(--muted);
  white-space: pre-wrap;
}

.pill.not-scored {
  color: var(--ink);
  background: #fff6d6;
  border-color: var(--score-mid);
}

.review-locked {
  margin: 0;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 750;
}

.info-line {
  margin: 0;
  padding: 10px 14px;
  color: var(--ink);
  background: #fff6d6;
  border: 1px solid var(--score-mid);
  border-radius: 8px;
  font-weight: 700;
}

.awaiting-card {
  gap: 12px;
}

.awaiting-item {
  display: grid;
  gap: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.awaiting-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
}

.awaiting-head .ghost-button {
  margin-left: auto;
}

.awaiting-body {
  display: grid;
  gap: 12px;
}

/* Debrief tab: an admin clicks a score cell to correct it */

.grid-cell-button {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 4px;
  color: inherit;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  font: inherit;
  text-align: center;
  cursor: pointer;
}

.grid-cell-button:hover {
  background: rgba(255, 255, 255, 0.7);
  border-color: var(--accent);
}

.grid-cell-button:focus-visible,
.grid-cell-button.open {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.grid-was {
  display: block;
  font-size: 0.7rem;
  font-weight: 650;
  opacity: 0.8;
}

.score-was {
  margin-left: 6px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.grid-edited {
  display: block;
  color: var(--brand-dark);
  font-size: 0.7rem;
  font-style: italic;
  font-weight: 800;
}

.grid-editor-row > td {
  padding: 0;
  background: var(--accent-soft);
}

.cell-editor {
  position: sticky;
  left: 0;
  display: grid;
  gap: 10px;
  box-sizing: border-box;
  width: min(100%, 560px);
  max-width: calc(100vw - 56px);
  padding: 14px;
}

.cell-editor-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
}

.cell-editor .toolbar > * {
  min-width: 0;
}

/* Debrief grid */

.score-grid-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

table.score-grid {
  min-width: 640px;
}

.score-grid .grid-group-row th {
  background: var(--panel-soft);
  color: var(--muted);
  text-align: left;
  font-size: var(--text-xs);
  text-transform: uppercase;
}

.grid-question-cell {
  min-width: 220px;
}

.grid-cell {
  min-width: 96px;
  text-align: center;
}

.grid-cell.grid-self-col,
th.grid-self-col {
  background: var(--accent-soft);
}

.grid-score {
  display: block;
  font-weight: 850;
}

.grid-note {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

tr.grid-row-spread {
  background: var(--danger-soft);
}

.tally-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.decision-control {
  display: grid;
  gap: 10px;
}

.decision-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.decision-button.selected {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

.call-card {
  gap: 12px;
}

.hire-prompt {
  flex-basis: 100%;
  margin: 0;
  padding: 10px 14px;
  color: var(--ink);
  background: var(--accent-soft);
  border: 1px solid var(--accent-light);
  border-radius: 8px;
}

.hire-prompt a {
  color: var(--brand-dark);
}

.earlier-stages {
  display: grid;
  gap: 10px;
}

.earlier-stage {
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.earlier-stage summary {
  color: var(--ink);
  font-weight: 750;
  cursor: pointer;
}

.earlier-stage .score-grid-wrap {
  margin-top: 12px;
}

/* Category rollup: Dashboard's candidates-by-category table, the compact
   per-stage table on the Debrief tab and each earlier-stage section, and the
   live Debrief phase (lead, panelist, solo). */

.category-rollup-total-row td {
  border-top: 2px solid var(--line);
  background: var(--panel-soft);
}

/* The per-stage Category rollup is the first section of every debrief, so it is
   kept tight: three panelists' worth of categories has to fit on a 1280x800
   screen under the header and the control bar, and four short columns never
   need the 720px a wide table gets. */
.category-rollup-panel {
  gap: 6px;
  padding: 12px 16px;
}

.rollup-head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
}

.category-rollup-table {
  min-width: 0;
}

.category-rollup-table th,
.category-rollup-table td {
  padding: 4px 10px;
}

.category-rollup-table .score-cell {
  min-width: 64px;
}

/* On a phone the four columns fit the card with no sideways scroll. */
@media (max-width: 599px) {
  .category-rollup-panel {
    padding: 12px 10px;
  }

  .category-rollup-table th,
  .category-rollup-table td {
    padding: 4px;
  }

  .category-rollup-table th {
    font-size: 0.68rem;
  }

  /* "7.33 of 12" and "3 of 3" stay on one line. The category name takes the wrap. */
  .category-rollup-table td {
    font-size: var(--text-xs);
  }

  .category-rollup-table td:nth-child(n + 2) {
    white-space: nowrap;
  }

  .category-rollup-table .score-cell {
    min-width: 0;
  }
}

.rollup-subtotal {
  display: block;
  font-weight: 850;
}

.rollup-subavg {
  display: block;
  font-weight: 500;
}

.rollup-leader {
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* Debrief tab: the permanent record for one candidate */

.debrief-header-top {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: start;
}

.debrief-header-top h2 {
  margin: 0;
}

.debrief-header-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}

.ghost-button[href] {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* One muted line per Reset interview, under the round's header on the Debrief tab. */
.reset-log {
  display: grid;
  gap: 2px;
  margin-top: 8px;
}

.reset-log p {
  margin: 0;
}

/* Substitutes for one interview: the muted line a substitute sees at the top of
   their screen, the "Panel for this interview" box (lead Idle screen, behind the
   "Panel" link on live and debrief, collapsed on the Projects tab's candidate
   cards), and the column note in the score grid. */
.substitute-note {
  margin: 0;
}

.panel-for-interview {
  display: grid;
  gap: 10px;
}

.panel-for-interview h3,
.panel-for-interview p {
  margin: 0;
}

.pfi-list {
  display: grid;
  gap: 8px;
}

.pfi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pfi-who {
  display: grid;
  flex: 1 1 200px;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.pfi-control {
  flex: 0 1 220px;
  min-width: 0;
}

.pfi-stale {
  color: var(--muted);
  background: var(--panel-soft);
}

.panel-for-interview-details,
.panel-link {
  min-width: 0;
}

.panel-for-interview-details > summary,
.panel-link > summary {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.panel-for-interview-details > summary .pill {
  margin-left: 6px;
}

.panel-for-interview-details[open] > summary,
.panel-link[open] > summary {
  margin-bottom: 8px;
}

.grid-sub {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 650;
}

/* Taking someone off a panel when they ask questions: who takes them. */
.remove-prompt {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 12px;
  background: #fff6d6;
  border: 1px solid var(--score-mid);
  border-radius: 8px;
  font-weight: 650;
}

.remove-prompt select {
  flex: 0 1 220px;
  width: auto;
  min-width: 160px;
}

/* A question whose asker is not on its stage's panel. */
.pill.warn {
  background: #fff6d6;
  border-color: var(--score-mid);
}

select.asker-off-panel {
  background: var(--danger-soft);
  border-color: var(--brand-light);
}

.field.asker-off-panel > span {
  color: var(--brand-dark);
}

.debrief-calls-list {
  display: grid;
  gap: 10px;
}

.debrief-call-row {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.debrief-call-row p {
  margin: 0;
  color: var(--muted);
}

/* One round at a time, picked with the stage pills; print lays out every round. */
.debrief-stage-pills {
  margin-bottom: 2px;
}

.debrief-stage-section {
  display: grid;
  gap: 16px;
  min-width: 0;
}

/* Dashboard: pipeline board */

.pipeline-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}

.pipeline-column {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
}

.pipeline-column-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pipeline-card-list {
  display: grid;
  gap: 8px;
}

.pipeline-card {
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.pipeline-card:not(:disabled):hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 163, 200, 0.1);
}

.pipeline-card.decided {
  opacity: 0.72;
}

/* Finished candidates: rejected, hired, or a Final-stage hold. */
.pipeline-column-decided {
  background: transparent;
  border-style: dashed;
}

.pipeline-column-decided .pipeline-card {
  opacity: 0.8;
}

.recent-row {
  cursor: pointer;
}

.recent-row:hover td {
  background: var(--accent-soft);
}

.recent-open-button {
  text-align: left;
}

.recent-table td:first-child {
  white-space: nowrap;
}

.pipeline-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

tr.row-archived td {
  color: var(--muted);
}

/* Projects tab: stage cards and their panel builders */

.stage-card-grid {
  display: grid;
  gap: 16px;
}

.stage-card {
  gap: 14px;
}

.panel-builder {
  display: grid;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.panel-builder h4 {
  margin: 0;
  font-size: var(--text-sm);
}

.panel-member-list {
  display: grid;
  gap: 8px;
}

.panel-member-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.panel-member-row > span {
  font-weight: 750;
}

.add-to-panel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.add-to-panel-row .select-label {
  flex: 1 1 220px;
}

.add-new-person summary {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.add-new-person form {
  margin-top: 10px;
}

.stage-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.stage-footer > a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: underline;
}

.copy-questions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.candidate-stage-group {
  display: grid;
  gap: 10px;
}

.candidate-stage-group h3 {
  margin: 0;
  font-size: var(--text-md);
}

.candidate-card-head {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.change-decision summary,
.suggested-email summary {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.moved-on-notice {
  display: grid;
  gap: 10px;
}

.email-panel {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.group-order-preview {
  display: grid;
  gap: 10px;
}

.group-order-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 4px;
  font-size: var(--text-sm);
}

.membership-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.membership-list li {
  padding: 2px 0;
}

/* Questions tab: stage switch pills */

.stage-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.stage-pill.active {
  color: #ffffff;
  background: var(--brand);
  border-color: var(--brand);
}

/* Phone: the stage buttons (Interview, Debrief, Dashboard, Questions) become
   one row of equal segments, the stage name over its count or state, instead of
   pills of different widths wrapping onto separate rows. */
@media (max-width: 599px) {
  .stage-switcher,
  .stage-pills {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 6px;
  }

  .stage-switcher .stage-pill,
  .stage-pills .stage-pill {
    position: relative;
    display: grid;
    gap: 2px;
    justify-items: center;
    align-content: center;
    min-width: 0;
    min-height: 44px;
    padding: 8px 6px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.2;
    text-align: center;
  }

  .stage-pill > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .stage-pill .stage-pill-count {
    font-size: 12px;
  }

  .stage-pill-sep {
    display: none;
  }

  .stage-pill .live-dot {
    position: absolute;
    top: 7px;
    right: 7px;
  }
}

/* Admin form grids (Projects / Questions / People) */

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.role-editor-grid {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1.2fr) minmax(140px, 0.65fr) auto;
  gap: 12px;
  align-items: end;
}

.role-add-grid {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.form-grid .wide {
  grid-column: span 2;
}

/* Easy Question Generator: "1. Describe the role" reads top to bottom
   (role title, key details, the three counts in one row, then GWC +
   Generate prompt), not the 4-column .form-grid used elsewhere. */
.generator-role-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.generator-count-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.generator-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* Core values, inside "1. Describe the role": one row per value with the name
   and what it means side by side, then Add a value, the include box, and Save. */
.generator-core-values {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.generator-core-values h4 {
  margin: 0;
  font-size: var(--text-sm);
}

.generator-core-values .small-note {
  margin: 0;
}

.generator-core-values .empty-state {
  padding: 12px;
  font-size: var(--text-xs);
}

.generator-core-rows {
  display: grid;
  gap: 10px;
}

.generator-core-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: 12px;
  align-items: end;
}

.generator-core-row .link-button {
  min-height: 40px;
  padding: 0 4px;
}

.generator-core-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.panelist-row,
.competency-row,
.candidate-card,
.question-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

/* People: every field starts at the top of its cell and the row wraps to fit,
   so no width pushes the page sideways. Sits on and the buttons take a full line. */
.panelist-row {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  align-items: start;
  min-width: 0;
}

.panelist-row > * {
  min-width: 0;
}

.panelist-sits,
.panelist-actions {
  grid-column: 1 / -1;
}

.panelist-projects .field {
  margin: 0;
}

.people-add-form {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  align-items: start;
}

.people-add-action {
  display: flex;
  align-items: end;
  align-self: stretch;
}

.sits-archived summary {
  color: var(--accent);
  font-weight: 700;
  cursor: pointer;
}

.sits-archived .membership-list {
  padding-left: 12px;
}

.question-card {
  grid-template-columns: auto minmax(0, 1fr);
}

.question-order {
  display: grid;
  gap: 6px;
  justify-items: center;
}

.order-badge {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  color: #ffffff;
  background: var(--accent);
  border-radius: 8px;
  font-weight: 850;
}

.question-fields {
  display: grid;
  gap: 12px;
}

.question-controls {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto auto;
  gap: 10px;
  align-items: end;
}

.candidate-card {
  grid-template-columns: 1fr;
}

.competency-row {
  grid-template-columns: minmax(180px, 0.8fr) minmax(220px, 1.3fr) auto auto;
  align-items: end;
}

.queue-list,
.candidate-list,
.question-list,
.panelist-list,
.competency-list {
  display: grid;
  gap: 10px;
}

.queue-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.queue-item.active {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.queue-number {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  color: #ffffff;
  background: var(--brand);
  border-radius: 8px;
  font-weight: 800;
}

.queue-title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--ink);
  font-weight: 750;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.queue-meta,
.small-note,
.cell-note {
  color: var(--muted);
  font-size: var(--text-xs);
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #ffffff;
}

th,
td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  background: var(--panel-soft);
  font-size: 0.78rem;
  letter-spacing: 0;
  text-transform: uppercase;
}

tr:last-child td {
  border-bottom: 0;
}

.score-cell {
  min-width: 76px;
  text-align: center;
  font-weight: 850;
}

.score-high {
  color: #ffffff;
  background: var(--score-high);
}

.score-mid {
  background: var(--score-mid);
}

.score-low {
  color: #ffffff;
  background: var(--score-low);
}

.bar-list {
  display: grid;
  gap: 12px;
}

.bar-row {
  display: grid;
  grid-template-columns: minmax(130px, 180px) minmax(160px, 1fr) 52px;
  gap: 12px;
  align-items: center;
}

.bar-track {
  height: 16px;
  overflow: hidden;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent-light), var(--score-high));
}

.empty-state {
  padding: 18px;
  color: var(--muted);
  background: #ffffff;
  border: 1px dashed var(--line);
  border-radius: 8px;
}

.toast {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 10;
  max-width: min(360px, calc(100vw - 36px));
  padding: 12px 14px;
  color: #ffffff;
  background: var(--ink);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.hidden {
  display: none;
}

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

  .idle-grid {
    grid-template-columns: 1fr;
  }

  .competency-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .topbar,
  .grid-2,
  .grid-3,
  .role-list,
  .metric-grid,
  .form-grid,
  .role-editor-grid,
  .role-add-grid,
  .candidate-card,
  .competency-row,
  .question-controls,
  .pipeline-board {
    grid-template-columns: 1fr;
  }

  .form-grid .wide {
    grid-column: auto;
  }

  .generator-count-row {
    grid-template-columns: 1fr;
  }

  .generator-action-row {
    flex-direction: column;
    align-items: stretch;
  }

  .generator-action-row .button {
    width: 100%;
  }

  .generator-core-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }

  .generator-core-row .link-button {
    justify-self: start;
    min-height: 40px;
  }

  .generator-core-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .generator-core-actions .ghost-button {
    width: 100%;
  }

  .top-actions,
  .section-header {
    justify-content: stretch;
  }

  .brand {
    align-items: start;
  }

  .lead-control-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .bar-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

@media (max-width: 599px) {
  .score-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .score-button {
    min-height: 80px;
  }

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

  .score-buttons.compact .score-button {
    min-height: 56px;
  }

  .score-buttons.compact .score-button span {
    font-size: 0.62rem;
  }

  .awaiting-head .ghost-button {
    margin-left: 0;
    width: 100%;
  }

  .moved-banner .button,
  .reviewing-banner .ghost-button {
    width: 100%;
  }

  /* Compact header + nav so the question is visible without scrolling
     (target: header + nav under 160px total at 375px). */
  .hide-mobile {
    display: none;
  }

  .brand h1 {
    display: none;
  }

  .brand-mark {
    width: 32px;
    height: 32px;
    font-size: 0.8rem;
  }

  /* The project, stage, and user pills can be long ("Andrew Morris · Super
     admin"), so the actions wrap onto a second line instead of scrolling
     sideways inside the bar. Sign out and Help are always on screen. */
  .topbar {
    flex-wrap: wrap;
    padding: 10px 16px;
    gap: 8px 10px;
  }

  .top-actions {
    flex: 1 1 0;
    flex-wrap: wrap;
    min-width: 0;
    justify-content: flex-end;
    gap: 6px 8px;
  }

  .top-actions > * {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .top-actions > .pill,
  .top-actions > .select-label {
    flex-shrink: 1;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .select-label-text {
    display: none;
  }

  .topbar select {
    min-height: 28px;
    padding: 4px 8px;
    font-size: var(--text-xs);
  }

  .nav {
    padding: 6px 16px;
  }

  .nav button {
    min-height: 32px;
    padding: 6px 10px;
  }

  /* Icon-sized "?" button, label kept for screen readers via aria-label */
  .help-top-button {
    position: relative;
    width: 28px;
    height: 28px;
    min-height: 28px;
    padding: 0;
    overflow: hidden;
    color: transparent;
    border: 1px solid var(--line);
    border-radius: 999px;
  }

  .help-top-button::after {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    width: 100%;
    height: 100%;
    color: var(--accent);
    font-weight: 800;
    place-items: center;
    content: "?";
  }
}

/* Top bar Help link, next to Sign out. Collapses to a "?" icon button on
   phones, see the max-width: 599px block below. It opens the Help menu. */

.help-top-button {
  white-space: nowrap;
}

/* Help menu: Help and Take the tour. Built once on <body> by mountHelpMenu and
   placed under the top bar's Help button by placeHelpMenu. */

.help-menu {
  position: fixed;
  z-index: 50;
  display: grid;
  min-width: 170px;
  padding: 6px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.help-menu-item {
  min-height: 40px;
  padding: 8px 12px;
  color: var(--ink);
  background: none;
  border: 0;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: left;
}

.help-menu-item:hover,
.help-menu-item:focus-visible {
  background: var(--accent-soft);
}

.help-menu-item:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: -3px;
}

/* First-login tour (built once by PanelTour.mount in tour.js, on <body>, outside
   #app). The shield blocks presses on the dimmed page. The spot is a transparent
   hole over the target: its huge box-shadow is the dimming. The card sits next to
   the target, or is a bottom sheet on a phone. */

.tour {
  position: fixed;
  inset: 0;
  z-index: 100;
}

.tour-shield {
  position: absolute;
  inset: 0;
}

.tour-spot {
  position: absolute;
  pointer-events: none;
  border-radius: 12px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px var(--accent), 0 0 0 9999px rgba(29, 37, 44, 0.66);
}

.tour-spot[data-mode="none"] {
  border-radius: 0;
  box-shadow: 0 0 0 9999px rgba(29, 37, 44, 0.66);
}

.tour-card {
  position: absolute;
  width: min(360px, calc(100vw - 24px));
  padding: 16px 18px 14px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(29, 37, 44, 0.38);
  animation: tour-in 180ms ease-out;
}

/* A small arrow from the card to the highlighted tab. */
.tour-card[data-side="below"]::before,
.tour-card[data-side="above"]::before {
  position: absolute;
  left: var(--tour-arrow-x, 40px);
  width: 14px;
  height: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}

.tour-card[data-side="below"]::before {
  top: -8px;
  border-right: 0;
  border-bottom: 0;
}

.tour-card[data-side="above"]::before {
  bottom: -8px;
  border-top: 0;
  border-left: 0;
}

@keyframes tour-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.tour-count {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
}

.tour-title {
  margin: 0 0 6px;
  font-size: var(--text-md);
  line-height: 1.25;
}

.tour-text {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

.tour-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
}

.tour-nav {
  display: flex;
  gap: 8px;
}

.tour-card button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* The spot and the card glide to the next step. Left off while scrolling or on a
   poll (the class is only on for a moment after a step change), and for anyone who
   asks for less motion. */
.tour-glide .tour-spot,
.tour-glide .tour-card[data-layout="float"] {
  transition: left 220ms ease, top 220ms ease, width 220ms ease, height 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .tour-card {
    animation: none;
  }

  .tour-glide .tour-spot,
  .tour-glide .tour-card[data-layout="float"] {
    transition: none;
  }
}

@media (max-width: 599px) {
  .tour-card,
  .tour-card[data-layout="sheet"] {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    padding: 16px 16px calc(14px + env(safe-area-inset-bottom, 0px));
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 16px 16px 0 0;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .tour-card[data-side="below"]::before,
  .tour-card[data-side="above"]::before {
    display: none;
  }

  .tour-actions .button,
  .tour-actions .ghost-button {
    min-height: 44px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .tour-skip {
    min-height: 44px;
  }
}

@media print {
  .tour,
  .help-menu {
    display: none !important;
  }
}

/* Help tab: content from public/help.js, rendered as collapsible sections */

.help-tab {
  max-width: 760px;
}

.help-section {
  padding: 16px 18px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.help-section summary {
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 750;
  cursor: pointer;
  list-style: none;
}

.help-section summary::-webkit-details-marker {
  display: none;
}

.help-section summary::before {
  display: inline-block;
  width: 1em;
  color: var(--muted);
  content: "▸";
}

.help-section[open] summary::before {
  content: "▾";
}

.help-section-body {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  line-height: 1.65;
}

.help-section-body p,
.help-section-body ul,
.help-section-body ol {
  margin: 0 0 12px;
}

.help-section-body p:last-child,
.help-section-body ul:last-child,
.help-section-body ol:last-child {
  margin-bottom: 0;
}

.help-section-body ul,
.help-section-body ol {
  padding-left: 22px;
}

.help-section-body li {
  margin-bottom: 8px;
}

.help-section-body li:last-child {
  margin-bottom: 0;
}

.help-section-body strong {
  color: var(--ink);
}

/* ---------------------------------------------------------------------
   Candidate files: Resume and files on the Projects tab's candidate card, the
   Resume link on the interview screens, and the quick-look panel it opens
   (built once by mountResumePanel, outside #app).
   ------------------------------------------------------------------- */

.context-head {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: center;
  min-width: 0;
}

.context-head h3 {
  margin: 0;
}

/* Resume link: small and quiet, a link with a document icon. */
.resume-link {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 28px;
  max-width: 100%;
  padding: 2px 8px;
  color: #006f8a;
  background: none;
  border: 0;
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 700;
  white-space: nowrap;
}

.resume-link:hover {
  background: var(--accent-soft);
  text-decoration: underline;
}

.resume-link:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.resume-link svg {
  flex: 0 0 auto;
}

.resume-more {
  color: var(--muted);
  font-weight: 600;
}

/* Projects tab: Resume and files */
.candidate-files {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.candidate-files-head {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  align-items: baseline;
  justify-content: space-between;
}

.candidate-files-head h4 {
  margin: 0;
  font-size: var(--text-sm);
}

.file-drop {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  padding: 12px;
  background: var(--panel-soft);
  border: 2px dashed var(--line);
  border-radius: 8px;
}

.file-drop.dragging {
  background: var(--accent-soft);
  border-color: var(--accent);
}

.file-drop-text {
  color: var(--muted);
  font-weight: 600;
}

.file-status {
  flex: 1 1 100%;
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.file-status.error {
  color: var(--brand-dark);
}

.file-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.file-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "badge name actions"
    "badge meta actions";
  gap: 2px 10px;
  align-items: center;
  min-width: 0;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.file-badge {
  grid-area: badge;
  min-width: 48px;
  padding: 4px 6px;
  color: var(--brand-dark);
  background: var(--danger-soft);
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 800;
  text-align: center;
}

.file-name {
  grid-area: name;
  min-width: 0;
  overflow: hidden;
  color: #006f8a;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  grid-area: meta;
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-actions {
  grid-area: actions;
  display: flex;
  gap: 8px;
  align-items: center;
}

.file-kind {
  width: auto;
  min-height: 36px;
  padding: 4px 8px;
}

.file-actions .danger-button {
  min-height: 36px;
  padding: 4px 10px;
}

@media (max-width: 599px) {
  .file-row {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "badge name"
      "badge meta"
      "actions actions";
    gap: 2px 10px;
  }

  .file-actions {
    padding-top: 6px;
  }

  .file-actions .file-kind {
    flex: 1 1 0;
  }
}

/* Resume quick look. A panel on the right (about 45% wide, 560px at least) that
   the page makes room for on a wide screen, with no backdrop, so the score
   buttons stay in reach. Under 1000px it floats over the right of the page. On a
   phone it is a full-screen sheet. */
:root {
  --resume-w: min(max(45vw, 560px), calc(100vw - 48px));
}

.resume-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  width: var(--resume-w);
  background: #ffffff;
  border-left: 1px solid var(--line);
  box-shadow: -10px 0 28px rgba(29, 37, 44, 0.16);
  animation: resume-in 180ms ease-out;
}

@keyframes resume-in {
  from {
    opacity: 0;
    transform: translateX(24px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .resume-panel {
    animation: none;
  }
}

.resume-panel-head {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 8px 10px;
  align-items: center;
  padding: 10px 10px 10px 16px;
  border-bottom: 1px solid var(--line);
}

.resume-panel-title {
  display: grid;
  flex: 1 1 0;
  min-width: 90px;
}

.resume-panel-name {
  overflow: hidden;
  font-size: var(--text-md);
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-panel-who {
  overflow: hidden;
  color: var(--muted);
  font-size: var(--text-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.resume-panel-new {
  white-space: nowrap;
}

.resume-panel-close {
  display: grid;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  place-items: center;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 999px;
  font-size: 28px;
  line-height: 1;
}

.resume-panel-close:hover {
  color: var(--ink);
  background: var(--panel-soft);
}

.resume-panel-close:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.resume-panel-select {
  flex: 1 1 100%;
  order: 10;
}

.resume-panel-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--panel-soft);
}

.resume-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100%;
  border: 0;
  background: #ffffff;
}

.resume-notice {
  display: grid;
  flex: 1 1 auto;
  gap: 14px;
  align-content: center;
  justify-items: center;
  padding: 24px;
  text-align: center;
}

.resume-notice p {
  margin: 0;
  max-width: 28ch;
  font-size: var(--text-md);
}

.resume-notice .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 160px;
  text-decoration: none;
}

.resume-open-big {
  width: 100%;
  max-width: 320px;
  min-height: 60px;
  font-size: var(--text-lg);
}

/* The corner prompt and the toast stay in reach above the panel. */
body.resume-open .catchup-prompt,
body.resume-open .toast {
  z-index: 40;
}

@media (min-width: 1000px) {
  body.resume-open {
    padding-right: var(--resume-w);
  }

  body.resume-open .catchup-prompt,
  body.resume-open .toast {
    right: calc(var(--resume-w) + 16px);
  }
}

@media (max-width: 599px) {
  .resume-panel {
    inset: 0;
    z-index: 60;
    width: auto;
    border-left: 0;
    box-shadow: none;
  }

  body.resume-open {
    overflow: hidden;
  }

  .resume-panel-head {
    padding-left: 12px;
  }
}

@media print {
  body.resume-open {
    padding-right: 0;
  }
}

/* ---------------------------------------------------------------------
   Print: the Debrief tab as a printable record (DESIGN.md "Debrief" row
   under Screens; PLAN.md Agent C item 1). app.js opens every <details> on
   beforeprint and restores it on afterprint; these rules hide the app
   chrome, keep the grids inside the page width, and force plain black on
   white so the HR file copy is legible off a laser printer.
   ------------------------------------------------------------------- */

@media print {
  .topbar,
  .nav,
  .catchup-prompt,
  .resume-panel,
  .resume-link,
  .candidate-files,
  .debrief-picker,
  .no-print,
  .grid-editor-row {
    display: none !important;
  }

  .grid-cell-button {
    border: 0 !important;
    padding: 0 !important;
  }

  .main {
    padding: 0;
    gap: 14px;
  }

  * {
    color: #000000 !important;
    background: #ffffff !important;
    border-color: #000000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .panel,
  .score-grid-wrap,
  .table-wrap {
    overflow: visible !important;
  }

  table,
  table.score-grid {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed;
    font-size: 11px;
  }

  .grid-question-cell {
    min-width: 0;
  }

  .grid-note {
    overflow: visible !important;
    white-space: normal !important;
  }

  details:not([open]) > *:not(summary) {
    display: block !important;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  .debrief-stage-section + .debrief-stage-section {
    page-break-before: always;
    break-before: page;
  }
}


/* ---------------------------------------------------------------------
   Permission levels and meeting control
   ------------------------------------------------------------------- */

.multi-select[open] .role-checklist {
  position: static;
  margin-top: 6px;
  min-width: 0;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: none;
}

.multi-select summary {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.multi-group-label {
  flex: 0 0 100%;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.multi-select-readonly {
  min-height: 40px;
  padding: 8px 10px;
  color: var(--ink);
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-weight: 750;
}

.role-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px;
  align-items: start;
}

.competency-row.read-only {
  grid-template-columns: minmax(160px, 0.8fr) minmax(200px, 1.4fr) auto;
  align-items: start;
}

.competency-read-description {
  color: var(--ink);
  font-weight: 500;
}

/* Control bar: who is running the live or debrief interview, above every screen */
.control-bar {
  justify-content: space-between;
  padding-top: 10px;
  padding-bottom: 10px;
  border-left: 4px solid var(--accent);
}

/* The candidate bar above a live debrief: tight, so the Category rollup under it
   stays on screen. */
.debrief-live-header {
  padding-top: 12px;
  padding-bottom: 12px;
}

.control-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
  align-items: baseline;
  min-width: 0;
}

.control-dropped {
  color: var(--brand);
  font-size: var(--text-xs);
  font-weight: 700;
}

.control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.control-give {
  min-width: min(100%, 190px);
}

/* Idle: the Control dropdown sits beside Start interview */
.start-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
}

.start-row .select-label {
  flex: 1 1 160px;
  min-width: 0;
}

@media (max-width: 599px) {
  .control-bar,
  .control-actions {
    align-items: stretch;
  }

  .control-actions .button,
  .control-give {
    width: 100%;
  }

  .start-row .button {
    flex: 1 1 100%;
  }
}

/* Reset interview on a live or debrief lead screen: far right of its bar, apart
   from Previous, Next, End interview, and Abandon. On a phone the bar stacks, so
   it gets its own full-width row with a little air above it. */
.lead-reset-button {
  margin-left: auto;
}

@media (max-width: 760px) {
  .lead-reset-button {
    width: 100%;
    margin-left: 0;
    margin-top: 6px;
  }
}

/* End with candidate questions: the stage setting (Projects tab stage cards and
   Templates tab stage sections) and the question it adds */
.closing-setting {
  display: grid;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.closing-text {
  min-height: 60px;
  resize: vertical;
}

.question-card.closing-question {
  border-left: 4px solid var(--accent);
}

.always-last {
  width: 52px;
  line-height: 1.2;
  text-align: center;
}

/* Offers: the candidate's answer to a Hire decision, and the search schedule */
.offer-pill.offer-pending {
  background: var(--accent-soft);
  border-color: var(--accent-light);
}

.offer-pill.offer-accepted {
  color: var(--go-ink);
  background: var(--go-soft);
  border-color: var(--go);
}

.offer-pill.offer-declined {
  color: var(--brand-dark);
  background: #f6e6e8;
  border-color: #e3bcc2;
}

.offer-box {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.offer-box.compact {
  gap: 8px;
  padding: 8px 10px;
}

.offer-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.offer-date {
  max-width: 220px;
}

.offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: flex-start;
}

.offer-form > summary {
  display: inline-flex;
  align-items: center;
  list-style: none;
  cursor: pointer;
}

.offer-form > summary::-webkit-details-marker {
  display: none;
}

.offer-form[open] {
  flex: 1 1 100%;
}

.offer-form-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 8px;
}

.pipeline-card-wrap {
  display: grid;
  gap: 6px;
}

.schedule-row,
.dashboard-schedule {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.schedule-pill {
  white-space: normal;
}

.schedule-pill.schedule-on-schedule {
  background: var(--accent-soft);
  border-color: var(--accent-light);
}

.schedule-pill.schedule-due-soon {
  background: #fff6d6;
  border-color: var(--score-mid);
}

.schedule-pill.schedule-overdue,
.schedule-pill.schedule-filled-late {
  color: var(--brand-dark);
  background: #f6e6e8;
  border-color: #e3bcc2;
}

.schedule-pill.schedule-filled-on-time {
  color: var(--go-ink);
  background: var(--go-soft);
  border-color: var(--go);
}

.role-editor-form {
  display: grid;
  gap: 12px;
}

.role-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
  gap: 12px;
  align-items: end;
}

.candidate-source-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 12px;
}

/* Hiring analytics: the section at the bottom of the Dashboard */
.analytics-section {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.analytics-header {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  align-items: end;
}

.analytics-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  flex: 1 1 320px;
  max-width: 640px;
}

.analytics-shelf {
  align-content: start;
}

.analytics-shelf-head h3 {
  font-size: var(--text-lg);
}

.analytics-shelf h4 {
  margin: 0 0 8px;
  font-size: var(--text-sm);
}

.analytics-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 12px;
  align-items: start;
}

.analytics-tile {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.analytics-tile > summary {
  display: grid;
  gap: 4px;
  list-style: none;
  cursor: pointer;
}

.analytics-tile > summary::-webkit-details-marker {
  display: none;
}

.analytics-tile.has-names:hover {
  border-color: var(--accent);
}

.analytics-number {
  font-size: var(--text-xl);
  font-weight: 800;
  line-height: 1.1;
}

.analytics-tile-label {
  font-weight: 750;
}

.analytics-math,
.analytics-hint,
.analytics-names-meta {
  color: var(--muted);
  font-size: var(--text-xs);
}

.analytics-hint {
  color: var(--accent);
  font-weight: 700;
}

.analytics-tile .when-open,
.analytics-tile[open] .when-closed {
  display: none;
}

.analytics-tile[open] .when-open {
  display: inline;
}

.analytics-names {
  display: grid;
  gap: 6px;
  margin: 10px 0 0;
  padding: 10px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.analytics-names li {
  display: grid;
  gap: 1px;
  overflow-wrap: anywhere;
}

.analytics-table {
  min-width: 600px;
}

.analytics-table td,
.analytics-table th {
  vertical-align: middle;
}

.analytics-total-row td {
  background: var(--panel-soft);
}

.analytics-stage-cell {
  min-width: 150px;
}

.funnel-bar {
  height: 10px;
  margin-top: 6px;
  overflow: hidden;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
}

.funnel-bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
}

.analytics-overall {
  margin: 0;
  color: var(--ink);
  font-size: var(--text-md);
  font-weight: 750;
}

.analytics-reasons {
  display: grid;
  gap: 8px;
}

.analytics-reason-row {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(100px, 1fr) minmax(90px, auto);
  gap: 10px;
  align-items: center;
}

.analytics-reason-row .funnel-bar {
  margin-top: 0;
}

.analytics-nudge {
  padding: 10px 12px;
  background: #fff6d6;
  border: 1px solid var(--score-mid);
  border-radius: 8px;
  font-weight: 700;
}

.gating-pill {
  color: var(--brand-dark);
  background: #f6e6e8;
  border-color: #e3bcc2;
}

.analytics-weak {
  color: var(--brand-dark);
  font-weight: 700;
}

.analytics-score {
  display: inline-block;
  min-width: 58px;
  padding: 2px 8px;
  border-radius: 6px;
}

@media (max-width: 599px) {
  .analytics-reason-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .analytics-controls {
    flex-basis: 100%;
    max-width: none;
  }
}

@media print {
  .analytics-section,
  .offer-box {
    display: none;
  }
}