/* ==========================================================================
   Consoles (design v4: Web Admin v4.dc.html, Talent Directory - Web.dc.html)

   The admin console, the employer console, the staff sign-in, the talent
   directory, and the employers site's pages (Employers - Web.dc.html; the
   staff invite first). Every value here is transcribed from the artboard's inline styles
   onto the tokens in style.css (README §4); the four console-only surfaces are
   --bg-elevated, --bg-field, --border-mid and --scrim (style.css :root).

   Loaded after style.css by the console pages only.
   ========================================================================== */

body.c-shell {
    line-height: 1.5;
    font-size: 14px;
    background: var(--bg-base);
    color: var(--text-main);
}
.c-shell a { color: var(--accent-text); text-decoration: none; }
.c-shell a:hover { color: var(--accent-hover); text-decoration: underline; }
/* Links that are buttons or places keep their own ink (the rule above is for prose links). */
.c-shell a.c-btn, .c-shell a.c-btn:hover { color: var(--text-main); text-decoration: none; }
.c-shell a.c-btn--primary, .c-shell a.c-btn--primary:hover { color: var(--on-accent); }
.c-shell a.c-rail-item { color: var(--text-secondary); text-decoration: none; }
.c-shell a.c-rail-item:hover { color: var(--text-main); text-decoration: none; }
.c-shell a.c-rail-item[aria-current="page"] { color: var(--text-main); }
.c-shell input::placeholder, .c-shell textarea::placeholder { color: var(--text-muted); }
.c-shell :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.c-shell button { font-family: var(--font-sans); line-height: inherit; }
/* Where the artboard sets the `font` shorthand on a button (switch rows, the
   viewer's document list), the shorthand resets line-height to normal. */
.c-shell .c-switch-row, .c-shell .c-viewer-thumbs button { line-height: normal; }
/* Artboard headings inherit the 1.5 line height; style.css tightens h1–h6. */
.c-shell h1, .c-shell h2, .c-shell h3 { line-height: inherit; }
.mono { font-family: var(--font-mono); }

@keyframes jsbLoad { 0% { width: 0; opacity: 1 } 70% { width: 80%; opacity: 1 } 100% { width: 100%; opacity: 0 } }

.c-app { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-base); color: var(--text-main); }
.c-loadbar { position: fixed; top: 0; left: 0; height: 2px; background: var(--text-main); z-index: 90; animation: jsbLoad .38s ease-out forwards; }
.c-skip { position: absolute; left: -9999px; top: 8px; z-index: 95; padding: 10px 14px; border-radius: 12px; background: var(--bg-surface); color: var(--text-main); }
.c-skip:focus { left: 8px; }

/* ---- Header ------------------------------------------------------------- */
.c-header { position: sticky; top: 0; z-index: 30; height: 64px; display: flex; align-items: center; gap: 14px; padding: 0 20px; background: var(--bg-surface); border-bottom: 1px solid var(--border); }
.c-header--plain { position: static; display: block; height: auto; padding: 0; background: transparent; }
.c-header-inner { max-width: 1280px; margin: 0 auto; width: 100%; height: 64px; padding: 0 24px; display: flex; align-items: center; gap: 12px; }
.c-brand { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; white-space: nowrap; color: var(--text-main); }
.c-brand span { color: var(--accent); }
a.c-brand, a.c-brand:hover { color: var(--text-main); text-decoration: none; }
.c-tag { font: 500 12px var(--font-mono); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border-mid); color: var(--text-secondary); white-space: nowrap; }
.c-spacer { flex: 1; }
.c-iconbtn { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text-main); cursor: pointer; padding: 0; flex: none; }
.c-iconbtn:hover { background: var(--hover); }
.c-iconbtn[disabled] { cursor: default; }
.c-acct-wrap { position: relative; flex: none; }
.c-acct { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text-main); cursor: pointer; }
.c-acct:hover { background: var(--hover); }
.c-avatar { width: 30px; height: 30px; border-radius: 12px; background: var(--bg-raised); color: var(--text-main); display: grid; place-items: center; font: 600 12px var(--font-sans); }
.c-menu { position: absolute; right: 0; top: 52px; width: 240px; background: var(--bg-elevated); border: 1px solid var(--border-mid); border-radius: 16px; box-shadow: var(--shadow-panel); padding: 6px; z-index: 50; }
.c-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.c-menu-head strong { display: block; font-weight: 600; }
.c-menu-head span { color: var(--text-muted); font-size: 13px; }
.c-menu-item { display: block; width: 100%; text-align: left; padding: 9px 12px; border-radius: 12px; cursor: pointer; color: var(--text-main); border: none; background: transparent; font: 400 14px var(--font-sans); }
.c-menu-item:hover { background: var(--hover); }

/* ---- Rail and main ------------------------------------------------------ */
.c-body { flex: 1; display: flex; min-height: 0; }
.c-rail { width: 224px; flex: none; border-right: 1px solid var(--border); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; background: var(--bg-base); position: sticky; top: 64px; height: calc(100vh - 64px); overflow-y: auto; }
/* A group title is a heading of its own, not a muted label (owner's note 2026-10-21: "Talent", "Queues"… blended
   in): capitals, bold, the main ink, spaced, with a rule above that closes the links before it. Departs from the
   artboard (Web Admin v4 :97, 12px/500/ink3) on purpose. nav-links.spec.ts "Rail section titles". */
.c-rail-group { margin-top: 10px; padding: 16px 12px 6px; border-top: 1px solid var(--border); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.4; color: var(--text-main); }
.c-rail > .c-rail-group:first-child { margin-top: 0; padding-top: 4px; border-top: none; }
.c-rail-item { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 12px; cursor: pointer; color: var(--text-secondary); font-weight: 400; text-decoration: none; border: none; background: transparent; width: 100%; font-size: 14px; text-align: left; }
.c-shell .c-rail-item:hover { background: var(--hover); color: var(--text-main); text-decoration: none; }
.c-rail-item[aria-current="page"] { background: var(--bg-raised); color: var(--text-main); font-weight: 600; }
.c-rail-item .c-rail-label { flex: 1; white-space: nowrap; }
.c-badge { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 12px; background: var(--bg-raised); color: var(--text-secondary); font: 500 12px var(--font-mono); display: grid; place-items: center; }
.c-badge--late { background: var(--danger-wash); color: var(--danger-text); }
.c-main { flex: 1; min-width: 0; padding: 28px 32px 64px 32px; transition: opacity .15s; }
.c-main[aria-busy="true"] { opacity: .55; }
.c-main.is-docked { padding-right: 472px; }

/* ---- Page structure ----------------------------------------------------- */
.c-page { display: flex; flex-direction: column; gap: 20px; }
.c-page--g24 { gap: 24px; }
.c-page--g18 { gap: 18px; }
.c-head { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; justify-content: space-between; }
.c-head-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c-head h1 { margin: 0; font-size: 20px; font-weight: 600; }
.c-head p { margin: 0; color: var(--text-secondary); max-width: 72ch; text-wrap: pretty; }
.c-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.c-section-title { font-weight: 600; }
.c-stack { display: flex; flex-direction: column; }
.c-gap6 { gap: 6px; } .c-gap8 { gap: 8px; } .c-gap10 { gap: 10px; } .c-gap12 { gap: 12px; } .c-gap14 { gap: 14px; } .c-gap16 { gap: 16px; } .c-gap20 { gap: 20px; } .c-gap22 { gap: 22px; }
.c-row-wrap { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.c-note { font-size: 12px; color: var(--text-muted); text-wrap: pretty; }
.c-note13 { font-size: 13px; color: var(--text-muted); }
.c-sub { font-size: 13px; color: var(--text-secondary); text-wrap: pretty; }
.c-muted { color: var(--text-muted); }
.c-ink2 { color: var(--text-secondary); }
.c-danger { color: var(--danger-text); }
.c-link { color: var(--accent-text); font-weight: 500; cursor: pointer; background: none; border: none; padding: 0; font-size: inherit; font-family: inherit; }
.c-link:hover { color: var(--accent-hover); }
.c-link--pad { padding: 10px 0; }
/* .c-link, .c-btn--sm, .c-seg button, .c-fp-headline, .td-headline, .td-quick, .c-saved-apply,
   .c-token-x, .c-active-chip and .c-active-clear are drawn under 44px; their 44px targets are style.css's
   "Tap targets" ::after (README §4). */
.c-empty { padding: 32px 18px; text-align: center; color: var(--text-secondary); }
.c-grid-auto { display: grid; gap: 16px; }

/* ---- Cards -------------------------------------------------------------- */
.c-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; }
.c-card--clip { overflow: hidden; }
.c-card--pad { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.c-card--pad20 { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.c-card-title { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.c-card-fig { display: flex; align-items: baseline; gap: 8px; }
.c-fig20 { font: 500 20px var(--font-mono); }
.c-fig28 { font: 500 28px var(--font-mono); }
.c-box { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 12px; border: 1px solid var(--border-mid); }
.c-box--quiet { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border); font-size: 13px; color: var(--text-secondary); line-height: 1.55; text-wrap: pretty; }
.c-box--sel { padding: 12px; border-radius: 12px; background: var(--bg-raised); border: none; }

/* ---- Buttons (README 6.7) ----------------------------------------------- */
.c-btn { height: 44px; padding: 0 16px; border-radius: 12px; font: 500 14px var(--font-sans); cursor: pointer; white-space: nowrap; flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--border-mid); background: transparent; color: var(--text-main); text-decoration: none; }
.c-btn:hover { background: var(--hover); }
.c-shell a.c-btn:hover { text-decoration: none; color: var(--text-main); }
.c-btn--primary { border: none; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.c-btn--primary:hover, .c-shell a.c-btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.c-btn--danger { border: 1px solid var(--danger-border); color: var(--danger-text); }
.c-btn--danger:hover { background: var(--danger-wash); }
.c-btn--solid { background: var(--bg-surface); }
.c-btn--sm { height: 36px; padding: 0 12px; font-size: 13px; }
.c-btn--13 { padding: 0 14px; font-size: 13px; }
.c-btn--block { width: 100%; }
.c-btn--grow { flex: 1 1 160px; }
.c-btn[disabled], .c-btn[aria-disabled="true"] { opacity: .45; cursor: default; }
.c-btn--start { align-self: flex-start; }
.c-quick { height: 32px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--border-mid); background: transparent; color: var(--text-main); font: 500 13px var(--font-sans); cursor: pointer; white-space: nowrap; }
.c-quick[aria-pressed="true"] { background: var(--bg-raised); border-color: var(--text-secondary); }

/* ---- Segmented control --------------------------------------------------- */
/* The track's line is an inset shadow, not a border, so the 44px track is its whole box and each 36px button's 44px target fits inside it.
   A strip wraps rather than scrolls: the artboard's scroll had no scrollbar, so at 375px "Find an application" and "Ended"
   were cut off with nothing to say more was there. Rows are 8px apart: each 36px button's 44px target meets the next row's.
   A button is 44px wide at least: Positions' "All" (no count after it) drew 43, and its neighbour's target took the last pixel. */
.c-seg { display: flex; flex-wrap: wrap; padding: 4px; gap: 8px 2px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--border); background: var(--bg-field); align-self: flex-start; max-width: 100%; }
.c-seg button { height: 36px; min-width: 44px; padding: 0 12px; border-radius: 6px; border: none; cursor: pointer; font: 500 13px var(--font-sans); white-space: nowrap; background: transparent; color: var(--text-secondary); }
.c-seg button[aria-pressed="true"] { background: var(--bg-raised); color: var(--text-main); }
.c-seg-n { margin-left: 6px; font: 500 12px var(--font-mono); color: var(--text-muted); }

