/* C.3.2 head-hunter mocks overlay.
   Only add styles that prod web/styles.css doesn't already provide.
   Reuses every existing token (--color-*, --space-*, --radius-*,
   --shadow-*) so this overlay inherits the design system without
   redefining anything. */

/* Demo gallery / pricing tier grids */
.mock-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
.mock-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin: var(--space-6) 0;
}
@media (max-width: 900px) {
  .mock-grid-3, .mock-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .mock-grid-3, .mock-grid-4 { grid-template-columns: 1fr; }
}

/* Pipeline kanban (recruiter dashboard) */
.pipeline {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  margin-top: var(--space-6);
}
.pipeline__col {
  background: var(--color-surface-alt);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  min-height: 120px;
}
.pipeline__col-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  margin-bottom: var(--space-3);
}
.pipeline__count {
  background: var(--color-surface);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.pipeline-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out);
  text-decoration: none;
  color: inherit;
  display: block;
}
.pipeline-card:hover {
  border-color: var(--color-primary);
  text-decoration: none;
}
.pipeline-card__name {
  font-weight: 600;
  font-size: var(--text-sm);
  margin: 0 0 var(--space-1);
}
.pipeline-card__role {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0 0 var(--space-2);
}
.pipeline-card__verdict {
  font-size: var(--text-xs);
  font-weight: 600;
  margin: 0;
}
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  vertical-align: middle;
  margin-right: var(--space-1);
}
.dot--green  { background: var(--color-verified); }
.dot--yellow { background: var(--color-uncertain); }
.dot--red    { background: var(--color-dismissed); }
.dot--gray   { background: var(--color-text-subtle); }

@media (max-width: 1100px) {
  .pipeline { grid-template-columns: repeat(3, 1fr); }
}

/* Demo gallery card */
.demo-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  display: block;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.demo-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-ring-hover);
  text-decoration: none;
}
.demo-card__role {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  margin: 0 0 var(--space-2);
}
.demo-card__name {
  font-weight: 600;
  font-size: var(--text-md);
  margin: 0 0 var(--space-3);
}
.demo-card__verdict {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-3);
}
.demo-card__verdict--positive {
  background: var(--color-verified-weak);
  color: var(--color-verified);
}
.demo-card__verdict--mixed {
  background: var(--color-uncertain-weak);
  color: var(--color-uncertain);
}
.demo-card__verdict--negative {
  background: var(--color-dismissed-weak);
  color: var(--color-dismissed);
}
.demo-card__verdict--gray {
  background: var(--color-surface-inset);
  color: var(--color-text-muted);
}
.demo-card__hint {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  line-height: var(--leading-base);
  margin: 0;
}

/* Pricing tiers */
.tier {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: flex;
  flex-direction: column;
}
.tier--featured {
  border-color: var(--color-primary);
  border-width: 2px;
  position: relative;
  box-shadow: var(--shadow-ring);
}
.tier--featured::before {
  content: "Most popular";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-primary);
  color: white;
  padding: 2px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}
.tier__name {
  font-weight: 700;
  font-size: var(--text-lg);
  margin: 0 0 var(--space-2);
}
.tier__price {
  font-size: var(--text-3xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin: 0 0 var(--space-1);
}
.tier__price-unit {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  font-weight: normal;
}
.tier__desc {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  margin: 0 0 var(--space-4);
}
.tier__features {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-6);
  font-size: var(--text-sm);
  flex: 1;
}
.tier__features li {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}
.tier__features li:last-child {
  border-bottom: none;
}
.tier__features li::before {
  content: "✓";
  color: var(--color-primary);
  font-weight: 700;
  flex-shrink: 0;
}
.tier__features li.muted::before {
  content: "—";
  color: var(--color-text-subtle);
}
.tier__features li.muted {
  color: var(--color-text-subtle);
}

/* Repo scope picker (candidate OAuth) */
.repo-scope-list {
  list-style: none;
  padding: 0;
  margin: var(--space-4) 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-surface);
}
.repo-scope-row {
  padding: var(--space-3) var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-bottom: 1px solid var(--color-divider);
}
.repo-scope-row:last-child { border-bottom: 0; }
.repo-scope-row:hover { background: var(--color-surface-alt); }
.repo-scope-row__name {
  flex: 1;
  font-weight: 500;
  font-size: var(--text-sm);
}
.repo-scope-row__meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-weight: normal;
  margin-left: var(--space-2);
}
.repo-badge {
  font-size: 10px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.05em;
  font-weight: 600;
  flex-shrink: 0;
}
.repo-badge--public { background: var(--color-verified-weak); color: var(--color-verified); }
.repo-badge--private { background: var(--color-surface-inset); color: var(--color-text-muted); }

