/* =======================================================
   Selection Board - main stylesheet
   Palette inspired by Mandy / Backstage - clean + editorial
   ======================================================= */

:root {
  --sb-bg:        #ffffff;
  --sb-surface:   #f7f7f8;
  --sb-border:    #e4e4e7;
  --sb-text:      #18181b;
  --sb-muted:     #6b7280;
  --sb-accent:    #e11d48;   /* editorial red */
  --sb-accent-dk: #be123c;
  --sb-ink:       #0a0a0a;
  --sb-ok:        #16a34a;
  --sb-warn:      #d97706;
  --sb-err:       #dc2626;
  --sb-radius:    6px;
  --sb-radius-lg: 10px;
  --sb-shadow:    0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --sb-shadow-lg: 0 10px 25px -5px rgba(16,24,40,.1), 0 8px 10px -6px rgba(16,24,40,.08);
  --sb-font:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --sb-serif:     'Playfair Display', Georgia, serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sb-font);
  color: var(--sb-text);
  background: var(--sb-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--sb-ink); text-decoration: none; }
a:hover { color: var(--sb-accent); }
img { max-width: 100%; display: block; }

/* ---------- Layout ---------- */
.sb-container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.sb-narrow    { max-width: 820px;  margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
.sb-header {
  position: sticky; top: 0; z-index: 40;
  background: #fff;
  border-bottom: 1px solid var(--sb-border);
}
.sb-header-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px;
}
.sb-logo {
  font-family: var(--sb-serif);
  font-size: 24px; font-weight: 700; letter-spacing: -0.01em;
  color: var(--sb-ink);
}
.sb-logo .dot { color: var(--sb-accent); }
.sb-nav { display: flex; gap: 28px; align-items: center; }
.sb-nav a {
  font-size: 14px; font-weight: 500; color: var(--sb-text);
  padding: 8px 0; position: relative;
}
.sb-nav a.active::after,
.sb-nav a:hover::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--sb-accent);
}
.sb-nav-actions { display: flex; gap: 10px; align-items: center; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 18px; border-radius: var(--sb-radius);
  font-size: 14px; font-weight: 600; cursor: pointer;
  border: 1px solid transparent;
  transition: all .15s ease;
  text-decoration: none;
}
.btn-primary {
  background: var(--sb-accent); color: #fff;
}
.btn-primary:hover { background: var(--sb-accent-dk); color: #fff; }
.btn-dark {
  background: var(--sb-ink); color: #fff;
}
.btn-dark:hover { background: #000; color: #fff; }
.btn-outline {
  background: transparent; color: var(--sb-ink); border-color: var(--sb-border);
}
.btn-outline:hover { border-color: var(--sb-ink); }
.btn-ghost { background: transparent; color: var(--sb-text); }
.btn-ghost:hover { background: var(--sb-surface); }
.btn-sm { padding: 6px 12px; font-size: 13px; }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.sb-hero {
  background: linear-gradient(135deg, #0a0a0a 0%, #1f1f23 100%);
  color: #fff;
  padding: 96px 0 72px;
  position: relative;
  overflow: hidden;
}
.sb-hero::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(225,29,72,.2), transparent 40%),
                    radial-gradient(circle at 80% 70%, rgba(225,29,72,.15), transparent 45%);
  pointer-events: none;
}
.sb-hero-inner { position: relative; z-index: 1; }
.sb-hero h1 {
  font-family: var(--sb-serif);
  font-size: clamp(40px, 6vw, 68px);
  line-height: 1.05; letter-spacing: -0.02em;
  font-weight: 700; margin: 0 0 18px;
}
.sb-hero p {
  font-size: 20px; color: rgba(255,255,255,.8);
  max-width: 640px; margin: 0 0 36px;
}
.sb-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---------- Role tiles (home) ---------- */
.sb-roles {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  padding: 72px 0;
}
@media (max-width: 800px) { .sb-roles { grid-template-columns: 1fr; } }
.sb-role-tile {
  background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg);
  padding: 32px; transition: transform .2s, box-shadow .2s, border-color .2s;
}
.sb-role-tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--sb-shadow-lg);
  border-color: var(--sb-ink);
}
.sb-role-tile h3 {
  font-family: var(--sb-serif); font-size: 26px; margin: 0 0 10px;
}
.sb-role-tile p { color: var(--sb-muted); margin: 0 0 18px; font-size: 15px; }

/* ---------- Section ---------- */
.sb-section { padding: 64px 0; }
.sb-section-title {
  font-family: var(--sb-serif); font-size: 34px; letter-spacing: -0.01em;
  margin: 0 0 6px;
}
.sb-section-sub { color: var(--sb-muted); margin: 0 0 32px; font-size: 16px; }

/* ---------- Cards / listings ---------- */
.sb-grid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.sb-card {
  background: #fff; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg);
  overflow: hidden; transition: box-shadow .15s, transform .15s;
}
.sb-card:hover { box-shadow: var(--sb-shadow-lg); transform: translateY(-1px); }
.sb-card-media {
  aspect-ratio: 3/4; background: var(--sb-surface);
  background-size: cover; background-position: center;
  position: relative;
}
.sb-card-media.sb-wide { aspect-ratio: 16/9; }
.sb-card-body { padding: 14px 16px 18px; }
.sb-card-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; }
.sb-card-meta  { font-size: 13px; color: var(--sb-muted); }
.sb-card-tags  { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }

.sb-tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--sb-surface); color: var(--sb-text);
  font-size: 12px; font-weight: 500;
  border: 1px solid var(--sb-border);
}
.sb-tag-accent { background: #fff1f2; color: var(--sb-accent-dk); border-color: #fecdd3; }
.sb-tag-ok     { background: #ecfdf5; color: var(--sb-ok);        border-color: #bbf7d0; }
.sb-tag-warn   { background: #fffbeb; color: var(--sb-warn);      border-color: #fde68a; }

/* ---------- Job listing rows (Mandy-style) ---------- */
.sb-job-list { display: flex; flex-direction: column; gap: 12px; }
.sb-job-row {
  display: flex; align-items: flex-start; gap: 18px;
  padding: 18px; border: 1px solid var(--sb-border); border-radius: var(--sb-radius-lg);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.sb-job-row:hover { border-color: var(--sb-ink); box-shadow: var(--sb-shadow); }
.sb-job-poster {
  width: 92px; height: 124px; flex: 0 0 92px;
  background: var(--sb-surface) center / cover no-repeat;
  border-radius: var(--sb-radius);
}
.sb-job-body { flex: 1; min-width: 0; }
.sb-job-title {
  font-size: 18px; font-weight: 700; margin: 0 0 4px;
}
.sb-job-proj { font-size: 14px; color: var(--sb-muted); margin: 0 0 10px; }
.sb-job-meta {
  display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 13px; color: var(--sb-text);
  margin-bottom: 10px;
}
.sb-job-meta .item strong { color: var(--sb-muted); font-weight: 500; margin-right: 4px; }

/* ---------- Forms ---------- */
.sb-form { display: flex; flex-direction: column; gap: 18px; }
.sb-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .sb-form-grid { grid-template-columns: 1fr; } }
.sb-field { display: flex; flex-direction: column; gap: 6px; }
.sb-field label { font-size: 13px; font-weight: 600; color: var(--sb-text); }
.sb-field .hint { font-size: 12px; color: var(--sb-muted); }
.sb-input, .sb-select, .sb-textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--sb-border); border-radius: var(--sb-radius);
  font-size: 14px; font-family: inherit;
  background: #fff;
  transition: border-color .12s, box-shadow .12s;
}
.sb-textarea { resize: vertical; min-height: 96px; }
.sb-input:focus, .sb-select:focus, .sb-textarea:focus {
  outline: none; border-color: var(--sb-ink);
  box-shadow: 0 0 0 3px rgba(10,10,10,.08);
}

/* ---------- Dashboard ---------- */
.sb-dash-grid { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; }
@media (max-width: 860px) { .sb-dash-grid { grid-template-columns: 1fr; } }
.sb-side {
  position: sticky; top: 80px;
  display: flex; flex-direction: column; gap: 2px;
}
.sb-side a {
  padding: 10px 12px; border-radius: var(--sb-radius);
  font-size: 14px; color: var(--sb-text);
}
.sb-side a:hover { background: var(--sb-surface); }
.sb-side a.active {
  background: var(--sb-ink); color: #fff;
}

/* ---------- Profile page ---------- */
.sb-profile-head { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 28px; }
.sb-profile-ph {
  width: 180px; height: 220px; background: var(--sb-surface) center / cover no-repeat;
  border-radius: var(--sb-radius-lg); flex: 0 0 180px;
}
.sb-profile-name { font-family: var(--sb-serif); font-size: 34px; margin: 0 0 4px; }
.sb-profile-sub  { color: var(--sb-muted); margin: 0 0 14px; }
.sb-profile-meta { display: flex; gap: 22px; flex-wrap: wrap; font-size: 14px; }

/* ---------- Flash ---------- */
.sb-flash {
  padding: 12px 16px; border-radius: var(--sb-radius); margin-bottom: 14px; font-size: 14px;
}
.sb-flash-ok   { background: #ecfdf5; color: var(--sb-ok);   border: 1px solid #bbf7d0; }
.sb-flash-err  { background: #fef2f2; color: var(--sb-err);  border: 1px solid #fecaca; }
.sb-flash-warn { background: #fffbeb; color: var(--sb-warn); border: 1px solid #fde68a; }

/* ---------- Footer ---------- */
.sb-footer {
  border-top: 1px solid var(--sb-border);
  padding: 40px 0; margin-top: 72px;
  color: var(--sb-muted); font-size: 13px;
  background: var(--sb-surface);
}
.sb-footer-inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; }

/* ---------- Utility ---------- */
.sb-row      { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.sb-between  { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.sb-muted    { color: var(--sb-muted); }
.sb-hr       { border: none; border-top: 1px solid var(--sb-border); margin: 24px 0; }
.sb-mt-0     { margin-top: 0; }
.sb-mb-0     { margin-bottom: 0; }
.sb-mb-lg    { margin-bottom: 28px; }
.sb-mt-lg    { margin-top: 28px; }
.text-right  { text-align: right; }

/* Match score badge */
.sb-score {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 700;
  background: #ecfeff; color: #0e7490; border: 1px solid #a5f3fc;
}
.sb-score::before { content: '★'; }