/* ---- Active filters (console-core.js C.activeFilters) ----------------------
   "Filtered by", a 32px chip per filter that is on (its label, then an ×), and Clear all filters as a bordered
   button, not a link. Lines 12px apart: each 32px chip's 44px target (style.css "Tap targets") meets the next line's.
   A long search word is cut with an ellipsis inside its chip; the button's name still holds it whole. */
.c-active { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 8px; min-width: 0; }
.c-active-label { font-size: 13px; color: var(--text-secondary); margin-right: 2px; }
.c-active-chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; max-width: 100%; padding: 0 8px 0 12px; border-radius: 12px; border: 1px solid var(--border-mid); background: var(--bg-raised); color: var(--text-main); font: 500 13px var(--font-sans); cursor: pointer; white-space: nowrap; }
.c-active-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c-active-chip svg { flex: none; color: var(--text-secondary); }
.c-active-chip:hover { background: var(--hover); border-color: var(--text-secondary); }
.c-active-clear { height: 32px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border-mid); background: transparent; color: var(--accent-text); font: 600 13px var(--font-sans); cursor: pointer; white-space: nowrap; }
.c-active-clear:hover { color: var(--accent-hover); background: var(--hover); }

/* ---- Tabs ---------------------------------------------------------------- */
.c-tabs { display: flex; flex-wrap: wrap; gap: 0 2px; border-bottom: 1px solid var(--border); }
.c-tab { flex: none; height: 44px; padding: 0 10px; border: none; background: transparent; cursor: pointer; display: flex; align-items: center; gap: 8px; white-space: nowrap; font: 500 14px var(--font-sans); color: var(--text-secondary); }
.c-tab[aria-selected="true"] { font-weight: 600; color: var(--text-main); box-shadow: inset 0 -2px 0 var(--text-main); }
.c-tab-n { font: 500 12px var(--font-mono); color: var(--text-muted); }

/* ---- Fields -------------------------------------------------------------- */
.c-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.c-field > span:first-child { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.c-field--12 > span:first-child { font-size: 12px; font-weight: 400; color: var(--text-muted); }
.c-input { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg-field); color: var(--text-main); font: 400 16px var(--font-sans); width: 100%; min-width: 0; }
.c-input--14 { font-size: 14px; }
.c-input--mono { font-family: var(--font-mono); }
.c-input--date { max-width: 240px; font-family: var(--font-mono); }
.c-input[disabled] { color: var(--text-muted); border-color: var(--border-mid); }
select.c-input { padding: 0 12px; }
select.c-input--sort { padding: 0 10px; width: auto; }
textarea.c-input { height: auto; padding: 10px 12px; resize: vertical; }
.c-search { flex: 1 1 260px; width: auto; }

/* ---- Checkbox and switch -------------------------------------------------- */
/* A 44px target round an 18px box, its margins borrowing a row's 12px padding. Positioned, so it
   stays on top where a phone's wrapped row puts the next line within its reach; in the header
   row (10px padding, the card clips above it) it takes 4px more line instead. */
.c-cb { position: relative; width: 44px; height: 44px; margin: -12px -6px -12px -14px; flex: none; display: grid; place-items: center; border: none; background: transparent; cursor: pointer; padding: 0; }
.c-thead .c-cb { margin-block: -10px; }
.c-cb-box { width: 18px; height: 18px; border-radius: 6px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--border-strong); background: transparent; }
[aria-checked="true"] > .c-cb-box, .c-cb-box[aria-checked="true"] { border-color: var(--text-main); background: var(--text-main); }
.c-cb-box svg { stroke: var(--bg-base); display: none; }
[aria-checked="true"] > .c-cb-box svg, .c-cb-box[aria-checked="true"] svg { display: block; }
.c-switch-row { display: flex; align-items: center; gap: 12px; min-height: 44px; width: 100%; padding: 0; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text-main); font: 400 14px var(--font-sans); cursor: pointer; text-align: left; }
.c-switch-row--top { align-items: flex-start; gap: 16px; border-bottom: none; }
.c-switch-text { flex: 1; display: flex; flex-direction: column; }
.c-switch { flex: none; width: 40px; height: 24px; border-radius: 12px; padding: 2px; display: flex; justify-content: flex-start; background: transparent; border: 1px solid var(--border-strong); }
.c-switch::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); }
[aria-checked="true"] > .c-switch { justify-content: flex-end; background: var(--accent); border-color: var(--accent); }
[aria-checked="true"] > .c-switch::after { background: var(--on-accent); }

/* ---- Tables (register rows) ----------------------------------------------- */
.c-thead { display: grid; gap: 16px; padding: 10px 18px; border-bottom: 1px solid var(--border); color: var(--text-muted); font-size: 12px; font-weight: 500; align-items: center; }
.c-row { display: grid; gap: 8px 16px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--border); cursor: pointer; }
.c-row:hover { background: var(--hover); }
.c-row[aria-selected="true"], .c-row.is-selected { background: var(--bg-raised); }
.c-row--14 { padding: 14px 18px; gap: 10px 16px; }
.c-row--flex { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.c-row--static { cursor: default; }
.c-row--static:hover { background: transparent; }
.c-cell { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-cell-inline { display: flex; align-items: center; gap: 8px; min-width: 0; }
.c-strong { font-weight: 600; }
.c-ellip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-num { font: 400 14px var(--font-mono); }
.c-num500 { font: 500 14px var(--font-mono); }
.c-right { text-align: right; }
.c-date { font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.c-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.c-status { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.c-chev { flex: none; }
.c-pill { font-size: 12px; padding: 1px 7px; border-radius: 6px; border: 1px solid var(--border-mid); color: var(--text-secondary); flex: none; }
.c-kind { font: 500 12px var(--font-sans); padding: 2px 8px; border-radius: 6px; background: var(--bg-raised); color: var(--text-secondary); }
.c-kind--danger { background: var(--danger-wash); color: var(--danger-text); }
.c-chip { height: 28px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--border); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--text-secondary); }
.c-chip--hit { border-color: var(--border-mid); background: var(--bg-raised); color: var(--text-main); font-weight: 500; }
.c-chips { display: flex; flex-wrap: wrap; gap: 6px; }

/* Company mark (README 6.1) — solid ring in the employer pigment in consoles. */
.c-mark { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.c-mark > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface); font: 600 12px var(--font-sans); color: var(--text-main); }
.c-initials { width: 36px; height: 36px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--bg-raised); font: 600 12px var(--font-sans); }
.c-initials--round { border-radius: 50%; width: 40px; height: 40px; }
.c-initials--44 { border-radius: 50%; width: 44px; height: 44px; font-size: 13px; }

/* ---- Overdue card (README 6.6) -------------------------------------------- */
.c-overdue { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--danger-border); background: var(--danger-wash); font-size: 13px; cursor: pointer; color: var(--text-main); width: 100%; text-align: left; font-family: var(--font-sans); }
.c-overdue > span { flex: 1; }
.c-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; padding: 12px 12px 12px 16px; border-radius: 12px; border: 1px solid var(--border-mid); background: var(--bg-surface); }

