/* ============================================================
   Recruiter Dashboard
   Type system: 1 family · 4 sizes · 3 weights
   ============================================================ */

:root {

  /* ── Typeface ──────────────────────────────────────────────
     Swap in the production face here. It must ship a true
     400/600/700 and lining tabular figures — without tabular
     numerals the card fractions will not align to each other. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
          Roboto, "Helvetica Neue", system-ui, sans-serif;

  /* ── Type scale ────────────────────────────────────────────
     Four sizes. Nothing may use a size outside this list.

     There is no caption step: metadata sits at `body` and is
     pushed back with COLOUR (--mid / --dim) instead of size.
     Section headers likewise reuse `body` at 600 weight.
     Recession is a colour job here, not a size job. */
  --t-display:  32px;   /* metric numbers, and nothing else  */
  --t-h1:       24px;   /* page title, one per screen        */
  --t-h2:       18px;   /* card + panel titles               */
  --t-body:     14px;   /* everything else                   */

  /* Three weights. 700 is reserved for metric numbers, so that
     seeing it anywhere else means something has gone wrong. */
  --w-regular: 400;
  --w-semi:    600;
  --w-bold:    700;

  /* Optical tracking — tightens as size grows. */
  --ls-display: -0.022em;
  --ls-h1:      -0.018em;
  --ls-h2:      -0.012em;
  --ls-body:     0;

  --lh-tight: 1.05;
  --lh-snug:  1.25;
  --lh-body:  1.45;

  /* ── Primitives ────────────────────────────────────────────
     Raw values, referenced only by the semantic layer below.
     These mirror the "DS Primitives" collection in Figma, so a
     Dev Mode handoff resolves against this file. Never use a
     primitive directly in a rule — reach for a semantic name. */
  --violet-500: #5B3ECC;
  --violet-400: #6E52E0;
  --violet-300: #8B72F0;
  --violet-250: #7A5AF8;
  --violet-200: #B8A6FF;

  --neutral-900: #17161D;
  --neutral-850: #1B1A21;
  --neutral-800: #1F1E22;
  --neutral-750: #27262D;
  --neutral-700: #2E2D34;
  --neutral-600: #3E3D44;
  --neutral-500: #65646B;
  --neutral-400: #87868E;   /* field labels — lifted to clear AA */
  --neutral-300: #9F9EA5;
  --neutral-250: #A8A6B4;
  --neutral-150: #D9D8DF;
  --neutral-100: #F2F1F6;
  --neutral-050: #DBDBDB;

  --rank-very-strong: #62D259;
  --rank-strong:      #80A9F9;
  --rank-average:     #FAD244;
  --rank-weak-raw:    #F59944;
  --rank-very-weak:   #FC8883;

  --signal-green:  #2BDF1C;
  --signal-blue:   #111BF3;
  --signal-orange: #FA5D2C;

  --base-white: #FFFFFF;

  /* ── Color ─────────────────────────────────────────────────
     Sampled from the source comp. The neutrals carry a violet
     bias so they sit with the accent rather than beside it.
     Each name below is one semantic role, aliased to a primitive. */
  --ground:   var(--neutral-900);  /* page + sidebar                      */
  --surface:  var(--neutral-800);  /* assessment cards, search, support   */
  --raised:   var(--neutral-600);  /* stat tiles, pills, bar track, avatar*/
  --line:     var(--neutral-600);  /* sidebar rule — same value as raised */
  --control-line: var(--neutral-500); /* outlined controls: the tab container */
  --sunken:   var(--neutral-850);  /* tab container fill                  */
  --chip-bg:  var(--neutral-750);  /* applied filter chip                 */

  --accent:      var(--violet-500);
  --accent-hi:   var(--violet-400);
  --accent-ring: var(--violet-300);

  /* Cards in the comp carry NO border: the edge is a fill change
     from --ground straight to --surface. Nothing here draws one. */

  --ink:      var(--neutral-100);  /* 15.9:1 on surface */
  --mid:      var(--neutral-250);  /*  7.0:1 on surface */
  --dim:      var(--neutral-300);  /*  6.1:1 on surface */
  --on-raised:var(--neutral-150);  /*  6.4:1 on raised — labels + pill text */
  --on-accent:var(--base-white);   /* text and glyphs sitting on --accent */

  /* Rank, sampled from the Summary comp. Reserved for candidate
     strength; never reused as decoration. */
  --rank-vs:    var(--rank-very-strong); /* 5.7:1 on raised */
  --rank-s:     var(--rank-strong);      /* 5.1:1 on raised */
  --rank-avg:   var(--rank-average);     /* 7.6:1 */
  --rank-weak:  var(--rank-weak-raw);    /* 5.0:1 */
  --rank-vweak: var(--rank-very-weak);   /* 4.6:1 on raised */

  /* Status dots. Always paired with their word, never colour alone. */
  --dot-submitted:   var(--signal-green);
  --dot-shortlisted: var(--signal-blue);
  --dot-received:    var(--signal-orange);

  /* Template viewer — the canvas is a light stage inside the dark
     shell, so these are the only light values in the system. */
  --canvas:       var(--neutral-050);
  --tool-active:  var(--violet-250); /* hand tool — brighter than --accent */
  --thumb-active: var(--violet-200); /* selected thumbnail ring + stepper ring */
  --thumb-ink:    var(--neutral-900); /* label on the light stage — the ground, inverted */

  --disabled-bg:   var(--neutral-700);
  --disabled-ink:  var(--neutral-500);
  --label:         var(--neutral-400); /* field labels — 4.6:1 on surface */

  /* ── Space & shape ─────────────────────────────────────── */
  --space-2xs:  4px;
  --space-xs:   6px;
  --space-sm:   8px;
  --space-md:  12px;
  --space-lg:  14px;
  --space-xl:  18px;
  --space-2xl: 20px;
  --space-3xl: 24px;
  --space-4xl: 30px;
  --space-5xl: 32px;
  --space-6xl: 40px;
  --space-7xl: 56px;

  --gap:      var(--space-xl);
  --pad-card: 20px 22px;
  --r-sm:      9px;
  --r-md:     12px;
  --r-full:   99px;

  --sidebar-w: 236px;
  --dur: 160ms;
  --ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   BASE
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-regular);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p { margin: 0; }

a { color: inherit; text-decoration: none; }

button, input {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  margin: 0;
}

/* Icons here are stroked line art by default. */
svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

/* Phosphor icons ship as filled outlines, not strokes — the reset
   above would erase them, so opt those out. */
