/* ===== NOOVA design system =====
   The approved matrix design is the foundation of the whole app. Layers:
     1. TOKENS      colour (Light / Dark), type scale, air, radii, borders, sizes
     2. BASE        html/body, headings, links, theme twins
     3. CHROME      the fixed header: wordmark · theme toggle · menu
     4. COMPONENTS  the c-* building blocks the pages are made of
     5. WORKSPACE   the pieces of the recruiter pages still on their old
                    class names (app.css), redrawn with the tokens
   Components use tokens only; no colour or size is written twice. */

/* ── 1. Tokens ──────────────────────────────────────────────────────────── */
:root {
  /* colour — the Figma "Color" collection, Light mode */
  /* the light theme's two surfaces, lifted ~12%: #d7d8d7 / #ebebeb read
     grey rather than light. The surface stays a shade off pure white so a
     card still has somewhere to go on hover. */
  --color-bg: #f1f2f1; --color-surface: #fcfcfc; --color-text: #0b0d14;
  --color-text-muted: #565961; --color-text-secondary: #2c2f3d; --color-text-faint: #666666;
  --color-text-label: #808087; --color-line: rgba(11, 13, 20, .2);
  --color-cognitive: #5cc5dd; --color-ego: #8690d8; --color-brand: #8db5be;
  --color-neutral: var(--color-text-faint); --color-danger: var(--color-ego);
  /* the controls above a list - filter, sort, the view switch - say "nothing
     applied here" and must not compete with the rows. One grey for all of
     them, and it is the quietest the theme has: the lightest on a light
     page, the darkest on a dark one. They used to be painted from three
     different values, one of which was the hairline colour. */
  --color-quiet: #808087;
  /* type — five steps + the intro paragraph */
  --font: 'Golos Text', sans-serif; --fw-r: 400; --fw-m: 500; --fw-sb: 600;
  --fs-2xs: 10px; --fs-xs: 12px; --fs-sm: 14px; --fs-md: 16px; --fs-lg: 24px; --fs-xl: 36px; --fs-2xl: 64px; --fs-hero: 20px; --fs-metric: 32px; --fs-cta: 17px;   /* 2xs: chips only */
  --lh-tight: 1.1; --lh-body: 1.4; --lh-head: .9;
  --ls-1: -.01em; --ls-2: -.02em; --ls-3: -.03em; --ls-4: -.04em; --ls-6: -.06em; --ls-wide: .08em;
  /* spacing */
  --sp-2: 2px; --sp-4: 4px; --sp-5: 5px; --sp-6: 6px; --sp-7: 7px; --sp-8: 8px; --sp-10: 10px; --sp-12: 12px;
  --sp-15: 15px; --sp-16: 16px; --sp-18: 18px; --sp-20: 20px; --sp-30: 30px; --sp-40: 40px; --sp-80: 80px;
  /* air — inner breathing room vs. rhythm between blocks */
  --frame-gap: 35px; --block-gap: 15px;
  --card-py: 36px; --card-px: 24px; --head-h: 26px; --head-pb: 24px; --pill-h: 21px;
  --cgap-xs: 16px; --cgap-sm: 20px; --cgap-md: 22px; --cgap-lg: 24px;
  --row-py: 18px; --row-gap: 22px; --list-py: 12px; --label-gap: 10px; --text-gap: 24px; --kv-gap: 22px;
  --metric-py: 22px; --body-gap: 24px; --body-pb: 14px; --item-gap: 14px; --item-py: 22px; --check-gap: 18px;
  --scores-p: 24px; --score-gap: 12px; --identity-gap: 24px;
  --crumb-py: 10px; --crumb-px: 15px; --crumb-pr: 20px; --menu-py: 12px; --menu-px: 18px;
  /* radii · borders · sizes */
  --r-card: 20px; --r-pill: 40px; --r-chip: 50px; --r-bar: 3px; --r-item: 11px;
  --bw-hair: .5px; --bw-chip: .4px; --bw-1: 1px;
  --frame-w: 440px; --page-w: 1800px; --header-h: 80px;
  --icon-16: 16px; --icon-10: 10px; --icon-20: 20px; --dot-6: 6px;
  --bar-h: 2px; --chips-w: 92px; --metric-h: 44px; --metric-code-w: 24px; --metric-name-w: 140px; --metric-score-w: 30px;
  --menu-w: 220px; --tap: 40px; --cta-px: 44px; --btn-h: 48px;
  --ease: .22s ease;

  /* the names the older stylesheets (app.css, landing.css, interview.css)
     still read - each one is a token above, nothing else */
  --font-display: var(--font); --font-mono: var(--font);
  --bg: var(--color-bg); --bg-elevated: var(--color-surface);
  --text: var(--color-text); --white: var(--color-text); --light: var(--color-text-secondary);
  --medium-gray: var(--color-text-muted); --gray: var(--color-text-faint); --dark-gray: var(--color-line);
  --btn: var(--color-brand); --btn-hover: var(--color-text); --bad: var(--color-danger);
  --avatar-base: var(--color-surface); --hover-veil: var(--color-line);
  --lock-veil: var(--color-line); --lock-border: var(--color-line);
  --tone-green: var(--color-cognitive); --tone-amber: var(--color-text-faint); --tone-red: var(--color-ego);
}
:root[data-theme="dark"] {
  --color-bg: #0b0d14; --color-surface: #1b1e26; --color-text: #ffffff;
  --color-text-muted: #ababab; --color-text-secondary: #d7d8d7; --color-text-faint: #666666;
  --color-text-label: #808087; --color-line: rgba(255, 255, 255, .2);
  --color-quiet: #666666;
}

/* ── 2. Base ────────────────────────────────────────────────────────────── */
html { background: var(--color-bg); }
body {
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font); font-size: var(--fs-md); line-height: var(--lh-body);
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh;
}
#content {
  display: flex; flex-direction: column; flex: 1 0 auto; min-width: 0;
  padding-top: calc(var(--header-h) + env(safe-area-inset-top, 0px));
}
h1 { font-size: var(--fs-xl); font-weight: var(--fw-r); line-height: var(--lh-head); letter-spacing: var(--ls-6); min-width: 0; }
h2 { font-size: var(--fs-lg); font-weight: var(--fw-m); line-height: var(--lh-tight); letter-spacing: var(--ls-2); }
h3, h4 { font-size: var(--fs-md); font-weight: var(--fw-m); line-height: var(--lh-body); letter-spacing: var(--ls-2); }
b, strong { font-weight: var(--fw-sb); }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg { display: block; }
.only-dark { display: none !important; }
:root[data-theme="dark"] .only-light { display: none !important; }
:root[data-theme="dark"] .only-dark { display: block !important; }
.gray { color: var(--color-text-muted); }
.dim { color: var(--color-text-faint); }

/* ── 3. Header: wordmark · theme toggle · menu ──────────────────────────── */
#header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  height: calc(var(--header-h) + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 20px 0;
  display: flex; justify-content: space-between; align-items: center; gap: var(--sp-20);
}
/* the band behind it: the header's own height, opaque at the top and gone
   by its bottom edge - one straight run, 100% to 0 */