/* ---- Figures strip ---------------------------------------------------------- */
.c-figs { display: grid; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.c-fig { box-shadow: 1px 1px 0 var(--border); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-fig--btn { flex-direction: row; gap: 12px; align-items: center; cursor: pointer; border: none; background: transparent; text-align: left; color: var(--text-main); font-family: var(--font-sans); font-size: 14px; }
.c-fig--btn:hover { background: var(--hover); }
.c-fig-label { font-size: 13px; color: var(--text-secondary); }
.c-fig-note { font-size: 12px; color: var(--text-muted); }

/* ---- Bars, meters and charts ------------------------------------------------ */
.c-meter { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; background: var(--border); }
.c-meter--sel { background: var(--bg-raised); }
.c-meter > span { height: 100%; }
.c-track { height: 4px; border-radius: 2px; background: var(--border); overflow: hidden; display: block; }
.c-track > span { display: block; height: 100%; }
.c-chart { position: relative; height: 140px; }
.c-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.c-chart-max { position: absolute; top: 4px; left: 0; font: 400 12px var(--font-mono); color: var(--text-muted); background: var(--bg-surface); padding-right: 6px; }
.c-chart-target { position: absolute; right: 0; font: 400 12px var(--font-mono); color: var(--danger-text); background: var(--bg-surface); padding-left: 6px; }
.c-chart-axis { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); gap: 8px; }
.c-mix-row { display: flex; align-items: center; gap: 10px; min-height: 36px; border-top: 1px solid var(--border); font-size: 13px; }
.c-mix-row .c-mix-k { flex: 1; color: var(--text-secondary); }
.c-mix-row .c-mix-pct { width: 40px; text-align: right; font: 400 12px var(--font-mono); color: var(--text-muted); }
.c-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-secondary); font-size: 12px; }
.c-legend > span { display: flex; align-items: center; gap: 6px; }
.c-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ---- Bulk bar and confirm ----------------------------------------------------- */
.c-bulk { position: sticky; top: 76px; z-index: 5; display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--bg-elevated); border: 1px solid var(--border-mid); box-shadow: var(--shadow-panel); }
.c-bulk-top { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; }
.c-confirm { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; border: 1px solid var(--danger-border); background: var(--danger-wash); }
.c-confirm--12 { gap: 12px; }
.c-confirm > span { font-size: 13px; text-wrap: pretty; }

/* ---- Drawer (inspector) ------------------------------------------------------- */
.c-scrim { position: fixed; inset: 64px 0 0 0; background: var(--scrim); z-index: 39; }
.c-drawer { position: fixed; top: 64px; right: 0; bottom: 0; width: 440px; background: var(--bg-elevated); border-left: 1px solid var(--border-mid); z-index: 40; display: flex; flex-direction: column; }
.c-drawer.is-overlay { box-shadow: var(--shadow-panel); }
.c-drawer-head { padding: 18px 20px; border-bottom: 1px solid var(--border); display: flex; gap: 12px; align-items: flex-start; }
.c-drawer-title { flex: 1; min-width: 0; }
.c-drawer-title > div:first-child { font-size: 20px; font-weight: 600; text-wrap: pretty; }
.c-drawer-title > div + div { color: var(--text-secondary); font-size: 13px; }
.c-drawer-body { flex: 1; overflow: auto; padding: 18px 20px; display: flex; flex-direction: column; gap: 20px; }
.c-drawer-body--22 { gap: 22px; }
.c-drawer-body--18 { gap: 18px; }
.c-drawer-foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; flex-wrap: wrap; }
.c-facts { display: grid; grid-template-columns: 120px 1fr; gap: 8px 12px; font-size: 13px; }
.c-facts > span:nth-child(odd) { color: var(--text-muted); }
.c-facts > span:nth-child(even) { min-width: 0; word-break: break-word; }
.c-hist { display: flex; gap: 12px; font-size: 13px; }
.c-hist > span:first-child { width: 64px; flex: none; color: var(--text-muted); font-family: var(--font-mono); }
.c-hist > span + span { color: var(--text-secondary); text-wrap: pretty; }
.c-hist--grid { display: grid; grid-template-columns: 72px 1fr; }
.c-hist--grid > span:first-child { width: auto; }
.c-check-line { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; }
.c-check-line .c-dot { margin-top: 6px; }
.c-check-line > span + span { color: var(--text-secondary); text-wrap: pretty; }
.c-doc-row { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--border); }
.c-doc-row > span:first-child { flex: 1; }

/* ---- Toast ---------------------------------------------------------------------- */
.c-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 70; background: var(--text-main); color: var(--bg-base); padding: 10px 16px; border-radius: 12px; font-weight: 500; box-shadow: var(--shadow-panel); max-width: calc(100% - 32px); display: flex; align-items: center; gap: 16px; }
.c-toast button { flex: none; height: 32px; padding: 0 10px; margin: -6px -8px -6px 0; border-radius: 8px; border: none; background: transparent; color: var(--bg-base); font: 600 14px var(--font-sans); text-decoration: underline; cursor: pointer; }