svg.ph { fill: currentColor; stroke: none; }

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 8px; top: -60px; z-index: 10;
  background: var(--accent); color: var(--on-accent);
  padding: 10px 16px; border-radius: var(--r-sm);
  font-size: var(--t-body); font-weight: var(--w-semi);
  transition: top var(--dur) var(--ease);
}
.skip:focus { top: 8px; }

:focus-visible {
  outline: 2px solid var(--accent-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   TYPE PRIMITIVES
   ============================================================ */

/* Section header. Sentence case, in the product's own voice —
   the separation from an 18px card title comes from size and
   colour, not from shouting it in tracked capitals. */
.section-head {
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  color: var(--mid);
  line-height: 1.4;
}

/* ============================================================
   SHELL
   ============================================================ */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--dur) var(--ease);
}

.app.is-collapsed { grid-template-columns: 74px 1fr; }

/* ============================================================
   SIDEBAR
   ============================================================ */

/* Pinned: the rail stays put while the content column scrolls.
   align-self:start is required — a stretched grid item fills the
   track and leaves `sticky` nothing to move within. */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;

  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 20px 16px;
  border-right: 1px solid var(--line);
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* ── Brand ─────────────────────────────────────────────────
   Identity lives in the persistent chrome, not in the content
   area — the main column's heading is a per-session greeting
   and is the wrong thing to hang the brand off.

   The border-bottom balances the border-top on .sidebar__foot,
   so brand and account read as bookends around the nav. */

.brand-bar {
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--line);
}

/* Exact lockup box from the Figma spec. 156 + 40 + 40 = 236, which
   is the sidebar width — so centring here reproduces the file's
   left:40px placement rather than fighting it. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 156px;
  height: 32.4px;
  margin: 0 auto;
}

/* The mark is the supplied asset — it carries its own rounded
   square, its own violet and its own fills, so no background or
   radius is applied here. */
.brand__mark {
  width: 32.4px; height: 32.4px;
  flex: none;
}

/* The global `svg` reset further up sets fill:none / stroke:
   currentColor, and CSS beats presentation attributes — without
   this the logo would be repainted as a line icon. Clearing the
   root only is enough: the child elements' own fill/stroke
   attributes outrank anything inherited from it. */
.brand__mark svg {
  display: block;
  width: 100%; height: 100%;
  fill: none;
  stroke: none;
}

/* A logo sits outside the type scale — it's a brand asset, not
   body copy. 18/600 is what fills the remaining lockup width. */
.brand__name {
  font-size: 18px;
  font-weight: var(--w-semi);
  letter-spacing: -.015em;
  line-height: 1;
  white-space: nowrap;
}

/* ── Account (bottom) ──────────────────────────────────────── */

.sidebar__foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.account {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur) var(--ease);
}
.account:hover { background: var(--surface); }

/* Neutral, not accent — the accent is reserved for the brand mark
   and for active/primary state, so it keeps meaning something. */
.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--raised);
  color: var(--ink);
  display: grid; place-items: center;
  /* Optically sized to the 30px circle. Avatar initials are a
     glyph, not type — same exemption class as the logo. */
  font-size: 11px;
  font-weight: var(--w-semi);
  letter-spacing: .02em;
  flex: none;
}

.account__name {
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


.nav { display: flex; flex-direction: column; gap: 26px; }

.nav__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.nav__item svg { color: var(--mid); }
.nav__item:hover { background: var(--surface); }

.nav__item.is-active {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
}
.nav__item.is-active svg { color: var(--on-accent); }
.nav__item.is-active:hover { background: var(--accent-hi); }

.group { display: flex; flex-direction: column; gap: 3px; }

.group__head {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px 8px;
  color: var(--dim);
  cursor: pointer;
}

/* Sentence case, as drawn in the comp — "Workspace", not
   "WORKSPACE". Muted colour separates it from the nav items. */
.group__title {
  font-size: var(--t-body);
  font-weight: var(--w-regular);
}

.group__chev {
  stroke-width: 2.4;
  transition: transform var(--dur) var(--ease);
}
.group__head[aria-expanded="false"] .group__chev { transform: rotate(180deg); }

.group__body { display: flex; flex-direction: column; gap: 3px; }
.group__body[hidden] { display: none; }

.nav__sub {
  display: flex;
  align-items: center;
  padding: 7px 13px 7px 41px;
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  color: var(--mid);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav__sub:hover { background: var(--surface); color: var(--ink); }

.count {
  margin-left: auto;
  font-size: var(--t-body);
  font-variant-numeric: tabular-nums;
  color: var(--mid);
}

.collapse {
  width: 30px; height: 30px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--mid);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.collapse svg { stroke-width: 2.2; }
.collapse:hover { background: var(--surface); color: var(--ink); }
.collapse[aria-expanded="false"] svg { transform: rotate(180deg); }

/* Collapsed rail: marks only. The workspace mark and the avatar
   both survive, so identity and account stay reachable. */
.is-collapsed .brand__name,
.is-collapsed .account__name,
.is-collapsed .nav__label,
.is-collapsed .group__head,
.is-collapsed .nav__sub { display: none; }
.is-collapsed .sidebar { padding: 20px 12px; align-items: center; }
.is-collapsed .brand { width: auto; justify-content: center; }
.is-collapsed .nav__item { padding: 9px; }
.is-collapsed .account { flex: none; padding: 0; }
.is-collapsed .sidebar__foot { flex-direction: column; gap: 12px; width: 100%; }

/* ============================================================
   MAIN
   ============================================================ */

.main {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 24px 32px 32px;
  min-width: 0;
}

.topbar { display: flex; align-items: flex-start; gap: 24px; }

/* Shared by every screen: h1 + a caption subline. Keeping one
   component means the two pages can't drift apart. */
.pagehead { display: flex; flex-direction: column; gap: 3px; }

.pagehead__title {
  font-size: var(--t-h1);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-snug);
}

/* Body, not caption: this line is a sentence people read, not a
   label they scan. Same step on both screens. */
.pagehead__sub {
  font-size: var(--t-body);
  color: var(--mid);
}

.topbar__tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 2px;
}

.search {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 250px;
  padding: 8px 14px;
  background: var(--surface);
  border-radius: var(--r-sm);
  color: var(--dim);
  box-shadow: inset 0 0 0 1px transparent;
  transition: box-shadow var(--dur) var(--ease);
}
.search:focus-within { box-shadow: inset 0 0 0 1px var(--accent-ring); }
.search input { width: 100%; min-width: 0; color: var(--ink); outline: none; }
.search input::placeholder { color: var(--dim); }
.search input::-webkit-search-cancel-button { filter: grayscale(1) opacity(.6); }