#header::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(-1 * env(safe-area-inset-top, 0px)) 0 0 0;
  background: linear-gradient(to bottom, var(--color-bg) 0, transparent 100%);
}
.head-left, .head-right { display: flex; align-items: center; gap: var(--sp-12); min-width: 0; }
.logo { display: block; width: 87px; height: 20px; color: var(--color-text); }
.logo .wordmark { width: 100%; height: 100%; }
.head-company {
  font-size: var(--fs-sm); letter-spacing: var(--ls-2); color: var(--color-text-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.c-iconbtn {
  width: var(--tap); height: var(--tap); padding: 0; border: 0; background: none; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; color: var(--color-text); transition: background var(--ease);
}
.c-iconbtn:hover, .c-iconbtn[aria-expanded="true"] { background: var(--color-line); }
/* the theme switch is the glyph alone - no disc behind it. The menu beside
   it keeps its fill, because that one has an open state to show. */
.c-iconbtn--theme, .c-iconbtn--theme:hover { background: none; }
.c-iconbtn--theme { color: var(--color-text-muted); }
.c-iconbtn--theme:hover { color: var(--color-text); }
.c-iconbtn--theme svg { width: var(--icon-20); height: var(--icon-20); }
/* one glyph per theme: the moon while the page is light, the star it had
   all along while the page is dark */
.c-iconbtn--theme .i-dark { display: none; }
:root[data-theme="dark"] .c-iconbtn--theme .i-dark { display: block; }
:root[data-theme="dark"] .c-iconbtn--theme .i-light { display: none; }
.c-iconbtn--menu svg { width: 40px; height: 7px; stroke: currentColor; stroke-linecap: round; }
/* the account button is the person's own face, so it carries no fill of its
   own - the picture is the whole control */
.c-iconbtn--acct, .c-iconbtn--acct:hover { background: none; padding: 0; }
/* ── c-ava: the signed-in recruiter. A picture when Google gave us one, the
   initial underneath it - which is also the whole of it for a mailbox
   sign-in, and what is left if the picture URL has expired. ── */
.c-ava {
  position: relative; width: 32px; height: 32px; flex: 0 0 auto; display: inline-flex;
  align-items: center; justify-content: center; border-radius: 50%; overflow: hidden;
  background: var(--color-line); color: var(--color-text);
  font-size: var(--fs-sm); line-height: 1; text-transform: uppercase;
}
.c-ava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.c-ava__txt { text-box: trim-both cap alphabetic; }
.c-ava--sm { width: 20px; height: 20px; font-size: var(--fs-2xs); }
/* a candidate in a list: the same circle, at the size the row was built for */
.c-ava--list { width: 28px; height: 28px; font-size: var(--fs-xs); color: var(--color-text-muted); }
.c-iconbtn--acct:hover .c-ava { box-shadow: 0 0 0 var(--bw-1) var(--color-text-faint); }
.c-menu__who { display: flex; align-items: center; gap: var(--sp-8); }
.login-link { display: inline-flex; align-items: center; gap: var(--sp-7); font-size: var(--fs-sm); color: var(--color-text-muted); white-space: nowrap; transition: color var(--ease); }
.login-link:hover { color: var(--color-text); }
/* the same 20px as the theme switch beside it: two glyphs on one line at
   two sizes read as a mistake, whatever the reason for it */
.login-link svg { width: var(--icon-20); height: var(--icon-20); }
/* At phone width the wordmark, the switch, the sign-in link and the button
   do not fit on one line, and the button is what ran off the right edge.
   The link drops its word and keeps its icon; the anchor carries the name
   for anyone not reading the glyph. */
@media (max-width: 430px) {
  .login-link span { display: none; }
}
/* the menu behind the hamburger */
.acct { position: relative; display: inline-flex; }
.c-menu {
  position: absolute; right: 0; top: calc(100% + var(--sp-10)); z-index: 20; width: var(--menu-w);
  background: var(--color-surface); border: var(--bw-hair) solid var(--color-line); border-radius: var(--r-card);
  padding: var(--sp-7); display: flex; flex-direction: column; gap: var(--sp-2); box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}
.c-menu__who { padding: var(--sp-10) var(--menu-px) var(--sp-5); font-size: var(--fs-xs); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-menu__who .c-ava { color: var(--color-text-muted); }
/* a short aside with no frame round it: a label and the lines under it */
.c-note { width: 100%; display: flex; flex-direction: column; gap: var(--sp-12); }

/* ── c-steps: where you are in onboarding. A list, not a progress bar: the
   steps have names, and the name is what tells you whether the next one is
   worth doing now. ── */
.c-steps { width: 100%; display: flex; flex-direction: column; gap: var(--sp-12); }
.c-steps__i { display: flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-sm); letter-spacing: var(--ls-2); color: var(--color-text-faint); }
.c-steps__n {
  width: 24px; height: 24px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  border: var(--bw-hair) solid var(--color-line); border-radius: 50%; font-size: var(--fs-xs); line-height: 1;
}
.c-steps__n svg { width: 12px; height: 12px; }
.c-steps__t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-steps__i.is-on { color: var(--color-text); }
.c-steps__i.is-on .c-steps__n { border-color: var(--color-cognitive); color: var(--color-cognitive); }
.c-steps__i.is-done .c-steps__n { border-color: var(--color-text-faint); color: var(--color-text-faint); }

/* the account, as a person rather than a row in a table */
.c-who { width: 100%; display: flex; align-items: center; gap: var(--sp-12); }
.c-who__txt { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.c-who__name { font-size: var(--fs-md); line-height: var(--lh-body); color: var(--color-text); overflow: hidden; text-overflow: ellipsis; }
.c-who__sub { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; }
.c-menu__item {
  display: block; width: 100%; padding: var(--menu-py) var(--menu-px); border: 0; background: none; text-align: left; border-radius: var(--r-item);
  font-size: var(--fs-md); font-weight: var(--fw-m); color: var(--color-text); white-space: nowrap; transition: background var(--ease);
}
.c-menu__item:hover { background: var(--color-line); }
.c-menu__item[aria-current] { color: var(--color-brand); }
.c-menu__sep { border-top: var(--bw-hair) solid var(--color-line); margin-top: var(--sp-5); padding-top: var(--sp-5); }
.c-menu__sep .c-menu__item { color: var(--color-text-muted); }

/* ── 4. Components ──────────────────────────────────────────────────────── */

/* the browser's own [hidden] default is display:none, but the FIRST
   component rule below that also sets its own display (flex/grid/etc.)
   wins over that default - so a hidden card, row or menu still shows.
   Settled once, here, instead of patching every component that hides
   something: [hidden] always means gone. */
[hidden] { display: none !important; }

/* the browser's own focus ring is a thick, off-brand blue oval - keep a
   visible outline for keyboard users, but only for them, not for a mouse
   click that leaves the button focused afterward */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-cognitive); outline-offset: 2px; }

/* ── c-frame: the page column. .mx is the report's 440px column ── */
.mx {
  width: 100%; max-width: var(--frame-w); margin: 0 auto; font-size: var(--fs-md); line-height: var(--lh-body);
  padding: var(--sp-40) var(--sp-15) var(--sp-80);
  display: flex; flex-direction: column; gap: var(--frame-gap); align-items: center;
}
.mx p, .mx h1, .mx h2, .mx h3 { text-box: trim-both cap alphabetic; margin: 0; }
.mx .working p, .mx .lockwall p, .mx .spark-list, .mx blockquote { text-box: normal; }
.mx .flash { width: 100%; }

/* ── the dashboard, on a real desktop screen ──
   Mobile-first: c-col-aside and c-col-main are plain, invisible wrappers by
   default (display: contents pulls their children straight into .c-sections'
   own single-column flow, so the phone layout is exactly the one-column
   .c-sections everywhere else in the app - untouched). From 900px each
   wrapper becomes its own flex column and the two sit side by side: the
   workspace, calm and uncluttered, on the left; the working queue - Recent
   reports, Verdicts, Needs attention, Roles - on the right, at last wide
   enough for the candidate list to stop fighting for space.

   This is two independent columns, not two tracks of one grid: a CSS grid's
   implicit rows size to the tallest item across BOTH columns, so a short
   left column and a tall right one would leave the left side stranded with
   a wide gap and the right side start out of alignment. Two flex columns
   inside one grid have no such row to share - each just grows to its own
   content, top-aligned with the other. */
/* ── c-brand: the one accent of the dashboard - the workspace's own name,
   what it does, where to find it. Generous line-height and gaps do the
   "accented" work; nothing here is boxed or bordered. ── */
.c-brand { display: flex; flex-direction: column; gap: var(--sp-20); }
.c-brand__name { font-size: var(--fs-xl); font-weight: var(--fw-r); line-height: var(--lh-head); letter-spacing: var(--ls-6); color: var(--color-text); }
.c-brand__desc { font-size: var(--fs-hero); line-height: var(--lh-body); letter-spacing: var(--ls-3); color: var(--color-text-muted); }
.c-brand__desc a { text-decoration: underline; text-underline-offset: 3px; }
.c-brand__tags { display: flex; flex-wrap: wrap; gap: var(--sp-10); }
/* the line above the name: who is asking, before what for */
.c-brand__over { font-size: var(--fs-sm); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-muted); }
.c-brand__links { display: flex; flex-wrap: wrap; gap: var(--sp-20); }
.c-brand__links a { display: inline-flex; align-items: center; gap: var(--sp-6); font-size: var(--fs-md); letter-spacing: var(--ls-3); color: var(--color-cognitive); transition: color var(--ease); }
.c-brand__links a:hover { color: var(--color-text); }
.c-brand__links svg { width: var(--icon-20); height: var(--icon-20); flex: 0 0 auto; }

/* ── c-mcards: a page's numbers, each in its own frame with its trend
   beside it. Two by two on a phone; one row on a real screen ──
   The count is not fixed - the dashboard shows four, a role shows three -
   so the row is laid out by auto-flow rather than by a hardcoded number of
   columns, which left the odd card stranded on a second row of its own. */