/* ---- Document viewer ------------------------------------------------------------- */
.c-viewer { position: fixed; inset: 0; z-index: 80; background: var(--bg-base); display: flex; flex-direction: column; }
.c-viewer-head { height: 64px; flex: none; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; padding: 0 12px 0 20px; }
.c-viewer-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-viewer-title > span:first-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-viewer-title > span + span { font: 400 12px var(--font-mono); color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-viewer-group { display: flex; align-items: center; gap: 4px; flex: none; }
.c-viewer-group--tools { padding-left: 8px; border-left: 1px solid var(--border); }
.c-viewer-pos { font: 500 13px var(--font-mono); color: var(--text-secondary); min-width: 52px; text-align: center; }
.c-viewer-zoom { height: 44px; min-width: 60px; padding: 0 8px; border-radius: 12px; border: none; background: transparent; color: var(--text-main); font: 500 13px var(--font-mono); cursor: pointer; }
.c-viewer-main { flex: 1; min-height: 0; display: flex; }
.c-viewer-thumbs { width: 220px; flex: none; border-right: 1px solid var(--border); padding: 12px; display: flex; flex-direction: column; gap: 4px; overflow: auto; }
.c-viewer-thumbs button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 52px; padding: 8px 12px; border-radius: 12px; border: none; background: transparent; color: var(--text-main); font: 400 14px var(--font-sans); cursor: pointer; text-align: left; }
.c-viewer-thumbs button[aria-current="true"] { background: var(--bg-raised); font-weight: 600; }
.c-viewer-thumbs button span { font: 400 12px var(--font-mono); color: var(--text-muted); }
.c-viewer-stage { flex: 1; min-width: 0; overflow: auto; background: var(--bg-sunken); display: flex; flex-direction: column; align-items: safe center; gap: 20px; padding: 32px 20px 48px; }
.c-viewer-page { flex: none; max-width: none; transition: transform .2s; background: #FFFFFF; box-shadow: 0 18px 38px rgba(0, 0, 0, 0.28); border-radius: 4px; overflow: hidden; }
.c-viewer-page iframe { display: block; width: 100%; height: 100%; border: 0; background: #FFFFFF; }
.c-viewer-page img { display: block; width: 100%; height: auto; }
.c-viewer-fallback { max-width: 420px; margin-top: 40px; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 16px; border: 1px solid var(--border-mid); background: var(--bg-surface); }
.c-viewer-side { width: 360px; flex: none; border-left: 1px solid var(--border); background: var(--bg-elevated); display: flex; flex-direction: column; min-height: 0; }
.c-viewer-foot { flex: none; border-top: 1px solid var(--border); padding: 12px 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; background: var(--bg-elevated); }
.c-check { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--border); cursor: pointer; font-size: 13px; width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; color: var(--text-main); text-align: left; font-family: var(--font-sans); padding: 0; }
@media (prefers-reduced-motion: reduce) {
    .c-viewer-page, .c-main { transition: none; }
    .c-loadbar { animation: none; width: 100%; opacity: 0; }
}

/* ---- Employer console (Web Admin v4 "Employer console") ---------------------------- */
/* Menu links match the menu's buttons: the `font` shorthand above resets line-height. */
.c-shell a.c-menu-item, .c-shell a.c-menu-item:hover { color: var(--text-main); text-decoration: none; line-height: inherit; }
.c-acct-name { font-weight: 500; white-space: nowrap; }
.c-btn--pad14 { padding: 0 14px; }
.c-btn--reject { flex: 0 1 auto; color: var(--danger-text); }
.c-btn--reject:hover { background: var(--danger-wash); }
/* The rail's identity: the company mark in its pigment, the name, verification and plan. */
.c-ident { display: flex; gap: 10px; align-items: center; padding: 4px 12px 16px; }
.c-ident-ring { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.c-ident-ring > span { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-base); font: 600 12px var(--font-sans); color: var(--text-main); }
.c-ident-text { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.c-ident-text > span:first-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-ident-sub { font-size: 12px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-shell a.c-ident-sub { color: var(--text-muted); text-decoration: underline; }
/* Dashboard: the pipeline as shares of the step before, apply rate, fits, approaches. */
.c-funnel { display: grid; grid-template-columns: 96px minmax(0, 1fr) 64px 44px; gap: 12px; align-items: center; font-size: 13px; }
.c-funnel > span:first-child { color: var(--text-secondary); }
.c-funnel-track { height: 12px; border-radius: 3px; background: var(--border); }
.c-funnel-track > span { display: block; height: 100%; border-radius: 3px; }
.c-funnel-n { text-align: right; font-family: var(--font-mono); }
.c-funnel-pct { text-align: right; font: 400 12px var(--font-mono); color: var(--text-muted); }
.c-rate { display: flex; align-items: center; gap: 8px; }
.c-rate-track { flex: 1; max-width: 120px; height: 6px; border-radius: 3px; background: var(--border); }
.c-rate-track > span { display: block; height: 100%; border-radius: 3px; background: var(--text-secondary); }
.c-rate > span + span { font: 400 12px var(--font-mono); color: var(--text-secondary); }
.c-link-row { display: flex; align-items: center; gap: 12px; min-height: 44px; border-top: 1px solid var(--border); font-size: 13px; }
.c-shell a.c-link-row, .c-shell a.c-link-row:hover { color: var(--text-main); text-decoration: none; }
.c-link-row > span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.c-appr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.c-appr > div { display: flex; flex-direction: column; gap: 2px; }
.c-appr-k { display: flex; align-items: center; gap: 8px; white-space: nowrap; font-size: 12px; color: var(--text-muted); }
/* Listings: the pipeline bar (README 6.5) and its legend. */
.c-meter--176 { width: 176px; max-width: 100%; }
.c-legend-chip { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); }
.c-legend-chip .mono { color: var(--text-main); }
/* Applicants: a column per stage, a card per person, Rejected folded below. */
.c-kanban { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; align-items: start; }
.c-col { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; display: flex; flex-direction: column; min-width: 0; }
.c-col-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.c-col-head > strong { font-weight: 600; }
.c-col-n { font: 500 12px var(--font-mono); color: var(--text-muted); }
.c-col-body { padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.c-col-empty { padding: 14px 8px; color: var(--text-muted); font-size: 13px; text-align: center; }
.c-appcard { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-elevated); cursor: pointer; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-appcard:hover { border-color: var(--border-mid); }
.c-appcard-top { display: flex; justify-content: space-between; gap: 8px; }
.c-appcard-top > span:first-child { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-appcard-ago { flex: none; font: 400 12px var(--font-mono); color: var(--text-muted); }
.c-appcard-ago--late { color: var(--danger-text); }
.c-appcard-sub { color: var(--text-muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-rejtoggle { display: flex; align-items: center; gap: 10px; color: var(--text-secondary); font-size: 13px; }
.c-rejtoggle button { min-height: 44px; padding: 0; border: none; background: none; cursor: pointer; color: var(--accent-text); font: 400 13px var(--font-sans); }
.c-rejtoggle button:hover { color: var(--accent-hover); }
.c-rejrow { display: flex; gap: 16px; padding: 10px 16px; border-bottom: 1px solid var(--border); cursor: pointer; flex-wrap: wrap; }
.c-rejrow:hover { background: var(--hover); }
.c-rejrow > span:first-child { flex: 1 1 200px; font-weight: 500; }
.c-rejrow > span + span { color: var(--text-muted); }
.c-cover { white-space: pre-wrap; max-height: 20em; overflow: auto; }
/* Find people (Web Admin v4 section eTalent, drawer iTalent). */
.c-fp-lab, .c-field > label:first-child { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.c-fp-for { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--border-mid); background: transparent; color: var(--text-main); font: 500 14px var(--font-sans); cursor: pointer; white-space: nowrap; }
.c-fp-for[aria-pressed="true"] { border-color: var(--text-secondary); background: var(--bg-raised); font-weight: 600; }
.c-fp-good { font-size: 12px; color: var(--text-muted); }
.c-fp-filters { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-surface); }
/* Wrapped lines 12px apart: 32px tokens, so each line's 44px targets (the ×, the box) meet the next's. */
.c-tokens { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 6px; min-height: 44px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--bg-field); }
/* The box draws the focus ring: the input inside it has none of its own (the artboard's outline: none). */
.c-tokens:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.c-token { display: inline-flex; align-items: center; gap: 2px; height: 32px; padding: 0 4px 0 12px; border-radius: 12px; background: var(--bg-raised); font-size: 13px; font-weight: 500; white-space: nowrap; }
.c-token-x { width: 28px; height: 28px; border: none; background: transparent; color: var(--text-secondary); cursor: pointer; display: grid; place-items: center; padding: 0; border-radius: 6px; flex: none; }
.c-token-x:hover { background: var(--hover); color: var(--text-main); }
/* A 32px line in the box; its own box is 44px (README §4), into the box's 6px padding. */
.c-token-input { flex: 1 1 160px; min-width: 120px; height: 44px; margin-block: -6px; border: none; background: transparent; color: var(--text-main); font: 400 16px var(--font-sans); outline: none; }
.c-shell .c-token-input:focus-visible { outline: none; }
.c-fp-suggest { gap: 6px; }
.c-suggest { height: 32px; padding: 0 10px; border-radius: 12px; border: 1px dashed var(--border-mid); background: transparent; color: var(--text-secondary); font: 500 12px var(--font-sans); cursor: pointer; white-space: nowrap; }
.c-suggest:hover { background: var(--hover); }
.c-fp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr)); gap: 10px; align-items: end; }
.c-fp-open { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--border); background: transparent; color: var(--text-main); font: 400 14px var(--font-sans); cursor: pointer; white-space: nowrap; }
/* Wrapped rows 12px apart, as .c-tokens: 32px chips with 44px targets. */
.c-fp-saved { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 10px; padding-top: 10px; border-top: 1px solid var(--border); }
/* A saved search: the chip that applies it, and the skill token's remove button. */
.c-saved { display: inline-flex; align-items: center; height: 32px; padding: 0 2px 0 0; border-radius: 12px; border: 1px solid var(--border-mid); }
.c-saved-apply { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 4px 0 12px; border: none; border-radius: 12px; background: transparent; color: var(--text-main); font: 500 12px var(--font-sans); cursor: pointer; white-space: nowrap; }
.c-saved-new { font: 500 12px var(--font-mono); padding: 0 6px; border-radius: 6px; background: var(--bg-raised); }
.c-fp-bar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.c-fp-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-secondary); }
/* Drawn 36px tall, as the artboard; its 44px target (README §4) is a transparent 4px band
   round the drawn box, whose line is an inset shadow. The margin gives the band's room back. */
