/* ============================================================================
   Opus Futura Workplace — Components
   All classes are namespaced `of-*` so they coexist with whatever site.css
   is already in the project. Pair with tokens.css.

       <link rel="stylesheet" href="~/css/tokens.css" />
       <link rel="stylesheet" href="~/css/components.css" />

   Every component is documented inline. Don't add variants without adding
   a token first. If you can't express it with tokens, the system needs
   updating before the component does.
   ============================================================================ */

/* ── App shell ───────────────────────────────────────────────────────────── */
/* Render once in _Layout.cshtml. The body of every Workplace page lives
   inside .of-app-main. */
.of-app             { min-height: 100vh; background: var(--of-surface-page); }
.of-app-nav         {
  height: var(--of-app-nav-h);
  background: var(--of-surface-nav);
  border-bottom: 1px solid var(--of-border);
  display: flex; align-items: center;
  padding: 0 var(--of-content-pad-x);
  gap: var(--of-space-8);
  position: sticky; top: 0; z-index: 20;
}
.of-app-logo {
  width: 32px; height: 32px; border-radius: var(--of-radius-md);
  background: var(--of-brand); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 16px; letter-spacing: -0.04em;
  flex-shrink: 0;
}
/* Image-mark variant — when the brand has its own logo asset, drop the
   brand-purple square and let the image (PNG/SVG wordmark) render at nav height. */
.of-app-logo--img {
  width: auto; height: auto;
  background: transparent; padding: 0;
  border-radius: 0;
}
.of-app-logo--img > img,
.of-app-logo--img > svg {
  display: block;
  height: 28px; width: auto;
  max-width: 160px;
  object-fit: contain;
}
.of-app-nav-links   { display: flex; gap: var(--of-space-6); }
.of-app-nav-link    {
  display: inline-flex; align-items: center;
  height: var(--of-app-nav-h); box-sizing: border-box;
  font-size: var(--of-fs-body); font-weight: 500;
  color: var(--of-text-muted);
  padding: 0 2px;
  text-decoration: none;
  transition: color var(--of-dur-fast) var(--of-ease);
}
.of-app-nav-link:hover     { color: var(--of-text-strong); text-decoration: none; }
.of-app-nav-link.is-active {
  color: var(--of-brand); font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--of-brand);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.of-app-nav-right   { margin-left: auto; display: flex; align-items: center; gap: var(--of-space-4); }
.of-workspace-chip  {
  padding: 6px 14px; border-radius: var(--of-radius-pill);
  background: var(--of-surface-rail); color: var(--of-text);
  font-size: 13px; font-weight: 500;
}
.of-avatar          {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--of-brand-tint); color: var(--of-brand);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  flex-shrink: 0;
}
.of-avatar--lg      { width: 48px; height: 48px; font-size: 16px; }
.of-avatar--sm      { width: 24px; height: 24px; font-size: 10px; }

.of-app-main        { max-width: var(--of-app-max-w); margin: 0 auto; padding: var(--of-content-pad-y) var(--of-content-pad-x) var(--of-space-12); }
.of-page-head       { display: flex; align-items: center; gap: var(--of-space-4); margin-bottom: var(--of-space-6); }
.of-page-head h1    { margin: 0; }
.of-page-head__actions { margin-left: auto; display: flex; gap: var(--of-space-2); }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.of-card            {
  background: var(--of-surface-card);
  border: 1px solid var(--of-border);
  border-radius: var(--of-radius-lg);
  padding: var(--of-space-5);
  box-shadow: var(--of-shadow-sm);
}
.of-card--md        { box-shadow: var(--of-shadow-md); }
.of-card--flush     { padding: 0; }
.of-card__head      { display: flex; align-items: center; gap: var(--of-space-3); padding: var(--of-space-4) var(--of-space-5); border-bottom: 1px solid var(--of-border); }
.of-card__title     { font-size: var(--of-fs-h4); font-weight: 600; color: var(--of-text-strong); margin: 0; }
.of-card__body      { padding: var(--of-space-5); }
.of-card__foot      { padding: var(--of-space-4) var(--of-space-5); border-top: 1px solid var(--of-border); display: flex; justify-content: flex-end; gap: var(--of-space-2); }