.c-mcards { width: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
/* an odd last card has no partner on its row, so it takes the whole of it
   rather than hanging at half width with a hole beside it */
.c-mcards > :last-child:nth-child(odd) { grid-column: 1 / -1; }
/* One row only once there is room for one: below 1400px four cards in a
   row are narrower than the words in them, and the labels ran out past the
   card edges. Two by two until then. */
@media (min-width: 1400px) {
  .c-mcards { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .c-mcards > :last-child:nth-child(odd) { grid-column: auto; }
}
.c-mcard { border: var(--bw-hair) solid var(--color-line); border-radius: var(--r-card); padding: var(--sp-20); display: flex; flex-direction: column; gap: var(--sp-10); min-width: 0; }
.c-mcard__label { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text); }
.c-mcard__row { width: 100%; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8); }
.c-mcard__num { font-size: var(--fs-metric); font-weight: var(--fw-m); line-height: var(--lh-tight); color: var(--color-text); white-space: nowrap; }
.c-mcard__delta { display: inline-flex; align-items: center; gap: var(--sp-5); font-size: var(--fs-sm); color: var(--color-cognitive); white-space: nowrap; }
/* the arrow stands as tall as the figure it belongs to, not as a footnote */
.c-mcard__delta svg { width: 1em; height: 1em; flex: 0 0 auto; }
.c-mcard__delta.is-down { color: var(--color-ego); }

.c-col-aside, .c-col-main { display: contents; }
/* with the wrappers transparent the two columns become one flow in source
   order, which can put a page's chart above its trail - wherever the crumb
   ends up, it still opens the page */
@media (max-width: 899px) { .mx--dash .c-crumb { order: -1; } }
@media (min-width: 900px) {
  .mx--dash { max-width: var(--page-w); }
  /* flex columns stretch by default - width:auto alone can't stop that. The
     cap is what keeps it inside: sized to its trail the crumb grew past the
     column and ate the frame's right-hand inset, so the page looked padded
     on the left and flush on the right. Its own shrink rules truncate. */
  .mx--dash .c-crumb { width: auto; max-width: 100%; align-self: flex-start; }
  .mx--dash .c-radar { align-items: flex-start; }               /* the chart sits on the column's own left edge */
  /* Figma's own two columns are equal flex-[1_0_0], not a content-width
     aside - its calm, sparse left column is deliberate, not a mistake to
     correct by shrinking it. The pair is capped near Figma's own 1440px
     frame (not stretched to our wider 1800px page) so the ratio matches
     at any width, and centered the same way the cards below are. */
  /* the page's own wrapper only - a c-sections nested inside a column (the
     report's card stack) keeps its single-column self */
  .mx--dash > .c-sections { display: flex; flex-direction: row; align-items: flex-start; gap: var(--sp-40); max-width: 1440px; margin: 0 auto; }
  .mx--dash .c-col-aside, .mx--dash .c-col-main { flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; gap: var(--frame-gap); }
  /* both columns sit inset from the frame's own edges. The left one also
     stays put while the queue scrolls: where you are and what you can do
     here should never be something you have to scroll back up for. Its own
     scrollbar only appears on a window too short to hold it. */
  .mx--dash .c-col-aside {
    /* the frame is inset by the same 80px on both sides */
    padding: 0 var(--sp-80);
    position: sticky; top: var(--header-h); align-self: flex-start;
    max-height: calc(100svh - var(--header-h)); overflow-y: auto;
  }
  /* the right-hand gutter is deliberately the wide one: a card's border
     lands hard on the padding, where the chart opposite it fades out */
  .mx--dash .c-col-main { padding-right: calc(var(--sp-80) * 2); }
  /* the name and the line under it read as a title, not as a paragraph
     running the width of the column - and a 64px name needs room under it */
  .mx--dash .c-brand { gap: var(--sp-30); }
  .mx--dash .c-brand__name, .mx--dash .c-identity__name { font-size: var(--fs-2xl); max-width: 60%; }
  .mx--dash .c-brand__desc { max-width: 60%; }
}
/* Between the two-column breakpoint and a real desktop the frame's insets
   are what the columns cannot afford: 80 on the left and 160 on the right
   left an iPad with two narrow gutters of content. */
@media (min-width: 900px) and (max-width: 1399px) {
  .mx--dash > .c-sections { gap: var(--sp-30); }
  .mx--dash .c-col-aside { padding: 0 var(--sp-30); }
  .mx--dash .c-col-main { padding-right: var(--sp-30); }
}

/* Two across at every width that fits two, one on a phone. A third column
   bought nothing: it took the width each tile needs for its title and turned
   every role and every candidate into an ellipsis. */

/* ── c-button: the one button. Outlined pill; --primary fills it ──
   One size everywhere: a variant changes colour, never the type or the
   padding. `.cta`, `.is-accent` and the header each set their own, so two
   buttons side by side in one row did not match. The landing page keeps
   its own oversized call to action, which is a different thing. */
.button, .cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8);
  height: var(--btn-h); padding: 0 var(--cta-px); border-radius: var(--r-pill); white-space: nowrap;
  font-family: var(--font); font-size: var(--fs-cta); font-weight: var(--fw-m); letter-spacing: var(--ls-2);
  color: var(--color-text); background: none; border: var(--bw-hair) solid var(--color-text-faint);
  transition: color var(--ease), border-color var(--ease), background var(--ease);
}
.button:hover { border-color: var(--color-text); background: var(--color-line); }
.button:disabled, .cta[disabled] { opacity: .4; cursor: default; }
/* a link has no disabled state of its own - the row keeps its shape and the
   action just cannot be taken yet */
.button.is-off { opacity: .4; pointer-events: none; }
.button svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* the same pill, reduced to its sign: a 20px glyph at 1.5, the name kept
   for the pointer (title) and for a screen reader (aria-label) */
.button--icon { width: var(--tap); height: var(--tap); padding: 0; gap: 0; font-size: var(--fs-sm); }
.button--icon svg { width: var(--icon-20); height: var(--icon-20); stroke-width: 1.5; }
.button--icon .i-done { display: none; }
.button--icon.is-copied .i-idle { display: none; }
.button--icon.is-copied .i-done { display: block; }
.button.is-quiet { color: var(--color-text-muted); border-color: var(--color-line); }
.button.is-quiet:hover { color: var(--color-text); border-color: var(--color-text-faint); background: none; }
.button.is-danger:hover { color: var(--color-ego); border-color: var(--color-ego); }
/* inside its own dialog the destructive choice is already deliberate - it
   says what it is at rest, not only under the pointer */
.c-modal .button.is-danger { color: var(--color-ego); border-color: var(--color-ego); }
.copy-btn.is-copied { color: var(--color-cognitive); border-color: var(--color-cognitive); }
.cta { background: var(--color-text); color: var(--color-bg); border-color: var(--color-text); }
.cta:hover { background: var(--color-text-secondary); border-color: var(--color-text-secondary); }
.cta.is-quiet { background: none; color: var(--color-text); border-color: var(--color-text-faint); }
/* the one call to action a recruiter takes from the dashboard: the same
   button as every other, in the same blue as the workspace link above it,
   outlined rather than filled - an invitation, not the loudest thing here */
.button.is-accent {
  color: var(--color-cognitive); border: var(--bw-1) solid var(--color-cognitive);
}
.button.is-accent:hover { background: var(--color-cognitive); color: var(--color-bg); border-color: var(--color-cognitive); }
.button.is-accent svg { width: var(--icon-20); height: var(--icon-20); }

/* ── c-modal: what an icon in the action row opens. Its own overlay rather
   than a <dialog>: the browser's top layer left the page unpainted once the
   dialog closed ── */
.c-modal {
  position: fixed; inset: 0; z-index: 60; padding: var(--sp-15);
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .6);
}
.c-modal__box {
  width: min(520px, 100%); max-height: calc(100svh - var(--sp-40)); overflow-y: auto; padding: var(--sp-20);
  border: var(--bw-hair) solid var(--color-line); border-radius: var(--r-card);
  background: var(--color-surface); color: var(--color-text);
}
.c-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-20); margin-bottom: var(--sp-16); }
.c-modal__title { font-size: var(--fs-sm); font-weight: var(--fw-sb); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text); }
.c-modal__close {
  width: var(--icon-20); height: var(--icon-20); padding: 0; border: 0; background: none;
  color: var(--color-text-faint); cursor: pointer; transition: color var(--ease);
}
.c-modal__close:hover { color: var(--color-text); }
.c-modal__close svg { width: var(--icon-20); height: var(--icon-20); stroke-width: 1.5; }
.c-modal__body { display: flex; flex-direction: column; gap: var(--sp-16); }