select.c-fp-sortsel { height: 44px; margin: -4px; padding: 0 11px; width: auto; font-size: 14px; border: 4px solid transparent; border-radius: 16px; background-clip: padding-box; box-shadow: inset 0 0 0 1px var(--border-strong); }
.c-shell select.c-fp-sortsel:focus-visible { outline-offset: -2px; }
.c-fp-list { transition: opacity .15s; }
.c-fp-list[aria-busy="true"] { opacity: .55; }
.c-fp-row { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-start; padding: 16px 18px; border-bottom: 1px solid var(--border); cursor: pointer; }
.c-fp-row:hover { background: var(--hover); }
.c-fp-row.is-selected { background: var(--bg-raised); }
.c-fp-main { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.c-fp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
/* The headline opens the person: a button that reads as the row's title. */
.c-fp-headline { align-self: flex-start; max-width: 100%; padding: 0; border: none; background: none; color: var(--text-main); font: 600 16px var(--font-sans); line-height: 1.5; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.c-fp-meta { font-size: 13px; color: var(--text-secondary); }
.c-fp-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.c-fp-fit { display: flex; align-items: center; gap: 8px; }
.c-fp-segs { display: flex; gap: 2px; }
.c-fp-segs > span { width: 10px; height: 6px; border-radius: 2px; }
.c-fp-segs--12 > span { width: 12px; }
.c-fp-fitlabel { font: 500 12px var(--font-mono); color: var(--text-secondary); white-space: nowrap; }
.c-fp-acts { display: flex; gap: 6px; align-items: center; }
.c-fp-status { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 4px; font-size: 13px; white-space: nowrap; }
.c-chip--skill { color: var(--text-muted); }
.c-fp-empty { padding: 36px 18px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.c-fp-empty > span + span { font-size: 13px; color: var(--text-secondary); max-width: 52ch; text-wrap: pretty; }
.c-fp-more { display: flex; justify-content: center; }
/* The drawer: how they fit, what they wrote, and the approach. */
.c-fitbox { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-mid); }
.c-fitbox-top { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.c-fp-summary { margin: 0; color: var(--text-main); line-height: 1.6; text-wrap: pretty; white-space: pre-line; }
.c-fp-box { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; border: 1px solid var(--border-mid); }
.c-fp-offer { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 12px; background: var(--bg-raised); }
.c-fp-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.c-fp-msghead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.c-fp-msghead .c-link { font-size: 13px; }
.c-fp-count { font: 400 12px var(--font-mono); color: var(--text-muted); text-align: right; }
.c-fp-mine { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 12px; border: 1px solid var(--border-mid); }
/* A section this account may not use (Find people, Post a job): the server's words, and the way on. */
.c-refused { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; }
/* Company page (Web Admin v4 section eCompany): the form, and the public page as job seekers see it. */
.c-co-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; align-items: start; }
.c-co-card { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.c-co-id { display: flex; gap: 14px; align-items: center; }
.c-co-ring { width: 56px; height: 56px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.c-co-ring > span { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: var(--bg-surface); font: 600 14px var(--font-sans); color: var(--text-main); }
.c-co-ring img { width: 100%; height: 100%; object-fit: cover; display: block; }
.c-co-name { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.c-co-name > span:first-child { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.c-co-name > span + span { font-size: 13px; color: var(--text-secondary); }
.c-co-about { margin: 0; color: var(--text-secondary); line-height: 1.6; white-space: pre-wrap; text-wrap: pretty; overflow-wrap: anywhere; }
.c-co-pos { font-weight: 600; padding-bottom: 8px; }
.c-co-job { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border); }
.c-co-job > span:first-child { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.c-co-job > span + span { font-size: 13px; color: var(--text-muted); white-space: nowrap; }
.c-co-job > .c-muted { font-weight: 400; }
/* Verification (Web Admin v4 section eVerification): steps, where it stands, documents, history. */
.c-ver-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.c-ver-step { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.c-ver-bar { height: 4px; border-radius: 2px; }
.c-ver-label { font-size: 13px; font-weight: 500; }
.c-ver-when { font-size: 12px; color: var(--text-muted); }
.c-ver-state { padding: 16px 18px; display: flex; gap: 12px; align-items: center; }
/* Several lines (a rejection and its reason): the dot sits on the first line's centre, (21px − 8px) / 2. */
.c-ver-state--lines { align-items: flex-start; }
.c-ver-state--lines > .c-dot { margin-top: 6.5px; }
.c-ver-state-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow-wrap: anywhere; }
.c-ver-ask { border-color: var(--text-secondary); }
.c-ver-text { margin: 0; color: var(--text-secondary); white-space: pre-wrap; text-wrap: pretty; overflow-wrap: anywhere; }
.c-ver-head { padding: 14px 18px; }
.c-ver-doc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 44px; padding: 8px 18px; border-top: 1px solid var(--border); }
.c-ver-doc-id { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.c-ver-doc-id > span + span { font-size: 13px; color: var(--text-muted); overflow-wrap: anywhere; }
.c-ver-fmt { font: 400 13px var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.c-ver-confirm { padding: 0 18px 12px; }
.c-ver-foot { padding: 12px 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-muted); }
.c-ver-add { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-top: 1px solid var(--border); }
.c-ver-add-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; align-items: end; }
.c-ver-picked { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
/* The file chooser: the label is the target, the input inside it is visually hidden but focusable. */
.c-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 44px; padding: 10px 14px; border-radius: 12px; border: 1px dashed var(--border-strong); cursor: pointer; }
.c-drop:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.c-drop.is-over { background: var(--hover); border-color: var(--text-secondary); }
.c-drop-text { font-weight: 500; }
/* Team (Web Admin v4 section eTeam): the owner, the staff seat, the invite form, what staff can do. */
.c-team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 20px; align-items: start; }
.c-team-person { display: flex; gap: 12px; align-items: center; }
.c-team-owner { padding: 14px 18px; border-bottom: 1px solid var(--border); }
.c-team-staff { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px; }
.c-team-staff + .c-team-staff, .c-team-staff + .c-team-free { border-top: 1px solid var(--border); }
.c-team-free { padding: 14px 18px; }
.c-team-name { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-team-name > span:first-child { font-weight: 500; overflow-wrap: anywhere; }
.c-team-name > span + span { font-size: 13px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-team-name--free > span:first-child { color: var(--text-secondary); }
.c-team-you { color: var(--text-muted); font-weight: 400; }
.c-team-tag { flex: none; font-size: 12px; padding: 4px 10px; border-radius: 12px; border: 1px solid var(--border-mid); color: var(--text-secondary); white-space: nowrap; }
.c-initials--free { background: transparent; border: 1px dashed var(--border-mid); color: var(--text-muted); font-size: 16px; font-weight: 400; }
.c-team-hint { font-size: 12px; color: var(--text-muted); text-wrap: pretty; }
.c-team-hint--other { color: var(--text-main); }
.c-team-side { display: flex; flex-direction: column; gap: 18px; padding: 4px; }
.c-team-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.c-team-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-secondary); font-size: 13px; }
.c-team-list svg { flex: none; margin-top: 2px; }
.c-team-foot { font-size: 13px; color: var(--text-muted); line-height: 1.55; text-wrap: pretty; }
/* Billing (Web Admin v4 section eBilling): the plan card in its state, and "About the plan". */
.c-bill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 20px; align-items: start; }
.c-bill-card { padding: 24px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.c-bill-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.c-bill-name { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.c-bill-name > span:first-child { font-weight: 600; font-size: 16px; overflow-wrap: anywhere; }
.c-bill-price { display: flex; align-items: baseline; gap: 6px; }
.c-bill-price > span:first-child { font: 500 28px var(--font-mono); }
.c-bill-price > span + span { color: var(--text-muted); }
.c-bill-facts { grid-template-columns: 140px 1fr; padding-top: 16px; border-top: 1px solid var(--border); }
.c-bill-days { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.c-bill-days > span:first-child { color: var(--text-secondary); }
.c-bill-days > span + span { font-family: var(--font-mono); color: var(--text-muted); }
.c-bill-used { background: var(--text-secondary); }
.c-bill-prose { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.55; text-wrap: pretty; }
.c-bill-cta { display: flex; flex-direction: column; gap: 6px; }
/* The cancel strip at the artboard's size: 16px in, the sentence at body size. */
.c-confirm--bill { gap: 12px; padding: 16px; }
.c-confirm--bill > span { font-size: 14px; }
.c-bill-about { display: flex; flex-direction: column; gap: 8px; padding: 4px 4px 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }
.c-bill-about > span:first-child { font-weight: 600; color: var(--text-main); font-size: 14px; }
/* Post a job (Web Admin v4 section ePost): the form, then the row as a job seeker sees it and "Before you post". */
.c-pj-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 20px; align-items: start; }
.c-pj-form { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.c-pj-gap12 { gap: 12px; }
.c-pj-gap8 { gap: 8px; }
.c-pj-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); gap: 12px; }
.c-pj-trio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(130px, 100%), 1fr)); gap: 12px; }
/* The salary note sits close under its row, as the artboard draws it. */
.c-pj-note { margin-top: -8px; }
.c-pj-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px; }
.c-pj-mode { display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-mid); background: transparent; color: var(--text-main); cursor: pointer; font: 400 14px var(--font-sans); }
.c-pj-mode[aria-checked="true"] { border-color: var(--accent); background: var(--accent-wash); }
.c-pj-mode > span:first-child { font-weight: 600; }
.c-pj-mode > span + span { font-size: 13px; color: var(--text-secondary); }
.c-pj-side { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 92px; min-width: 0; container-type: inline-size; }
.c-pj-row { padding: 14px 16px; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.c-pj-row-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.c-pj-row-title { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-pj-row-meta { font-size: 13px; color: var(--text-secondary); overflow-wrap: anywhere; }
.c-pj-row-side { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.c-pj-pay { font: 500 14px var(--font-mono); color: var(--text-main); white-space: nowrap; }
.c-pj-pay--none { color: var(--text-muted); }
.c-pj-age { font: 400 12px var(--font-mono); color: var(--text-muted); white-space: nowrap; }
/* A narrow preview card (a phone, or the side column at tablet widths): the
   salary and age go under the text, as the board's card wraps its facts on a
   phone. Beside it, the text column was ~45px and the company name broke mid-word. */
@container (max-width: 440px) {
    .c-pj-row { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
    .c-pj-row-side { grid-column: 2; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
}
.c-pj-checks { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.c-pj-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.c-pj-check { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-secondary); }
.c-pj-check--done { color: var(--text-main); }
.c-pj-mark { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; border: 1px solid var(--border-strong); font-size: 12px; }
.c-pj-check--done .c-pj-mark { border-color: var(--text-main); background: var(--text-main); color: var(--bg-base); }

/* ---- Staff sign-in (Web Admin v4 "Admin sign in") --------------------------------- */
.c-signin-main { flex: 1; display: flex; justify-content: center; padding: 56px 20px 72px; }
.c-signin-col { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.c-signin-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-panel); padding: 32px 28px; display: flex; flex-direction: column; gap: 20px; }
.c-signin-card h1 { margin: 0; font-size: 28px; font-weight: 600; }
.c-signin-card p { margin: 0; color: var(--text-secondary); text-wrap: pretty; }
.c-signin-form { display: flex; flex-direction: column; gap: 18px; }
.c-signin-form label { display: flex; flex-direction: column; gap: 8px; }
.c-signin-form label > span { font-weight: 500; }
.c-signin-form .c-input { height: 48px; padding: 0 14px; }
.c-signin-form .c-btn--primary { height: 48px; width: 100%; }
.c-form-error { font-size: 13px; color: var(--danger-text); margin: 0; }
/* The sign-up consent box (lib/terms.php): one label wraps the checkbox and its sentence. */
.c-consent { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; font-size: 14px; line-height: 1.45; color: var(--text-secondary); cursor: pointer; font-weight: 400; }
.c-consent input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.c-consent a { font-weight: 500; text-decoration: underline; }
.c-invite-field > .c-consent { font-weight: 400; }
/* "We have updated our Terms and Privacy Policy": a banner above the employer console's section, never blocking it. */
.c-terms-wrap { margin-bottom: 16px; }
.c-terms-text { flex: 1 1 280px; font-size: 13px; color: var(--text-secondary); text-wrap: pretty; }
.c-terms-text a { font-weight: 500; text-decoration: underline; }
.c-terms-error { flex-basis: 100%; }

/* ---- The employers site (Employers - Web.dc.html): strip, header, footer ------------ */
/* The staff invite page first (plan S13b); S14's landing, sign-in and register build on it. */
.c-site { min-height: 100vh; display: flex; flex-direction: column; background: var(--bg-base); color: var(--text-main); }
.c-site-inner { max-width: 1200px; margin: 0 auto; width: 100%; padding: 0 24px; }
.c-site-strip { background: var(--bg-surface); border-bottom: 1px solid var(--border); }
/* 12px: the strip is its link's 44px target (README §4); at the top of the page there is nothing above to borrow. */
.c-site-strip .c-site-inner { padding: 12px 24px; display: flex; justify-content: flex-end; gap: 16px; font-size: 13px; color: var(--text-secondary); }
.c-site-strip a { font-weight: 500; }
.c-site-head { position: sticky; top: 0; z-index: 30; background: var(--chrome-bg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); }
.c-site-head .c-site-inner { height: 64px; display: flex; align-items: center; gap: 24px; }
.c-site-brand { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.c-site-for { font-size: 13px; color: var(--text-secondary); }
.c-site-actions { display: flex; align-items: center; gap: 8px; }
.c-site-main { flex: 1; display: flex; justify-content: center; padding: 48px 20px 72px; }
.c-site-foot { border-top: 1px solid var(--border); }
.c-site-foot .c-site-inner { padding: 20px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; color: var(--text-muted); font-size: 13px; }
.c-site-foot nav { display: flex; flex-wrap: wrap; gap: 26px 20px; } /* rows 45px apart: each link's invisible 44px hit area (::after, below) must not reach the row beside it when the links wrap */
.c-shell .c-site-foot nav a { color: var(--text-secondary); }
/* The staff invite (Employers - Web #invite): the sign-in card, 20px wider, its fields with a line under them. */
.c-signin-col--420 { max-width: 420px; }
.c-signin-card--site h1 { letter-spacing: -0.01em; }
.c-invite-field { display: flex; flex-direction: column; gap: 8px; }
.c-invite-field > label { font-weight: 500; }
.c-signin-form .c-input[readonly] { color: var(--text-secondary); }
.c-invite-foot { border-top: 1px solid var(--border); padding-top: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-secondary); }
.c-invite-foot > span:first-child { font-weight: 500; color: var(--text-main); }
.c-invite-foot > span + span { text-wrap: pretty; }
.c-invite-after { margin: 0; text-align: center; font-size: 13px; color: var(--text-muted); text-wrap: pretty; }

/* Signed out: the console page swaps itself for the 404 body; draw nothing first. */
html[data-gate="closed"] .c-app { visibility: hidden; }

/* Phones. The artboard's header (menu, wordmark, tag, theme, account) is
   ~460px wide and clips the account button at 390; here every control stays
   on screen with no sideways scroll: tighter gaps, and the "admin" tag goes. */
@media (max-width: 440px) {
    .c-header { gap: 8px; padding: 0 12px; }
    .c-header > .c-tag { display: none; }
    /* The employer header also carries Post a job: a smaller wordmark and
       button keep all five controls on a 390px screen. */
    .c-header--employer { gap: 6px; padding: 0 10px; }
    .c-header--employer .c-brand { font-size: 16px; }
    .c-header--employer .c-btn--pad14 { padding: 0 10px; font-size: 13px; }
    /* 375px phones: the account button gives back the 8px the row lacks. */
    .c-header--employer .c-acct { gap: 4px; padding: 0 6px 0 4px; }
}
/* The employers site header: Post a job only where it fits. The artboard shows
   it from 420px (showPostBtn), where its header scrolls sideways: with it the
   row is 525px wide. */
.c-site-post { display: none; }
@media (min-width: 540px) {
    .c-site-post { display: inline-flex; }
}
/* Phones: without it the row (wordmark, "for employers", theme, Sign in) is
   still ~445px and scrolls sideways at 375 in the artboard; tighter gaps and a
   smaller wordmark keep it on screen, as the console header does. */
@media (max-width: 440px) {
    .c-site-strip .c-site-inner { padding: 12px 16px; }
    .c-site-head .c-site-inner { gap: 10px; padding: 0 12px; }
    .c-site-head .c-brand { font-size: 17px; }
    .c-site-brand { gap: 6px; }
}
@media (max-width: 359px) {
    .c-site-head .c-site-inner { gap: 6px; padding: 0 6px; }
    .c-site-head .c-brand { font-size: 15px; }
    .c-site-actions { gap: 6px; }
    .c-site-actions .c-btn { padding: 0 10px; }
}

/* ---- The employers site: landing, sign-in, register (Employers - Web.dc.html, plan S14) ---- */
/* The header's place links (Find talent, How it works, Pricing): the artboard shows them from 900px. */
.c-shell a.c-site-brand, .c-shell a.c-site-brand:hover { color: var(--text-main); text-decoration: none; }
.c-site-nav { display: none; gap: 4px; }
.c-shell .c-site-nav a { padding: 10px 12px; color: var(--text-secondary); }
.c-shell .c-site-nav a:hover { color: var(--accent-hover); }
@media (min-width: 900px) {
    .c-site-nav { display: flex; }
}
/* The way back to the board, in the header that stays on screen (the strip above
   scrolls away): the board's "For employers" the other way round, shown from the
   same 720px (style.css .bh-link). Narrower, the strip's "Go to Role Den" is it. */
.c-site-seekers { display: none; }
.c-shell .c-site-seekers { align-items: center; min-height: 44px; padding: 0 12px; color: var(--text-secondary); white-space: nowrap; }
.c-shell .c-site-seekers:hover { color: var(--accent-hover); }
@media (min-width: 720px) {
    .c-site-seekers { display: inline-flex; }
}
.c-btn--48 { height: 48px; padding: 0 20px; }
.c-shell .c-site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
/* Tap targets (README §4, 44px; "the visible mark may be smaller than its target"):
   the text links that stand alone get an invisible 44px hit area, so the strip,
   footer and wordmark keep the artboard's size. */
.c-site-strip a, .c-site-foot nav a, a.c-site-brand, .c-land-way > a { position: relative; }
.c-site-strip a::after, .c-site-foot nav a::after, a.c-site-brand::after, .c-land-way > a::after { content: ''; position: absolute; left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%); }

/* Landing: full-width bands, each with a hairline under it. */
.c-site-main--land { display: block; padding: 0; }
.c-land-band { border-bottom: 1px solid var(--border); scroll-margin-top: 64px; }
.c-land-band:last-child { border-bottom: none; }
.c-land-in { max-width: 1200px; margin: 0 auto; padding: 48px 24px; display: flex; flex-direction: column; gap: 28px; }
.c-land-in--880 { max-width: 880px; gap: 8px; }
.c-land-in--split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 40px; align-items: start; }
.c-land-in--cta { flex-direction: row; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; padding: 48px 24px 64px; }
.c-land h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.c-land h2 { margin: 0; font-size: 20px; font-weight: 600; }
.c-land-col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.c-land-p { margin: 0; color: var(--text-secondary); line-height: 1.6; max-width: 52ch; text-wrap: pretty; }
.c-land-p--64 { line-height: 1.5; max-width: 64ch; }
.c-land-way .c-land-p { max-width: none; }
.c-land-title16 { font-size: 16px; font-weight: 600; }

/* Hero: the pitch and the talent search teaser beside the pipeline illustration. */
.c-land-hero { max-width: 1200px; margin: 0 auto; padding: 56px 24px 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 48px; align-items: center; }
.c-land-pitch { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.c-land-lede { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-secondary); max-width: 52ch; text-wrap: pretty; }
.c-land-search { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px; border-radius: 16px; border: 1px solid var(--border); background: var(--bg-surface); }
.c-land-search label { flex: 2 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 4px 8px; border-radius: 10px; cursor: text; }
.c-land-search label + label { flex: 1 1 140px; border-left: 1px solid var(--border); border-radius: 0 10px 10px 0; }
.c-land-search label > span { font-size: 12px; color: var(--text-muted); }
.c-land-search input { border: none; background: transparent; color: var(--text-main); font: 400 16px var(--font-sans); height: 28px; padding: 0; outline: none; min-width: 0; }
/* The inputs draw no outline of their own (the artboard's field is the whole label): the focus ring goes on the label. */
.c-land-search label:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.c-land-search .c-btn--primary { align-self: center; }
.c-land-result { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--border-mid); background: var(--bg-surface); }
.c-land-result-title { font-size: 16px; text-wrap: pretty; }
.c-land-result-title strong { font-weight: 500; }
.c-land-result-text { font-size: 13px; color: var(--text-secondary); text-wrap: pretty; }
.c-shell .c-land-result-text a { font-weight: 500; }
.c-land-pool { font-size: 13px; color: var(--text-muted); }

/* The applicant pipeline illustration (decorative: aria-hidden). */
.c-land-demo { min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 20px; border-radius: 20px; border: 1px solid var(--border); background: var(--bg-surface); box-shadow: var(--shadow-panel); }
.c-land-demo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.c-land-demo-head > span:first-child { font-weight: 600; }
.c-land-demo-head > span:last-child { font-size: 12px; color: var(--text-muted); }
.c-land-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.c-land-stage { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border-radius: 12px; background: var(--bg-base); border: 1px solid var(--border); }
.c-land-stage-head { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; white-space: nowrap; }
.c-land-stage-head .mono { color: var(--text-muted); }
.c-land-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.c-land-dot--new { background: var(--st-pending); }
.c-land-dot--reviewed { background: var(--st-reviewed); }
.c-land-dot--shortlisted { background: var(--st-shortlisted); }
.c-land-dot--hired { background: var(--st-hired); }
.c-land-person { display: flex; flex-direction: column; padding: 6px 8px; border-radius: 8px; background: var(--bg-surface); border: 1px solid var(--border); min-width: 0; }
.c-land-person > span { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-land-person > span:first-child { font-weight: 500; }
.c-land-person > span:last-child { color: var(--text-muted); }
.c-land-note12 { font-size: 12px; color: var(--text-muted); }

/* Two ways to hire: two cells on one hairline grid. */
.c-land-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.c-land-way { background: var(--bg-surface); padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.c-shell .c-land-way > a { font-weight: 500; align-self: flex-start; }
.c-land-eg { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg-base); }
.c-land-eg--job { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; }
.c-land-ring { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: conic-gradient(var(--pigment-2) 0 86%, var(--border) 86% 100%); }
.c-land-ring > span { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-surface); font-size: 12px; font-weight: 600; }
.c-land-initials { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--bg-raised); font-size: 12px; font-weight: 600; }
.c-land-eg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.c-land-eg-text > span:first-child { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.c-land-eg-text > span:last-child { font-size: 13px; color: var(--text-secondary); }
.c-land-eg-text .c-muted { color: var(--text-muted); }
.c-land-eg-side { display: flex; flex-direction: column; align-items: flex-end; }
.c-land-eg-side > span:first-child { font: 500 14px var(--font-mono); }
.c-land-eg-side > span:last-child { font: 400 12px var(--font-mono); color: var(--text-muted); }
.c-land-open { font-size: 13px; white-space: nowrap; }

/* How it works: four numbered steps, each under a 2px rule that brightens to ember. */
.c-land-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 24px; }
.c-land-step { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 2px solid var(--text-main); }
.c-land-step:nth-child(2) { border-top-color: var(--text-secondary); }
.c-land-step:nth-child(3) { border-top-color: var(--text-muted); }
.c-land-step:nth-child(4) { border-top-color: var(--accent); }
.c-land-step-n { font: 500 12px var(--font-mono); color: var(--text-muted); }
.c-land-step-b { color: var(--text-secondary); line-height: 1.6; text-wrap: pretty; }