/* Stat card — dashboard hero number */
.of-stat            { display: flex; flex-direction: column; gap: var(--of-space-1); }
.of-stat__label     { font-size: var(--of-fs-eyebrow); font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--of-text-muted); }
.of-stat__value     { font-size: var(--of-fs-display); font-weight: 700; color: var(--of-ink); letter-spacing: -0.02em; line-height: 1; }
.of-stat__delta     { font-size: var(--of-fs-body-sm); color: var(--of-success-fg); font-weight: 500; }
.of-stat__delta--down { color: var(--of-danger-fg); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.of-btn             {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--of-space-2);
  height: 38px; padding: 0 var(--of-space-4);
  border-radius: var(--of-radius-md); border: 1px solid transparent;
  font-family: inherit; font-size: var(--of-fs-body); font-weight: 600;
  background: var(--of-surface-card); color: var(--of-text-strong);
  cursor: pointer;
  transition: background var(--of-dur-fast) var(--of-ease),
              box-shadow var(--of-dur-fast) var(--of-ease),
              transform var(--of-dur-fast) var(--of-ease);
}
.of-btn:disabled    { opacity: 0.5; cursor: not-allowed; }
.of-btn:active:not(:disabled) { transform: translateY(1px); }

.of-btn--primary    { background: var(--of-brand); color: #fff; box-shadow: 0 2px 8px var(--of-brand-shadow); }
.of-btn--primary:hover  { background: var(--of-brand-hover); }
.of-btn--secondary  { background: var(--of-brand-tint); color: var(--of-brand); }
.of-btn--secondary:hover { background: #ece7fb; }
.of-btn--ghost      { background: transparent; color: var(--of-text-strong); }
.of-btn--ghost:hover { background: var(--of-surface-rail); }
.of-btn--outline    { border-color: var(--of-border-strong); }
.of-btn--outline:hover { border-color: var(--of-text-strong); }
.of-btn--danger     { background: var(--of-danger); color: #fff; }
.of-btn--danger:hover { background: #c12736; }

.of-btn--sm         { height: 30px; padding: 0 var(--of-space-3); font-size: var(--of-fs-body-sm); }
.of-btn--lg         { height: 46px; padding: 0 var(--of-space-6); font-size: var(--of-fs-body-lg); }
.of-btn--block      { width: 100%; }
.of-btn--icon       { width: 38px; padding: 0; }

/* ── Forms ───────────────────────────────────────────────────────────────── */
.of-field           { display: flex; flex-direction: column; gap: var(--of-space-1); margin-bottom: var(--of-space-4); }
.of-label           { font-size: var(--of-fs-body-sm); font-weight: 600; color: var(--of-text-strong); }
.of-help            { font-size: var(--of-fs-caption); color: var(--of-text-muted); }
.of-error           { font-size: var(--of-fs-caption); color: var(--of-danger-fg); }

.of-input,
.of-select,
.of-textarea        {
  font-family: inherit; font-size: var(--of-fs-body);
  color: var(--of-text-strong);
  background: var(--of-surface-card);
  border: 1px solid var(--of-border-strong);
  border-radius: var(--of-radius-md);
  padding: 9px 12px;
  height: 38px;
  transition: border-color var(--of-dur-fast) var(--of-ease),
              box-shadow var(--of-dur-fast) var(--of-ease);
}
.of-textarea        { height: auto; min-height: 96px; resize: vertical; line-height: var(--of-lh-normal); }
.of-input:hover, .of-select:hover, .of-textarea:hover { border-color: var(--of-text-muted); }
.of-input:focus, .of-select:focus, .of-textarea:focus {
  outline: none; border-color: var(--of-brand);
  box-shadow: var(--of-focus-ring);
}
.of-input::placeholder, .of-textarea::placeholder { color: var(--of-text-faint); }
.of-input[aria-invalid="true"], .of-select[aria-invalid="true"], .of-textarea[aria-invalid="true"] {
  border-color: var(--of-danger);
}

/* Search input with leading icon */
.of-search          { position: relative; }
.of-search > i      { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--of-text-muted); pointer-events: none; font-size: 18px; }
.of-search > .of-input { padding-left: 38px; }

/* Checkbox / radio — restyled native */
.of-check           { display: inline-flex; align-items: center; gap: var(--of-space-2); cursor: pointer; }
.of-check input     {
  appearance: none; width: 18px; height: 18px;
  border: 1.5px solid var(--of-border-strong);
  border-radius: var(--of-radius-xs);
  background: var(--of-surface-card);
  display: inline-grid; place-content: center;
  transition: all var(--of-dur-fast) var(--of-ease);
}
.of-check input[type="radio"] { border-radius: 50%; }
.of-check input:checked { background: var(--of-brand); border-color: var(--of-brand); }
.of-check input[type="checkbox"]:checked::after {
  content: ""; width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px);
}
.of-check input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* ── Pills (status chips) ────────────────────────────────────────────────── */
.of-pill            {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--of-radius-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
  background: var(--of-surface-rail); color: var(--of-text);
}
.of-pill--brand     { background: var(--of-brand-tint);   color: var(--of-brand); }
.of-pill--success   { background: var(--of-success-tint); color: var(--of-success-fg); }
.of-pill--info      { background: var(--of-info-tint);    color: var(--of-info-fg); }
.of-pill--warning   { background: var(--of-warning-tint); color: var(--of-warning-fg); }
.of-pill--danger    { background: var(--of-danger-tint);  color: var(--of-danger-fg); }
.of-pill--lg        { font-size: 13px; padding: 6px 14px; }
.of-pill--sm        { font-size: 10px; padding: 3px 10px; }

/* Status dot (precedes text in tables) */
.of-dot             { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--of-text-faint); margin-right: 8px; vertical-align: 2px; }
.of-dot--draft      { background: var(--of-status-draft); }
.of-dot--processing { background: var(--of-status-processing); }
.of-dot--active     { background: var(--of-status-active); }
.of-dot--completed  { background: var(--of-status-completed); }
.of-dot--canceled   { background: var(--of-status-canceled); }

/* ── Banners ─────────────────────────────────────────────────────────────── */
.of-banner          {
  display: flex; align-items: flex-start; gap: var(--of-space-3);
  padding: var(--of-space-4); border-radius: var(--of-radius-md);
  background: var(--of-info-tint); color: var(--of-info-fg);
  border: 1px solid color-mix(in srgb, var(--of-info-fg) 25%, transparent);
}
.of-banner--success { background: var(--of-success-tint); color: var(--of-success-fg); border-color: color-mix(in srgb, var(--of-success-fg) 25%, transparent); }
.of-banner--warning { background: var(--of-warning-tint); color: var(--of-warning-fg); border-color: color-mix(in srgb, var(--of-warning-fg) 25%, transparent); }
.of-banner--danger  { background: var(--of-danger-tint);  color: var(--of-danger-fg);  border-color: color-mix(in srgb, var(--of-danger-fg) 25%, transparent); }
.of-banner > i      { font-size: 20px; line-height: 1; flex-shrink: 0; }
.of-banner__title   { font-weight: 700; margin-bottom: 2px; }

/* ── Table ───────────────────────────────────────────────────────────────── */
.of-table           { width: 100%; border-collapse: collapse; background: var(--of-surface-card); }
.of-table th        {
  text-align: left; padding: 12px 16px;
  font-size: var(--of-fs-eyebrow); font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--of-text-muted);
  border-bottom: 1px solid var(--of-border);
  background: var(--of-surface-alt);
}
.of-table td        { padding: 14px 16px; border-bottom: 1px solid var(--of-border); font-size: var(--of-fs-body); color: var(--of-text-strong); vertical-align: middle; }
.of-table tbody tr  { transition: background var(--of-dur-fast) var(--of-ease); }
.of-table tbody tr:hover { background: var(--of-surface-alt); }
.of-table tbody tr:last-child td { border-bottom: none; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.of-tabs            { display: flex; gap: var(--of-space-6); border-bottom: 1px solid var(--of-border); margin-bottom: var(--of-space-5); }
.of-tab             {
  padding: 12px 2px; border: none; background: none; cursor: pointer;
  font-size: var(--of-fs-body); font-weight: 500; color: var(--of-text-muted);
  border-bottom: 2px solid transparent;
  transition: color var(--of-dur-fast) var(--of-ease);
}
.of-tab:hover       { color: var(--of-text-strong); }
.of-tab.is-active   { color: var(--of-brand); font-weight: 700; border-bottom-color: var(--of-brand); }

/* ── Match-board column ──────────────────────────────────────────────────── */
.of-column          {
  background: var(--of-col-other-bg);
  border-radius: var(--of-radius-lg);
  padding: var(--of-space-3);
  display: flex; flex-direction: column; gap: var(--of-space-3);
  min-width: 280px;
}
.of-column--reviewing    { background: var(--of-col-reviewing-bg); }
.of-column--interviewing { background: var(--of-col-interviewing-bg); }
.of-column--hiring       { background: var(--of-col-hiring-bg); }
.of-column__head    { display: flex; align-items: center; gap: var(--of-space-2); padding: 4px 8px; }
.of-column__title   { font-size: var(--of-fs-body-sm); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; }
.of-column--reviewing    .of-column__title { color: var(--of-col-reviewing-fg); }
.of-column--interviewing .of-column__title { color: var(--of-col-interviewing-fg); }
.of-column--hiring       .of-column__title { color: var(--of-col-hiring-fg); }
.of-column--other        .of-column__title { color: var(--of-col-other-fg); }
.of-column__count   { margin-left: auto; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--of-radius-pill); background: rgba(255,255,255,0.7); color: inherit; }