/* ── c-crumb: breadcrumb links ── */
.c-crumb {
  width: 100%; background: none; border: var(--bw-hair) solid var(--color-line);
  border-radius: var(--r-chip); padding: var(--crumb-py) var(--crumb-pr) var(--crumb-py) var(--crumb-px);
  display: flex; gap: var(--sp-6); align-items: center; color: var(--color-text-muted); min-width: 0;
}
.c-crumb svg { width: var(--icon-20); height: var(--icon-20); flex: 0 0 auto; }
.c-crumb__sep { color: var(--color-line); }   /* the steps carry the meaning, not the arrows between them */
.c-crumb__home { display: inline-flex; color: inherit; transition: color var(--ease); }
.c-crumb__home:hover { color: var(--color-text); }
.c-crumb__link {
  font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-4); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: color var(--ease);
}
.c-crumb__link:hover, .c-crumb__link[aria-current] { color: var(--color-text); }
/* only when the trail is too long for the screen does anything give way,
   and then the steps behind you give way first - eight times as fast as
   where you are now */
.c-crumb__link { flex-shrink: 8; }
.c-crumb__link[aria-current] { flex-shrink: 1; }

/* ── c-radar: chart art + axis labels ── */
.c-radar { width: 100%; display: flex; flex-direction: column; align-items: center; margin: 0; }
/* The art was pinned to the 402x438 box it was drawn in, so on a wide column
   it sat small in a sea of space and on a phone it overflowed. It keeps the
   drawing's proportions and takes whatever width the column gives it; every
   piece inside is placed in percentages for the same reason. */
.c-radar__art { position: relative; width: 100%; aspect-ratio: 402.414 / 438.006; }
.c-radar__art .abs { position: absolute; }
.c-radar__art .abs img { display: block; width: 100%; height: 100%; }
.c-radar__poly { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.c-radar__poly polygon { fill: var(--color-text); fill-opacity: .1; stroke-width: 1; stroke-linejoin: round; }
.c-radar__poly--cog { stroke: var(--color-cognitive); }
.c-radar__poly--ego { stroke: var(--color-ego); }
.c-radar__lbl {
  position: absolute; font-size: var(--fs-xs); line-height: var(--lh-tight); text-transform: uppercase;
  text-align: center; white-space: nowrap; color: var(--color-text);
}
.c-radar__lbl--cog span:last-child { color: var(--color-cognitive); }
.c-radar__lbl--ego span:last-child { color: var(--color-ego); }

/* ── c-scores ── */
.c-scores {
  width: 100%; border: var(--bw-1) solid var(--color-line); border-radius: var(--r-card); padding: var(--scores-p);
  display: flex; align-items: flex-end; justify-content: space-between; container-type: inline-size;
}
/* no overflow:hidden here - the figure's ink reaches past the box that
   `text-box: cap alphabetic` trims it to, and the column cut 7px off the
   bottom of every number. Only the label can be too wide, so the clipping
   belongs on the label. */
.c-score { flex: 1 0 0; min-width: 1px; display: flex; flex-direction: column; gap: var(--score-gap); justify-content: flex-end; }
/* label and figure are the metric card's, to the letter - three numbers are
   three numbers wherever they are read */
.c-score__lab {
  display: flex; gap: var(--sp-6); align-items: center; font-size: var(--fs-xs); line-height: var(--lh-tight);
  letter-spacing: var(--ls-wide); text-transform: uppercase; white-space: nowrap; color: var(--color-text);
}
.c-score__lab { min-width: 0; }
/* no overflow here either: `text-box: cap alphabetic` trims the box to cap
   height and the letters' ink reaches past it, so hiding the overflow cut
   the label along its baseline the same way it cut the figures. The three
   labels are fixed, short strings; the container query below buys them the
   room they need on a narrow phone. */
.c-score__lab p { text-box: trim-both cap alphabetic; }
.c-score__lab svg { width: var(--icon-10); height: var(--icon-10); color: var(--score-color, var(--color-text-faint)); flex: 0 0 auto; }
.c-score__num { font-size: var(--fs-metric); font-weight: var(--fw-m); line-height: var(--lh-tight); white-space: nowrap; color: var(--color-text); }
/* narrow phones: the labels lose their tracking before they lose their room */
@container (max-width: 380px) { .c-score__lab { letter-spacing: .04em; } }

/* ── c-identity · c-hero · c-verdict ── */
.c-identity { width: 100%; display: flex; flex-direction: column; gap: var(--identity-gap); align-items: flex-start; }
.c-identity__name { font-size: var(--fs-xl); font-weight: var(--fw-r); line-height: var(--lh-head); letter-spacing: var(--ls-6); width: 100%; color: var(--color-text); }
/* the candidate's address under their name: one click copies it, and the
   whole control is the button - there is nothing else to aim at */
.c-mail {
  display: inline-flex; align-items: center; gap: var(--sp-6); padding: 0; border: 0; background: none;
  font-size: var(--fs-sm); letter-spacing: var(--ls-2); color: var(--color-text-faint);
  cursor: pointer; transition: color var(--ease);
}
.c-mail .c-chip__code { color: inherit; }
.c-mail svg { width: var(--icon-16); height: var(--icon-16); flex: 0 0 auto; }
.c-mail:hover { color: var(--color-text); }
.c-mail.is-copied { color: var(--color-cognitive); }

.c-hero { width: 100%; font-size: var(--fs-hero); line-height: var(--lh-body); letter-spacing: var(--ls-3); color: var(--color-text-muted); }
.c-hero b { font-weight: var(--fw-m); color: var(--color-text); }
.c-verdict {
  --verdict-tone: var(--color-neutral);
  border: var(--bw-hair) solid var(--verdict-tone); border-radius: var(--r-chip); padding: var(--sp-6) var(--sp-10);
  display: inline-flex; gap: var(--sp-6); align-items: center; color: var(--color-text-faint);
}
.c-verdict--cog { --verdict-tone: var(--color-cognitive); color: var(--color-cognitive); }
.c-verdict--ego { --verdict-tone: var(--color-ego); color: var(--color-ego); }
.c-verdict svg { width: var(--dot-6); height: var(--dot-6); color: var(--verdict-tone); flex: 0 0 auto; }
.c-verdict__txt { font-size: var(--fs-sm); font-weight: var(--fw-r); line-height: var(--lh-tight); letter-spacing: var(--ls-2); white-space: nowrap; text-box: trim-both cap alphabetic; }

/* ── c-card: a section card ── */
.c-sections { width: 100%; display: flex; flex-direction: column; gap: var(--block-gap); }
.c-card {
  --card-gap: var(--cgap-md); --card-title: var(--color-text); --card-meta: var(--color-text-faint);
  width: 100%; background: var(--color-surface); border-radius: var(--r-card); padding: var(--card-py) var(--card-px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; overflow: clip;
}
/* a card wrapping a table or a grid of tiles gets Figma's own p-20 instead
   of the taller header padding above - tighter on a phone, matching the
   frame's 20px exactly once there's room for it */
.c-card:has(.c-rows), .c-card:has(.c-tiles) { padding: var(--sp-10); }
@media (min-width: 900px) {
  .c-card:has(.c-rows), .c-card:has(.c-tiles) { padding: var(--sp-20); }
}
.c-card--g12 { --card-gap: var(--cgap-xs); } .c-card--g16 { --card-gap: var(--cgap-sm); }
.c-card--g18 { --card-gap: var(--sp-18); } .c-card--g20 { --card-gap: var(--cgap-lg); }
.c-card--quiet { --card-title: var(--color-text-muted); --card-meta: var(--color-text-muted); }
.c-card--core { padding: var(--card-py) var(--card-px) var(--card-px); --card-gap: 0; }
.c-card__head { width: 100%; height: calc(var(--head-h) + var(--head-pb)); display: flex; gap: var(--sp-10); align-items: center; padding-bottom: var(--head-pb); }
.c-card__title { flex: 1 0 0; min-width: 1px; font-size: var(--fs-sm); font-weight: var(--fw-sb); line-height: var(--lh-tight); letter-spacing: 0; text-transform: uppercase; color: var(--card-title); }
/* the roles label and its controls sit on the page, not on the card below
   it - the card starts fresh right after, its own background carrying
   only the list */
.c-list-block { width: 100%; display: flex; flex-direction: column; gap: var(--sp-15); align-items: flex-start; }
.c-list-head { width: 100%; display: flex; gap: var(--sp-20); align-items: center; padding: var(--sp-20) var(--sp-20) 0; }
.c-list-head__title { flex: 1 0 0; min-width: 1px; font-size: var(--fs-sm); font-weight: var(--fw-sb); line-height: var(--lh-tight); text-transform: uppercase; color: var(--color-text); }
.c-card__score { font-size: var(--fs-lg); font-weight: var(--fw-m); line-height: var(--lh-tight); text-align: right; white-space: nowrap; text-transform: uppercase; color: var(--color-text); }
.c-card__meta { display: flex; gap: var(--sp-5); align-items: center; }
.c-card__body { display: flex; flex-direction: column; gap: var(--card-gap); align-items: flex-start; width: 100%; }
.c-card__note { width: 100%; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text-faint); }

/* ── c-pill: the source of a card's data (CV · Interview), in its head. Not a control ── */
.c-pill {
  border: var(--bw-hair) solid var(--color-line); border-radius: var(--r-pill); padding: 0 var(--sp-10); height: var(--pill-h);
  display: inline-flex; gap: var(--sp-4); align-items: center; color: var(--card-meta, var(--color-text-faint));
}
.c-pill__txt { font-size: var(--fs-xs); line-height: var(--lh-tight); text-transform: uppercase; white-space: nowrap; text-box: trim-both cap alphabetic; }
.c-pill svg { flex: 0 0 auto; }
.i-cv { width: 6.6px; height: 9.8px; } .i-test { width: 13px; height: 7px; }

/* ── c-chip: metric code + score, or a status word ── */
.c-chip {
  --chip-color: var(--color-text-muted); --chip-code: var(--color-text-muted);
  border: var(--bw-hair) solid var(--chip-color); border-radius: var(--r-chip); padding: var(--sp-4) var(--sp-6);
  display: inline-flex; gap: var(--sp-4); align-items: baseline; justify-content: center;
  font-size: var(--fs-2xs); font-weight: var(--fw-r); line-height: var(--lh-tight); letter-spacing: var(--ls-1); white-space: nowrap;
}
.c-chip__code, .c-chip__num { text-box: trim-both cap alphabetic; }
/* a score is a figure, not a state: the pill outline stays with the verdict
   beside it, the number reads at full strength and the label keeps the tone */
.c-chip--num { border: 0; padding: 0; gap: var(--sp-5); }
.c-chip--num .c-chip__num { font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.c-chip--cog { --chip-color: var(--color-cognitive); --chip-code: var(--color-cognitive); }
.c-chip--ego { --chip-color: var(--color-ego); --chip-code: var(--color-ego); }
.c-chip__code { color: var(--chip-code); } .c-chip__num { color: var(--color-text); }
.c-chip--txt .c-chip__code { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.c-chips { display: flex; gap: var(--sp-2); align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; }
.c-chips--col { width: var(--chips-w); flex: 0 0 auto; }

/* ── c-label · c-block · c-row · c-kv · c-text ── */
.c-label { font-size: var(--fs-sm); font-weight: var(--fw-m); line-height: var(--lh-tight); letter-spacing: var(--ls-wide); text-transform: uppercase; white-space: nowrap; color: var(--label-color, var(--color-text-faint)); }
.c-block { width: 100%; display: flex; flex-direction: column; gap: var(--label-gap); }
.c-block__list { width: 100%; display: flex; flex-direction: column; padding: var(--list-py) 0; }
.c-row { width: 100%; border-top: var(--bw-hair) solid var(--color-line); padding: var(--row-py) 0; display: flex; gap: var(--row-gap); align-items: flex-start; }
.c-row__txt { flex: 1 0 0; min-width: 1px; font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-2); color: var(--color-text-secondary); }
.c-row__sub { display: block; margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--color-text-faint); }
.c-kv { width: 100%; display: flex; flex-direction: column; gap: var(--kv-gap); }
.c-kv__row { width: 100%; display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-16); }
.c-kv__k { flex: 0 0 auto; font-size: var(--fs-sm); letter-spacing: var(--ls-2); color: var(--color-text-label); text-box: normal; line-height: normal; }
.c-kv__v { min-width: 0; text-align: right; font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-2); color: var(--color-text-secondary); overflow-wrap: anywhere; }
.c-stack { width: 100%; display: flex; flex-direction: column; }
.c-text { width: 100%; border-top: var(--bw-hair) solid var(--color-line); padding: var(--row-py) 0; display: flex; flex-direction: column; gap: var(--text-gap); }
.c-text__p { width: 100%; font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-2); color: var(--color-text-secondary); white-space: pre-line; }
.c-text__q { width: 100%; font-size: var(--fs-md); font-weight: var(--fw-m); line-height: var(--lh-body); letter-spacing: var(--ls-2); color: var(--color-text); }
.c-text .c-chips { width: 100%; }

