/* ============================================================================
   recruiting.css — the recruiting workspace redesign.

   INSTALL: save as `static/css/recruiting.css` and load it after `app.css`.
   Nothing here overrides an existing rule: every class is `rec-*`, so the
   `rc-*` screens keep working untouched and the port can go one template at a
   time (§14.1 — CSS is additive; never map a `rec-*` class onto an `.rc-*`
   class).

   Colour, type and spacing are the repo's own `--ub-*` / `--hs-*` tokens,
   declared in `app.css` on `.home-shell`. Nothing here invents a colour, and
   nothing here redeclares a token — `.rec-workspace` must therefore live
   inside `.home-shell`, which `recruiting/section.html` guarantees.

   Two literals in here become template values on install, both marked at their
   rule: the ledger's `max-height` and `.rec-table--underbar`'s sticky offset.

   CANVAS B, CANVAS D, CANVASES E TO M, THEN CANVAS N, CANVAS O, CANVAS P AND
   CANVAS Q ARE APPENDED AT THE FOOT, in that order, verbatim. Canvas D composes
   objects canvas B declares (`.rec-input`, `.rec-form__help`,
   `.rec-partial`) and has to resolve after them; canvas E composes
   `.rec-textarea` and `.rec-expand`; canvas F is the careers ad screens.
   Canvases N to Q are interview scheduling: O composes objects canvas A
   and N declare (`.rec-week`, `.rec-choice`, `.rec-list`), P holds the
   buttons, the paintable agenda and the scheduling week, and Q repaints
   main's interview card. None shares a
   selector with anything above it or with the others; if you are merging a
   change into one of them, edit the copy in
   `docs/design/recruiting-redesign/` and re-append rather than editing here,
   so the design package stays the authority.
   ========================================================================== */

/* == PART 2 — the recruiting workspace (new) =============================== */

.rec-workspace {
  --rec-age-warm: color-mix(in srgb, var(--hs-gold) 13%, #fff);
  --rec-age-hot: color-mix(in srgb, var(--hs-gold) 26%, #fff);
  --rec-age-ink: #7a5c12;
  /* Everything above and below the ledger's scroll region, so the region can be
     `calc(100dvh - var(--rec-chrome))` instead of a literal: topbar, section
     bar, page head and filter bar above it, panel foot below, and 8px of gap.
     Measured in a browser on the built screen, sweeping the workspace from
     700px to 1200px with `More filters` open — its worst case, and the one the
     region must still fit in. 428px at every width the wide block covers; up to
     484px in the narrow one, where the filter bar takes three lines. */
  --rec-chrome: 440px;
  min-width: 0;
  position: relative;
}

/* -- Section bar: the eight recruiter sections, one persistent action ------- */

.rec-sectionbar {
  position: sticky; top: 56px; z-index: 4;
  display: flex; align-items: stretch; gap: 0.5rem;
  padding: 0 1.1rem; background: var(--hs-surface);
  border-bottom: 1px solid var(--hs-line);
}
.rec-sectionbar__scroll {
  display: flex; align-items: stretch; gap: 0;
  min-width: 0; flex: 1;
  overflow-x: auto; scrollbar-width: none;
  /* Below ~1180px the eight labels no longer fit. The row scrolls and the
     overflow is *shown* to be an overflow: the mask fades the cut edge instead
     of clipping a word mid-letter with no signal. Add candidate is pinned
     outside this region so the primary action never scrolls away. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
}
.rec-sectionbar__scroll::-webkit-scrollbar { display: none; }
.rec-sectionbar__tab {
  position: relative; display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0 0.775rem; height: 46px; white-space: nowrap;
  color: var(--hs-ink-soft); font-size: 0.875rem; font-weight: 600;
  text-decoration: none; border-bottom: 2px solid transparent;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.rec-sectionbar__tab:hover { color: var(--hs-ink); background: var(--hs-hover); }
.rec-sectionbar__tab--on { color: var(--hs-ink); border-bottom-color: var(--hs-gold); }
.rec-sectionbar__ink { position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; }
.rec-sectionbar__tab--on .rec-sectionbar__ink { background: var(--hs-gold); }
.rec-sectionbar__tab--on:has(> .rec-sectionbar__ink) { border-bottom-color: transparent; }
.rec-sectionbar__n {
  font-family: var(--ub-font-mono); font-size: 0.66rem; font-weight: 500;
  padding: 0.05rem 0.34rem; border-radius: var(--ub-radius-pill);
  background: var(--hs-hover); color: var(--hs-ink-soft);
}
.rec-sectionbar__tab--on .rec-sectionbar__n { background: var(--hs-active); color: var(--rec-age-ink); }
.rec-sectionbar__n--due {
  background: color-mix(in srgb, var(--ub-danger) 12%, #fff);
  color: var(--ub-danger);
}
.rec-sectionbar__action {
  align-self: center; flex: none; margin-left: 0.35rem;
  padding: 0.42rem 0.8rem; font-size: 0.83rem;
}

/* -- Page frame ------------------------------------------------------------ */

.rec-page { padding: 1.6rem 1.75rem 0; }
.rec-page--wide { padding-inline: 1.25rem; }
.rec-page__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; margin-bottom: 1.25rem;
}
.rec-page__headmain { min-width: 0; }
.rec-eyebrow {
  margin: 0 0 0.3rem; font-family: var(--ub-font-mono); font-size: 0.62rem;
  font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--hs-gold);
}
.rec-page__title {
  margin: 0; font-family: var(--ub-font-display); font-weight: 700;
  font-size: 1.85rem; line-height: 1.1; letter-spacing: -0.02em;
}
.rec-page__title em { font-style: italic; color: var(--hs-ink-soft); }
.rec-page__lede { margin: 0.5rem 0 0; max-width: 46rem; color: var(--hs-ink-soft); font-size: 0.925rem; }
.rec-page__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* Job workspace tabs. In-page, under the job title — not a second chrome bar. */
.rec-jobtabs {
  display: flex; gap: 0.15rem; margin: 0 0 1.25rem;
  border-bottom: 1px solid var(--hs-line);
}
.rec-jobtabs__tab {
  padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600;
  color: var(--hs-ink-soft); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.rec-jobtabs__tab:hover { color: var(--hs-ink); }
.rec-jobtabs__tab--on { color: var(--hs-ink); border-bottom-color: var(--hs-ink); }

/* -- Measures -------------------------------------------------------------- */

.rec-stats { display: grid; gap: 0.75rem; margin-bottom: 1.25rem; }
.rec-stats--4 { grid-template-columns: repeat(4, 1fr); }
.rec-stats--5 { grid-template-columns: repeat(5, 1fr); }
.rec-stat {
  background: var(--hs-surface); border: 1px solid var(--hs-line);
  border-radius: var(--ub-radius); padding: 0.85rem 1rem;
}
.rec-stat__label {
  margin: 0 0 0.4rem; font-family: var(--ub-font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-stat__value {
  font-family: var(--ub-font-display); font-weight: 700; font-size: 1.5rem;
  line-height: 1.05; letter-spacing: -0.01em;
}
.rec-stat__value small { font-family: var(--ub-font); font-size: 0.8rem; font-weight: 600; color: var(--hs-ink-soft); }
.rec-stat__sub { margin: 0.35rem 0 0; font-size: 0.78rem; color: var(--hs-ink-soft); }

/* -- Panel: every table, list and board sits in one ------------------------ */

.rec-panel {
  background: var(--hs-surface); border: 1px solid var(--hs-line);
  border-radius: var(--ub-radius); margin-bottom: 1.25rem; overflow: hidden;
}
.rec-panel__head {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--hs-line);
}
.rec-panel__title { margin: 0; font-size: 0.95rem; font-weight: 700; letter-spacing: -0.01em; }
/* --hs-ink-soft, not --hs-ink-faint: recruiting-color.css tints every panel head
   to --pp-tint-2, where faint measures 4.18:1 and fails AA for normal text. Soft
   is 5.78:1 on the same ground and still quieter than the 700-weight title. */
.rec-panel__hint { font-size: 0.8rem; color: var(--hs-ink-soft); }
.rec-panel__spacer { flex: 1; }
.rec-panel__body { padding: 1rem; }
.rec-panel__foot {
  padding: 0.65rem 1rem; border-top: 1px solid var(--hs-line);
  font-size: 0.8rem; color: var(--hs-ink-soft);
  display: flex; align-items: center; gap: 0.6rem;
}
.rec-grid { display: grid; gap: 1.25rem; }
.rec-grid--2 { grid-template-columns: 1fr 1fr; }
.rec-grid--main-side { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.rec-grid--side-main { grid-template-columns: 300px minmax(0, 1fr); }

/* -- Filter bar ------------------------------------------------------------ */

.rec-filters {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.7rem 1rem; background: var(--hs-surface);
  border-bottom: 1px solid var(--hs-line);
}
/* The ledger is one scroll region, not a scrolling page: the filter bar and the
   selection footer stay put while ~200 rows move under a sticky header. The
   height is `--rec-chrome` subtracted from the viewport; the artboard copy keeps
   a literal instead, because there the frame is a fixed size and 100dvh would be
   the browser window rather than the frame. */
.rec-ledger { display: flex; flex-direction: column; }
.rec-ledger__scroll { overflow-y: auto; max-height: calc(100dvh - var(--rec-chrome)); overscroll-behavior: contain; }
.rec-ledger__scroll .rec-table thead th { top: 0; }
.rec-filters__search { position: relative; flex: 1 1 15rem; min-width: 12rem; max-width: 22rem; }
.rec-filters__search .field__control { padding-left: 2rem; height: 2.1rem; padding-block: 0; font-size: 0.875rem; }
.rec-filters__searchic {
  position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%);
  width: 0.9rem; height: 0.9rem; color: var(--hs-ink-faint); pointer-events: none;
}
.rec-select {
  height: 2.1rem; padding: 0 1.6rem 0 0.6rem; border-radius: 7px;
  border: 1px solid var(--hs-line-strong); background: #fff;
  color: var(--hs-ink); font: inherit; font-size: 0.85rem; font-weight: 600;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6880' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.4rem center; background-size: 0.85rem;
}
.rec-select--quiet { border-color: var(--hs-line); color: var(--hs-ink-soft); font-weight: 500; }
.rec-filters__spacer { flex: 1; }
/* `More filters` takes its own line under the bar rather than an eighth slot in
   it. §8.1 asks for a created-date filter and the bar is already seven controls
   wide, so the one nobody reaches for daily is the one that folds away; open, its
   contents are a row and not the stack `.rec-expand__lines` uses inside a cell. */
.rec-filters__more { flex: 1 0 100%; }
.rec-filters__more .rec-expand__lines { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.rec-filters__count {
  font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-faint);
  white-space: nowrap;
}
.rec-filters__applied {
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
  padding: 0.5rem 1rem; border-bottom: 1px solid var(--hs-line);
  background: #fbfaf8; font-size: 0.8rem;
}
.rec-appliedchip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.14rem 0.3rem 0.14rem 0.5rem; border-radius: var(--ub-radius-pill);
  background: var(--hs-active); border: 1px solid var(--hs-gold-border);
  font-size: 0.78rem; font-weight: 600; color: var(--rec-age-ink);
}
.rec-appliedchip button {
  border: 0; background: none; cursor: pointer; padding: 0 0.1rem;
  color: inherit; font: inherit; line-height: 1;
}
.rec-filters__clear {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 600;
  color: var(--hs-ink-soft); text-decoration: underline;
}

/* -- The table language every later table reuses --------------------------- */

.rec-tablewrap { overflow-x: auto; }
.rec-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.rec-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: #fbfaf8; border-bottom: 1px solid var(--hs-line-strong);
  padding: 0.5rem 0.6rem; text-align: left; white-space: nowrap;
  font-family: var(--ub-font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-table--underbar thead th { top: 158px; }
.rec-table tbody td {
  padding: 0.42rem 0.6rem; border-bottom: 1px solid #f2efe9; vertical-align: middle;
}
.rec-table tbody tr:hover { background: #fbfaf8; }
.rec-table tbody tr:last-child td { border-bottom: 0; }
.rec-table__sort {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
  color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.rec-table__sort--on { color: var(--hs-gold); }
.rec-table__sort svg { width: 0.7rem; height: 0.7rem; }
.rec-table__c--num { text-align: right; font-family: var(--ub-font-mono); }
/* The header follows its own column. `.rec-table thead th` is (0,1,2) and
   this class alone is (0,1,0), so a `--num` th was styled left however it
   was marked up: boards 03, 17, 21, 22, 33b, 33c and 33d already asked for
   this and got nothing. CONTRACT §4. */
.rec-table thead th.rec-table__c--num { text-align: right; }
.rec-table__c--tight { width: 1%; white-space: nowrap; }
.rec-table__c--check { width: 1%; padding-right: 0; }
.rec-table__c--actions { width: 1%; white-space: nowrap; text-align: right; }
/* The job cell is a row, so `+N more` sits beside the application rather than
   under it. The palette makes `.rec-applink` `display: flex` — block-level — so
   a `<details>` after it always started a new line and a candidate with several
   applications got a 58px row among 46px ones. Laying the cell out as a flex
   line puts them side by side, the link shrinking and the disclosure fixed, and
   every collapsed row measures the same. Opening it still drops the other
   applications below, inside the row. CONTRACT §4.
   The line is a wrapper inside the cell, never the cell itself: a `td` that is
   `display: flex` leaves the table, sits in an anonymous cell as tall as its
   content, and draws its separator 6–12px above every other cell's on 07 and
   08 (V9). The link shrinks but never grows: grown, it pushed the disclosure
   to the column's far edge, 106px from the name at 1440 and 414px at 1024.
   Open, the disclosure takes a line of its own: beside the link it was as wide
   as its longest line, ran 25px into Stage at 1440 and squeezed the link to
   0px (V23). Only when open, or a long title would push a closed +N more
   under it. */
.rec-table__jobline { display: flex; align-items: baseline; gap: 0.4rem; }
.rec-table__jobline > .rec-applink { flex: 0 1 auto; min-width: 0; }
.rec-table__jobline > .rec-expand { flex: none; }
.rec-table__jobline:has(> .rec-expand[open]) { flex-wrap: wrap; row-gap: 0.25rem; }
.rec-table__jobline > .rec-expand[open] { flex: 0 0 100%; min-width: 0; }
.rec-table tbody tr.rec-row--selected { background: var(--hs-active); }

/* Identity cell. The name is the ONE link to the hub; nothing else in the row
   routes there (see the routing rule in the screen map). */
.rec-who { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.rec-who__avatar {
  width: 1.55rem; height: 1.55rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--hs-hover); color: var(--hs-ink-soft);
  font-size: 0.66rem; font-weight: 700;
}
.rec-who__id { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.rec-who__name {
  font-weight: 600; color: var(--hs-ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15rem;
}
.rec-who__name:hover { text-decoration: underline; text-decoration-color: var(--hs-gold); }
.rec-who__sub {
  font-size: 0.75rem; color: var(--hs-ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 15rem;
}

/* Application link. Visibly a different target from the name: mono, gold rule. */
.rec-applink {
  display: inline-flex; align-items: baseline; gap: 0.35rem;
  font-size: 0.8rem; color: var(--hs-ink-soft); text-decoration: none;
}
/* The dotted affordance is drawn on the text, not on the box. The palette makes
   this link `display: flex` inside a table so the job name has a width to
   ellipsise against, and a `border-bottom` then spans the whole column: the
   interview log ran a dotted line 111px past a 111px label, twice the width of
   the words above it. A border cannot know where text ends, and `fit-content`
   cannot help a flex box that wraps — it resolves to max-content while each
   line is shorter. CONTRACT §4.

   On the children and not on `.rec-applink`, because a decoration does not
   propagate into flex items: set on the anchor it computes `underline` there
   and `none` on every one of them, drawing nothing. Both parts carry it, which
   is what an `<a>` does with text that wraps. */
.rec-applink__job,
.rec-applink__stage {
  text-decoration: underline dotted var(--hs-gold-border); text-underline-offset: 3px;
}
.rec-applink:hover { color: var(--hs-ink); }
.rec-applink:hover .rec-applink__job,
.rec-applink:hover .rec-applink__stage { text-decoration-style: solid; text-decoration-color: var(--hs-gold); }
.rec-applink__job { font-weight: 600; color: var(--hs-ink); }
.rec-applink__stage { font-family: var(--ub-font-mono); font-size: 0.72rem; }

/* -- Small data objects ---------------------------------------------------- */

.rec-tags { display: flex; align-items: center; gap: 0.25rem; flex-wrap: nowrap; overflow: hidden; }
/* The count is the one thing that must survive the clip. `.rec-tags` hides its
   overflow, and the remainder chip is last, so on a row with two long tags the
   `+3` sat 37px past the right edge — invisible exactly when it had something to
   say. The tags shrink and ellipsise inside their own chips; the chip that says
   how many are missing does not. CONTRACT §4. */
.rec-tags .rec-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rec-tags .rec-tag--more { flex: none; overflow: visible; }
.rec-tag {
  /* `gap` because this chip composes: the tag editor puts a `.rec-swatch`
     inside it, and with no gap the 14px square sat flush against the first
     letter. It applies only between items, so a chip that is text alone —
     every one outside the settings pane — is unchanged. CONTRACT §4. */
  display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.08rem 0.4rem;
  border-radius: 4px; border: 1px solid var(--hs-line-strong); background: #fbfaf8;
  font-family: var(--ub-font-mono); font-size: 0.68rem; color: var(--hs-ink-soft);
  white-space: nowrap;
}
.rec-tag--more { border-style: dashed; color: var(--hs-ink-faint); }
.rec-source {
  font-size: 0.78rem; color: var(--hs-ink-soft); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 0.3rem;
}
.rec-source__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--hs-line-strong); flex: none; }
.rec-source--referral .rec-source__dot { background: var(--hs-gold); }
.rec-source--sourced .rec-source__dot { background: #6a63b8; }
.rec-source--pool .rec-source__dot { background: #2f8f57; }
.rec-source--transfer .rec-source__dot { background: #49338d; }
.rec-source__by { color: var(--hs-ink-faint); }

/* Days waiting. Neglect is AGE, not error — never red. The scale runs through
   the gold tint, and the only strong signal is a left tick on the oldest band. */
.rec-days {
  display: inline-block; min-width: 2.6rem; padding: 0.1rem 0.4rem;
  border-radius: 4px; text-align: right;
  font-family: var(--ub-font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums;
  color: var(--hs-ink-soft);
}
.rec-days--warm { background: var(--rec-age-warm); color: var(--rec-age-ink); }
.rec-days--hot {
  background: var(--rec-age-hot); color: var(--rec-age-ink); font-weight: 700;
  box-shadow: inset 2px 0 0 var(--hs-gold);
}
.rec-dur { font-family: var(--ub-font-mono); font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--hs-ink-soft); }
.rec-dur__key {
  display: block; font-family: var(--ub-font); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-ink-faint);
}

.rec-pill {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.1rem 0.45rem; border-radius: var(--ub-radius-pill);
  border: 1px solid var(--hs-line-strong); background: #fff;
  font-size: 0.75rem; font-weight: 600; color: var(--hs-ink-soft); white-space: nowrap;
}
.rec-pill--open { border-color: color-mix(in srgb, var(--ub-ok) 40%, transparent); color: #256e43; background: color-mix(in srgb, var(--ub-ok) 8%, #fff); }
.rec-pill--paused { border-color: var(--hs-gold-border); color: var(--rec-age-ink); background: var(--hs-active); }
.rec-pill--archived { border-style: dashed; color: var(--hs-ink-faint); }
.rec-pill--readonly { border-color: var(--hs-line-strong); color: var(--hs-ink-soft); background: #f6f5f2; }
.rec-pill--hired { border-color: color-mix(in srgb, var(--ub-ok) 40%, transparent); color: #256e43; }
.rec-pill--rejected { border-color: color-mix(in srgb, var(--ub-danger) 32%, transparent); color: var(--ub-danger); }
.rec-pill--transferred { border-color: color-mix(in srgb, var(--ub-primary) 32%, transparent); color: var(--ub-primary); }
.rec-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

/* Stalled marker. REVISION-04 §4.27, amended 2026-10-01:
   `STALLED_IDLE_DAYS = 7` (recruiting/services.py) — seven days without activity
   on ACTIVE applications in a POST-SCREENING stage. Activity is the latest
   current-stage event, interview creation, held interview's scheduled time or
   feedback submission, falling back to applied_at. Any scheduled interview
   still ahead prevents a stall. Never age from updated_at.

   Screening was included until 2026-09-03 and no longer is (CONTRACT.md §6, plan
   §11.1): a Screening row has no owner, and a full ledger is measured as intake,
   so calling those rows stalled attributes a failure to nobody. Screening keeps
   its own days-waiting and its separate warm-from-18 band. Stage residence and
   idle time are independent; the tile and column share the idle rule. */
.rec-stalled {
  display: inline-flex; align-items: center; gap: 0.28rem;
  font-family: var(--ub-font-mono); font-size: 0.66rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--rec-age-ink);
}
.rec-stalled__tick { width: 3px; height: 0.8rem; background: var(--hs-gold); border-radius: 2px; flex: none; }

/* -- Row actions: rapid outcomes, keyboard-reachable ---------------------- */

.rec-rowacts { display: inline-flex; align-items: center; gap: 0.15rem; }
.rec-iconbtn {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border: 1px solid transparent; border-radius: 6px; background: none;
  color: var(--hs-ink-faint); cursor: pointer;
}
.rec-iconbtn:hover { background: var(--hs-hover); color: var(--hs-ink); border-color: var(--hs-line); }
.rec-iconbtn svg { width: 0.95rem; height: 0.95rem; }
.rec-iconbtn--reject:hover { color: var(--ub-danger); border-color: color-mix(in srgb, var(--ub-danger) 35%, transparent); }
.rec-iconbtn--advance:hover { color: #256e43; border-color: color-mix(in srgb, var(--ub-ok) 40%, transparent); }
.rec-textbtn {
  border: 1px solid var(--hs-line-strong); border-radius: 6px; background: #fff;
  padding: 0.15rem 0.45rem; font: inherit; font-size: 0.76rem; font-weight: 600;
  color: var(--hs-ink-soft); cursor: pointer; white-space: nowrap;
}
.rec-textbtn:hover { border-color: var(--hs-gold); color: var(--hs-ink); }
.rec-textbtn--danger:hover { border-color: color-mix(in srgb, var(--ub-danger) 45%, transparent); color: var(--ub-danger); }
/* A row control whose surface has not shipped yet — 33c's Merge and Retire.
   Without this a disabled `rec-textbtn` is pixel-identical to a live one, down
   to the pointer cursor, and the screen makes exactly the promise disabling it
   was meant to withdraw. After the hover rule on purpose: equal specificity, so
   this wins in both states and a disabled button does not gild under the mouse. */
.rec-textbtn:disabled, .rec-textbtn:disabled:hover {
  border-color: var(--hs-line); color: var(--hs-ink-faint); cursor: default;
}

/* -- Bulk selection footer: appears on first selection -------------------- */

.rec-bulkbar {
  position: sticky; bottom: 0; z-index: 3;
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.6rem 1rem; background: var(--hs-ink); color: #fff;
  border-top: 1px solid var(--hs-ink);
}
.rec-bulkbar__count { font-weight: 700; font-size: 0.875rem; }
.rec-bulkbar__spacer { flex: 1; }
.rec-bulkbar .rec-textbtn {
  background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.28); color: #fff;
}
.rec-bulkbar .rec-textbtn:hover { background: rgba(255, 255, 255, 0.16); border-color: #fff; }
.rec-bulkbar__link { color: #e6dfc7; font-size: 0.8rem; }

.rec-confirm {
  border: 1px solid var(--hs-gold-border); border-radius: var(--ub-radius);
  background: var(--hs-active); padding: 0.9rem 1rem; margin: 0 1rem 1rem;
}
.rec-confirm__title { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 700; }
.rec-confirm__body { margin: 0; font-size: 0.83rem; color: var(--hs-ink-soft); }
.rec-confirm__list {
  margin: 0.5rem 0 0.75rem; padding-left: 1.1rem;
  font-size: 0.82rem; color: var(--hs-ink-soft);
}
.rec-confirm__acts { display: flex; gap: 0.5rem; margin-top: 0.6rem; }

/* -- Empty, filtered-empty, loading, denied ------------------------------- */

.rec-state { padding: 3rem 1.5rem; text-align: center; }
.rec-state__mark {
  width: 2.4rem; height: 2.4rem; margin: 0 auto 0.85rem; border-radius: 8px;
  display: grid; place-items: center;
  border: 1px solid var(--hs-line-strong); background: #fbfaf8; color: var(--hs-ink-faint);
}
.rec-state__mark svg { width: 1.2rem; height: 1.2rem; }
.rec-state__title {
  margin: 0 0 0.4rem; font-family: var(--ub-font-display); font-weight: 700;
  font-size: 1.15rem; letter-spacing: -0.01em;
}
.rec-state__body { margin: 0 auto; max-width: 30rem; font-size: 0.88rem; color: var(--hs-ink-soft); }
.rec-state__acts { display: flex; gap: 0.5rem; justify-content: center; margin-top: 1rem; }
.rec-state--denied .rec-state__mark {
  border-color: color-mix(in srgb, var(--ub-danger) 32%, transparent);
  background: color-mix(in srgb, var(--ub-danger) 6%, #fff);
  color: var(--ub-danger);
}
.rec-state__code {
  display: inline-block; margin-top: 0.9rem; padding: 0.2rem 0.5rem;
  border-radius: 4px; background: #f6f5f2; border: 1px solid var(--hs-line);
  font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-soft);
}

.rec-skel {
  height: 0.72rem; border-radius: 3px;
  background: linear-gradient(90deg, #f1eee8 25%, #e7e3db 50%, #f1eee8 75%);
  background-size: 280% 100%;
  animation: rec-shimmer 1.3s linear infinite;
}
@keyframes rec-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .rec-skel { animation: none; } }
.rec-skel--avatar { width: 1.55rem; height: 1.55rem; border-radius: 50%; }
.rec-skel--w6 { width: 6rem; } .rec-skel--w8 { width: 8rem; } .rec-skel--w10 { width: 10rem; }
.rec-skel--w3 { width: 3rem; } .rec-skel--w4 { width: 4rem; } .rec-skel--w12 { width: 12rem; }
.rec-loadingnote {
  display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  padding: 0.7rem; font-size: 0.8rem; color: var(--hs-ink-faint);
  border-top: 1px solid var(--hs-line);
}
.rec-spinner {
  width: 0.9rem; height: 0.9rem; border-radius: 50%;
  border: 2px solid var(--hs-line-strong); border-top-color: var(--hs-gold);
  animation: rec-spin 0.8s linear infinite;
}
@keyframes rec-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .rec-spinner { animation: none; } }

/* -- Expandable row (§8.3 compact summary): <details>, no JavaScript ------- */

.rec-expand { display: block; }
.rec-expand > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.75rem; font-weight: 600; color: var(--hs-ink-soft);
  border: 1px dashed var(--hs-line-strong); border-radius: 4px; padding: 0.05rem 0.35rem;
}
.rec-expand > summary::-webkit-details-marker { display: none; }
.rec-expand > summary:hover { color: var(--hs-ink); border-color: var(--hs-gold); }
.rec-expand[open] > summary { border-style: solid; }
.rec-expand__lines { display: flex; flex-direction: column; gap: 0.25rem; margin-top: 0.35rem; }

/* -- Kanban --------------------------------------------------------------- */

.rec-board { display: flex; gap: 0.75rem; align-items: flex-start; overflow-x: auto; padding-bottom: 0.5rem; }
.rec-board__col {
  flex: 1 0 244px; min-width: 244px; max-width: 320px;
  background: #fbfaf8; border: 1px solid var(--hs-line); border-radius: var(--ub-radius);
  display: flex; flex-direction: column; max-height: 620px;
}
.rec-board__head {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--hs-line);
}
.rec-board__pos {
  font-family: var(--ub-font-mono); font-size: 0.6rem; color: var(--hs-ink-faint);
}
.rec-board__name { font-size: 0.82rem; font-weight: 700; letter-spacing: -0.01em; }
.rec-board__n {
  margin-left: auto; font-family: var(--ub-font-mono); font-size: 0.68rem;
  color: var(--hs-ink-soft); background: #fff; border: 1px solid var(--hs-line);
  border-radius: var(--ub-radius-pill); padding: 0.02rem 0.35rem;
}
.rec-board__cards { padding: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; overflow-y: auto; }
.rec-board__empty {
  padding: 1.1rem 0.7rem; text-align: center; font-size: 0.78rem;
  color: var(--hs-ink-faint); border: 1px dashed var(--hs-line-strong);
  border-radius: 8px; margin: 0.5rem;
}
.rec-card {
  background: #fff; border: 1px solid var(--hs-line); border-radius: 10px;
  padding: 0.55rem 0.6rem; display: flex; flex-direction: column; gap: 0.4rem;
}
.rec-card:hover { border-color: var(--hs-line-strong); }
.rec-card--stalled { box-shadow: inset 3px 0 0 var(--hs-gold); }
.rec-card__top { display: flex; align-items: flex-start; gap: 0.45rem; }
.rec-card__grab {
  margin-left: auto; display: inline-grid; place-items: center;
  width: 1.3rem; height: 1.3rem; border: 0; background: none; cursor: grab;
  color: var(--hs-line-strong); flex: none;
}
.rec-card__grab:hover { color: var(--hs-ink-faint); }
.rec-card__grab svg { width: 0.85rem; height: 0.85rem; }
.rec-card__job {
  font-size: 0.72rem; color: var(--hs-ink-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-card__meta { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; font-size: 0.72rem; color: var(--hs-ink-soft); }
.rec-card__foot { display: flex; align-items: center; gap: 0.35rem; padding-top: 0.35rem; border-top: 1px solid #f2efe9; }
.rec-card__move {
  flex: 1; height: 1.6rem; padding: 0 1.3rem 0 0.4rem; border-radius: 6px;
  border: 1px solid var(--hs-line-strong); background: #fff; font: inherit;
  font-size: 0.72rem; font-weight: 600; color: var(--hs-ink-soft); appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d6880' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.3rem center; background-size: 0.75rem;
}
.rec-card__pending {
  /* A box, not an inline run. It declared no `display`, so it fell back to
     `inline` and its background and border broke into one fragment per line
     the moment the text wrapped — the interview log's *0 of 3 · owed by you*
     rendered as two ragged pieces. `.rec-pill` beside it has always been
     `inline-flex`. No `nowrap` to go with it, unlike that pill: the design puts
     *1 of 2 · Yuki Tanaka owes* in this chip, which no column here can hold on
     one line, so it has to wrap inside its own box. CONTRACT §4. */
  display: inline-flex; align-items: center;
  font-family: var(--ub-font-mono); font-size: 0.64rem; letter-spacing: 0.04em;
  color: var(--rec-age-ink); background: var(--hs-active);
  border: 1px solid var(--hs-gold-border); border-radius: 4px; padding: 0.05rem 0.3rem;
}

/* Read-only board: the cross-job one. No grab handle, no move select, and the
   surface says so once at the top rather than disabling controls it never drew. */
.rec-board--readonly .rec-card { cursor: default; }
/* Neutral informational strip. `--readonly` is the cross-job board's variant of
   the same object; the base is used wherever a screen has to state a rule once
   rather than repeat it on every row. */
.rec-strip,
.rec-readonly-note {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.8rem; margin-bottom: 0.9rem;
  border: 1px solid var(--hs-line-strong); border-left: 3px solid var(--hs-gold);
  border-radius: 6px; background: #fbfaf8;
  font-size: 0.82rem; color: var(--hs-ink-soft);
}
.rec-strip svg,
.rec-readonly-note svg { width: 1rem; height: 1rem; flex: none; color: var(--hs-gold); }
.rec-strip strong, .rec-readonly-note strong { color: var(--hs-ink); }

/* -- Decision drawer (§8.2): compact, addressable, never nests ------------- */

.rec-scrim { position: fixed; inset: 56px 0 0; background: rgba(26, 19, 48, 0.28); z-index: 40; }
.rec-drawer {
  position: fixed; top: 56px; right: 0; bottom: 0; z-index: 41;
  width: 468px; display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--hs-line-strong);
  box-shadow: -18px 0 48px -28px rgba(26, 19, 48, 0.45);
}
.rec-drawer:focus-visible { outline: 2px solid var(--hs-gold); outline-offset: -2px; }
.rec-drawer__bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 0.75rem 0.55rem 1rem; border-bottom: 1px solid var(--hs-line);
}
.rec-drawer__kind {
  font-family: var(--ub-font-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hs-gold);
}
.rec-drawer__url {
  font-family: var(--ub-font-mono); font-size: 0.68rem; color: var(--hs-ink-faint);
  background: #f6f5f2; border: 1px solid var(--hs-line); border-radius: 4px; padding: 0.05rem 0.3rem;
}
.rec-drawer__nav { margin-left: 0; display: inline-flex; align-items: center; gap: 0.45rem; }
.rec-drawer__navslot { display: inline-flex; }
.rec-drawer__pos { font-size: 0.72rem; color: var(--hs-ink-faint); white-space: nowrap; }
.rec-drawer__nav .rec-textbtn { font-size: 0.72rem; }
.rec-drawer__nav button:disabled { color: var(--hs-ink-faint); cursor: not-allowed; text-decoration: none; }
.rec-drawer__close {
  margin-left: auto; display: inline-grid; place-items: center;
  width: 1.8rem; height: 1.8rem; border: 1px solid var(--hs-line);
  border-radius: 6px; background: #fff; color: var(--hs-ink-soft); cursor: pointer;
}
.rec-drawer__close:hover { border-color: var(--hs-gold); color: var(--hs-ink); }
.rec-drawer__close svg { width: 0.9rem; height: 0.9rem; }
/* 10f, the job screens' tabbed drawer (V1 readiness V11): the page link and
   Close share the bar's right edge, a closed application's pill sits under
   the job line, and the tabs are the job tabs' own underline, flush. */
.rec-drawer__exits { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; }
.rec-drawer__exits .rec-drawer__close { margin-left: 0; }
.rec-drawer__status { display: flex; margin-top: 0.45rem; }
.rec-drawer__tabs { margin: 0; padding: 0 0.75rem; border-bottom: 1px solid var(--hs-line); }
.rec-drawer__head { padding: 0.9rem 1rem 0.85rem; border-bottom: 1px solid var(--hs-line); }
.rec-drawer__name {
  margin: 0; font-family: var(--ub-font-display); font-weight: 700;
  font-size: 1.3rem; line-height: 1.15; letter-spacing: -0.015em;
}
.rec-drawer__name a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--hs-gold-border); }
.rec-drawer__name a:hover { border-bottom-color: var(--hs-gold); }
.rec-drawer__namehint { display: block; margin-top: 0.3rem; font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-drawer__jobline { margin: 0.5rem 0 0; font-size: 0.82rem; color: var(--hs-ink-soft); }
.rec-drawer__primary { display: flex; gap: 0.4rem; padding: 0.7rem 1rem; border-bottom: 1px solid var(--hs-line); background: #fbfaf8; }
.rec-drawer__body { flex: 1; overflow-y: auto; padding: 0.9rem 1rem 1.2rem; }
.rec-drawer__foot {
  padding: 0.75rem 1rem; border-top: 1px solid var(--hs-line); background: #fbfaf8;
  display: flex; flex-direction: column; gap: 0.5rem;
}
.rec-drawer__outcomes { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.rec-drawer__advance { display: flex; gap: 0.4rem; }
.rec-drawer__advance .rec-select { flex: 1; min-width: 0; }

@media (min-width: 1280px) {
  .home-shell:has(#rec-drawer-region .rec-drawer) .rec-scrim { display: none; }
}

@media (max-width: 600px) {
  .rec-drawer__url { display: none; }
}

.rec-dl { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.45rem 0.75rem; margin: 0; font-size: 0.84rem; }
.rec-dl dt {
  font-family: var(--ub-font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--hs-ink-faint); padding-top: 0.15rem;
}
.rec-dl dd { margin: 0; color: var(--hs-ink); min-width: 0; }
.rec-dl a { color: var(--hs-ink); }
.rec-clock { display: flex; gap: 0.6rem; margin: 0 0 0.9rem; }
.rec-clock__cell {
  flex: 1; border: 1px solid var(--hs-line); border-radius: 8px;
  padding: 0.5rem 0.6rem; background: #fbfaf8;
}
.rec-clock__k {
  display: block; font-family: var(--ub-font-mono); font-size: 0.58rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-clock__v { font-family: var(--ub-font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; }
.rec-quote {
  margin: 0.9rem 0 0; padding: 0.6rem 0.75rem;
  border: 1px solid var(--hs-line); border-left: 3px solid var(--hs-gold);
  border-radius: 6px; background: #fbfaf8;
  font-size: 0.83rem; color: var(--hs-ink-soft);
}
.rec-quote__by { display: block; margin-top: 0.4rem; font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-subhead {
  margin: 1.1rem 0 0.45rem; font-family: var(--ub-font-mono); font-size: 0.6rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-warn {
  margin: 0.6rem 0 0; padding: 0.55rem 0.7rem;
  border: 1px solid var(--hs-gold-border); border-radius: 6px; background: var(--hs-active);
  font-size: 0.8rem; color: var(--rec-age-ink);
}

/* -- Record surfaces (hub, application) ----------------------------------- */

.rec-idcard {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.1rem 1.25rem; background: var(--hs-surface);
  border: 1px solid var(--hs-line); border-radius: var(--ub-radius); margin-bottom: 1.25rem;
}
.rec-idcard__avatar {
  width: 3.2rem; height: 3.2rem; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  background: var(--hs-hover); color: var(--hs-ink-soft);
  font-family: var(--ub-font-display); font-weight: 700; font-size: 1.15rem;
}
.rec-idcard__main { min-width: 0; flex: 1; }
.rec-idcard__name {
  margin: 0; font-family: var(--ub-font-display); font-weight: 700;
  font-size: 1.65rem; line-height: 1.1; letter-spacing: -0.02em;
}
.rec-idcard__contact {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--hs-ink-soft);
}
.rec-idcard__contact a { color: var(--hs-ink-soft); }
.rec-idcard__sep { width: 1px; height: 0.85rem; background: var(--hs-line-strong); }
.rec-idcard__acts { display: flex; flex-wrap: wrap; gap: 0.4rem; flex: none; max-width: 20rem; justify-content: flex-end; }

.rec-timeline { list-style: none; margin: 0; padding: 0; }
.rec-timeline li {
  position: relative; padding: 0 0 0.9rem 1.25rem;
  border-left: 1px solid var(--hs-line); margin-left: 0.35rem;
}
.rec-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.rec-timeline li::before {
  content: ""; position: absolute; left: -4.5px; top: 0.42rem;
  width: 8px; height: 8px; border-radius: 50%;
  background: #fff; border: 2px solid var(--hs-line-strong);
}
.rec-timeline li.rec-timeline__now::before { border-color: var(--hs-gold); background: var(--hs-gold); }
.rec-timeline__head { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.rec-timeline__stage { font-size: 0.875rem; font-weight: 700; }
.rec-timeline__when { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-timeline__dur { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-soft); }
.rec-timeline__by { margin: 0.15rem 0 0; font-size: 0.78rem; color: var(--hs-ink-faint); }

/* Feedback groups under their INTERVIEW, never under the stage (§7.4). */
.rec-interview {
  border: 1px solid var(--hs-line); border-radius: 10px; margin-bottom: 0.75rem; overflow: hidden;
}
.rec-interview__head {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0.6rem 0.8rem; background: #fbfaf8; border-bottom: 1px solid var(--hs-line);
}
.rec-interview__title { margin: 0; font-size: 0.875rem; font-weight: 700; }
.rec-interview__when { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-interview__body { padding: 0.7rem 0.8rem; display: flex; flex-direction: column; gap: 0.7rem; }
/* The acts §14.26 decision 11 puts on each interview, in the package's own
   `__acts` shape: flex, centred, wrapped, a small gap and a little air above,
   as `.rec-form__acts` and `.rec-idcard__acts` already are. No border — no
   other act strip here has one, and `.rec-interview__body` is already a column
   with a 0.7rem gap.

   **Two rows on purpose.** `flex: 1 1 100%` breaks the panel form onto its own
   line: the three addresses are about the conversation, the form under them is
   about who is on it, and side by side the picker pushed the addresses off the
   end.

   The bare `<span>` is one interviewer. It carries no class because
   `reads_in_order` cannot collapse an alternating pair, so the name and its
   Remove have to be a single element; `inline-flex` is what keeps them one.

   `.picker__input` is `width: 100%` with 0.62rem padding by default — a full
   search box beside 0.76rem text buttons, taking a line to itself. Scoped
   here, so no other picker moves. */
.rec-interview__acts {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  padding-top: 0.35rem;
}
.rec-interview__acts > form {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  flex: 1 1 100%; margin: 0;
}
.rec-interview__acts form > span { display: inline-flex; align-items: center; gap: 0.3rem; }
.rec-interview__acts .picker { flex: 0 1 15rem; }
.rec-interview__acts .picker__input { padding: 0.2rem 0.5rem; font-size: 0.76rem; }
/* `.rec-who__name` sets no size, so it inherits the panel body's — right in a
   table row, twice the height of a `.rec-textbtn` in a control strip, where it
   read as the row's heading rather than as the label on a Remove. 11rem because
   a truncated address beside its own button says enough. */
.rec-interview__acts .rec-who__name { font-size: 0.76rem; max-width: 11rem; }
.rec-feedback { border-left: 2px solid var(--hs-line-strong); padding-left: 0.7rem; }
.rec-feedback__who { display: flex; align-items: center; gap: 0.45rem; font-size: 0.82rem; font-weight: 600; }
.rec-feedback__rec {
  font-family: var(--ub-font-mono); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 0.05rem 0.35rem; border-radius: 4px;
  border: 1px solid var(--hs-line-strong); color: var(--hs-ink-soft);
}
.rec-feedback__rec--yes { color: #256e43; border-color: color-mix(in srgb, var(--ub-ok) 40%, transparent); }
.rec-feedback__rec--no { color: var(--ub-danger); border-color: color-mix(in srgb, var(--ub-danger) 32%, transparent); }
.rec-answers { margin: 0.45rem 0 0; display: flex; flex-direction: column; gap: 0.4rem; }
.rec-answer__q { font-size: 0.78rem; font-weight: 600; color: var(--hs-ink-soft); }
.rec-answer__a { font-size: 0.82rem; color: var(--hs-ink); }
.rec-rating { display: inline-flex; gap: 2px; vertical-align: middle; margin-left: 0.3rem; }
.rec-rating i { width: 6px; height: 11px; border-radius: 1px; background: var(--hs-line-strong); display: block; }
.rec-rating i.on { background: var(--hs-gold); }
.rec-await {
  padding: 0.5rem 0.7rem; border: 1px dashed var(--hs-line-strong); border-radius: 6px;
  font-size: 0.8rem; color: var(--hs-ink-faint);
}

.rec-note {
  border: 1px solid var(--hs-line); border-radius: 8px; padding: 0.6rem 0.75rem;
  margin-bottom: 0.6rem; font-size: 0.84rem; color: var(--hs-ink);
}
.rec-note__by { margin: 0.4rem 0 0; font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-note__lock {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-family: var(--ub-font-mono); font-size: 0.62rem; color: var(--hs-ink-faint);
}
.rec-note__lock svg { width: 0.7rem; height: 0.7rem; }

/* Read-only past record: visibly not editable. */
.rec-closed { background: #fbfaf8; }
.rec-closed .rec-idcard, .rec-closed .rec-panel { background: #fbfaf8; }
.rec-closedbar {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.6rem 0.9rem; margin-bottom: 1.25rem;
  border: 1px solid var(--hs-line-strong); border-radius: 8px;
  background: repeating-linear-gradient(135deg, #f6f5f2 0 8px, #f2efe9 8px 16px);
  font-size: 0.84rem; color: var(--hs-ink-soft);
}

/* -- Overview-specific ---------------------------------------------------- */

.rec-list { list-style: none; margin: 0; padding: 0; }
.rec-list > li { padding: 0.6rem 1rem; border-bottom: 1px solid #f2efe9; display: flex; align-items: center; gap: 0.6rem; }
.rec-list > li:last-child { border-bottom: 0; }
.rec-list__main { min-width: 0; flex: 1; }
.rec-list__title { font-size: 0.875rem; font-weight: 600; display: block; }
.rec-list__title a { color: inherit; text-decoration: none; }
.rec-list__title a:hover { text-decoration: underline; text-decoration-color: var(--hs-gold); }
.rec-list__sub { font-size: 0.78rem; color: var(--hs-ink-faint); }
.rec-list__aside { flex: none; text-align: right; }

.rec-seats { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rec-seat {
  width: 1.5rem; height: 1.5rem; border-radius: 5px; display: grid; place-items: center;
  font-family: var(--ub-font-mono); font-size: 0.62rem; border: 1px solid var(--hs-line-strong);
  background: #fff; color: var(--hs-ink-faint);
}
.rec-seat--filled { background: color-mix(in srgb, var(--ub-ok) 16%, #fff); border-color: color-mix(in srgb, var(--ub-ok) 40%, transparent); color: #256e43; }
.rec-seat--vacant { background: var(--hs-active); border-color: var(--hs-gold-border); color: var(--rec-age-ink); }
.rec-seat--canceled { border-style: dashed; color: var(--hs-ink-faint); text-decoration: line-through; }

.rec-legend { display: flex; gap: 0.85rem; flex-wrap: wrap; font-size: 0.76rem; color: var(--hs-ink-soft); }
.rec-legend span { display: inline-flex; align-items: center; gap: 0.3rem; }
.rec-legend i { width: 9px; height: 9px; border-radius: 3px; border: 1px solid var(--hs-line-strong); display: block; }

/* -- 1024×768: the repo's narrow viewport (tests/e2e/harness/visual.py) ---- */

@media (max-width: 1100px) {
  /* The filter bar takes three lines here rather than two. */
  .rec-workspace { --rec-chrome: 492px; }
  .rec-stats--5, .rec-stats--4 { grid-template-columns: repeat(2, 1fr); }
  .rec-grid--2, .rec-grid--main-side, .rec-grid--side-main { grid-template-columns: minmax(0, 1fr); }
  .rec-page { padding-inline: 1rem; }
  .rec-drawer { width: min(468px, 100vw - 48px); }
  /* The ledger stops being a table and becomes a labelled stack: at 1024 the
     eleven columns cannot all be read, and a horizontal scrollbar hides the
     one column the screen exists for. Days waiting and the actions stay on the
     first line; source, tags and referrer drop under the name with their keys. */
  .rec-table--stack thead { display: none; }
  .rec-table--stack tbody tr { display: grid; grid-template-columns: auto 1fr auto; gap: 0.15rem 0.6rem; padding: 0.55rem 0.7rem; border-bottom: 1px solid #f2efe9; }
  /* The row is a grid here, and `width: 1%` — which makes those two cells
     shrink-to-fit in a table — makes them collapse in a grid area instead. At
     1024px the checkbox measured 0 and the actions 5, which is CONTRACT §8's
     check B failing eighteen times on one screen. */
  .rec-table--stack tbody td { display: block; padding: 0; border: 0; width: auto; }
  .rec-table--stack .rec-table__c--check { grid-row: 1 / span 3; align-self: start; padding-top: 0.2rem; }
  .rec-table--stack .rec-table__c--who { grid-column: 2; }
  .rec-table--stack .rec-table__c--days { grid-column: 3; grid-row: 1; text-align: right; }
  .rec-table--stack .rec-table__c--actions { grid-column: 3; grid-row: 2 / span 2; align-self: end; }
  .rec-table--stack .rec-table__c--fold { grid-column: 2; }
  .rec-table--stack .rec-key { display: inline; }
  .rec-board__col { flex: 0 0 232px; min-width: 232px; }

  /* Screens 07 and 08 stack too. CONTRACT §8's check C must return [] at every
     width, and their own `th` widths exceed a 742px workspace — the artboards
     failed their own contract there, which is an upstream design defect and not
     inherited behaviour to live with. Nothing is hidden: every column is still
     on the row, in the reading order the record wants.

     Each table names its own placement because the roles do not sit in the same
     place twice: `Job` leads a row on 08 and is the second line on 07. The
     shared switches above — hidden thead, block cells — are `--stack`, which
     every one of them also carries. */

  .rec-table--stackdir tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
  .rec-table--stackdir .rec-table__c--id { grid-column: 1; grid-row: 1; }
  .rec-table--stackdir .rec-table__c--created { grid-column: 2; grid-row: 1; text-align: right; }
  .rec-table--stackdir .rec-table__c--job { grid-column: 1; grid-row: 2; }
  .rec-table--stackdir .rec-table__c--stage { grid-column: 2; grid-row: 2; text-align: right; }
  .rec-table--stackdir .rec-table__c--owner { grid-column: 1 / span 2; grid-row: 3; }
  .rec-table--stackdir .rec-table__c--tags { grid-column: 1; grid-row: 4; }
  .rec-table--stackdir .rec-table__c--pools { grid-column: 2; grid-row: 4; text-align: right; }

  .rec-table--stackapp tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .rec-table--stackapp .rec-table__c--job { grid-column: 1 / span 2; grid-row: 1; }
  .rec-table--stackapp .rec-table__c--actions { grid-column: 3; grid-row: 1; text-align: right; }
  .rec-table--stackapp .rec-table__c--stage { grid-column: 1; grid-row: 2; }
  .rec-table--stackapp .rec-table__c--owner { grid-column: 2 / span 2; grid-row: 2; text-align: right; }
  .rec-table--stackapp .rec-table__c--source { grid-column: 1 / span 3; grid-row: 3; }
  .rec-table--stackapp .rec-table__c--days { grid-column: 1; grid-row: 4; text-align: left; }
  .rec-table--stackapp .rec-table__c--first { grid-column: 2; grid-row: 4; }
  .rec-table--stackapp .rec-table__c--dur { grid-column: 3; grid-row: 4; text-align: right; }

  .rec-table--stackpast tbody tr { grid-template-columns: minmax(0, 1fr) auto auto; }
  .rec-table--stackpast .rec-table__c--job { grid-column: 1 / span 2; grid-row: 1; }
  .rec-table--stackpast .rec-table__c--outcome { grid-column: 3; grid-row: 1; text-align: right; }
  .rec-table--stackpast .rec-table__c--stage { grid-column: 1; grid-row: 2; }
  .rec-table--stackpast .rec-table__c--owner { grid-column: 2 / span 2; grid-row: 2; text-align: right; }
  .rec-table--stackpast .rec-table__c--closed { grid-column: 1; grid-row: 3; }
  .rec-table--stackpast .rec-table__c--first { grid-column: 2; grid-row: 3; }
  .rec-table--stackpast .rec-table__c--dur { grid-column: 3; grid-row: 3; text-align: right; }
  .rec-table--stackpast .rec-table__c--actions { grid-column: 1 / span 3; grid-row: 4; text-align: left; }

  /* A stacked cell's own gap between its key and its value, and the wrap a tag
     list needs once it is one line of a four-line row rather than a column. */
  .rec-table--stack .rec-tags { flex-wrap: wrap; }
  .rec-table--stack .rec-source { flex-wrap: wrap; }
  /* The application link fills the whole grid track once its cell is a row of
     its own, and its dotted underline then reads as a rule drawn across the row
     rather than as a link. Held to the width of its own text. */
  .rec-table--stack .rec-applink { width: fit-content; max-width: 100%; }
}
.rec-key {
  display: none; font-family: var(--ub-font-mono); font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--hs-ink-faint);
  margin-right: 0.3rem;
}

/* CANVAS B — additive only. Load after recruiting.css, recruiting-color.css
   and recruiting-color-variations.css.

   Almost every rule here is a NEW class name for an object Canvas A did not
   draw: form controls, the interviewer's narrow page, the Settings rail, stage
   reordering, impact previews and the merge compare. Nothing invents a value —
   colours come from the `--hs-*` / `--pp-*` / `--ub-*` tokens already declared,
   radii and density from the sizes recruiting.css already uses (§14.1: CSS is
   additive, and a design class is never mapped onto an existing one).

   NOTHING here touches a class Canvas A owns. The one rule that did was a
   contrast correction on `.rec-panel__hint` and `.rec-dur__key`; it landed
   upstream in recruiting.css and recruiting-color.css on 2026-09-03, where it
   repairs Canvas A's twelve artboards too, and it was deleted from this file.

   PORT NOTE: the narrow-width block at the foot is @media here. The canvas copy
   states it as @container so each 1440px artboard answers to its own width; in
   Django the viewport IS the frame. Do not sync that rule in either direction —
   the same warning recruiting.css already carries at its top.

   Port target: static/css/recruiting.css, appended verbatim. */

/* -- The assigned interviewer's page --------------------------------------
   A recruiter screen is `.rec-page--wide` and fills 1440px. This one is a
   single measured column, and that is the first thing that tells the two
   shells apart before a single label is read. */

.rec-solo { padding: 1.9rem 1.75rem 0; }
.rec-solo__col { max-width: 47rem; margin: 0 auto; }
.rec-solo__scope {
  display: flex; align-items: flex-start; gap: 0.55rem;
  padding: 0.6rem 0.8rem; margin-bottom: 1.4rem;
  border: 1px solid var(--hs-line-strong); border-left: 3px solid var(--pp-mid);
  border-radius: 6px; background: #faf9fd;
  font-size: 0.82rem; line-height: 1.5; color: var(--hs-ink-soft);
}
.rec-solo__scope svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.12rem; color: var(--pp-mid); }
.rec-solo__scope strong { color: var(--hs-ink); }

/* -- Forms ----------------------------------------------------------------
   The feedback form is the only place in recruiting where a non-recruiter
   writes, so its controls are drawn once here and reused by every recruiter
   form (form editor, tag rename, stage create). */

.rec-form { display: flex; flex-direction: column; gap: 1rem; }
.rec-form__field { display: flex; flex-direction: column; gap: 0.3rem; }
.rec-form__label {
  font-family: var(--ub-font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-form__help { margin: 0; font-size: 0.78rem; line-height: 1.5; color: var(--hs-ink-faint); }
.rec-form__row { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.rec-form__row > .rec-form__field { flex: 1 1 12rem; min-width: 0; }
.rec-form__acts {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding-top: 0.35rem;
}
.rec-form__acts .rec-panel__spacer { flex: 1; }
.rec-input,
.rec-textarea {
  width: 100%; padding: 0.5rem 0.65rem; border-radius: 7px;
  border: 1px solid var(--hs-line-strong); background: #fff;
  color: var(--hs-ink); font: inherit; font-size: 0.875rem;
}
.rec-textarea { min-height: 4.5rem; resize: vertical; line-height: 1.55; }
.rec-input::placeholder, .rec-textarea::placeholder { color: var(--hs-ink-faint); }
.rec-input:disabled, .rec-textarea:disabled {
  background: #f6f5fa; color: var(--hs-ink-faint); cursor: default;
}

/* -- A question and its rating scale --------------------------------------
   Radio inputs, not a widget: every option is tabbable and the group is
   arrowable, which is the keyboard path the brief requires. The visible ring
   is the shell's one focus treatment, inherited. */

.rec-question {
  border: 1px solid var(--hs-line); border-radius: 10px;
  padding: 0.8rem 0.9rem; margin: 0;
}
.rec-question + .rec-question { margin-top: 0.7rem; }
.rec-question__prompt {
  display: block; padding: 0; margin-bottom: 0.55rem;
  font-size: 0.9rem; font-weight: 700; line-height: 1.4; letter-spacing: -0.005em;
}
.rec-question__n {
  font-family: var(--ub-font-mono); font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.14em; color: var(--pp-mid); margin-right: 0.45rem;
}
.rec-scale { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.rec-scale__opt {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.34rem 0.6rem; border-radius: 7px;
  border: 1px solid var(--hs-line-strong); background: #fff;
  font-size: 0.82rem; font-weight: 600; color: var(--hs-ink-soft); cursor: pointer;
}
.rec-scale__opt:hover { border-color: var(--pp-mid); color: var(--hs-ink); }
.rec-scale__opt input { margin: 0; accent-color: var(--pp-mid); }
.rec-scale__opt:has(input:checked) {
  border-color: var(--pp-mid); background: var(--pp-tint); color: var(--pp-ink);
}
.rec-scale__n { font-family: var(--ub-font-mono); font-size: 0.72rem; }
.rec-scale__hint {
  margin: 0.4rem 0 0; font-size: 0.74rem; color: var(--hs-ink-faint);
}
.rec-question__comment { margin-top: 0.6rem; }

/* The overall recommendation. Same object, wider options, and the two
   negative ones are not coloured — a recommendation is a judgement, not an
   error, and red here would read as a system refusal (Canvas A's rule). */
.rec-recs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.rec-recs .rec-scale__opt { flex: 1 1 8rem; justify-content: center; }

/* -- Settings: a rail of five --------------------------------------------
   Five sections under one tab. A second row of chrome tabs would be a third
   bar on a screen that already has a topbar and a section bar, so the rail is
   in-page and vertical instead. */

.rec-settings { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 1.25rem; }
.rec-rail {
  list-style: none; margin: 0; padding: 0.4rem;
  background: var(--hs-surface); border: 1px solid var(--pp-line);
  border-radius: var(--ub-radius); align-self: start; position: sticky; top: 116px;
}
.rec-rail__group {
  padding: 0.6rem 0.6rem 0.35rem;
  font-family: var(--ub-font-mono); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-rail__item {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding: 0.48rem 0.6rem; border-radius: 8px;
  color: var(--hs-ink-soft); text-decoration: none;
  font-size: 0.875rem; font-weight: 600;
}
.rec-rail__item:hover { background: var(--pp-tint); color: var(--pp-ink); }
.rec-rail__item--on {
  background: var(--pp-tint); color: var(--pp-ink);
  box-shadow: inset 2px 0 0 var(--pp-mid);
}
.rec-rail__n {
  margin-left: auto; font-family: var(--ub-font-mono); font-size: 0.68rem;
  font-weight: 500; color: var(--hs-ink-faint);
}
.rec-rail__item--on .rec-rail__n { color: var(--pp-mid); }
.rec-rail__sub {
  display: block; margin: 0.1rem 0 0; font-family: var(--ub-font);
  font-size: 0.72rem; font-weight: 400; line-height: 1.35; color: var(--hs-ink-faint);
}
.rec-rail__item--on .rec-rail__sub { color: var(--hs-ink-soft); }

/* -- Reorderable list: canonical stages -----------------------------------
   The order is company-wide, so it is edited in one place. Drag is offered and
   is never the only path: every row carries up/down buttons and a position
   number, which is also what makes the order announceable. */

.rec-reorder { list-style: none; margin: 0; padding: 0; }
.rec-reorder > li {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 1rem; border-bottom: 1px solid #efecf7;
}
.rec-reorder > li:last-child { border-bottom: 0; }
.rec-reorder > li:hover { background: #f8f6fd; }
.rec-reorder__grip {
  display: inline-grid; place-items: center; width: 1.4rem; height: 1.6rem;
  border: 0; background: none; cursor: grab; color: var(--hs-line-strong); flex: none;
}
.rec-reorder__grip:hover { color: var(--hs-ink-faint); }
 /* A disabled grip is a permanent state of this screen, not a temporary one:
    Screening is pinned first and never draggable, and a slice that has not
    wired reordering yet draws every grip this way. `cursor: grab` on a control
    that cannot be grabbed is an affordance that lies, so it is dropped here the
    way `.rec-textbtn:disabled` already drops its own pointer. Raised under
    CONTRACT §4 and applied to every copy. */
.rec-reorder__grip:disabled { cursor: default; }
.rec-reorder__grip:disabled:hover { color: var(--hs-line-strong); }
.rec-reorder__grip svg { width: 0.85rem; height: 0.85rem; }
.rec-reorder__pos {
  font-family: var(--ub-font-mono); font-size: 0.72rem; font-variant-numeric: tabular-nums;
  color: var(--pp-mid); min-width: 1.6rem; flex: none;
}
/* A list whose rows cannot be reordered draws an em dash where a position
   number goes, and undimmed that dash is the same glyph in the same place as a
   retired row's marker in the list above it — two different states reading as
   one. Raised under CONTRACT §4 and applied to every copy. */
.rec-reorder--fixed .rec-reorder__pos { color: var(--hs-ink-soft); }
.rec-reorder__main { min-width: 0; flex: 1; }
.rec-reorder__name { font-size: 0.9rem; font-weight: 700; letter-spacing: -0.005em; }
.rec-reorder__sub { display: block; margin-top: 0.1rem; font-size: 0.76rem; color: var(--hs-ink-faint); }
.rec-reorder__nudge { display: inline-flex; flex-direction: column; gap: 2px; flex: none; }
.rec-reorder__nudge button {
  display: inline-grid; place-items: center; width: 1.5rem; height: 0.95rem;
  border: 1px solid var(--hs-line-strong); background: #fff;
  color: var(--hs-ink-soft); cursor: pointer; padding: 0;
}
.rec-reorder__nudge button:first-child { border-radius: 5px 5px 0 0; }
.rec-reorder__nudge button:last-child { border-radius: 0 0 5px 5px; border-top: 0; }
.rec-reorder__nudge button:hover { border-color: var(--pp-mid); color: var(--pp-mid); }
.rec-reorder__nudge button[disabled] { color: var(--hs-line-strong); cursor: default; }
.rec-reorder__nudge svg { width: 0.7rem; height: 0.7rem; }
.rec-reorder > li.rec-reorder--retired { background: #faf9fd; }
.rec-reorder > li.rec-reorder--retired .rec-reorder__name { color: var(--hs-ink-faint); }
.rec-reorder > li.rec-reorder--retired .rec-reorder__grip { visibility: hidden; }
/* A single-choice question's answers belong to the question that offers them,
   so the list draws them as a row of their own directly after it rather than
   after every question. The answers row is block-level: it cannot take the
   question row's width, so the list stays readable even before this block
   reaches the browser, and everything here is indent and hairline. The indent
   is `.rec-reorder__pos`'s 1.6rem plus the row's 0.6rem gap plus the list's own
   1rem, so the answers start under the question's name. Raised under
   CONTRACT §4 and applied to every copy. */
.rec-reorder > li.rec-reorder--nesting { border-bottom: 0; }
.rec-reorder > li.rec-reorder--nesting:hover,
.rec-reorder > li.rec-reorder__nestrow:hover { background: transparent; }
.rec-reorder > li.rec-reorder__nestrow { display: block; padding: 0 1rem 0.75rem 3.2rem; }
.rec-reorder__nest { padding-left: 1rem; border-left: 2px solid var(--pp-line); }
.rec-reorder__nest > .rec-reorder > li { padding-left: 0; padding-right: 0; }
.rec-reorder__nesthead { margin: 0 0 0.35rem; font-size: 0.76rem; color: var(--hs-ink-faint); }
.rec-reorder__nesthead strong { color: var(--hs-ink); }
.rec-reorder__newanswer { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.55rem; }
.rec-reorder__newanswer .rec-input { flex: 1; }

/* -- Impact preview -------------------------------------------------------
   The numbers are the whole point: a configuration change at Ambush is
   company-wide, so every destructive or broad edit states its reach in figures
   before it is confirmed. Never red — an impact is a size, not a failure. */

.rec-impact {
  border: 1px solid var(--hs-gold-border); border-radius: var(--ub-radius);
  background: var(--hs-active); padding: 0.9rem 1rem;
}
.rec-impact__title { margin: 0 0 0.55rem; font-size: 0.9rem; font-weight: 700; }
.rec-impact__figs { display: flex; gap: 0.5rem; flex-wrap: wrap; margin: 0 0 0.7rem; }
.rec-impact__fig {
  flex: 1 1 8.5rem; padding: 0.5rem 0.65rem; border-radius: 8px;
  border: 1px solid var(--hs-gold-border); background: #fff;
}
.rec-impact__n {
  font-family: var(--ub-font-display); font-weight: 700; font-size: 1.35rem;
  line-height: 1.05; letter-spacing: -0.01em; color: var(--hs-ink);
}
.rec-impact__k {
  display: block; margin-top: 0.2rem; font-size: 0.74rem; line-height: 1.35;
  color: var(--hs-ink-soft);
}
.rec-impact__fig--none .rec-impact__n { color: var(--hs-ink-faint); }
.rec-impact__says { margin: 0 0 0.7rem; font-size: 0.83rem; line-height: 1.55; color: var(--rec-age-ink); }
.rec-impact__says strong { color: var(--hs-ink); }
.rec-impact__acts { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.rec-impact__acts .rec-panel__spacer { flex: 1; }

/* A destructive confirmation asks for the name back. Two irreversible
   configuration acts use it — tag merge and stage retire — so the control is
   one object rather than a per-screen invention. */
.rec-typeback { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.rec-typeback label { font-size: 0.8rem; color: var(--hs-ink-soft); }
.rec-typeback .rec-input { flex: 0 1 14rem; }
.rec-typeback code {
  font-family: var(--ub-font-mono); font-size: 0.78rem;
  background: #fff; border: 1px solid var(--hs-gold-border);
  border-radius: 4px; padding: 0.05rem 0.3rem; color: var(--hs-ink);
}

/* -- Merge compare --------------------------------------------------------
   Two records side by side with the survivor chosen explicitly. The plan makes
   merge a page rather than a drawer for exactly this reason. */

.rec-merge { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 0.9rem; align-items: stretch; }
.rec-merge__side {
  border: 1px solid var(--pp-line); border-radius: var(--ub-radius);
  background: #fff; padding: 0.85rem 0.9rem;
}
.rec-merge__side--keep { border-color: var(--pp-mid); box-shadow: inset 0 2px 0 var(--pp-mid); }
.rec-merge__side--lose { background: #faf9fd; }
.rec-merge__role {
  margin: 0 0 0.45rem; font-family: var(--ub-font-mono); font-size: 0.58rem;
  font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pp-mid);
}
.rec-merge__side--lose .rec-merge__role { color: var(--hs-ink-faint); }
.rec-merge__name {
  margin: 0 0 0.6rem; font-family: var(--ub-font-display); font-weight: 700;
  font-size: 1.15rem; line-height: 1.15; letter-spacing: -0.015em;
}
.rec-merge__into {
  display: grid; place-items: center; align-self: center;
  width: 2rem; height: 2rem; border-radius: 50%;
  border: 1px solid var(--pp-line); background: #fff; color: var(--pp-mid); flex: none;
}
.rec-merge__into svg { width: 1rem; height: 1rem; }

/* -- Partial failure -----------------------------------------------------
   A merge moves many rows and can half-succeed. The result is not a toast: it
   is a report that names what moved, what did not, and what to do next. */

.rec-partial {
  border: 1px solid color-mix(in srgb, var(--ub-danger) 32%, transparent);
  border-left: 3px solid var(--ub-danger);
  border-radius: var(--ub-radius); background: color-mix(in srgb, var(--ub-danger) 4%, #fff);
  padding: 0.9rem 1rem;
}
.rec-partial__title { margin: 0 0 0.4rem; font-size: 0.9rem; font-weight: 700; color: var(--ub-danger); }
.rec-partial__body { margin: 0 0 0.7rem; font-size: 0.83rem; line-height: 1.55; color: var(--hs-ink-soft); }
.rec-partial__body strong { color: var(--hs-ink); }
.rec-partial__acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* -- Tag colour ----------------------------------------------------------- */

.rec-swatch {
  width: 0.85rem; height: 0.85rem; border-radius: 3px; flex: none;
  border: 1px solid rgba(24, 18, 43, 0.18); display: inline-block; vertical-align: -1px;
}
.rec-swatches { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.rec-swatches label {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem;
  border: 1px solid var(--hs-line-strong); border-radius: 6px; cursor: pointer;
}
.rec-swatches label:has(input:checked) { border-color: var(--pp-mid); box-shadow: inset 0 0 0 1px var(--pp-mid); }
/* The input is transparent rather than `display: none`, so it stays tabbable and
   the group stays arrowable — and its own focus ring is invisible. An outline on
   the label rather than a box-shadow, because the checked state above already
   spends the box-shadow and a focused checked swatch must show both.
   `:focus` and not `:focus-visible`: the heuristic behind `:focus-visible` is
   about not ringing a control the pointer obviously just hit, and this control is
   invisible — there is nothing else on screen saying where the caret is. It also
   has to survive `autofocus`, which the refused-colour state uses to put the
   reader on the group that was refused. */
.rec-swatches label:has(input:focus) { outline: 2px solid var(--ub-accent); outline-offset: 2px; }
.rec-swatches input { position: absolute; opacity: 0; pointer-events: none; }

/* -- Interview log table --------------------------------------------------
   Canvas A's `--idlead` declares 24% + 32% for a two-identity table. The
   interview log has six columns and leads with a time, so those widths starve
   the rest — job names lost up to 151px to the ellipsis and the action column
   pushed past the panel. Its own basis instead, with the interview name and
   its `job · stage` link stacked in one column so the job name gets a whole
   line rather than half of a shared one.

   Names and their sub-lines wrap here instead of truncating. Canvas A caps them
   at 15rem with an ellipsis, which is right in a dense ledger; in a six-column
   log a name like "Mariana Castro Vasconcelos" was losing its last word to save
   18px, and a second line costs less than that. */

.rec-table--log { table-layout: fixed; }
.rec-table--log thead th:nth-child(1) { width: 9%; }
.rec-table--log thead th:nth-child(2) { width: 19%; }
.rec-table--log thead th:nth-child(3) { width: 25%; }
.rec-table--log thead th:nth-child(4) { width: 17%; }
.rec-table--log thead th:nth-child(5) { width: 15%; }
.rec-table--log td { white-space: normal; }

/* The feedback inbox leads with the interviewer rather than a time. */
.rec-table--owed { table-layout: fixed; }
.rec-table--owed thead th:nth-child(1) { width: 20%; }
.rec-table--owed thead th:nth-child(2) { width: 29%; }
.rec-table--owed thead th:nth-child(3) { width: 10%; }
.rec-table--owed thead th:nth-child(4) { width: 15%; }
.rec-table--owed thead th:nth-child(5) { width: 10%; }
.rec-table--owed td { white-space: normal; }
.rec-table--owed td .rec-who__name,
.rec-table--owed td .rec-who__sub { display: block; max-width: 100%; white-space: normal; }
.rec-table--owed td .rec-applink { margin-top: 0.15rem; }
/* A form name wider than its column ellipsises instead of running under
   Waiting. The chip is focusable and shows the whole name while focused,
   because a `title` tooltip never reaches a keyboard. V9. */
.rec-table--owed td .rec-tag {
  display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  vertical-align: bottom;
}
.rec-table--owed td .rec-tag:focus-visible { white-space: normal; overflow-wrap: anywhere; }
.rec-table--log td .rec-who__name,
.rec-table--log td .rec-who__sub { display: block; max-width: 100%; white-space: normal; }
.rec-table--log td .rec-applink { margin-top: 0.15rem; }

/* 19b's narrow result panel must fit real candidate and tag names. */
.rec-table--tagmerge { table-layout: fixed; }
.rec-table--tagmerge .rec-who__name { display: block; max-width: 100%; }
.rec-table--tagmerge .rec-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }

/* -- Settings tables ------------------------------------------------------
   These sit in the ~898px right-hand pane beside the rail, not in a full-width
   page. Canvas A's fixed-layout rules only fire on a table containing a
   `.rec-applink`, which none of these have, so they were resolving at auto
   layout and running 14–397px past the pane — Email templates pushed its whole
   actions column outside the frame. Declared bases instead, with prose cells
   free to take a second line and the actions column pinned to the 8.75rem
   Canvas A already uses. */

.rec-table--settings { table-layout: fixed; }
.rec-table--settings td { white-space: normal; }
/* recruiting-color.css pins a cell holding a lone `.rec-dur` to nowrap, which
   is right in a ledger and wrong in a narrow settings column — matched at the
   same specificity rather than with !important. */
.rec-color .rec-table--settings td:has(> .rec-dur:only-child),
.rec-color .rec-table--log td:has(> .rec-dur:only-child),
.rec-color .rec-table--owed td:has(> .rec-dur:only-child) { white-space: normal; }
/* Three text buttons — Edit / Duplicate / Retire — need more than the 8.75rem
   a two-button ledger row uses, and they wrap rather than clip if a label ever
   grows. */
.rec-table--settings thead th.rec-table__c--actions { width: 11rem; }
.rec-table--settings .rec-rowacts { flex-wrap: wrap; row-gap: 0.15rem; }
.rec-table--settings thead th.rec-table__c--check { width: 2.25rem; }
.rec-table--settings .rec-who__name,
.rec-table--settings .rec-who__sub { max-width: 100%; white-space: normal; }
.rec-table--settings .rec-tags { flex-wrap: wrap; overflow: visible; }
.rec-table--settings .rec-source { flex-wrap: wrap; white-space: normal; }

/* CONTRACT §4, 2026-09-10: `.rec-table--forms` columns 1, 5 and 6, which is
   the correction `.rec-table--tags` took on 2026-09-09 applied to the table it
   was not applied to. `Last changed` was 12% — 84px at a 1024 viewport — and a
   date needs 92px, so check B reported every date cell overflowing; `State` was
   9.5% and its pill overflowed too. Two and a half points move from `Form`,
   which wraps its name inside a settings table and had the slack: `Form`
   21% → 18.5%, `State` 9.5% → 10.5%, `Last changed` 12% → 13.5%. The six
   columns still sum to what they did, so `Actions` keeps the 176px its three
   controls need at 1440. */
.rec-table--forms thead th:nth-child(1) { width: 18.5%; }
.rec-table--forms thead th:nth-child(2) { width: 8%; }
.rec-table--forms thead th:nth-child(3) { width: 20%; }
.rec-table--forms thead th:nth-child(4) { width: 10.5%; }
.rec-table--forms thead th:nth-child(5) { width: 10.5%; }
.rec-table--forms thead th:nth-child(6) { width: 13.5%; }

.rec-table--tags thead th:nth-child(2) { width: 25%; }
.rec-table--tags thead th:nth-child(3) { width: 10%; }
.rec-table--tags thead th:nth-child(4) { width: 13.5%; }
.rec-table--tags thead th:nth-child(5) { width: 13.5%; }
.rec-table--tags thead th:nth-child(6) { width: 12%; }

@media (min-width: 1101px) and (max-width: 1439px) {
  .rec-table--archive thead th { white-space: normal; }
  .rec-table--archive tbody td { overflow-wrap: anywhere; }
  .rec-table--archive .rec-who__name,
  .rec-table--archive .rec-who__sub { white-space: normal; }
  .rec-table--archive .rec-source { flex-wrap: wrap; white-space: normal; }
  .rec-table--archive .rec-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
  .rec-table--tags td:nth-child(6) .rec-pill { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}

.rec-table--sources thead th:nth-child(1) { width: 28.5%; }
.rec-table--sources thead th:nth-child(2) { width: 13.5%; }
.rec-table--sources thead th:nth-child(3) { width: 8%; }
.rec-table--sources thead th:nth-child(4) { width: 18%; }
.rec-table--sources thead th:nth-child(5) { width: 11%; }

.rec-table--emails thead th:nth-child(1) { width: 18%; }
.rec-table--emails thead th:nth-child(2) { width: 11%; }
.rec-table--emails thead th:nth-child(3) { width: 19%; }
.rec-table--emails thead th:nth-child(4) { width: 19%; }
.rec-table--emails thead th:nth-child(5) { width: 11%; }

/* A capability attribution under a name in a table. `.rec-who__sub` truncates
   at 15rem on one line, which is right for an email but cuts a sentence like
   "recruiting.manage by grant · expires 31 Dec 2026" — where the clipped half is
   the part that matters. This wraps instead. */
.rec-whonote {
  display: block; margin-top: 0.1rem; max-width: 18rem;
  font-size: 0.75rem; line-height: 1.35; color: var(--hs-ink-faint);
  white-space: normal;
}

/* -- Two-pane library: list left, editor right ---------------------------- */

.rec-lib { display: grid; grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.rec-lib__pick {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.55rem 1rem; border-bottom: 1px solid #efecf7;
  text-decoration: none; color: inherit;
}
.rec-lib__pick:last-child { border-bottom: 0; }
.rec-lib__pick:hover { background: #f8f6fd; }
.rec-lib__pick--on { background: var(--pp-tint); box-shadow: inset 2px 0 0 var(--pp-mid); }
.rec-lib__main { min-width: 0; flex: 1; }
.rec-lib__name { display: block; font-size: 0.875rem; font-weight: 700; letter-spacing: -0.005em; }
.rec-lib__sub { display: block; margin-top: 0.1rem; font-size: 0.75rem; color: var(--hs-ink-faint); }

@media (max-width: 1100px) {
  .rec-settings, .rec-lib { grid-template-columns: minmax(0, 1fr); }
  .rec-rail { position: static; }
  .rec-merge { grid-template-columns: minmax(0, 1fr); }
  .rec-merge__into { transform: rotate(90deg); }
}

/* CANVAS D — additive only. One block, one object: the tag picker.
   Load after recruiting.css, recruiting-color.css, recruiting-color-variations.css
   and recruiting-canvas-b.css.

   Every selector here begins `.rec-tagpicker`. Nothing in canvas A, B or C is
   touched, redefined or re-tinted, and canvas B is not edited retroactively —
   §14.1: CSS is additive, and a design class is never mapped onto an existing
   one. No value is invented: colours are the `--pp-*` / `--hs-*` / `--ub-*`
   tokens already declared, radii and density are the sizes the earlier sheets
   already use.

   The picker COMPOSES existing objects rather than replacing them:

     query        `.rec-filters__search` + `.rec-filters__searchic` + `.rec-input`
     chips        `.rec-tag` + `.rec-swatch`
     row colour   `.rec-swatch`
     helper text  `.rec-form__help`
     focus        the shell's one `:focus-visible` treatment, inherited

   Only three things had no existing object and are declared below: the result
   region itself, a result row, and the create row.

   ONE ACCENT RULE. Every accent in this block resolves through `--ub-accent`,
   which is gold in the base sheet and `--pp-mid` under `.rec-color`. The block
   therefore needs no `.rec-color` overrides of its own and cannot drift from
   CONTRACT.md rule 5 — nothing here is gold-as-decoration, and nothing here
   re-tints the age ramp.

   PORT NOTE: the narrow block at the foot is `@media` here. The canvas copy
   states it as `@container` so each 1440px artboard answers to its own width;
   in Django the viewport IS the frame. Do not sync that rule in either
   direction — the same warning recruiting.css and canvas B already carry.

   Port target: static/css/recruiting.css, appended verbatim after canvas B. */

.rec-tagpicker { display: flex; flex-direction: column; gap: 0.45rem; }

/* -- Selection, above the query ------------------------------------------
   Selection state and query state are different things and are never mixed
   into one box: chips sit above the input, wrap freely, and the region is
   OMITTED when nothing is selected. An empty bordered box reads as a control
   that failed to render. */

.rec-tagpicker__chosen { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.rec-tagpicker__chip { gap: 0.3rem; padding-right: 0.15rem; }
.rec-tagpicker__x {
  display: inline-grid; place-items: center; width: 0.95rem; height: 0.95rem;
  padding: 0; border: 0; border-radius: 3px; background: none;
  color: var(--hs-ink-faint); cursor: pointer;
}
.rec-tagpicker__x:hover { background: var(--hs-hover); color: var(--hs-ink); }
.rec-tagpicker__x svg { width: 0.6rem; height: 0.6rem; }

/* -- Query ---------------------------------------------------------------
   The filter bar's search affordance at form density: the same icon in the
   same place, over `.rec-input` rather than `.field__control`, because this
   one lives in a form and not in a filter bar. */

.rec-tagpicker__search { position: relative; }
.rec-tagpicker__search .rec-input { padding-left: 2rem; }
.rec-tagpicker__search .rec-filters__searchic { left: 0.65rem; }

/* -- Results -------------------------------------------------------------
   In document flow, never a popover. Screen 23 embeds this inside a drawer
   and §8.2 says a drawer never nests, so a floating layer is not available
   there; one behaviour in both hosts is worth more than a few pixels.

   The region is structurally present at every query, including the empty
   one, so the picker never changes height class as you type. It is capped
   and scrolls internally instead of growing the drawer body past its foot. */

.rec-tagpicker__list {
  padding: 0.2rem;
  border: 1px solid var(--hs-line-strong); border-radius: 7px; background: #fff;
  max-height: 13.5rem; overflow-y: auto; overscroll-behavior: contain;
}
/* The region is the box; the listbox is its content, and it is absent when
   there is nothing to list — an empty `role="listbox"` announces a control
   with no options rather than a prompt. */
.rec-tagpicker__opts { list-style: none; margin: 0; padding: 0; }
.rec-tagpicker__opt {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.45rem; border-radius: 5px;
  color: var(--hs-ink); cursor: pointer;
}
.rec-tagpicker__opt:hover { background: #f8f6fd; }
.rec-tagpicker__name {
  min-width: 0; font-family: var(--ub-font-mono); font-size: 0.78rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Usage is secondary text on the row, not a column: it is pushed to the end
   and it is the quietest thing in the picker. Nothing aligns to it. */
.rec-tagpicker__n {
  margin-left: auto; flex: none;
  font-family: var(--ub-font-mono); font-size: 0.68rem;
  font-variant-numeric: tabular-nums; color: var(--hs-ink-faint);
}

/* Selected. Same treatment the settings rail and the two-pane library already
   use for a chosen row — tint plus a left tick — so "chosen" looks the same
   everywhere in recruiting. */
.rec-tagpicker__opt--on {
  background: var(--pp-tint, var(--hs-active)); color: var(--hs-ink);
  box-shadow: inset 2px 0 0 var(--ub-accent);
}
.rec-tagpicker__opt--on .rec-tagpicker__n { color: var(--ub-accent); }
.rec-tagpicker__on {
  flex: none; font-family: var(--ub-font-mono); font-size: 0.6rem;
  font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ub-accent);
}

/* The keyboard cursor. DOM focus stays on the input, because the input is the
   combobox and moving focus into the list would break type-ahead — so the
   active option is drawn with the shell's own focus treatment (2px, accent,
   `outline-offset`) rather than a second invented one. It is inset so a row at
   the scrolled edge of the region cannot clip its own ring. */
.rec-tagpicker__opt--active { outline: 2px solid var(--ub-accent); outline-offset: -2px; }

/* -- Create --------------------------------------------------------------
   Offered only when no ACTIVE tag matches the query without case. Ruled off
   from the matches so it can never be read as one, and it repeats the name
   verbatim: the thing being created is the string, not the query. */

.rec-tagpicker__opt--create {
  margin-top: 0.2rem; padding-top: 0.4rem;
  border-top: 1px dashed var(--hs-line-strong); border-radius: 0 0 5px 5px;
  color: var(--ub-accent);
}
.rec-tagpicker__opt--create:first-child {
  margin-top: 0; padding-top: 0.3rem; border-top: 0;
}
.rec-tagpicker__opt--create svg { width: 0.85rem; height: 0.85rem; flex: none; }
/* One flex item, not four: the quotes and the name are inside the label, or the
   row's own gap opens up around them and the name reads as “ name ”. */
.rec-tagpicker__label {
  min-width: 0; padding-right: 1px; font-size: 0.82rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rec-tagpicker__opt--create code,
.rec-tagpicker__empty code,
.rec-tagpicker__note code {
  font-family: var(--ub-font-mono); font-size: 0.76rem; color: var(--hs-ink);
}

/* The region's own line when it holds no rows, or no rows but a create. */
.rec-tagpicker__empty {
  margin: 0; padding: 0.5rem 0.45rem;
  font-size: 0.78rem; line-height: 1.5; color: var(--hs-ink-faint);
}

/* Explanation under the region — why a create was not offered, what a match
   means. `.rec-form__help` carries the type; this only names the code run. */
.rec-tagpicker__note { margin: 0; }

/* -- Refusal -------------------------------------------------------------
   The one red in this object, and the one state that is an error rather than
   a shape of the result set. CONTRACT.md rule 5 reserves red for a refusal or
   an overdue obligation, and a name that belongs to a RETIRED tag is a
   refusal: the picker will not create it and cannot resurrect it. It states
   the conflict and where the fix lives. It never performs the fix — a
   Settings mutation does not belong inside an intake control.

   Values are `.rec-partial`'s, at picker density. */

.rec-tagpicker__refusal {
  padding: 0.5rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--ub-danger) 32%, transparent);
  border-left: 3px solid var(--ub-danger);
  border-radius: 6px; background: color-mix(in srgb, var(--ub-danger) 4%, #fff);
  margin: 0; font-size: 0.8rem; line-height: 1.5; color: var(--hs-ink-soft);
}
.rec-tagpicker__refusal strong { color: var(--ub-danger); }
.rec-tagpicker__refusal code {
  font-family: var(--ub-font-mono); font-size: 0.76rem; color: var(--hs-ink);
}
.rec-tagpicker--refused > .rec-tagpicker__search .rec-input {
  border-color: color-mix(in srgb, var(--ub-danger) 45%, transparent);
}

@media (max-width: 1100px) {
  /* The drawer is `min(468px, 100vw - 48px)` here and its foot has to stay on
     screen, so the result region gives up two rows rather than the body
     gaining a second scroll. Chips already wrap; they simply take more lines. */
  .rec-tagpicker__list { max-height: 10.5rem; }
}

/* ==========================================================================
   Canvas E — refinement of screens 09 and 16, 2026-09-22.
   Appended to recruiting.css AFTER canvas D. Every selector here is new;
   canvas A–D are not edited. Authorised by the V1 workflow amendment
   ("action-first, expandable-feedback hierarchy on 09") — see
   v1-readiness/README.md for the exact CONTRACT §4 text. Installed by V7,
   2026-09-23; V10 reuses the screen 16 half.
   Corrected on install: the two inner hairlines (.rec-ivrow,
   .rec-ivfb__qa + .rec-ivfb__qa) were the warm #f2efe9 CONTRACT §8 check F
   refuses; they take #efecf7, the value the palette already gives the same
   hairline on .rec-list rows and .rec-card__foot.
   Corrected on install: at 1100px and below .rec-ivrow narrows its name and
   status tracks, so the meta column is not squeezed to a few characters.
   Amended 2026-09-23 at the requester's review: the Manage menu groups its
   acts under a label with an icon each, in ink rather than link purple, and
   puts the panel on a tinted band with its member count.

   PORT NOTE: the narrow block (max-width: 1100px) is `@media` here. The
   artboard copy states it as `@container` so each 1440px artboard answers to
   its own width; in Django the viewport IS the frame. Do not sync that rule in
   either direction. `.rec-facts` is a real container query in both copies.

   ========================================================================== */

/* -- 09 · Action band: owner and stage, then move and close ------------- */
.rec-actband {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr) minmax(0, 1fr) minmax(0, 1.2fr);
  margin: -0.55rem 0 1.25rem;
  border: 1px solid var(--pp-line, var(--hs-line));
  border-radius: var(--ub-radius);
  background: var(--hs-surface);
  overflow: hidden;
}
.rec-actband__cell {
  min-width: 0; margin: 0; padding: 0.75rem 1rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.4rem;
}
.rec-actband__cell + .rec-actband__cell { border-left: 1px solid var(--pp-line, var(--hs-line)); }
/* The acts half: a quieter ground and a stronger rule, so "who and where"
   reads apart from "what happens next" without a second colour. */
.rec-actband__cell--act { background: #faf9fd; }
.rec-actband__cell--act.rec-actband__cell--first { border-left: 2px solid var(--pp-line, var(--hs-line-strong)); }
.rec-actband__row { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; min-width: 0; margin: 0; }
.rec-actband__row > form { display: contents; }
.rec-actband .rec-field__k { margin: 0; }
.rec-actband .picker { flex: 1 1 11rem; max-width: 15rem; }
.rec-actband .picker__input { padding: 0.3rem 0.55rem; font-size: 0.8rem; }
.rec-actband .rec-select { flex: 1 1 9rem; min-width: 0; }
.rec-actband .rec-form__help { font-size: 0.74rem; }

@media (max-width: 1100px) {
  .rec-actband { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .rec-actband__cell:nth-child(3) { border-left: 0; }
  .rec-actband__cell:nth-child(n+3) { border-top: 1px solid var(--pp-line, var(--hs-line)); }
  .rec-actband__cell--act.rec-actband__cell--first { border-left: 0; border-top-width: 2px; }
  /* Measured at 1024: a 594px card left the meta 30px beside a revision link.
     Scoped so it outranks the base rule, which this block precedes. */
  .rec-ivcard .rec-ivrow { grid-template-columns: minmax(0, 11rem) 8rem minmax(0, 1fr) auto; }
}

/* -- 09 · Interview summary rows ------------------------------------------- */
/* One row per assigned interviewer. Visible without expanding anything:
   who, what they recommended or that it is owed, and when. */
.rec-ivrows { list-style: none; margin: 0; padding: 0; }
.rec-ivrow {
  display: grid;
  grid-template-columns: minmax(0, 15rem) 9.5rem minmax(0, 1fr) auto;
  align-items: center; gap: 0.75rem;
  padding: 0.42rem 0; border-top: 1px solid #efecf7; font-size: 0.82rem;
}
.rec-ivrow > :nth-child(2) { justify-self: start; }
.rec-ivrow:first-child { border-top: 0; padding-top: 0; }
.rec-ivrow:last-child { padding-bottom: 0; }
.rec-ivrow__name { font-weight: 600; color: var(--hs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ivrow__meta { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-faint); min-width: 0; }
.rec-ivrow__act { display: flex; gap: 0.35rem; justify-content: flex-end; }
.rec-ivrow--owed .rec-ivrow__meta { color: var(--ub-danger); }

/* A disclosure summary that names both states — "Show …" closed,
   "Hide …" open — with no JavaScript. */
.rec-expand > summary .rec-expand__if-open { display: none; }
.rec-expand[open] > summary .rec-expand__if-open { display: inline; }
.rec-expand[open] > summary .rec-expand__if-closed { display: none; }

/* -- 09 · Interview list: date rail, one card per interview ------------ */
/* The rail carries the date, so the card meta does not repeat it. Gold means
   upcoming and nothing else; lilac means held. */
.rec-ivlist { margin: 0; padding: 1.1rem 1rem 0.35rem; background: #f6f5fa; list-style: none; }
.rec-ivitem { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0 1.25rem; }
.rec-ivrail { position: relative; text-align: right; padding: 0.7rem 0.75rem 0 0; }
.rec-ivrail__day { display: block; font-family: var(--ub-font-display); font-weight: 700; font-size: 1.15rem; line-height: 1; color: var(--pp-ink, var(--hs-ink)); }
.rec-ivrail__kind { font-family: var(--ub-font-mono); font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hs-ink-faint); }
.rec-ivrail::before { content: ""; position: absolute; right: -0.66rem; top: 0.85rem; width: 11px; height: 11px; box-sizing: border-box; border-radius: 50%; background: var(--pp-mid); border: 2px solid var(--pp-mid); }
.rec-ivitem:not(:last-child) .rec-ivrail::after { content: ""; position: absolute; right: calc(-0.66rem + 4.5px); top: 1.75rem; bottom: -0.2rem; width: 2px; background: var(--pp-line, var(--hs-line)); }
.rec-ivitem--upcoming .rec-ivrail__day { color: var(--rec-age-ink); }
.rec-ivitem--upcoming .rec-ivrail::before { background: #fff; border-color: var(--hs-gold); }

.rec-ivcard { background: #fff; border: 1px solid var(--pp-line, var(--hs-line)); border-radius: 10px; margin: 0 0 0.85rem; }
.rec-ivcard__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem 0.65rem; background: var(--pp-tint, #fbfaf8); border-bottom: 1px solid var(--pp-line, var(--hs-line)); border-radius: 9px 9px 0 0; }
.rec-ivitem--upcoming .rec-ivcard { border-color: var(--hs-gold-border); }
.rec-ivitem--upcoming .rec-ivcard__head { background: var(--hs-active); border-bottom-color: var(--hs-gold-border); }
.rec-ivcard__id { flex: 1; min-width: 0; }
.rec-ivcard__title { margin: 0; font-family: var(--ub-font-display); font-weight: 700; font-size: 1.08rem; letter-spacing: -0.01em; color: var(--pp-ink, var(--hs-ink)); }
.rec-ivcard__meta { margin: 0.15rem 0 0; font-family: var(--ub-font-mono); font-size: 0.7rem; color: var(--hs-ink-faint); }
.rec-ivcard__body { padding: 0.75rem 1rem 0.8rem; display: flex; flex-direction: column; gap: 0.6rem; }
.rec-ivcard__body .rec-note { margin: 0; }
.rec-ivcard__more { border-top: 1px solid var(--pp-line, var(--hs-line)); background: #faf9fd; border-radius: 0 0 9px 9px; }
.rec-ivcard__more > summary { display: flex; align-items: center; gap: 0.3rem; padding: 0.5rem 1rem; border: 0; border-radius: 0 0 9px 9px; font-size: 0.78rem; color: var(--pp-mid, var(--hs-ink-soft)); }
.rec-ivcard__more > summary svg { width: 0.85rem; height: 0.85rem; }
.rec-ivcard__more[open] > summary svg { transform: rotate(180deg); }
.rec-ivcard__moreb { padding: 0.25rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.75rem; }

/* Setup that stops an interview from working: a pill, never a box. */
.rec-ivsetup { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.rec-ivsetup .rec-pill { color: var(--ub-danger); border-color: color-mix(in srgb, var(--ub-danger) 32%, transparent); }
.rec-ivsetup p { margin: 0; flex: 1 1 16rem; font-size: 0.82rem; color: var(--hs-ink-soft); }

/* One Manage menu per interview: its acts, then its panel on a tinted band,
   so the part that decides who can see the candidate reads apart. */
.rec-ivmanage { position: relative; flex: none; }
.rec-ivmanage > summary { list-style: none; display: inline-flex; align-items: center; gap: 0.25rem; }
.rec-ivmanage > summary::-webkit-details-marker { display: none; }
.rec-ivmanage > summary svg { width: 0.8rem; height: 0.8rem; }
.rec-ivmanage__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 6; width: 24rem; background: #fff; border: 1px solid var(--pp-line, var(--hs-line)); border-radius: 10px; box-shadow: 0 18px 44px -24px rgba(24, 18, 43, 0.4); }
.rec-ivmanage__acts { padding: 0.55rem 0.4rem 0.45rem; }
.rec-ivmanage .rec-ivmanage__acts > .rec-field__k { margin: 0 0.6rem 0.3rem; }
.rec-ivmanage__item { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 7px; font-size: 0.84rem; font-weight: 500; color: var(--hs-ink); text-decoration: none; }
/* Outranks the palette's `.rec-color a:not(.button)`, which ties with a
   two-class selector and loads later. */
.rec-color .rec-ivmanage a.rec-ivmanage__item { color: var(--hs-ink); }
.rec-ivmanage__item svg { width: 1rem; height: 1rem; flex: none; color: var(--pp-mid, var(--hs-ink-soft)); }
.rec-ivmanage__item:hover { background: var(--pp-tint, var(--hs-hover)); }
.rec-ivmanage__panel { padding: 0.65rem 1rem 0.75rem; background: #faf9fd; border-top: 1px solid var(--pp-line, var(--hs-line)); border-radius: 0 0 9px 9px; }
.rec-ivmanage__panel:first-child { border-top: 0; border-radius: 9px; }
.rec-ivmanage__panel > .rec-field__k { margin: 0; }
.rec-ivmanage__panel form { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; margin: 0.4rem 0 0; }
.rec-ivmanage__panel form > span { display: inline-flex; align-items: center; gap: 0.1rem; padding: 0.12rem 0.2rem 0.12rem 0.45rem; border: 1px solid var(--pp-line, var(--hs-line-strong)); border-radius: 4px; background: #fff; font-size: 0.76rem; font-weight: 600; color: var(--hs-ink); }
.rec-ivmanage__panel form > span .rec-textbtn { border: 0; background: none; padding: 0 0.2rem; }
.rec-ivmanage__panel .picker { flex: 1 1 11rem; }
.rec-ivmanage__panel .picker__input { padding: 0.25rem 0.5rem; font-size: 0.78rem; background: #fff; }
.rec-ivmanage__panel .rec-form__help { margin-top: 0.45rem; }

/* Expanded feedback: one interviewer per full-width block; each question a
   row with prompt and rating beside the written answer. */
.rec-ivfb { background: #fff; border: 1px solid var(--pp-line, var(--hs-line)); border-radius: 8px; overflow: hidden; }
.rec-ivfb__head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; padding: 0.55rem 0.9rem; background: #faf9fd; border-bottom: 1px solid var(--pp-line, var(--hs-line)); }
.rec-ivfb__name { font-size: 0.86rem; font-weight: 700; color: var(--pp-ink, var(--hs-ink)); }
.rec-ivfb__head .rec-panel__spacer { flex: 1; }
.rec-ivfb__body { padding: 0.3rem 0.9rem 0.6rem; }
.rec-ivfb__qa { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 0 1.5rem; padding: 0.55rem 0; }
.rec-ivfb__qa + .rec-ivfb__qa { border-top: 1px solid #efecf7; }
.rec-ivfb__qa .rec-answer__q { margin: 0; }
.rec-ivfb__qa .rec-rating { margin: 0.3rem 0 0; }
.rec-ivfb__qa .rec-answer__a { margin: 0; max-width: 72ch; line-height: 1.6; }
.rec-ivfb__body .rec-note__by { margin: 0.2rem 0 0; }

/* -- 09 · Notes ---------------------------------------------------------- */
.rec-note-form { display: flex; flex-direction: column; gap: 0.5rem; margin: 0 0 1rem; }
.rec-note-form .rec-textarea { min-height: 5rem; }
.rec-note-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; }
.rec-notelist { list-style: none; margin: 0; padding: 0; }
.rec-notelist > li { padding: 0.75rem 0; border-top: 1px solid var(--pp-line, var(--hs-line)); }
.rec-notelist > li:last-child { padding-bottom: 0; }
.rec-notelist__by { display: flex; align-items: baseline; gap: 0.6rem; margin: 0 0 0.25rem; font-size: 0.78rem; }
.rec-notelist__who { font-weight: 600; color: var(--hs-ink); }
.rec-notelist__when { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-notelist__by .rec-note__lock { margin-left: auto; }
.rec-notelist__body { margin: 0; max-width: 72ch; font-size: 0.86rem; line-height: 1.6; color: var(--hs-ink); }

/* -- 16 · Interview details: two columns, stacking on a narrow column ---- */
.rec-facts { container-type: inline-size; }
.rec-facts__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.55rem 1.5rem; margin: 0; }
.rec-facts__item { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: 0.75rem; min-width: 0; }
.rec-facts__item--wide { grid-column: 1 / -1; }
.rec-facts__item dt { font-family: var(--ub-font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-ink-faint); padding-top: 0.2rem; }
.rec-facts__item dd { margin: 0; font-size: 0.86rem; color: var(--hs-ink); min-width: 0; overflow-wrap: anywhere; }
@container (max-width: 34rem) {
  .rec-facts__grid { grid-template-columns: minmax(0, 1fr); }
}

/* -- 16 · Feedback questions: one stacked list with a hanging number ----- */
.rec-qstack .rec-question {
  position: relative; border: 0; border-top: 1px solid var(--pp-line, var(--hs-line)); border-radius: 0;
  padding: 1.1rem 0 1.25rem 2.4rem; margin: 0; min-width: 0;
}
.rec-qstack .rec-question + .rec-question { margin-top: 0; }
.rec-qstack .rec-question:first-child { border-top: 0; padding-top: 0.25rem; }
.rec-qstack .rec-question:first-child .rec-question__n { top: 0.55rem; }
.rec-qstack .rec-question__prompt { float: left; width: 100%; margin: 0 0 0.7rem; font-size: 0.95rem; }
.rec-qstack .rec-question__prompt + * { clear: both; }
.rec-qstack .rec-question__n { position: absolute; left: 0; top: 1.4rem; margin: 0; }
.rec-qstack .rec-question__comment { margin-top: 0.8rem; }
.rec-qstack .rec-textarea { min-height: 5.5rem; field-sizing: content; max-height: 22rem; }
.rec-qstack .rec-recs { max-width: 34rem; }
.rec-qstack .rec-answer__a { margin: 0.55rem 0 0; font-size: 0.86rem; line-height: 1.6; color: var(--hs-ink); }
.rec-qstack .rec-answer__v { margin-left: 0.5rem; font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-soft); }

.rec-question__error { margin: 0.5rem 0 0; font-size: 0.78rem; font-weight: 600; color: var(--ub-danger); }
.rec-question--error .rec-question__n { color: var(--ub-danger); }
.rec-question--error .rec-scale__opt { border-color: color-mix(in srgb, var(--ub-danger) 40%, transparent); }

.rec-form__submit {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0.25rem -1rem -1rem; padding: 0.9rem 1rem;
  border-top: 1px solid var(--pp-line, var(--hs-line)); background: #faf9fd;
}
.rec-form__submit .rec-form__help { flex: 1 1 18rem; }

/* -- 16 · Overall recommendation: soft rose to clear green, by value ------
   Added 2026-09-23 by V10, decided by the requester. The modifier names the
   stored value, never a position, so the tint cannot drift from its meaning if
   the options are reordered. Labels stay in ink (AA on every tint); the chosen
   option takes an ink ring so it reads against the tints, and the radio keeps
   the shell's focus ring. The form only: 09's rows and the revision diff keep
   .rec-feedback__rec. */
.rec-recs__opt--strong_no_hire { --rec-tint: #fbe4e8; --rec-edge: #e6b3bd; }
.rec-recs__opt--no_hire { --rec-tint: #fdf1f3; --rec-edge: #efd0d6; }
.rec-recs__opt--hire { --rec-tint: #edf7ef; --rec-edge: #bfdfc6; }
.rec-recs__opt--strong_hire { --rec-tint: #dcf1e1; --rec-edge: #93cca0; }
.rec-recs .rec-recs__opt { background: var(--rec-tint); border-color: var(--rec-edge); color: var(--hs-ink); }
.rec-recs .rec-recs__opt:hover { border-color: var(--hs-ink-soft); }
.rec-recs .rec-recs__opt:has(input:checked) {
  background: var(--rec-tint); border-color: var(--hs-ink); box-shadow: inset 0 0 0 1px var(--hs-ink); color: var(--hs-ink);
}
.rec-question--error .rec-recs .rec-recs__opt { border-color: color-mix(in srgb, var(--ub-danger) 40%, transparent); }

/* ==========================================================================
   Canvas F — the careers ad screens, 2026-09-24.
   Appended to recruiting.css AFTER canvas E. Every selector here is new;
   canvas A–E are not edited. Promoted from the supplied
   "Job Careers Tab" and "Ad Template Editor" design files (committed in
   37031b00): their inline styles, named. Screens 43
   (a job's Careers page tab) and 44 (the ad template editor) paint from it.
   Corrected on install: .rec-adedit__main's basis is 500px, not the supplied
   520px — beside the app's Settings rail the pane is 898px wide at 1440, and
   520 + 360 + the gap put the preview under the form by two pixels.
   No narrow block: both screens wrap on flex, so this copy and the artboards'
   copy are byte-identical.
   ========================================================================== */

/* -- 43 · A job's Careers page tab --------------------------------------- */
.rec-adtab { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.rec-adtab__main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 5rem; }
.rec-adtab__spacer { flex: 1; }
.rec-adtab__kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: #6d6880; }
.rec-adtab__tpl { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; margin: 0; padding: 0.75rem 1rem; background: #fff; border: 1px solid #d9d1ec; border-radius: 12px; }
.rec-adtab__tpl select { padding: 0.4rem 0.6rem; border: 1px solid #ddd8cf; border-radius: 7px; background: #fff; font: inherit; font-size: 0.875rem; font-weight: 600; color: #1a1330; }
.rec-adtab__note { font-size: 0.78rem; color: #6d6880; }
.rec-adtab__switch { padding: 0.35rem 0.7rem; border: 1px solid #d9d1ec; border-radius: 7px; background: #fff; color: #49338d; font: inherit; font-size: 0.78rem; font-weight: 600; cursor: pointer; }
.rec-adtab__switch:hover { border-color: #49338d; }
.rec-adtab__edit { font-size: 0.8rem; font-weight: 600; color: #49338d; text-decoration: none; }
.rec-adtab__edit:hover { color: #18122b; }
.rec-adtab__copy { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.rec-adtab__ai { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; padding: 1rem 1.1rem; border-radius: 12px; background: #f2effa; border: 1px solid #d9d1ec; color: #18122b; }
.rec-adtab__aiicon { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 9px; background: #fff; border: 1px solid #d9d1ec; }
.rec-adtab__aitext { flex: 1 1 16rem; }
.rec-adtab__aitext strong { font-size: 0.95rem; }
.rec-adtab__aitext span { font-size: 0.82rem; color: #57536a; }
.rec-adtab__aibtn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 1rem; border: 0; border-radius: 7px; background: #49338d; color: #fff; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; }
.rec-adtab__aibtn:hover { background: #18122b; }
.rec-adtab__drafted { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.55rem 0.8rem; border: 1px solid rgba(47, 143, 87, 0.4); border-left: 3px solid #2f8f57; border-radius: 6px; background: #f1f8f4; font-size: 0.82rem; color: #256e43; }
.rec-adtab__refusal { margin: 0; padding: 0.55rem 0.8rem; border: 1px solid rgba(192, 57, 47, 0.4); border-left: 3px solid #c0392f; border-radius: 6px; background: #fdf1f0; font-size: 0.82rem; color: #c0392f; }
.rec-adsec { background: #fff; border: 1px solid #d9d1ec; border-radius: 12px; overflow: hidden; }
.rec-adsec--ai { border-color: #b9acdf; }
.rec-adsec--warn { border-color: rgba(192, 57, 47, 0.45); }
.rec-adsec__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.65rem 1rem; border-bottom: 1px solid #efecf7; }
.rec-adsec__pos { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.7rem; color: #49338d; }
.rec-adsec__head h2 { margin: 0; font-size: 0.92rem; font-weight: 700; }
.rec-adsec__head h2 label { cursor: text; }
.rec-adsec__badge { padding: 0.1rem 0.45rem; border-radius: 999px; border: 1px solid #ddd8cf; color: #57536a; font-size: 0.7rem; font-weight: 600; }
.rec-adsec__ai { padding: 0.1rem 0.45rem; border-radius: 999px; background: #e7e1f4; color: #49338d; font-size: 0.7rem; font-weight: 600; }
.rec-adsec__count { font-size: 0.72rem; color: #6d6880; }
.rec-adsec__gen { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.28rem 0.6rem; border: 1px solid #d9d1ec; border-radius: 7px; background: #fff; color: #49338d; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.rec-adsec__gen:hover { background: #f2effa; border-color: #49338d; }
.rec-adsec__body { display: block; width: 100%; min-height: 8rem; padding: 0.8rem 1rem; border: 0; resize: vertical; font: inherit; font-size: 0.875rem; line-height: 1.6; background: #fff; color: #1a1330; }
.rec-adsec__body:focus-visible { outline: 2px solid #49338d; outline-offset: -2px; }
.rec-adsec__warn { margin: 0; padding: 0.45rem 1rem; border-top: 1px solid #efecf7; background: #fdf1f0; font-size: 0.76rem; color: #c0392f; }
.rec-adtab__bar { position: sticky; bottom: 1rem; z-index: 3; display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.65rem 0.75rem 0.65rem 1rem; border-radius: 12px; background: #f2effa; border: 1px solid #d9d1ec; box-shadow: 0 8px 24px -14px rgba(24, 18, 43, 0.35); }
.rec-adtab__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #2f8f57; }
.rec-adtab__bar--dirty .rec-adtab__dot { background: #9a7d23; }
.rec-adtab__state { font-size: 0.85rem; font-weight: 600; color: #18122b; }
.rec-adtab__sub { font-size: 0.8rem; color: #57536a; }
.rec-adtab__discard { padding: 0.42rem 0.8rem; border: 1px solid #d9d1ec; border-radius: 7px; background: #fff; color: #49338d; font-size: 0.83rem; font-weight: 600; text-decoration: none; }
.rec-adtab__discard:hover { border-color: #49338d; }
.rec-adtab__save { padding: 0.45rem 1rem; border: 0; border-radius: 7px; background: #49338d; color: #fff; font: inherit; font-size: 0.83rem; font-weight: 600; cursor: pointer; }
.rec-adtab__save:hover { background: #18122b; }
.rec-adtab__save:disabled { opacity: 0.45; cursor: default; background: #49338d; }
.rec-adtab__preview { flex: 1 1 380px; min-width: 0; position: sticky; top: 122px; display: flex; flex-direction: column; gap: 0.5rem; }
.rec-adtab__pvhead { display: flex; align-items: center; gap: 0.5rem; }
.rec-adtab__pvhead .rec-adtab__kicker { color: #49338d; }
.rec-adtab__pvhead a { font-size: 0.76rem; font-weight: 600; color: #49338d; text-decoration: none; }
.rec-adtab__pv { border: 1px solid #d9d1ec; border-radius: 12px; overflow: hidden; background: #faf9f7; max-height: calc(100vh - 190px); overflow-y: auto; }
.rec-adtab__pvhero { background: #18122b; color: #fff; padding: 1rem 1rem 1.1rem; }
.rec-adtab__pvdept { margin: 0 0 0.3rem; font-size: 0.58rem; letter-spacing: 0.14em; text-transform: uppercase; color: #e0d394; }
.rec-adtab__pvtitle { margin: 0 0 0.4rem; font-family: "Recurse", "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.25rem; line-height: 1.15; }
.rec-adtab__pvmeta { margin: 0; font-size: 0.72rem; color: rgba(255, 255, 255, 0.72); }
.rec-adtab__pvbody { padding: 1rem; display: flex; flex-direction: column; gap: 0.9rem; }
.rec-adtab__pvlabel { margin: 0 0 0.3rem; font-family: "Recurse", "Playfair Display", Georgia, serif; font-weight: 700; font-size: 0.9rem; }
.rec-adtab__pvtext { margin: 0; font-size: 0.74rem; line-height: 1.6; color: #524d5f; white-space: pre-wrap; overflow-wrap: anywhere; }

/* -- 44 · The ad template editor ----------------------------------------- */
.rec-adedit { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: flex-start; }
.rec-adedit__main { flex: 999 1 500px; min-width: 0; display: flex; flex-direction: column; gap: 1rem; padding-bottom: 5rem; }
.rec-adedit__namecard { background: #fff; border: 1px solid #d9d1ec; border-radius: 12px; padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: 0.55rem; margin: 0; }
.rec-adedit__crumbs { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; font-size: 0.8rem; color: #57536a; }
.rec-adedit__crumbs a { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; color: #49338d; text-decoration: none; }
.rec-adedit__usedby { display: inline-flex; align-items: center; gap: 0.35rem; }
.rec-adedit__usedby strong { color: #1a1330; }
.rec-adedit__namelabel { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: #6d6880; }
.rec-adedit__name { width: 100%; padding: 0.35rem 0.5rem; margin-left: -0.5rem; border: 1px solid transparent; border-radius: 7px; background: transparent; font-family: "Recurse", "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.6rem; letter-spacing: -0.02em; color: #18122b; }
.rec-adedit__name:hover { border-color: #ddd8cf; }
.rec-adedit__name:focus { border-color: #49338d; background: #fff; outline: none; }
.rec-adedit__create { align-self: flex-start; padding: 0.45rem 1rem; border: 0; border-radius: 7px; background: #49338d; color: #fff; font: inherit; font-size: 0.83rem; font-weight: 600; cursor: pointer; }
.rec-adcard { background: #fff; border: 1px solid #d9d1ec; border-radius: 12px; overflow: hidden; }
.rec-adcard__head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.85rem 1.1rem; background: #e7e1f4; border-bottom: 1px solid #d9d1ec; }
.rec-adcard__num { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.68rem; color: #49338d; }
.rec-adcard__head h2 { margin: 0; font-size: 0.95rem; font-weight: 700; color: #18122b; }
.rec-adcard__hint { font-size: 0.8rem; color: #57536a; }
.rec-adcard__sub { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem; padding: 0.7rem 1.1rem 0.35rem; }
.rec-adcard__sub + .rec-adcard__sub, .rec-adlist + .rec-adcard__sub { padding-top: 0.9rem; }
.rec-adcard__kicker { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase; color: #6d6880; }
.rec-adcard__kicker--ink { color: #49338d; }
.rec-adcard__note { font-size: 0.76rem; color: #6d6880; }
.rec-adlist { list-style: none; margin: 0; padding: 0; }
.rec-adrow { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1.1rem; border-bottom: 1px solid #efecf7; background: #fff; }
.rec-adrow:hover { background: #f8f6fd; }
.rec-adrow--q { display: block; padding: 0; }
.rec-adrow--q:hover { background: #fff; }
.rec-adrow__line { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 1.1rem; }
.rec-adrow__line:hover { background: #f8f6fd; }
.rec-adrow--fixed { padding: 0.5rem 1.1rem; }
.rec-adrow--fixed:hover { background: #fff; }
.rec-adrow--add { border-bottom: 0; }
.rec-adrow--add:hover { background: #fff; }
.rec-adrow__grip { display: inline-grid; place-items: center; flex: none; width: 1.2rem; padding: 0; border: 0; background: none; color: #ddd8cf; cursor: grab; }
.rec-adrow__grip:hover { color: #6d6880; }
.rec-adrow__lock { display: inline-grid; place-items: center; flex: none; width: 1.2rem; color: #ddd8cf; }
.rec-adrow__plus { flex: none; width: 1.2rem; text-align: center; color: #49338d; font-weight: 700; }
.rec-adrow__pos { flex: none; min-width: 1.4rem; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.72rem; color: #49338d; }
.rec-adrow__label { flex: 1; min-width: 0; padding: 0.35rem 0.5rem; border: 1px solid transparent; border-radius: 7px; background: transparent; font: inherit; font-size: 0.9rem; font-weight: 700; color: #1a1330; }
.rec-adrow__label:hover { border-color: #ddd8cf; background: #fff; }
.rec-adrow__label:focus { border-color: #49338d; background: #fff; outline: none; }
.rec-adrow__field { flex: 1; min-width: 0; padding: 0.35rem 0.5rem; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.6rem; }
.rec-adrow__name { font-size: 0.9rem; font-weight: 700; color: #1a1330; }
.rec-adrow__name--off { color: #6d6880; }
.rec-adrow__note { font-size: 0.76rem; color: #6d6880; }
.rec-adrow__always { flex: none; padding: 0.28rem 0.6rem; font-size: 0.76rem; font-weight: 600; color: #57536a; background: #f6f5f2; border: 1px solid #ddd8cf; border-radius: 7px; }
.rec-adrow__pad { flex: none; width: 1.9rem; }
.rec-adrow__new { flex: 1; min-width: 0; padding: 0.45rem 0.6rem; border: 1px dashed #d9d1ec; border-radius: 7px; background: #fff; font: inherit; font-size: 0.875rem; }
.rec-adrow__new:focus { border-style: solid; border-color: #49338d; outline: none; }
.rec-adrow__kindpick { padding: 0.42rem 0.5rem; border: 1px solid #ddd8cf; border-radius: 7px; background: #fff; font: inherit; font-size: 0.8rem; }
.rec-adrow__add { flex: none; padding: 0.4rem 0.75rem; border: 1px solid #d9d1ec; border-radius: 7px; background: #fff; color: #49338d; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.rec-adrow__add:hover { background: #f2effa; border-color: #49338d; }
.rec-adrow__kind { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; padding: 0.15rem 0.5rem; border-radius: 999px; background: #f6f5f2; color: #57536a; font-size: 0.72rem; font-weight: 600; white-space: nowrap; }
.rec-adrow__answers { display: inline-flex; align-items: center; gap: 0.3rem; flex: none; padding: 0.28rem 0.55rem; border: 1px solid #d9d1ec; border-radius: 7px; background: #fff; color: #49338d; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rec-adrow__answers[aria-expanded="true"] { background: #f2effa; }
.rec-adrow__answers[aria-expanded="true"] svg { transform: rotate(180deg); }
.rec-adrow__retire { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; padding: 0; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #6d6880; cursor: pointer; }
.rec-adrow__retire:hover { border-color: #ddd8cf; color: #c0392f; background: #fff; }
.rec-adseg { display: inline-flex; flex: none; border: 1px solid #ddd8cf; border-radius: 7px; overflow: hidden; }
.rec-adseg__btn { padding: 0.28rem 0.6rem; border: 0; background: #fff; color: #57536a; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.rec-adseg__btn + .rec-adseg__btn { border-left: 1px solid #ddd8cf; }
.rec-adseg__btn[aria-pressed="true"] { background: #49338d; color: #fff; cursor: default; }
.rec-adseg__btn:focus-visible { outline: 2px solid #49338d; outline-offset: -2px; }
.rec-adanswers { margin: 0 1.1rem 0.75rem 3.9rem; padding: 0.6rem 0.75rem; border-left: 2px solid #d9d1ec; background: #faf9fd; border-radius: 0 8px 8px 0; display: flex; flex-direction: column; gap: 0.35rem; }
.rec-adanswers__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; }
.rec-adanswer { display: flex; align-items: center; gap: 0.5rem; }
.rec-adanswer__dot { flex: none; width: 12px; height: 12px; padding: 0; border: 1.5px solid #ddd8cf; border-radius: 50%; background: none; cursor: grab; }
.rec-adanswer__label { flex: 1; min-width: 0; padding: 0.3rem 0.5rem; border: 1px solid #eae7e1; border-radius: 7px; background: #fff; font: inherit; font-size: 0.84rem; }
.rec-adanswer__label:focus { border-color: #49338d; outline: none; }
.rec-adanswer__tag { flex: none; padding: 0.24rem 0.55rem; border: 1px solid rgba(47, 143, 87, 0.4); border-radius: 999px; background: #f1f8f4; color: #256e43; font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.rec-adanswer__tag--dq { border-color: rgba(192, 57, 47, 0.32); background: #fdf1f0; color: #c0392f; }
.rec-adanswer__retire { flex: none; padding: 0 0.25rem; border: 0; background: none; color: #6d6880; font: inherit; font-size: 1rem; line-height: 1; cursor: pointer; }
.rec-adanswer__retire:hover { color: #c0392f; }
.rec-adanswers__add { display: flex; gap: 0.5rem; margin: 0.2rem 0 0; }
.rec-adanswers__add input { flex: 1; min-width: 0; padding: 0.3rem 0.5rem; border: 1px dashed #d9d1ec; border-radius: 7px; background: #fff; font: inherit; font-size: 0.84rem; }
.rec-adanswers__add input:focus { border-style: solid; border-color: #49338d; outline: none; }
.rec-adanswers__add button { padding: 0.28rem 0.65rem; border: 1px solid #d9d1ec; border-radius: 7px; background: #fff; color: #49338d; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.rec-adanswers__help { font-size: 0.72rem; color: #6d6880; }
.rec-adretired { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 1.1rem; border-top: 1px solid #d9d1ec; background: #faf9fd; font-size: 0.78rem; color: #57536a; }
.rec-adanswers .rec-adretired { padding: 0.35rem 0 0; border-top: 0; background: none; }
.rec-adretired__chip { display: inline-flex; gap: 0.35rem; padding: 0.15rem 0.5rem; border: 1px dashed #ddd8cf; border-radius: 999px; background: #fff; color: #6d6880; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; }
.rec-adretired__chip:hover { border-color: #49338d; color: #49338d; }
.rec-adedit__preview { flex: 1 1 360px; min-width: 0; position: sticky; top: 122px; display: flex; flex-direction: column; gap: 0.5rem; }
.rec-adedit__pvhead { display: flex; align-items: center; gap: 0.5rem; }
.rec-adedit__pvhead .rec-adtab__kicker { color: #49338d; }
.rec-adedit__pvseg { display: inline-flex; border: 1px solid #d9d1ec; border-radius: 7px; overflow: hidden; background: #fff; }
.rec-adedit__pvseg button { padding: 0.22rem 0.55rem; border: 0; background: #fff; color: #57536a; font: inherit; font-size: 0.72rem; font-weight: 600; cursor: pointer; }
.rec-adedit__pvseg button + button { border-left: 1px solid #d9d1ec; }
.rec-adedit__pvseg button[aria-pressed="true"] { background: #49338d; color: #fff; }
.rec-adedit__pv { border: 1px solid #d9d1ec; border-radius: 12px; overflow: hidden; background: #faf9f7; max-height: calc(100vh - 190px); overflow-y: auto; }
.rec-adedit__pvbrand { display: flex; align-items: baseline; gap: 0.4rem; padding: 0.55rem 0.9rem; background: #18122b; color: #f3f1ec; }
.rec-adedit__pvbrand span:first-child { font-family: "Recurse", "Playfair Display", Georgia, serif; font-weight: 700; font-size: 0.85rem; }
.rec-adedit__pvbrand span + span { font-size: 0.72rem; color: #b9b3c9; }
.rec-adedit__pvhero { padding: 0.9rem 0.9rem 1rem; background: #18122b; color: #fff; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.rec-adedit__pvdept { margin: 0 0 0.3rem; font-family: "Recurse", "Playfair Display", Georgia, serif; font-weight: 700; font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase; color: #e0d394; }
.rec-adedit__pvtitle { margin: 0 0 0.35rem; font-family: "Recurse", "Playfair Display", Georgia, serif; font-weight: 700; font-size: 1.15rem; line-height: 1.15; }
.rec-adedit__pvmeta { margin: 0; font-size: 0.66rem; color: rgba(255, 255, 255, 0.75); }
.rec-adedit__pvbody { padding: 0.9rem; }
.rec-adedit__pvad { display: flex; flex-direction: column; gap: 0.75rem; }
.rec-adedit__pvsec { margin: 0 0 0.35rem; font-family: "Recurse", "Playfair Display", Georgia, serif; font-weight: 700; font-size: 0.85rem; }
.rec-adedit__pvreq { margin-left: 0.3rem; font-family: "Open Sans", sans-serif; font-weight: 600; font-size: 0.62rem; color: #c0392f; }
.rec-adedit__pvline { height: 5px; margin-bottom: 4px; background: #e5e1d8; border-radius: 3px; }
.rec-adedit__pvline:nth-of-type(2) { width: 88%; }
.rec-adedit__pvline:last-child { width: 62%; margin-bottom: 0; }
.rec-adedit__pvform { display: flex; flex-direction: column; gap: 0.7rem; }
.rec-adedit__pvapply { padding-bottom: 0.6rem; border-bottom: 1px solid #e5e1d8; }
.rec-adedit__pvapply p:first-child { margin: 0 0 0.15rem; font-family: "Recurse", "Playfair Display", Georgia, serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: #7a6a2d; }
.rec-adedit__pvapply p + p { margin: 0; font-size: 0.66rem; color: #524d5f; }
.rec-adedit__pvfield { display: flex; flex-direction: column; gap: 0.25rem; }
.rec-adedit__pvlabel { margin: 0; font-size: 0.7rem; font-weight: 600; color: #18122b; }
.rec-adedit__pvmark { color: #c0392f; font-weight: 700; }
.rec-adedit__pvmark--opt { color: #6d6880; font-weight: 400; }
.rec-adedit__pvinput { height: 30px; padding: 0 0.55rem; display: flex; align-items: center; background: #fff; border: 1px solid #d1d0d5; border-radius: 2px; font-size: 0.66rem; color: #6d6880; }
.rec-adedit__pvinput--long { height: 62px; }
.rec-adedit__pvfile { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem; background: #fff; border: 1px dashed #a28e39; border-radius: 2px; }
.rec-adedit__pvfile span { display: flex; flex-direction: column; font-size: 0.6rem; color: #524d5f; }
.rec-adedit__pvfile strong { font-size: 0.68rem; color: #18122b; }
.rec-adedit__pvopts { display: flex; flex-direction: column; gap: 0.3rem; }
.rec-adedit__pvopt { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.55rem; background: #fff; border: 1px solid #d1d0d5; border-radius: 2px; font-size: 0.66rem; color: #18122b; }
.rec-adedit__pvopt::before { content: ""; flex: none; width: 10px; height: 10px; border: 1.5px solid #d1d0d5; border-radius: 50%; }
.rec-adedit__pvhidden { font-size: 0.62rem; font-style: italic; color: #6d6880; }
.rec-adedit__pvsubmit { align-self: flex-start; padding: 0.45rem 0.8rem; border-radius: 2px; background: #18122b; color: #fff; font-size: 0.66rem; font-weight: 700; }

/* ==========================================================================
   Canvas G — Phase 7 (REVISION-02), 2026-09-24: screen 36, the Screening
   review overlay, and screen 01, the Overview, revised.
   Appended to recruiting.css AFTER canvas F. Every selector here is new;
   canvas A–F are not edited. Drawn from REVISION-02 §2.2–§2.4 and the
   approved sketch (prototypes/overview-and-screening-review/overview.html),
   whose rules it restates in the package's names and tokens. Not yet
   installed: slice 7.2 appends it whole, and 7.3 ports 01's markup.

   Canvas sheets load BEFORE the palette, so a `.rec-color` rule beats a rule
   here at equal specificity. The selectors below that are one step heavier
   than they look are so for that reason alone, and each says so.

   PORT NOTE: the narrow block (max-width: 1100px) is `@media` here. The
   artboard copy states it as `@container` so each 1440px artboard answers to
   its own width; in Django the viewport IS the frame. Do not sync that rule in
   either direction.

   ========================================================================== */

/* -- 36 · The layer: a scroll container over the host, under the shell's bar */
.rec-review {
  position: fixed; inset: 56px 0 0; z-index: 42;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem;
}
.rec-review__backdrop { position: fixed; inset: 56px 0 0; background: rgba(26, 19, 48, 0.5); }
.rec-review__panel {
  position: relative; max-width: 1240px; margin: 0 auto;
  padding: 1.1rem 1.4rem 1.4rem;
  background: #fff; border: 1px solid var(--hs-line); border-radius: 18px;
  box-shadow: 0 20px 50px -30px rgba(24, 18, 43, 0.33);
}

/* -- The bar: which job, whose rows, and the way out ---------------------- */
.rec-review__bar { display: flex; align-items: center; gap: 0.75rem 1.1rem; flex-wrap: wrap; }
.rec-review__title { flex: 1 1 18rem; min-width: 0; }
.rec-review__kicker {
  margin: 0; font-family: var(--ub-font-mono); font-size: 0.66rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ub-accent);
}
.rec-review__job {
  margin: 0.2rem 0 0; font-family: var(--ub-font-display); font-weight: 700;
  font-size: 1.375rem; line-height: 1.2; color: var(--hs-ink); overflow-wrap: anywhere;
}
.rec-review__client { font-family: var(--ub-font); font-weight: 400; font-size: 0.875rem; color: var(--hs-ink-faint); }
/* A segmented switch whose options are addresses: 36's scope, 01's Upcoming. */
.rec-seg { display: flex; flex-wrap: wrap; padding: 3px; border-radius: 10px; background: var(--hs-hover); }
.rec-seg__opt {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.75rem; border-radius: 8px;
  font-size: 0.78rem; font-weight: 600; text-decoration: none; white-space: nowrap;
}
/* Heavier than it looks: `.rec-color a:not(.button)` paints every link purple. */
.rec-workspace .rec-seg a[aria-current="true"] {
  background: #fff; color: var(--hs-ink); box-shadow: 0 1px 3px rgba(24, 18, 43, 0.13);
}
.rec-seg__n { font-family: var(--ub-font-mono); font-size: 0.68rem; font-weight: 600; opacity: 0.75; }
.rec-review__close {
  gap: 0.35rem; border-color: transparent; border-radius: 999px;
  background: var(--hs-hover); font-size: 0.8rem;
}
.rec-review__close:hover { background: var(--pp-tint-2, #e7e1f4); border-color: transparent; }
.rec-review__close svg { width: 0.85rem; height: 0.85rem; }
.rec-review__progress { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.9rem; }
.rec-review__track { flex: 1; height: 4px; border-radius: 999px; background: var(--hs-hover); overflow: hidden; }
.rec-review__fill { display: block; height: 100%; background: var(--ub-accent); }
.rec-review__pos { font-family: var(--ub-font-mono); font-size: 0.7rem; color: var(--hs-ink-faint); white-space: nowrap; }

/* -- The grid: one card and its acts, beside what the job needs ----------- */
.rec-review__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 1.25rem; margin-top: 1rem; align-items: stretch;
}
.rec-review__main { min-width: 0; }
.rec-review__card {
  padding: 1.25rem 1.4rem 1.35rem;
  border: 1px solid var(--hs-line); border-radius: 14px; background: #fff;
}
.rec-review__head { display: flex; align-items: center; gap: 0.9rem; }
.rec-review__avatar {
  display: grid; place-items: center; flex: none;
  width: 2.9rem; height: 2.9rem; border-radius: 50%;
  background: var(--pp-tint-2, #e7e1f4); color: var(--ub-accent);
  font-size: 0.95rem; font-weight: 700;
}
.rec-review__who { flex: 1; min-width: 0; }
.rec-review__name {
  margin: 0; display: flex; align-items: center; gap: 0.25rem 0.55rem; flex-wrap: wrap;
  font-family: var(--ub-font-display); font-weight: 700; font-size: 1.6rem;
  line-height: 1.15; color: var(--hs-ink); overflow-wrap: anywhere;
}
.rec-review__new { border-color: #bfe3d0; background: #dff1e8; color: #1e6b4c; font-family: var(--ub-font); }
.rec-review__headline { margin: 0.2rem 0 0; font-size: 0.875rem; color: var(--hs-ink-faint); }
.rec-review__bench { flex: none; margin: 0 0 0 auto; text-align: right; }
.rec-review__benchn {
  display: block; font-family: var(--ub-font-display); font-weight: 700; font-size: 1.9rem;
  line-height: 1; font-variant-numeric: tabular-nums; color: var(--hs-ink);
}
.rec-review__benchk { font-family: var(--ub-font-mono); font-size: 0.7rem; color: var(--hs-ink-faint); }
.rec-review__arrival {
  display: flex; align-items: baseline; gap: 0.35rem 0.6rem; flex-wrap: wrap;
  margin: 0.9rem 0 0; padding: 0.6rem 0.75rem; border-radius: 10px;
  background: var(--hs-hover); font-size: 0.85rem; color: var(--hs-ink);
}
.rec-review__arrivalk {
  font-family: var(--ub-font-mono); font-size: 0.64rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ub-accent);
}
.rec-review__quote {
  margin-top: 0.6rem; border-left-width: 3px;
  font-family: var(--ub-font-display); font-style: italic; font-weight: 700;
  font-size: 0.95rem; line-height: 1.5; color: var(--hs-ink);
}
.rec-review__quote .rec-quote__by { font-family: var(--ub-font); font-style: normal; font-weight: 400; }
.rec-review__sec { margin-top: 1rem; }
.rec-review__sec > .rec-subhead { margin: 0 0 0.45rem; }
.rec-review__sechead { display: flex; align-items: baseline; gap: 0.5rem; }
.rec-review__secnote { margin-left: auto; font-family: var(--ub-font); font-size: 0.72rem; letter-spacing: 0; text-transform: none; }

/* -- Screening answers: a disqualifying option is the one red on the card - */
.rec-review__answers {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem 1rem;
  margin: 0; font-size: 0.84rem; color: var(--hs-ink);
}
.rec-review__answers dt { font-weight: 400; color: var(--hs-ink-soft); }
.rec-review__answers dd { margin: 0; text-align: right; }
/* A written answer runs under its question, not beside it: an `auto` column
   sized to a paragraph left the question one word wide (corrected 2026-09-25). */
.rec-review__answers .rec-review__answer--long { grid-column: 1 / -1; }
.rec-review__answers dd.rec-review__answer--long { margin-bottom: 0.25rem; text-align: left; }
.rec-review__dq { color: var(--ub-danger); font-weight: 600; }

/* -- Tags and the three links ---------------------------------------------- */
.rec-review__tagrow { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.rec-review__tagrow > .rec-tags { flex-wrap: wrap; }
.rec-review__tagedit > summary { font-size: 0.75rem; }
.rec-review__tagedit[open] { flex: 1 0 100%; order: 3; }
.rec-review__tagedit > .rec-tagpicker { margin-top: 0.5rem; max-width: 30rem; }
.rec-review__tagacts { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.rec-review__links { display: flex; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.rec-review__links .button { white-space: nowrap; }
.rec-review__notes:not([hidden]) { margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.5rem; }

/* -- From the résumé: parsed fields only, never parsed here --------------- */
/* `rec-cv`, not `rec-review__`: one reading, drawn by 36, 08 and 10g
   (REVISION-03; renamed 2026-09-24 before any screen installed it). */
.rec-cv { display: grid; gap: 0.8rem; }
/* The box is 36's: the card draws the reading in one. Screen 08's panel and
   10g's drawer strip are already a container and draw it bare. */
.rec-cv--boxed {
  padding: 0.9rem 1rem;
  border: 1px solid var(--hs-line); border-radius: 12px; background: #fcfbfe;
}
.rec-cv__current { margin: 0; font-size: 0.95rem; color: var(--hs-ink); }
.rec-cv__since { margin: 0.15rem 0 0; font-size: 0.8rem; color: var(--hs-ink-faint); }
.rec-cv__since strong { color: var(--hs-ink); }
.rec-cv__timeline { display: grid; gap: 0.3rem; margin: 0; padding: 0; list-style: none; }
.rec-cv__career {
  display: grid; grid-template-columns: 8rem minmax(0, 1fr) 5rem; gap: 0.6rem;
  align-items: center; font-size: 0.8rem; color: var(--hs-ink);
}
.rec-cv__co { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-cv__years { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-cv__lane { position: relative; height: 8px; border-radius: 999px; background: var(--hs-hover); }
.rec-cv__span {
  position: absolute; top: 0; bottom: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--pp-mid, #49338d) 50%, #fff); border: 1px solid transparent;
}
.rec-cv__span--now { background: var(--ub-accent); border-color: var(--ub-accent); }
.rec-cv__axis {
  display: flex; justify-content: space-between; margin: 0.1rem 5.6rem 0 8.6rem;
  font-family: var(--ub-font-mono); font-size: 0.64rem; color: var(--hs-ink-faint);
}
.rec-cv__skills { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.rec-cv__skill {
  padding: 0.2rem 0.6rem; border: 1px solid var(--hs-line); border-radius: 6px;
  background: #fff; font-size: 0.76rem; color: var(--hs-ink);
}
.rec-cv__skill--asked { background: #dff1e8; border-color: #bfe3d0; color: #1e6b4c; font-weight: 600; }
.rec-cv__facts { display: flex; gap: 0.5rem 1.75rem; flex-wrap: wrap; margin: 0; font-size: 0.82rem; color: var(--hs-ink); }
.rec-cv__facts dt {
  font-family: var(--ub-font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-cv__facts dd { margin: 0; }

/* -- With Ambush: history, only when there is some ------------------------ */
.rec-review__history { display: grid; gap: 0.35rem; margin: 0; padding: 0; list-style: none; font-size: 0.84rem; color: var(--hs-ink); }
.rec-review__history li { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* -- The four acts, and the step that replaces them ----------------------- */
.rec-review__acts {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1.5fr; gap: 0.6rem; margin-top: 0.9rem;
}
.rec-review__act {
  display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  min-height: 3.4rem; padding: 0.7rem 0.9rem;
  border: 1px solid var(--hs-line); border-radius: 12px; background: #fff;
  font: inherit; font-size: 0.875rem; font-weight: 600; color: var(--hs-ink);
  text-align: left; text-decoration: none; cursor: pointer;
}
.rec-review__act:hover { background: var(--hs-hover); }
.rec-review__act svg { width: 1.05rem; height: 1.05rem; flex: none; }
/* The last column in both layouts: under Advance at four across and at two. */
.rec-review__actnote {
  grid-column: -2 / -1; margin: -0.25rem 0 0; text-align: center;
  font-size: 0.72rem; color: var(--hs-ink-faint);
}
.rec-review__act--reject { color: var(--ub-danger); }
.rec-review__act--reject:hover { background: color-mix(in srgb, var(--ub-danger) 7%, #fff); }
.rec-review__act--advance { background: var(--ub-accent); border-color: var(--ub-accent); color: var(--ub-accent-ink, #fff); }
.rec-review__act--advance:hover { background: var(--ub-accent-hover, #3a2873); }
/* Heavier than it looks: Decide later is an <a>, and the palette paints links purple. */
.rec-review .rec-review__acts a.rec-review__act { color: var(--hs-ink); }
.rec-review__act { transition: transform 0.12s; }
.rec-review__act:active { transform: scale(0.97); }
/* The panel fits the window (corrected 2026-09-25): the bar and the progress
   stay, the card and the requirements scroll inside their own columns, and
   the acts, or the step that replaces them, sit under the card whatever its
   height. A tall card, a parsed résumé especially, used to push them below
   a short window. */
.rec-review__panel { display: flex; flex-direction: column; max-height: 100%; }
.rec-review__bar, .rec-review__progress { flex: none; }
.rec-review__grid { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }
.rec-review__main { display: flex; flex-direction: column; min-height: 0; }
.rec-review__card { flex: 0 1 auto; min-height: 9rem; overflow-y: auto; overscroll-behavior: contain; }
.rec-review__acts, .rec-review__step, .rec-review__done { flex: none; }
.rec-review__req { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }

.rec-review__step {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "q q" "chips chips" "note go";
  gap: 0.6rem 1rem; align-items: start; margin-top: 0.9rem;
  padding: 0.9rem 0.75rem 0.75rem 1rem;
  border: 1px solid var(--hs-line-strong); border-radius: 12px; background: #faf9fd;
}
.rec-review__step--pool { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "q field go"; align-items: center; }
.rec-review__stepq { grid-area: q; margin: 0; line-height: 1.3; }
.rec-review__stepq strong { margin-right: 0.5rem; font-family: var(--ub-font-display); font-size: 0.95rem; color: var(--hs-ink); }
.rec-review__stepq span { font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-review__step--pool .rec-review__stepq strong { display: block; margin: 0; }
.rec-review__chips { grid-area: chips; display: flex; flex-wrap: wrap; gap: 0.4rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.rec-review__chip {
  position: relative; display: inline-flex; align-items: center;
  padding: 0.4rem 0.8rem; border: 1px solid var(--hs-line); border-radius: 999px;
  background: #fff; font-size: 0.8rem; color: var(--hs-ink); white-space: nowrap; cursor: pointer;
}
.rec-review__chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.rec-review__chip:hover { border-color: var(--hs-line-strong); background: var(--hs-hover); }
.rec-review__chip:has(input:checked) { background: var(--ub-accent); border-color: var(--ub-accent); color: var(--ub-accent-ink, #fff); }
.rec-review__chip:has(input:focus-visible) { outline: 2px solid var(--ub-accent); outline-offset: 2px; }
.rec-review__notefield { grid-area: note; min-width: 0; }
.rec-review__notefield .rec-input { height: 2.6rem; }
.rec-review__notefield .rec-input[aria-invalid="true"] { border-color: color-mix(in srgb, var(--ub-danger) 45%, transparent); }
.rec-review__steperror { margin: 0.35rem 0 0; font-size: 0.78rem; font-weight: 600; color: var(--ub-danger); }
.rec-review__field { grid-area: field; display: flex; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.rec-review__field .rec-select { height: 2.6rem; min-width: 18rem; font-size: 0.85rem; }
.rec-review__field .rec-input { flex: 1 1 14rem; width: auto; height: 2.6rem; }
.rec-review__stepacts { grid-area: go; display: flex; gap: 0.5rem; align-self: start; }
.rec-review__stepacts .button { height: 2.6rem; padding: 0 1rem; font-size: 0.85rem; }
.rec-review__confirm--reject { background: var(--ub-danger); border-color: var(--ub-danger); color: #fff; }
.rec-review__confirm--reject:hover { background: #a1302a; border-color: #a1302a; color: #fff; }

/* -- End of the queue ------------------------------------------------------ */
.rec-review__done {
  display: grid; place-items: center; align-content: center; gap: 0.5rem;
  min-height: 22rem; padding: 2rem; text-align: center;
  border: 1px solid var(--hs-line); border-radius: 14px; background: #fff;
}
.rec-review__donetitle { margin: 0; font-family: var(--ub-font-display); font-weight: 700; font-size: 1.4rem; color: var(--hs-ink); }
.rec-review__donesub { margin: 0; font-size: 0.875rem; color: var(--hs-ink-faint); }
.rec-review__doneacts { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-top: 0.75rem; }

/* -- Beside the card: what the job needs ---------------------------------- */
.rec-review__req {
  display: flex; flex-direction: column; min-width: 0; padding: 1rem 1.1rem;
  border: 1px solid var(--hs-line); border-radius: 14px; background: #fff;
}
.rec-review__reqhead { margin: 0.9rem 0 0.25rem; font-family: var(--ub-font-display); font-weight: 700; font-size: 0.875rem; color: var(--hs-ink); }
.rec-review__marks { display: grid; margin: 0; padding: 0; list-style: none; }
.rec-review__mark { display: flex; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.82rem; color: #3b3550; }
.rec-review__mark small { display: block; font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-review__tick {
  display: grid; place-items: center; flex: none; width: 18px; height: 18px; margin-top: 1px;
  border-radius: 50%; font-size: 0.7rem; font-weight: 700; color: var(--hs-ink-faint);
}
.rec-review__tick svg { width: 11px; height: 11px; }
.rec-review__mark--yes .rec-review__tick { background: #dff1e8; color: #1e6b4c; }
.rec-review__legend {
  margin: auto 0 0; padding-top: 0.7rem; border-top: 1px solid var(--hs-line);
  font-family: var(--ub-font-mono); font-size: 0.68rem; line-height: 1.5; color: var(--hs-ink-faint);
}
.rec-review__legend + .rec-review__legend { margin-top: 0.25rem; padding-top: 0; border-top: 0; }

/* -- 01 · The Overview, revised (REVISION-02 §2.4) ------------------------ */
.rec-ov { display: flex; flex-direction: column; gap: 1.5rem; padding-bottom: 2.5rem; }
.rec-ov__hello { display: flex; align-items: baseline; gap: 0.4rem 0.9rem; flex-wrap: wrap; margin: 0; }
.rec-ov__hi { margin: 0; font-family: var(--ub-font-display); font-weight: 700; font-size: 1.375rem; line-height: 1.2; color: var(--hs-ink); }
.rec-ov__hi em { color: var(--ub-accent); }
.rec-ov__date { font-family: var(--ub-font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--hs-ink-faint); }
.rec-ov__title { margin: 0; font-family: var(--ub-font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.25; color: var(--hs-ink); white-space: nowrap; }
.rec-ov__hint { font-size: 0.8rem; color: var(--hs-ink-faint); }
.rec-ov__spacer { flex: 1; }
.rec-ov__pill {
  font-family: var(--ub-font-mono); font-size: 0.68rem; white-space: nowrap;
  padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--hs-hover); color: var(--ub-accent);
}
.rec-ov__foot { margin: 0.75rem 0 0; font-size: 0.78rem; color: var(--hs-ink-faint); }

/* Screen 01's own colours, the approved sketch's (CONTRACT §5, amended
   2026-09-25): red is stalled and old, yellow is ageing, and the panel marks
   are gold. Scoped here, so no other screen's ramp moves. */
.rec-ov { --rec-ov-hot: #c8553d; --rec-ov-warm: #e0b04a; --rec-ov-ok: #2f8f6a; --rec-ov-gold-bg: #fbf1d9; --rec-ov-gold-ink: #8a6412; }
.rec-ov__date { padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--hs-hover); }
/* Heavier than it looks: the palette's `.rec-color .button` sets the secondary buttons in ink. */
.rec-ov .button:not(.button--primary) { color: var(--ub-accent); border-color: var(--hs-line); }
/* Cards lift under the pointer, as the sketch's do. */
.rec-ov__task, .rec-ov__bcard { transition: transform 0.15s, box-shadow 0.15s; }
.rec-ov__bcard:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(24, 18, 43, 0.25); }
.rec-ov__task:hover { transform: translateY(-2px); box-shadow: inset 4px 0 0 var(--rec-ov-hot), 0 8px 24px -12px rgba(24, 18, 43, 0.25); }

/* Needs you now: every card is an obligation, so every card carries the red edge. */
.rec-ov__nowhead { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.6rem; }
.rec-ov__nowhead .rec-eyebrow { margin: 0; }
.rec-ov__badge {
  font-family: var(--ub-font-mono); font-size: 0.72rem; font-weight: 700;
  padding: 0.05rem 0.5rem; border-radius: 999px; background: var(--hs-ink); color: #fff;
}
.rec-ov__now { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.rec-ov__task {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center;
  padding: 0.85rem 1.1rem 0.85rem 1.3rem; border: 1px solid var(--hs-line); border-radius: 14px;
  background: #fff; box-shadow: inset 4px 0 0 var(--rec-ov-hot);
}
.rec-ov__task[hidden] { display: none; }
/* Heavier than it looks: the card's title is a link, and the palette paints links purple. */
.rec-workspace .rec-ov__task a.rec-ov__tasktitle { color: var(--hs-ink); }
.rec-ov__tasktitle { display: block; font-family: var(--ub-font-display); font-weight: 700; font-size: 0.95rem; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ov__tasktitle:hover { text-decoration: underline; }
.rec-ov__tasksub { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--hs-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ov__taskn { margin: 0; text-align: right; }
.rec-ov__taskn b { display: block; font-family: var(--ub-font-display); font-size: 1.5rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--hs-ink); }
.rec-ov__taskn span { font-family: var(--ub-font-mono); font-size: 0.68rem; color: var(--hs-ink-faint); white-space: nowrap; }

/* Your bench: calm by design. No red, no age, no count phrased as debt. */
.rec-ov__benchhead { display: flex; align-items: baseline; gap: 0.4rem 0.75rem; flex-wrap: wrap; margin: 0 0 0.65rem; }
.rec-ov__bench { display: grid; grid-template-columns: repeat(auto-fill, minmax(13.5rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.rec-ov__bcard {
  display: flex; flex-direction: column; gap: 0.35rem; min-width: 0;
  padding: 0.9rem 1rem; border: 1px solid var(--hs-line); border-radius: 14px; background: #fff;
}
.rec-ov__bcard--mine { background: var(--hs-hover); border-color: var(--pp-tint-2, #e7e1f4); }
.rec-ov__bcard .rec-eyebrow { margin: 0; }
.rec-ov__bcard .button { align-self: flex-start; margin-top: auto; }
.rec-ov__bjob { font-size: 0.875rem; font-weight: 700; color: var(--hs-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ov__bsub { margin: 0 0 0.35rem; font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-ov__bnew { font-weight: 600; color: var(--ub-accent); }
.rec-ov__bcount { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.35rem; font-size: 0.8rem; color: var(--hs-ink-faint); }
.rec-ov__bcount b { font-family: var(--ub-font-display); font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; color: var(--hs-ink); }

/* The panels below the two strips: white, rounded, a display-face title. */
.rec-ov__panel { min-width: 0; padding: 1.1rem 1.25rem 1.2rem; border: 1px solid var(--hs-line); border-radius: 14px; background: #fff; }
.rec-ov__head { display: flex; align-items: center; gap: 0.4rem 0.75rem; flex-wrap: wrap; margin-bottom: 0.75rem; }
.rec-ov__table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.84rem; color: var(--hs-ink); }
.rec-ov__table th {
  padding: 0 0.6rem 0.4rem; text-align: left; font-family: var(--ub-font-mono); font-size: 0.62rem;
  font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-ov__table td { padding: 0.6rem; border-top: 1px solid var(--hs-line); vertical-align: middle; min-width: 0; }
.rec-ov__table tbody tr:hover { background: var(--hs-hover); }
.rec-ov__table th, .rec-ov__table .rec-dur { white-space: nowrap; }
/* A header the sketch does not draw: kept for the column widths and for screen readers. */
.rec-ov__table--nohead th { height: 0; padding-block: 0; overflow: hidden; font-size: 0; line-height: 0; }
.rec-ov__table--nohead tbody tr:first-child td { border-top: 0; }
.rec-ov__col--who { width: 24%; } .rec-ov__col--app { width: 31%; } .rec-ov__col--stage { width: 14%; }
.rec-ov__col--proc { width: 12%; } .rec-ov__col--next { width: 19%; }
.rec-ov__col--job { width: 26%; } .rec-ov__col--client { width: 16%; } .rec-ov__col--pipe { width: 44%; } .rec-ov__col--bench { width: 14%; }
.rec-ov__table tr[hidden] { display: none; }
/* Heavier than it looks: the name is a link, and the palette paints links purple. */
.rec-workspace .rec-ov a.rec-who__name { font-weight: 700; color: var(--hs-ink); }
.rec-workspace .rec-ov .rec-who__avatar { background: var(--pp-tint-2, #e7e1f4); color: var(--ub-accent); }
.rec-ov__age .rec-days { color: var(--hs-ink); }
.rec-ov__app { display: flex; align-items: center; gap: 0.5rem; min-width: 0; text-decoration: none; }
.rec-ov__stage {
  flex: none; font-family: var(--ub-font-mono); font-size: 0.68rem; white-space: nowrap;
  padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--hs-hover); color: var(--ub-accent);
}
.rec-ov__job { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--hs-ink); }
.rec-ov__age { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.rec-ov__bar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--hs-hover); overflow: hidden; }
.rec-ov__fill { display: block; height: 100%; border-radius: inherit; background: var(--ub-accent); }
.rec-ov__fill--warm { background: var(--rec-ov-warm); }
.rec-ov__fill--hot { background: var(--rec-ov-hot); }
.rec-ov__next { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--hs-ink-faint); }
.rec-ov__flag { font-family: var(--ub-font-mono); font-size: 0.68rem; padding: 0.1rem 0.5rem; border-radius: 999px; white-space: nowrap; }
.rec-ov__flag--owed { background: #f8e1db; color: #9c3a25; }
.rec-ov__flag--none { background: var(--rec-ov-gold-bg); color: var(--rec-ov-gold-ink); }
.rec-ov__showmore {
  display: block; width: 100%; margin-top: 0.4rem; padding: 0.5rem;
  border: 1px dashed var(--hs-line); border-radius: 8px; background: transparent;
  font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--ub-accent); cursor: pointer;
}
.rec-ov__showmore:hover { border-color: var(--hs-line-strong); background: var(--hs-hover); }

/* Activity beside Upcoming interviews */
.rec-ov__pair { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 1.1rem; align-items: stretch; }
.rec-ov__feed { margin: 0; padding: 0; list-style: none; }
.rec-ov__feed a, .rec-ov__ivtitle a, .rec-ov__jobname, .rec-ov__foot a { text-decoration: none; }
.rec-ov__feed a:hover, .rec-ov__ivtitle a:hover, .rec-ov__jobname:hover, .rec-ov__foot a:hover { text-decoration: underline; }
.rec-ov__event { position: relative; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.6rem; padding: 0.5rem 0; font-size: 0.85rem; color: var(--hs-ink); }
.rec-ov__event::before { content: ""; position: absolute; left: calc(0.625rem - 0.5px); top: 0; bottom: 0; width: 1px; background: var(--hs-line); }
.rec-ov__dot { position: relative; width: 0.6rem; height: 0.6rem; margin: 0.35rem auto 0; border-radius: 50%; background: var(--ub-accent); box-shadow: 0 0 0 4px #fff; }
.rec-ov__dot--hired { background: var(--rec-ov-ok); }
.rec-ov__dot--rejected { background: var(--rec-ov-hot); }
.rec-ov__dot--quiet { background: var(--pp-tint-2, #e7e1f4); }
.rec-ov__event--new .rec-ov__dot { box-shadow: 0 0 0 4px #fff, 0 0 0 6px color-mix(in srgb, var(--ub-accent) 30%, transparent); }
.rec-ov__when { display: block; margin-top: 0.1rem; font-family: var(--ub-font-mono); font-size: 0.7rem; color: var(--hs-ink-faint); }
.rec-ov__new {
  display: inline-block; margin-top: 0.3rem; padding: 0.02rem 0.4rem; border-radius: 999px;
  background: var(--ub-accent); color: var(--ub-accent-ink, #fff); font-family: var(--ub-font-mono); font-size: 0.62rem;
}
.rec-ov__out--hired { font-weight: 700; color: var(--rec-ov-ok); }
.rec-ov__out--rejected { font-weight: 700; color: var(--rec-ov-hot); }
.rec-ov__since {
  display: flex; align-items: center; gap: 0.6rem; margin: 0.35rem 0;
  font-family: var(--ub-font-mono); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ub-accent);
}
.rec-ov__since::before, .rec-ov__since::after { content: ""; flex: 1; border-top: 1px dashed var(--hs-line-strong); }
.rec-ov__ivs { margin: 0; padding: 0; list-style: none; }
.rec-ov__iv { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.65rem 0; border-top: 1px solid var(--hs-line); }
.rec-ov__day { margin: 0; padding: 0.25rem 0; border-radius: 10px; background: var(--hs-hover); text-align: center; }
.rec-ov__dow { display: block; font-family: var(--ub-font-mono); font-size: 0.6rem; text-transform: uppercase; color: var(--ub-accent); }
.rec-ov__dnum { display: block; font-family: var(--ub-font-display); font-weight: 700; font-size: 1.25rem; line-height: 1; color: var(--hs-ink); }
.rec-ov__ivtitle { margin: 0; font-size: 0.875rem; color: var(--hs-ink); }
/* Heavier than it looks: the interview is a link, and the palette paints links
   purple at the same weight as `.rec-workspace .rec-ov__ivtitle a`, which lost
   on sheet order in the app (corrected 2026-09-25). */
.rec-workspace .rec-ov__ivtitle a:not(.button) { color: var(--hs-ink); }
.rec-ov__ivsub { display: block; font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-ov__mark {
  font-family: var(--ub-font-mono); font-size: 0.62rem; white-space: nowrap;
  padding: 0.05rem 0.45rem; border-radius: 999px; background: var(--rec-ov-gold-bg); color: var(--rec-ov-gold-ink);
}

/* My jobs: past Screening only, active and stalled, on one shared scale. */
.rec-ov__legend { display: flex; gap: 0.75rem; font-family: var(--ub-font-mono); font-size: 0.68rem; color: var(--hs-ink-faint); }
.rec-ov__key { display: inline-flex; align-items: center; gap: 0.3rem; }
.rec-ov__key::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 2px; background: var(--ub-accent); }
.rec-ov__key--stalled::before { background: var(--rec-ov-hot); }
.rec-ov__jobname { display: block; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ov__client { display: block; color: var(--hs-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ov__pipe { display: flex; align-items: center; gap: 0.75rem; }
.rec-ov__stack { flex: 1; display: flex; height: 10px; border-radius: 999px; overflow: hidden; }
.rec-ov__seg { display: block; height: 100%; background: var(--ub-accent); }
.rec-ov__seg--stalled { background: var(--rec-ov-hot); }
.rec-ov__pipen { flex: none; width: 6.5rem; font-family: var(--ub-font-mono); font-size: 0.72rem; white-space: nowrap; }
.rec-ov__stalledn { color: var(--rec-ov-hot); }
.rec-ov__nobody { flex: 1; font-size: 0.78rem; font-style: italic; color: var(--hs-ink-faint); }
.rec-ov__bench-n { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-faint); white-space: nowrap; }

/* Motion, REVISION-02 §2.4: once, on a full page load. The server adds
   rec-ov--enter to that render only, so an HTMX swap does not replay it.
   The stagger index travels with the markup as --i. */
@keyframes rec-ov-rise { from { opacity: 0; transform: translateY(10px); } }
@keyframes rec-ov-grow { from { transform: scaleX(0); } }
.rec-ov--enter > * { animation: rec-ov-rise 250ms cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i, 0) * 60ms); }
.rec-ov--enter .rec-ov__fill,
.rec-ov--enter .rec-ov__stack { transform-origin: left; animation: rec-ov-grow 700ms cubic-bezier(0.2, 0.7, 0.2, 1) 300ms both; }
/* Screen 36 fades and rises in when a Review button opens it, and only then:
   rec-review-overlay.js adds rec-review--enter, so an act, which reloads the
   host under the overlay, draws it still. */
@keyframes rec-review-fade { from { opacity: 0; } }
@keyframes rec-review-rise { from { opacity: 0; transform: translateY(24px) scale(0.985); } }
.rec-review--enter .rec-review__backdrop { animation: rec-review-fade 200ms ease both; }
.rec-review--enter .rec-review__panel { animation: rec-review-rise 280ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .rec-ov--enter > *,
  .rec-ov--enter .rec-ov__fill,
  .rec-ov--enter .rec-ov__stack,
  .rec-review--enter .rec-review__backdrop,
  .rec-review--enter .rec-review__panel { animation: none; }
  .rec-ov__task, .rec-ov__bcard, .rec-review__act { transition: none; }
  .rec-ov__task:hover, .rec-ov__bcard:hover, .rec-review__act:active { transform: none; }
}

@media (max-width: 1100px) {
  .rec-review { padding: 1.25rem 1rem; }
  .rec-review__grid { grid-template-columns: minmax(0, 1fr) 16rem; gap: 1rem; }
  .rec-review__acts { grid-template-columns: 1fr 1fr; }
  .rec-review__step--pool { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "q q" "field go"; }
  .rec-review__field .rec-select { min-width: 0; flex: 1 1 12rem; }
  .rec-cv__career { grid-template-columns: 6.5rem minmax(0, 1fr) 4.6rem; }
  .rec-cv__axis { margin: 0.1rem 5.2rem 0 7.1rem; }
  .rec-ov__pair { grid-template-columns: minmax(0, 1fr); }
  .rec-ov__now { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
  .rec-ov__app { flex-wrap: wrap; row-gap: 0.2rem; }
  .rec-ov__job, .rec-ov__jobname { white-space: normal; }
  .rec-ov__col--who { width: 23%; } .rec-ov__col--app { width: 28%; } .rec-ov__col--stage { width: 13%; }
  .rec-ov__col--proc { width: 15%; } .rec-ov__col--next { width: 21%; }
  .rec-ov__col--job { width: 31%; } .rec-ov__col--client { width: 15%; } .rec-ov__col--pipe { width: 38%; } .rec-ov__col--bench { width: 16%; }
  .rec-ov__pipen { width: 5.5rem; }
}

/* A short window gives the card the height: the chrome and the acts tighten,
   so a 560px-tall window shows more than the card's head (2026-09-25).
   Last, so it wins over the narrow block's padding. */
@media (max-height: 700px) {
  .rec-review { padding: 0.75rem 1rem; }
  .rec-review__panel { padding: 0.75rem 1.1rem 0.9rem; }
  .rec-review__progress, .rec-review__grid { margin-top: 0.5rem; }
  .rec-review__acts { gap: 0.4rem; margin-top: 0.5rem; }
  .rec-review__act { min-height: 2.4rem; padding: 0.35rem 0.75rem; font-size: 0.82rem; }
  .rec-review__actnote { margin-top: -0.15rem; font-size: 0.68rem; }
}

/* ==========================================================================
   Canvas H — Phase 8 (REVISION-03), 2026-09-24: the résumé reading on
   screens 08 and 10g, and tag promotion on every screen that draws one.
   Appended to recruiting.css AFTER canvas G by slice 8.2 (plan §14.36). Every
   selector here is new; canvas G's `rec-cv` block is the reading itself and
   is not restated. It has no narrow block, so the artboard copy is identical.
   ========================================================================== */

/* -- A skill that promotes to a tag (REVISION-03 question 6) ---------------
   The chip stays G's `li.rec-cv__skill`; the link fills it, so the whole chip
   is the target and not only its word. */
.rec-cv__promote {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin: -0.2rem -0.6rem; padding: 0.2rem 0.6rem; border-radius: 6px;
  color: inherit; text-decoration: none;
}
.rec-cv__promote svg, .rec-cv__skill--tagged svg { width: 0.7rem; height: 0.7rem; flex: none; }
.rec-cv__promote svg { color: var(--ub-accent); }
.rec-cv__skill--asked .rec-cv__promote svg { color: #1e6b4c; }
.rec-cv__skill:has(> .rec-cv__promote:hover) { border-color: var(--ub-accent); }
.rec-cv__promote:focus-visible { outline: 2px solid var(--ub-accent); outline-offset: 2px; }
/* Already a tag on this candidate: no link, and a check says so. It greys
   only a skill the job does not ask for — on 36 green outranks it. */
.rec-cv__skill--tagged { display: inline-flex; align-items: center; gap: 0.35rem; }
.rec-cv__skill--tagged:not(.rec-cv__skill--asked) { color: var(--hs-ink-soft); background: var(--hs-hover); }

/* -- The drawer (10g) ------------------------------------------------------
   G narrows the timeline at a 1100px viewport; the drawer is 468px at every
   viewport, so it takes G's narrow columns on its own. */
.rec-drawer .rec-cv__career { grid-template-columns: 6.5rem minmax(0, 1fr) 4.6rem; }
.rec-drawer .rec-cv__axis { margin: 0.1rem 5.2rem 0 7.1rem; }

/* ==========================================================================
   Canvas I — slice 7.4 (REVISION-02 §2.5), 2026-09-27: what a screen reached
   from a Recruiting tab needs once its page head is gone. Appended to
   recruiting.css AFTER canvas H by card 7.4c (plan §14.39). Every selector
   here is new. It has no narrow block, so the artboard copy is identical.
   ========================================================================== */

/* -- The ? disclosure (plan §14.39, contradiction 3) -----------------------
   A `<details>`, not a hover tooltip: a click opens it, Tab reaches its
   summary, and it needs no JavaScript. The body floats, so opening it moves
   nothing beneath. */
.rec-tip { position: relative; }
.rec-tip > summary {
  display: inline-flex; align-items: center; gap: 0.4rem;
  list-style: none; cursor: pointer; border-radius: 6px;
}
.rec-tip > summary::-webkit-details-marker { display: none; }
.rec-tip > summary:focus-visible { outline: 2px solid var(--ub-accent); outline-offset: 2px; }
.rec-tip__mark {
  display: inline-grid; place-items: center; flex: none;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 1px solid var(--hs-line-strong); background: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 1; color: var(--hs-ink-soft);
}
.rec-tip > summary:hover .rec-tip__mark,
.rec-tip[open] .rec-tip__mark { border-color: var(--hs-ink-soft); color: var(--hs-ink); }
.rec-tip__body {
  position: absolute; z-index: 20; top: calc(100% + 0.35rem); left: 0;
  width: 15rem; margin: 0; padding: 0.6rem 0.75rem;
  background: var(--hs-surface); border: 1px solid var(--hs-line-strong); border-radius: 8px;
  box-shadow: 0 12px 28px -14px rgba(26, 19, 48, 0.35);
  font-size: 0.8rem; line-height: 1.5; color: var(--hs-ink-soft);
}

/* At the end of a row the body opens leftward, so it stays inside the panel
   rather than pushing the page sideways (06's Read-only, added 2026-09-27). */
.rec-tip--end .rec-tip__body { left: auto; right: 0; width: 22rem; }

/* Settings' ? opens the rail. It reads as the rail's caption rather than a
   fourth group, so it takes sentence case and a rule under it. */
.rec-rail__about { margin-bottom: 0.2rem; border-bottom: 1px solid var(--hs-line); }
.rec-rail__about > summary {
  display: flex; padding: 0.45rem 0.6rem 0.55rem;
  font-size: 0.8rem; font-weight: 600; color: var(--hs-ink-soft);
}

/* -- A filter row keeps Apply with its filters (requester, 2026-09-27) -----
   The spacer pushed the count and Apply to the row's far edge, so a row that
   wrapped stranded them on a line of their own (06, 07). They now follow the
   last filter, and only a create link ending the row keeps to the right. The
   applied-filters strip keeps its own spacer. */
.rec-filters > .rec-filters__spacer { display: none; }
.rec-filters > a.button:last-child { margin-left: auto; }

/* -- A mode's banner carries the mode's buttons (§11.1 amendment 4) -------- */
.rec-readonly-note__acts {
  display: flex; align-items: center; gap: 0.5rem; flex: none; margin-left: auto;
}

/* -- A control at the end of a tab row (§11.1 amendment 2, 14a) ----------- */
.rec-jobtabs__end { margin-left: auto; align-self: center; }

/* ==========================================================================
   Canvas J — REVISION-04 (Jobs), 2026-09-29: screen 02 as option D, job
   tiles. Appended to recruiting.css AFTER canvas I by card J2
   (docs/plans/recruiting-overview-look.md). Every selector here is new; it
   restates the inline styles of the approved sketch
   (prototypes/jobs-overview-look/d-job-tiles-2.html and -6.html) as rules,
   on top of canvas G's rec-ov parts, which the page borrows whole. It has no
   narrow block, so the artboard copy is identical.

   Canvas sheets load BEFORE the palette, so a `.rec-color` rule beats a rule
   here at equal specificity. The selectors below that are one step heavier
   than they look are so for that reason alone, and each says so.
   ========================================================================== */

/* -- The toolbar: search gives way first (REVISION-04 §2.10) ---------------
   8rem to 16rem, so the three rec-seg groups and New job stay on one line
   at 1280 and 1440. */
.rec-jobs__toolbar { padding: 0; }
.rec-jobs__search { flex: 1 1 8rem; min-width: 8rem; max-width: 16rem; }

/* -- One tile per job, two per row at 1440 and 1280, one at 1024 ---------- */
.rec-jobs__tiles { grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr)); gap: 1rem; }
/* The Overview's card, white with its hairline and lifting only under the
   pointer (canvas G), as the requester chose on 2026-09-29 after sketching
   grey, lavender and shadowed tiles. Actions sit on the tile's foot, so they
   line up across a row of tiles, with a little more room below than above. */
.rec-jobs__tile { gap: 0.8rem; padding: 1.15rem 1.3rem 1.4rem; }
/* No red edge on a stalled job (requester, 2026-09-29): its stages' red
   "n stalled" says so, and the order puts it first. */

.rec-jobs__head { display: flex; align-items: flex-start; gap: 0.75rem; }
.rec-jobs__id { min-width: 0; flex: 1; }
/* Balanced, so a title that wraps never leaves one word alone below it. */
.rec-jobs__title { white-space: normal; font-size: 1.45rem; letter-spacing: -0.01em; text-wrap: balance; }
/* Heavier than it looks: the palette paints links purple. */
.rec-workspace .rec-ov a.rec-jobs__link { color: inherit; text-decoration: none; }
/* The whole tile opens the Job Overview (requester, 2026-09-29), because it
   already lifts under the pointer like something to click. A stretched link,
   not an <a> around the tile: the title stays the one link, named by the job,
   and its ::after covers the tile. The two buttons sit above it. The title
   underlines while the pointer is anywhere on the tile, and the focus ring
   moves from the title's text to the tile it now opens. */
.rec-jobs__tile { position: relative; }
.rec-jobs__link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.rec-jobs__actions { position: relative; z-index: 1; }
.rec-workspace .rec-ov a.rec-jobs__link:hover,
.rec-workspace .rec-ov .rec-jobs__tile:hover a.rec-jobs__link,
.rec-workspace .rec-ov a.rec-jobs__link:focus-visible { text-decoration: underline; text-underline-offset: 0.15em; }
.rec-workspace .rec-ov a.rec-jobs__link:focus-visible { box-shadow: none; }
.rec-jobs__tile:has(.rec-jobs__link:focus-visible) { box-shadow: var(--ub-ring); }
.rec-jobs__sub { margin: 0.2rem 0 0; }

/* -- Intake and its two channels (§2.9) -------------------------------------
   The pill is the gate and the loudest thing; the channels are a quiet line
   under it, and the state is in the words as well as the tone. */
.rec-jobs__intake { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.rec-jobs__channels { display: flex; gap: 0.7rem; }
.rec-jobs__channel--on { color: #256e43; }
.rec-jobs__channel--off { color: var(--hs-ink-faint); }

/* -- Seats as a count drawn in marks (§4.1) --------------------------------- */
/* A gold hairline under the seats closes the tile's head: the brand spends
   its gold on hairlines (patterns.md), and this is one (requester, 2026-09-29,
   the tile brainstorm's 05). */
.rec-jobs__seats {
  display: flex; align-items: center; gap: 0.6rem;
  padding-bottom: 0.8rem; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent);
}
/* Filled against vacant reads by shape, a tint against an outline, because
   Job Overview's seat tones carry a number and read at 1.10:1 against each
   other without one. The green is 45%, not solid, so the count stays quieter
   than the red stalled line (requester, 2026-09-29, tile-refinements sketch
   row 3). Scoped here: Job Overview's numbered seats are unchanged. */
.rec-jobs__seats .rec-seat--filled { background: color-mix(in srgb, var(--ub-ok) 45%, #fff); border-color: transparent; }
.rec-jobs__seats .rec-seat--vacant { background: #fff; border: 1.5px solid color-mix(in srgb, var(--ub-ok) 45%, #fff); }

/* -- A column per stage (§2.2, §2.4) ----------------------------------------
   No box around a stage (requester, 2026-09-29, from the tile-refinements
   sketch): a hairline divides one from the next, so the counts, the red
   stalled line and the bars carry the tile rather than thirty faint outlines.
   Screening differs by its content only. Every job's row has the same slots —
   the most stages any job on the page has, which the list states as
   --stages-after — so a stage is the same width on every tile and a job with
   fewer ends short. Screening's slot is a little wider. */
.rec-jobs__stages {
  display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(var(--stages-after, 4), minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.rec-jobs__stage { min-width: 0; padding: 0.1rem 0.75rem 0.2rem; border-left: 1px solid var(--hs-line); }
.rec-jobs__stage:first-child { padding-left: 0; border-left: 0; }
.rec-jobs__stagename {
  display: block; min-height: 2.1em; font-family: var(--ub-font); font-weight: 600;
  line-height: 1.05; white-space: normal;
}
@media (min-width: 1101px) and (max-width: 1439px) {
  .rec-jobs__tiles .rec-jobs__stagename { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Tabular, so a column of figures lines up across the tiles. */
.rec-jobs__count {
  display: block; margin-top: 0.2rem; font-family: var(--ub-font-display); font-size: 1.85rem;
  line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--hs-ink);
}
/* The Overview's red is 4.35:1 on white, under AA for text this small (axe,
   2026-09-29), so the words take --ub-danger (5.43:1); the bar keeps the red,
   which as a mark needs only 3:1. The words are in the mono face, as *waiting*
   beside them is. */
.rec-jobs__stalled { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--ub-danger); }
/* The bar's grey track: an empty stage is an empty track (§2.4). */
.rec-jobs__bar { display: flex; height: 6px; margin-top: 0.4rem; background: var(--hs-hover); }

.rec-jobs__actions { display: flex; gap: 0.5rem; align-items: center; margin-top: auto; }

/* -- Archived, in the Overview's table style (§2.2) ------------------------- */
.rec-jobs__col--job { width: 30%; } .rec-jobs__col--client { width: 18%; } .rec-jobs__col--seats { width: 16%; }
.rec-jobs__col--archived { width: 12%; } .rec-jobs__col--life { width: 9%; }

/* ==========================================================================
   Canvas K — REVISION-04 (Candidates), 2026-09-30: screen 07 and its modes
   as option D. Appended to recruiting.css AFTER canvas J by card C1
   (docs/plans/recruiting-overview-look.md). The approved sketch's inline
   styles and k-line/k-out rules become rec-cands and rec-ov modifiers here.
   Canvas G supplies the Overview parts; the existing rec-table keeps its
   sticky header and stacked layout. The artboard copy is byte-identical.
   ========================================================================== */

.rec-cands__toolbar { --i: 0; padding: 0; }
.rec-cands__toolbar .rec-filters { border-bottom: 0; border-radius: inherit; }
.rec-cands__search { flex: 1 1 8rem; min-width: 8rem; max-width: none; }
.rec-cands__break { flex-basis: 100%; height: 0; }
.rec-cands__select { flex: 1 1 8rem; min-width: 0; }
.rec-cands__select .rec-select { width: 100%; }
.rec-cands__ledger { --i: 1; padding-top: 0.6rem; }
.rec-cands__foot { display: flex; gap: 0.75rem; }

/* A grid keeps +N beside a shrinking job even while the details are open. */
.rec-cands__line { display: grid; grid-template-columns: minmax(0, max-content) auto; justify-content: start; align-items: start; gap: 0.25rem 0.4rem; }
.rec-cands__line > .rec-expand:not([open]) + .rec-expand__lines { display: none; }
.rec-cands__line > .rec-expand__lines { grid-column: 1 / -1; min-width: 0; contain: inline-size; margin-top: 0.1rem; }
.rec-ov .rec-ov__stage--closed { background: none; color: var(--hs-ink-faint); }
.rec-cands .rec-ov__stage { flex: 0 1 auto; min-width: 0; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 1101px) and (max-width: 1439px) {
  .rec-cands .rec-ov__app:has(> .rec-ov__stage--closed) { flex-wrap: wrap; row-gap: 0.2rem; }
  .rec-cands .rec-ov__stage--closed { flex: none; max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}

.rec-cands__job--closed { color: var(--hs-ink-faint); }
.rec-cands__nobody { line-height: 1.25; }
.rec-cands__owner { font-weight: 500; color: var(--hs-ink-soft); max-width: 6.75rem; }
.rec-cands__poolnames { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-cands__created { white-space: nowrap; }

/* Heavier than the palette: only Candidates borrows canvas G's table values. */
.rec-cands .rec-table { table-layout: fixed; font-size: 0.84rem; color: var(--hs-ink); }
.rec-workspace .rec-cands .rec-table thead th {
  padding: 0 0.6rem 0.4rem; background: #fff; border-bottom: 0;
  font-size: 0.62rem; font-weight: 400; letter-spacing: 0.1em; color: var(--hs-ink-faint);
}
.rec-workspace .rec-cands .rec-table tbody td { border-bottom: 0; min-width: 0; vertical-align: top; }
.rec-workspace .rec-cands .rec-table tbody tr:hover { background: var(--hs-hover); }
.rec-workspace .rec-cands .rec-table thead th.rec-cands__col--candidate { width: 20%; }
.rec-workspace .rec-cands .rec-table thead th.rec-cands__col--application { width: auto; }
.rec-cands__col--owner { width: 8rem; }
.rec-cands__col--tags { width: 11rem; }
.rec-cands__col--pools { width: 10%; }
.rec-cands__col--created { width: 6.5rem; }
.rec-cands__col--actions { width: 11rem; }

/* Desktop cell spacing; below this, canvas A owns the stacked grid's spacing. */
@media (min-width: 1101px) {
  .rec-cands .rec-table tbody td { padding: 0.6rem; border-top: 1px solid var(--hs-line); }
}

/* ==========================================================================
   Canvas L — REVISION-04 §2.12 (Candidate profile), 2026-09-30: screen 08
   as F, the person, bold. Appended to recruiting.css AFTER canvas K by card P2
   (docs/plans/recruiting-overview-look.md). F's inline styles and pf rules
   become rec-prof selectors here. Every rule is scoped to .rec-prof, so the
   shared résumé reading on 10g and 36 keeps its own appearance. Canvas G
   supplies the Overview parts; J supplies the title and K the closed mark.
   The package and artboard copies are byte-identical to the installed append.
   ========================================================================== */

.rec-prof.rec-ov > .rec-grid { --i: 1; align-items: start; }
.rec-prof .rec-prof__col { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.rec-prof .rec-prof__answers { display: grid; gap: 0.3rem; margin: 0; font-size: 0.84rem; }
.rec-prof .rec-prof__answers > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.rec-prof .rec-prof__answers dt { color: var(--hs-ink-faint); }
.rec-prof .rec-prof__answers dd { margin: 0; color: var(--hs-ink); }
.rec-prof .rec-prof__fold summary { font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-prof .rec-prof__fold summary { cursor: pointer; }
.rec-prof .rec-prof__fold .rec-prof__answers > div { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 0.3rem; }
.rec-prof .rec-prof__origin { font-size: 0.84rem; color: var(--hs-ink-soft); padding-bottom: 0; }
.rec-prof .rec-prof__origin b { font-weight: 600; color: var(--hs-ink); }
.rec-prof .rec-prof__origin__sep { color: var(--hs-ink-faint); }
.rec-prof .rec-prof__hero { --i: 0; display: grid; gap: 0.85rem; }
.rec-prof .rec-prof__hero__head { display: flex; align-items: center; gap: 1rem; padding-bottom: 0.9rem; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent); }
.rec-prof .rec-prof__hero__id { flex: 1; min-width: 0; }
.rec-prof .rec-prof__hero__headline { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--hs-ink-soft); }
.rec-prof .rec-prof__hero__headline b { font-weight: 600; color: var(--hs-ink); }
.rec-prof .rec-prof__hero__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.rec-prof .rec-prof__hero__row { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.rec-prof .rec-prof__hero__row .rec-field__k { flex: none; width: 3.5rem; margin: 0; }
.rec-prof .rec-prof__sums { margin: 0; padding: 0; list-style: none; }
.rec-prof .rec-prof__sum { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.25rem; padding: 0.7rem 0; border-top: 1px solid var(--hs-line); }
.rec-prof .rec-prof__sum:first-child { border-top: 0; padding-top: 0.2rem; }
.rec-prof .rec-prof__sum .rec-ov__stage { flex: 0 1 auto; min-width: 0; max-width: 12rem; overflow: hidden; text-overflow: ellipsis; }
.rec-prof .rec-prof__sum__sub { font-size: 0.75rem; line-height: 1.45; color: var(--hs-ink-faint); }
.rec-prof .rec-prof__pools { display: grid; gap: 0.45rem; margin: 0; padding: 0; list-style: none; }
.rec-prof .rec-prof__pools li { display: flex; justify-content: space-between; gap: 1rem; }
.rec-prof .rec-prof__sum__sub > span { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; white-space: nowrap; }
.rec-prof .rec-panel { --i: 1; border-radius: 14px; background: #fff; }
/* The palette loads last; the panel in scope keeps F’s white head and foot. */
.rec-prof .rec-panel > .rec-panel__head { margin: 0 1.25rem; padding: 1.1rem 0 0.7rem; background: #fff; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent); }
/* The Applications and Pools cards' heads close on the reading's gold hairline, with no count (requester, 2026-09-30). */
.rec-prof .rec-prof__cardhead { padding-bottom: 0.7rem; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent); }
.rec-prof .rec-panel__title { font-family: var(--ub-font-display); font-size: 1.125rem; }
.rec-prof .rec-panel__hint { font-size: 0.8rem; color: var(--hs-ink-faint); }
.rec-prof .rec-panel__body { padding-top: 0.9rem; }
.rec-prof .rec-prof__pools .rec-ov__jobname { font-family: var(--ub-font); font-size: 0.875rem; font-weight: 500; color: var(--hs-ink); }
.rec-prof .rec-cv__current, .rec-prof .rec-cv__current + .rec-cv__since { display: none; }
.rec-prof .rec-prof__hero__row .muted { font-size: 0.84rem; }
.rec-prof .rec-prof__pooladd { margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--hs-line); }
.rec-prof .rec-prof__pooladd .rec-form__acts { display: flex; gap: 0.5rem; }
.rec-prof .rec-prof__pooladd .rec-select { flex: 1; min-width: 0; }
.rec-prof .rec-prof__col > .rec-ov__panel { --i: 1; }
.rec-prof .rec-prof__col > .rec-ov__panel:has(.rec-prof__pools) { --i: 2; }

/* REVISION-04 §2.12, P5: the profile's contact edit and refused fields. */
.rec-prof .rec-prof__hero__fields { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: start; }
.rec-prof .rec-prof__hero__edit { align-self: start; }
.rec-prof .rec-prof__edit { display: grid; gap: 0.6rem; }
.rec-prof .rec-prof__edit__fields { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.rec-prof .rec-prof__edit__fields .rec-form__field { margin: 0; min-width: 0; }
.rec-prof .rec-prof__edit__note { margin: 0; font-size: 0.78rem; color: var(--hs-ink-faint); }
.rec-prof .rec-prof__edit__acts { display: flex; gap: 0.5rem; }
.rec-prof .rec-prof__edit .rec-input[aria-invalid="true"] { border-color: var(--ub-danger); }
.rec-prof .rec-prof__err { color: var(--ub-danger); }
/* WCAG 1.4.11: fields and the pool select need a 3:1 border. */
.rec-prof .rec-input, .rec-prof .rec-select { border-color: color-mix(in srgb, var(--hs-ink-faint) 75%, #fff); }

/* ==========================================================================
   Canvas M — REVISION-04 §2.13 and §4.27–§4.41, 2026-10-01, card O3.
   S2 supplies 03, J with V3 supplies Edit job, and PA7 supplies 05.
   Appended verbatim after L. Every selector belongs to .rec-jov, .rec-jbd
   or .rec-jed; the drawer is a sibling of .rec-page. Stalled is a red day
   count only. The package and artboard copies are byte-identical.
   ========================================================================== */

.rec-jov .rec-jov__hero { display: grid; gap: 0.9rem; padding: 1.15rem 1.3rem 1.3rem; }
.rec-jov .rec-jov__seatn { color: var(--hs-ink); font-weight: 600; }
.rec-jov .rec-jov__facts { font-size: 0.78rem; color: var(--hs-ink-faint); }
.rec-jov .rec-jov__head { padding-bottom: 0.6rem; margin-bottom: 0.6rem; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent); }
.rec-jov .rec-jov__red { color: var(--ub-danger); }
.rec-jov .rec-days.rec-jov__red { color: var(--ub-danger); }
.rec-jov .rec-ov .rec-jobs__stagename { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-jov .rec-jov__switches { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.rec-jov .rec-jov__switch { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr) auto; align-items: baseline; gap: 0.6rem; font-size: 0.84rem; }
.rec-jov .rec-jov__switch__k { font-family: var(--ub-font-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-ink-faint); }
.rec-jov .rec-jov__switch__v { color: var(--hs-ink-faint); min-width: 0; }
.rec-jov .rec-jov__switch__v--on { color: #256e43; }
.rec-jov .rec-jov__dl { margin: 0; }
.rec-jov .rec-jov__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.rec-jov .rec-jov__under { margin: 0.7rem 0 0; padding: 0.6rem 0 0; list-style: none; border-top: 1px solid var(--hs-line); display: grid; gap: 0.35rem; font-size: 0.8rem; }
.rec-jov .rec-jov__under li { display: grid; min-width: 0; }
.rec-jov .rec-jov__under a { color: var(--hs-ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-jov .rec-jov__under__why { font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-jov .rec-jov__under .rec-jov__red { font-family: var(--ub-font-mono); font-size: 0.72rem; }
.rec-jov .rec-jov__under__more a { font-weight: 400; color: var(--ub-accent); }
.rec-jov .rec-jov__stages .rec-jov__stage { padding-top: 0.25rem; }
.rec-jov .rec-jov__stages .rec-jov__stage:first-child { padding-left: 0; border-left: 0; }
.rec-jov .rec-jov__stages .rec-jov__groups { margin-top: 0.8rem; }
.rec-jov .rec-ov .rec-jov__under--flat a { color: var(--hs-ink); text-decoration: none; }
.rec-jov .rec-ov .rec-jov__under--flat a:hover { text-decoration: underline; text-underline-offset: 0.15em; }
.rec-jov .rec-ov .rec-jov__under__more a { color: var(--ub-accent); font-weight: 500; }
.rec-jov .rec-jov__headline { display: flex; align-items: center; gap: 1rem; padding-bottom: 0.8rem; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent); }
.rec-jov .rec-jov__headline .rec-jobs__seats { padding: 0; border: 0; flex: 1; min-width: 0; }
.rec-jov .rec-jov__screen { display: flex; align-items: baseline; gap: 0.5rem; flex: none; padding-left: 1rem; border-left: 1px solid var(--hs-line); }
.rec-jov .rec-jov__screen b { font-family: var(--ub-font-display); font-size: 1.25rem; }
.rec-jov .rec-jov__screen .button { align-self: center; margin-left: 0.4rem; }
.rec-jov .rec-jov__screen--b { align-items: center; }
.rec-jov .rec-jov__screen__txt { font-size: 0.84rem; color: var(--hs-ink-soft); }
.rec-jov .rec-jov__screen .rec-jov__screen__txt b { font-family: var(--ub-font); font-size: inherit; font-weight: 600; color: var(--hs-ink); }
.rec-jov .rec-jov__screen--b .rec-textbtn { margin-left: 0.25rem; }
.rec-jov .rec-jov__brief { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-jov .rec-jov__brief__go { margin-top: 0.4rem; }
.rec-jov .rec-jov__stages .rec-jov__grp__k { font-family: var(--ub-font); font-size: 0.78rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.rec-jov .rec-jov__stages .rec-jov__grp__k--calm span { font-weight: 400; }
.rec-jov .rec-jov__groups { display: grid; gap: 0.75rem; margin-top: 0.75rem; padding-top: 0.7rem; border-top: 1px solid var(--hs-line); }
.rec-jov .rec-jov__grp { display: grid; gap: 0.3rem; }
.rec-jov .rec-jov__grp__k { margin: 0; font-family: var(--ub-font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rec-ov-gold-ink); }
.rec-jov .rec-jov__grp__k b { font-weight: 600; }
.rec-jov .rec-jov__grp__k--calm { color: var(--hs-ink-faint); }
.rec-jov .rec-jov__grp__k--calm span { text-transform: none; letter-spacing: 0; font-family: var(--ub-font); font-size: 0.75rem; }
.rec-jov .rec-jov__under--flat { margin: 0; padding: 0; border-top: 0; gap: 0.25rem; }
.rec-jov .rec-jov__under--flat li { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; }
.rec-jov .rec-jov__under--flat a { min-width: 0; font-weight: 500; }
.rec-jov .rec-jov__under--flat .rec-jov__under__why, .rec-jov .rec-jov__under--flat .rec-jov__red { flex: none; font-family: var(--ub-font-mono); font-size: 0.7rem; }
.rec-jbd .rec-jbd__stalled { color: var(--ub-danger); }
.rec-jbd .rec-days.rec-jbd__stalled { color: var(--ub-danger); }
.rec-jbd .rec-jbd__columns { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0.85rem; align-items: start; }
.rec-jbd .rec-jbd__col { display: grid; gap: 0.5rem; min-width: 0; padding: 0.75rem; border-radius: 14px; background: color-mix(in srgb, var(--hs-ink) 4%, var(--hs-bg, #f4f2f8)); border: 1px solid var(--hs-line); }
.rec-jbd .rec-jbd__head { display: flex; align-items: baseline; gap: 0.5rem; padding: 0.15rem 0.25rem 0.45rem; }
.rec-jbd .rec-jbd__stage { flex: 1; min-width: 0; margin: 0; font-size: 0.86rem; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.rec-jbd .rec-jbd__n { font-family: var(--ub-font-display); font-size: 1.35rem; line-height: 1; font-variant-numeric: tabular-nums; }
.rec-jbd .rec-jbd__cards { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.rec-jbd .rec-jbd__card { display: grid; gap: 0.3rem; padding: 0.6rem 0.7rem 0.55rem; background: #fff; border: 1px solid var(--hs-line); border-radius: 10px; cursor: grab; transition: transform 0.15s, box-shadow 0.15s; }
.rec-jbd .rec-jbd__card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -12px rgba(24, 18, 43, 0.25); }
.rec-jbd .rec-jbd__top { display: flex; align-items: baseline; gap: 0.5rem; margin: 0; min-width: 0; }
.rec-jbd .rec-ov a.rec-jbd__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: 0.88rem; color: var(--hs-ink); text-decoration: none; }
.rec-jbd .rec-ov a.rec-jbd__name:hover { text-decoration: underline; }
.rec-jbd .rec-jbd__days, .rec-jbd .rec-jbd__top .rec-jbd__stalled { flex: none; font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-jbd .rec-jbd__top .rec-jbd__stalled { color: var(--ub-danger); }
.rec-jbd .rec-jbd__line { display: flex; align-items: center; height: 1.15rem; margin: 0; min-width: 0; font-size: 0.78rem; line-height: 1; }
.rec-jbd .rec-jbd__next { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--hs-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rec-jbd .rec-jbd__next svg { width: 0.85rem; height: 0.85rem; flex: none; color: var(--hs-ink-faint); }
.rec-jbd .rec-jbd__next--act { color: var(--rec-ov-gold-ink); font-weight: 600; }
.rec-jbd .rec-jbd__ownername { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; color: var(--hs-ink-faint); }
.rec-jbd .rec-jbd__card--act { gap: 0.3rem; padding: 0.6rem 0.7rem 0.55rem; }
.rec-jbd .rec-ov a.rec-jbd__act { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; color: var(--hs-ink-soft); font-weight: 400; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-jbd .rec-ov a.rec-jbd__act:hover { color: var(--ub-accent); text-decoration: underline; text-underline-offset: 0.15em; }
.rec-jbd .rec-jbd__act svg { width: 0.85rem; height: 0.85rem; flex: none; color: var(--hs-ink-faint); }
.rec-jbd .rec-ov a.rec-jbd__act--when { color: var(--hs-ink); font-weight: 500; }
.rec-jbd .rec-ov a.rec-jbd__setup { margin-left: auto; min-width: 3.6rem; text-align: center; padding: 0.15rem 0.5rem; border-radius: 6px; font-size: 0.74rem; font-weight: 600; color: var(--ub-accent); text-decoration: none; background: color-mix(in srgb, var(--ub-accent) 8%, #fff); }
.rec-jbd .rec-ov a.rec-jbd__setup:hover { background: color-mix(in srgb, var(--ub-accent) 14%, #fff); }
.rec-jbd .rec-jbd__unowned { flex: 1; font-size: 0.74rem; font-style: italic; color: var(--hs-ink-faint); }
.rec-jbd .rec-jbd__ownerline button.rec-jbd__setup { margin-left: auto; min-width: 3.6rem; padding: 0.15rem 0.5rem; border: 0; border-radius: 6px; font: 600 0.74rem/1.3 var(--ub-font); color: var(--ub-accent); background: color-mix(in srgb, var(--ub-accent) 8%, #fff); cursor: pointer; }
.rec-jbd .rec-jbd__ownerline { box-sizing: border-box; height: 1.7rem; display: flex; align-items: center; margin: 0; padding-top: 0.35rem; border-top: 1px solid var(--hs-line); }
.rec-jed .rec-jed__body { display: grid; gap: 1.4rem; align-content: start; }
.rec-jed .rec-jed__section { display: grid; gap: 0.85rem; }
.rec-jed .rec-jed__section + .rec-jed__section { padding-top: 1.2rem; border-top: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent); }
.rec-jed .rec-jed__heading { margin: 0; font-family: var(--ub-font-display); font-size: 1.05rem; }
.rec-jed .rec-jed__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.rec-jed .rec-jed__field { border-color: color-mix(in srgb, var(--hs-ink-faint) 75%, #fff); }
.rec-jed .rec-jed__marks .rec-seat { box-sizing: border-box; width: 1rem; height: 1rem; border-radius: 3px; }
.rec-jed .rec-jed__marks .rec-seat--filled { background: color-mix(in srgb, var(--ub-ok) 45%, #fff); border-color: transparent; }
.rec-jed .rec-jed__marks .rec-seat--vacant { background: #fff; border: 1.5px solid color-mix(in srgb, var(--ub-ok) 45%, #fff); }
.rec-jed .rec-jed__marks .rec-jed__seat--new { border: 1.5px dashed var(--ub-accent); }
.rec-jed .rec-jed__marks .rec-jed__seat--gone { border: 1.5px dashed var(--hs-ink-faint); background: #fff; opacity: 0.55; }
.rec-jed .rec-jed__split { font-size: 0.8rem; color: var(--hs-ink-faint); }
.rec-jed .rec-jed__button { display: inline-grid; place-items: center; width: 2.25rem; height: 100%; border: 0; background: none; font: 600 1rem/1 var(--ub-font); color: var(--ub-accent); cursor: pointer; }
.rec-jed .rec-jed__button:hover { background: var(--hs-hover); }
.rec-jed .rec-jed__button:disabled { color: var(--hs-ink-faint); opacity: 0.5; cursor: default; background: none; }
.rec-jed .rec-jed__count { font-weight: 600; font-size: 0.9rem; }
.rec-jed .rec-jed__buttons { display: inline-flex; gap: 0.35rem; margin-left: auto; border-color: color-mix(in srgb, var(--hs-ink-faint) 75%, #fff); }
.rec-jed .rec-jed__buttons .rec-jed__button { width: 1.9rem; height: 1.9rem; border: 1px solid color-mix(in srgb, var(--hs-ink-faint) 75%, #fff); border-radius: 50%; }
.rec-jed .rec-jed__effect { margin: 0; padding-top: 0.75rem; border-top: 1px solid var(--hs-line); font-size: 0.84rem; color: var(--hs-ink-soft); }
.rec-jed .rec-jed__step { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.rec-jed .rec-jed__step .rec-jed__buttons { margin: 0; align-items: center; flex: none; }
.rec-jed .rec-jed__step .rec-jed__count { min-width: 4.6em; text-align: center; font-variant-numeric: tabular-nums; }
.rec-jed .rec-jed__step .rec-jed__marks { flex-wrap: wrap; min-width: 0; }
.rec-jed .rec-jed__split { margin: -0.35rem 0 0; }
.rec-jed .rec-jed__effect { min-height: calc(2 * 1.5em + 0.75rem); line-height: 1.5; }
.rec-jed .rec-jed__effect--idle { color: var(--hs-ink-faint); }

/* WCAG 1.4.11: fields and seat buttons keep the sketch's 3:1 border. */
.rec-jed .rec-input, .rec-jed .rec-textarea { border-color: color-mix(in srgb, var(--hs-ink-faint) 75%, #fff); }
.rec-jed .rec-jed__field[aria-invalid="true"] { border-color: var(--ub-danger); }
.rec-jed .rec-jed__error { color: var(--ub-danger); }
.rec-jbd .rec-jbd__col--retired { border-style: dashed; }
@media (prefers-reduced-motion: reduce) {
  .rec-jbd .rec-jbd__card { transition: none; }
  .rec-jbd .rec-jbd__card:hover { transform: none; box-shadow: none; }
}
/* CANVAS N — interview scheduling. Additive only. Load after canvas D.

   Two objects the package had no equivalent for, and nothing else:
     .rec-slideover  a wide panel that slides over the page for one addressed
                     act (?open=log). The decision drawer (§8.2) is 468px;
                     logging an interview now carries a week of the panel's
                     busy blocks, which needs about two thirds of the page.
                     Same scrim (.rec-scrim), same bar objects (.rec-drawer__*),
                     same never-nests rule.
     .rec-week       the panel's busy blocks for seven days: days across, hours
                     down, busy-only (never titles), the chosen time outlined.

   Everything inside them composes existing objects: rec-drawer__bar/__kind/
   __url/__close/__head/__name/__jobline/__foot, rec-grid--main-side, rec-form,
   rec-scale__opt, rec-subhead + rec-dl. Colours are --hs-* / --pp-* tokens and
   TOKENS.md's recorded literals. No @media block: the only width behaviour is
   rec-grid's own, inherited. */

/* -- The slide-over ------------------------------------------------------ */

.rec-slideover {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 41;
  width: min(62rem, calc(100% - 3rem));
  display: flex; flex-direction: column;
  background: #fff; border-left: 1px solid var(--hs-line-strong);
  box-shadow: -18px 0 48px -28px rgba(26, 19, 48, 0.45);
}
.rec-slideover > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.rec-slideover .rec-drawer__url { white-space: nowrap; }
.rec-slideover__body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.25rem 1.4rem; }
.rec-slideover__body > .rec-grid { gap: 1.5rem; }
.rec-slideover__foot {
  display: flex; flex-direction: row; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.25rem; border-top: 1px solid var(--hs-line); background: #faf9fd;
}
.rec-slideover__foot .rec-form__help { margin-right: auto; }

/* -- The week ------------------------------------------------------------
   Seven day columns over a window of hours (12 by default, any hours —
   interviews for Australian clients run at night). Blocks are positioned by
   inline top/height percentages of the window, computed by the view; that is
   data, not style. A block may name who is busy, never what the event is.
   Busy and free stay neutral; only the chosen time is solid purple. */

.rec-week__nav { display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap; margin-bottom: 0.5rem; white-space: nowrap; }
.rec-week {
  display: grid; grid-template-columns: 3rem repeat(7, minmax(0, 1fr));
  border: 1px solid var(--hs-line-strong); border-radius: 8px; overflow: hidden; background: #fff;
}
.rec-week__corner,
.rec-week__day {
  padding: 0.35rem 0.4rem; background: #faf8fd; border-bottom: 1px solid var(--hs-line-strong);
  font-family: var(--ub-font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--hs-ink-faint); white-space: nowrap;
}
.rec-week__day { border-left: 1px solid #efecf7; }
.rec-week__day--on { color: var(--pp-ink); box-shadow: inset 0 -2px 0 var(--pp-mid); }
.rec-week__hours { position: relative; }
.rec-week__hour {
  position: absolute; right: 0.35rem; transform: translateY(-50%);
  font-family: var(--ub-font-mono); font-size: 0.6rem; color: var(--hs-ink-faint);
}
.rec-week__col {
  position: relative; height: 26rem; border-left: 1px solid #efecf7;
  background-image: repeating-linear-gradient(to bottom, #efecf7 0 1px, transparent 1px calc(100% / 12));
}
.rec-week__busy {
  position: absolute; left: 3px; right: 3px; overflow: hidden;
  padding: 0.15rem 0.3rem; border-radius: 4px;
  background: #f6f5fa; border: 1px solid var(--hs-line-strong);
  font-size: 0.64rem; line-height: 1.25; color: var(--hs-ink-soft);
}
.rec-week__busy b { font-weight: 600; color: var(--hs-ink-soft); }
.rec-week__pick {
  position: absolute; left: 1px; right: 1px; z-index: 1;
  padding: 0.15rem 0.3rem; border-radius: 5px;
  border: 2px solid var(--pp-mid); background: var(--pp-mid);
  font-size: 0.64rem; font-weight: 600; line-height: 1.25; color: #fff;
}
.rec-week__legend { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.45rem; font-size: 0.74rem; color: var(--hs-ink-faint); }
.rec-week__key { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.rec-week__key::before {
  content: ""; flex: none; width: 0.8rem; height: 0.6rem; border-radius: 2px;
  background: #f6f5fa; border: 1px solid var(--hs-line-strong);
}
.rec-week__key--pick::before { background: var(--pp-mid); border: 2px solid var(--pp-mid); }
.rec-week__key--free::before { background: #fff; }

/* 45b. The chosen time over someone's busy block. Dashed and unfilled so the
   busy block under it stays readable; the label sits bottom-right so the two
   never overprint. Never red: a clash is a warning, Schedule stays enabled. */
.rec-week__pick--clash {
  display: flex; align-items: flex-end; justify-content: flex-end;
  background: transparent; border-style: dashed; color: var(--pp-ink);
}

/* 45f. The confirmation step: what the slide-over becomes after Schedule.
   A result, not a form — one centred block on the purple tint, then two cards
   (who was invited, what's next). No slide-over foot: each act sits in the
   card it belongs to. Never Recurse (licence): the headline is Open Sans. */
.rec-booked__body { display: flex; flex-direction: column; gap: 1rem; padding-top: 1.5rem; }
.rec-booked {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 2rem 1.5rem 1.6rem; border-radius: var(--ub-radius);
  background: var(--pp-tint); border: 1px solid var(--pp-line);
}
.rec-booked__mark {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 0.8rem;
  border-radius: 50%; background: var(--pp-mid); color: #fff;
}
.rec-booked__mark svg { width: 1.35rem; height: 1.35rem; }
.rec-booked__kicker {
  margin: 0; font-family: var(--ub-font-mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-mid);
}
.rec-booked__when {
  margin: 0.45rem 0 0; font-family: var(--ub-font); font-weight: 700;
  font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.015em; color: var(--pp-ink);
}
.rec-booked__sub { margin: 0.3rem 0 0; font-size: 0.88rem; color: var(--hs-ink-soft); }
.rec-booked__what {
  margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--pp-line);
  font-size: 0.8rem; line-height: 1.55; color: var(--hs-ink-soft);
}
.rec-booked__acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1.1rem; }
.rec-booked__btn { display: inline-flex; align-items: center; gap: 0.45rem; }
.rec-booked__btn.button--ghost { background: transparent; }
.rec-link-option:is(:hover, :focus-visible) { background: var(--ub-accent-hover); border-color: var(--ub-accent-hover); color: var(--ub-accent-ink); }
.rec-booked__btn svg { width: 1rem; height: 1rem; flex: none; }
.rec-booked__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }
.rec-booked__card { padding: 1rem 1.1rem; border: 1px solid var(--hs-line); border-radius: var(--ub-radius); background: #fff; }
.rec-booked__card--next { display: flex; flex-direction: column; }
.rec-booked__guests { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.rec-booked__guest { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.rec-booked__nexttitle {
  display: flex; align-items: center; gap: 0.45rem; margin: 0;
  font-size: 1rem; font-weight: 700; color: var(--hs-ink);
}
.rec-booked__nexttitle svg { width: 1.1rem; height: 1.1rem; flex: none; color: var(--pp-mid); }
.rec-booked__nextbody { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.55; color: var(--hs-ink-soft); }
.rec-booked__cardacts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: auto; padding-top: 1rem; }

/* 37. A scheduled interview on the application: a status strip under the
   interview's header, above its control row. Three columns — calendar, the
   candidate's answer, the confirmation. Gold for what needs doing (not
   notified, event not created); red only for a declined invite, the one
   refusal here. Columns wrap to rows when the panel is narrow. */
.rec-ivstate {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 0 0 0.75rem; border: 1px solid var(--hs-line-strong); border-radius: var(--ub-radius-sm);
  background: #fff; overflow: hidden;
}
.rec-ivstate__row {
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0;
  padding: 0.75rem 0.9rem; border-left: 1px solid var(--hs-line);
}
.rec-ivstate__row:first-child { border-left: 0; }
.rec-ivstate__k {
  font-family: var(--ub-font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-ivstate__v { display: flex; align-items: center; gap: 0.4rem; font-size: 0.88rem; font-weight: 700; color: var(--hs-ink); }
.rec-ivstate__dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.rec-ivstate__sub { font-size: 0.78rem; line-height: 1.5; color: var(--hs-ink-soft); overflow-wrap: anywhere; }
.rec-ivstate__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.45rem; }
.rec-ivstate__row--ok .rec-ivstate__v { color: #256e43; }
.rec-ivstate__row--quiet .rec-ivstate__v { color: var(--hs-ink-soft); }
.rec-ivstate__row--quiet .rec-ivstate__dot { background: transparent; border: 1.5px solid currentColor; }
.rec-ivstate__row--due { background: var(--hs-active); box-shadow: inset 0 0 0 1px var(--hs-gold-border); }
.rec-ivstate__row--due .rec-ivstate__v { color: var(--rec-age-ink); }
.rec-ivstate__row--declined { background: color-mix(in srgb, var(--ub-danger) 7%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ub-danger) 30%, transparent); }
.rec-ivstate__row--declined .rec-ivstate__v { color: var(--ub-danger); }

/* 38. The send dialog. .rec-sendlog: one row per delivery attempt, never
   edited after the fact. The template is a plain .rec-select over the
   library's Scheduling templates. */
.rec-sendlog { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.rec-sendlog__row { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.6rem 0; border-top: 1px solid var(--hs-line); }
.rec-sendlog__row:first-child { border-top: 0; padding-top: 0; }
.rec-sendlog__what { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; font-size: 0.84rem; color: var(--hs-ink); }
.rec-sendlog__when { font-size: 0.76rem; color: var(--hs-ink-soft); overflow-wrap: anywhere; }
.rec-sendlog__acts { margin-left: auto; flex: none; }

/* 38a. The composer. A header on the purple tint (what, for whom, which
   template), then one card shaped like an email: To, From, Subject as rows,
   the plain-text body, Send inside the card. Borderless inputs keep a visible
   focus ring on the row that holds them. */
.rec-mail__head {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.25rem; border-radius: var(--ub-radius);
  background: var(--pp-tint); border: 1px solid var(--pp-line);
}
.rec-mail__headmain { flex: 1 1 18rem; min-width: 0; }
.rec-mail__title { margin: 0.2rem 0 0; font-family: var(--ub-font); font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; color: var(--pp-ink); }
.rec-mail__tpl { display: flex; flex-direction: column; gap: 0.3rem; flex: 0 1 19rem; min-width: 14rem; }
.rec-mail__tpl .rec-select { background-color: #fff; }
.rec-mail__tpl .rec-textbtn { align-self: flex-start; }
.rec-mail { display: flex; flex-direction: column; border: 1px solid var(--hs-line-strong); border-radius: var(--ub-radius); background: #fff; overflow: hidden; }
.rec-mail__row { display: flex; align-items: center; gap: 0.75rem; min-height: 2.9rem; padding: 0.4rem 1.1rem; border-bottom: 1px solid var(--hs-line); }
.rec-mail__row:focus-within { background: #faf9fd; box-shadow: inset 2px 0 0 var(--pp-mid); }
.rec-mail__k {
  flex: none; width: 4.5rem; font-family: var(--ub-font-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-mail__v { min-width: 0; font-size: 0.85rem; color: var(--hs-ink); overflow-wrap: anywhere; }
.rec-mail__input {
  flex: 1; min-width: 0; padding: 0.3rem 0; border: 0; background: transparent;
  font: inherit; font-size: 0.95rem; font-weight: 600; color: var(--hs-ink);
}
.rec-mail__input:focus { outline: none; }
.rec-mail__body {
  display: block; width: 100%; min-height: 22rem; padding: 1rem 1.1rem; border: 0; resize: vertical;
  font: inherit; font-size: 0.92rem; line-height: 1.65; color: var(--hs-ink); background: #fff;
}
.rec-mail__body:focus { outline: none; box-shadow: inset 2px 0 0 var(--pp-mid); background: #fdfcff; }
.rec-mail__foot { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.75rem 1.1rem; border-top: 1px solid var(--hs-line); background: #faf9fd; }
.rec-mail__foot .rec-form__help { flex: 1 1 14rem; }
.rec-mail__facts { display: flex; flex-direction: column; gap: 0.75rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; color: var(--hs-ink); }
.rec-mail__facts li { display: flex; align-items: flex-start; gap: 0.6rem; }
.rec-mail__facts li > span { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.rec-mail__facts svg { flex: none; width: 1.05rem; height: 1.05rem; margin-top: 0.1rem; color: var(--pp-mid); }
.rec-mail__facts .rec-who__sub { white-space: normal; overflow: visible; text-overflow: clip; }

/* 38b. A confirmation that didn't reach the candidate: same red as a declined
   invite — the other refusal on this strip. */
.rec-ivstate__row--failed { background: color-mix(in srgb, var(--ub-danger) 7%, #fff); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ub-danger) 30%, transparent); }
.rec-ivstate__row--failed .rec-ivstate__v { color: var(--ub-danger); }

/* 38c. The change a reschedule makes, old → new, in the composer header. */
.rec-move {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.6rem 0.9rem; border-radius: var(--ub-radius-sm); background: #fff; border: 1px solid var(--pp-line);
}
.rec-move__t { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.95rem; color: var(--pp-ink); white-space: nowrap; }
.rec-move__t--old { color: var(--hs-ink-soft); }
.rec-move__arrow { display: grid; place-items: center; color: var(--pp-mid); }
.rec-move__arrow svg { width: 1.1rem; height: 1.1rem; }

/* 40. Self-scheduling on the same week. The range is a faint band; an offered
   time is outlined purple on the tint (the chosen time in 45 is solid, so the
   two never read alike); a dropped time stays drawn, dashed, to be restored. */
.rec-week__range { position: absolute; left: 0; right: 0; background: #faf8fd; border-block: 1px dashed var(--pp-line); }
.rec-week__slot {
  position: absolute; left: 2px; right: 2px; z-index: 1; padding: 0.15rem 0.3rem; border-radius: 5px;
  border: 1.5px solid var(--pp-mid); background: var(--pp-tint);
  font-size: 0.64rem; font-weight: 600; line-height: 1.25; color: var(--pp-ink);
}
.rec-week__slot--off { border-style: dashed; border-color: var(--hs-line-strong); background: #fff; color: var(--hs-ink-faint); font-weight: 400; text-decoration: line-through; }
/* Choosing on the week (owner, 2026-10-01): every free time is a checkbox, invisible
   until hovered (the way the pick on screen 45 reads) and drawn once chosen. A click
   or a drag chooses; there is no separate list of times. */
.rec-week__slot > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
label.rec-week__slot { cursor: pointer; }
label.rec-week__slot:hover { background: color-mix(in srgb, var(--pp-mid) 22%, #fff); }
.rec-week__slot:has(> input:focus-visible) { outline: 3px solid var(--pp-mid); outline-offset: 1px; z-index: 2; }
.rec-week__slot:has(> input:not(:checked)) { border-color: transparent; background: transparent; color: transparent; }
label.rec-week__slot { user-select: none; touch-action: none; }
label.rec-week__slot:has(> input:not(:checked)):hover { border: 1.5px dashed var(--pp-mid); background: color-mix(in srgb, var(--pp-mid) 16%, transparent); color: var(--pp-ink); }
.rec-week__key--range::before { background: #faf8fd; border-style: dashed; border-color: var(--pp-line); }
.rec-week__key--slot::before { background: var(--pp-tint); border: 1.5px solid var(--pp-mid); }

/* 40. A choice between two ways of doing something, each with one line of
   why. rec-scale__opt holds a label only. */
.rec-choices { display: flex; flex-direction: column; gap: 0.5rem; }
.rec-choice {
  display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.65rem 0.75rem; cursor: pointer;
  border: 1px solid var(--hs-line-strong); border-radius: var(--ub-radius-sm); background: #fff;
}
.rec-choice:hover { border-color: var(--pp-line); background: #fdfcff; }
.rec-choice input { margin: 0.2rem 0 0; accent-color: var(--pp-mid); flex: none; }
.rec-choice input:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-choice:has(input:checked), .rec-choice--on { border-color: var(--pp-mid); background: var(--pp-tint); box-shadow: inset 0 0 0 1px var(--pp-mid); }
.rec-choice__t { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.88rem; font-weight: 700; color: var(--hs-ink); }
.rec-choice__sub { font-size: 0.78rem; font-weight: 400; line-height: 1.45; color: var(--hs-ink-soft); }

/* Merge decision 1: the refused field must not scroll its refusal out of view. */
.rec-slideover__body > .rec-partial { position: sticky; top: -1rem; z-index: 1; }

/* Screen 48 · one "Schedule interview" slide-over (2026-10-01), from
   reference-artboards/schedule-interview.css. The picker block lives in app.css
   and the artboard-only forced states are not ported. */
/* The mode switch: four rec-choice cards, two across in the 720px slide-over,
   one across at phone width. Native radios, so arrows move and choose. */
.rec-choices--modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.5rem; }
.rec-choice:has(input:focus-visible) { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-choice:has(input:disabled) { cursor: default; opacity: 0.6; }

/* rec-act had no disabled look; the foot's buttons disable with a reason. */
.rec-act:disabled, .rec-act:disabled:hover { opacity: 0.5; cursor: default; }
.rec-act--primary:disabled:hover { background: var(--pp-mid); }

/* Duration seg radios had no focus ring. */
.rec-ag__seg > label:has(input:focus-visible) { outline: 2px solid var(--pp-mid); outline-offset: 1px; }

/* The week over 08:00–22:00: 14 hour lines, and its own horizontal scroll
   when the slide-over is narrower than the grid. */
.rec-week--h14 .rec-week__col { background-image: repeating-linear-gradient(to bottom, #efecf7 0 1px, transparent 1px calc(100% / 14)); }
.rec-week__scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: 8px; }
.rec-week__scroll > .rec-week { min-width: 36rem; }
.rec-week__scroll:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 2px; }

/* Screen 48 at its full width (owner, 2026-10-01; plan schedule-interview-unified,
   decision 18): everything in view when the slide-over opens. The week sits on the
   left and takes the height that is left; the panel and the typed details sit in a
   column on the right; the switch is one row with the chosen mode's line under it.
   The slide-over is its own container, so the 720px and phone frames keep the
   stacked layout they are drawn with. The two paddings are inline in the design,
   which is why they, and the Meet tick's inline margin, carry !important. */
.rec-slideover:has(.rec-choices--modes) { container-type: inline-size; }
@container (min-width: 56rem) {
  .rec-slideover__body:has(.rec-choices--modes) { gap: 0.7rem; padding: 1rem 1.25rem 0.9rem !important; }
  .rec-slideover__body:has(.rec-choices--modes) > .rec-mail__head { padding: 0.6rem 1rem !important; }
  .rec-choices--modes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 3px; margin-bottom: 1.5rem; border-radius: 10px; background: #efecf5; }
  .rec-choices--modes > .rec-choice { position: relative; justify-content: center; padding: 0.45rem 0.5rem; border: 0; border-radius: 8px; background: transparent; box-shadow: none; }
  .rec-choices--modes > .rec-choice:hover { background: rgba(255, 255, 255, 0.6); }
  .rec-choices--modes > .rec-choice:has(input:checked) { background: #fff; box-shadow: 0 1px 2px rgba(24, 18, 43, 0.12); }
  .rec-choices--modes > .rec-choice > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .rec-choices--modes .rec-choice__t { font-size: 0.8rem; font-weight: 600; line-height: 1.2; text-align: center; color: var(--hs-ink-soft); }
  .rec-choices--modes > .rec-choice:has(input:checked) .rec-choice__t { color: var(--pp-ink); }
  .rec-choices--modes .rec-choice__sub { display: none; }
  .rec-choices--modes > .rec-choice:has(input:checked) .rec-choice__sub { display: block; position: absolute; left: var(--rec-mode-at, 0); top: calc(100% + 0.45rem); width: calc(400% + 6px); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rec-choices--modes > .rec-choice:nth-child(2) { --rec-mode-at: calc(-100% - 2px); }
  .rec-choices--modes > .rec-choice:nth-child(3) { --rec-mode-at: calc(-200% - 4px); }
  .rec-choices--modes > .rec-choice:nth-child(4) { --rec-mode-at: calc(-300% - 6px); }

  .rec-form:has(> .rec-form__field > .rec-week__scroll) { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 19rem; grid-template-rows: 2.25rem auto 1fr; align-content: stretch; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > * { grid-column: 2; min-width: 0; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > .rec-form__row { display: contents; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > .rec-form__row > * { grid-column: 1; grid-row: 1; align-self: center; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > .rec-form__row > fieldset { justify-self: start; position: relative; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > .rec-form__row > fieldset > legend { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > .rec-form__row > fieldset > .rec-ag__seg { margin-left: 5.4rem; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > .rec-form__row > div.rec-form__field { justify-self: end; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.2rem 0.6rem; width: 16rem; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > .rec-form__row > div.rec-form__field > .rec-input { flex: 1 1 8rem; width: auto; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > .rec-form__field:first-child { grid-row: 1 / span 2; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) > .rec-booked__card { grid-row: 3; align-self: start; padding: 0; border: 0; background: transparent; }
  .rec-form > .rec-form__field:has(> .rec-week__scroll) { grid-column: 1; grid-row: 2 / -1; }
  .rec-form > .rec-form__field:has(> .rec-week__scroll) > .rec-week__scroll { flex: 1 1 auto; display: flex; min-height: 20rem; }
  .rec-form > .rec-form__field > .rec-week__scroll > .rec-week { flex: 1; grid-template-rows: auto minmax(0, 1fr); min-width: 0; }
  .rec-form > .rec-form__field > .rec-week__scroll > .rec-week .rec-week__col { height: auto; }
  .rec-form > .rec-form__field > .rec-week__scroll .rec-week__pick { padding-block: 0; line-height: 1.2; overflow: hidden; }

  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-input,
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-textarea { padding: 0.36rem 0.6rem; font-size: 0.84rem; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-textarea { min-height: 0; height: 3.4rem; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-form__field:has(> .rec-scale__opt) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.3rem 0.5rem; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-form__field:has(> .rec-scale__opt) > .rec-scale__opt { grid-column: 2; grid-row: 1; margin-top: 0 !important; padding-block: 0.15rem; font-size: 0.78rem; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-form__field:has(> .rec-scale__opt) > .rec-input,
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-form__field:has(> .rec-scale__opt) > .rec-form__help { grid-column: 1 / -1; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-pick__who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-who__p { min-width: 0; padding: 0.25rem 0.5rem 0.25rem 0.3rem; border-radius: 10px; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-who__av { flex: none; width: 1.55rem; height: 1.55rem; font-size: 0.62rem; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-who__t { display: block; min-width: 0; font-size: 0.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rec-form:has(> .rec-form__field > .rec-week__scroll) .rec-who__t small { display: block; overflow: hidden; text-overflow: ellipsis; }
}

/* CANVAS O — interview hours and candidate availability. Additive only.
   Load after canvas N: every rule here composes .rec-week, .rec-choice and
   .rec-list, which canvas N and canvas A declare.

   Screens: 46 (a contractor's own interview hours), 45h (the scheduling week
   with hours and the candidate's availability as layers) and 40f (the link
   setup, asking when the candidate is free). 40f adds no class.

   Three kinds of object, and nothing else:
     week layers    blocks positioned inside .rec-week__col by inline
                    top/height percentages computed by the view, exactly as
                    .rec-week__busy is. Each layer is its own class with its
                    own legend key, so a layer ships or is removed on its own.
     .rec-week--tall  a taller column for 46's preview, where a block carries
                    a name, a job, a time and one action.
     .rec-hours__*  the inline rule editor inside 46's rules list.

   Colour. Gold is a warning (CONTRACT §5) and nothing here is gold: the
   warning in 45h is canvas B's .rec-impact, unchanged. Outside-hours is a
   neutral hatch, never red. The candidate's layer is the package's own
   --ub-ok green, the one colour on the week that means "the candidate said
   yes". Purple stays the recruiter's choice (.rec-week__pick) and, on 46, the
   person's own hours and bookings. No shadows. No @media or @container
   block: the only width behaviour is .rec-week's and .rec-grid's, inherited. */

/* -- 46 · the person's own two weeks -------------------------------------- */

.rec-week--tall .rec-week__col { height: 36rem; }
.rec-week__window {
  position: absolute; left: 0; right: 0;
  background: var(--pp-tint); border-block: 1px solid var(--pp-line);
}
.rec-week__booked {
  position: absolute; left: 3px; right: 3px; z-index: 1;
  display: flex; flex-direction: column; overflow: hidden;
  padding: 0.15rem 0.3rem; border-radius: 4px;
  background: #fff; border: 1.5px solid var(--pp-mid);
  font-size: 0.64rem; line-height: 1.25; color: var(--pp-ink);
}
.rec-week__booked > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-week__booked b { font-weight: 700; }
.rec-week__act {
  align-self: flex-start; margin-top: auto; white-space: nowrap;
  font-weight: 600; color: var(--pp-mid); text-decoration: underline; text-underline-offset: 2px;
}
.rec-week__act:hover { color: var(--pp-ink); }
.rec-week__act:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 1px; border-radius: 2px; }
.rec-week__key--window::before { background: var(--pp-tint); border-color: var(--pp-line); }
.rec-week__key--booked::before { background: #fff; border: 1.5px solid var(--pp-mid); }

/* -- 45h · hours layer ------------------------------------------------------
   One block per selected person per span outside their hours. Translucent,
   so two people out at once read darker than one; busy blocks sit on top. */

.rec-week__off {
  position: absolute; left: 0; right: 0;
  background: repeating-linear-gradient(135deg, rgba(26, 19, 48, 0.07) 0 3px, transparent 3px 7px);
}
.rec-week__key--off::before {
  background: repeating-linear-gradient(135deg, rgba(26, 19, 48, 0.22) 0 2px, #fff 2px 4px);
}

/* -- 45h · candidate layer --------------------------------------------------
   The candidate's submitted ranges, and where they meet a whole free panel
   inside everyone's hours. The match is outlined, never filled, so the busy
   and hours layers under a range stay readable. */

.rec-week__cand {
  position: absolute; left: 0; right: 0;
  background: color-mix(in srgb, var(--ub-ok) 14%, transparent);
  border-block: 1px solid color-mix(in srgb, var(--ub-ok) 45%, transparent);
}
.rec-week__match {
  position: absolute; left: 2px; right: 2px; overflow: hidden;
  padding: 0 0.25rem; border: 1.5px solid #256e43; border-radius: 4px;
  font-size: 0.6rem; font-weight: 600; line-height: 1.3; color: #256e43; white-space: nowrap;
}
.rec-week__key--cand::before {
  background: color-mix(in srgb, var(--ub-ok) 14%, #fff);
  border-color: color-mix(in srgb, var(--ub-ok) 45%, transparent);
}
.rec-week__key--match::before { background: color-mix(in srgb, var(--ub-ok) 14%, #fff); border: 1.5px solid #256e43; }

/* -- 46 · the inline rule editor --------------------------------------------
   The rule being edited replaces its own row in .rec-list. No drawer, no
   dialog: the list stays in view above and below it. */

.rec-list > li.rec-hours__edit {
  display: block; padding: 1rem 1rem 1.1rem;
  background: #faf9fd; border-block: 1px solid var(--pp-line);
}
.rec-hours__inline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.35rem; font-weight: 400; font-size: 0.82rem; color: var(--hs-ink-soft); }
.rec-hours__inline .rec-input { width: auto; padding-block: 0.3rem; }
.rec-hours__inline .rec-input[type="number"] { width: 4.25rem; }
/* CANVAS P — v2 of 45h, 40f and 46. Additive only; load after canvas O.
   Three things: clearer buttons (.rec-act), a paintable agenda (.rec-ag, 46)
   and a clickable scheduling week with compact chips (.rec-pick, .rec-pick__who, 45h/40f).
   Gold is still only a warning. No shadows except the save bar. */

/* -- Buttons: visible at rest, obvious on hover ----------------------------- */
.rec-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.5rem; padding: 0.5rem 1rem; border-radius: 10px; border: 1px solid transparent;
  font: 600 0.88rem/1.2 var(--ub-font); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rec-act svg { width: 1.05rem; height: 1.05rem; flex: none; }
.rec-act:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-act--primary { background: var(--pp-mid); color: #fff; }
.rec-act--primary:hover { background: var(--pp-ink); color: #fff; }
.rec-act--soft { background: var(--pp-tint); border-color: var(--pp-line); color: var(--pp-ink); }
.rec-act--soft:hover { background: var(--pp-tint-2); border-color: var(--pp-mid); color: var(--pp-ink); }
.rec-act--quiet { background: transparent; color: var(--hs-ink-soft); }
.rec-act--quiet:hover { background: #ece9f3; color: var(--hs-ink); }
.rec-act--sm { min-height: 2rem; padding: 0.3rem 0.7rem; font-size: 0.8rem; border-radius: 8px; }
.rec-act[aria-pressed="true"] { background: var(--pp-mid); border-color: var(--pp-mid); color: #fff; }

/* Segmented control */
.rec-ag__seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: #efecf5; }
.rec-ag__seg > button, .rec-ag__seg > label {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.35rem 0.75rem; border: 0; border-radius: 8px;
  background: transparent; font: 600 0.8rem/1.2 var(--ub-font); color: var(--hs-ink-soft); cursor: pointer; white-space: nowrap;
}
.rec-ag__seg > button:hover, .rec-ag__seg > label:hover { color: var(--hs-ink); background: rgba(255,255,255,0.6); }
.rec-ag__seg > [aria-pressed="true"], .rec-ag__seg > label:has(input:checked) { background: #fff; color: var(--pp-ink); box-shadow: 0 1px 2px rgba(24,18,43,0.12); }
.rec-ag__seg input { position: absolute; opacity: 0; pointer-events: none; }

/* Small status pill */
.rec-sumchip { font-family: var(--ub-font); letter-spacing: 0; text-transform: none; border: 0; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--pp-tint); color: var(--pp-ink); }
.rec-sumchip--ok { background: color-mix(in srgb, var(--ub-ok) 12%, #fff); color: #1f6b40; }
.rec-sumchip--warn { background: var(--hs-gold-tint); color: #6e5716; }
.rec-sumchip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

/* -- 46 · paintable agenda -------------------------------------------------- */
.rec-ag__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--hs-line); }
.rec-ag__range { font-weight: 700; font-size: 0.95rem; color: var(--hs-ink); }
.rec-ag__sum { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.7rem 1rem 0; }
.rec-ag__wrap { overflow-x: auto; padding: 0.6rem 1rem 1rem; }
.rec-ag { display: grid; grid-template-columns: 3rem repeat(7, minmax(4.5rem, 1fr)); min-width: 36rem; user-select: none; }
.rec-ag__corner { font: 600 0.62rem var(--ub-font-mono); color: var(--hs-ink-faint); align-self: end; padding-bottom: 0.35rem; }
.rec-ag__day { padding: 0.3rem 0.25rem 0.4rem; text-align: center; font-size: 0.72rem; color: var(--hs-ink-soft); line-height: 1.2; border-bottom: 1px solid var(--hs-line); }
.rec-ag__day b { display: block; font-size: 0.95rem; color: var(--hs-ink); }
.rec-ag__day--today b { color: #fff; background: var(--pp-mid); border-radius: 999px; width: 1.7rem; height: 1.7rem; line-height: 1.7rem; margin: 0.1rem auto 0; }
.rec-ag__day--wk, .rec-ag__col--wk { border-left: 2px solid var(--hs-line-strong); }
.rec-ag__hours { position: relative; }
.rec-ag__hour { position: absolute; right: 0.45rem; transform: translateY(-50%); font: 500 0.62rem var(--ub-font-mono); color: var(--hs-ink-faint); }
.rec-ag__col { position: relative; border-left: 1px solid var(--hs-line); }
.rec-ag__col--past { background: repeating-linear-gradient(135deg, rgba(26,19,48,0.035) 0 3px, transparent 3px 7px); }
.rec-ag__cell { display: block; height: 18px; border-top: 1px dotted #eeebf3; cursor: crosshair; }
.rec-ag__cell:nth-child(2n+1) { border-top: 1px solid var(--hs-line); }
.rec-ag__cell:hover { background: color-mix(in srgb, var(--pp-mid) 14%, transparent); }
.rec-ag__cell--on { background: color-mix(in srgb, var(--pp-mid) 26%, #fff); border-top-color: transparent !important; }
.rec-ag__cell--on:hover { background: color-mix(in srgb, var(--pp-mid) 36%, #fff); }
.rec-ag__cell--once { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pp-mid) 30%, #fff) 0 4px, color-mix(in srgb, var(--pp-mid) 16%, #fff) 4px 8px); border-top-color: transparent !important; }
.rec-ag__cell--off { background: repeating-linear-gradient(135deg, rgba(26,19,48,0.06) 0 3px, transparent 3px 7px); }
.rec-ag__bk {
  position: absolute; left: 3px; right: 3px; z-index: 2; overflow: hidden; pointer-events: auto;
  padding: 0.2rem 0.35rem; border-radius: 6px; background: #fff; color: var(--pp-ink); border: 1.5px solid var(--pp-mid); box-shadow: 0 1px 3px rgba(24,18,43,0.12);
  font-size: 0.64rem; line-height: 1.3; display: flex; flex-direction: column;
}
.rec-ag__bk b { font-weight: 700; }
.rec-ag__bk > span { color: var(--hs-ink-soft); font-size: 0.64rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.85; }
.rec-color .rec-ag__bk a, .rec-ag__bk a { color: var(--pp-mid); font-weight: 700; text-decoration: underline; margin-top: auto; }
.rec-ag__empty { position: absolute; inset: 40% 1rem auto; z-index: 3; text-align: center; pointer-events: none; }
.rec-ag__empty p { display: inline-block; margin: 0; padding: 0.7rem 1rem; border-radius: 10px; background: #fff; border: 1px solid var(--pp-line); font-size: 0.85rem; color: var(--hs-ink); }
.rec-ag__legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; padding: 0 1rem 0.9rem; font-size: 0.75rem; color: var(--hs-ink-soft); }
.rec-ag__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.rec-ag__legend i { width: 0.9rem; height: 0.9rem; border-radius: 3px; }
.rec-savebar {
  position: sticky; bottom: 1rem; z-index: 5; display: flex; align-items: center; gap: 0.6rem;
  margin-top: 1rem; padding: 0.6rem 0.7rem 0.6rem 1rem; border-radius: 12px;
  background: var(--pp-ink); color: #fff; box-shadow: 0 10px 30px rgba(24,18,43,0.25);
}
.rec-savebar p { margin: 0 auto 0 0; font-size: 0.85rem; }
.rec-savebar .rec-act--quiet { color: rgba(255,255,255,0.8); }
.rec-savebar .rec-act--quiet:hover { background: rgba(255,255,255,0.12); color: #fff; }
.rec-savebar .rec-act--primary { background: #e0d394; color: var(--pp-ink); }
.rec-savebar .rec-act--primary:hover { background: #bea958; }

/* -- 45h / 40f · people chips with their hours -------------------------------- */
.rec-pick__who { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.rec-who__p {
  position: relative; display: flex; align-items: center; gap: 0.55rem; padding: 0.4rem 0.75rem 0.4rem 0.45rem;
  border: 1px solid var(--hs-line-strong); border-radius: 12px; background: #fff; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.rec-who__p:hover { border-color: var(--pp-mid); background: var(--pp-tint); }
.rec-who__p:has(input:checked) { border-color: var(--pp-mid); background: var(--pp-tint); }
.rec-who__p input { position: absolute; opacity: 0; }
.rec-who__p:has(input:focus-visible) { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-who__av { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: #ece9f3; color: var(--hs-ink-soft); font-size: 0.7rem; font-weight: 700; }
.rec-who__p:has(input:checked) .rec-who__av { background: var(--pp-mid); color: #fff; }
.rec-who__t { display: flex; flex-direction: column; font-size: 0.84rem; font-weight: 600; color: var(--hs-ink); line-height: 1.25; }
.rec-who__t small { font-size: 0.7rem; font-weight: 400; color: var(--hs-ink-soft); }
.rec-who__t small.is-warn { color: #6e5716; font-weight: 600; }

/* -- 45h · clickable week ---------------------------------------------------- */
.rec-pick__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.5rem; }
.rec-pick__range { font-weight: 700; font-size: 0.92rem; color: var(--hs-ink); margin-right: auto; }
.rec-pick__nav { display: inline-flex; gap: 0.25rem; }
.rec-pick__slot { position: absolute; left: 0; right: 0; z-index: 4; display: block; padding: 0; border: 0; background: transparent; cursor: pointer; }
.rec-pick__slot:hover { background: color-mix(in srgb, var(--pp-mid) 16%, transparent); outline: 1.5px dashed var(--pp-mid); outline-offset: -1.5px; }
.rec-pick__slot:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: -2px; }
.rec-sumline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.6rem; }
.rec-sumline strong { font-size: 0.95rem; color: var(--hs-ink); margin-right: 0.3rem; }
.rec-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.rec-steps li { display: flex; gap: 0.55rem; align-items: flex-start; font-size: 0.82rem; color: var(--hs-ink-soft); }
.rec-steps svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.1rem; color: var(--pp-mid); }

/* -- 40f · preview of the candidate's page ---------------------------------- */
.rec-cpv { border: 1px solid var(--hs-line-strong); border-radius: 12px; overflow: hidden; background: #faf9f7; }
.rec-cpv__top { height: 1.6rem; background: #18122b; display: flex; align-items: center; padding: 0 0.7rem; color: #fff; font-size: 0.62rem; font-weight: 700; }
.rec-cpv__in { padding: 0.8rem 0.9rem 0.9rem; }
.rec-cpv__h { margin: 0 0 0.2rem; font-size: 0.95rem; font-weight: 800; color: #18122b; }
.rec-cpv__p { margin: 0 0 0.6rem; font-size: 0.7rem; color: #57536a; }
.rec-cpv__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.rec-cpv__grid i { height: 7px; border-radius: 1px; background: #ebe8f0; }
.rec-cpv__grid i.on { background: #49338d; }
.rec-cpv__btn { margin-top: 0.6rem; display: inline-block; padding: 0.3rem 0.7rem; border-radius: 999px; background: #49338d; color: #fff; font-size: 0.65rem; font-weight: 700; }
.rec-cpv__cap { margin: 0.5rem 0 0; font-size: 0.75rem; color: var(--hs-ink-soft); }

/* -- 40f v2 · clearer actions inside canvas N's card, same buttons ------------ */
.rec-booked__cardacts .button { min-height: 2.5rem; font-weight: 600; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
.rec-booked__cardacts .button--primary:hover { background: var(--pp-ink); border-color: var(--pp-ink); }
.rec-booked__cardacts .rec-link-option { background: var(--pp-tint); border-color: var(--pp-line); color: var(--pp-ink); }
.rec-booked__cardacts .rec-link-option:hover { background: var(--pp-tint-2); border-color: var(--pp-mid); }
.rec-color .rec-booked__cardacts .button.button--ghost { border-color: transparent; color: var(--hs-ink-soft); }
.rec-color .rec-booked__cardacts .button.button--ghost:hover { background: #ece9f3; border-color: #ece9f3; color: var(--hs-ink); }

/* -- Port additions (2026-09-28) ---------------------------------------------
   46's cells are real checkboxes, so painting reads without JavaScript.
   The save bar's primary is no longer gold: gold is only a warning. */
.rec-ag__cell { position: relative; }
.rec-ag__cell > input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.rec-ag__cell:has(> input:focus-visible) { outline: 2px solid var(--pp-mid); outline-offset: -2px; z-index: 1; }
.rec-ag__cell:has(> input:checked) { background: color-mix(in srgb, var(--pp-mid) 26%, #fff); border-top-color: transparent !important; }
.rec-ag__cell--once:has(> input:checked) { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--pp-mid) 30%, #fff) 0 4px, color-mix(in srgb, var(--pp-mid) 16%, #fff) 4px 8px); }
.rec-ag__cell--on:has(> input:not(:checked)), .rec-ag__cell--once:has(> input:not(:checked)) { background: transparent; }
.rec-ag__cell:has(> input:disabled) { cursor: default; }
.rec-savebar .rec-act--primary { background: #fff; color: var(--pp-ink); }
.rec-savebar .rec-act--primary:hover { background: var(--pp-tint-2); }

/* CANVAS Q: main's 09 card carrying the scheduling states. Additive only.
   Load after canvas P (the branch's canvas E, renamed J, then K, L and N).

   Every selector is new; none restates a rule another canvas owns. Five
   jobs, nothing else:
     1. 37's strip (.rec-ivstate, canvas N) inside main's card body
        (.rec-ivcard__body, canvas E), whose flex gap already spaces it.
     2. A cancelled interview on the date rail: neither gold (upcoming) nor
        lilac (held). Dashed card; the Cancelled pill is red (requester,
        2026-09-29).
     3. The 10g drawer band (main's recruiting-drawer-4c extension) stays on
        .rec-drawer. The slide-overs keep a white bar and head (merge
        decision 17). If main's band rules are scoped to .rec-drawer these
        two lines are inert and cost nothing.
   Write to (09w) needed nothing new: it is 38a's objects, one column. */

/* 1 */
.rec-ivcard__body > .rec-ivstate { margin: 0; }

/* 2 */
.rec-ivitem--cancelled .rec-ivrail__day { color: var(--hs-ink-faint); }
.rec-ivitem--cancelled .rec-ivrail::before { background: #fff; border: 2px dashed var(--hs-line-strong); }
.rec-ivitem--cancelled .rec-ivcard { border-style: dashed; border-color: var(--hs-line-strong); }
.rec-ivitem--cancelled .rec-ivcard__head { background: #fff; border-bottom-color: var(--hs-line); }
.rec-ivitem--cancelled .rec-ivcard__title { color: var(--hs-ink-soft); }
.rec-color .rec-ivitem--cancelled .rec-pill--archived { color: var(--ub-danger); border-color: color-mix(in srgb, var(--ub-danger) 32%, transparent); }

/* 3 */
.rec-color .rec-slideover .rec-drawer__bar { background: #fff; border-bottom-color: var(--hs-line); }
.rec-color .rec-slideover .rec-drawer__head { background: #fff; }

/* 4. 45a: no empty bar above the title. The close button joins the head,
   on the title's row. */
.rec-slideover__head { display: flex; align-items: flex-start; gap: 1rem; }
.rec-slideover__head > div { flex: 1; min-width: 0; }
.rec-slideover__head > .rec-drawer__close { flex: none; margin-left: auto; }

/* 5. 37 v3: a calm state is a chip on the Manage line; a state that asks for
   an act (gold, or red for a refusal) is a chip that performs it. The chip's title carries the row's explanation. */
.rec-ivchips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.35rem; min-width: 0; }
.rec-ivcard__head:has(.rec-ivchips) { flex-wrap: wrap; row-gap: 0.45rem; }
.rec-ivcard__head:has(.rec-ivchips) > .rec-ivcard__id { flex: 1 1 18rem; }
.rec-ivcard__head:has(.rec-ivchips) { align-items: flex-start; }
.rec-ivcard__head > .rec-ivchips { order: 3; flex: 1 1 100%; justify-content: flex-start; }

.rec-ivchip {
  display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.16rem 0.55rem;
  border: 1px solid var(--hs-line-strong); border-radius: 999px; background: #fff;
  font-size: 0.74rem; font-weight: 600; line-height: 1.35; white-space: nowrap; text-decoration: none;
}
.rec-ivchip::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
a.rec-ivchip:hover { text-decoration: underline; }
.rec-ivchip--ok, .rec-color a.rec-ivchip--ok { color: #256e43; border-color: color-mix(in srgb, #256e43 30%, transparent); }
.rec-ivchip--quiet, .rec-color a.rec-ivchip--quiet { color: var(--hs-ink-soft); }
.rec-ivchip--quiet::before { background: transparent; border: 1.5px solid currentColor; box-sizing: border-box; }
.rec-ivchip--due { color: var(--rec-age-ink); background: var(--hs-active); border-color: var(--hs-gold-border); }
.rec-ivchip--declined, .rec-ivchip--failed { color: var(--ub-danger); border-color: color-mix(in srgb, var(--ub-danger) 32%, transparent); }
.rec-ivchip__form { display: contents; }
.rec-ivchip--act { cursor: pointer; font: inherit; font-size: 0.74rem; font-weight: 600; }
.rec-ivchip__act { font-weight: 700; }
.rec-ivchip--act .rec-ivchip__act::before { content: "· "; font-weight: 400; }
.rec-ivchip--act:not(:has(.visually-hidden)) .rec-ivchip__act::before { content: none; }
.rec-ivchip--act:hover .rec-ivchip__act { text-decoration: underline; }
.rec-ivchip--act:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-color a.rec-ivchip--due { color: var(--rec-age-ink); }
.rec-color a.rec-ivchip--declined, .rec-color a.rec-ivchip--failed { color: var(--ub-danger); }
/* ==========================================================================
   Canvas R — REVISION-04 §2.14 (L1b1) and §4.53, 2026-10-02, card T8.
   One-line job head and strip, appended verbatim after Q. The strip has its
   own block because Feedback and the review drawer still use .rec-jobtabs.
   Package and artboard copies move together; link specificity beats the
   later palette. Named snapshot animations live with the section bar's
   View Transition rules in app.css, scoped to the job strip and its ink.
   ========================================================================== */

.rec-page.rec-jpage, .rec-page.rec-jpage.rec-page--wide { padding: 1.4rem 1.25rem 0; }
.rec-page.rec-jpage > * { min-width: 0; }
.rec-jstrip + * { margin-top: 0 !important; }
.rec-page.rec-jpage > .rec-jhead {
  display: flex; align-items: center; gap: 0.9rem; margin: 0 0 0.6rem;
}
.rec-jhead__main {
  flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center;
  column-gap: 1.1rem; row-gap: 0.35rem;
}
.rec-jhead__title {
  margin: 0; max-width: 44rem; font-family: var(--ub-font-display); font-weight: 700;
  font-size: 1.55rem; line-height: 1.18; letter-spacing: -0.015em; color: var(--pp-ink); text-wrap: balance;
}
.rec-jhead__client { font-weight: 500; color: var(--pp-mid); }
.rec-jhead__sep { margin: 0 0.32em; font-weight: 400; color: var(--hs-ink-soft); }
.rec-jhead__facts {
  display: flex; align-items: center; gap: 0.6rem; margin: 0.2rem 0 0;
  font-size: 0.8125rem; color: var(--hs-ink-soft); white-space: nowrap;
}
.rec-jhead__actions { display: flex; align-items: center; gap: 0.5rem; flex: none; min-height: 2.3rem; margin-left: auto; align-self: center; }

.rec-jstrip {
  display: flex; gap: 0.1rem; align-items: stretch; margin: 0 0 1.25rem; padding: 0;
  border: 0; border-bottom: 1px solid var(--pp-line); view-transition-name: rec-job-strip;
}
.rec-color .rec-jstrip a.rec-jstrip__tab {
  position: relative; display: inline-flex; flex-direction: column; align-items: center;
  padding: 0.62rem 0.7rem 0.55rem; font-size: 0.8125rem; font-weight: 400; line-height: 1.25;
  white-space: nowrap; color: var(--hs-ink-soft); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 6px 6px 0 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.rec-color .rec-jstrip a.rec-jstrip__tab::after {
  content: attr(data-label); font-weight: 700; height: 0; overflow: hidden; visibility: hidden; pointer-events: none;
}
.rec-color .rec-jstrip a.rec-jstrip__tab:hover { color: var(--pp-ink); background: var(--pp-tint-2); }
.rec-color .rec-jstrip a.rec-jstrip__tab--on, .rec-color .rec-jstrip a.rec-jstrip__tab--on:hover { font-weight: 700; color: var(--pp-ink); }
.rec-color .rec-jstrip a.rec-jstrip__tab:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: -2px; border-radius: 4px 4px 0 0; }
.rec-color .rec-jstrip a.rec-jstrip__tab.rec-jstrip__tab--setup { font-size: 0.78rem; color: color-mix(in srgb, var(--hs-ink-soft) 90%, transparent); }
.rec-color .rec-jstrip a.rec-jstrip__tab.rec-jstrip__tab--setup:hover { color: var(--pp-ink); }
.rec-color .rec-jstrip a.rec-jstrip__tab.rec-jstrip__tab--setup.rec-jstrip__tab--on { color: var(--pp-mid); }
.rec-jstrip__break { align-self: center; width: 0; height: 1rem; margin: 0 0.55rem; border-left: 1px solid var(--hs-line-strong); }
.rec-jstrip__hidden { margin-left: 0.35rem; align-self: center; font-size: 0.78rem; font-style: italic; line-height: 1.4; color: var(--hs-ink-soft); }
.rec-jstrip__ink { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; }
.rec-jstrip__tab--on > .rec-jstrip__ink { background: var(--pp-mid); view-transition-name: rec-job-tab-ink; }

/* §4.44's measured card budget: four stages fit at 1280, five at 1440;
   an extra stage scrolls inside the board, not the page. */
.rec-jbd .rec-jbd__columns { grid-template-columns: repeat(var(--cols), minmax(11.75rem, 1fr)); gap: 0.6rem; overflow-x: auto; padding-bottom: 0.6rem; scrollbar-gutter: stable; }
.rec-jbd .rec-jbd__col { padding: 0.75rem 0.4rem; }
.rec-jbd .rec-jbd__card { grid-template-columns: minmax(0, 1fr); }
.rec-jbd .rec-jbd__cards { grid-template-columns: minmax(0, 1fr); }
.rec-jbd .rec-jbd__card { min-width: 0; }
.rec-jpage .rec-dl dd { overflow-wrap: anywhere; }
.rec-jpage .rec-table--idlead td:not(.rec-table__c--actions) { white-space: normal; }
.rec-jpage .rec-table--idlead .rec-who__name, .rec-jpage .rec-table--idlead th { white-space: normal; }
.rec-jpage .rec-table--idlead .rec-rowacts { flex-wrap: wrap; justify-content: flex-end; }

.rec-jreq__intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }


/* Mock-only. If chosen, these become the next canvas, in every copy (CONTRACT §4). */
.rec-ffe, .rec-ffe__stack { display: grid; gap: 1rem; min-width: 0; }
.rec-ffe__cardhead { padding-bottom: 0.7rem; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent); }
.rec-ffe__sub { font-size: 0.8rem; color: var(--hs-ink-faint); }
.rec-ffe__head-acts { margin-left: auto; display: flex; gap: 0.6rem; }
.rec-ffe__formfields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 1rem; }
.rec-ffe__formfields .rec-input, .rec-ffe__row .rec-input, .rec-ffe__row .rec-textarea { width: 100%; }
.rec-ffe__q { padding: 0.95rem 0; border-bottom: 1px solid var(--hs-line); }
.rec-ffe__q:last-of-type { border-bottom: 0; }
.rec-ffe__qhead { display: flex; align-items: baseline; gap: 0.6rem; }
.rec-ffe__n { flex: none; width: 1.4rem; font-family: var(--ub-font-mono); font-size: 0.7rem; color: var(--pp-mid); }
.rec-ffe__qtitle { flex: 1; min-width: 0; margin: 0; font-weight: 600; font-size: 0.95rem; color: var(--hs-ink); }
.rec-ffe__meta { display: flex; align-items: center; gap: 0.55rem; flex: none; }
.rec-ffe__req { font-size: 0.75rem; font-weight: 600; color: var(--hs-ink-soft); }
.rec-ffe__opt-l { font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-ffe__qbody { margin-left: 2rem; }
.rec-ffe__guide { margin: 0.3rem 0 0.6rem; font-size: 0.84rem; line-height: 1.5; color: var(--hs-ink-soft); max-width: 60rem; }
.rec-ffe__guide--clamp { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rec-ffe__ans { margin-top: 0.5rem; }
textarea.rec-ffe__ans { min-height: 0; height: 2.4rem; resize: none; width: 100%; }
input.rec-ffe__ans, .rec-ffe__comment { width: 100%; max-width: 32rem; }
.rec-ffe__comment { display: block; margin-top: 0.45rem; }
.rec-ffe__optlist { display: grid; gap: 0.3rem; }
.rec-ffe__optlist--cols { grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: 1.6rem; }
.rec-ffe__opt { display: flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; color: var(--hs-ink-soft); }
.rec-ffe__opt input { margin: 0; accent-color: var(--pp-mid); }
.rec-ffe__edit { margin: 0.6rem 0 0.2rem 2rem; padding: 1rem 1.1rem; border: 1px solid var(--pp-line, #d9d2ec); border-radius: 12px; background: #fbfaff; display: grid; gap: 0.8rem; }
.rec-ffe__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.8rem; align-items: start; }
.rec-ffe__row > .rec-field__k { margin-top: 0.55rem; }
.rec-ffe__hint { margin: 0.3rem 0 0; font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-ffe__seg { display: inline-flex; }
.rec-ffe .rec-seg__opt { color: var(--hs-ink-soft); }
.rec-ffe__optlist-edit { list-style: none; margin: 0 0 0.4rem; padding: 0; display: grid; gap: 0.35rem; }
.rec-ffe__optrow { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto auto; gap: 0.5rem; align-items: center; }
.rec-ffe__pt { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--pp-mid); text-align: right; }
.rec-ffe__checks { display: flex; gap: 1.2rem; padding-top: 0.45rem; }
.rec-ffe__check { display: inline-flex; gap: 0.4rem; align-items: center; font-size: 0.86rem; color: var(--hs-ink); }
.rec-ffe__check input { margin: 0; accent-color: var(--pp-mid); }
.rec-ffe__editacts { display: flex; gap: 0.9rem; align-items: center; padding-top: 0.6rem; border-top: 1px solid var(--hs-line); }
.rec-ffe__add { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; margin-top: 0.4rem; padding-top: 0.9rem; border-top: 1px dashed var(--hs-line-strong); }
.rec-ffe__add-k { font-size: 0.8rem; font-weight: 600; color: var(--hs-ink-soft); margin-right: 0.3rem; }
.rec-ffe__fixed .rec-scale__opt { cursor: default; }
.rec-ffe__foot { position: sticky; bottom: 0; display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1.25rem; border: 1px solid var(--hs-line); border-radius: 14px; background: rgba(255,255,255,0.96); backdrop-filter: blur(6px); box-shadow: 0 -4px 18px rgba(24,18,43,0.06); }
.rec-ffe__qacts { display: flex; gap: 0.75rem; flex: none; }
.rec-ffe__q--open { }
/* B: outline and one editor */
.rec-ffe__split { display: grid; grid-template-columns: minmax(17rem, 21rem) minmax(0, 1fr); gap: 1rem; align-items: start; }
.rec-ffe__outline { position: sticky; top: 1rem; }
.rec-ffe__secname { margin: 0.9rem 0 0.35rem; font-family: var(--ub-font-mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pp-mid); }
.rec-ffe__secname:first-of-type { margin-top: 0.2rem; }
.rec-ffe__line { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: 0.4rem; align-items: center; padding: 0.42rem 0.5rem; border-radius: 8px; font-size: 0.84rem; color: var(--hs-ink); text-decoration: none; }
.rec-workspace .rec-ffe__line { color: var(--hs-ink); }
.rec-ffe__line:hover { background: var(--hs-hover); }
.rec-ffe__line[aria-current] { background: var(--pp-tint); box-shadow: inset 2px 0 0 var(--pp-mid); }
.rec-ffe__line span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ffe__k { font-family: var(--ub-font-mono); font-size: 0.62rem; color: var(--hs-ink-faint); white-space: nowrap; }
.rec-ffe__preview { margin-top: 0.4rem; padding: 0.95rem 1.05rem; border-radius: 12px; background: var(--hs-hover); }
.rec-ffe__preview .rec-ffe__qtitle { margin-bottom: 0.1rem; }
.rec-ffe .rec-ffe__edit--flat { margin: 0; padding: 0; border: 0; background: none; }



.rec-ffe2__label { margin: 0.5rem 0 0; font-family: var(--ub-font-mono); font-size: 0.66rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pp-mid); }
.rec-ffe2__formfields { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.6rem 0.8rem; align-items: start; }
.rec-ffe2__grow { field-sizing: content; min-height: 2.35rem; resize: none; }
.rec-ffe2__jump { display: flex; flex-wrap: wrap; gap: 0.3rem 1.1rem; margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--hs-line); font-size: 0.84rem; }
.rec-workspace .rec-ffe2__jump a { color: var(--hs-ink); text-decoration: none; border-bottom: 1px solid var(--pp-line, #d9d2ec); }
.rec-ffe2__jump a span { font-family: var(--ub-font-mono); font-size: 0.7rem; color: var(--hs-ink-faint); margin-left: 0.3rem; }
.rec-ffe2__q { padding: 0.95rem 0; border-bottom: 1px solid var(--hs-line); }
.rec-ffe2__qs > .rec-ffe2__q:last-child { border-bottom: 0; }
.rec-ffe2__qtitle { flex: 1; min-width: 0; margin: 0; font-family: var(--ub-font); font-weight: 700; font-size: 0.98rem; color: var(--hs-ink); }
.rec-ffe2__kind { font-family: var(--ub-font-mono); font-size: 0.7rem; color: var(--hs-ink-soft); }
.rec-ffe2__edited { border-color: var(--pp-mid); color: var(--pp-ink); background: var(--pp-tint); font-weight: 600; }
.rec-ffe2__acts { display: inline-flex; align-items: center; gap: 0.6rem; margin-left: 0.4rem; opacity: 0.55; transition: opacity 120ms; }
.rec-ffe2__q:hover .rec-ffe2__acts, .rec-ffe2__acts:focus-within { opacity: 1; }
.rec-ffe2__nudges { display: inline-flex; gap: 0.2rem; }
.rec-ffe2__nudge { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--hs-line-strong); border-radius: 7px; background: #fff; color: var(--hs-ink-soft); cursor: pointer; }
.rec-ffe2__nudge svg { width: 14px; height: 14px; }
.rec-ffe2__nudge:hover:not(:disabled) { border-color: var(--pp-mid); color: var(--pp-ink); }
.rec-ffe2__nudge:disabled { opacity: 0.35; cursor: default; }
.rec-ffe2__nudge:focus-visible, .rec-ffe .rec-textbtn:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-ffe .rec-ffe__guide { max-width: 46rem; }
.rec-ffe2__blank { margin-top: 0.5rem; padding: 0.55rem 0.7rem; min-height: 2.6rem; border: 1px dashed var(--hs-line-strong); border-radius: 8px; font-size: 0.78rem; font-style: italic; color: var(--hs-ink-faint); }
.rec-ffe2__blank--line { min-height: 0; max-width: 32rem; padding-block: 0.4rem; }
.rec-ffe2__q--open { margin: 0.4rem -0.6rem; padding: 0.9rem 0.6rem; border: 0; border-radius: 12px; background: #fbfaff; box-shadow: inset 0 0 0 1px var(--pp-line, #d9d2ec); }
.rec-ffe2__q--open .rec-ffe__edit { margin: 0.8rem 0 0 2rem; padding: 0; border: 0; background: none; }
.rec-ffe2__reach { font-size: 0.78rem; color: var(--hs-ink-soft); }
.rec-ffe__optrow { grid-template-columns: 1.2rem minmax(0, 1fr) auto auto; }
.rec-ffe2__fixed .rec-scale__opt { border-style: dashed; color: var(--hs-ink-faint); background: transparent; }
.rec-ffe2__changes { font-size: 0.84rem; font-weight: 600; color: var(--pp-ink); }
.rec-ffe2__changes a { font-weight: 400; margin-left: 0.5rem; }



.rec-ffd__section { display: grid; gap: 0.6rem; }
.rec-ffd__sechead { display: flex; align-items: baseline; gap: 0.75rem; padding: 0.6rem 0.2rem 0.55rem; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 55%, transparent); }
.rec-ffd__sechead .rec-ov__title { font-size: 1.3rem; }
.rec-ffd__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.rec-ffd__card { position: relative; display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.2rem; padding: 0.95rem 1.1rem 1rem 0.5rem; border: 1px solid var(--hs-line); border-radius: 14px; background: #fff; transition: box-shadow 160ms, transform 160ms, border-color 160ms; }
.rec-ffd__card:hover { box-shadow: 0 6px 20px rgba(24, 18, 43, 0.07); border-color: var(--hs-line-strong); }
.rec-ffd__card--open { border-color: var(--pp-mid); box-shadow: 0 8px 28px rgba(73, 51, 141, 0.12); }
.rec-ffd__card--lifted { transform: translateY(-2px) rotate(-0.4deg); box-shadow: 0 14px 34px rgba(24, 18, 43, 0.16); border-color: var(--pp-mid); }
.rec-ffd__grip { align-self: start; display: grid; place-items: center; width: 24px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--hs-ink-faint); cursor: grab; opacity: 0.45; }
.rec-ffd__card:hover .rec-ffd__grip, .rec-ffd__grip:focus-visible, .rec-ffd__card--lifted .rec-ffd__grip { opacity: 1; color: var(--pp-mid); }
.rec-ffd__grip svg { width: 16px; height: 16px; }
.rec-ffd__head { display: flex; align-items: center; gap: 0.6rem; min-height: 28px; }
.rec-ffd__body { margin-left: 2rem; }
.rec-ffd__type { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.5rem 0.15rem 0.4rem; border-radius: 999px; background: var(--pp-tint); color: var(--pp-ink); font-size: 0.74rem; font-weight: 600; white-space: nowrap; }
.rec-ffd__ico { width: 15px; height: 15px; flex: none; }
.rec-ffd__tools { display: inline-flex; flex: none; margin-left: 0.3rem; align-items: center; gap: 0.7rem; opacity: 0; transition: opacity 120ms; }
.rec-ffd__card:hover .rec-ffd__tools, .rec-ffd__tools:focus-within { opacity: 1; }
.rec-ffd__card:nth-child(3) .rec-ffd__tools { opacity: 1; }
.rec-ffd__card--open .rec-ffe__edit { margin: 0.8rem 0 0 2rem; padding: 0; border: 0; background: none; }
.rec-ffd__insert { display: none; align-items: center; gap: 0.4rem; margin: -0.1rem 0; }
.rec-ffd__insert--shown { display: flex; }
.rec-ffd__insert-rule { flex: 1; height: 0; border-top: 2px solid var(--pp-mid); opacity: 0.5; }
.rec-ffd__insert-k { font-size: 0.75rem; font-weight: 600; color: var(--pp-ink); margin-right: 0.2rem; }
.rec-ffd__pick { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.55rem; border: 1px solid var(--pp-mid); border-radius: 999px; background: #fff; color: var(--pp-ink); font: inherit; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.rec-ffd__pick:hover { background: var(--pp-tint); }
.rec-ffd__add { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; }
.rec-ffd__addbtn { display: flex; align-items: center; gap: 0.6rem; padding: 0.65rem 0.8rem; border: 1px dashed var(--hs-line-strong); border-radius: 12px; background: transparent; color: var(--hs-ink-soft); font: inherit; text-align: left; cursor: pointer; transition: border-color 120ms, background 120ms, color 120ms; }
.rec-ffd__addbtn:hover { border-style: solid; border-color: var(--pp-mid); background: #fff; color: var(--pp-ink); }
.rec-ffd__addbtn .rec-ffd__ico { width: 20px; height: 20px; color: var(--pp-mid); }
.rec-ffd__addbtn b { display: block; font-size: 0.84rem; color: var(--hs-ink); }
.rec-ffd__addbtn small { display: block; font-size: 0.74rem; color: var(--hs-ink-faint); }
.rec-ffd__addsec { justify-self: start; }



.rec-ffg__list { list-style: none; margin: 0; padding: 0; }
.rec-ffg__q { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.2rem; margin: 0 -0.6rem; padding: 0.9rem 0.6rem 0.95rem 0.1rem; border-bottom: 1px solid var(--hs-line); border-radius: 10px; transition: background 140ms; }
.rec-ffg__q:hover { background: #fcfbfe; }
.rec-ffg__list > .rec-ffg__q:last-child { border-bottom: 0; }
.rec-ffg__q--open { margin: 0.35rem -0.6rem; border: 0; background: #fbfaff; box-shadow: inset 0 0 0 1.5px var(--pp-mid), 0 8px 26px rgba(73, 51, 141, 0.10); }
.rec-ffg__q--open:hover { background: #fbfaff; }
.rec-ffg__q--open .rec-ffe__edit { margin: 0.8rem 0 0 2rem; padding: 0; border: 0; background: none; }
.rec-ffg__q .rec-ffd__tools { opacity: 0; }
.rec-ffg__q:hover .rec-ffd__tools, .rec-ffg__q .rec-ffd__tools:focus-within, .rec-ffg__list > .rec-ffg__q:nth-child(3) .rec-ffd__tools { opacity: 1; }
.rec-ffg__q:hover .rec-ffd__grip { opacity: 1; color: var(--pp-mid); }
.rec-ffg__list .rec-ffd__insert { margin: -0.45rem 0; position: relative; z-index: 1; }
.rec-ffg__scale .rec-ffg__pt { background: var(--rec-tint); border-color: var(--rec-edge); color: var(--hs-ink); }
.rec-ffg__scale .rec-ffg__pt input { margin: 0; }
.rec-ffg__sw { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 6px; background: var(--rec-tint); border: 1px solid var(--rec-edge); color: var(--hs-ink); text-align: center; }
.rec-ffe__optrow { grid-template-columns: 1.4rem minmax(0, 1fr) auto auto; }
.rec-ffg__add { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px dashed var(--hs-line-strong); }
.rec-recs .rec-recs__opt { flex: 1 1 8rem; justify-content: center; cursor: default; }



.rec-ffh__meta { display: flex; align-items: center; gap: 0.5rem; margin: 0.3rem 0 0 2rem; }
.rec-ffh__meta .rec-ffd__type { padding: 0.08rem 0.45rem 0.08rem 0.35rem; font-size: 0.72rem; font-weight: 600; }
.rec-ffh__meta .rec-ffd__ico { width: 13px; height: 13px; }
.rec-ffh__req { font-size: 0.74rem; color: var(--hs-ink-faint); }
.rec-ffh__req--on { color: var(--hs-ink-soft); font-weight: 600; }
.rec-ffh__q .rec-ffd__body .rec-ffe__guide { margin-top: 0.4rem; }
.rec-ffh__tools { display: inline-flex; align-items: center; gap: 0.7rem; margin-left: auto; flex: none; opacity: 0; transition: opacity 120ms; }
.rec-ffh__q:hover .rec-ffh__tools, .rec-ffh__tools:focus-within { opacity: 1; }
.rec-ffh__gap { position: relative; height: 0; list-style: none; z-index: 3; }
.rec-ffh__ins { position: absolute; left: 2rem; right: 0; top: -12px; height: 24px; }
.rec-ffh__ins::before { content: ""; position: absolute; left: 0; right: 0; top: 11px; border-top: 2px solid var(--pp-mid); opacity: 0; transition: opacity 120ms; }
.rec-ffh__plus { list-style: none; position: absolute; left: 50%; top: 0; translate: -50% 0; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 999px; background: var(--pp-mid); color: #fff; cursor: pointer; opacity: 0; transition: opacity 120ms, transform 120ms; }
.rec-ffh__plus::-webkit-details-marker { display: none; }
.rec-ffh__plus svg { width: 14px; height: 14px; }
.rec-ffh__gap:hover .rec-ffh__ins::before, .rec-ffh__ins[open]::before, .rec-ffh__ins:focus-within::before,
.rec-ffh__gap:hover .rec-ffh__plus, .rec-ffh__ins[open] .rec-ffh__plus, .rec-ffh__plus:focus-visible { opacity: 1; }
.rec-ffh__plus:hover { transform: scale(1.12); }
.rec-ffh__ins[open] .rec-ffh__plus { rotate: 45deg; }
.rec-ffh__plus:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-ffh__menu { position: absolute; left: 50%; top: 30px; translate: -50% 0; display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.55rem; border: 1px solid var(--hs-line); border-radius: 12px; background: #fff; box-shadow: 0 10px 30px rgba(24, 18, 43, 0.14); white-space: nowrap; }
.rec-ffh__menu-k { font-size: 0.75rem; font-weight: 600; color: var(--hs-ink-soft); margin: 0 0.25rem; }



.rec-ffi .rec-ffe2__qtitle { flex: 0 1 auto; }
.rec-ffi__meta { margin: 0; display: inline-flex; flex: none; }
.rec-ffi .rec-ffd__head { flex-wrap: nowrap; position: relative; }
.rec-ffi .rec-ffh__tools { position: absolute; right: 0; top: 50%; translate: 0 -50%; padding-left: 0.8rem; background: #fcfbfe; box-shadow: -14px 0 14px #fcfbfe; }



.rec-ffi .rec-ffe2__edited { border-radius: 999px; padding: 0.08rem 0.5rem; font-family: var(--ub-font); font-size: 0.72rem; font-weight: 600; letter-spacing: 0; }
.rec-ffg__q { padding-left: 0.45rem; }
.rec-ffh__menu { box-shadow: 0 6px 18px rgba(24, 18, 43, 0.10); }
.rec-ffd__grip { cursor: grab; }
.rec-ffi__err { color: var(--ub-danger); font-size: 0.78rem; font-weight: 600; margin: 0.3rem 0 0; }
.rec-ffi .rec-input--err { border-color: var(--ub-danger); }
.rec-ffi__flag { border-radius: 999px; padding: 0.08rem 0.5rem; border: 1px solid color-mix(in srgb, var(--ub-danger) 40%, transparent); color: var(--ub-danger); font-size: 0.72rem; font-weight: 600; background: #fff; }
.rec-ffi__empty { margin: 0.4rem 0 0; padding: 1.1rem 0 0.2rem; font-size: 0.88rem; color: var(--hs-ink-soft); }
.rec-ffi__empty b { color: var(--hs-ink); }
.rec-ffi__locked .rec-seg__opt:not([aria-current]) { opacity: 0.4; pointer-events: none; }
.rec-ffi__mocknote { padding: 0.6rem 0.9rem; border: 1px dashed var(--hs-line-strong); border-radius: 10px; font-size: 0.8rem; color: var(--hs-ink-soft); }
.rec-ffe2__changes--err { color: var(--ub-danger); }
@media (prefers-reduced-motion: reduce) {
  .rec-ffg__q, .rec-ffh__tools, .rec-ffh__plus, .rec-ffh__ins::before { transition: none; }
  .rec-ffh__ins[open] .rec-ffh__plus { rotate: none; }
  .rec-ffh__plus:hover { transform: none; }
}
/* 2026-10-03: draft switches submit while retaining the address-switch paint. */
.rec-ffe button.rec-seg__opt { border: 0; background: transparent; font-family: inherit; cursor: pointer; }
.rec-workspace .rec-ffe .rec-seg button[aria-current="true"] { background: #fff; color: var(--hs-ink); box-shadow: 0 1px 3px rgba(24, 18, 43, 0.13); }
.rec-ffe button.rec-seg__opt:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 2px; }

/* Canvas T — REVISION-04 §2.16 and §§4.66–4.77, 2026-10-03: 16a answers the
   four kinds (hero, sticky rail, one card per section, CSS-only progress) and
   the readers draw every kind. Every selector is scoped under .rec-fa*;
   appended after canvas S in every copy (CONTRACT §4). Source:
   84c930fc:prototypes/feedback-answer-kinds/answer-kinds.css. */

/* -- 16a: the form as cards, one per section ------------------------------- */
/* The page: the profile's hero (canvas L) as the interview's head. */
/* Two columns under one hero: the form, and a sticky rail of what the
   interviewer writes against. 47rem + 16rem + 1.5rem fits 1280 and 1440. */
.rec-solo__col.rec-fa-page { max-width: 64.5rem; display: grid; grid-template-columns: minmax(0, 1fr) 16rem; gap: 1.1rem 1.5rem; align-items: start; padding-bottom: 2.5rem; }
.rec-fa-page > .rec-fa__back, .rec-fa-page > .rec-fa__hero { grid-column: 1 / -1; }
.rec-fa-page > .rec-fa__form { grid-column: 1; }
.rec-fa__rail { grid-column: 2; grid-row: 3; position: sticky; top: calc(56px + 1rem); display: grid; gap: 0.9rem; max-height: calc(100vh - 56px - 2rem); overflow: auto; overscroll-behavior: contain; margin-top: 0.9rem; }
.rec-fa__railblock { display: grid; gap: 0.3rem; }
.rec-fa__railblock + .rec-fa__railblock { padding-top: 0.85rem; border-top: 1px solid var(--hs-line); }
.rec-fa__railblock .rec-field__k { margin: 0; }
.rec-fa__rail .rec-fa__brief, .rec-fa__rail .rec-fa__deal { font-size: 0.86rem; }
.rec-fa__rail .rec-fa__reqs summary { font-size: 0.84rem; }
.rec-fa__left--rail { flex: none; margin: 0.1rem 0 0.2rem; }
.rec-fa__jumps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; }
.rec-fa__jump { display: block; margin: 0 -0.45rem; padding: 0.25rem 0.45rem; border-radius: 8px; font-size: 0.84rem; color: var(--hs-ink-soft); text-decoration: none; transition: background 120ms ease-out, color 120ms ease-out; }
.rec-fa__jump:hover { background: #f7f5fc; color: var(--pp-ink); }
.rec-fa__jump:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 1px; }
.rec-fa__sec { scroll-margin-top: 4.75rem; }
.rec-fa__back { margin: 0 0 -0.35rem; }
.rec-fa__back .rec-textbtn { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.8rem; color: var(--hs-ink-soft); }
.rec-fa__back svg { width: 14px; height: 14px; }
.rec-fa__hero .rec-prof__hero__head { align-items: center; }
.rec-fa__owed { display: flex; align-items: center; gap: 0.75rem; flex: none; }
/* One status beside the actions: the figure reads across, a hairline apart. */
.rec-fa__hero .rec-idcard__acts + .rec-fa__owed { padding-left: 1rem; border-left: 1px solid var(--hs-line); }
.rec-fa__railblock .rec-fa__by { margin-top: 0.1rem; }
.rec-fa__owed .rec-ov__taskn { display: flex; align-items: center; gap: 0.55rem; text-align: left; }
.rec-fa__owed .rec-ov__taskn b { font-size: 1.85rem; color: var(--ub-danger); }
.rec-fa__owed .rec-ov__taskn span { line-height: 1.35; }
.rec-prof .rec-fa__fields { grid-template-columns: 1.25fr 0.8fr 0.9fr 1.25fr; }
.rec-fa__fields .rec-field { min-width: 0; }
.rec-fa__fields .rec-field__v { overflow-wrap: anywhere; }
.rec-fa__fieldsub { margin: 0.15rem 0 0; font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-fa__brief, .rec-fa__deal { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--hs-ink); max-width: 60ch; }
.rec-fa__by { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-fa__deal { font-weight: 600; }
.rec-fa__reqs { flex: 1; min-width: 0; }
.rec-fa__reqs summary { list-style: none; cursor: pointer; font-size: 0.86rem; font-weight: 600; color: var(--pp-ink); }
.rec-fa__reqs summary::-webkit-details-marker { display: none; }
.rec-fa__reqs summary { display: inline-flex; align-items: center; gap: 0.3rem; }
.rec-fa__reqs summary svg { width: 15px; height: 15px; transition: rotate 160ms; }
.rec-fa__reqs[open] summary svg { rotate: 180deg; }
.rec-fa__reqs summary:hover { text-decoration: underline; }
.rec-fa__reqs summary:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 3px; border-radius: 4px; }
.rec-fa__reqs .rec-expand__if-open { display: none; }
.rec-fa__reqs[open] .rec-expand__if-open { display: inline; }
.rec-fa__reqs[open] .rec-expand__if-closed { display: none; }
.rec-fa__reqlist { display: grid; gap: 0.75rem; margin-top: 0.7rem; }
.rec-fa__reqk { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--hs-ink); }
.rec-fa__reqv { margin: 0.15rem 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--hs-ink-soft); white-space: pre-line; max-width: 62ch; }

/* -- 16a: the form as cards, one per section ------------------------------- */
.rec-fa__form { display: grid; gap: 0.9rem; }
.rec-fa__formhead { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem 0.8rem; margin-top: 0.9rem; }
.rec-fa__private { display: flex; align-items: flex-start; gap: 0.45rem; margin: -0.35rem 0 0.1rem; font-size: 0.8rem; color: var(--hs-ink-soft); }
.rec-fa__private svg { width: 14px; height: 14px; flex: none; margin-top: 0.15rem; color: var(--hs-gold); }
.rec-fa { display: grid; gap: 0.9rem; min-width: 0; }
.rec-fa__sec .rec-ov__head { margin-bottom: 0.2rem; }
.rec-fa__list { list-style: none; margin: 0; padding: 0; }
.rec-fa__q { padding: 0.95rem 0 1rem; border-bottom: 1px solid var(--hs-line); }
.rec-fa__list > .rec-fa__q:last-child { border-bottom: 0; padding-bottom: 0.2rem; }
.rec-fa__field { margin: 0; padding: 0; border: 0; min-width: 0; }
.rec-fa__field > legend { float: left; width: 100%; }
.rec-fa__q .rec-fa__field > legend { padding: 0; }
.rec-fa__rec > legend { padding-inline: 0; }
.rec-fa__field > legend ~ * { clear: both; }
.rec-fa__head .rec-ffe2__qtitle { flex: 0 1 auto; }
.rec-fa__body { margin-left: 2rem; }
.rec-fa__body > :first-child { margin-top: 0.35rem; }
.rec-fa__body .rec-ffe__guide { margin: 0.35rem 0 0.6rem; max-width: 68ch; }

/* Guidance past two lines: a native disclosure, no script. */
.rec-fa__guide summary { list-style: none; cursor: pointer; }
.rec-fa__guide summary::-webkit-details-marker { display: none; }
.rec-fa__guide summary .rec-ffe__guide { margin-bottom: 0.15rem; }
.rec-fa__guide[open] .rec-ffe__guide--clamp { display: block; -webkit-line-clamp: unset; overflow: visible; }
.rec-fa__more { display: inline-block; margin-bottom: 0.55rem; font-size: 0.78rem; font-weight: 600; color: var(--pp-ink); }
.rec-fa__guide summary:hover .rec-fa__more, .rec-fa__long summary:hover .rec-fa__more { text-decoration: underline; }
.rec-fa__guide summary:focus-visible, .rec-fa__long summary:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 3px; border-radius: 4px; }
.rec-fa__guide .rec-expand__if-open, .rec-fa__long .rec-expand__if-open { display: none; }
.rec-fa__guide[open] .rec-expand__if-open, .rec-fa__long[open] .rec-expand__if-open { display: inline; }
.rec-fa__guide[open] .rec-expand__if-closed, .rec-fa__long[open] .rec-expand__if-closed { display: none; }

/* The four controls. A tinted scale takes the recommendation's chosen ring. */
/* A scale point is the whole chip: the radio is kept for the keyboard and
   for assistive tech, and the chip draws its checked and focused states. */
.rec-fa__scale { margin-top: 0.15rem; gap: 0.4rem; }
.rec-fa__scale .rec-scale__opt { position: relative; padding: 0.4rem 0.8rem 0.4rem 0.4rem; border-radius: 999px; cursor: pointer; }
.rec-fa__scale .rec-scale__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.rec-fa__scale .rec-scale__n { display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; border-radius: 999px; background: #fff; font-size: 0.72rem; }
.rec-fa__scale .rec-scale__opt:has(input:focus-visible) { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-fa .rec-ffg__scale .rec-ffg__pt:hover { border-color: var(--hs-ink-soft); }
.rec-fa .rec-ffg__scale .rec-ffg__pt:has(input:checked) { border-color: var(--hs-ink); box-shadow: inset 0 0 0 1px var(--hs-ink); }
.rec-fa .rec-ffg__scale .rec-ffg__pt:has(input:checked) .rec-scale__n { background: var(--hs-ink); color: #fff; }
.rec-fa__opts { gap: 0.1rem; margin-left: -0.55rem; }
.rec-fa__opts.rec-ffe__optlist--cols { column-gap: 0.4rem; }
.rec-fa__opt { padding: 0.32rem 0.55rem; border-radius: 8px; color: var(--hs-ink); cursor: pointer; line-height: 1.4; align-items: flex-start; transition: background 120ms; }
.rec-fa__opt:hover { background: #f7f5fc; }
.rec-fa__opt:has(input:checked) { background: var(--pp-tint); }
.rec-fa__opt input { margin-top: 0.18rem; }
.rec-fa__text { width: 100%; min-height: 6.5rem; field-sizing: content; max-height: 28rem; }
.rec-fa__line { width: 100%; max-width: 32rem; }
.rec-fa__comment { margin-top: 0.6rem; }
.rec-fa__comment .rec-textarea { width: 100%; min-height: 2.6rem; field-sizing: content; max-height: 14rem; }
.rec-fa__q.rec-question--error .rec-ffe2__qtitle { color: var(--ub-danger); }
.rec-fa__q.rec-question--error .rec-textarea, .rec-fa__q.rec-question--error .rec-input { border-color: var(--ub-danger); }
.rec-fa__rec .rec-recs { margin-top: 0.35rem; }
.rec-fa__rec > legend { margin-bottom: 0.2rem; }
.rec-fa__submit { margin: 1rem -1.25rem -1.2rem; padding: 0.9rem 1.25rem; border-radius: 0 0 14px 14px; }
.rec-fa__body .rec-ffe__guide { white-space: pre-line; }

/* -- An answer, as every reader prints it -------------------------------- */
.rec-fa__val { margin: 0.2rem 0 0; display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; font-size: 0.86rem; color: var(--hs-ink); }
.rec-fa__chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.18rem 0.6rem 0.18rem 0.3rem; border: 1px solid var(--rec-edge, var(--hs-line-strong)); border-radius: 999px; background: var(--rec-tint, var(--hs-bg)); color: var(--hs-ink); font-size: 0.82rem; font-weight: 600; }
.rec-fa__chip .rec-scale__n { display: inline-grid; place-items: center; min-width: 1.2rem; height: 1.2rem; border-radius: 999px; background: #fff; font-size: 0.7rem; }
.rec-fa__of { font-family: var(--ub-font-mono); font-size: 0.75rem; color: var(--hs-ink-faint); }
.rec-fa__pick { font-weight: 600; line-height: 1.45; }
.rec-fa__picks .rec-tag { color: var(--hs-ink); }
.rec-fa__none { margin: 0.2rem 0 0; font-size: 0.82rem; font-style: italic; color: var(--hs-ink-faint); }
.rec-fa__prose .rec-answer__a, .rec-fa__long .rec-answer__a { margin: 0.25rem 0 0; }
.rec-fa__prose .rec-answer__a + .rec-answer__a, .rec-fa__long .rec-answer__a + .rec-answer__a { margin-top: 0.55rem; }
.rec-fa__comment-a { margin: 0.4rem 0 0; padding-left: 0.65rem; border-left: 2px solid var(--hs-line-strong); font-size: 0.84rem; line-height: 1.55; color: var(--hs-ink-soft); }
.rec-fa__q--read { padding: 0.8rem 0 0.85rem; }
.rec-fa__yours { display: flex; align-items: center; gap: 0.8rem; }

/* 14b: everything but prose, as two columns. */
.rec-fa__ledger { display: grid; gap: 0; margin-top: 0.4rem; }
.rec-fa__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 0.9rem; align-items: baseline; padding: 0.4rem 0; border-bottom: 1px dashed var(--hs-line); }
.rec-fa__row:last-child { border-bottom: 0; }
.rec-fa__row .rec-answer__q { margin: 0; }
.rec-fa__row .rec-fa__val, .rec-fa__row .rec-fa__none { margin: 0; }

/* 09: a text answer fills the comment column. */
.rec-fa__qa--text .rec-fa__prose .rec-answer__a:first-child, .rec-fa__qa--text .rec-fa__none { margin-top: 0; }

/* 31: unchanged prose clamps; changed answers keep the marker rule. */
.rec-fa__long summary { list-style: none; cursor: pointer; }
.rec-fa__long summary::-webkit-details-marker { display: none; }
.rec-fa__clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.rec-fa__long[open] .rec-fa__clamp { display: block; overflow: visible; }
.rec-fa__long .rec-fa__more { margin: 0.2rem 0 0; }
.rec-fa__moved { border-left: 2px solid var(--pp-mid); padding-left: 0.6rem; margin-left: -0.62rem; }
.rec-fa__changed { border-color: var(--pp-mid); color: var(--pp-ink); background: var(--pp-tint); margin-left: 0.35rem; }
.rec-fa__rev > div { padding: 0.55rem 0; border-bottom: 1px solid var(--hs-line); }
.rec-fa__rev > div:last-child { border-bottom: 0; }


/* -- Feedback as you answer: CSS only, read from the controls' own state ---- */
.rec-fa__q { margin: 0 -0.75rem; padding-inline: 0.75rem; border-radius: 10px; transition: background 160ms ease-out; }
.rec-fa__q:focus-within { background: #fcfbfe; }
.rec-fa__n { display: inline-grid; place-items: center; min-width: 1.6rem; height: 1.25rem; margin-left: -0.15rem; padding: 0 0.3rem; border-radius: 999px; transition: background 200ms ease-out, color 200ms ease-out; }
.rec-fa__q:has(input:checked) .rec-fa__n,
.rec-fa__q:has(.rec-fa__text:not(:placeholder-shown)) .rec-fa__n,
.rec-fa__q:has(.rec-fa__line:not(:placeholder-shown)) .rec-fa__n { background: var(--pp-mid); color: #fff; }
.rec-fa__q.rec-question--error .rec-fa__n { background: color-mix(in srgb, var(--ub-danger) 12%, #fff); color: var(--ub-danger); }

.rec-fa__done { display: none; align-items: center; gap: 0.3rem; margin-left: auto; font-size: 0.75rem; font-weight: 600; color: #256e43; }
.rec-fa__tick { width: 14px; height: 14px; }
/* :has() cannot nest, so completeness reads the controls' own validity. */
.rec-fa__sec:has(.rec-fa__q--req):not(:has(.rec-fa__q--req :invalid)) .rec-fa__done { display: inline-flex; animation: rec-fa-in 260ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }

/* Tactile choices: ease between states, give a little on press, pop the chosen number. */
.rec-fa__scale .rec-scale__opt, .rec-fa__rec .rec-recs__opt { transition: border-color 140ms ease-out, box-shadow 140ms ease-out, background 140ms ease-out, transform 120ms ease-out; }
.rec-fa__scale .rec-scale__opt:active, .rec-fa__rec .rec-recs__opt:active, .rec-fa__opt:active { transform: scale(0.97); }
.rec-fa__opt { transition: background 140ms ease-out, transform 120ms ease-out; }
.rec-fa__scale .rec-scale__opt:has(input:checked) .rec-scale__n { animation: rec-fa-pop 220ms cubic-bezier(0.2, 0.7, 0.2, 1); }

/* The requirements open, rather than appear, where the browser can size to auto. */
.rec-fa-page { interpolate-size: allow-keywords; }
.rec-fa__reqs::details-content { block-size: 0; overflow: clip; transition: block-size 240ms cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 240ms allow-discrete; }
.rec-fa__reqs[open]::details-content { block-size: auto; }

/* A refusal's links land on the question and say which one it was. */
html:has(.rec-fa-page) { scroll-behavior: smooth; }
/* Clears the shell's sticky 56px top bar, so the question it names is in view. */
.rec-fa__q, .rec-fa-page #q-rec { scroll-margin-top: 4.75rem; }
.rec-fa__q:target, .rec-fa-page #q-rec:target { animation: rec-fa-flag 1.4s ease-out; }
.rec-fa-page .message--error a { color: inherit; font-weight: 600; text-underline-offset: 2px; }

@keyframes rec-fa-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes rec-fa-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@keyframes rec-fa-flag { 0%, 30% { background: color-mix(in srgb, var(--ub-danger) 9%, #fff); } 100% { background: transparent; } }

@media (prefers-reduced-motion: reduce) {
  html:has(.rec-fa-page) { scroll-behavior: auto; }
  .rec-fa *, .rec-fa__reqs summary svg, .rec-fa__reqs::details-content { transition: none; animation: none; }
  .rec-fa__q:target, .rec-fa-page #q-rec:target { animation: none; }
}

/* An answer clears its refusal: the red was about the submission, not the fix. */
.rec-fa__q.rec-question--error:has(input:checked) .rec-question__error,
.rec-fa__q.rec-question--error:has(.rec-fa__text:valid) .rec-question__error,
.rec-fa__q.rec-question--error:has(.rec-fa__line:valid) .rec-question__error,
.rec-fa__rec.rec-question--error:has(input:checked) .rec-question__error { display: none; }
.rec-fa__q.rec-question--error:has(input:checked) .rec-ffe2__qtitle,
.rec-fa__q.rec-question--error:has(.rec-fa__text:valid) .rec-ffe2__qtitle,
.rec-fa__q.rec-question--error:has(.rec-fa__line:valid) .rec-ffe2__qtitle { color: var(--hs-ink); }
.rec-fa__q.rec-question--error .rec-textarea:valid,
.rec-fa__q.rec-question--error .rec-input:valid { border-color: color-mix(in srgb, var(--hs-ink-faint) 75%, #fff); }
.rec-fa__rec.rec-question--error:has(input:checked) .rec-recs .rec-recs__opt:not(:has(input:checked)) { border-color: var(--rec-edge); }

/* What is left, beside the button that needs it. CSS counters count the
   required questions still invalid; no script, and the server still decides. */
.rec-fa-page { counter-reset: rec-fa-left; }
.rec-fa__q--req:has(:invalid), .rec-fa__rec:has(:invalid) { counter-increment: rec-fa-left; }
.rec-fa__left { flex: 1 0 100%; margin: 0 0 0.15rem; font-size: 0.84rem; font-weight: 600; color: var(--hs-ink-soft); }
.rec-fa__left::before { content: "Still to answer: " counter(rec-fa-left) " required"; }
.rec-fa-page:not(:has(.rec-fa__q--req :invalid)):not(:has(.rec-fa__rec :invalid)) .rec-fa__left { color: #256e43; }
.rec-fa-page:not(:has(.rec-fa__q--req :invalid)):not(:has(.rec-fa__rec :invalid)) .rec-fa__left::before { content: "Everything required is answered"; }
.rec-fa__submit { flex-wrap: wrap; }
/* Canvas U — REVISION-04 §2.17 and §§4.81–4.98, 2026-10-04: the application (09),
   its feedback overlay, recorded feedback (14b) and 16a's bar, foot and covered
   state. Extracted from the agreed mocks; class names are the design's own.
   Where ::details-content is unsupported, a Coming up line opens at once. */
.rec-page.rec-ap { display: grid; gap: 1rem; padding: 1.4rem 1.25rem 2rem; }
.rec-page.rec-ap > * { min-width: 0; margin: 0; }
.rec-ap-faint { color: var(--hs-ink-faint); }
.rec-ap-mono { font-family: var(--ub-font-mono); font-size: 0.72rem; }
.rec-ap-hot { color: var(--ub-danger); }
.rec-ap-spacer { flex: 1 1 auto; }
.rec-ap-cardhead { margin-bottom: 0.25rem; }
.rec-ap-cardhead .rec-ap-faint { font-size: 0.8rem; }
.rec-ap-marks { display: inline-flex; gap: 4px; align-items: center; }
.rec-ap-mark { width: 11px; height: 11px; border-radius: 50%; display: block; box-sizing: border-box; }
.rec-ap-mark--yes2 { background: #256e43; }
.rec-ap-mark--yes { background: color-mix(in srgb, #256e43 50%, #fff); }
.rec-ap-mark--owed { border: 1.5px dashed #c8553d; }
.rec-ap-mark--no { background: color-mix(in srgb, #c8553d 45%, #fff); }
.rec-ap-mark--no2 { background: #c8553d; }
.rec-ap-col { display: grid; gap: 1rem; min-width: 0; }
.rec-ap-ix { margin: 0; padding: 0; list-style: none; }
.rec-ap-ix__iv { padding: 0.7rem 0 0.55rem; }
.rec-ap-ix__iv + .rec-ap-ix__iv { border-top: 1px solid var(--hs-line); }
.rec-ap-ix__head { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem 0.6rem; margin: 0 0 0.3rem; font-size: 0.78rem; }
.rec-color a.rec-ap-ix__title { font-size: 0.9rem; font-weight: 650; color: var(--hs-ink); text-decoration: none; }
.rec-color a.rec-ap-ix__title:hover { text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 0.18em; }
.rec-ap-ix__rows { margin: 0 -0.6rem; padding: 0; list-style: none; display: grid; gap: 1px; }
.rec-ap-fr { display: flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; padding: 0 0.6rem; font-size: 0.78rem; }
.rec-color a.rec-ap-fr__a { flex: 1 1 auto; display: flex; align-items: center; gap: 0.6rem; min-height: 2.25rem; margin: 0 -0.6rem; padding: 0 0.6rem; border-radius: 8px; color: inherit; text-decoration: none; }
.rec-color a.rec-ap-fr__a:hover { background: var(--hs-hover); }
.rec-ap-fr__name { font-weight: 600; font-size: 0.85rem; color: var(--hs-ink); }
.rec-ap-fr__go { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; font-weight: 600; color: var(--hs-ink-faint); transition: color 0.15s, transform 0.15s; }
.rec-ap-fr__go::after { content: ""; width: 0.4rem; height: 0.4rem; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); }
.rec-color a.rec-ap-fr__a:hover .rec-ap-fr__go { color: var(--pp-mid); transform: translateX(2px); }
.rec-ap-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0.55rem 1.1rem; margin: 0.35rem 0 0; font-size: 0.85rem; }
.rec-ap-fact { display: contents; }
.rec-ap-fact dt { margin: 0; padding-top: 0.2rem; }
.rec-ap-fact dd { margin: 0; color: var(--hs-ink); }
.rec-ap-fact dd b { font-weight: 600; }
.rec-ap-notelist { margin: 0; padding: 0; list-style: none; }
.rec-ap-note { padding: 0.7rem 0; border-top: 1px solid var(--hs-line); }
.rec-ap-note__by { display: flex; gap: 0.6rem; margin: 0; font-size: 0.78rem; }
.rec-ap-note__by b { font-weight: 600; color: var(--hs-ink); }
.rec-ap-note__body { margin: 0.3rem 0 0; font-size: 0.875rem; line-height: 1.5; color: var(--hs-ink); }
.rec-ap-ix__head > .rec-ap-faint { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ap-ix__head > * { flex: none; }
.rec-ap-ix__head > .rec-ap-faint, .rec-ap-ix__head > .rec-ap-spacer { flex: 0 1 auto; }
.rec-ap-ix__head > .rec-ap-spacer { flex: 1 1 auto; }
.rec-page.rec-apx { max-width: 76rem; margin: 0 auto; }
.rec-apx-hero .rec-prof__hero__head { align-items: center; }
.rec-apx-hero h1 a { color: inherit; text-decoration: none; }
.rec-apx-hero h1 a:hover { text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 3px; }
.rec-apx-status { display: flex; align-items: center; flex: none; padding-left: 1rem; border-left: 1px solid var(--hs-line); }
.rec-apx-status .rec-ov__taskn { display: flex; align-items: center; gap: 0.55rem; text-align: left; }
.rec-apx-status .rec-ov__taskn b { font-size: 1.85rem; }
.rec-apx-status .rec-ov__taskn span { line-height: 1.35; }
.rec-apx-status--stalled .rec-ov__taskn b, .rec-apx-status--stalled .rec-ov__taskn span { color: var(--ub-danger); }
.rec-apx-owner { display: flex; align-items: center; gap: 0.6rem; }
.rec-apx-owner .rec-textbtn { font-size: 0.78rem; }
.rec-apx-opt { margin-left: 0.5rem; font-family: var(--ub-font); font-size: 0.72rem; font-weight: 400; color: var(--hs-ink-faint); }
.rec-apx-comment { margin: 0.35rem 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--hs-ink-soft); }
.rec-apx-rev { font-size: 0.75rem; }
.rec-apx-herofoot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 1.5rem; }
.rec-apx-stages { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--hs-ink-soft); }
.rec-apx-st { display: inline-flex; align-items: center; gap: 0.4rem; }
.rec-apx-st + .rec-apx-st::before { content: ""; width: 1.6rem; height: 1.5px; margin: 0 0.5rem; background: var(--hs-line-strong); }
.rec-apx-st--done + .rec-apx-st::before { background: color-mix(in srgb, var(--ub-accent) 45%, #fff); }
.rec-apx-st__dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; border: 1.5px solid var(--hs-line-strong); background: #fff; }
.rec-apx-st--done .rec-apx-st__dot { border-color: transparent; background: color-mix(in srgb, var(--ub-accent) 45%, #fff); }
.rec-apx-st--now .rec-apx-st__dot { width: 0.65rem; height: 0.65rem; border-color: var(--ub-accent); background: var(--ub-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ub-accent) 18%, #fff); }
.rec-apx-st--now .rec-apx-st__n { font-weight: 600; color: var(--hs-ink); }
.rec-apx-st--next .rec-apx-st__n { color: var(--hs-ink-faint); }
.rec-apx-herofacts { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; font-size: 0.8rem; color: var(--hs-ink-soft); }
.rec-apx-herofacts b { font-weight: 600; color: var(--hs-ink); }
.rec-apx-herofacts > span + span::before { content: "·"; margin: 0 0.6rem; color: var(--hs-ink-faint); }
.rec-color a.rec-apx-link { margin-left: 0.3rem; font-size: 0.78rem; }
.rec-apx-hero .rec-idcard__acts { display: flex; align-items: center; gap: 0.5rem; }
.rec-apx-more > summary.button { gap: 0.3rem; }
.rec-apx-more .rec-ivmanage__menu { width: 19rem; }
.rec-apx-more__end { border-top: 1px solid var(--hs-line); }
.rec-apx-more__help { margin-left: auto; font-size: 0.72rem; font-weight: 400; color: var(--hs-ink-faint); }
.rec-color .rec-ivmanage a.rec-ivmanage__item.rec-apx-more__danger { color: var(--ub-danger); }
.rec-apx-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.rec-apx-hero { position: relative; z-index: 3; }
.rec-apx-owedline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.75rem; margin: 0; padding: 0.5rem 0.75rem; border: 1px dashed color-mix(in srgb, #c8553d 55%, transparent); border-radius: 10px; font-size: 0.8rem; }
.rec-apx-owedline b { font-weight: 600; color: var(--hs-ink); }
.rec-apo-foot { margin: 0; }
.rec-apo-foot svg { width: 13px; height: 13px; vertical-align: -2px; color: var(--hs-gold); }
.rec-review.rec-ovs { padding: 1.75rem 3rem; }
.rec-ovs .rec-review__panel { max-width: 1180px; height: calc(100vh - 56px - 3.5rem); display: flex; flex-direction: column; padding: 1rem 1.5rem 0; }
.rec-ovs .rec-review__bar { flex: none; }
.rec-ovx-prose { font-size: 0.95rem; line-height: 1.65; color: var(--hs-ink); }
.rec-ovx-prose p { margin: 0 0 0.6rem; }
.rec-ovx-prose ul { margin: 0 0 0.6rem; padding-left: 1.15rem; }
.rec-ovx-prose ul ul { margin: 0.25rem 0 0.1rem; }
.rec-ovx-prose li + li { margin-top: 0.3rem; }
.rec-ovx-prose li::marker { color: var(--hs-ink-faint); }
.rec-ovx-prose > :last-child { margin-bottom: 0; }
.rec-ovx-qt { display: flex; align-items: baseline; margin: 0 0 0.6rem; font-family: var(--ub-font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--hs-ink); }
.rec-ovx3-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: grid; align-content: start; gap: 1.6rem; margin: 0.9rem -1.5rem 0; padding: 1.1rem 1.5rem 1.5rem; border-top: 1px solid var(--hs-line); }
.rec-ovx3-cmp { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 0.86rem; }
.rec-ovx3-cmp th, .rec-ovx3-cmp td { padding: 0.5rem 1rem 0.5rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hs-line); }
.rec-ovx3-cmp thead th { padding-top: 0; border-bottom-color: color-mix(in srgb, var(--hs-gold) 45%, transparent); }
.rec-ovx3-cmp tbody th { width: 34%; font-weight: 500; color: var(--hs-ink); }
.rec-ovx3-cmp tbody th > span:last-child { display: inline; }
.rec-ovx3-cmp .rec-fa__val, .rec-ovx3-cmp .rec-fa__none { margin: 0; }
.rec-ovx3-cmp .rec-fa__pick { font-weight: 500; }
.rec-ovx3-glance { padding: 0.9rem 1.1rem 0.4rem; border: 1px solid var(--hs-line); border-radius: 12px; }
.rec-ovx3-q { display: grid; gap: 0.75rem; }
.rec-ovx3-a { display: grid; grid-template-columns: 11rem minmax(0, 46rem); gap: 1.25rem; padding: 0.85rem 0; border-top: 1px solid var(--hs-line); }
.rec-ovx3-by .rec-who__name { font-size: 0.86rem; }
.rec-ovx3-body > .rec-apx-owedline { margin: 0; }
.rec-ovx3-body.rec-ovx3-body--doc > * { box-sizing: border-box; width: 100%; max-width: 46rem; margin-inline: auto; }
.rec-ovx4-doc { display: grid; }
.rec-ovx4-head { padding-bottom: 0.9rem; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent); }
.rec-ovx4-head .rec-who__name, .rec-ovx4-head .rec-who__sub { max-width: none; overflow: visible; white-space: normal; }
.rec-ovx4-rec { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.75rem; }
.rec-ovx4-q { padding: 1.1rem 0; border-bottom: 1px solid var(--hs-line); }
.rec-ovx4-q:last-child { border-bottom: 0; }
.rec-ovx4-q > .rec-ovx-qt { margin-bottom: 0.45rem; font-family: var(--ub-font); font-size: 0.95rem; font-weight: 600; }
.rec-ovx4-q .rec-fa__val, .rec-ovx4-q .rec-fa__none { margin: 0; }
.rec-ovx4-q .rec-fa__pick { font-weight: 500; }
.rec-ovx4-q :is(.rec-fa__val, .rec-fa__none, .rec-ovx-prose) + .rec-ovx-prose { margin-top: 0.6rem; }
.rec-ovx4-q .rec-ovx-prose { max-width: 70ch; }
.rec-apx-closed { display: grid; justify-items: start; gap: 0.2rem; }
.rec-apx-closed__sub { font-family: var(--ub-font-mono); font-size: 0.7rem; color: var(--hs-ink-faint); }
.rec-apx-st--off .rec-apx-st__n { text-decoration: line-through; text-decoration-color: var(--hs-line-strong); }
.rec-apx-inline { display: inline; margin: 0; }
button.rec-apx-link { margin-left: 0.3rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.78rem; font-weight: 600; color: var(--pp-ink); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.rec-apx-fr--covered .rec-ap-fr__name { font-weight: 500; color: var(--hs-ink-soft); }
.rec-ap-mark--covered { border: 1.5px solid color-mix(in srgb, #256e43 50%, #fff); background: repeating-linear-gradient(135deg, color-mix(in srgb, #256e43 30%, #fff) 0 2px, #fff 2px 4px); }
.rec-ovx-prose ol { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.rec-ovx-prose strong { font-weight: 650; }
.rec-apx-comment .rec-ovx-prose { font-size: 0.84rem; line-height: 1.5; color: var(--hs-ink-soft); }
.rec-apx-hist { padding: 1.4rem 1.25rem 2rem; }
.rec-apx-hist .rec-filters { margin: 0 0 0.4rem; padding: 0 0 0.75rem; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent); background: none; }
.rec-apx-histfoot { margin: 0.7rem 0 0; font-size: 0.8rem; }
.rec-apx-with { margin: 0 0 1rem; padding: 0.8rem 0 0; border: 0; border-top: 1px solid var(--hs-line); }
.rec-apx-with .rec-fa__opt { margin-top: 0.4rem; }
.rec-apx-with .rec-form__help { margin: 0.35rem 0 0; }
.rec-apx-hero .rec-idcard__acts { flex-wrap: nowrap; flex: none; }
.rec-apx-hero .rec-idcard__acts .button, .rec-apx-hero .rec-idcard__acts form { white-space: nowrap; margin: 0; }
.rec-apx-hero .rec-prof__hero__id { min-width: 0; }
.rec-apx-hero .rec-prof__hero__headline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-apx-with { margin-top: 1rem; padding-top: 0.9rem; }
.rec-apx-with > legend { float: left; width: 100%; margin: 0 0 0.2rem; padding: 0; }
.rec-apx-with > legend + * { clear: left; }
.rec-apx-ed { position: relative; border: 1px solid color-mix(in srgb, var(--hs-ink-faint) 75%, #fff); border-radius: 10px; background: #fff; transition: border-color 140ms, box-shadow 140ms; }
.rec-apx-ed:focus-within, .rec-apx-ed--on { border-color: var(--pp-mid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-mid) 16%, transparent); }
.rec-apx-ed .rec-apx-ed__t { position: absolute; left: 0.65rem; bottom: 0.5rem; width: 1px; height: 1px; min-height: 0; max-height: none; padding: 0; border: 0; opacity: 0; pointer-events: none; resize: none; }
.rec-apx-ed__doc { min-height: 6.5rem; max-height: 28rem; overflow-y: auto; padding: 0.5rem 0.65rem; font-size: 0.875rem; line-height: 1.55; color: var(--hs-ink); overflow-wrap: anywhere; outline: none; }
.rec-apx-ed__doc p { margin: 0 0 0.5rem; }
.rec-apx-ed__doc :is(ul, ol) { margin: 0 0 0.5rem; padding-left: 1.3rem; }
.rec-apx-ed__doc :is(ul, ol) :is(ul, ol) { margin: 0.2rem 0 0; }
.rec-apx-ed__doc ul { list-style-type: disc; }
.rec-apx-ed__doc ol { list-style-type: decimal; }
.rec-apx-ed__doc :is(ul, ol) ul { list-style-type: circle; }
.rec-apx-ed__doc li + li { margin-top: 0.2rem; }
.rec-apx-ed__doc li::marker { color: var(--hs-ink-faint); }
.rec-apx-ed__doc > :last-child { margin-bottom: 0; }
.rec-apx-ed__doc strong { font-weight: 650; }
.rec-apx-ed__doc a, .rec-ovx-prose a { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.15em; overflow-wrap: anywhere; }
.rec-apx-ed { display: grid; grid-template-rows: auto 0fr; transition: grid-template-rows 140ms ease-out, border-color 140ms, box-shadow 140ms; }
.rec-apx-ed:focus-within, .rec-apx-ed--on { grid-template-rows: auto 1fr; }
.rec-apx-ed__bar { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 140ms ease-out; }
.rec-apx-ed__in { display: flex; gap: 0.15rem; padding: 0.3rem 0.4rem; border-top: 1px solid var(--hs-line); }
.rec-apx-ed:focus-within .rec-apx-ed__bar, .rec-apx-ed--on .rec-apx-ed__bar { opacity: 1; }
.rec-apx-ed__b { display: inline-grid; place-items: center; width: 1.85rem; height: 1.7rem; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--hs-ink-soft); font-size: 0.9rem; cursor: pointer; }
.rec-apx-ed__b:hover { background: var(--hs-hover); color: var(--hs-ink); }
.rec-apx-ed__b:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 0; }
.rec-apx-ed__b svg { width: 16px; height: 16px; }
.rec-apx-ed__i { font-family: Georgia, serif; font-weight: 600; }
.rec-apx-ed__b[aria-pressed="true"] { background: var(--pp-tint); color: var(--pp-mid); }
.rec-apx-ed__sep { flex: none; width: 1px; margin: 0.3rem 0.3rem; background: var(--hs-line); }
.rec-apx-ed__in--link { align-items: center; gap: 0.4rem; }
.rec-apx-ed__url { flex: 1 1 auto; min-width: 0; height: 1.7rem; padding: 0 0.5rem; border: 1px solid var(--hs-line-strong); border-radius: 6px; background: #fff; color: var(--hs-ink); font: inherit; font-size: 0.84rem; }
.rec-apx-ed__url:focus { outline: 2px solid var(--pp-mid); outline-offset: -1px; }
.rec-apx-ed__url[aria-invalid="true"] { border-color: var(--ub-danger); }
.rec-apx-ed__err { flex: none; font-size: 0.75rem; color: var(--ub-danger); }
@media (prefers-reduced-motion: reduce) {
  .rec-apx-ed, .rec-apx-ed__bar { transition: none; }
}
.rec-fa__submit.rec-apx-submit { display: grid; gap: 0.75rem; }
.rec-apx-submit .rec-apx-with { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin: 0; padding: 0 0 0.75rem; border: 0; border-bottom: 1px solid var(--hs-line); }
.rec-apx-with__k { float: none; width: auto; margin: 0; padding: 0; font-size: 0.8rem; font-weight: 600; color: var(--hs-ink-soft); }
.rec-apx-with__p { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem 0.25rem 0.5rem; border: 1px solid var(--hs-line); border-radius: 999px; font-size: 0.84rem; color: var(--hs-ink); cursor: pointer; }
.rec-apx-with__p:has(input:checked) { border-color: var(--pp-mid); background: var(--pp-tint); }
.rec-apx-submit__row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.rec-apx-submit__l { min-width: 0; }
.rec-apx-submit__l .rec-fa__left { margin: 0; }
.rec-apx-submit__l .rec-form__help { margin: 0.15rem 0 0; }
.rec-apx-submit__row .button { flex: none; }
.rec-apu-s__i { display: inline-grid; place-items: center; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 1.5px solid var(--hs-line-strong); background: #fff; }
.rec-apu-s__i svg { width: 0.8rem; height: 0.8rem; }
.rec-apu-s__i--ok { border-color: transparent; background: #dcefe3; color: #256e43; }
.rec-apu-s__i--due { border-color: transparent; background: #f6ebc9; color: #7a5a00; }
.rec-apu-s__i--bad { border-color: transparent; background: #f8dfdc; color: var(--ub-danger); }
.rec-apc1__tile { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--hs-gold) 55%, transparent); background: color-mix(in srgb, var(--hs-gold) 10%, #fff); line-height: 1; }
.rec-apc1__tile b { font-family: var(--ub-font-display); font-size: 1.35rem; color: var(--hs-ink); }
.rec-apc1__tile span { margin-top: -0.5rem; font-family: var(--ub-font-mono); font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--hs-ink-soft); }
.rec-apc1__tile--none { border-style: dashed; background: #fff; font-family: var(--ub-font-display); font-size: 1.2rem; color: var(--hs-ink-faint); }
.rec-apc1__rows { margin: 0.9rem 0 0 4.4rem; padding: 0; list-style: none; border-top: 1px solid var(--hs-line); }
.rec-apc1-row { display: flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--hs-line); font-size: 0.86rem; color: var(--hs-ink); }
.rec-apc1-row__w { flex: 1; min-width: 0; }
.rec-apc1-row--due .rec-apc1-row__w, .rec-apc1-row--bad .rec-apc1-row__w { font-weight: 600; }
.rec-apc1-row__when { font-family: var(--ub-font-mono); font-size: 0.72rem; color: var(--hs-ink-faint); }
.rec-apc1-row__act { margin: 0; flex: none; }
.rec-apc1__tile--sm { width: 2.6rem; height: 2.6rem; border-radius: 9px; }
.rec-apc1__tile--sm b { font-size: 1.05rem; }
.rec-apc1__tile--sm span { margin-top: -0.4rem; font-size: 0.58rem; }
.rec-apf__list { margin: 0.1rem 0 0; padding: 0; list-style: none; }
.rec-apf + .rec-apf { border-top: 1px solid var(--hs-line); }
.rec-apf__s { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto 1rem; gap: 0 0.85rem; align-items: center; padding: 0.55rem 0.5rem; margin: 0 -0.5rem; border-radius: 10px; list-style: none; cursor: pointer; transition: background 120ms; }
.rec-apf__s::-webkit-details-marker { display: none; }
.rec-apf__s:hover { background: var(--hs-hover); }
.rec-apf__s:focus-visible { outline: 2px solid var(--pp-mid); outline-offset: 1px; }
.rec-apf__id { min-width: 0; display: flex; align-items: baseline; gap: 0.6rem; }
.rec-apf__t { font-size: 0.9rem; font-weight: 650; color: var(--hs-ink); white-space: nowrap; }
.rec-apf__m { font-size: 0.8rem; color: var(--hs-ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-apf__chev svg { width: 15px; height: 15px; color: var(--hs-ink-faint); transition: rotate 160ms; }
.rec-apf__d[open] .rec-apf__chev svg { rotate: 180deg; }
.rec-apf-ind { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; white-space: nowrap; }
.rec-apf-dots { display: inline-flex; gap: 3px; }
.rec-apf-dot { width: 0.5rem; height: 0.5rem; border-radius: 999px; border: 1.5px solid var(--hs-line-strong); box-sizing: border-box; }
.rec-apf-dot--ok { border-color: transparent; background: #2f8a55; }
.rec-apf-dot--due { border-color: transparent; background: #c9971c; }
.rec-apf-dot--bad { border-color: transparent; background: var(--ub-danger); }
.rec-apf-ind--ok { color: #256e43; font-weight: 600; }
.rec-apf-ind--due { color: #7a5a00; font-weight: 600; }
.rec-apf-ind--wait { color: var(--hs-ink-soft); }
.rec-apf-hint--due { color: #7a5a00; font-weight: 600; }
.rec-apf__body { padding: 0.1rem 0 0.75rem 3.45rem; }
.rec-apf__rows { margin: 0; }
.rec-apf__acts { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.6rem; }
@media (prefers-reduced-motion: reduce) {
  .rec-apf__chev svg, .rec-apf__s { transition: none; }
}
.rec-apx { interpolate-size: allow-keywords; }
.rec-apf__d::details-content { block-size: 0; overflow-y: clip; transition: block-size 200ms cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 200ms allow-discrete, overflow-y 0s allow-discrete; }
.rec-apf__d[open]::details-content { block-size: auto; overflow-y: visible; transition-delay: 0s, 0s, 200ms; }
.rec-apf__d[open] > .rec-apf__s { background: var(--hs-hover); }
@keyframes rec-apx-pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.rec-apx .rec-ivmanage[open] > .rec-ivmanage__menu { animation: rec-apx-pop 140ms cubic-bezier(0.2, 0.7, 0.2, 1) both; transform-origin: top right; }
@keyframes rec-apx-here { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ub-accent) 40%, transparent); } 100% { box-shadow: 0 0 0 6px transparent; } }
.rec-ov--enter .rec-apx-st--now .rec-apx-st__dot { animation: rec-apx-here 900ms ease-out 450ms 1; }
.rec-apu-s__i, .rec-apf-dot { transition: background-color 200ms, border-color 200ms; }
.rec-apf__m, .rec-apc1-row__when, .rec-apc1__tile, .rec-apx-status .rec-ov__taskn b, .rec-ap-fr .rec-ap-faint { font-variant-numeric: tabular-nums; }
.rec-apx-herofacts .rec-apx-link, .rec-color a.rec-apx-link { text-underline-offset: 2px; }
.rec-apx-with__p:focus-within { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-apx-with__p input { accent-color: var(--pp-mid); }
.rec-ap-fr__a { transition: background 120ms; }
.rec-review__panel .rec-ovx3-q + .rec-ovx3-q { padding-top: 0.2rem; }
.rec-ovx3-a .rec-ovx-prose { max-width: 70ch; }
@media (prefers-reduced-motion: reduce) {
  .rec-apf__d::details-content { transition: none; }
  .rec-apx .rec-ivmanage[open] > .rec-ivmanage__menu, .rec-ov--enter .rec-apx-st--now .rec-apx-st__dot { animation: none; }
  .rec-apu-s__i, .rec-apf-dot, .rec-ap-fr__a { transition: none; }
}
.rec-apx-hero .rec-apx-status { flex: 0 1 auto; min-width: 0; }
.rec-apx-status .rec-ov__taskn span { white-space: normal; max-width: 9.5rem; }
.rec-ovx3-q > .rec-ovx-qt { position: sticky; top: -1.1rem; z-index: 1; margin: 0 -0.25rem; padding: 0.55rem 0.25rem 0.45rem; background: #fff; }
.rec-apx-hist .rec-filters { flex-wrap: nowrap; }
.rec-apx-hist .rec-filters .rec-filters__search { flex: 1 1 auto; min-width: 0; }
.rec-apn .rec-ap-cardhead { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.rec-apn-add { display: inline-flex; align-items: center; gap: 0.3rem; font-weight: 600; }
.rec-apn-plus { flex: none; transform: translateY(1px); }
.rec-apn--on .rec-apn-add { visibility: hidden; }
.rec-apn-new { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 180ms cubic-bezier(0.2, 0.7, 0.2, 1); }
.rec-apn--on .rec-apn-new { grid-template-rows: 1fr; }
.rec-apn-form { min-height: 0; overflow: hidden; opacity: 0; transition: opacity 140ms ease-out; }
.rec-apn--on .rec-apn-form { opacity: 1; padding: 0.15rem 0.1rem 0.75rem; }
.rec-apn-form .rec-textarea { display: block; width: 100%; min-height: 4.5rem; resize: vertical; }
.rec-apn-foot { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.rec-apn-foot .rec-ap-faint { font-size: 0.78rem; }
.rec-apn-empty { margin: 0.2rem 0 0.1rem; font-size: 0.875rem; }
@media (prefers-reduced-motion: reduce) {
  .rec-apn-new, .rec-apn-form { transition: none; }
}
.rec-apn-foot .rec-textbtn, .rec-apn-foot .button { flex: none; white-space: nowrap; }
.rec-apn-foot .rec-ap-faint { min-width: 0; }
.rec-apn:not(.rec-apn--on) .rec-ap-note:first-child { border-top: 0; }
.rec-apx-owedline__go { font-weight: 600; white-space: nowrap; }
.rec-apx-more form { margin: 0; }
.rec-apx-more button.rec-ivmanage__item { width: 100%; border: 0; background: none; font: inherit; font-size: 0.84rem; font-weight: 500; text-align: left; cursor: pointer; }
.rec-apx-more button.rec-ivmanage__item:focus-visible { background: var(--pp-tint, var(--hs-hover)); }
.rec-apo1-sub { display: flex; align-items: center; gap: 0.6rem; margin: 0.55rem 0 0.3rem; font-size: 0.8rem; font-weight: 600; color: var(--hs-ink); }
.rec-apo1-sub .rec-apf-hint--due, .rec-apo1-sub .rec-ap-faint { font-size: 0.75rem; font-weight: 500; }
.rec-apo-b .rec-apo-b__iv { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0 0.85rem; align-items: start; }
.rec-apo-b .rec-apo-b__iv + .rec-apo-b__iv { border-top: 1px solid var(--hs-line); }
.rec-apo-b__past { border-color: transparent; background: color-mix(in srgb, var(--ub-primary) 12%, #fff); }
.rec-apo-b__past b { color: var(--ub-primary); }
.rec-apo-b__past span { color: color-mix(in srgb, var(--ub-primary) 82%, #fff); }
.rec-apo-b__main { min-width: 0; }
.rec-apo-b__main .rec-ap-ix__head { min-height: 2.6rem; }
.rec-apx-dlg__help { font-size: 0.78rem; color: var(--ub-ink-soft); line-height: 1.45; }
.rec-apx-dlg__job > span { display: flex; flex-direction: column; gap: 0.05rem; }
.rec-apx-dlg__job b { font-weight: 600; }
.rec-apx-dlg__job .rec-ap-faint { font-size: 0.78rem; }
.rec-apx-dlg__check { display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; font-size: 0.88rem; }
.rec-apx-dlg__check .rec-ap-faint { font-size: 0.78rem; }
.rec-apx-dlg .rc-modal__foot .button { white-space: nowrap; }
.rec-apo-div { position: relative; display: flex; align-items: center; margin: 1.15rem -20px 0.45rem; padding: 0 20px; font-size: 0.8rem; font-weight: 600; color: var(--ub-primary); }
.rec-apo-div::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1.5px solid color-mix(in srgb, var(--ub-primary) 45%, transparent); }
.rec-apo-div > span { position: relative; z-index: 1; background: #fff; }
.rec-apo-div--k { justify-content: center; color: var(--hs-ink); }
.rec-apo-div--k::before { border-top: 1px solid var(--hs-line-strong); }
.rec-apo-div--k > span { padding: 0.12rem 0.85rem; border: 1px solid var(--hs-line-strong); border-radius: 999px; }
.rec-apx-joint { padding: 1.1rem 1.25rem; }
.rec-apx-joint > .rec-ovx3-body { margin-top: 0; padding-top: 0; border-top: 0; }
.rec-apx-joint .rec-ovx4-q:first-child { padding-top: 0; }
.rec-apx-joint__foot { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--hs-line); }
.rec-apx-joint__foot .rec-form__help { flex: 1 1 auto; margin: 0; }
.rec-apx-joint__foot form { margin: 0; flex: none; }
.rec-apx-openapp { font-weight: 600; white-space: nowrap; margin-left: auto; margin-right: 0.75rem; }
.rec-apx-owner { display: inline-block; position: relative; }
.rec-apx-owner > summary { list-style: none; cursor: pointer; }
.rec-apx-owner > summary::-webkit-details-marker { display: none; }
.rec-apx-owner .rec-ivmanage__menu { left: 0; right: auto; width: 20rem; }
.rec-apx-histsum { margin: 0.6rem 0 0; font-size: 0.8rem; }
.rec-apx-histnote { margin: 0; }
.rec-apx-closednote { margin: 0.55rem 0 0; font-size: 0.8rem; color: var(--hs-ink-faint); }

/* Canvas V — REVISION-04 §2.18 and §§4.102–4.118, 2026-10-05: Interviews, one
   screen with two doors (13 and the job's 35). Extracted from the approved mock
   (prototypes/interviews-look/ at f6eae185, C with top 2b); class names are the design's own.
   Everything else is installed: rec-ov panels and heads, rec-seg, rec-jobtabs,
   09's date tile, setup indicator and marks, the stage chip. */
.rec-ivx { display: grid; gap: 1rem; padding: 1.25rem 1.25rem 2rem; }
.rec-ivx > * { min-width: 0; margin: 0; }
.rec-ivx--job { padding: 1rem 0 2rem; }
.rec-ivx-bar { display: flex; align-items: center; gap: 0.75rem; }
.rec-ivx-count { font-size: 0.8rem; }

/* Whose candidates: rec-seg on white, a line icon before each option. */
.rec-ivx-seg2 { padding: 4px; border: 1px solid var(--hs-line); background: #fff; }
.rec-ivx-seg2 .rec-seg__opt { gap: 0.5rem; padding: 0.4rem 0.8rem 0.4rem 0.45rem; font-size: 0.82rem; }
.rec-workspace .rec-ivx-seg2 a[aria-current="true"] { background: var(--hs-hover); box-shadow: none; }
.rec-ivx-ic { width: 1.45rem; height: 1.15rem; color: var(--ub-primary); }

/* Links that are a whole row's text. One class above `.rec-color a:not(.button)`,
   which recruiting-color.css loads later and would otherwise paint them purple. */
.rec-color .rec-ivx a.rec-ivx-main { display: grid; gap: 0.1rem; min-width: 0; color: inherit; text-decoration: none; }
.rec-color .rec-ivx a.rec-ivx-main:hover b { text-decoration: underline; text-decoration-color: var(--hs-gold); text-underline-offset: 0.18em; }
.rec-ivx-who { display: flex; align-items: center; gap: 0.5rem; min-width: 0; font-size: 0.875rem; color: var(--hs-ink); }
.rec-ivx-who b { font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-ivx-sub { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; color: var(--hs-ink-faint); }
.rec-ivx-time { font-family: var(--ub-font-mono); font-size: 0.75rem; color: var(--hs-ink-soft); }
.rec-color .rec-ivx a.rec-ivx-setup { justify-self: end; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.45rem 0.2rem 0.6rem; border: 1px solid var(--hs-line); border-radius: 7px; background: #fff; text-decoration: none; transition: border-color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rec-color .rec-ivx a.rec-ivx-setup:hover { border-color: #cfc6e6; background: #faf9fd; }
.rec-ivx-chev { flex: none; width: 0.85rem; height: 0.85rem; color: var(--hs-ink-faint); }
.rec-color .rec-ivx a.rec-ivx-setup:hover .rec-ivx-chev { color: #49338d; }
.rec-ivx-empty { margin: 0.4rem 0 0.2rem; font-size: 0.85rem; color: var(--hs-ink-faint); }

/* Nothing arranged: two columns of candidates, each with Schedule. */
.rec-ivx-nas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; margin: 0; padding: 0; list-style: none; }
.rec-ivx-na { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; margin-inline: -0.65rem; padding: 0.55rem 0.65rem; border-top: 1px solid var(--hs-line); }

/* One panel, Coming up and Held as its tabs; Held's owed count is red (§4.102). */
.rec-ivx-tabbed .rec-ivx-tabs { margin: -0.25rem 0 0.6rem; }
.rec-ivx-tabowed { color: var(--ub-danger); font-weight: 600; }

/* Coming up: a tile per day, its interviews beside it. */
.rec-ivx-days { margin: 0; padding: 0; list-style: none; }
.rec-ivx-day + .rec-ivx-day { margin-top: 1.1rem; }
.rec-ivx-dayname { display: flex; align-items: baseline; gap: 0.5rem; margin: 0 0 0.35rem; padding: 0 0 0.4rem; border-bottom: 1px solid var(--hs-line); font-size: inherit; font-weight: inherit; }
.rec-ivx-dayname b { font-family: var(--ub-font-display); font-size: 1.02rem; font-weight: 700; color: var(--hs-ink); }
.rec-ivx-dayname time { font-size: 0.8rem; color: var(--hs-ink-faint); }
.rec-ivx-rows { margin: 0; padding: 0; list-style: none; }
.rec-ivx-row { display: grid; grid-template-columns: 3.4rem minmax(0, 17rem) minmax(0, 13rem) minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-inline: -0.65rem; padding: 0.55rem 0.65rem; border-radius: 9px; transition: background-color 0.15s cubic-bezier(0.2, 0.8, 0.2, 1); }
.rec-ivx-row:hover { background: #faf9fd; }
.rec-ivx-row.rec-open-row, .rec-ivx-held.rec-open-row, .rec-ivx-na.rec-open-row { border-radius: 9px; background: color-mix(in srgb, var(--hs-gold) 8%, #fff); box-shadow: 0 0 0 1px color-mix(in srgb, var(--hs-gold) 30%, transparent); }

/* Held: one dense line per interview. */
.rec-ivx-heldbar { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.4rem; }
.rec-ivx-searchform { display: contents; }
.rec-ivx-search { flex: 0 1 16rem; min-width: 10rem; }
.rec-ivx-helds { margin: 0; padding: 0; list-style: none; }
.rec-ivx-held { display: grid; grid-template-columns: 3.4rem minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, 1.35fr) 8rem; gap: 0.85rem; align-items: center; min-height: 2.6rem; margin-inline: -0.65rem; padding: 0.2rem 0.65rem; }
.rec-ivx-held + .rec-ivx-held { border-top: 1px solid var(--hs-line); }
.rec-ivx-fb { display: flex; align-items: center; gap: 0.6rem; min-width: 0; font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rec-ivx-act { justify-self: end; white-space: nowrap; }
.rec-ivx-foot { display: flex; align-items: center; gap: 0.75rem; justify-content: space-between; margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px solid var(--hs-line); font-size: 0.8rem; }

/* ==========================================================================
   Canvas W — 2026-10-06: screen 30, Job requirements, read and inline edit
   (30, 30b–30f). Supplied as recruiting-requirements.css and appended after
   canvas V; no other canvas is touched. Every selector sits under .rec-jreq,
   so nothing here reaches another job screen.

   Reuses, unchanged: .rec-ov__panel / .rec-ov__head / .rec-ov__title and
   .rec-jov__head (03's card + hairline), .rec-dl (label/value grid),
   .rec-form__label, .rec-textarea, .button, .rec-partial (refusal),
   .rec-state (empty), .rec-grid--main-side (stacks at 1100).

   PORT NOTE: the narrow rule is @media (max-width: 760px) here, because in
   Django the viewport is the frame. The artboards' copy states it as
   @container so each artboard answers to its own frame.
   No Recurse: titles use var(--ub-font-display) through existing classes and
   this file names no font family other than var(--ub-font-mono).
   ========================================================================== */

.rec-jreq { display: flex; flex-direction: column; gap: 1.25rem; padding-bottom: 2.5rem; }
.rec-jreq .rec-jreq__intro { align-items: center; margin: 0; }
.rec-jreq .rec-jreq__intro .rec-page__lede { margin: 0; }
.rec-jreq .rec-jreq__grid { align-items: start; }
.rec-jreq .rec-jreq__col { display: grid; gap: 1.25rem; align-content: start; min-width: 0; }
.rec-jreq .rec-ov__panel { min-width: 0; }

/* Read: the sections are one label/value grid per card — 03's .rec-dl at
   reading size, with a hairline between entries because each value is prose. */
.rec-jreq .rec-jreq__secs { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); margin: 0; }
.rec-jreq .rec-jreq__secs > dt,
.rec-jreq .rec-jreq__secs > dd { padding: 0.8rem 0; border-top: 1px solid var(--hs-line); }
.rec-jreq .rec-jreq__secs > dt:first-of-type,
.rec-jreq .rec-jreq__secs > dd:first-of-type { border-top: 0; padding-top: 0.2rem; }
.rec-jreq .rec-jreq__secs > dt {
  padding-right: 1rem; padding-top: calc(0.8rem + 0.3rem);
  font-family: var(--ub-font-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--hs-ink-faint);
}
.rec-jreq .rec-jreq__secs > dt:first-of-type { padding-top: 0.5rem; }
.rec-jreq .rec-jreq__secs > dd {
  margin: 0; min-width: 0; font-size: 0.9rem; line-height: 1.65; color: var(--hs-ink);
  white-space: pre-line; overflow-wrap: anywhere; text-wrap: pretty;
}

/* Saved: a quiet line beside the Edit control, announced, never a modal. */
.rec-jreq .rec-jreq__status {
  display: inline-flex; align-items: center; gap: 0.35rem; margin: 0;
  font-size: 0.8rem; color: #256e43; white-space: nowrap;
}

/* Edit: the same grid, a textarea in each value cell. */
.rec-jreq .rec-jreq__help { margin: 0; font-size: 0.8rem; color: var(--hs-ink-soft); }
.rec-jreq .rec-jreq__fields { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); }
.rec-jreq .rec-jreq__field { display: contents; }
.rec-jreq .rec-jreq__k,
.rec-jreq .rec-jreq__v { border-top: 1px solid var(--hs-line); }
.rec-jreq .rec-jreq__field:first-child .rec-jreq__k,
.rec-jreq .rec-jreq__field:first-child .rec-jreq__v { border-top: 0; }
.rec-jreq .rec-jreq__k {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem;
  padding: 1.2rem 1rem 0.7rem 0;
}
.rec-jreq .rec-jreq__field:first-child .rec-jreq__k { padding-top: 0.6rem; }
.rec-jreq .rec-jreq__v { padding: 0.7rem 0; min-width: 0; }
.rec-jreq .rec-jreq__field:first-child .rec-jreq__v { padding-top: 0.1rem; }
.rec-jreq .rec-jreq__ta {
  display: block; min-height: 5.25rem; max-height: 28rem; field-sizing: content;
  font-size: 0.9rem; line-height: 1.65;
}
.rec-jreq .rec-jreq__ta:focus-visible { border-color: var(--pp-mid); outline-offset: 1px; }
.rec-jreq .rec-jreq__field[data-dirty] .rec-jreq__ta { border-color: var(--hs-gold); }
.rec-jreq .rec-jreq__unsaved {
  display: none; align-items: center; padding: 0.05rem 0.35rem; border-radius: 4px;
  border: 1px solid var(--hs-gold-border); background: var(--hs-active);
  font-family: var(--ub-font-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--rec-age-ink);
}
.rec-jreq .rec-jreq__field[data-dirty] .rec-jreq__unsaved { display: inline-flex; }

/* The form's foot stays in view while a long section is typed into. */
.rec-jreq .rec-jreq__bar {
  position: sticky; bottom: 0; z-index: 2;
  display: flex; align-items: center; gap: 0.6rem 0.75rem; flex-wrap: wrap;
  margin: 0.4rem -1.25rem -1.2rem; padding: 0.75rem 1.25rem;
  border-top: 1px solid var(--hs-line); background: #fff; border-radius: 0 0 14px 14px;
}
.rec-jreq .rec-jreq__barnote { flex: 1 1 14rem; margin: 0; font-size: 0.82rem; color: var(--hs-ink-soft); }
.rec-jreq .rec-jreq__barnote b { font-weight: 600; color: var(--rec-age-ink); }
.rec-jreq .rec-jreq__keys { font-size: 0.75rem; color: var(--hs-ink-faint); white-space: nowrap; }
.rec-jreq kbd {
  display: inline-block; padding: 0 0.3rem; border: 1px solid var(--hs-line-strong); border-radius: 4px;
  background: #fbfaf8; font-family: var(--ub-font-mono); font-size: 0.66rem; line-height: 1.5; color: var(--hs-ink-soft);
}
.rec-jreq .rec-jreq__acts { display: flex; align-items: center; gap: 0.5rem; flex: none; }

/* Saving: the fields are read-only until the response lands. */
.rec-jreq .rec-jreq__form[aria-busy="true"] .rec-jreq__ta { background: #fbfaf8; color: var(--hs-ink-soft); }

/* Refused: .rec-partial unchanged; this only seats it in the card. */
.rec-jreq .rec-jreq__form .rec-partial { margin: 0 0 0.9rem; }
.rec-jreq .rec-jreq__form .rec-partial:focus { outline: 2px solid var(--pp-mid); outline-offset: 2px; }
.rec-jreq .rec-jreq__form .rec-partial__body:last-child { margin-bottom: 0; }

/* Read-only viewer: says why there is no Edit, in the slot Edit uses. */
.rec-jreq .rec-jreq__ro { margin: 0; font-size: 0.8rem; color: var(--hs-ink-soft); white-space: nowrap; }

@media (max-width: 760px) {
  .rec-jreq .rec-jreq__intro { flex-direction: column; align-items: flex-start; }
  .rec-jreq .rec-jreq__secs, .rec-jreq .rec-jreq__fields { grid-template-columns: minmax(0, 1fr); }
  .rec-jreq .rec-jreq__secs > dd { border-top: 0; padding-top: 0.2rem; }
  .rec-jreq .rec-jreq__secs > dt:not(:first-of-type) { padding-top: 0.9rem; }
  .rec-jreq .rec-jreq__v { border-top: 0; padding-top: 0.1rem; }
  .rec-jreq .rec-jreq__k { flex-direction: row; align-items: center; padding-top: 0.9rem; padding-bottom: 0.4rem; }
}

/* ==========================================================================
   Canvas X — 2026-10-07: Talent pools, REVISION-04 §2.19 and §4.136–§4.146.
   Screen 11 as one lane per pool, screen 12 as one head card over a table
   newest added first, the medals, and the tick column 12 and 07p share.
   Appended after canvas W; no other canvas is touched.

   Reuses, unchanged: .rec-ov__panel / .rec-ov__bcard / .rec-ov__title /
   .rec-ov__bench-n / .rec-ov__stage (the Overview's card, title, label and
   stage chip), 02's .rec-jobs__tile / .rec-jobs__link / .rec-jobs__count
   (the lifting card and its stretched link), .rec-jobs__toolbar,
   .rec-cands__toolbar / .rec-cands__ledger, .rec-seg, .rec-tag(s), .rc-modal.

   Link colours sit at `.rec-workspace .rec-ov a.…`, one class above
   `.rec-color a:not(.button)`, which loads later and would paint them purple
   (canvas J's note). Medal colours are this canvas's own (§4.142): the brand
   palette carries gold and no silver or bronze.
   ========================================================================== */

/* -- 11: one lane per pool ------------------------------------------------- */
.rec-pools__lanes { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.rec-pools__lane {
  display: grid; align-items: center; gap: 0 1.6rem; padding: 1.1rem 1.4rem 1.2rem;
  grid-template-columns: minmax(0, 1.9fr) minmax(5rem, 0.5fr) minmax(19rem, 1.3fr) minmax(0, 1.3fr);
}
.rec-pools__lane .rec-jobs__title { font-size: 1.2rem; }
.rec-pools__id { min-width: 0; }
.rec-pools__why {
  margin: 0.15rem 0 0; font-size: 0.86rem; line-height: 1.5; color: var(--hs-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rec-pools__slot {
  display: flex; flex-direction: column; gap: 0.25rem; min-width: 0;
  padding-left: 1.1rem; border-left: 1px solid var(--hs-line);
}
.rec-pools__slot > .rec-ov__bench-n { white-space: nowrap; }
.rec-pools__slot .rec-jobs__count { font-size: 1.7rem; }
.rec-pools__archived { margin-top: 1.25rem; }
.rec-pools__archived > summary { cursor: pointer; font-size: 0.85rem; font-weight: 600; color: var(--hs-ink-soft); }
.rec-pools__archived > ul { display: grid; gap: 0.4rem; margin: 0.6rem 0 0; padding: 0; list-style: none; }
.rec-pools__archived li {
  display: flex; align-items: baseline; gap: 0.8rem; padding: 0.55rem 0.9rem;
  border: 1px solid var(--hs-line); border-radius: 10px; background: #fff; font-size: 0.85rem;
}
.rec-pools__archived li > :last-child { margin-left: auto; color: var(--hs-ink-faint); white-space: nowrap; }

/* -- Top tags, on 11 and 12: the tag and how many members hold it ---------- */
.rec-pools__tags { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; }
.rec-pools__tags .rec-tag b { margin-left: 0.3em; font-weight: 600; font-variant-numeric: tabular-nums; opacity: 0.75; }

/* -- Added per month, on 11 and 12: six labelled columns, not a sparkline -- */
.rec-months { display: flex; align-items: flex-end; gap: 0.55rem; height: 4.2rem; margin-top: 0.15rem; }
.rec-months__col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 0.2rem; width: 1.9rem; }
.rec-months__n { font: 600 0.7rem/1 var(--ub-font-mono); color: var(--hs-ink-soft); font-variant-numeric: tabular-nums; }
.rec-months__bar { display: block; width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: #e7e6ec; }
.rec-months__col--now .rec-months__bar { background: #524d5f; }
.rec-months__m { font: 0.66rem/1 var(--ub-font-mono); color: var(--hs-ink-faint); }

/* -- 12: the head card ------------------------------------------------------ */
.rec-pool__head { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.4rem 1.6rem 1.35rem; }
.rec-pool__row { display: flex; align-items: flex-start; gap: 1.5rem; }
.rec-pool__id { display: grid; flex: 1; gap: 0.35rem; min-width: 0; }
.rec-pool__title { margin: 0; font-size: 1.8rem; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.rec-pool__why { margin: 0; max-width: 64ch; font-size: 0.95rem; line-height: 1.5; color: var(--hs-ink-soft); text-wrap: pretty; }
.rec-pool__acts { display: flex; flex: none; gap: 0.5rem; padding-top: 0.2rem; }
.rec-pool__figs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 1.4rem; margin: 0; font-size: 0.88rem; color: var(--hs-ink-soft); }
.rec-pool__figs > span + span { padding-left: 1.4rem; border-left: 1px solid var(--hs-line); }
.rec-pool__figs > span > b {
  margin-right: 0.15rem; font-family: var(--ub-font-display); font-size: 1.2rem; font-weight: 600;
  color: var(--hs-ink); font-variant-numeric: tabular-nums;
}
.rec-pool__figs .rec-pools__tags { display: inline-flex; }
.rec-pool__figs .rec-ov__bench-n { margin-right: 0.25rem; }
/* The gold hairline closes the head, as it closes a job tile's (canvas J). */
.rec-pool__cols {
  display: grid; padding-top: 1.05rem; border-top: 1px solid color-mix(in srgb, var(--hs-gold) 45%, transparent);
  grid-template-columns: minmax(18.5rem, 1.25fr) minmax(12rem, 0.85fr) minmax(0, 1.1fr) minmax(15.5rem, 1fr);
}
.rec-pool__col { display: flex; flex-direction: column; gap: 0.55rem; min-width: 0; padding: 0 1.4rem; border-left: 1px solid var(--hs-line); }
.rec-pool__col:first-child { padding-left: 0; border-left: 0; }
.rec-pool__col:last-child { padding-right: 0; }
.rec-pool__col > .rec-ov__bench-n { white-space: nowrap; }
.rec-pool__col:last-child > .rec-ov__bench-n { white-space: normal; text-wrap: balance; }
.rec-pool__list { display: grid; gap: 0.15rem; margin: 0; padding: 0; list-style: none; }
/* One row height in all three lists, so they line up across the columns. */
.rec-pool__item { display: grid; grid-template-columns: minmax(0, 1fr) 1.8rem; align-items: center; gap: 0.6rem; min-height: 1.75rem; font-size: 0.86rem; color: var(--hs-ink); }
.rec-pool__item > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-pool__item > b { justify-self: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.rec-pool__item--medal { grid-template-columns: 5.2rem auto minmax(3rem, 1fr) 1.8rem; }
.rec-pool__item--medal > .rec-medal { justify-self: start; }
.rec-pool__cap { font-size: 0.78rem; color: var(--hs-ink-faint); white-space: nowrap; }
.rec-pool__bar { height: 6px; border-radius: 3px; background: #f3f2f6; overflow: hidden; }
.rec-pool__bar > span { display: block; height: 100%; border-radius: 3px; }
.rec-pool__earlier { font-size: 0.8rem; color: var(--hs-ink-faint); }

/* -- Medals (§4.141, §4.142). The chip carries the stage's own name; the
   metal is the rank. Text 6.6:1 or more; the dots are decoration. -------- */
.rec-ov__stage.rec-medal { display: inline-flex; align-items: center; gap: 0.35rem; }
.rec-medal__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.rec-ov__stage.rec-medal--gold { background: #f3ecd0; color: #5f5120; }
.rec-ov__stage.rec-medal--silver { background: #eceef1; color: #3e4550; }
.rec-ov__stage.rec-medal--bronze { background: #f3e6da; color: #6e4322; }
.rec-medal--gold .rec-medal__dot, .rec-medal__dot.rec-medal--gold, .rec-pool__bar--gold > span { background: #b59a3c; }
.rec-medal--silver .rec-medal__dot, .rec-medal__dot.rec-medal--silver, .rec-pool__bar--silver > span { background: #a9b0ba; }
.rec-medal--bronze .rec-medal__dot, .rec-medal__dot.rec-medal--bronze, .rec-pool__bar--bronze > span { background: #b97a4a; }
.rec-medal--gold .rec-medal__dot, .rec-medal__dot.rec-medal--gold { box-shadow: inset 0 0 0 1px #847332; }
.rec-medal--silver .rec-medal__dot, .rec-medal__dot.rec-medal--silver { box-shadow: inset 0 0 0 1px #737b86; }
.rec-medal--bronze .rec-medal__dot, .rec-medal__dot.rec-medal--bronze { box-shadow: inset 0 0 0 1px #8c5a35; }
.rec-seg__opt > .rec-medal__dot { display: inline-block; margin-right: 0.35rem; }

/* -- 12's table, newest added first ---------------------------------------- */
.rec-pool__table { table-layout: fixed; width: 100%; }
.rec-pool__table th, .rec-pool__table td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rec-pool__table td { padding-top: 0.7rem; padding-bottom: 0.7rem; }
.rec-pool__table tbody tr:hover td { background: #fbfaff; }
.rec-pool__got { display: flex; align-items: center; gap: 0.55rem; min-width: 0; }
.rec-pool__got > .rec-ov__stage, .rec-pool__got > .rec-pool__plain, .rec-pool__got > .rec-pool__now { flex: none; }
.rec-pool__got > .rec-expand { flex: none; }
.rec-pool__got:has(> .rec-expand[open]) { flex-wrap: wrap; row-gap: 0.25rem; }
.rec-pool__got > .rec-expand[open] { display: contents; }
.rec-pool__got > .rec-expand[open] > summary { flex: none; }
.rec-pool__got > .rec-expand[open] > .rec-expand__lines { flex: 0 0 100%; min-width: 0; }
/* The job keeps its name longest: the outcome date gives up its width first. */
.rec-pool__job { flex: 0 1 auto; min-width: 2.5rem; overflow: hidden; text-overflow: ellipsis; color: var(--hs-ink); }
.rec-pool__end { flex: 0 4 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 0.84rem; color: var(--hs-ink-faint); }
.rec-pool__plain { font-size: 0.84rem; color: var(--hs-ink-soft); }
.rec-pool__plain::after { content: " ·"; color: var(--hs-ink-faint); }
.rec-pool__none { color: var(--hs-ink-faint); }
.rec-pool__now { display: inline-flex; align-items: center; gap: 0.3rem; font: 600 0.7rem/1 var(--ub-font-mono); color: #256e43; }
.rec-pool__now::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ub-ok); }
.rec-workspace .rec-ov a.rec-pool__fb { font-size: 0.86rem; color: var(--hs-ink-soft); text-decoration: none; }
.rec-workspace .rec-ov a.rec-pool__fb:hover { color: var(--pp-mid); text-decoration: underline; text-underline-offset: 0.18em; }
.rec-pool__added { font-size: 0.86rem; color: var(--hs-ink-soft); }
.rec-pool__added > span { color: var(--hs-ink-faint); }
.rec-pool__added > span { display: inline-block; max-width: calc(100% - 3.4rem); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.rec-pool__bulk {
  position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 1rem;
  border-bottom: 1px solid var(--pp-line); border-radius: 12px 12px 0 0; background: var(--pp-tint); font-size: 0.85rem;
}
.rec-pool__bulk > b { font-variant-numeric: tabular-nums; }
.rec-pool__bulk > :last-child { color: var(--hs-ink-faint); }

/* -- The tick column, on 12 and 07p --------------------------------------- */
.rec-tick { width: 2.6rem; padding-right: 0; text-overflow: clip; }
.rec-tick input { width: 16px; height: 16px; margin: 0; accent-color: var(--pp-mid); }
tr.rec-tick--on > td { background: color-mix(in srgb, #6a63b8 7%, #fff); }

/* -- Candidates' filter row takes a seventh select, Job (§4.144). Canvas K's
   8rem basis wrapped *Apply* to a third line at 1280 (seven 120px selects,
   their gaps and Apply measured 957px in 956); the selects still grow
   to fill the row, so a wider screen draws them as before. ---------------- */
.rec-cands__toolbar .rec-cands__select { flex-basis: 7.25rem; }
.rec-pool__count { display: block; margin-top: 0.15rem; font: 0.75rem/1.4 var(--ub-font-mono); color: var(--hs-ink-soft); }

/* -- The pool dialog -------------------------------------------------------- */
/* The textarea takes the dialog inputs' own border (app.css `.rc-field input`),
   which styles no textarea. */
.rec-pooldlg textarea {
  width: 100%; min-height: 6.5rem; resize: vertical; font: inherit; padding: 0.45rem 0.55rem;
  border: 1px solid var(--ub-border-strong); border-radius: 0.4rem; background: var(--ub-surface); color: var(--ub-ink);
}
.rec-pooldlg__link { font: 0.75rem/1.4 var(--ub-font-mono); color: var(--ub-ink-soft); }
.rec-pooldlg__help { font-size: 0.78rem; line-height: 1.45; color: var(--ub-ink-soft); }

/* ==========================================================================
   Canvas Y — 2026-10-07: Open jobs (28, 28b, 28e), the referral form (29, 29n,
   29s), Settings · Referral form (33h), and the referral's amendments to 03
   and 08. REVISION-04 §2.20, §4.147–§4.162. Lifted from the approved mocks'
   rf.css and appended after canvas W; no other canvas is touched. The
   rejected drawer (mock B) and the rules no design file draws were dropped.

   Reuses, unchanged: 16a's form layout (.rec-fa-page, .rec-fa__*) and answer
   markup, 08's hero (.rec-prof__hero), 02's tiles (.rec-jobs__tile), 18b's
   editor rows (.rec-ffg__q, .rec-ffe__*), .rec-state, and 09's rc-modal.

   No narrow rule, so the artboards' copy and this one are the same bytes.
   No Recurse: this file names no font family but the Slack preview's
   system stack, which draws Slack's own face on purpose.
   ========================================================================== */

.rf-wide { max-width: 64.5rem; display: grid; gap: 1.1rem; padding-bottom: 2.5rem; }
.rf-narrow { max-width: 40rem; display: grid; gap: 1.1rem; }
.rf-mark { display: grid; place-items: center; color: var(--pp-ink, #3b2a7a); }
.rf-mark svg { width: 22px; height: 22px; }
.rf-hero .rec-prof__hero__head { align-items: center; }
.rf-hero .rec-prof__hero__headline b, .rf-bonus b { color: var(--hs-ink); }

.rf-listhead { display: flex; align-items: baseline; gap: 0.75rem; margin: 0.4rem 0 -0.3rem; }
.rf-listhead .rec-ov__title { margin: 0; font-size: 1.15rem; }
.rf-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rf-tile { display: flex; flex-direction: column; gap: 0.7rem; }
.rf-tile__ex { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--hs-ink-soft); text-wrap: pretty; flex: 1; }
.rf-tile .rec-jobs__actions { margin-top: auto; }

.rf-private { display: flex; gap: 0.5rem; align-items: flex-start; margin: 0; font-size: 0.82rem; color: var(--hs-ink-soft); }
.rf-private svg { width: 15px; height: 15px; flex: none; margin-top: 0.15rem; color: var(--hs-ink-faint); }

.rf-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.1rem; padding-top: 0.9rem; }
.rf-who .rec-form__field { margin: 0; }
.rf-opt { text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--hs-ink-faint); }

.rf-jobs { display: grid; gap: 0.45rem; padding-top: 0.9rem; }
.rf-job { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; padding: 0.65rem 0.85rem; border: 1px solid var(--hs-line); border-radius: 10px; cursor: pointer; background: #fff; transition: border-color 120ms ease-out, background 120ms ease-out; }
.rf-job:hover { border-color: color-mix(in srgb, var(--pp-mid, #6b4fd1) 45%, var(--hs-line)); }
.rf-job:has(input:checked) { border-color: var(--pp-mid, #6b4fd1); background: #f7f5fc; }
.rf-job input { margin: 0; accent-color: var(--pp-mid, #6b4fd1); }
.rf-job__main { display: grid; gap: 0.1rem; min-width: 0; }
.rf-job__main b { font-weight: 600; font-size: 0.92rem; color: var(--hs-ink); }
.rf-job__main span { font-size: 0.8rem; color: var(--hs-ink-soft); }
.rf-job--none { border-style: dashed; }

.rec-fa__opts.rf-pills { display: flex; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; }
.rf-pills .rec-fa__opt { border: 1px solid var(--hs-line); border-radius: 999px; padding: 0.3rem 0.8rem; }
.rf-pills .rec-fa__opt:has(input:checked) { border-color: var(--pp-mid, #6b4fd1); }
.rf-other { gap: 0.5rem; }
.rf-other__in { width: 9rem; padding: 0.2rem 0.5rem; font-size: 0.85rem; min-height: 0; }
.rf-other:not(:has(input:checked)) .rf-other__in { display: none; }

.rf-send { padding: 1rem 1.25rem; }
.rf-change { margin-left: 0.5rem; font-size: 0.82rem; }
.rf-bonus, .rf-rail__p { margin: 0; font-size: 0.86rem; line-height: 1.5; color: var(--hs-ink-soft); }
.rf-bonus b, .rf-hero .rec-prof__hero__headline b { font-weight: 600; }
.rf-ad { padding-top: 0.6rem; font-size: 0.92rem; line-height: 1.65; color: var(--hs-ink-soft); text-wrap: pretty; }
.rf-ad p { margin: 0 0 0.8rem; }

/* Recruiter side: Post to Slack on 03's Intake card (§4.155). */
.rf-rowacts { display: inline-flex; gap: 0.4rem; align-items: baseline; }
.rf-slackdlg { width: min(36rem, calc(100vw - 2rem)); }
.rf-slackdlg .rf-sl { margin-top: 0.4rem; }
.rf-sl { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 0.6rem; padding: 0.9rem; border: 1px solid var(--hs-line); border-radius: 10px; background: #fff; font-family: -apple-system, "Segoe UI", Lato, sans-serif; }
.rf-sl__av { width: 36px; height: 36px; border-radius: 8px; display: grid; place-items: center; background: #3b2a7a; color: #fff; font-size: 0.72rem; font-weight: 700; }
.rf-sl__msg { display: grid; gap: 0.3rem; min-width: 0; }
.rf-sl__msg p { margin: 0; font-size: 0.88rem; line-height: 1.45; color: #1d1c1d; }
.rf-sl__who { display: flex; align-items: baseline; gap: 0.35rem; }
.rf-sl__app { font-size: 0.6rem; font-weight: 700; padding: 0 0.25rem; border-radius: 3px; background: #e8e8e8; color: #616061; }
.rf-sl__time { font-size: 0.72rem; color: #616061; }
.rf-sl__btn { justify-self: start; margin-top: 0.25rem; padding: 0.3rem 0.8rem; border: 1px solid #c9c9c9; border-radius: 6px; font-size: 0.82rem; font-weight: 700; color: #1d1c1d; }
.rf-sl__msg .rf-sl__ctx { font-size: 0.74rem; color: #616061; }

/* Settings: the referral form editor (§4.148). */
.rf-intro { min-height: 3.2rem; }
.rf-fixed { list-style: none; margin: 0; padding: 0.85rem 0 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.rf-fixed li { padding: 0.3rem 0.7rem; border: 1px solid var(--hs-line); border-radius: 999px; font-size: 0.84rem; color: var(--hs-ink-soft); background: #faf9fd; }
.rf-flag { border: 1px dashed var(--hs-line); border-radius: 999px; padding: 0 0.45rem; }
.rf-blank { color: var(--hs-ink-faint); font-style: italic; border-bottom: 1px dashed var(--hs-line); }
.rf-last { margin-top: 0.3rem; font-weight: 600; color: var(--ub-warn-ink, #7a5a00); }

/* 08: From the referral (§4.162). */
.rf-answers { display: grid; gap: 0.85rem; margin: 0; padding-top: 0.85rem; }
.rf-ans { display: grid; gap: 0.15rem; }
.rf-ans dt { font-size: 0.78rem; color: var(--hs-ink-soft); }
.rf-ans dd { margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--hs-ink); text-wrap: pretty; }