/* Candidate card sat in a column */
.of-candidate       {
  background: var(--of-surface-card);
  border-radius: var(--of-radius-md);
  padding: var(--of-space-3);
  box-shadow: var(--of-shadow-sm);
  cursor: grab;
  transition: transform var(--of-dur-fast) var(--of-ease), box-shadow var(--of-dur-fast) var(--of-ease);
}
.of-candidate:hover { transform: translateY(-1px); box-shadow: var(--of-shadow-md); }
.of-candidate__row  { display: flex; align-items: center; gap: var(--of-space-2); min-width: 0; }
.of-candidate__row > div { min-width: 0; flex: 1; }
.of-candidate__name { font-weight: 600; color: var(--of-text-strong); font-size: var(--of-fs-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-candidate__role { font-size: var(--of-fs-caption); color: var(--of-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-candidate__meta { margin-top: var(--of-space-2); display: flex; gap: var(--of-space-2); flex-wrap: wrap; }

/* ── Caption / stamp callout (the charcoal box from the video) ──────────── */
/* Use only for marketing surfaces, empty states, and the onboarding tour. */
.of-stamp           {
  display: inline-block;
  background: var(--of-ink); color: #fff;
  padding: 16px 28px;
  font-size: var(--of-fs-h3); font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: var(--of-shadow-stamp);
}
.of-stamp--yellow   { background: var(--of-yellow); color: var(--of-ink); }

/* ── CV / Profile sheet ──────────────────────────────────────────────────── */
/* Used in the candidate detail view. White paper card on the page background,
   with a header (avatar + name + verified stamp), a summary line, and
   sectioned content (experience timeline, skill chips). */
.of-cv {
  background: var(--of-surface-card);
  border: 1px solid var(--of-border);
  border-radius: var(--of-radius-xl);
  padding: 28px 36px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 12px 32px -20px rgba(0,0,0,0.18);
}
.of-cv__head { display: flex; gap: 20px; align-items: center; margin-bottom: 22px; }
.of-cv__head .of-avatar { width: 68px; height: 68px; font-size: 20px; }
.of-cv__name { font-size: 26px; font-weight: 700; color: var(--of-ink); letter-spacing: -0.01em; line-height: 1.1; }
.of-cv__role { font-size: 13px; color: var(--of-text-muted); margin-top: 4px; letter-spacing: 0.3px; }
.of-cv__verify { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.of-cv__verify-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--of-text-muted); text-transform: uppercase; }
.of-cv__verify-source { font-size: 12px; color: var(--of-success); font-weight: 600; }
.of-cv__summary { font-size: 14px; line-height: 1.55; color: var(--of-text); padding: 0 0 18px; border-bottom: 1px solid var(--of-border); margin-bottom: 20px; }
.of-cv__section-label { font-size: 11px; font-weight: 700; letter-spacing: 1.5px; color: var(--of-text-muted); text-transform: uppercase; margin-bottom: 12px; }

/* Experience row — 110px year column + content */
.of-cv__job { display: flex; gap: 18px; margin-bottom: 14px; }
.of-cv__job-yrs { width: 110px; flex-shrink: 0; font-size: 12px; color: var(--of-text-muted); font-weight: 600; letter-spacing: 0.3px; font-variant-numeric: tabular-nums; padding-top: 2px; }
.of-cv__job-role { font-size: 15px; font-weight: 700; color: var(--of-ink); }
.of-cv__job-org { font-size: 12px; color: var(--of-text-muted); margin-bottom: 6px; }
.of-cv__job-bullet { font-size: 13px; color: var(--of-text); line-height: 1.45; padding-left: 14px; position: relative; }
.of-cv__job-bullet::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: 50%; background: var(--of-brand); }

/* Skill chip with 5-dot proficiency meter */
.of-skill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-radius: var(--of-radius-pill);
  background: var(--of-brand-tint); color: var(--of-brand);
  font-size: 13px; font-weight: 600;
}
.of-skill__dots { display: inline-flex; gap: 2px; }
.of-skill__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(82, 49, 255, 0.2); }
.of-skill__dot.is-on { background: var(--of-brand); }