/* Pricing. */
.c-land-launch { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-mid); max-width: 52ch; }
.c-land-launch > span:first-child { font-weight: 600; }
.c-land-launch > span:last-child { font-size: 13px; color: var(--text-secondary); line-height: 1.55; text-wrap: pretty; }
.c-land-plan { display: flex; flex-direction: column; gap: 18px; padding: 24px; border-radius: 20px; border: 1px solid var(--border-mid); background: var(--bg-surface); }
.c-land-plan-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; min-height: 42px; }
.c-land-price { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.c-land-price-row { display: flex; align-items: baseline; gap: 6px; }
.c-land-price-row > span:last-child { color: var(--text-muted); }
.c-land-then { font: 400 13px var(--font-mono); color: var(--text-muted); }
.c-land-ticks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.c-land-ticks li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-secondary); }
.c-land-ticks svg { flex: none; margin-top: 3px; color: var(--text-main); }
.c-land-ticks li > span { text-wrap: pretty; }
.c-land-plan .c-btn--primary { height: 48px; }
.c-land-fine { font-size: 13px; color: var(--text-muted); text-wrap: pretty; }
.c-land-price-error { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; font-size: 13px; color: var(--text-secondary); text-align: right; }

/* What candidates see: label and text rows. */
.c-land-rows { display: flex; flex-direction: column; }
.c-land-row { display: grid; grid-template-columns: minmax(0, 180px) 1fr; gap: 16px; padding: 14px 0; border-top: 1px solid var(--border); }
.c-land-row > span:first-child { font-weight: 500; }
.c-land-row > span:last-child { color: var(--text-secondary); text-wrap: pretty; }

