/* =============================================================================
   jobs.stevencox.org — applies the App-Foundry UI design system (design-tokens
   + components). Brand accent only; tokens are the single source of truth.
   ============================================================================= */

/* --- Vendored fonts (no runtime CDN) ------------------------------------- */
@font-face { font-family:"DM Sans"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../vendor/fonts/dm-sans-400.a220a32881ae.woff2") format("woff2"); }
@font-face { font-family:"DM Sans"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../vendor/fonts/dm-sans-500.aa952242481d.woff2") format("woff2"); }
@font-face { font-family:"DM Sans"; font-weight:600; font-style:normal; font-display:swap;
  src:url("../vendor/fonts/dm-sans-600.c64569e0302e.woff2") format("woff2"); }
@font-face { font-family:"DM Sans"; font-weight:700; font-style:normal; font-display:swap;
  src:url("../vendor/fonts/dm-sans-700.9508ec8af518.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-style:normal; font-display:swap;
  src:url("../vendor/fonts/jetbrains-mono-400.caf0dfde4e44.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:500; font-style:normal; font-display:swap;
  src:url("../vendor/fonts/jetbrains-mono-500.a21e038a03f7.woff2") format("woff2"); }

/* --- Design tokens (from app-foundry/design-language/design-tokens.css) --- */
:root {
  --accent:#3b5bdb; --accent-hover:#2f4bc0; --accent-tint:#eef2ff;
  --accent-secondary:#64748b; --accent-gradient-from:#3b5bdb; --accent-gradient-to:#2a3f9e;
  --accent-ring:rgba(59,91,219,0.10);
  --status-red:#ef4444; --status-amber:#f59e0b; --status-green:#22c55e;
  --text-primary:#0f172a; --text-secondary:#64748b; --text-muted:#94a3b8;
  --border-color:#e2e8f0; --border-strong:#cbd5e1;
  --bg-page:#f8fafc; --bg-card:#ffffff; --bg-hover:#f1f5f9; --bg-active:var(--accent-tint);
  --shadow-sm:0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.07),0 2px 4px -1px rgba(0,0,0,0.04);
  --radius-sm:6px; --radius-md:8px; --radius-lg:12px;
  --font-ui:"DM Sans",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

* { box-sizing:border-box; }
html,body { margin:0; }
body {
  font-family:var(--font-ui); font-size:13px; line-height:1.6;
  color:var(--text-primary); background:var(--bg-page);
}
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
h1,h2,h3 { color:var(--text-primary); margin:0 0 4px; }
.page-title { font-size:20px; font-weight:700; letter-spacing:-0.3px; }
.subtle { color:var(--text-secondary); }
.muted { color:var(--text-muted); }

/* --- Navbar (§7.1) ------------------------------------------------------- */
.navbar-main {
  background:linear-gradient(135deg,var(--accent-gradient-from) 0%,var(--accent-gradient-to) 100%);
  height:60px; padding:0 2rem; display:flex; align-items:center; justify-content:space-between;
  box-shadow:0 2px 8px rgba(0,0,0,0.12); position:sticky; top:0; z-index:1000;
}
.navbar-brand { color:#fff; font-size:15px; font-weight:700; letter-spacing:-0.3px; }
.navbar-brand:hover { text-decoration:none; color:#fff; }
.navbar-links { display:flex; align-items:center; gap:4px; margin-left:24px; flex:1; }
.navbar-links a { color:rgba(255,255,255,0.85); font-weight:500; padding:6px 12px; border-radius:var(--radius-sm); }
.navbar-links a:hover { color:#fff; background:rgba(255,255,255,0.12); text-decoration:none; }
.navbar-right { display:flex; align-items:center; gap:12px; }
.navbar-user { color:rgba(255,255,255,0.75); font-size:12px; }

/* --- Layout -------------------------------------------------------------- */
.page { max-width:1040px; margin:0 auto; padding:24px; }
.page-narrow { max-width:640px; }
.row-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.grid-2 { display:grid; grid-template-columns:3fr 2fr; gap:18px; align-items:start; }
@media (max-width:820px){ .grid-2 { grid-template-columns:1fr; } }
.stack > * + * { margin-top:18px; }

/* --- Cards (§7.9) -------------------------------------------------------- */
.card { background:var(--bg-card); border:1px solid var(--border-color);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.card-body { padding:18px; }
.card-header { padding:14px 18px; border-bottom:1px solid var(--border-color); background:var(--bg-page); }
.section-label { font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px;
  color:var(--text-secondary); margin-bottom:12px; }

/* --- Buttons (§7.4) ------------------------------------------------------ */
.btn { padding:7px 14px; font-size:12px; font-weight:500; border-radius:var(--radius-sm);
  border:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  transition:all .15s ease; white-space:nowrap; font-family:inherit; text-decoration:none; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); color:#fff; }
.btn-primary:disabled { background:var(--border-color); color:var(--text-muted); cursor:not-allowed; }
.btn-outline { background:var(--bg-card); border:1px solid var(--border-color); color:var(--text-secondary); }
.btn-outline:hover { border-color:var(--border-strong); background:var(--bg-hover); color:var(--text-primary); }
.btn-ghost { background:transparent; color:var(--text-secondary); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text-primary); }
.btn-white { background:rgba(255,255,255,0.15); border:1px solid rgba(255,255,255,0.3); color:#fff; }
.btn-white:hover { background:rgba(255,255,255,0.25); color:#fff; }
.btn-sm { padding:5px 10px; font-size:11px; }

/* --- Forms --------------------------------------------------------------- */
.form-label { display:block; font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.3px; color:var(--text-secondary); margin-bottom:6px; }
.form-control, .form-select, input[type=text], input[type=email], input[type=password],
textarea, select {
  width:100%; padding:8px 12px; font-size:13px; font-family:inherit; color:var(--text-primary);
  background:var(--bg-page); border:1px solid var(--border-color); border-radius:var(--radius-md);
  transition:all .15s ease;
}
textarea { line-height:1.6; }
.form-control:focus, .form-select:focus, input:focus, textarea:focus, select:focus {
  outline:none; border-color:var(--accent); background:var(--bg-card);
  box-shadow:0 0 0 3px var(--accent-ring);
}
.field { margin-bottom:16px; }
.field-error { color:var(--status-red); font-size:12px; margin-top:4px; }
.form-help { color:var(--text-muted); font-size:12px; margin-top:4px; }

/* --- Badges (§7.7) ------------------------------------------------------- */
.badge { padding:3px 8px; font-size:11px; font-weight:600; border-radius:4px;
  text-transform:uppercase; letter-spacing:0.3px; display:inline-block; }
.badge-success   { background:#dcfce7; color:#166534; }
.badge-danger    { background:#fee2e2; color:#991b1b; }
.badge-warning   { background:#fef3c7; color:#92400e; }
.badge-info      { background:#e0e7ff; color:#3730a3; }
.badge-secondary { background:var(--bg-hover); color:var(--text-secondary); }
.badge-primary   { background:var(--bg-active); color:var(--accent); }
.badge-gray      { background:var(--bg-hover); color:var(--text-secondary); }

/* --- Data table (§7.8) --------------------------------------------------- */
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { background:var(--bg-page); padding:11px 18px; text-align:left; font-weight:600;
  font-size:11px; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-secondary);
  border-bottom:2px solid var(--border-color); white-space:nowrap; }
.data-table td { padding:11px 18px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
.data-table tbody tr { transition:background .1s ease; }
.data-table tbody tr:hover { background:var(--bg-hover); }
.data-table tr:last-child td { border-bottom:none; }

/* --- List rows (§7.12) --------------------------------------------------- */
.list-row { display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 18px; border-bottom:1px solid var(--border-color); }
.list-row:last-child { border-bottom:none; }
.list-name { font-weight:600; font-size:13px; }

/* --- Empty state (§7.21) ------------------------------------------------- */
.empty-state { padding:48px 24px; text-align:center; color:var(--text-muted); }
.empty-state p { font-size:13px; margin:0 0 12px; }

/* --- Callouts / alerts (§7.16) ------------------------------------------- */
.callout { padding:12px 14px; border-radius:var(--radius-sm); font-size:12px; margin-bottom:14px; }
.callout.info    { background:#e0f2fe; color:#0369a1; }
.callout.warning { background:#fef3c7; color:#92400e; }
.callout.danger  { background:#fee2e2; color:#991b1b; }
.callout.success { background:#dcfce7; color:#166534; }
.callout.error   { background:#fee2e2; color:#991b1b; }

/* --- Log window (§7.20) -------------------------------------------------- */
.log-window { background:#1e293b; border-radius:var(--radius-md); font-family:var(--font-mono);
  font-size:11px; line-height:1.6; color:#94a3b8; padding:14px 16px; overflow:auto; max-height:280px; }
.log-window pre { margin:0; white-space:pre-wrap; }
.mono { font-family:var(--font-mono); font-size:11px; }

/* --- Auth card ----------------------------------------------------------- */
.auth-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.auth-card { width:100%; max-width:400px; }

/* --- Scrollbar (§7.23) --------------------------------------------------- */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--bg-page); }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--accent-secondary); }

/* --- Motion (§8) --------------------------------------------------------- */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.4} }
.spin-dot { display:inline-block; width:7px; height:7px; border-radius:50%;
  background:var(--status-amber); animation:pulse 1.5s infinite; }
@view-transition { navigation:auto; }