/* CV — Razor-app extensions (block layout, masked variant, traits, docs).
   Pure additions on top of the canonical `of-cv` paper sheet — no overrides. */
.of-cv__block            { padding-top: 4px; }
.of-cv__block + .of-cv__block { margin-top: var(--of-space-4); }
.of-cv__section-label--sub { color: var(--of-text); margin-top: var(--of-space-3); }

.of-cv__job-body         { flex: 1; min-width: 0; }
.of-cv__job-yrs-sub      { font-weight: 500; color: var(--of-text-faint); margin-top: 2px; font-size: 11px; text-transform: none; letter-spacing: 0; }
.of-cv__job-meta         { display: flex; flex-wrap: wrap; gap: var(--of-space-3); font-size: 12px; color: var(--of-text-muted); margin-bottom: 6px; }
.of-cv__job-meta i       { margin-right: 4px; color: var(--of-brand); }

/* Personality — single-row trait readout */
.of-cv__traits           { display: flex; flex-direction: column; gap: 6px; }
.of-cv__trait            {
  display: grid; grid-template-columns: minmax(0, 1fr) 200px;
  align-items: center; gap: var(--of-space-3);
  padding: 6px 0;
  border-bottom: 1px dashed var(--of-border);
}
.of-cv__trait:last-child { border-bottom: none; }
.of-cv__trait-name       { display: flex; align-items: center; gap: 6px; min-width: 0; color: var(--of-text-strong); font-weight: 500; }
.of-cv__trait-name a     { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; }
.of-cv__trait-name i     { color: var(--of-brand); }
.of-cv__trait-meter      { justify-self: end; }

