/* JobScout shared visual system — intentionally presentation-only. */
:root {
  --js-ink: #1a1612;
  --js-accent: #c8963c;
  --js-green: #2d6a4f;
  --js-warm: #b85c2a;
  --js-bg: #f5f0e8;
  --js-surface: #faf7f2;
  --js-muted: #6b6459;
  --js-line: #e0d8cc;
  --js-space-1: 4px;
  --js-space-2: 8px;
  --js-space-3: 12px;
  --js-space-4: 16px;
  --js-space-5: 20px;
  --js-space-6: 24px;
  --js-radius-control: 6px;
  --js-radius-card: 8px;
  --js-control-height: 44px;
  --js-focus-ring: #9b6500;
  --js-motion-fast: 160ms;
  --js-motion-standard: 240ms;
  --js-display: 'Lora', Georgia, serif;
  --js-body: 'DM Sans', sans-serif;
  --js-mono: 'DM Mono', monospace;
}

body.js-surface {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/*
 * Deliberately !important: legacy surface rules set outline:none on several
 * controls with ID selectors. Keyboard focus must remain visible regardless
 * of those older declarations or stylesheet order.
 */
.js-surface :where(
  a[href], button, input, textarea, select, summary,
  [role="button"], [role="tab"], [tabindex]:not([tabindex="-1"])
):focus {
  outline: 3px solid var(--js-focus-ring) !important;
  outline-offset: 3px !important;
}

.js-admin {
  --js-focus-ring: #00e5a0;
}

body.js-public {
  --ink: var(--js-ink);
  --paper: var(--js-bg);
  --paper-dark: #ede7d9;
  --cream: var(--js-surface);
  --bg: var(--js-bg);
  --surface: var(--js-surface);
  --accent: var(--js-green);
  --gold: var(--js-accent);
  --muted: var(--js-muted);
  --text-dim: var(--js-muted);
  --line: var(--js-line);
  --border: var(--js-line);
  --serif: var(--js-display);
  --sans: var(--js-body);
}

.js-public .logo,
.js-public .greeting,
.js-public .loading-logo,
.js-public .job-card-title,
.js-public .card-title,
.js-public .rjc-title,
.js-public .mjc-title,
.js-public .pinned-title {
  font-family: var(--js-display);
}

.js-public .header {
  padding: var(--js-space-5) clamp(var(--js-space-4), 4vw, 32px);
  min-height: 64px;
}

.js-public .job-card,
.js-public .card,
.js-public .reveal-job-card,
.js-public .my-job-card {
  border-color: var(--js-line);
  border-radius: var(--js-radius-card);
  padding: 18px 20px;
  transition: border-color var(--js-motion-fast) ease,
              box-shadow var(--js-motion-fast) ease,
              background-color var(--js-motion-fast) ease;
}

.js-public .job-card,
.js-public .card {
  border-left: 4px solid var(--js-accent);
  border-radius: 0 var(--js-radius-card) var(--js-radius-card) 0;
}

.js-public .job-card-title,
.js-public .card-title,
.js-public .rjc-title,
.js-public .mjc-title {
  color: var(--js-ink);
  font-weight: 600;
  line-height: 1.35;
}

.js-public .job-card-company,
.js-public .card-company,
.js-public .rjc-company,
.js-public .mjc-company {
  color: var(--js-green);
  font-weight: 500;
}

.js-public .job-card-meta,
.js-public .card-meta,
.js-public .rjc-meta,
.js-public .mjc-meta {
  color: var(--js-muted);
  line-height: 1.5;
}

.js-intake .intake-orientation {
  background: color-mix(in srgb, var(--js-surface) 88%, var(--js-bg));
  border-bottom: 1px solid var(--js-line);
  color: var(--js-muted);
  flex-shrink: 0;
  font-size: 12px;
  line-height: 1.45;
  padding: var(--js-space-2) var(--js-space-6);
  text-align: center;
}

.js-intake .intake-orientation strong {
  color: var(--js-ink);
  font-weight: 500;
}

.js-reveal .messages,
.js-dashboard .main {
  padding-top: 28px;
}

.js-reveal .action-row,
.js-dashboard .card-docs,
.js-dashboard .card-footer {
  gap: var(--js-space-2);
}

.js-reveal .action-btn,
.js-dashboard .sort-btn,
.js-dashboard .doc-btn,
.js-dashboard .reconsider-btn {
  min-height: 36px;
  border-radius: var(--js-radius-control);
}

/* Admin remains dense, but uses a legible floor and the same control rhythm. */
.js-admin .field-label,
.js-admin .filter-btn,
.js-admin .type-badge,
.js-admin .train-row-btn,
.js-admin .stat-label,
.js-admin .panel-title {
  font-size: 10px;
  line-height: 1.4;
}

.js-admin .btn,
.js-admin .chat-send,
.js-admin .qa-ssh-btn,
.js-admin .tab-btn,
.js-admin .rec-input,
.js-admin .field-input,
.js-admin .field-select,
.js-admin .user-search {
  min-height: 36px;
}

.js-admin .panel,
.js-admin .rec-card,
.js-admin .stat {
  border-radius: var(--js-radius-control);
}

@media (max-width: 600px) {
  .js-intake .header {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--js-space-1);
    padding: var(--js-space-3) var(--js-space-4);
  }

  .js-intake .header-note {
    color: #a79f96;
    line-height: 1.35;
    white-space: normal;
  }

  .js-intake .privacy-banner,
  .js-intake .intake-orientation {
    padding-left: var(--js-space-4);
    padding-right: var(--js-space-4);
  }

  .js-intake #fb-btn {
    bottom: 154px !important;
    left: 12px !important;
    right: auto !important;
  }

  .js-intake #fb-panel {
    bottom: 206px !important;
    left: 12px !important;
    right: auto !important;
  }

  .js-reveal .header,
  .js-dashboard .header {
    align-items: flex-start;
    padding: var(--js-space-4);
  }

  .js-public .job-card,
  .js-public .card,
  .js-public .reveal-job-card,
  .js-public .my-job-card {
    padding: var(--js-space-4);
  }
}

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