/* ── c-metric: an accordion row of a profile ── */
.c-metric { --metric-color: var(--color-cognitive); width: 100%; display: flex; flex-direction: column; gap: var(--item-gap); }
.c-metric--ego { --metric-color: var(--color-ego); }
/* A measure shown at the floor of the scale rather than measured: it keeps
   the hue of its family so the row still reads as that measure, at half
   strength so it never passes for a number the transcript earned. A flat
   grey here sits too close to the empty part of the bar to be seen at all. */
.c-metric--empty { --metric-color: color-mix(in srgb, var(--color-cognitive) 50%, transparent); }
.c-metric--ego.c-metric--empty { --metric-color: color-mix(in srgb, var(--color-ego) 50%, transparent); }
.c-metric--empty .c-metric__title { color: var(--color-text-muted); }
.c-metric__flag { width: 100%; font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: var(--ls-3); color: var(--color-text-faint); text-transform: uppercase; }
.c-metric__head { width: 100%; height: var(--metric-h); border-top: var(--bw-hair) solid var(--color-line); padding: var(--metric-py) 0; display: flex; gap: var(--sp-10); align-items: center; list-style: none; cursor: pointer; }
.c-metric__head::-webkit-details-marker { display: none; }
.c-metric__name { display: flex; gap: var(--sp-10); align-items: center; font-size: var(--fs-sm); line-height: var(--lh-tight); text-transform: uppercase; min-width: 0; }
.c-metric__code, .c-metric__title, .c-metric__score { text-box: trim-both cap alphabetic; }
.c-metric__code { width: var(--metric-code-w); flex: 0 0 auto; color: var(--metric-color); }
/* no overflow: the row's three spans are trimmed to cap height and the ink
   of a letter reaches past that, so hiding the overflow cut the name along
   its baseline. The width is what keeps every bar on the same line, and the
   longest name in the set - METACOGNITION - fits inside it. */
.c-metric__title { width: var(--metric-name-w); font-weight: var(--fw-m); color: var(--color-text); white-space: nowrap; }
.c-bar { flex: 1 0 0; min-width: 1px; display: flex; gap: var(--sp-2); align-items: center; }
.c-bar i { flex: 1 0 0; min-width: 1px; height: var(--bar-h); border-radius: var(--r-bar); background: var(--color-line); }
.c-bar i.on { background: var(--metric-color); }
.c-metric__score { width: var(--metric-score-w); font-size: var(--fs-lg); line-height: var(--lh-tight); text-align: right; text-transform: uppercase; color: var(--metric-color); }
.c-metric__chev { width: 9.5px; height: 5.5px; flex: 0 0 auto; color: var(--color-line); transition: transform var(--ease); }
.c-metric[open] .c-metric__chev { transform: rotate(180deg); }
.c-metric__body { width: 100%; display: flex; flex-direction: column; gap: var(--body-gap); padding-bottom: var(--body-pb); }
.c-metric__desc { width: 100%; font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: var(--ls-3); color: var(--color-text-muted); }
.c-quote { width: 100%; border-left: var(--bw-1) solid var(--metric-color); padding: var(--sp-5) var(--sp-12); display: flex; align-items: center; }
.c-quote p { flex: 1 0 0; min-width: 1px; font-size: var(--fs-xs); line-height: var(--lh-body); letter-spacing: var(--ls-3); color: var(--color-text-muted); }
.c-quote__ref { color: var(--metric-color); }