/* Documents row inside CV tab */
.of-cv__doc-row          { border-bottom: 1px solid var(--of-border); }
.of-cv__doc-row:last-child { border-bottom: none; }
.of-cv__doc-meta         { font-size: var(--of-fs-caption); }

/* Masked variant — neutralizes the verified stamp & tints the avatar gray */
.of-cv__avatar--masked   { background: var(--of-surface-rail); color: var(--of-text-muted); font-size: 22px; }
.of-cv__verify--masked .of-cv__verify-source { color: var(--of-text-muted); }
.match-profile-cv--masked .of-cv__name { font-weight: 600; font-size: 18px; }

/* Razor app uses the of-cv card *inside* a modal (Layout = null), so reset
   the host page padding to match the modal body dimensions. */
.modal .of-cv.match-profile-cv {
  border: none; box-shadow: none; border-radius: 0;
  padding: var(--of-space-5) var(--of-space-6);
}

/* Inline profile stage — the CV renders here as a page-level surface (no
   modal chrome) directly below the match board on /Matching/Index. */
.of-profile-stage {
  margin: var(--of-space-6) 0 var(--of-space-8);
  padding: 0;
}
.of-profile-stage[hidden] { display: none !important; }
.of-profile-stage .profile-background { background: transparent; padding: 0; }
.of-profile-stage .of-cv.match-profile-cv {
  margin: 0 auto;
  max-width: 1080px;
}

/* ── Match layout: kanban default, sidebar+CV when a candidate is open ───── */
/* Default state: full kanban shown, sidebar + profile hidden.
   When match.js opens a profile it sets data-profile-open="true" on
   #MatchingPage → CSS swaps to a 2-column grid (sidebar | CV). */