/* FAQ: one open at a time. */
.c-land .c-land-faq-title { margin: 0 0 12px; }
.c-reg-terms-error { margin: 0; font-size: 13px; color: var(--text-secondary); }
.c-land-faq { border-top: 1px solid var(--border); }
.c-land-faq-q { width: 100%; min-height: 56px; display: flex; align-items: center; gap: 12px; padding: 0; border: none; background: transparent; color: var(--text-main); font: 500 16px var(--font-sans); cursor: pointer; text-align: left; }
.c-shell .c-land-faq-q { line-height: normal; }
.c-land-faq-q > span:first-child { flex: 1; }
.c-land-faq-sign { font: 400 20px var(--font-mono); color: var(--text-muted); }
.c-land-faq-a { margin: 0 0 18px; color: var(--text-secondary); line-height: 1.6; max-width: 68ch; text-wrap: pretty; }

/* Closing call to action. */
.c-land-cta-text { display: flex; flex-direction: column; gap: 6px; }
.c-land-cta-text > span:first-child { font-size: 20px; font-weight: 600; }
.c-land-cta-text > span:last-child { color: var(--text-secondary); }
.c-land-cta-btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* Sign in: the wrong-door box (Site Map §2), and the lines under the form. */
.c-door-box { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-mid); background: var(--bg-base); }
.c-door-box > span:first-child { font-weight: 500; }
.c-door-box > span + span { font-size: 13px; color: var(--text-secondary); text-wrap: pretty; overflow-wrap: anywhere; }
.c-shell .c-door-box a { font-weight: 500; align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; margin: -10px 0; }
.c-signin-staff { font-size: 13px; color: var(--text-muted); margin-top: -6px; }
/* "Forgot password?" under the password field: the link is its own 44px target, the margins give the height back. */
.c-shell a.c-signin-forgot { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; margin: -12px 0; font-size: 13px; font-weight: 500; }
.c-signin-switch { border-top: 1px solid var(--border); padding-top: 18px; color: var(--text-secondary); text-wrap: pretty; }
.c-shell .c-signin-switch a { font-weight: 500; }

/* Register: the form card beside "What happens next". */
.c-site-main--reg { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 40px; align-items: start; max-width: 1100px; margin: 0 auto; width: 100%; padding: 40px 24px 72px; }
.c-signin-form--16 { gap: 16px; }
.c-signin-form textarea.c-input { height: auto; padding: 12px 14px; resize: vertical; }
.c-field-hint { font-size: 13px; color: var(--text-muted); text-wrap: pretty; }
.c-field-hint--warn { color: var(--text-main); }
.c-reg-next { display: flex; flex-direction: column; gap: 20px; padding-top: 8px; }
.c-reg-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.c-reg-step { display: grid; grid-template-columns: 32px 1fr; gap: 12px; padding: 16px 0; border-top: 1px solid var(--border); }
.c-reg-step > span:first-child { font: 500 13px var(--font-mono); color: var(--text-muted); }
.c-reg-step > span:last-child { display: flex; flex-direction: column; gap: 4px; }
.c-reg-step-t { font-weight: 500; }
.c-reg-step-b { color: var(--text-secondary); line-height: 1.55; text-wrap: pretty; }

/* ------------------------------------------------------------------------
 * The Talent directory (talent.html, assets/js/talent.js; plan S15), from
 * Talent Directory - Web.dc.html's own values. Its tokens are scoped to
 * .td-page like the board's (.board-page): the artboard's selection wash and
 * light ink 3 differ from README §4's shared list by a few hundredths.
 * ------------------------------------------------------------------------ */
.td-page {
    --td-bg: #F3F4F5; --td-surface: #FFFFFF; --td-raised: #FFFFFF; --td-field: #FFFFFF;
    --td-hair: rgba(11, 13, 15, 0.10); --td-hair2: rgba(11, 13, 15, 0.20); --td-line: rgba(11, 13, 15, 0.58);
    --td-ink1: rgba(11, 13, 15, 0.92); --td-ink2: rgba(11, 13, 15, 0.74); --td-ink3: rgba(11, 13, 15, 0.62);
    --td-sel: rgba(11, 13, 15, 0.06); --td-shadow: 0 16px 40px -16px rgba(92, 48, 14, 0.28);
    margin: 0; min-height: 100vh; background: var(--td-bg); color: var(--td-ink1); font-size: 14px; line-height: 1.5;
}
[data-theme="dark"] .td-page {
    --td-bg: #0B0D0F; --td-surface: #15181B; --td-raised: #1B1F23; --td-field: #0F1214;
    --td-hair: rgba(255, 255, 255, 0.10); --td-hair2: rgba(255, 255, 255, 0.18); --td-line: rgba(255, 255, 255, 0.58);
    --td-ink1: rgba(255, 255, 255, 0.92); --td-ink2: rgba(255, 255, 255, 0.74); --td-ink3: rgba(255, 255, 255, 0.58);
    --td-sel: rgba(255, 255, 255, 0.08); --td-shadow: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
}
html[data-gate="closed"] #talent { visibility: hidden; }
html.td-drawer-open { overflow: hidden; }
.td-page a { text-decoration: none; }
.td-page a:hover { color: var(--accent-hover); text-decoration: underline; }
.td-strong { font-weight: 600; }
.td-sub { font-size: 13px; color: var(--td-ink2); text-wrap: pretty; }