.bell {
  position: relative;
  width: 34px; height: 34px;
  border-radius: var(--r-sm);
  color: var(--mid);
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bell:hover { background: var(--surface); color: var(--ink); }

.bell.has-unread::after {
  content: "";
  position: absolute; top: 5px; right: 6px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent-hi);
  border: 2px solid var(--ground);
}

/* ============================================================
   BLOCKS
   ============================================================ */

.block { display: flex; flex-direction: column; gap: 13px; }

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}

/* ── Stat tile ─────────────────────────────────────────────
   32px number over a 14px label. The number is the message;
   the label only names it. */

.stat {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: var(--pad-card);
  background: var(--raised);
  border-radius: var(--r-md);
}

.stat__value {
  font-size: var(--t-display);
  font-weight: var(--w-bold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}

.stat__label { font-size: var(--t-body); color: var(--on-raised); }

/* ── CTA ───────────────────────────────────────────────────
   A button, not a heading. Its prominence comes from the
   filled accent, so its label sits at body size. */

.cta {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--pad-card);
  background: var(--accent);
  border-radius: var(--r-md);
  color: var(--on-accent);
  transition: background var(--dur) var(--ease);
}
.cta:hover { background: var(--accent-hi); }
.cta svg { stroke-width: 1.8; }

.cta__text { display: flex; flex-direction: column; gap: 1px; }

.cta__title {
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
}

.cta__sub { font-size: var(--t-body); color: rgba(255, 255, 255, .72); }

/* ── Assessment card ───────────────────────────────────────── */

.card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: var(--pad-card);
  background: var(--surface);
  border-radius: var(--r-md);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Borderless, so hover lifts the fill rather than the edge. */
.card:hover { background: #26252C; transform: translateY(-1px); }

.card__head { display: flex; align-items: flex-start; gap: 12px; }

/* flex:1 pushes the pill to the right edge, so tags align across
   every card regardless of how long the title is. min-width:0 is
   what actually lets the title below shrink and ellipsis. */
.card__head > div { flex: 1; min-width: 0; }

/* One line, always. A wrapping title changes the card's internal
   rhythm and breaks alignment across the row. */
.card__title {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card__team {
  font-size: var(--t-body);
  color: var(--mid);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pill {
  flex: none;
  padding: 4px 10px;
  border-radius: var(--r-full);
  background: var(--raised);
  color: var(--on-raised);
  font-size: var(--t-body);
  white-space: nowrap;
}

.metric__frac { display: flex; align-items: baseline; }

.metric__frac .num,
.metric__frac .den {
  font-size: var(--t-display);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
}
.metric__frac .num { font-weight: var(--w-bold); }

/* De-emphasis is a COLOR job, not a weight job — the original
   used a fifth weight here to say what color already said. */
.metric__frac .den { font-weight: var(--w-regular); color: var(--dim); }

.metric__unit { font-size: var(--t-body); color: var(--mid); margin-top: 4px; }

/* The fraction alone reads flat: 180/200 and 221/727 scan the
   same. The bar is what makes progress legible at a glance. */
.bar {
  height: 5px;
  border-radius: var(--r-full);
  background: var(--raised);
  overflow: hidden;
}
.bar span {
  display: block;
  height: 100%;
  border-radius: var(--r-full);
  background: var(--accent-hi);
}

/* Bottom-anchored so footers align across the row even when one
   card's date wraps and another's doesn't. Grid already stretches
   the cards to equal height; this aligns their contents too. */
.card__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.card__date { font-size: var(--t-body); color: var(--dim); }

.go {
  margin-left: auto;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid; place-items: center;
  flex: none;
  transition: background var(--dur) var(--ease);
}
.go svg { stroke-width: 2.4; }
.card:hover .go { background: var(--accent-hi); }

/* ============================================================
   TEMPLATES
   ============================================================ */

/* Level filter. Controls sit at 14px — the same step as nav
   items — because they are operated, not read. */
.chips { display: flex; flex-wrap: wrap; gap: 12px; }

.chip {
  padding: 9px 20px;
  border: 1px solid var(--dim);
  border-radius: var(--r-full);
  background: none;
  color: var(--ink);
  font-size: var(--t-body);
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.chip:hover { background: var(--surface); }

.chip.is-active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
}
.chip.is-active:hover { background: var(--accent-hi); border-color: var(--accent-hi); }

/* The descriptor under the filter — body copy, muted. */
.chips-note { font-size: var(--t-body); color: var(--mid); }

/* ── Template card ─────────────────────────────────────────────
   Unlike the assessment card, this one is transparent with a
   1px rule — matching the Templates comp, where the fill is the
   page ground and only the border defines the box. */

.tcard {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 14px 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tcard:hover { border-color: var(--mid); transform: translateY(-1px); }

/* Measured off the comp: 357 x 177 — a 2:1 letterbox, not the
   taller 16:11 I had. */
.tcard__thumb {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: 10px;
  background: #F0F0F4;
  overflow: hidden;
}

/* The artwork floats on the light stage — centred at ~66% width,
   anchored to the top, bleeding off the bottom edge, as drawn. */
.tcard__thumb img {
  position: absolute;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 66%;
  height: auto;
  border-radius: 3px;
  display: block;
}

.tcard__badge {
  position: absolute;
  top: 12px; right: 12px;
  padding: 6px 14px;
  border-radius: var(--r-full);
  background: var(--raised);
  color: var(--on-raised);
  font-size: var(--t-body);
  white-space: nowrap;
}

.tcard__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0 8px;
}

.tcard__head .card__title { flex: 1; min-width: 0; }

.tcard__pin {
  flex: none;
  color: var(--ink);
  cursor: pointer;
  padding: 2px;
  border-radius: 6px;
  transition: color var(--dur) var(--ease);
}
.tcard__pin:hover { color: var(--accent-ring); }

.tcard__body {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  padding: 0 8px;
  margin-top: auto;
}

/* Three lines of qualifying detail — card metadata, so 12px,
   the same step as "Payments Team" on the dashboard. */
.tcard__meta {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-body);
  color: var(--mid);
}

/* ============================================================
   ASSESSMENT SUMMARY
   ============================================================ */

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-body);
  color: var(--on-raised);
  transition: color var(--dur) var(--ease);
}
.backlink:hover { color: var(--ink); }
.backlink svg { stroke-width: 2.2; }