.of-match-page { display: block; margin-top: var(--of-space-3); }
.of-match-page .of-match-sidebar { display: none; }
.of-match-page #ProfileRender { display: none; }

/* Split view: vertical sidebar on left, CV on right; kanban hidden. */
.of-match-page[data-profile-open="true"] {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: var(--of-space-5);
  align-items: start;
}
.of-match-page[data-profile-open="true"] .of-match-sidebar { display: block; }
.of-match-page[data-profile-open="true"] #ProfileRender {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--of-space-5);
  min-width: 0;
}
/* Notes opened: stop centering so the CV stays where it is and notes uses the
   gutter to its right. Without this the flex group is centered as a whole,
   shifting the CV leftward. */
.of-match-page[data-profile-open="true"] #ProfileRender:has(.notes-side-panel.open) {
  justify-content: flex-start;
}
.of-match-page[data-profile-open="true"] #match-board       { display: none; }
.of-match-page[data-profile-open="true"] .match-board-header { display: none; }

@media (max-width: 900px) {
  .of-match-page[data-profile-open="true"] { grid-template-columns: 1fr; }
}

/* Sidebar shell — vertical stack of all columns. Flat (no white box); each
   group is just an eyebrow + a list of candidate rows on the page background.
   Sticks to the top under the app nav and fills the viewport's full height,
   so it lines up with the page rather than detaching as a smaller floating
   block. Top padding matches .of-cv's 28px so the first eyebrow lines up
   with the top of the CV card across the gap. Inner overflow allowed so a
   tall list can scroll within. */
.of-match-sidebar {
  background: transparent;
  border: 0;
  padding: 28px var(--of-space-3) 0 0;
  box-shadow: none;
  position: sticky;
  top: var(--of-app-nav-h);
  height: calc(100vh - var(--of-app-nav-h));
  overflow-y: auto;
}

.of-match-sidebar__group + .of-match-sidebar__group {
  margin-top: var(--of-space-5);
}

/* Every list keeps a generous min-height so it remains a confident drop
   target — even when the user lifts the only candidate out of it.
   When there's no <li> inside (server-rendered empty OR mid-drag empty)
   the list shows a labelled dashed drop strip; :has() does the work so
   no JS class-juggling is needed. */
.of-match-sidebar__list { min-height: 64px; }
.of-match-sidebar__list.is-empty,
.of-match-sidebar__list:not(:has(li)) {
  border: 1px dashed var(--of-border);
  border-radius: var(--of-radius-md);
  display: flex; align-items: center; justify-content: center;
}
.of-match-sidebar__list.is-empty::before,
.of-match-sidebar__list:not(:has(li))::before {
  content: "Drop here to move";
  font-size: var(--of-fs-body-sm);
  color: var(--of-text-faint);
  pointer-events: none;
}

/* Add-column button at the bottom of the sidebar */
.of-match-sidebar__add-col {
  display: flex; align-items: center; justify-content: center; gap: var(--of-space-2);
  width: 100%;
  margin-top: var(--of-space-5);
  padding: 10px var(--of-space-3);
  background: transparent;
  border: 1px dashed var(--of-border-strong);
  border-radius: var(--of-radius-md);
  color: var(--of-text-muted);
  font-size: var(--of-fs-body-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--of-dur-fast) var(--of-ease),
              color var(--of-dur-fast) var(--of-ease),
              background var(--of-dur-fast) var(--of-ease);
}
.of-match-sidebar__add-col:hover {
  border-color: var(--of-brand);
  color: var(--of-brand);
  background: var(--of-brand-tint);
}
.of-match-sidebar__add-col > i { font-size: 18px; }

/* Group head: collapse toggle + rename pen + (hidden) rename input.
   Doubles as the drag handle for vertical column reordering. */
.of-match-sidebar__head {
  display: flex; align-items: center; gap: var(--of-space-1);
  margin-bottom: var(--of-space-2);
  cursor: grab;
  user-select: none;
}
.of-match-sidebar__head:active { cursor: grabbing; }
.of-match-sidebar__head .of-match-sidebar__rename,
.of-match-sidebar__head .of-match-sidebar__rename-input { cursor: default; }