.td-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid var(--td-hair); background: var(--td-bg); }
.td-header-inner { max-width: 1280px; margin: 0 auto; height: 64px; padding: 0 20px; display: flex; align-items: center; gap: 12px; }
.td-header .c-tag { border-color: var(--td-hair2); color: var(--td-ink2); }
.td-nav { display: flex; align-items: center; gap: 2px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.td-page .td-nav a { display: inline-flex; align-items: center; height: 44px; padding: 0 12px; border-radius: 12px; white-space: nowrap; font-weight: 400; color: var(--td-ink2); }
.td-page .td-nav a[aria-current="page"] { font-weight: 600; color: var(--td-ink1); background: var(--td-sel); }
.td-page .td-nav a:hover { color: var(--td-ink1); text-decoration: none; background: var(--td-sel); }
.td-viewer { display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 14px; border: 1px solid var(--td-hair2); font-size: 12px; color: var(--td-ink2); white-space: nowrap; }
.td-viewer-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; }
.td-header .c-iconbtn { border-color: var(--td-hair); color: var(--td-ink1); }


.td-main { display: block; width: 100%; outline: none; }
.td-band { border-bottom: 1px solid var(--td-hair); background: var(--td-surface); }
.td-band-inner { max-width: 1280px; margin: 0 auto; padding: 32px 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.td-intro { display: flex; flex-direction: column; gap: 6px; }
.td-page .td-intro h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance; }
.td-intro p { margin: 0; font-size: 16px; color: var(--td-ink2); max-width: 60ch; text-wrap: pretty; }
.td-search { display: flex; flex-wrap: wrap; gap: 8px; }
.td-box { display: flex; align-items: center; gap: 12px; height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid var(--td-hair2); background: var(--td-bg); cursor: text; }
.td-box--q { flex: 2 1 320px; }
.td-box--loc { flex: 1 1 200px; }
.td-box svg { flex: none; }
.td-box input { flex: 1; min-width: 0; height: 100%; border: none; background: transparent; color: var(--td-ink1); font: 400 16px var(--font-sans); outline: none; }
.td-box input::placeholder { color: var(--td-ink3); }
.td-box:focus-within { border-color: var(--accent); }
.td-go { height: 52px; padding: 0 28px; border-radius: 14px; border: none; background: var(--accent); color: var(--on-accent); font: 600 15px var(--font-sans); cursor: pointer; flex: none; }
.td-go:hover { background: var(--accent-hover); }
.td-quicks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.td-quick { position: relative; height: 36px; padding: 0 14px; border-radius: 18px; font: 500 13px var(--font-sans); cursor: pointer; white-space: nowrap; border: 1px solid var(--td-hair2); background: transparent; color: var(--td-ink1); }
.td-quick[aria-pressed="true"] { border-color: var(--td-ink2); background: var(--td-sel); }

.td-body { max-width: 1280px; margin: 0 auto; padding: 24px 20px 96px; display: flex; flex-direction: column; gap: 24px; }
.td-fields { display: flex; flex-direction: column; gap: 10px; }
.td-field-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr)); gap: 8px; }
.td-field { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 52px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--td-hair); background: var(--td-surface); color: var(--td-ink1); font: 500 14px var(--font-sans); cursor: pointer; text-align: left; }
.td-field > span { text-wrap: pretty; }
.td-field svg { flex: none; }
/* The chosen field shows a check where the others show a chevron (talent.js; the chip above the people undoes it). */
.td-field-check { color: var(--td-ink1); }
.td-field[aria-pressed="true"] { border-color: var(--td-ink2); background: var(--td-sel); font-weight: 600; }
.td-field:hover { border-color: var(--td-hair2); }
.td-note-box { display: flex; gap: 10px; align-items: flex-start; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--td-hair2); font-size: 13px; color: var(--td-ink2); }
.td-note-box > span:last-child { text-wrap: pretty; }
.td-note-dot { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; flex: none; background: var(--danger); }

.td-people { display: flex; flex-direction: column; gap: 12px; }
.td-people-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.td-page .td-people-head h2 { margin: 0; font-size: 20px; font-weight: 600; }
.td-sort { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--td-ink2); }
/* Drawn 36px tall with a 44px target, as select.c-fp-sortsel (a transparent band round it). */
.td-sort select { height: 44px; margin: -4px; padding: 0 11px; border-radius: 16px; border: 4px solid transparent; background: var(--td-field) padding-box; box-shadow: inset 0 0 0 1px var(--td-line); color: var(--td-ink1); font: 400 14px var(--font-sans); }
.c-shell .td-sort select:focus-visible { outline-offset: -2px; }
.td-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 12px; }
.td-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--td-hair); background: var(--td-surface); cursor: pointer; }
.td-card:hover { border-color: var(--td-hair2); }
.td-card.is-selected { border-color: var(--td-ink2); }
.td-card-top { display: flex; gap: 12px; align-items: flex-start; }
.td-ini { width: 44px; height: 44px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--td-sel); font: 600 13px var(--font-sans); color: var(--td-ink1); }
.td-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.td-headline { align-self: flex-start; max-width: 100%; padding: 0; border: none; background: none; color: var(--td-ink1); font: 600 14px var(--font-sans); line-height: 1.5; text-align: left; cursor: pointer; text-wrap: pretty; overflow-wrap: anywhere; }
/* The name is a real link to the person's own address (talent.js): drawn as the button was, not as a link (.td-page a above). */
.td-page a.td-headline, .td-page a.td-headline:hover { color: var(--td-ink1); text-decoration: none; }
.td-meta { font-size: 13px; color: var(--td-ink3); }
.td-mark { position: relative; width: 44px; height: 44px; margin: -6px -6px 0 0; border-radius: 12px; border: none; background: transparent; cursor: pointer; display: grid; place-items: center; padding: 0; flex: none; }
.td-mark:hover { background: var(--td-sel); }
.td-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.td-chip { height: 28px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--td-hair); background: transparent; color: var(--td-ink2); font-size: 12px; display: inline-flex; align-items: center; white-space: nowrap; }
.td-chip.is-hit { border-color: var(--td-hair2); background: var(--td-sel); color: var(--td-ink1); }
.td-more { height: 28px; padding: 0 6px; font-size: 12px; color: var(--td-ink3); display: inline-flex; align-items: center; }
.td-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 10px; border-top: 1px solid var(--td-hair); font-size: 12px; }
.td-avail { display: inline-flex; align-items: center; gap: 8px; color: var(--td-ink2); white-space: nowrap; }
.td-avail-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.td-right { color: var(--td-ink3); white-space: nowrap; }
.td-skel { cursor: default; }
.td-skel-lines { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.td-skel-lines > span { height: 12px; border-radius: 6px; background: var(--td-sel); }
.td-skel-chip { height: 28px; border-radius: 12px; background: var(--td-sel); }
.td-skel-foot { height: 10px; width: 40%; border-radius: 6px; background: var(--td-sel); margin-top: 10px; }
.td-empty { padding: 40px 20px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; border-radius: 16px; border: 1px dashed var(--td-hair2); }
.td-empty > span:nth-child(2) { font-size: 13px; color: var(--td-ink2); max-width: 48ch; }
.td-alert { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 16px; border-radius: 16px; border: 1px solid var(--td-hair2); background: var(--td-surface); }
.td-moreb { align-self: center; }
.td-foot { font-size: 12px; color: var(--td-ink3); text-align: center; text-wrap: pretty; }

.td-drawer { position: fixed; top: 64px; right: 0; bottom: 0; background: var(--td-raised); border-left: 1px solid var(--td-hair2); box-shadow: var(--td-shadow); z-index: 40; display: flex; flex-direction: column; }
.td-drawer .c-drawer-head { border-bottom-color: var(--td-hair); }
.td-drawer .c-drawer-title > div + div { color: var(--td-ink2); }
.td-summary { margin: 0; line-height: 1.6; text-wrap: pretty; }
.td-box-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 12px; border: 1px solid var(--td-hair2); }
.td-box-card .c-input { border-color: var(--td-line); background: var(--td-field); }
.td-offer { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: 12px; background: var(--td-sel); }
.td-offer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 10px; }
.td-msghead { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.td-msghead label { font-size: 13px; font-weight: 500; color: var(--td-ink2); }
.td-msghead .c-link { font-size: 13px; }
.td-msg { height: auto; padding: 10px 12px; resize: vertical; }
.td-count { font: 400 12px var(--font-mono); color: var(--td-ink3); text-align: right; }

/* A phone: the artboard's header overflows at 375 (it is 425 wide there). The
   viewer chip goes, the sections take a row of their own, and the drawer
   takes the whole screen above the taller header. */
@media (max-width: 639px) {
    .td-viewer { display: none; }
    .td-header-inner { flex-wrap: wrap; height: auto; padding: 10px 16px 6px; row-gap: 4px; }
    .td-nav { order: 3; flex: 1 0 100%; }
    .td-drawer { top: 0; }
    .td-page .c-scrim { inset: 0; }
}