/* ── c-item (interview / risk) · c-group + c-check (fit / conclusion) ── */
.c-item { width: 100%; border-top: var(--bw-hair) solid var(--color-line); padding: var(--item-py) 0; display: flex; flex-direction: column; gap: var(--item-gap); }
.c-item > .c-chips { width: 100%; justify-content: flex-start; }
.c-item__t { font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-2); color: var(--color-text); }
.c-item__probe { width: 100%; font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: var(--ls-1); color: var(--color-text-faint); }
.c-item__p13 { width: 100%; font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: var(--ls-1); color: var(--color-text-muted); }
.c-item__p16 { flex: 1 0 0; min-width: 1px; font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-2); color: var(--color-text); }
.c-group { width: 100%; border-top: var(--bw-hair) solid var(--color-line); padding: var(--row-py) 0; display: flex; flex-direction: column; gap: var(--text-gap); overflow: clip; }
.c-checklist { width: 100%; display: flex; flex-direction: column; gap: var(--check-gap); }
.c-check { width: 100%; display: flex; gap: var(--row-gap); align-items: flex-start; }
.c-check--top { border-top: var(--bw-hair) solid var(--color-line); padding: var(--row-py) 0; }
.c-check svg { width: var(--icon-16); height: var(--icon-16); flex: 0 0 auto; }
.c-check--yes svg { color: var(--color-cognitive); } .c-check--no svg { color: var(--color-text); }
.c-check__txt { flex: 1 0 0; min-width: 1px; font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-2); color: var(--color-text-muted); }
.c-verdict-row { width: 100%; border-top: var(--bw-hair) solid var(--color-line); padding: var(--row-py) 0; }

/* ── c-fold: a hairline row that opens into more blocks ── */
details.fold > summary {
  display: flex; align-items: center; gap: var(--sp-10); cursor: pointer; list-style: none;
  font-size: var(--fs-sm); font-weight: var(--fw-m); letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--color-text-muted); transition: color var(--ease);
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { color: var(--color-text); }
details.fold > summary::before {
  content: ""; width: 9.5px; height: 5.5px; flex: 0 0 auto; margin-right: var(--sp-2); background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9.5 5.5'%3E%3Cpath d='M.75.75l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--ease);
}
details.fold[open] > summary::before { transform: rotate(180deg); }
details.fold[open] > summary { margin-bottom: var(--sp-20); }
.c-fold { width: 100%; border-top: var(--bw-hair) solid var(--color-line); }
.c-fold > summary { padding: var(--row-py) 0; margin: 0 !important; }
.c-fold > .c-stack > .c-text:first-child { border-top: 0; padding-top: 0; }
.c-fold .c-kv__k { text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-xs); }

/* ── c-actions: a row of buttons; --end is the quiet row under a page ── */
.c-actions { width: 100%; display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
.c-actions form { display: inline-flex; }
.c-actions--end { justify-content: center; margin-top: calc(var(--block-gap) - var(--frame-gap)); }
.mx .c-actions--end .button { color: var(--color-text-faint); border-color: transparent; }
.mx .c-actions--end .button:hover { color: var(--color-text); border-color: var(--color-line); background: none; }

/* ── spark-list: the four-point star as a list marker ── */
.spark-list { list-style: none; display: flex; flex-direction: column; gap: var(--sp-12); width: 100%; }
.spark-list li { display: flex; align-items: flex-start; gap: var(--sp-10); color: var(--color-text-secondary); font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-2); }
.spark-list li::before {
  content: ""; flex: 0 0 auto; width: 12px; height: 12px; margin-top: .3em; background-color: var(--color-text-faint);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5C12.7 7.5 16.5 11.3 22.5 12C16.5 12.7 12.7 16.5 12 22.5C11.3 16.5 7.5 12.7 1.5 12C7.5 11.3 11.3 7.5 12 1.5Z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── c-prow: a sortable row of candidates or roles ──
   Five rigid columns (a name, a verdict word, three numbers) do not fit an
   440px card without truncating a label or wrapping a name letter by
   letter - a grid table promises alignment a narrow card cannot keep. So
   this is a wrapping row instead: the name on its own line, then every
   chip in a flex-wrap group that drops to a second line rather than being
   forced into a column too narrow for it. Sorting is a row of tabs above
   the list (c-tabs--sort), not a click on a column head - there is no
   column to click. */
[data-view-panel], [data-sortable] { width: 100%; }   /* c-card__body doesn't stretch its children - without this the sort tabs' own content width caps every row under it */
.c-rows { width: 100%; display: flex; flex-direction: column; gap: var(--sp-5); }
.c-prow {
  width: 100%; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: var(--sp-6) var(--sp-20); border: var(--bw-hair) solid var(--color-line); border-radius: var(--r-item);
  padding: var(--sp-15); color: inherit; text-decoration: none; transition: border-color var(--ease);
}
a.c-prow:hover { border-color: var(--color-text-faint); }
/* one row is one line: nothing here wraps, the long text gives way instead */
.c-prow__main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--sp-10); flex-wrap: nowrap; }
.c-prow__main > * { flex: 0 0 auto; }
.c-prow__id { min-width: 0; flex: 1 1 auto; }
/* the company gives way eight times as fast as the name: with the name the
   only shrinkable child, a narrow column squeezed it to nothing and every
   row in the list read "Acme Cloud" */
.c-prow__co { flex: 0 8 auto; font-size: var(--fs-md); line-height: var(--lh-body); color: var(--color-text-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-avatar { width: 28px; height: 28px; flex: 0 0 auto; overflow: visible; }
.c-avatar--empty { display: inline-block; border-radius: 50%; border: var(--bw-hair) dashed var(--color-line); background: none; }
.c-prow__name {
  display: block; font-size: var(--fs-md); font-weight: var(--fw-r); line-height: var(--lh-body); letter-spacing: var(--ls-2);
  color: var(--color-text-secondary); transition: color var(--ease);
  /* hugs its text: as a flex child of the row's left group it used to expand
     and shove the company and the status chip against the right-hand edge.
     The group itself is what takes the free space; the name gives way only
     when there is not enough of it. */
  flex: 0 1 auto; min-width: 8ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
a.c-prow:hover .c-prow__name, .c-prow__name:hover { color: var(--color-text-muted); }
.c-prow__meta { display: block; margin-top: var(--sp-4); font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--color-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-prow__copy { padding: 0; border: 0; background: none; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.c-prow__copy:hover, .c-prow__copy.is-copied { color: var(--color-text); }
.c-prow__chips { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: var(--sp-4) var(--sp-12); align-items: center; justify-content: flex-end; }
/* a phone has no room for four columns: the company repeats on every row
   and is the page's own title, so it goes; the scores keep their place by
   taking a line of their own under the name - never a broken-up line */
@media (max-width: 559px) {
  /* only a row carrying scores breaks into two lines - every other row
     stays the single line it is on a wide screen */
  .c-prow:has(.c-chip--num) { flex-wrap: wrap; }
  .c-prow__co { display: none; }
  .c-prow__chips:has(.c-chip--num) { flex: 1 0 100%; justify-content: flex-start; }
}
.c-ratio { display: inline-flex; align-items: center; gap: var(--sp-7); font-size: var(--fs-sm); letter-spacing: var(--ls-2); color: var(--color-text-muted); white-space: nowrap; }
.c-ratio svg { width: var(--icon-16); height: var(--icon-16); flex: 0 0 auto; }
.c-ratio__n { font-variant-numeric: tabular-nums; }
.c-ratio__sep { color: var(--color-line); }

/* ── c-tabs: a card's view switch, or how a list sorts - pills, the active
   one with the line. A sort tab reserves its arrow's width at all times
   (opacity only) and turns one glyph rather than swapping it for another,
   so a label never shifts when the sort or its direction changes. ── */
.c-tabs { display: inline-flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.c-tab {
  height: var(--pill-h); padding: 0 var(--sp-10); border: var(--bw-hair) solid transparent; border-radius: var(--r-pill); background: none;
  font-size: var(--fs-xs); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--ls-1);
  color: var(--color-quiet); cursor: pointer; transition: color var(--ease), border-color var(--ease);
}
.c-tab:hover { color: var(--color-text); }
.c-tab.is-on { color: var(--color-text); border-color: var(--color-text-faint); }
.c-tab--icon { width: var(--pill-h); padding: 0; border-color: transparent; color: var(--color-quiet); display: inline-flex; align-items: center; justify-content: center; }
.c-tab--icon svg { width: var(--icon-16); height: var(--icon-16); }
.c-tab--icon.is-on { color: var(--color-cognitive); border-color: transparent; }
.c-tabs--sort { margin-bottom: var(--sp-10); }
/* wherever the block already carries a Sort menu in its header these pills
   would only repeat it, so they stay in the DOM - the menu still clicks
   them - but off the page */
.c-list-block:has(.c-sort-menu) .c-tabs--sort { display: none; }
/* a role card's own filter - plain text that changes colour when it's on,
   no pill, no border, matching the quiet OPEN ONLY / SORT labels in Figma */
.c-filter-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-5);
  padding: 0; border: 0; background: none; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide);
  color: var(--color-quiet); cursor: pointer; transition: color var(--ease);
}
.c-filter-toggle svg { width: var(--icon-16); height: var(--icon-16); flex: 0 0 auto; }
.c-filter-toggle:hover { color: var(--color-text); }
/* once a filter or a sort field is actually chosen, its control carries the
   accent - the quiet default means "nothing applied here" */
.c-filter-toggle.is-on { color: var(--color-cognitive); }
.c-list-head .c-filter-menu { margin-left: auto; }   /* the first control pushes the whole cluster to the edge, not each one on its own */
/* the sort control: a quiet button naming the active field, opening a
   short menu of the others - the same fields the sort tabs inside the
   rows view already sort by, picking one here just triggers that tab */
.c-sort-menu, .c-filter-menu { position: relative; }
.c-sort-menu__list {
  position: absolute; top: calc(100% + var(--sp-4)); right: 0; z-index: 20; min-width: 140px;
  display: flex; flex-direction: column; gap: var(--sp-2);
  background: var(--color-surface); border: var(--bw-hair) solid var(--color-line); border-radius: var(--r-item); padding: var(--sp-4);
}
.c-sort-menu__list button {
  text-align: left; padding: var(--sp-8) var(--sp-10); border: 0; border-radius: var(--r-item); background: none;
  font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--color-text-faint); cursor: pointer;
  transition: color var(--ease), background var(--ease);
}
.c-sort-menu__list button:hover, .c-sort-menu__list button.is-on { color: var(--color-text); background: var(--color-line); }
.c-tab[data-sort]::after {
  content: "↓"; display: inline-block; width: 8px; margin-left: var(--sp-2); opacity: 0;
  transition: opacity var(--ease), transform var(--ease);
}
.c-tab[data-sort].is-on::after { opacity: 1; }
.c-tab[data-sort].is-on.is-asc::after { transform: rotate(180deg); }

/* ── c-tiles: the same rows as a grid ── */
.c-tiles { width: 100%; display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 560px) { .c-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.c-tile {
  display: flex; flex-direction: column; gap: var(--sp-10); padding: var(--sp-15); border: var(--bw-hair) solid var(--color-line);
  border-radius: var(--r-item); background: none; min-width: 0; transition: border-color var(--ease);
}
.c-tile:hover { border-color: var(--color-text-faint); }
.c-tile__top, .c-tile__bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-20); }
/* when the role and the scores cannot share a line the scores take the next
   one, flush with the tile's own left edge - they are never squeezed away */
.c-tile__bottom { flex-wrap: wrap; gap: var(--sp-5) var(--sp-12); }
/* a chip or a ratio keeps its size; only the text beside it gives way */
.c-tile__top > *, .c-tile__bottom > * { flex: 0 0 auto; }
.c-tile__who { display: flex; align-items: center; gap: var(--sp-10); flex: 1 1 auto; min-width: 0; }
.c-tile__title {
  font-size: var(--fs-md); font-weight: var(--fw-r); line-height: var(--lh-body); letter-spacing: var(--ls-2); color: var(--color-text-secondary);
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.c-tile__stats { display: flex; flex-direction: column; gap: var(--sp-5); }
.c-tile__date {
  font-size: var(--fs-md); color: var(--color-text-faint);
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ── c-turn: one utterance of a synthetic dialogue, with its markup ── */
/* A transcript has to read as a conversation, not as a wall: the question is
   quiet and flush left, the answer is the substance and sits indented behind
   a rule. The two used to carry the same weight and the same hairline, and at
   a glance there was no telling who was speaking. */
/* one row: the side column is narrow by design, so the select is what gives
   way, never the button - a wrapped submit reads as a second control */
.c-promote { width: 100%; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sp-10); }
.c-promote .c-label { flex: 0 0 auto; }
/* sized to the role it names, not to the column: a select stretched across
   the row reads as a text field waiting to be filled in */
.c-promote .c-select { flex: 0 1 auto; width: auto; min-width: 0; max-width: 190px; padding: var(--sp-7) var(--sp-30) var(--sp-7) var(--sp-12); font-size: var(--fs-sm); text-overflow: ellipsis; }
.c-promote .button { flex: 0 0 auto; }

/* the host's markup on every utterance: on while a run is being checked, off
   otherwise. A class on the block, so the polled fragment cannot reset it. */
.c-marks { display: flex; align-items: center; gap: var(--sp-6); cursor: pointer; }
.c-marks__in { width: 13px; height: 13px; accent-color: var(--color-text); }
.c-marks__t { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-label); }
.c-list-block:has(.c-marks__in:not(:checked)) .c-turn__mark { display: none; }
.c-list-block:has(.c-marks__in:checked) .c-marks__t { color: var(--color-text); }

/* ── c-meta: small facts about a run, read at a glance ── */
.c-meta { width: 100%; display: flex; flex-wrap: wrap; gap: var(--sp-6); align-items: baseline; }
.c-meta__i { padding: var(--sp-2) var(--sp-6); border-radius: var(--r-bar); background: var(--color-surface); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-label); }
.c-meta__i--lead { color: var(--color-text); }
a.c-meta__i:hover { color: var(--color-text); }

/* what a persona says the run should produce - a working note, read against
   the numbers, never the size of a candidate's summary */
.c-expect { width: 100%; display: flex; flex-direction: column; gap: var(--sp-8); }
.c-expect__s { font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-label); cursor: pointer; list-style: none; }
.c-expect__s::-webkit-details-marker { display: none; }
.c-expect__s::after { content: ' +'; }
.c-expect[open] .c-expect__s::after { content: ' −'; }
.c-expect__p { font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: var(--ls-1); color: var(--color-text-muted); }

/* Air: a question and its answer belong together, one exchange stands apart
   from the next, and a transcript is read line by line rather than skimmed. */
.c-dialogue { width: 100%; display: flex; flex-direction: column; gap: var(--sp-30); }
.c-turn--candidate + .c-turn--bot { margin-top: var(--sp-30); }
.c-turn { width: 100%; display: flex; flex-direction: column; gap: var(--sp-12); }
.c-turn__txt { max-width: 68ch; font-size: var(--fs-md); line-height: 1.6; letter-spacing: var(--ls-2); }
/* the interviewer: a prompt, not a finding */
.c-turn--bot .c-turn__role { color: var(--color-cognitive); }
.c-turn--bot .c-turn__txt { color: var(--color-text); font-weight: var(--fw-m); }
/* the candidate: what actually gets scored */
.c-turn--candidate { padding-left: var(--sp-30); border-left: var(--bw-1) solid var(--color-line); }
.c-turn--candidate .c-turn__role { color: var(--color-ego); }
.c-turn--candidate .c-turn__txt { color: var(--color-text-secondary); }
.c-turn__who { display: flex; align-items: baseline; gap: var(--sp-8); flex-wrap: wrap; font-size: var(--fs-xs); line-height: var(--lh-tight); }
.c-turn__role { letter-spacing: var(--ls-wide); text-transform: uppercase; }
/* the markup was the colour of a hairline and could not be read at all */
/* no pill here: the card behind it is already the surface colour, so the
   background never showed and only the padding survived */
.c-turn__mark { font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-label); }
/* THREAT and DEFENCE hang on this one turn, so it is findable by eye */
.c-turn--pressure .c-turn__txt { border-left: var(--bw-1) solid var(--color-cognitive); padding-left: var(--sp-12); margin-left: calc(var(--sp-12) * -1 - var(--bw-1)); }
.c-turn__flag { padding: var(--sp-2) var(--sp-6); border-radius: var(--r-bar); background: var(--color-cognitive); font-size: var(--fs-2xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-bg); }
.c-turn__wait { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text-faint); }

/* ── c-flash: a notice between blocks ── */
.c-flash { width: 100%; padding: var(--sp-15) var(--sp-18); border: var(--bw-hair) solid var(--color-line); border-radius: var(--r-item); background: var(--color-surface); font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text); }
.c-flash.is-bad { border-color: var(--color-ego); }
.c-flash a { text-decoration: underline; text-underline-offset: 3px; }

/* ── c-form · c-field · c-input · c-textarea · c-tick ── */
.c-form { width: 100%; display: flex; flex-direction: column; gap: var(--cgap-lg); }
/* one line: the control and its button side by side, stacked on a narrow phone */
.c-form--row { flex-direction: row; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.c-form--row .c-input { flex: 1 1 200px; min-width: 0; height: var(--tap); padding-top: 0; padding-bottom: 0; }
.c-link { text-decoration: underline; text-underline-offset: 3px; color: var(--color-text-muted); transition: color var(--ease); }
.c-link:hover { color: var(--color-text); }
.c-field { width: 100%; display: flex; flex-direction: column; gap: var(--label-gap); }
/* the field's name on one end, who sees the answer on the other */
.c-field__head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); }
.c-field__head .c-label { min-width: 0; }
.c-field .c-label { white-space: normal; }
.c-input, .c-textarea, .c-select {
  /* background-color, not the shorthand: `background` here reset the select's
     chevron to none, which is why a select looked exactly like a text input */
  width: 100%; padding: var(--sp-12) var(--sp-16); background-color: var(--color-bg); border: var(--bw-hair) solid var(--color-line); border-radius: var(--r-item);
  font-size: var(--fs-md); line-height: var(--lh-body); letter-spacing: var(--ls-2); color: var(--color-text); transition: border-color var(--ease);
}
.c-input:focus, .c-textarea:focus { outline: none; border-color: var(--color-text-faint); }
.c-input::placeholder, .c-textarea::placeholder { color: var(--color-text-label); }
.c-input[readonly] { color: var(--color-text-muted); }
/* a select has to read as a select: appearance:none left it looking like a
   text input, and with no focus rule of its own it took the browser's ring */
.c-select {
  appearance: none; cursor: pointer; padding-right: var(--sp-30);
  background-repeat: no-repeat; background-position: right var(--sp-12) center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23808087' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.c-select:focus { outline: none; border-color: var(--color-text-faint); }
.c-textarea { min-height: 140px; resize: vertical; }
/* ── c-file: the CV. The browser's own control, given the shape of the
   fields around it - the button stays native so it keeps the file name it
   picked up and the keyboard behaviour that comes with it. ── */
.c-file {
  width: 100%; padding: var(--sp-10) var(--sp-12); background-color: var(--color-bg);
  border: var(--bw-hair) solid var(--color-line); border-radius: var(--r-item);
  font-family: var(--font); font-size: var(--fs-sm); letter-spacing: var(--ls-2); color: var(--color-text-muted);
  cursor: pointer; transition: border-color var(--ease);
}
.c-file:hover, .c-file:focus { outline: none; border-color: var(--color-text-faint); }
.c-file::file-selector-button {
  margin-right: var(--sp-12); height: 28px; padding: 0 var(--sp-12); border-radius: var(--r-pill);
  border: var(--bw-hair) solid var(--color-text-faint); background: none;
  font-family: var(--font); font-size: var(--fs-sm); color: var(--color-text); cursor: pointer;
}
.c-file::file-selector-button:hover { background: var(--color-line); }
.c-hint { font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: var(--ls-1); color: var(--color-text-faint); }
.c-tick { display: flex; align-items: flex-start; gap: var(--sp-12); cursor: pointer; font-size: var(--fs-sm); line-height: var(--lh-body); letter-spacing: var(--ls-1); color: var(--color-text-secondary); }
/* The native box is a white square the platform draws, and it is the one
   control on the page that ignores the theme entirely. This is the same
   square in the page's own colours: a hairline at rest, the accent and a
   tick once it is on. */
.c-tick input {
  appearance: none; flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; padding: 0;
  border: var(--bw-1) solid var(--color-line); border-radius: var(--r-bar);
  background: none; cursor: pointer; transition: border-color var(--ease), background var(--ease);
}
.c-tick:hover input { border-color: var(--color-text-faint); }
.c-tick input:checked {
  border-color: var(--color-cognitive); background-color: var(--color-cognitive);
  background-repeat: no-repeat; background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' fill='none'%3E%3Cpath d='M1 5l3.2 3.2L11 1.5' stroke='%230b0d14' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.c-tick input:focus-visible { outline: 2px solid var(--color-cognitive); outline-offset: 2px; }
.c-errors { list-style: none; display: flex; flex-direction: column; gap: var(--sp-4); font-size: var(--fs-sm); color: var(--color-danger); }
/* A field that is wrong says so itself. The browser's own bubble says it in
   the browser's words, in the browser's box, over the field underneath -
   the form turns that off and marks the control instead. */
.c-input.is-bad, .c-textarea.is-bad, .c-select.is-bad, .c-file.is-bad { border-color: var(--color-danger); }
.c-tick.is-bad { color: var(--color-danger); }
.c-hint.is-bad { color: var(--color-danger); }
.c-tick.is-bad input { border-color: var(--color-danger); }
.c-or { width: 100%; display: flex; align-items: center; gap: var(--sp-12); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-faint); }
.c-or::before, .c-or::after { content: ""; flex: 1; height: var(--bw-hair); background: var(--color-line); }
.c-google { width: 100%; }
.c-google svg { width: 16px; height: 16px; }
.c-note { width: 100%; font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--color-text-muted); white-space: pre-wrap; text-box: normal; }
.c-note:empty { display: none; }
.c-note.is-bad { color: var(--color-ego); }
.c-note a { text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
#auth.is-sent .auth-form { display: none; }

/* ── c-copy: a link with a button that copies it ── */
.c-copy { width: 100%; display: flex; align-items: center; }
.c-copy__field { flex: 1; min-width: 0; height: var(--tap); padding: 0 var(--sp-18); border-radius: var(--r-pill); background: var(--color-bg); border: var(--bw-hair) solid var(--color-line); display: flex; align-items: center; gap: var(--sp-12); }
.c-copy__field input { flex: 1; min-width: 0; border: 0; background: none; outline: none; font-size: var(--fs-sm); letter-spacing: var(--ls-2); color: var(--color-text-muted); text-overflow: ellipsis; }
/* inside the field there is already an outline round the whole control, so
   the button is the glyph and nothing else - no box, no outline, no fill.
   The pointer changes and the icon swaps to a tick once the link is
   copied; that is the whole of its feedback. */
.c-copy__field .button--icon,
.c-copy__field .button--icon:hover {
  flex: 0 0 auto; width: auto; height: auto; padding: 0;
  border: 0; border-radius: 0; background: none; color: var(--color-text-faint);
}
.c-copy__field .button--icon:hover { color: var(--color-text); }
/* standing on the page beside the icon actions rather than filling a
   dialog: cut down to the row under it, and only as wide as the link */
.c-copy--sm { width: auto; max-width: 100%; }
.c-copy--sm .c-copy__field { flex: 0 1 auto; height: 32px; padding: 0 var(--sp-12); gap: var(--sp-10); }
.c-copy--sm .c-copy__field input { flex: 0 1 auto; width: auto; font-size: var(--fs-xs); }
.c-copy--sm .button--icon svg { width: var(--icon-16); height: var(--icon-16); }
@media (max-width: 400px) { .c-copy { flex-wrap: wrap; } }

/* ── c-meter · c-big · c-state ── */
.c-meter { width: 100%; height: var(--bar-h); border-radius: var(--r-bar); background: var(--color-line); overflow: hidden; }
.c-meter span { display: block; height: 100%; background: var(--color-cognitive); }
.c-big { width: 100%; font-size: var(--fs-lg); font-weight: var(--fw-m); line-height: var(--lh-tight); letter-spacing: var(--ls-2); color: var(--color-text); }
.c-state { width: 100%; border-top: var(--bw-hair) solid var(--color-line); padding: var(--row-py) 0 0; display: flex; flex-direction: column; gap: var(--sp-15); }
.c-state__note { font-size: var(--fs-xs); color: var(--color-text-faint); overflow-wrap: anywhere; }
.c-state__note:empty { display: none; }
.c-label__icon { width: 12px; height: 12px; display: inline; vertical-align: -1px; margin-right: var(--sp-4); }

/* ── c-row as a link, and a chip as a button ── */
.c-row--link:hover .c-row__txt, .c-row__link:hover { color: var(--color-text); }
.c-row__link { transition: color var(--ease); }
button.c-chip { background: none; cursor: pointer; transition: border-color var(--ease); }
button.c-chip:hover, button.c-chip.is-copied { --chip-color: var(--color-text); }
button.c-chip.is-copied .c-chip__code { color: var(--color-text); }