/* Placeholder shown while a column group is being dragged */
.of-match-sidebar__group--placeholder {
  background: var(--of-brand-tint);
  border: 2px dashed var(--of-border-brand);
  border-radius: var(--of-radius-md);
  visibility: visible !important;
  min-height: 60px;
}
.of-match-sidebar__toggle {
  display: flex; align-items: center; gap: var(--of-space-2);
  flex: 1; min-width: 0; min-height: 28px;
  background: transparent; border: 0; cursor: pointer;
  text-align: left; padding: 4px 8px;
  color: inherit;
  line-height: 1;
}
.of-match-sidebar__title-text { line-height: 1; }
.of-match-sidebar__toggle:hover { color: var(--of-text-strong); }
.of-match-sidebar__toggle:focus-visible {
  outline: none; box-shadow: var(--of-focus-ring);
  border-radius: var(--of-radius-sm);
}
.of-match-sidebar__chevron {
  font-size: 16px;
  transition: transform var(--of-dur-fast) var(--of-ease);
}
.of-match-sidebar__group.is-collapsed .of-match-sidebar__chevron {
  transform: rotate(-90deg);
}
.of-match-sidebar__group.is-collapsed .of-match-sidebar__list {
  display: none;
}

/* Rename pen button — shows on group hover, click to enter edit mode */
.of-match-sidebar__rename {
  width: 28px; height: 28px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--of-radius-sm);
  color: var(--of-text-faint);
  display: inline-flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--of-dur-fast) var(--of-ease),
              color var(--of-dur-fast) var(--of-ease),
              background var(--of-dur-fast) var(--of-ease);
}
.of-match-sidebar__group:hover .of-match-sidebar__rename,
.of-match-sidebar__rename:focus-visible { opacity: 1; }
.of-match-sidebar__rename:hover {
  color: var(--of-brand);
  background: var(--of-brand-tint);
}
.of-match-sidebar__rename > i { font-size: 16px; }

/* Inline rename input — replaces the eyebrow + pen while editing */
.of-match-sidebar__rename-input {
  flex: 1;
  height: 32px;
  padding: 0 var(--of-space-2);
  font-size: var(--of-fs-body-sm);
  font-weight: 600;
}
.of-match-sidebar__group.is-renaming .of-match-sidebar__toggle,
.of-match-sidebar__group.is-renaming .of-match-sidebar__rename { display: none; }
.of-match-sidebar__group.is-renaming .of-match-sidebar__rename-input {
  display: inline-flex !important;
}
[hidden].of-match-sidebar__rename-input { display: none; }

/* Delete-column trash button — only visible while in rename/edit mode. */
.of-match-sidebar__delete {
  width: 28px; height: 28px;
  background: transparent; border: 0; cursor: pointer;
  border-radius: var(--of-radius-sm);
  color: var(--of-text-muted);
  display: none;
  align-items: center; justify-content: center;
  transition: color var(--of-dur-fast) var(--of-ease),
              background var(--of-dur-fast) var(--of-ease);
}
.of-match-sidebar__delete:hover {
  color: var(--of-danger-fg);
  background: var(--of-danger-tint);
}
.of-match-sidebar__delete > i { font-size: 16px; }
.of-match-sidebar__group.is-renaming .of-match-sidebar__delete {
  display: inline-flex;
}

.of-match-sidebar__eyebrow {
  margin: 0 0 var(--of-space-2);
  padding: 0 var(--of-space-2);
}

.of-match-sidebar__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; flex-direction: column;
  gap: 2px;
}

.of-match-sidebar__empty {
  display: flex; align-items: center; gap: var(--of-space-2);
  padding: var(--of-space-3);
  font-size: var(--of-fs-caption);
  color: var(--of-text-faint);
}

/* Candidate row (sidebar item). Compact, full-row click target. */
.of-candidate-row {
  display: flex; align-items: center;
  gap: var(--of-space-3);
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--of-radius-md);
  padding: 10px var(--of-space-3);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background var(--of-dur-fast) var(--of-ease),
              border-color var(--of-dur-fast) var(--of-ease);
}
.of-candidate-row:hover {
  background: var(--of-surface-rail);
}
.of-candidate-row:focus-visible {
  outline: none;
  box-shadow: var(--of-focus-ring);
}
.of-candidate-row.is-active {
  background: var(--of-brand-tint);
  border-color: var(--of-border-brand);
}