/* Title block on the left, actions on the right. */
.pagehead-row { display: flex; align-items: flex-start; gap: 24px; }
.pagehead__actions { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.btn-outline {
  padding: 11px 20px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.btn-outline:hover { background: var(--accent); }

.btn-icon {
  width: 44px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.btn-icon:hover { background: var(--accent); }

/* ── Tabs ──────────────────────────────────────────────────── */

/* Measured off the comp: 52px tall overall — 1px rule, 7/11 padding,
   36px pill. The rule is what was missing. */
.tabs {
  align-self: flex-start;
  display: flex;
  gap: 10px;
  padding: 7px 11px;
  background: var(--sunken);
  border: 1px solid var(--control-line);
  border-radius: var(--r-md);
}

.tab {
  padding: 8px 22px;
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  color: var(--dim);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab:hover { color: var(--ink); }
.tab.is-active {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
}
.tab.is-active:hover { background: var(--accent-hi); color: var(--on-accent); }

/* ── Stat, horizontal variant ──────────────────────────────────
   Same tile as the dashboard, but the comp sets number and label
   side by side rather than stacked. */
.stat--row {
  flex-direction: row;
  align-items: center;
  gap: 18px;
  padding: 26px 24px;
}
.stat--row .stat__value { line-height: 1; }

/* ── Two-column split ──────────────────────────────────────────
   1 : 2, as drawn — the shortlist table carries five columns. */
.cols {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--gap);
  align-items: start;
}

/* ── Table card ────────────────────────────────────────────── */

.tbl {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 6px 22px 18px;
}

.tbl__scroll { overflow-x: auto; }

.tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-body);
}

.tbl th {
  text-align: left;
  font-weight: var(--w-regular);
  color: var(--on-raised);
  padding: 18px 12px;
  border-bottom: 1px solid var(--raised);
  white-space: nowrap;
}
.tbl th:first-child, .tbl td:first-child { padding-left: 0; }
.tbl th:last-child,  .tbl td:last-child  { padding-right: 0; }

.tbl td {
  padding: 14px 12px;
  color: var(--on-raised);
  vertical-align: middle;
  white-space: nowrap;
}

/* Underlined links — names and emails, as drawn. */
.lnk {
  color: var(--on-raised);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur) var(--ease);
}
.lnk:hover { color: var(--ink); }

/* Measured off both comps: 24px tall, radius 12 (fully rounded),
   and a FIXED 104px width so the rank column reads as one bar
   regardless of whether it says "Weak" or "Very Strong". */
.rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 104px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-full);
  background: var(--raised);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  line-height: 1;
  white-space: nowrap;
}
.rank--vs    { color: var(--rank-vs); }
.rank--s     { color: var(--rank-s); }
.rank--avg   { color: var(--rank-avg); }
.rank--weak  { color: var(--rank-weak); }
.rank--vweak { color: var(--rank-vweak); }

/* ============================================================
   CANDIDATES
   ============================================================ */

/* Sort / filter on the left, bulk actions on the right, with the
   rule the comp draws beneath. */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--raised);
}

.tool {
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.tool:hover { background: var(--surface); }

.tool-txt {
  margin-left: auto;
  padding: 10px 16px;
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  color: var(--on-raised);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.tool-txt:hover { color: var(--ink); }

.btn-flat {
  padding: 12px 22px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.btn-flat:hover { background: var(--accent-hi); }
.btn-flat:disabled {
  background: var(--disabled-bg);
  color: var(--disabled-ink);
  cursor: not-allowed;
}

/* ── Sort / filter menus ───────────────────────────────────────
   Surface card, 1px control rule, dim header — measured off the
   Frame 20276 spec. */

.menuwrap { position: relative; display: flex; }

.menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  width: 180px;
  padding: 0 0 6px;
  background: var(--surface);
  border: 1px solid var(--control-line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .45);
}
.menu[hidden] { display: none; }
.menu--wide { width: 200px; }

.menu__head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--control-line);
  font-size: var(--t-body);
  color: var(--dim);
}

.menu__item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  font-size: var(--t-body);
  color: var(--on-raised);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.menu__item:hover { background: var(--raised); }
.menu__item .rank { width: 104px; }

/* Radio — filled dot when chosen, hollow ring otherwise. */
.radio {
  width: 17px; height: 17px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  flex: none;
  transition: box-shadow var(--dur) var(--ease);
}
.menu__item[aria-checked="true"] .radio { box-shadow: inset 0 0 0 4px var(--ink); }

.fchips { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Candidate table ───────────────────────────────────────────
   Rows are separate cards with a gap, not ruled rows — so the
   table uses separate borders with vertical spacing. */

/* Toolbar and table are one unit, so the rule-to-header gap is set
   here rather than inheriting .main's 30px. Comp measures 21px:
   8px here plus the table's own 13px row spacing. */
.listing { display: flex; flex-direction: column; }
.listing .ctable__scroll { margin-top: 8px; }

.ctable__scroll { overflow-x: auto; }

.ctable {
  width: 100%;
  min-width: 1080px;
  border-collapse: separate;
  border-spacing: 0 13px;
  font-size: var(--t-body);
}

/* The header is a card too — same fill and radius as a data row. */
.ctable th {
  text-align: left;
  font-weight: var(--w-regular);
  color: var(--on-raised);
  background: var(--surface);
  padding: 12px 14px;
  white-space: nowrap;
}

.ctable td {
  padding: 19px 14px;
  color: var(--on-raised);
  background: var(--surface);
  vertical-align: middle;
  white-space: nowrap;
}
.ctable tbody tr:hover td { background: #26252C; }

.ctable th:first-child,
.ctable td:first-child { border-radius: var(--r-md) 0 0 var(--r-md); }
.ctable th:last-child,
.ctable td:last-child  { border-radius: 0 var(--r-md) var(--r-md) 0; }

.c-check { width: 1%; }
.c-star  { width: 1%; }
.c-go    { width: 1%; text-align: right; }

/* ── Checkbox ──────────────────────────────────────────────── */

.cbx {
  appearance: none;
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border: 1.5px solid var(--control-line);
  border-radius: 5px;
  display: grid; place-items: center;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cbx:hover { border-color: var(--on-raised); }
.cbx:checked { background: var(--accent); border-color: var(--accent); }
.cbx:checked::after {
  content: "";
  width: 10px; height: 6px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* ── Star toggle ───────────────────────────────────────────── */

/* 24px, matching the pills — otherwise the star sets the row
   height and every row runs a few px tall. */
.starbtn {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  color: var(--on-raised);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.starbtn svg { fill: none; stroke: currentColor; stroke-width: 1.7; }
.starbtn:hover { color: var(--ink); }
.starbtn[aria-pressed="true"] svg { fill: currentColor; }

/* ── Skill chip ────────────────────────────────────────────── */

/* Same 24px stadium, but hugging its content rather than fixed.
   Named `.skill`, not `.chip` — `.chip` is the Templates filter
   control and the two were colliding. */
.skill {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--raised);
  color: var(--on-raised);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  line-height: 1;
  white-space: nowrap;
}

/* Several skills in one cell — gap measured at 8px. */
.skills { display: inline-flex; flex-wrap: wrap; gap: 8px; }

/* Export sits alone on the right, with no Clear beside it. */
.btn-flat--end { margin-left: auto; }

/* ── Status ────────────────────────────────────────────────── */

.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 24px;
  padding: 0 12px;
  border-radius: var(--r-full);
  background: var(--raised);
  color: var(--on-raised);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  line-height: 1;
  white-space: nowrap;
}

.dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex: none;
}
.dot--submitted   { background: var(--dot-submitted); }
.dot--shortlisted { background: var(--dot-shortlisted); }
.dot--received    { background: var(--dot-received); }

.star-cell { width: 1%; }
.star { color: var(--ink); }

.go-cell { width: 1%; text-align: right; }
.chev {
  display: inline-grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 6px;
  color: var(--on-raised);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chev svg { stroke-width: 2.2; }
.tbl tbody tr:hover .chev { color: var(--ink); background: var(--raised); }

.tbl__foot {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 20px;
}
.tbl__more { font-size: var(--t-body); color: var(--dim); }
.tbl__foot .lnk { margin-left: auto; color: var(--dim); }
.tbl__foot .lnk:hover { color: var(--ink); }

/* ── Active filter chips ───────────────────────────────────────
   #27262D stadium wrapping the SAME 104px .rank pill used in the
   table — the filter shows the exact token it is filtering on. */
.fchip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 8px 0 16px;
  border-radius: var(--r-full);
  background: var(--chip-bg);
  color: var(--on-raised);
  font-size: var(--t-body);
  white-space: nowrap;
}

.fchip__x {
  display: grid; place-items: center;
  width: 24px; height: 24px;
  color: var(--on-raised);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.fchip__x svg { stroke-width: 1.7; }
.fchip__x:hover { color: var(--ink); }

/* Two status dots, overlapped, standing in for "2 status". */
.dotstack { display: inline-flex; align-items: center; }
.dotstack .dot { width: 11px; height: 11px; }
.dotstack .dot + .dot { margin-left: -4px; }

/* Replaces the View Assessment button in the filtered state. */
.evaluated { font-size: var(--t-body); color: var(--on-raised); white-space: nowrap; }

/* ============================================================
   TEMPLATE VIEWER  (View template · Edit template)
   ============================================================ */

/* Measured: left 845, right 324, gap 13 — the brief is a fixed rail
   whose height matches the question bar + canvas stack. */
.tpl-cols {
  display: grid;
  grid-template-columns: 1fr 324px;
  gap: 14px;
  align-items: start;
}
.tpl-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* ── Question bar ──────────────────────────────────────────── */

.qbar {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 16px 24px;
  background: var(--surface);
  border-radius: var(--r-md);
}
.qbar__n { font-size: var(--t-body); color: var(--dim); flex: none; }
.qbar__q {
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  color: var(--ink);
}

/* ── Canvas stage ──────────────────────────────────────────── */

.canvas {
  position: relative;
  height: 544px;
  background: var(--canvas);
  border-radius: var(--r-md);
  overflow: hidden;
  display: grid;
  place-items: center;
}
/* The artwork sits on the stage at ~20% zoom, so it is contained
   rather than cropped — the whole question stays visible. */
.canvas__art {
  display: block;
  width: 74%;
  height: 84%;
  object-fit: contain;
  border-radius: 4px;
}

/* Floating viewer controls, pinned inside the stage. */
.vtools {
  position: absolute;
  top: 18px; left: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: var(--surface);
  border-radius: 14px;
}
.vtool {
  display: grid; place-items: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.vtool:hover { background: var(--raised); }
.vtool.is-active { background: var(--tool-active); color: var(--on-accent); }
.vtool.is-active:hover { background: var(--tool-active); }

.vzoom {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 12px;
  border-radius: 10px;
  background: var(--raised);
  color: var(--ink);
  font-size: var(--t-body);
  cursor: pointer;
}

/* ── Question thumbnails ───────────────────────────────────── */

.thumbs { display: flex; justify-content: center; gap: 14px; margin-top: 6px; }

.thumb {
  position: relative;
  width: 96px; height: 58px;
  border-radius: 7px;
  background: var(--canvas);
  overflow: hidden;
  display: grid; place-items: end center;
  padding-bottom: 5px;
  cursor: pointer;
}

/* Contained, not cropped — the tile reads as a miniature page
   rather than a busy corner of one. */
.thumb__img {
  position: absolute;
  inset: 5px 8px;
  width: calc(100% - 16px);
  height: calc(100% - 10px);
  object-fit: contain;
}

/* Inactive tiles sit under a scrim: #DBDBDB x 0.7 = #99999C, the
   value the comp uses. Without it three screenshots compete and
   none of them reads. */
.thumb:not(.is-active)::after {
  content: "";
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .30);
}

.thumb__label {
  position: relative;
  z-index: 1;
  font-size: var(--t-body);
  color: var(--thumb-ink);
}
.thumb:not(.is-active) .thumb__label { color: #F3F1F7; }

.thumb.is-active { outline: 2px solid var(--thumb-active); outline-offset: 2px; }

/* ── Product brief ─────────────────────────────────────────── */

.brief {
  height: 599px;
  padding: 24px 26px;
  background: var(--surface);
  border-radius: var(--r-md);
  overflow-y: auto;
  scrollbar-width: thin;
}
.brief__title {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
  margin-bottom: 18px;
}
.brief h3 {
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  color: var(--ink);
  margin: 22px 0 6px;
}
.brief h3:first-of-type { margin-top: 0; }
.brief p { font-size: var(--t-body); color: var(--on-raised); }
.brief ul, .brief ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.brief li { font-size: var(--t-body); color: var(--on-raised); }

/* ── Stepper (Edit template) ───────────────────────────────── */

.stepper { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.stepper__track { display: flex; align-items: center; }
/* Measured: 14px dots on a 46px pitch — so a 32px connector.
   Track runs 152px overall. */
.stepper__dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--control-line);
  flex: none;
}
.stepper__dot.is-done { background: var(--accent); }
.stepper__dot.is-active {
  background: var(--accent);
  box-shadow: 0 0 0 1.5px var(--thumb-active);
}
.stepper__line { width: 32px; height: 2px; background: var(--control-line); flex: none; }
.stepper__line.is-done { background: var(--accent); }

/* ── Wizard panels & actions ───────────────────────────────── */

.wpanel {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 24px 26px 30px;
}
.wpanel__title {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
}
.wpanel__rule { height: 1px; background: var(--raised); margin: 18px 0 24px; }

.wgrid {
  display: grid;
  grid-template-columns: 250px 250px 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 1100px) { .wgrid { grid-template-columns: 1fr; } }

.wfield { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.wfield__label { font-size: var(--t-body); color: var(--on-raised); }
.wfield__value { font-size: var(--t-body); color: var(--ink); }

.taglist { display: flex; flex-wrap: wrap; gap: 10px; }

.wactions { display: flex; justify-content: flex-end; gap: 14px; }

/* Outlined action with the violet wash the comp shows. */
.btn-draft {
  padding: 12px 22px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  background: #1E1A2F;
  color: var(--ink);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.btn-draft:hover { background: #272141; }

/* ── Add candidates (step 3) ───────────────────────────────── */

.addrow {
  display: grid;
  grid-template-columns: 230px 250px auto auto 1fr;
  gap: 20px;
  align-items: end;
}
@media (max-width: 1150px) { .addrow { grid-template-columns: 1fr; } }

.finput { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.finput input {
  height: 42px;
  padding: 0 14px;
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--raised);
  color: var(--ink);
  font-size: var(--t-body);
  outline: none;
  transition: box-shadow var(--dur) var(--ease);
}
.finput input::placeholder { color: #545359; }
.finput input:focus { box-shadow: inset 0 0 0 1px var(--accent-ring); }

.btn-muted {
  height: 42px;
  padding: 0 8px;
  background: none;
  color: var(--dim);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  cursor: pointer;
}
.addrow__or { height: 42px; display: grid; place-items: center; font-size: var(--t-body); color: var(--on-raised); }

.dropzone {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 22px;
  border: 1.5px dashed var(--accent-ring);
  border-radius: var(--r-sm);
  background: #22202B;
  cursor: pointer;
}
.dropzone__main { font-size: var(--t-body); font-weight: var(--w-semi); color: var(--ink); }
.dropzone__main a { text-decoration: underline; text-underline-offset: 3px; }
.dropzone__sub { margin-top: 4px; font-size: var(--t-body); color: var(--on-raised); }
.dropzone svg { margin-left: auto; color: var(--ink); }

.cols-add {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 26px;
  align-items: start;
}
@media (max-width: 1150px) { .cols-add { grid-template-columns: 1fr; } }

.subhead-row { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.subhead {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
}
.countchip {
  padding: 6px 16px;
  border-radius: var(--r-full);
  background: var(--raised);
  color: var(--on-raised);
  font-size: var(--t-body);
}

.clist { background: var(--surface); border-radius: var(--r-md); padding: 4px 22px 8px; }
.clist__head {
  display: grid; grid-template-columns: 1fr 1.4fr 30px;
  align-items: center; gap: 12px;
  padding: 18px 0 14px;
  border-bottom: 1px solid var(--raised);
  font-size: var(--t-body);
}
.clist__scroll { max-height: 340px; overflow-y: auto; scrollbar-width: thin; }
.crow {
  display: grid; grid-template-columns: 1fr 1.4fr 30px;
  align-items: center; gap: 12px;
  padding: 18px 0;
  font-size: var(--t-body);
  color: var(--on-raised);
}
.crow__x {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 6px;
  color: var(--on-raised); cursor: pointer;
}
.crow__x:hover { background: var(--raised); color: var(--ink); }

/* ── Review (step 4) ───────────────────────────────────────── */

.agree { display: flex; align-items: center; gap: 14px; font-size: var(--t-body); }
.agree a { text-decoration: underline; text-underline-offset: 3px; }
.wnote { font-size: var(--t-body); color: var(--on-raised); text-align: right; }

.clines { display: flex; flex-direction: column; }
.cline {
  display: grid; grid-template-columns: 260px 1fr;
  gap: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--raised);
  font-size: var(--t-body);
  color: var(--on-raised);
  max-width: 560px;
}
.cline:last-child { border-bottom: none; }

/* ── Assessments index (screen 13) ─────────────────────────── */

.acard {
  display: flex; flex-direction: column; gap: 14px;
  padding: 14px 14px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.acard:hover { border-color: var(--mid); transform: translateY(-1px); }

.acard__thumb {
  position: relative;
  aspect-ratio: 2 / 1;
  border-radius: 10px;
  background: #F0F0F4;
  overflow: hidden;
}
.acard__thumb img {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  width: 66%; height: auto; border-radius: 3px; display: block;
}
/* The badge here sits on the page ground colour, not --raised. */
.acard__badge {
  position: absolute; top: 12px; right: 12px;
  padding: 6px 14px; border-radius: var(--r-full);
  background: var(--ground); color: var(--on-raised);
  font-size: var(--t-body); white-space: nowrap;
}
.acard__title {
  font-size: var(--t-h2); font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 0 8px;
}
.acard__meta { padding: 0 8px; display: flex; flex-direction: column; gap: 6px; font-size: var(--t-body); color: var(--on-raised); }
.acard__foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 6px 8px 0; }
.acard__date { font-size: var(--t-body); color: var(--dim); }
.acard__foot .go, .acard__foot .btn-flat { margin-left: auto; }
.kebab {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 6px;
  color: var(--ink); cursor: pointer;
}
.kebab:hover { background: var(--surface); }
.pagehead-actions { display: flex; justify-content: flex-end; }
.stepper__label { font-size: var(--t-body); color: var(--accent-ring); }

/* Wizard action, bottom-right of the step. */
.wizard-foot { display: flex; justify-content: flex-end; margin-top: auto; }

/* ── Viewport-height step ──────────────────────────────────────
   The step fits the window: the canvas takes the leftover height,
   the brief scrolls inside itself, and the action stays pinned to
   the bottom instead of being pushed off-screen. */
/* Definite height, so the brief can scroll inside itself instead of
   growing the row. The 980 floor keeps the stage at roughly the
   comp's 544 on short windows — the page scrolls rather than the
   mockup shrinking. */
.main--fit {
  height: 100vh;
  min-height: 980px;
  gap: 20px;
  padding-bottom: 24px;
}
.main--fit .tpl-cols {
  flex: 1;
  min-height: 0;
  align-items: stretch;
}
.main--fit .tpl-main { min-height: 0; }
.main--fit .canvas { height: auto; flex: 1; min-height: 0; }
.main--fit .brief { height: 100%; min-height: 0; }
.main--fit .thumbs { flex: none; }
.main--fit .wizard-foot { flex: none; margin-top: 0; }

/* ============================================================
   CANDIDATE DETAILS
   ============================================================ */

/* Measured: left column 827, right 335, gap 21.5 — the right
   panel is a fixed rail, so it stays put as the page widens. */
.detail-cols {
  display: grid;
  grid-template-columns: 1fr 335px;
  gap: 22px;
  align-items: start;
}
.dcol { display: flex; flex-direction: column; gap: 22px; min-width: 0; }

.panel {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 26px 28px;
}

.panel__head { display: flex; align-items: center; gap: 16px; }

.panel__title {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
  line-height: 1.3;
}
.panel__head .rank { margin-left: auto; }

.panel__desc {
  margin-top: 14px;
  font-size: var(--t-body);
  color: var(--on-raised);
  max-width: 82ch;
}

.panel__foot {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 26px;
}
.evidence { font-size: var(--t-body); color: var(--dim); }

.arrow-btn {
  margin-left: auto;
  flex: none;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  display: grid; place-items: center;
  transition: background var(--dur) var(--ease);
}
.arrow-btn svg { stroke-width: 2.2; }
.arrow-btn:hover { background: var(--accent-hi); }

/* Outline star beside the primary action — no button chrome. */
.star-lg {
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.star-lg svg { fill: none; stroke: currentColor; stroke-width: 1.6; }
.star-lg:hover { background: var(--surface); }
.star-lg[aria-pressed="true"] svg { fill: currentColor; }

/* ── Evidence tray ─────────────────────────────────────────────
   592px, matching the Figma frame. Slides in from the right when
   a skill card's arrow is pressed. */

.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0, 0, 0, .55);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.scrim.is-open { opacity: 1; visibility: visible; }

.tray {
  position: fixed;
  top: 0; right: 0; z-index: 41;
  width: 592px; max-width: 100vw;
  height: 100vh;
  background: var(--ground);
  padding: 26px 20px 40px;
  overflow-y: auto;
  scrollbar-width: thin;
  transform: translateX(100%);
  transition: transform var(--dur) var(--ease);
}
.tray.is-open { transform: none; }

.tray__close {
  position: absolute;
  top: 22px; right: 22px;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.tray__close svg { stroke-width: 2; }
.tray__close:hover { background: var(--surface); }

.tray__head { padding: 34px 12px 22px; }
.tray__eyebrow { font-size: var(--t-body); color: var(--on-raised); }
.tray__titlerow { display: flex; align-items: center; gap: 16px; margin-top: 6px; }
.tray__title {
  font-size: var(--t-h1);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-snug);
}
.tray__titlerow .rank { margin-left: auto; }

.ev {
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 24px 26px;
  margin-bottom: 18px;
}
.ev__n { font-size: var(--t-body); color: var(--dim); }
.ev__q {
  margin-top: 6px;
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  color: var(--ink);
}
.ev__shot {
  display: block;
  width: 148px; height: 108px;
  object-fit: cover;
  object-position: top left;
  border-radius: 6px;
  margin: 20px 0;
  background: var(--canvas);
}
.ev__a { font-size: var(--t-body); color: var(--on-raised); }

/* ── Personal information ──────────────────────────────────── */

.panel--info { display: flex; flex-direction: column; }

.fields {
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 2px; }
.field dt { font-size: var(--t-body); color: var(--label); }
.field dd { margin: 0; font-size: var(--t-body); color: var(--on-raised); }

.panel--info .btn-outline {
  align-self: flex-start;
  margin-top: 28px;
  text-align: center;
}

/* ── Support ───────────────────────────────────────────────── */

.support {
  margin-top: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: 420px;
  padding: 16px 18px;
  background: var(--surface);
  border-radius: var(--r-md);
}

/* Was set in a second typeface in the comp — the only place on
   the screen it appeared. Now on the shared family. */
.support__ask {
  max-width: 150px;
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  color: var(--mid);
}

.support__btn {
  flex: none;
  padding: 9px 16px;
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  transition: background var(--dur) var(--ease);
}
.support__btn:hover { background: var(--accent); }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* The stat row breaks to 2-up well before the card row does — its
   tiles carry three lines of text, so they run out of width first. */
@media (max-width: 1300px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

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

@media (max-width: 820px) {
  .app, .app.is-collapsed { grid-template-columns: 74px 1fr; }
  .brand__name, .account__name,
  .nav__label, .group__head, .nav__sub { display: none; }
  .sidebar { padding: 20px 12px; align-items: center; }
  .brand { width: auto; justify-content: center; }
  .nav__item { padding: 9px; }
  .account { flex: none; padding: 0; }
  .sidebar__foot { justify-content: center; }
  .collapse { display: none; }
  .main { padding: 20px; }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .topbar { flex-wrap: wrap; }
  .search { width: 190px; }
  .support { margin-left: 0; max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   AUTH & ONBOARDING
   Get in touch, create account, verify, set password, log in.
   No sidebar — a split page with the pitch on the left and the
   form on the right.
   ═══════════════════════════════════════════════════════════ */

.auth {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 760px 1fr;
  background: var(--surface);
}

.auth__pitch {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 64px;
  padding: 128px 56px 72px;
  background: var(--ground);
}
.auth__brand { position: absolute; top: 32px; left: 56px; }

.auth__headline {
  font-size: var(--t-display);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h1);
  line-height: 1.28;
  max-width: 15ch;
}

.authhelp { display: flex; flex-direction: column; gap: 8px; max-width: 60ch; }
.authhelp__title {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
}
.authhelp__body { font-size: var(--t-body); color: var(--mid); line-height: 1.55; }

.auth__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 56px;
}
.authform {
  width: 100%;
  max-width: 446px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.authform__head { display: flex; flex-direction: column; gap: 8px; }
.authform__eyebrow { font-size: var(--t-body); color: var(--mid); }
.authform__title {
  font-size: var(--t-h1);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-snug);
}
.authform__sub { font-size: var(--t-body); color: var(--mid); }

/* On the auth pages the control sits on --surface with nothing
   else around it, so it needs the lighter of the two edges. */
.authform .fctl { box-shadow: inset 0 0 0 1px var(--control-line); }
.authform .fctl:focus { box-shadow: inset 0 0 0 1px var(--accent-ring); }
.authform .btn-flat { align-self: flex-start; }

.fhint { font-size: var(--t-body); color: var(--dim); }
.authform__foot { font-size: var(--t-body); color: var(--mid); }

@media (max-width: 1100px) {
  .auth { grid-template-columns: 1fr; min-height: 0; }
  .auth__pitch { padding: 96px 32px 56px; gap: 40px; }
  .auth__brand { left: 32px; }
  .auth__panel { padding: 48px 32px 72px; }
  .auth__headline { max-width: none; }
}

/* ═══════════════════════════════════════════════════════════
   ASSESSMENT VIEW
   The third tab: what was actually sent to candidates.
   ═══════════════════════════════════════════════════════════ */

/* Same split as the question canvas below it, so the two rows
   line up down the page. */
.asmt-top { display: grid; grid-template-columns: 1fr 324px; gap: 14px; align-items: stretch; }
.asmt-top > .wpanel { margin: 0; }

.collab { display: flex; flex-direction: column; gap: 18px; }
.collab__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.collab__add {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.collab__add:hover { background: var(--raised); }
.collab__list { display: flex; flex-direction: column; gap: 14px; }
.collab__row { display: flex; align-items: center; gap: 14px; }
.collab__face {
  width: 28px; height: 28px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--raised);
}
.collab__mail { font-size: var(--t-body); color: var(--ink); }
.collab__soon { margin-top: auto; text-align: right; font-size: var(--t-body); color: var(--label); }

/* ═══════════════════════════════════════════════════════════
   EMPTY STATES
   One component for every "nothing here yet" moment, so the
   five of them can't drift apart.
   ═══════════════════════════════════════════════════════════ */

/* A class-level `display` outranks the UA's [hidden] rule, and most
   things being toggled here carry one. */
[hidden] { display: none !important; }

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 72px 24px;
  text-align: center;
}
.empty__art { width: 171px; height: auto; }
.empty__body { display: flex; flex-direction: column; gap: 6px; }
.empty__title {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
  color: var(--mid);
}
.empty__desc {
  font-size: var(--t-body);
  color: var(--dim);
  line-height: 1.55;
  max-width: 46ch;
}
.empty .btn-flat { margin-top: 6px; }

/* Inside a panel the state carries the panel's own padding. */
.empty--panel { padding: 56px 24px; }

/* An uploaded spreadsheet, listed once the file lands. */
.filecard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: var(--surface);
}
.filecard__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filecard__name {
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.filecard__meta { font-size: var(--t-body); color: var(--dim); }
.filecard__x {
  margin-left: auto;
  width: 32px; height: 32px;
  flex: none;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--mid);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.filecard__x:hover { background: var(--raised); color: var(--ink); }

/* ═══════════════════════════════════════════════════════════
   ACCOUNT & SUPPORT
   Contact support, profile, profile edit, team members.
   ═══════════════════════════════════════════════════════════ */

/* ── Forms ─────────────────────────────────────────────────
   .finput already sets the control height everywhere else in
   the app; these build on it rather than starting over. */

.fgroup { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.fgroup > label,
.flabel {
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  color: var(--ink);
}

.fctl {
  height: 42px;
  padding: 0 14px;
  width: 100%;
  font-family: inherit;
  border-radius: var(--r-sm);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--raised);
  color: var(--ink);
  font-size: var(--t-body);
  outline: none;
  transition: box-shadow var(--dur) var(--ease);
}
textarea.fctl { height: 118px; padding: 12px 14px; resize: vertical; line-height: 1.5; }
.fctl::placeholder { color: #545359; }
.fctl:focus { box-shadow: inset 0 0 0 1px var(--accent-ring); }
.fctl:disabled { color: var(--dim); cursor: not-allowed; }

/* A select needs its own chevron — the native one doesn't take a colour. */
select.fctl {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8A6B4' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}
select.fctl:invalid, select.fctl option[value=""] { color: #545359; }

.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.checkrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--t-body);
  color: var(--ink);
  cursor: pointer;
}
.checkrow .cbx { flex: none; }

.formcard {
  padding: 36px;
  border-radius: var(--r-md);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: start;
}
.formcard__head { display: flex; flex-direction: column; gap: 10px; }
.formcard__title {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
}
.formcard__desc { font-size: var(--t-body); color: var(--mid); line-height: 1.55; }
.formcard .btn-flat { width: 100%; padding: 13px 22px; }

/* ── Contact support ───────────────────────────────────────── */

.assist { display: grid; grid-template-columns: minmax(0, 1fr) 529px; gap: 40px; }
.assist__col { display: flex; flex-direction: column; gap: 56px; min-width: 0; }

.cmethods { display: flex; flex-direction: column; gap: 34px; }
.cmethod { display: grid; grid-template-columns: 22px 1fr; gap: 14px; }
.cmethod svg { color: var(--thumb-active); margin-top: 2px; }
.cmethod__body { display: flex; flex-direction: column; gap: 3px; }
.cmethod__title {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
  color: var(--thumb-active);
}
.cmethod__desc { font-size: var(--t-body); color: var(--mid); }
.cmethod__value {
  margin-top: 11px;
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  color: var(--ink);
}

.faqs { display: flex; flex-direction: column; gap: 26px; }
.faqs__head { display: flex; flex-direction: column; gap: 6px; }
.faqs__title {
  font-size: var(--t-h1);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h1);
  line-height: var(--lh-snug);
  color: var(--thumb-active);
}
.faqs__sub { font-size: var(--t-body); color: var(--mid); }
.faq { display: flex; flex-direction: column; gap: 6px; max-width: 660px; }
.faq__q {
  font-size: var(--t-body);
  font-weight: var(--w-bold);
  letter-spacing: -.004em;
  color: var(--ink);
}
.faq__a { font-size: var(--t-body); color: var(--mid); line-height: 1.55; }

/* ── Profile ───────────────────────────────────────────────── */

.prof { display: flex; flex-direction: column; gap: 28px; max-width: 900px; }

.prof__id { display: flex; align-items: center; gap: 14px; }
.prof__avatar {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
}
.prof__who { display: flex; flex-direction: column; gap: 2px; }
.prof__name {
  font-size: var(--t-h2);
  font-weight: var(--w-semi);
  letter-spacing: var(--ls-h2);
}
.prof__meta { font-size: var(--t-body); color: var(--mid); }

.prof__block { display: flex; flex-direction: column; gap: 16px; }
.prof__blockhead { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.prof__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 40px; }
.prof__grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.pencil {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--mid);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pencil:hover { background: var(--raised); color: var(--ink); }

.prof__danger { display: flex; }
.btn-danger {
  padding: 12px 22px;
  border-radius: var(--r-sm);
  background: var(--raised);
  color: var(--rank-vweak);
  font-size: var(--t-body);
  font-weight: var(--w-semi);
  letter-spacing: -.004em;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.btn-danger:hover { background: #4A3239; }

/* ── Team members ──────────────────────────────────────────── */

.team__remove {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  color: var(--mid);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.team__remove:hover { background: var(--raised); color: var(--ink); }
.c-remove { width: 44px; text-align: right; }

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

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}