/* Mock-only stepper override (5-step horizontal) */
.mock-stepper {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-6) 0;
}
.mock-step {
  flex: 1;
  padding: var(--space-3);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  border: 1px solid var(--color-border);
}
.mock-step__num {
  color: var(--color-text-subtle);
  font-weight: 600;
}
.mock-step__title {
  font-weight: 600;
  margin-top: var(--space-1);
  color: var(--color-text);
}
.mock-step--active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}
.mock-step--active .mock-step__num,
.mock-step--active .mock-step__title { color: white; }
.mock-step--done {
  background: var(--color-verified);
  color: white;
  border-color: var(--color-verified);
}
.mock-step--done .mock-step__num,
.mock-step--done .mock-step__title { color: white; }

/* Consultant note callout (Boutique tier) */
.consultant-note {
  background: var(--color-uncertain-weak);
  border-left: 4px solid var(--color-uncertain);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}
.consultant-note__head {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-uncertain);
  margin-bottom: var(--space-2);
}
.consultant-note__body {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
  color: var(--color-text);
  margin: 0;
}

/* Anti-doubt strip (client share) */
.anti-doubt {
  background: var(--color-summary-weak);
  border-left: 4px solid var(--color-summary);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  margin: var(--space-4) 0;
}
.anti-doubt strong { color: var(--color-summary); }

/* InMail one-liner block */
.inmail-block {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  line-height: var(--leading-loose);
  margin: var(--space-3) 0;
  white-space: pre-wrap;
  color: var(--color-text);
}

/* Share link block */
.share-link-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  margin-top: var(--space-3);
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.share-link-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-subtle);
  min-width: 0;
}

/* Capsule meta box (right sidebar on capsule detail) */
.capsule-meta {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.capsule-meta__row {
  display: flex;
  justify-content: space-between;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-divider);
  font-size: var(--text-xs);
}
.capsule-meta__row:last-child { border-bottom: 0; }
.capsule-meta__label { color: var(--color-text-subtle); }

/* Mock body wrapper to match prod app-main spacing */
.mock-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6);
}
.mock-main--narrow { max-width: 720px; }
.mock-main--wide { max-width: 1280px; }

/* Hero (landing) */
.mock-hero {
  text-align: center;
  padding: var(--space-16) var(--space-6) var(--space-8);
}
.mock-hero h1 {
  font-size: var(--text-4xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  max-width: 720px;
  margin: 0 auto var(--space-4);
  color: var(--color-text);
}
.mock-hero__sub {
  font-size: var(--text-lg);
  max-width: 560px;
  margin: 0 auto var(--space-6);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
}
.mock-hero__cta {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
.mock-hero__hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.audience-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  background: var(--color-verified-weak);
  color: var(--color-verified);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
  margin-bottom: var(--space-4);
}

/* Quota pill (recruiter dashboard nav) */
.quota-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-4);
  background: var(--color-surface-alt);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  border: 1px solid var(--color-border);
}
.quota-pill__bar {
  width: 80px;
  height: 6px;
  background: var(--color-border);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.quota-pill__fill {
  height: 100%;
  background: var(--color-primary);
}

/* Stat blocks (week summary) */
.stat-block {
  display: flex;
  flex-direction: column;
}
.stat-block__label {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0;
}
.stat-block__value {
  font-size: var(--text-3xl);
  font-weight: 700;
  margin: var(--space-1) 0 0;
}
.stat-grid {
  display: flex;
  gap: var(--space-8);
}

/* Source-panel inline (client share) */
.source-panel-inline {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin: var(--space-4) 0;
}
.source-panel-inline__title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0 0 var(--space-1);
}
.source-panel-inline__meta {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0 0 var(--space-3);
}
.source-panel-inline__snippet {
  background: #0F172A;
  color: #E2E8F0;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-base);
  overflow-x: auto;
  white-space: pre;
  margin: 0;
}

/* Disclosure (candidate invite) */
.mock-disclosure {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--text-sm);
  text-align: left;
  border: 1px solid var(--color-border);
}
.mock-disclosure summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--color-primary);
}
.mock-disclosure ul {
  padding-left: var(--space-5);
  margin: var(--space-3) 0 0;
}
.mock-disclosure li { margin-bottom: var(--space-1); }

/* Invite hero (candidate landing) */
.invite-hero {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-12) var(--space-8);
  text-align: center;
}
.firm-logo {
  width: 64px;
  height: 64px;
  background: #0F172A;
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
  font-size: var(--text-xl);
}

/* Reuse — prod's button doesn't have a "danger ghost" variant */
.button--danger-ghost {
  color: var(--color-dismissed);
  border-color: var(--color-dismissed-weak);
  background: transparent;
}
.button--danger-ghost:hover {
  background: var(--color-dismissed-weak);
  border-color: var(--color-dismissed-ring);
}

/* Section heads in capsule body — match the verdict section spacing */
.mock-section-head {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-subtle);
  margin: var(--space-6) 0 var(--space-2);
}

/* ===== Source panel (slide-in from right) ===== */
#mock-source-panel { position: fixed; inset: 0; z-index: 50; }
#mock-source-panel[hidden] { display: none; }
.mock-source-panel__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: blur(2px);
}
.mock-source-panel__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 90vw);
  background: var(--color-surface);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 32px rgba(15, 23, 42, 0.12);
  display: flex; flex-direction: column;
  animation: mockSlideIn 180ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes mockSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
.mock-source-panel__header {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
  display: flex; gap: var(--space-3); align-items: flex-start;
}
.mock-source-panel__header > div { flex: 1; }
.mock-source-panel__title {
  margin: var(--space-1) 0 var(--space-1);
  font-size: var(--text-md);
  font-weight: 600;
}
.mock-source-panel__meta {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}
.mock-source-panel__body {
  flex: 1; overflow: auto;
  padding: var(--space-5) var(--space-6);
}
.mock-source-panel__body pre {
  background: #0F172A;
  color: #E2E8F0;
  padding: var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: var(--leading-base);
  overflow-x: auto;
  margin: 0;
  white-space: pre;
}
.mock-source-panel__body p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  margin: var(--space-3) 0 0;
}
.mock-source-panel__footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
}
.anchor-phrase[data-anchor] { cursor: pointer; }

/* ===== Toast notifications ===== */
#mock-toast-host {
  position: fixed;
  top: var(--space-6); right: var(--space-6);
  z-index: 100;
  display: flex; flex-direction: column; gap: var(--space-2);
  pointer-events: none;
}
.mock-toast {
  background: #0F172A;
  color: white;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  animation: mockToastIn 180ms cubic-bezier(0.2, 0, 0, 1);
  min-width: 240px;
  pointer-events: auto;
}
.mock-toast--success { border-left: 4px solid var(--color-verified); }
.mock-toast--out {
  animation: mockToastOut 320ms cubic-bezier(0.2, 0, 0, 1) forwards;
}
@keyframes mockToastIn {
  from { transform: translateX(120%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes mockToastOut {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(120%); opacity: 0; }
}

/* ===== View-as toggle (candidate capsule preview) ===== */
.view-as__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
}
.view-as__group {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.view-as__btn {
  padding: 6px 14px;
  font-size: var(--text-sm);
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  border-left: 1px solid var(--color-border);
}
.view-as__btn:first-child { border-left: 0; }
.view-as__btn--active {
  background: var(--color-primary);
  color: white;
}
.view-as__hint {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* ===== Toast — error variant ===== */
.mock-toast--error { border-left: 4px solid var(--color-dismissed); }

/* ===== OAuth scope-cancelled banner ===== */
.oauth-scope-banner {
  background: var(--color-dismissed-weak);
  border: 1px solid var(--color-dismissed-ring);
  border-left: 4px solid var(--color-dismissed);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}
.oauth-scope-banner__head {
  font-weight: 600;
  color: var(--color-dismissed);
  margin: 0 0 var(--space-1);
}
.oauth-scope-banner__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
  line-height: var(--leading-loose);
}

/* ===== Modal ===== */
#mock-modal-host {
  position: fixed; inset: 0;
  display: none;
  z-index: 200;
  align-items: center; justify-content: center;
}
#mock-modal-host.mock-modal--open { display: flex; }
.mock-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(2px);
}
.mock-modal__sheet {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  width: min(440px, 90vw);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.24);
  animation: mockModalIn 180ms cubic-bezier(0.2, 0, 0, 1);
}
@keyframes mockModalIn {
  from { transform: scale(0.96); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.mock-modal__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
  font-weight: 600;
}
.mock-modal__body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  margin-bottom: var(--space-5);
}
.mock-modal__actions {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* ====================================================================
 * Capsule verdict banner (shared by /invite/ + /share/c/). Design
 * tokens only, no inline rgba. Emoji baseline is normalised against
 * the label via align-items: baseline so a 1.25em emoji sits on the
 * same optical line as the bold label at any font weight.
 * ==================================================================== */
.capsule-verdict-banner {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(0, 0, 0, 0.04);
}
.capsule-verdict-banner--positive {
  background: var(--color-verified-weak);
  box-shadow:
    0 0 0 1px var(--color-verified-ring),
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(0, 0, 0, 0.04);
}
.capsule-verdict-banner--mixed {
  background: var(--color-uncertain-weak);
  box-shadow:
    0 0 0 1px var(--color-uncertain-ring),
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(0, 0, 0, 0.04);
}
.capsule-verdict-banner--negative {
  background: var(--color-dismissed-weak);
  box-shadow:
    0 0 0 1px var(--color-dismissed-ring),
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(0, 0, 0, 0.04);
}
.capsule-verdict-banner__emoji {
  font-size: 1.25em;
  line-height: 1;
  flex: 0 0 auto;
}
.capsule-verdict-banner__label {
  font-weight: 600;
  font-size: var(--text-base);
  color: var(--color-text);
  text-wrap: balance;
}

/* Signed-state border on the post-sign panel. Uses --color-verified
 * (#059669) instead of the Tailwind-style #22c55e fallback the v1
 * sign UX shipped with. */
.capsule-sign-success {
  border: 1px solid var(--color-verified) !important;
}

/* ====================================================================
 * Recruiter dashboard (/dashboard/) — v1.1 polish.
 * Replaces the inline-style soup with semantic class names + status
 * pills the recruiter can scan at a glance.
 * ==================================================================== */
.dashboard-form {
  display: flex;
  gap: var(--space-3);
  align-items: flex-end;
  margin: var(--space-4) 0;
}
.dashboard-form__field {
  flex: 1;
}
.dashboard-status {
  margin: var(--space-3) 0;
  min-height: 1.5em;
  font-size: var(--text-sm);
}
.dashboard-empty {
  color: var(--color-text-subtle);
  font-size: var(--text-sm);
}
.dashboard-section-head--gap {
  margin-top: var(--space-6);
}
.dashboard-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.dashboard-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 1px 2px -1px rgba(0, 0, 0, 0.06),
    0 2px 4px 0 rgba(0, 0, 0, 0.04);
  transition: box-shadow 160ms ease;
}
.dashboard-row:hover {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.08),
    0 4px 8px -2px rgba(0, 0, 0, 0.08),
    0 8px 16px -4px rgba(0, 0, 0, 0.06);
}
.dashboard-row__name {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-weight: 500;
  color: var(--color-text);
  min-width: 0;
}
.dashboard-row__meta {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  font-weight: 400;
}
.dashboard-row__views {
  font-variant-numeric: tabular-nums;
}
.dashboard-row__action {
  flex: 0 0 auto;
}
.dashboard-hint {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

.app-nav__user {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
  margin-right: var(--space-3);
  font-weight: 400;
}

/* Status / verdict pills. Tone tokens map to the verdict register's
 * --color-verified / --color-uncertain / --color-dismissed family.
 * "info" (blue-ish) is for non-terminal positive progress without
 * implying a verified verdict yet. */
.dashboard-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  flex: 0 0 auto;
}
.dashboard-pill--verified {
  background: var(--color-verified-weak);
  color: var(--color-verified);
  box-shadow: inset 0 0 0 1px var(--color-verified-ring);
}
.dashboard-pill--uncertain {
  background: var(--color-uncertain-weak);
  color: var(--color-uncertain);
  box-shadow: inset 0 0 0 1px var(--color-uncertain-ring);
}
.dashboard-pill--dismissed {
  background: var(--color-dismissed-weak);
  color: var(--color-dismissed);
  box-shadow: inset 0 0 0 1px var(--color-dismissed-ring);
}
.dashboard-pill--info {
  background: #EEF2FF;
  color: #4338CA;
  box-shadow: inset 0 0 0 1px #C7D2FE;
}
.dashboard-pill--neutral {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

/* ====================================================================
 * Site footer (head-hunter landing). Trust signals: legal, contact,
 * Ed25519 signing claim. The footer was missing before C.3.2.27.5,
 * which read as a draft/dev page to a paying recruiter.
 * ==================================================================== */
.site-footer {
  margin-top: var(--space-12);
  padding: var(--space-8) var(--space-6);
  background: var(--color-surface-alt);
  border-top: 1px solid var(--color-divider);
}
.site-footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.site-footer__brand {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}
.site-footer__brand .brand__name {
  font-size: var(--text-lg);
  font-weight: 600;
}
.site-footer__tagline {
  font-size: var(--text-sm);
  color: var(--color-text-subtle);
}
.site-footer__nav {
  display: flex;
  gap: var(--space-4);
  font-size: var(--text-sm);
}
.site-footer__nav a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.site-footer__nav a:hover {
  color: var(--color-primary);
  text-decoration: underline;
}
.site-footer__legal {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0;
  line-height: var(--leading-loose);
}
.site-footer__legal a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* Audience badge: was --color-verified-weak (same green as the
 * verified verdict pill), reading as a verification claim instead
 * of an audience tag. Use the indigo info tone instead. */
.audience-badge {
  background: #EEF2FF;
  color: #4338CA;
  box-shadow: inset 0 0 0 1px #C7D2FE;
}

/* ====================================================================
 * Public capsule share page (/share/c/{token}). The page the
 * hiring client sees — highest-stakes surface. Styling target is
 * "Stripe-grade signed receipt", not "marketing card".
 * ==================================================================== */
.capsule-share-card {
  margin-top: var(--space-6);
}
.capsule-repo {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  margin: 0 0 var(--space-4);
}
.capsule-repo code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.92em;
  color: var(--color-text);
  background: var(--color-surface-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.capsule-atom {
  margin: var(--space-5) 0;
}
.capsule-atom__heading {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
.capsule-atom__body {
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: 1.7;
  text-wrap: pretty;
}
.capsule-atom__body p {
  margin: 0 0 var(--space-2);
}

.capsule-synthesis {
  margin: var(--space-6) 0 var(--space-4);
  padding: var(--space-5);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.capsule-synthesis__heading {
  font-size: var(--text-base);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}
.capsule-synthesis__body {
  font-size: var(--text-sm);
  line-height: 1.7;
  text-wrap: pretty;
}
.capsule-synthesis__body h4 {
  margin-top: var(--space-4);
}
.capsule-synthesis__body p {
  margin: 0 0 var(--space-2);
}

.capsule-cite {
  font-size: 0.75em;
  vertical-align: super;
  color: var(--color-text-subtle);
  font-variant-numeric: tabular-nums;
  margin-left: 2px;
}
.capsule-citation-list {
  margin: var(--space-3) 0 0;
  padding-left: var(--space-5);
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  line-height: 1.7;
  font-variant-numeric: tabular-nums;
}
.capsule-citation-list li {
  padding-left: var(--space-1);
}

/* RFC-feel signature block. Monospace key column, regular value.
 * No flourish — this is the credibility surface. */
.capsule-sig {
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.capsule-sig__title {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
}
.capsule-sig__kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
}
.capsule-sig__kv dt {
  color: var(--color-text-subtle);
  font-weight: 500;
  text-align: left;
}
.capsule-sig__kv dd {
  margin: 0;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.capsule-sig__kv code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.95em;
  color: var(--color-text);
}
.capsule-sig__note {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  margin: 0;
  line-height: 1.6;
}
.capsule-sig__note a {
  color: var(--color-text-muted);
  text-decoration: underline;
}

/* R.1.2 / §B.2: invite resend button + confirmation chip on the
 * pipeline row. Uses the existing dashboard-row classes; the chip
 * replaces the button on success so the row keeps height stable. */
.dashboard-row__resend {
  flex: 0 0 auto;
}
.dashboard-row__resend-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-verified);
  background: var(--color-verified-weak);
  box-shadow: inset 0 0 0 1px var(--color-verified-ring);
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
}
.dashboard-row__resend-chip--cap {
  color: var(--color-dismissed);
  background: var(--color-dismissed-weak);
  box-shadow: inset 0 0 0 1px var(--color-dismissed-ring);
}
.dashboard-row__resend-chip--wait {
  color: var(--color-uncertain);
  background: var(--color-uncertain-weak);
  box-shadow: inset 0 0 0 1px var(--color-uncertain-ring);
}

/* R.1.3 / §B.3: SES delivery status icon next to the pipeline-row
 * meta line. Glyph carries the meaning; color is layered on top.
 * Each variant uses a different shape so colorblind viewers still
 * distinguish queued / sent / bounced / complained / suppressed. */
.dashboard-row__delivery {
  display: inline-block;
  margin-left: var(--space-1);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.85em;
  vertical-align: middle;
  cursor: help;
}
.dashboard-row__delivery--queued    { color: var(--color-text-subtle); }
.dashboard-row__delivery--sent      { color: var(--color-verified); }
.dashboard-row__delivery--bounced   { color: var(--color-dismissed); }
.dashboard-row__delivery--complained { color: var(--color-uncertain); }
.dashboard-row__delivery--suppressed { color: var(--color-dismissed); }

/* Non-color loading affordance for buttons that fire async work
 * (e.g. pricing checkout CTAs). Sets a pulsing dot after the
 * button text so the change is visible to keyboard / screen-reader
 * users + colorblind users (per feedback_visible_action_feedback). */
.button[data-loading] {
  cursor: progress;
}
.button[data-loading]::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: var(--space-2);
  border-radius: 50%;
  background: currentColor;
  vertical-align: middle;
  animation: button-loading-pulse 1s ease-in-out infinite;
  opacity: 0.5;
}
@keyframes button-loading-pulse {
  0%, 100% { opacity: 0.3; transform: scale(0.7); }
  50%      { opacity: 1.0; transform: scale(1.2); }
}
@media (prefers-reduced-motion: reduce) {
  .button[data-loading]::after {
    animation: none;
    opacity: 0.6;
    transform: none;
  }
}

/* invite-error-card: 410 / 503 / generic candidate-zone error pages.
 * Now wears the same brand chrome as the success pages instead of
 * a bare paragraph on white. */
.invite-error-card {
  margin-top: var(--space-8);
}
.invite-error-card__title {
  font-size: var(--text-2xl);
  margin: 0 0 var(--space-3);
  text-wrap: balance;
}
.invite-error-card__body {
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  text-wrap: pretty;
  margin: 0 0 var(--space-4);
}
.invite-error-card__cta {
  margin: 0;
}

/* R.1.4 / §B.4 — first-invite empty-state wizard.
   Shown only when len(invites)==0 && len(shares)==0. Reuses the
   card prominent shadow pattern (.shadow-ring) and existing design
   tokens — no new color literals introduced (acceptance #4). */
.first-invite-wizard {
  display: block;
  margin: var(--space-4) 0;
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-ring);
}
.first-invite-wizard__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 600;
  color: var(--color-text);
}
.first-invite-wizard__lead {
  margin: 0 0 var(--space-5);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  text-wrap: pretty;
}
.first-invite-wizard__steps {
  list-style: none;
  margin: 0 0 var(--space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.first-invite-wizard__step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-4);
  align-items: start;
}
.first-invite-wizard__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-bg);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--text-sm);
}
.first-invite-wizard__step-body {
  min-width: 0;
}
.first-invite-wizard__step-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
}
.first-invite-wizard__step-copy {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  line-height: var(--leading-loose);
  text-wrap: pretty;
}
.first-invite-wizard__step-copy em {
  font-style: normal;
  font-family: var(--font-mono);
  color: var(--color-text);
}
.first-invite-wizard__row-mock {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border: 1px dashed var(--color-divider);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.first-invite-wizard__row-mock-email {
  color: var(--color-text);
}
.first-invite-wizard__oauth-mock {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  border-radius: var(--radius-md);
}
.first-invite-wizard__pill-mock {
  display: inline-flex;
}
.first-invite-wizard__preview {
  margin-top: var(--space-3);
  border-top: 1px solid var(--color-divider);
  padding-top: var(--space-4);
}
.first-invite-wizard__preview-summary {
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 500;
}
.first-invite-wizard__preview-summary:hover {
  color: var(--color-text);
}
.first-invite-wizard__email-preview {
  margin: var(--space-3) 0 0;
  padding: var(--space-4);
  border-left: 3px solid var(--color-divider);
  background: var(--color-surface-alt);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  white-space: pre-wrap;
  text-wrap: pretty;
  line-height: var(--leading-loose);
}

/* arch-iter1 MED-5: tighten step grid + allow mock rows to stack
   on phone viewports. The OAuth SVG already caps at 320px so it
   shrinks naturally; only the row mock and step number need help. */
@media (max-width: 600px) {
  .first-invite-wizard {
    padding: var(--space-4);
  }
  .first-invite-wizard__step {
    grid-template-columns: 28px 1fr;
    gap: var(--space-3);
  }
}