.of-candidate-row__avatar {
  width: 32px; height: 32px;
  font-size: 12px;
  flex-shrink: 0;
}

.of-candidate-row__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.of-candidate-row__name {
  font-size: var(--of-fs-body);
  font-weight: 600;
  color: var(--of-text-strong);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  display: inline-flex; align-items: center; gap: 4px;
}
.of-candidate-row__name.is-masked {
  color: var(--of-text-muted);
  font-weight: 500;
}
.of-candidate-row__meta {
  font-size: 11px;
  color: var(--of-text-muted);
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.of-candidate-row__score {
  font-size: var(--of-fs-body-sm);
  font-weight: 700;
  color: var(--of-text-muted);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  flex-shrink: 0;
}
.of-candidate-row__score-pct {
  font-size: 10px; font-weight: 600; margin-left: 1px;
}
.of-candidate-row.is-active .of-candidate-row__score { color: var(--of-brand); }

/* Per-column hue accent on the eyebrow — subtle tint per pipeline stage */
.of-match-sidebar__group--reviewing    .of-eyebrow { color: var(--of-col-reviewing-fg); }
.of-match-sidebar__group--interviewing .of-eyebrow { color: var(--of-col-interviewing-fg); }
.of-match-sidebar__group--hiring       .of-eyebrow { color: var(--of-col-hiring-fg); }
.of-match-sidebar__group--other        .of-eyebrow { color: var(--of-col-other-fg); }

/* Drag-drop placeholder shown while reordering candidates between groups. */
.of-candidate-row-placeholder {
  list-style: none;
  height: 60px;
  border-radius: var(--of-radius-md);
  border: 2px dashed var(--of-border-brand);
  background: var(--of-brand-tint);
  margin: 2px 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--of-brand);
  font-size: var(--of-fs-body-sm);
  font-weight: 600;
}
.of-candidate-row-placeholder::before {
  content: "Drop here to move";
}

/* ── Notes column ────────────────────────────────────────────────────────── */
/* The notes panel was a floating, draggable, resizable popover. Re-dock it as
   a third column inside #ProfileRender, sitting to the right of the CV when
   open. The flex on #ProfileRender lives next to the .of-match-page split-view
   rule above so it isn't lost to specificity. Existing JS hooks
   (.notes-side-panel.open, btnCloseNotesPanel, btnNotesToTab, btnShowNoteForm,
   .notes-resize-handle) keep working. */
#ProfileRender > .profile-background,
#ProfileRender > article.of-cv,
.profile-background {
  flex: 0 0 min(100%, 1080px);
  min-width: 0;
  max-width: 1080px;
}

.notes-side-panel {
  position: sticky !important;
  top: var(--of-app-nav-h) !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  width: 420px !important;
  max-width: 420px !important;
  height: calc(100vh - var(--of-app-nav-h) - var(--of-space-4)) !important;
  max-height: calc(100vh - var(--of-app-nav-h) - var(--of-space-4)) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  background: var(--of-surface-card) !important;
  border: 1px solid var(--of-border) !important;
  border-radius: var(--of-radius-lg) !important;
  box-shadow: var(--of-shadow-sm) !important;
  z-index: auto;
  transform: none !important;
  flex: 0 0 420px;
  display: none !important;
}
.notes-side-panel.open { display: flex !important; }
.notes-side-panel .notes-panel-header {
  background: var(--of-surface-alt) !important;
  cursor: default !important;
  user-select: text;
  padding: var(--of-space-3) var(--of-space-4) !important;
}
.notes-side-panel .notes-panel-header h5 { color: var(--of-text-strong) !important; }
.notes-side-panel .notes-panel-body { background: var(--of-surface-card) !important; }
/* No resizing, no draggable handle. */
.notes-side-panel .notes-resize-handle { display: none !important; }

/* ── Utilities ───────────────────────────────────────────────────────────── */
.of-stack           { display: flex; flex-direction: column; gap: var(--of-space-4); }
.of-row             { display: flex; align-items: center; gap: var(--of-space-3); }
.of-grow            { flex: 1; }
.of-muted           { color: var(--of-text-muted); }
.of-strong          { color: var(--of-text-strong); }
.of-mono            { font-family: var(--of-font-mono); }
.of-sr-only         { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }