/*
 * RealEngineers.ai base styles.
 *
 * Reset, typography, and the small set of foundational component classes
 * (cards, pills, buttons, status messages) described in docs/style-guide.md
 * Sections 5 (Layout and Components) and 9 (Accessibility and Consistency
 * Rules). Depends on tokens.css being loaded first -- nothing in here
 * hardcodes a color, font, or spacing value that has a token.
 */

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

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--re-font-sans);
  font-size: 16px; /* never go below 16px for body copy (Section 4) */
  line-height: 1.5;
  color: var(--re-color-text-primary);
  background-color: var(--re-surface-page);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--re-font-heading);
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 var(--re-space-3);
}

h1 {
  font-size: 2rem;
}
h2 {
  font-size: 1.5rem;
}
h3 {
  font-size: 1.125rem;
}

p {
  margin: 0 0 var(--re-space-4);
}

code,
pre,
kbd {
  font-family: var(--re-font-mono);
}

a {
  color: var(--re-color-link);
}

/* Keyboard accessibility (Section 8): focus must stay visible on every
   surface, light or dark, on every focusable element -- including form
   controls, not just links/buttons. Never rely on the browser default
   alone. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

.re-container {
  max-width: var(--re-breakpoint-desktop);
  margin: 0 auto;
  padding: var(--re-space-6) var(--re-space-5);
}

@media (max-width: 768px) {
  .re-container {
    padding: var(--re-space-4);
  }
}

.re-section {
  margin-top: var(--re-space-8);
}

.re-section > h2 {
  margin-bottom: var(--re-space-4);
}

/* Application shell (specs/007-app-shell): the title bar, left nav, main
   content, and reserved chat area every authenticated page shares via
   core/templates/core/base_authenticated.html. Breakpoints below are
   literal (CSS media features can't reference custom properties) but match
   --re-breakpoint-desktop (1200px) / --re-breakpoint-tablet (768px), the
   same values .re-container's own responsive rule already hardcodes. */
.re-shell {
  display: grid;
  /* The chat column is `auto`, not a fixed px value -- .re-shell__chat-space itself
     carries an explicit resizable width (see below), and an `auto` track sizes to
     whatever that resize interaction currently makes it, rather than fighting it. */
  grid-template-columns: 260px 1fr auto;
  /* Without this, both rows default to "auto" and min-height's leftover
     space gets distributed across them (grid's default align-content
     stretches auto-sized rows to fill the container) -- inflating the
     titlebar row along with the body row. Pinning the titlebar to its own
     content height and letting only the body row absorb leftover space
     fixes that. */
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "titlebar titlebar titlebar"
    "nav main chat";
  /* Fixed (not min-) height pins the shell itself to the viewport, so the
     titlebar/nav/chat "chrome" never scrolls away -- only .re-shell__main's
     own overflow scrolls, the way a desktop app's content pane does. */
  height: 100vh;
}

/* .re-titlebar is the reusable title bar itself (core/templates/core/
   _titlebar.html) -- used both inside the authenticated shell and, on its
   own with no nav/chat-space, at the top of the signed-out home page.
   .re-shell__titlebar only adds grid positioning on top of it. */
.re-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--re-space-4);
  padding: var(--re-space-3) var(--re-space-5);
  background-color: var(--re-surface-nav);
  border-bottom: 1px solid var(--re-border-nav-divider);
}

.re-shell__titlebar {
  grid-area: titlebar;
}

.re-titlebar__brand {
  color: var(--re-color-text-on-fill);
  font-family: var(--re-font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  text-decoration: none;
}

.re-titlebar__end {
  display: flex;
  align-items: center;
  gap: var(--re-space-4);
}

.re-titlebar__welcome {
  color: var(--re-color-nav-text);
  font-size: 0.875rem;
}

.re-shell__nav {
  grid-area: nav;
  background-color: var(--re-surface-nav);
  padding: var(--re-space-5) var(--re-space-3);
  overflow-y: auto;
}

.re-shell__nav a {
  display: block;
  /* specs/034: a little tighter vertically (was 12px padding, 44px rows). */
  padding: var(--re-space-2) var(--re-space-3);
  margin-bottom: 2px;
  border-radius: var(--re-radius-chip);
  color: var(--re-color-nav-text);
  font-weight: 600;
  text-decoration: none;
  min-height: 36px;
}

.re-shell__nav a:hover,
.re-shell__nav a:focus-visible {
  background-color: var(--re-surface-nav-item-active);
  color: var(--re-color-text-on-fill);
}

/* The legal links at the foot of the left menu: one quiet line of small text. */
.re-nav-legal {
  margin: var(--re-space-6) var(--re-space-3) 0;
  padding-top: var(--re-space-3);
  border-top: 1px solid var(--re-border-nav-section);
  font-size: 0.75rem;
  line-height: 1.6;
  color: var(--re-color-nav-text);
  opacity: 0.75;
}
.re-shell__nav .re-nav-legal a {
  display: inline;
  padding: 0;
  margin: 0;
  border-radius: 0;
  color: inherit;
}
.re-shell__nav .re-nav-legal a:hover,
.re-shell__nav .re-nav-legal a:focus-visible {
  background: none;
  color: var(--re-color-text-on-fill);
  text-decoration: underline;
}

/* specs/010-companies-jobs-directory: a nav section label (e.g.
   "Community", grouping Companies/Jobs below the plain, unlabeled personal
   links above it) -- a top divider line plus real vertical space is what
   actually reads as "a section starts here" against a list of link-shaped
   rows; .re-company-eyebrow's uppercase-label-only treatment (right for a
   card-internal sub-label) wasn't enough contrast on its own in this nav. */
.re-nav-section {
  margin: var(--re-space-4) var(--re-space-3) var(--re-space-1);
  padding-top: var(--re-space-3);
  border-top: 1px solid var(--re-border-nav-section);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--re-color-nav-text);
}

.re-shell__main {
  grid-area: main;
  min-width: 0;
  /* Grid items default to min-height: auto, which lets content overflow
     the row instead of triggering this element's own scrollbar -- without
     this the whole page would grow past 100vh and the browser would scroll
     everything (chrome included) again, defeating .re-shell's fixed height
     above. */
  min-height: 0;
  overflow-y: auto;
  /* The containing block for absolutely positioned content (screen-reader-only text, row
     captions, check marks). Without it they're placed against the page itself, so on a long
     page they stretch the document past 100vh and the chrome scrolls too. */
  position: relative;
}

.re-shell__chat-space {
  grid-area: chat;
  position: relative;
  background-color: var(--re-surface-chat);
  border-left: 1px solid var(--re-border-card);
  width: 380px;
  min-width: 280px;
  max-width: 640px;
  overflow: hidden;
}

/* A native `resize: horizontal` handle was tried here first -- it only ever renders as
   a tiny, low-contrast corner grip with no way to make it more visible cross-browser,
   which is exactly why it was reported as "not showing up." static/js/chat-resize.js
   drives this instead: a real, visibly-styled drag rail along the panel's left edge
   (cursor: col-resize, a visible line that brightens on hover/drag), the same "no
   server-rendered equivalent" JS exception as processing-indicator.js/chat-scroll.js. */
.re-chat-resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  transform: translateX(-50%);
  cursor: col-resize;
  background: transparent;
  border: none;
  padding: 0;
  z-index: 1;
}

.re-chat-resize-handle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  transform: translateX(-50%);
  border-radius: var(--re-radius-chip);
  background-color: var(--re-border-card);
}

.re-chat-resize-handle:hover::before,
.re-chat-resize-handle:focus-visible::before,
.re-chat-resize-handle.re-chat-resize-handle--active::before {
  background-color: var(--re-color-chat-accent);
}

.re-shell__chat-placeholder {
  color: var(--re-color-disabled);
  font-size: 0.875rem;
}

/* specs/019-chat-guided-onboarding: the chat panel itself (chat/templates/chat/_panel.html)
   and its correlated-highlight markup (companies/templates/companies/_guidance_target.html).
   Every action here is a plain <form method="post"> -- no script anywhere in this block. */
.re-chat {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-4);
  height: 100%;
  overflow-y: auto;
  padding: var(--re-space-5);
}

.re-chat__messages {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-3);
}

.re-chat__message {
  padding: var(--re-space-3);
  border-radius: var(--re-radius-card);
  background-color: var(--re-surface-page);
  border: 1px solid var(--re-border-card);
}

.re-chat__message--user {
  background-color: var(--re-surface-card-selected);
  align-self: flex-end;
}

.re-chat__message--handoff {
  border-left: 3px solid var(--re-color-chat-accent);
}

.re-chat__message-author {
  margin: 0 0 var(--re-space-1);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--re-color-disabled);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.re-chat__message-text {
  margin: 0;
  font-size: 0.875rem;
}

.re-chat__advice {
  margin: var(--re-space-2) 0 0;
  padding: var(--re-space-2) var(--re-space-3);
  border-radius: var(--re-radius-chip);
  background-color: var(--re-surface-card);
  border: 1px dashed var(--re-border-card);
  font-size: 0.8125rem;
}

.re-chat__advice-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--re-color-chat-accent);
  margin-bottom: var(--re-space-1);
}

.re-chat__actions {
  display: flex;
  gap: var(--re-space-2);
  flex-wrap: wrap;
}

/* A floating badge next to the target used to be the whole highlight -- reported live as
   ambiguous (it read as a second, unrelated button, and its own arrow icon pointed
   sideways at nothing rather than at the real element). The actual pointing now happens
   with re-guidance-ring-pulse below, applied directly to the target element itself via a
   scoped inline <style> in _guidance_target.html; this is just its plain-text caption --
   still non-color-only by construction (constitution Principle XIII), just no longer
   trying to *be* the visual pointer itself. */
.re-guidance-highlight {
  margin: var(--re-space-1) 0 0;
  color: var(--re-color-chat-accent);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Applied directly to the real target element's own id (see _guidance_target.html) --
   a persistent ring plus a slow expanding pulse, so the specific element is unambiguous
   even before the pulse is noticed. Kept low-amplitude and slow to stay well clear of
   WCAG's flashing-content threshold; the template itself turns this off under
   prefers-reduced-motion rather than a global rule here, since the animated element's
   id is different on every page. */
@keyframes re-guidance-ring-pulse {
  0% {
    box-shadow: 0 0 0 3px var(--re-ring-guidance), 0 0 0 3px var(--re-ring-guidance-soft);
  }
  70% {
    box-shadow: 0 0 0 3px var(--re-ring-guidance), 0 0 0 10px var(--re-ring-guidance-clear);
  }
  100% {
    box-shadow: 0 0 0 3px var(--re-ring-guidance), 0 0 0 10px var(--re-ring-guidance-clear);
  }
}

/* A page that gives the chat column's width to its content (e.g. the candidate comparison). */
.re-shell--no-chat {
  grid-template-columns: 260px 1fr;
  grid-template-areas:
    "titlebar titlebar"
    "nav main";
}

@media (max-width: 1200px) {
  .re-shell {
    grid-template-columns: 260px 1fr;
    grid-template-areas:
      "titlebar titlebar"
      "nav main";
  }

  .re-shell__chat-space {
    display: none;
  }
}

@media (max-width: 768px) {
  .re-shell {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "titlebar"
      "main";
  }

  /* specs/035: the left menu folds behind the burger in the title bar, and opens as a
     panel over the page, just under the title bar (same grid area as the content). */
  .re-shell__nav {
    display: none;
    grid-area: main;
    align-self: start;
    z-index: 20;
    max-height: 100%;
    overflow-y: auto;
    padding: var(--re-space-2) var(--re-space-3) var(--re-space-3);
    border-bottom: 1px solid var(--re-border-nav-divider);
    box-shadow: var(--re-shadow-float);
  }

  .re-shell:has(.re-nav-toggle:checked) .re-shell__nav {
    display: block;
  }

  .re-titlebar__welcome {
    display: none;
  }
}

/* Report / profile content panel (Section 5: "Report / profile content
   panel" -- 760-960px reading width, generous padding). Distinct from
   .re-card (a compact 380px evidence card) -- editor and public-profile
   sections are reading/editing surfaces, not evidence cards. */
.re-panel {
  max-width: 860px;
  background-color: var(--re-surface-card);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  box-shadow: var(--re-shadow-card);
  padding: var(--re-space-6);
}

.re-panel + .re-panel {
  margin-top: var(--re-space-5);
}

/* Forms (Section 13: persistent visible labels, 16px between fields, 8px
   label-to-control, 24px before action rows). */
.re-field {
  margin-bottom: var(--re-space-4);
}

/* Two related, short fields side by side (e.g. start/end date) -- wraps to
   stacked on narrow popovers instead of forcing a fixed two-column width. */
.re-field-row {
  display: flex;
  gap: var(--re-space-3);
  flex-wrap: wrap;
}

.re-field-row .re-field {
  flex: 1 1 160px;
}

.re-field label {
  display: block;
  margin-bottom: var(--re-space-2);
  font-family: var(--re-font-label);
  font-size: 0.875rem;
  font-weight: 600;
}

/* Required-field marker (Section 13: "mark requirements consistently, do
   not make users infer required fields from validation errors"). Purely
   visual -- every required input already carries the native HTML
   `required` attribute, which screen readers announce on their own. */
.re-field--required label::after {
  content: " *";
  color: var(--re-color-error);
}

.re-field input[type="text"],
.re-field input[type="email"],
.re-field input[type="tel"],
.re-field input[type="url"],
.re-field input[type="search"],
.re-field input[type="password"],
.re-field input[type="datetime-local"],
.re-field input[type="date"],
.re-field input[type="number"],
.re-field input[type="file"],
.re-field select,
.re-field textarea {
  width: 100%;
  max-width: 480px;
  padding: var(--re-space-2) var(--re-space-3);
  border: 1px solid var(--re-border-card);
  border-radius: 8px;
  font-family: var(--re-font-sans);
  font-size: 0.9375rem;
  color: var(--re-color-text-primary);
  background-color: var(--re-surface-card);
}
/* A field that takes the form's full width (e.g. the company's message for engineers). */
.re-field--wide textarea { max-width: none; }

.re-field textarea {
  min-height: 96px;
  resize: vertical;
}

.re-field--checkbox {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
}

.re-field--checkbox label {
  margin-bottom: 0;
}

.re-field__help {
  margin-top: var(--re-space-1);
  font-size: 0.8125rem;
  color: var(--re-color-disabled);
}

.re-fieldset {
  margin: 0 0 var(--re-space-4);
  padding: var(--re-space-4);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
}

.re-fieldset legend {
  padding: 0 var(--re-space-2);
  font-weight: 600;
}

/* Native, zero-JS progressive disclosure (style-guide.md Section 13's
   "native disclosure over JavaScript modals" rule) for a collapsible item
   inside an edit popover, e.g. one evidence item -- collapsed by default so
   the popover's height doesn't scale with how many items exist. Boxed to
   match .re-fieldset's visual weight. */
.re-details {
  margin: 0 0 var(--re-space-4);
  padding: var(--re-space-4);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
}

.re-details summary {
  font-weight: 600;
  cursor: pointer;
}

.re-details[open] summary {
  margin-bottom: var(--re-space-3);
}

.re-details summary:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

/* specs/013-proving-ground-submissions: the same native disclosure, reused for a
   whole page section (e.g. proving_ground_challenge_editor.html's Details/Awards/
   Artifacts/etc.) instead of one nested item -- collapsed once a challenge goes
   live so Submissions (kept as a plain, never-collapsible section) is what a
   company rep sees without expanding anything. The heading goes inside <summary>
   for its own accessible name.
   .re-details's own default <summary> relies on the UA's native
   `display: list-item` marker box, which puts the triangle on its own line once
   the content is a block-level heading -- not "on the same line" as this size of
   header needs. Replaced with a real flex row + a manually drawn marker instead
   (list-style: none hides the native one; ::-webkit-details-marker covers
   Safari, which ignores list-style on <summary>). */
.re-details--section summary {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
  list-style: none;
}

.re-details--section summary::-webkit-details-marker {
  display: none;
}

.re-details--section summary::before {
  content: "\25B6";
  font-size: 0.75em;
  flex-shrink: 0;
}

.re-details--section[open] > summary::before {
  content: "\25BC";
}

.re-details--section summary h2 {
  margin: 0;
}

/* specs/013-proving-ground-submissions: Submissions (and, since specs/014-job-applicants,
   Applications) is the screen a company rep comes back to most once a challenge/posting is
   live, so it sits in its own column instead of at the bottom of a long stack of (usually
   collapsed) sections -- review needs no scrolling past everything else first. `order` (not
   DOM order) puts it on the right, in the narrower column, while Details/Awards/etc. --
   which the template emits first -- read left to right as normal. Feature-neutral name
   (renamed from .re-challenge-editor-layout in specs/014's research.md #7) since the layout
   itself has nothing challenge-specific about it -- shared by both editor screens rather
   than duplicated under a second name. */
.re-editor-review-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: start;
  gap: var(--re-space-5);
}

.re-editor-review-layout__review {
  order: 2;
}

.re-editor-review-layout__details {
  order: 1;
}

/* The job posting editor's hiring team: a compact, always-open card under the title --
   each role with its people inline, and the assign controls beside them. */
.re-hiring-team {
  margin-bottom: var(--re-space-5);
  font-size: 0.875rem;
}

.re-hiring-team h2 {
  margin: 0 0 var(--re-space-2);
  font-size: 1rem;
}

.re-hiring-team__roles {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-2) var(--re-space-6);
  margin: 0 0 var(--re-space-3);
}

.re-hiring-team__role dt {
  font-weight: 600;
}

.re-hiring-team__role dd {
  margin: 0;
}

.re-hiring-team__members {
  list-style: none;
  margin: 0;
  padding: 0;
}

.re-hiring-team__members li {
  display: flex;
  align-items: baseline;
  gap: var(--re-space-2);
}

.re-hiring-team__members .re-link,
.re-hiring-team__assign label,
.re-hiring-team__assign select {
  font-size: 0.8125rem;
}

.re-hiring-team__assign {
  margin: 0;
}

/* The job posting editor gives Applications half the width, two cards across, so a long
   applicant list is easy to scan. */
.re-editor-review-layout--even {
  grid-template-columns: 1fr 1fr;
}

.re-applicant-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--re-space-3);
  margin: var(--re-space-4) 0;
}

.re-applicant-grid .re-card {
  max-width: none;
}

@media (max-width: 1200px) {
  .re-editor-review-layout {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .re-editor-review-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .re-applicant-grid {
    grid-template-columns: 1fr;
  }
}

.re-form-actions {
  margin-top: var(--re-space-5);
  display: flex;
  gap: var(--re-space-3);
}

/* A status line with an inline action next to it (e.g. "End challenge" beside a
   challenge's own Status text) -- a <form> can't nest inside the <p> it sits next
   to (forms aren't phrasing content, so browsers silently split the paragraph),
   so this wraps both as flex row siblings instead. */
.re-status-row {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
}

.re-status-row p {
  margin: 0;
}

/* A single-row form (e.g. a job posting requirement's inline edit field,
   specs/009-job-postings FR-005) -- fields and its submit button share one
   line instead of the default stacked .re-field layout. */
.re-inline-form {
  display: flex;
  align-items: center;
  gap: var(--re-space-3);
}

.re-inline-form .re-field {
  flex: 1;
  margin: 0;
  /* Overrides .re-field textarea/input's general 480px cap (Section 13's default,
     right for a name/email field) -- a requirement's own text should use the full
     width its row has, not sit narrow in a wide-open row. */
  max-width: none;
}

/* max-width must be reset on the textarea/input itself too, not just its .re-field
   wrapper above -- .re-field textarea's own 480px cap (base rule) is set directly on
   the element and otherwise still wins regardless of how wide its parent is. */
.re-inline-form textarea,
.re-inline-form input[type="text"] {
  max-width: none;
}

/* Starts at one line and grows with its content up to a bounded height, then
   scrolls internally -- no JS needed (Principle I: minimal client-side JavaScript).
   field-sizing is unsupported in a handful of older browsers; resize: vertical
   (inherited from .re-field textarea) is the graceful fallback there -- a normal,
   manually-resizable textarea, not a broken one.
   Selector must out-specify .re-field textarea's own min-height: 96px (line ~319) --
   a bare .re-textarea--autosize class selector alone loses that specificity fight
   and silently keeps the ~6-line starting height this class exists to remove. */
.re-field textarea.re-textarea--autosize {
  field-sizing: content;
  min-height: 2.5rem;
  max-height: 12rem;
  overflow-y: auto;
}

/* Compact list items for existing entries (a project, a membership, an
   education entry) inside a wider .re-panel -- narrower than a full
   .re-card since several appear stacked in a reading-width column. */
.re-item {
  padding: var(--re-space-4) 0;
  border-top: 1px solid var(--re-border-card);
}

.re-item:first-child {
  border-top: none;
  padding-top: 0;
}

.re-item__header {
  display: flex;
  align-items: baseline;
  gap: var(--re-space-2);
  flex-wrap: wrap;
  margin-bottom: var(--re-space-1);
}

.re-item__actions {
  margin-top: var(--re-space-2);
  display: flex;
  gap: var(--re-space-2);
}

.re-btn--compact {
  min-height: 32px;
  padding: 0 var(--re-space-3);
  font-size: 0.8125rem;
}

/* Popovers (native Popover API -- open/close/light-dismiss/Escape all work
   with zero JavaScript, the logical conclusion of constitution Principle
   I's "minimal JavaScript" for the add/edit-project and add/edit-evidence
   dialogs). Reset the UA default popover box to match design tokens. */
[popover] {
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  padding: var(--re-space-6);
  width: min(90vw, 660px); /* specs/030: ~18% wider, less wrapping */
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--re-shadow-float);
  background-color: var(--re-surface-card);
  color: var(--re-color-text-primary);
}

[popover]::backdrop {
  background-color: var(--re-surface-backdrop);
}

.re-popover__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--re-space-4);
  margin-bottom: var(--re-space-4);
}

.re-popover__header h2,
.re-popover__header h3 {
  margin: 0;
}

.re-popover__header-actions {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
}

/* A low-emphasis destructive text action (e.g. "Delete project" sitting in
   a popover header) -- red per style-guide.md's "reserve red for true
   errors, destructive actions" rule, underlined so meaning never depends on
   color alone, and a full 44px touch target despite the compact look. */
.re-link-danger {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--re-space-2);
  background: none;
  border: none;
  color: var(--re-color-error);
  font-family: var(--re-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.re-link-danger:hover {
  color: var(--re-color-error-hover);
}

.re-link-danger:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

/* Same shape as .re-link-danger (a <button> styled as a text link -- the action
   itself, e.g. "End challenge", is still a real POST, not a GET <a href>; per
   Principle I every mutation stays a form submission) but for a non-destructive
   action, so it uses the standard link color instead of error red. */
.re-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--re-space-2);
  background: none;
  border: none;
  color: var(--re-color-link);
  font-family: var(--re-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.re-link:hover {
  color: var(--re-color-link-hover);
}

.re-link:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

/* Project cards grid (Section 5's own "Evidence card" structure -- label,
   title, work type, summary, metadata, action -- is what a project card
   should look like too). */
.re-project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--re-space-5);
  margin: var(--re-space-4) 0;
}

/* specs/010-companies-jobs-directory: Prev/Next controls for the Companies
   Directory and Jobs Board -- real links (each carries the full filter
   querystring, FR-005), not JS-driven, so keyboard/screen-reader operation
   is native for free (Principle XIII). */
.re-pagination {
  display: flex;
  align-items: center;
  gap: var(--re-space-3);
  margin: var(--re-space-5) 0;
}

.re-pagination__status {
  font-size: 0.875rem;
  color: var(--re-color-disabled);
}

.re-project-card__evidence {
  margin: var(--re-space-3) 0;
  padding-left: 0;
  list-style: none;
}

.re-project-card__evidence li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--re-space-1) var(--re-space-2);
  padding: var(--re-space-1) 0;
  font-size: 0.875rem;
}

/* The visibility pill keeps its own width on one line; the file's name takes the rest. */
.re-project-card__evidence li .re-pill {
  flex-shrink: 0;
  white-space: nowrap;
  padding: 0 var(--re-space-2);
  font-size: 0.75rem;
}

.re-project-card__evidence li a {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* specs/20261022-134243: where an imported file came from, on its own line under the name. */
.re-project-card__evidence li .re-evidence-import-note {
  flex-basis: 100%;
}

/* Card header: title/meta on the left, the card's one entry point into
   editing (and, for Identity, the "Edit" action) pinned top-right --
   keeps every other action (evidence editing, delete) inside the edit
   flow instead of cluttering the card itself. */
.re-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--re-space-3);
}

.re-card__header .re-card__title {
  margin-top: 0;
}

/* Category choice (Section 5 Pills pattern, but built on real, keyboard-
   operable <input type="radio"> elements -- never a div with a click
   handler standing in for a form control). */
.re-category-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-2);
  margin-bottom: var(--re-space-4);
}

.re-category-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-2);
  padding: var(--re-space-2) var(--re-space-4);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-pill);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  position: relative;
}

.re-category-choice:has(input:checked) {
  border-color: var(--re-color-primary);
  background-color: var(--re-surface-nav-active);
  color: var(--re-color-link);
}

/* Visually hidden but still a real, focusable, keyboard-operable radio --
   the pill (its <label>) carries the selected/focus styling instead of the
   browser's default radio dot (Section 5's Pills pattern, applied to a
   real form control rather than faked with a div + click handler). */
.re-category-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.re-category-choice:has(input:focus-visible) {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

/* Category-first progressive disclosure: the rest of a project form (and
   the one matching category-detail fieldset within it) only appear once a
   category radio is checked. CSS-only (no JavaScript) -- and deliberately
   NOT a forced multi-step "wizard" gated by fake Next/Back buttons wired to
   a hidden, differently-named radio group, which would make Next/Back
   invisible to keyboard users. Choosing a real, visible category control
   revealing nearby content is a standard, fully keyboard/screen-reader
   accessible pattern (constitution Principle XIII).

   Uses :has() on the wrapping .re-project-wizard rather than the `~`
   sibling combinator, because the radios are nested inside .re-category-
   choices > label, not direct siblings of .re-project-form-body --
   :has() matches descendants at any depth, so nesting doesn't matter. */
.re-project-form-body {
  display: none;
}

.re-project-wizard:has(input[name="category"]:checked) .re-project-form-body {
  display: block;
}

.re-category-fields {
  display: none;
}

.re-project-wizard:has(input[name="category"][value="professional"]:checked)
  .re-category-fields[data-category-fields="professional"],
.re-project-wizard:has(input[name="category"][value="military"]:checked)
  .re-category-fields[data-category-fields="military"],
.re-project-wizard:has(input[name="category"][value="academic"]:checked)
  .re-category-fields[data-category-fields="academic"] {
  display: block;
}

/* Cards (Section 5). Comfortable evidence-card width is 320-380px by
   default; wider content panels (reports/profiles) get their own class
   once those pages exist. */
.re-card {
  max-width: 380px;
  background-color: var(--re-surface-card);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  box-shadow: var(--re-shadow-card);
  padding: var(--re-space-4);
}

.re-card--featured {
  background-color: var(--re-surface-card-featured);
  color: var(--re-color-text-on-fill);
  border-color: transparent;
}

/* specs/082: a section's heading with its "+ Add" action beside it -- one compact button next to
   the title, everywhere (it replaced "add" cards in the grid). Wraps under the title on a phone.
   Inside a <details> section the <summary> is already this flex row (.re-details--section). */
.re-section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--re-space-2) var(--re-space-3);
  margin: 0 0 var(--re-space-3);
}
.re-section-heading h2,
.re-section-heading h3 {
  margin: 0;
}

.re-card--selected {
  background-color: var(--re-surface-card-selected);
  border-color: var(--re-color-primary);
}

/* "wider content panels (reports/profiles) get their own class once those
   pages exist" -- this comment block's own note, now that the public
   Company Page needs a card that fills a layout column instead of sitting
   in an evidence-card grid at the default 320-380px width. */
.re-card--wide {
  max-width: none;
  width: 100%;
}

/* specs/20261022-134243-portfolio-import: twice a card's width, for a card holding a table
   (an import's project and the outcome of each of its files). */
.re-card--double {
  max-width: 760px;
}

.re-card--clickable:hover {
  background-color: var(--re-surface-card-hover);
  cursor: pointer;
}

.re-card__title {
  font-size: 1.125rem;
  font-weight: 600;
  margin: var(--re-space-2) 0 var(--re-space-1);
}

.re-card__summary {
  font-size: 0.9375rem;
  margin-bottom: var(--re-space-2);
}

.re-card__meta {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--re-color-disabled);
}

/* A card summary long enough to need truncating (word-truncated server-side,
   same as .re-details--section) gets a "Read more" native disclosure instead
   of letting the card grow past its neighbors in the grid -- the full text
   sits inside <details>, and :has() (already used for the project-category
   wizard above) hides the truncated preview once it's open. */
.re-card__more summary {
  cursor: pointer;
  color: var(--re-color-link);
  font-size: 0.8125rem;
  font-weight: 600;
  list-style: none;
}

.re-card__more summary::-webkit-details-marker {
  display: none;
}

.re-card__more summary:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

.re-card__more-label--open {
  display: none;
}

.re-card__more[open] .re-card__more-label--closed {
  display: none;
}

.re-card__more[open] .re-card__more-label--open {
  display: inline;
}

.re-card__summary-wrap:has(.re-card__more[open]) .re-card__summary--preview {
  display: none;
}

/* A decorative icon (style-guide.md Section 6: "pair meaning with labels" --
   the icon here is decorative since the visible text already conveys the
   meaning, e.g. an email address next to an envelope) paired inline with
   its text, at a fixed 16px per the style guide's icon-size scale. */
.re-meta-with-icon {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-1);
}

.re-icon {
  flex-shrink: 0;
}

/* Company logo thumbnail: the read-only identity card shows the actual
   uploaded image (never just "a logo is set" text); the same box holds a
   generic building icon before one is uploaded so the layout doesn't shift. */
.re-company-logo {
  width: 112px;
  height: 112px;
  border-radius: var(--re-radius-card);
  /* A logo is never cropped: it scales to fit its box (wide or tall logos leave a margin). */
  object-fit: contain;
  flex-shrink: 0;
}

.re-company-logo--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--re-surface-page);
  border: 1px solid var(--re-border-card);
  color: var(--re-color-disabled);
}

/* Larger size for the public Company Page's hero, where the logo is the
   first thing establishing identity rather than a compact list/card icon. */
.re-company-logo--lg {
  width: 128px;
  height: 128px;
}

/* Public Company Page hero (Section 5: "dark cards only for hero, featured,
   or high-authority moments" -- .re-card--featured already is Kernel Navy
   with white text; this only re-points .re-card__meta's default Slate,
   which reads too low-contrast on Kernel Navy, to the token the style guide
   itself names for this exact case: "Navigation text on dark surfaces,
   secondary labels" (Section 3), already used the same way by
   .re-titlebar__welcome. */
.re-company-hero .re-card__meta {
  color: var(--re-color-nav-text);
}

.re-company-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-2);
  margin-top: var(--re-space-4);
}

/* The hero's one line of facts: map-pinned location, open roles, then the Website/LinkedIn
   pills -- wrapping onto a second line only when it must. */
.re-company-hero__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--re-space-2) var(--re-space-3);
  margin: var(--re-space-2) 0 0;
}
.re-company-hero__links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--re-space-2);
}

/* A company page starts close under the title bar, so more of it fits above the fold. */
.re-container.re-company-page {
  padding-top: var(--re-space-3);
}

/* Cards whose purpose is plain without a title keep it for screen readers only; what
   follows sits at the top of the card as if it led. */
.re-card > .re-visually-hidden:first-child + * {
  margin-top: 0;
}

/* The supporting cards beside the main column (Services, Culture, Perks) read about a
   point smaller; Contact stays full size. */
.re-company-aside > .re-card:not(.re-company-contact) {
  font-size: 0.9167rem;
}
.re-company-aside > .re-card:not(.re-company-contact) .re-card__summary {
  font-size: 0.875rem;
}

/* Two-column body layout for a content page with a narrower supporting
   sidebar (Contact, Culture, Perks) beside the primary reading column --
   the same "one primary column + accessible secondary panel" shape Section
   16 describes for wide desktop, collapsing to one column below tablet. */
.re-company-layout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--re-space-6);
  margin-top: var(--re-space-6);
  align-items: start;
}

.re-company-main,
.re-company-aside {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-5);
}

@media (max-width: 768px) {
  .re-company-layout {
    grid-template-columns: 1fr;
  }
}

/* A small uppercase sub-label inside a card (e.g. "Office locations" ahead
   of a nested list within the Contact card) -- the same 11-12px/700
   uppercase treatment Section 5's Left Navigation row already specifies for
   "Section label", applied here to a card-internal grouping instead. */
.re-company-eyebrow {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--re-color-disabled);
  margin: var(--re-space-4) 0 var(--re-space-2);
}

.re-company-eyebrow:first-child {
  margin-top: 0;
}

/* A checklist (Culture, Perks & Benefits) -- a checkmark icon paired with
   text per item, not a bare bullet list, matching Section 6's "pair
   meaning with labels" rule for the same success/checkmark icon used
   elsewhere (e.g. the published-profile link's copy-confirmation icon). */
.re-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--re-space-2);
}

.re-checklist .re-icon {
  color: var(--re-color-success);
}

/* A checklist whose items carry their own edit/remove controls (e.g. a job
   posting's requirement or assignment list, specs/009-job-postings) --
   each item lays out as a row with its content on the left and its
   form(s) on the right, unlike the plain icon+text rows above. */
.re-checklist--editable li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--re-space-3);
}

/* A requirement's own edit form (text + Save) grows to use the row's full width;
   its sibling delete form stays at its natural width, docked to the right by the
   justify-content: space-between above. Doesn't affect the assignments list's
   plain-text-then-form rows below (no form as the first child there). */
.re-checklist--editable li > form:first-of-type {
  flex: 1;
  min-width: 0;
}

/* A checkbox list (e.g. sustainability badges) rendered as real, individually
   focusable <input type="checkbox"> controls with an icon-and-label per
   choice, inside a .re-fieldset -- never a <select multiple>, which hides
   every option but the first few and offers no icon. */
.re-checkbox-choices {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-2);
}

.re-checkbox-choice {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-2);
  font-size: 0.875rem;
}

/* Icon-only button (e.g. "copy the published profile link") -- accessible
   name comes from aria-label per style-guide.md's icon-only-control rule,
   with a full 44px touch target despite the compact visual size. Clicking
   swaps the visible copy icon for a checkmark; the aria-label swaps to
   "Copied!" alongside it so the confirmation isn't color- or icon-only. */
.re-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  background: none;
  border: none;
  color: var(--re-color-link);
  cursor: pointer;
}

.re-icon-btn:hover {
  color: var(--re-color-link-hover);
}

.re-icon-btn:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

.re-icon-btn__check {
  display: none;
  color: var(--re-color-success);
}

.re-icon-btn--copied .re-icon-btn__copy {
  display: none;
}

.re-icon-btn--copied .re-icon-btn__check {
  display: inline-flex;
}

/* specs/089: a public page's share control -- copy icon, then a Share icon opening a small
   menu (a <details>, so it works without JavaScript). */
.re-share {
  display: inline-flex;
  align-items: center;
}

.re-share__menu {
  position: relative;
}

.re-share__menu > summary {
  list-style: none;
}

.re-share__menu > summary::-webkit-details-marker {
  display: none;
}

/* Opens toward the page's middle: rightward on a phone (the control sits at the left),
   leftward on wider screens (it sits at the right of a page header). */
.re-share__list {
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 10;
  min-width: 10rem;
  margin: 0;
  padding: var(--re-space-1) 0;
  list-style: none;
  background: var(--re-surface-card);
  border: var(--re-border-card);
  border-radius: var(--re-radius-card);
  box-shadow: var(--re-shadow-float);
}

.re-share__list a {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
  min-height: 44px;
  padding: 0 var(--re-space-4);
  color: var(--re-color-link);
  text-decoration: none;
}

.re-share__list a:hover,
.re-share__list a:focus-visible {
  background: var(--re-surface-card-hover);
}

@media (min-width: 640px) {
  .re-share__list {
    left: auto;
    right: 0;
  }
}

/* Pills (Section 5, Section 9). Pill color is a reusable token, not a
   fixed meaning -- markup must always pair a pill with a visible text
   label, never color alone. */
.re-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-1);
  padding: var(--re-space-1) var(--re-space-3);
  border-radius: var(--re-radius-pill);
  font-family: var(--re-font-label);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--re-color-text-on-fill);
}

/* specs/082: the My Company header's right side -- your role(s) and the published page. */
.re-page-title__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--re-space-2);
  margin-left: auto;
}

/* specs/082: sections side by side where there's room (the RFx page's tabs); one column on a
   phone. */
.re-columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--re-space-5);
  align-items: start;
}

/* specs/078: a project's cover image -- at the top of its card, one fixed shape everywhere,
   cropped from the centre, so a grid lines up; a card without one is unchanged. */
.re-card--with-cover { padding-top: 0; overflow: hidden; }
.re-card__cover {
  display: block;
  width: calc(100% + 2 * var(--re-space-4));
  max-width: none;
  margin: 0 calc(-1 * var(--re-space-4)) var(--re-space-3);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: var(--re-surface-card-selected);
}
.re-project-cover__preview {
  display: block;
  max-width: min(100%, 360px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--re-radius-card);
  margin: 0 0 var(--re-space-3);
}
.re-cover-choices__note { margin: 0 0 var(--re-space-2) var(--re-space-5); }

/* specs/083: Team & Access -- a role pill's remove button, and "+ Role" / "+ Project" pills. */
.re-pill__remove {
  margin-left: var(--re-space-1);
  padding: 0 var(--re-space-1);
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.re-pill__remove:hover,
.re-pill__remove:focus-visible { color: var(--re-color-error); }
.re-pill--add {
  border: 1px dashed var(--re-border-card);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
/* specs/084: the one people table (companies/_people_table.html). */
.re-people-table td,
.re-people-table th[scope="row"] { vertical-align: top; }
.re-people-table th[scope="row"] .re-card__meta { display: block; font-weight: 400; }
.re-people-table .re-pill-list { margin: 0; }
.re-people-table__actions { white-space: nowrap; text-align: right; }

/* specs/082: a wrapping row of pills (a company's team on its public page). */
.re-pill-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-2);
  margin: 0 0 var(--re-space-3);
  padding: 0;
  list-style: none;
}
.re-pill-list a.re-pill { text-decoration: none; }
.re-pill-list a.re-pill:hover,
.re-pill-list a.re-pill:focus-visible { text-decoration: underline; }

.re-pill--color-1 {
  background-color: var(--re-pill-color-1);
}
.re-pill--color-2 {
  background-color: var(--re-pill-color-2);
}
.re-pill--color-3 {
  background-color: var(--re-pill-color-3);
}
.re-pill--color-4 {
  background-color: var(--re-pill-color-4);
}
.re-pill--color-5 {
  background-color: var(--re-pill-color-5);
}
.re-pill--color-6 {
  background-color: var(--re-pill-color-6);
}
.re-pill--color-7 {
  background-color: var(--re-pill-color-7);
}
.re-pill--color-8 {
  background-color: var(--re-pill-color-8);
}
.re-pill--color-9 {
  background-color: var(--re-pill-color-9);
}
.re-pill--color-10 {
  background-color: var(--re-pill-color-10);
  color: var(--re-color-text-primary);
}

/* Buttons (Section 5). 44px minimum touch target, verb-first labels. */
.re-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--re-space-4);
  border: none;
  border-radius: 8px;
  font-family: var(--re-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--re-motion-fast) var(--re-ease-standard);
}

.re-btn--primary {
  background-color: var(--re-color-primary);
  color: var(--re-color-text-on-fill);
}

.re-btn--primary:hover {
  background-color: var(--re-color-primary-hover);
}

.re-btn--secondary {
  background-color: transparent;
  color: var(--re-color-link);
  border: 1px solid var(--re-border-card);
}

/* Principle XIII's processing-indicator requirement -- added by
   static/js/processing-indicator.js the instant a [data-processing-label]
   submit control is clicked. The label swap (in the JS, not here) already
   satisfies "text status accompanies every spinner"; the ring below is the
   optional visual reinforcement, motion-safe via --re-motion-spin. */
.re-btn--processing {
  cursor: progress;
  opacity: 0.8;
}

.re-btn--processing::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  margin-right: var(--re-space-2);
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: re-spin var(--re-motion-spin) linear infinite;
}

@keyframes re-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Semantic status messages (Section 9, 14, 15). Color is always paired
   with a text label -- never the only carrier of meaning. */
.re-status-message {
  display: flex;
  align-items: center;
  gap: var(--re-space-2);
  padding: var(--re-space-3) var(--re-space-4);
  border-radius: 8px;
  border: 1px solid var(--re-border-card);
  font-size: 0.9375rem;
}

.re-status-message--success {
  border-color: var(--re-color-success);
}
.re-status-message--warning {
  border-color: var(--re-color-warning);
}
.re-status-message--error {
  border-color: var(--re-color-error);
}
.re-status-message--info {
  border-color: var(--re-color-info);
}

.re-status-message__label {
  font-weight: 700;
}

/* Visually hidden but still announced by screen readers -- e.g. a <table>'s <caption>
   when the visible "View as table" <summary> already conveys the same context sighted
   users need (Principle XIII: hidden from view, never hidden from assistive tech). */
.re-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* specs/015-system-dashboard: six metric cards, each a current total plus a daily trend
   chart. Three per row on desktop, two on tablet, one on mobile -- explicit columns rather
   than auto-fill's minmax, since a fixed count is what this layout actually wants
   (breakpoints match --re-breakpoint-desktop/--re-breakpoint-tablet, hardcoded because
   CSS media features can't reference custom properties, same as .re-shell's own rule above). */
.re-dashboard-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-4);
  margin-bottom: var(--re-space-4);
}

.re-metrics-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--re-space-5);
  margin: var(--re-space-4) 0;
}

@media (max-width: 1200px) {
  .re-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .re-metrics-grid {
    grid-template-columns: 1fr;
  }
}

/* .re-card's own default caps width at 380px for a standalone evidence-style card --
   here each card instead needs to fill its own grid cell (.re-card--wide's own rationale,
   applied inline rather than via that class since every card in this grid needs it). */
.re-metric-card {
  max-width: none;
  width: 100%;
}

.re-metric-card__total {
  font-size: 2rem;
  font-weight: 700;
  margin: var(--re-space-2) 0;
}

.re-metric-card canvas {
  width: 100%;
  max-height: 160px;
  margin-bottom: var(--re-space-3);
}

/* The chart itself is the click target for the "expand" popover -- a real <button> (native
   popovertarget invokers must be buttons/inputs) stripped of its default chrome so it reads
   as "click the chart," not as a button sitting next to one. */
.re-metric-card__chart-button {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: var(--re-radius-card);
}

.re-metric-card__chart-button:hover,
.re-metric-card__chart-button:focus-visible {
  outline: var(--re-border-focus);
  outline-offset: 2px;
}

.re-metric-card__expanded-popover {
  width: min(90vw, 820px);
}

/* specs/049: a card broken into series (one line each) names them here, with their totals.
   Swatch colours follow the series' fixed order; the text stays in text ink. */
.re-metric-card__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-1) var(--re-space-3);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--re-space-2);
  color: var(--re-color-disabled);
  font-size: 0.875rem;
}

.re-metric-card__legend li { display: flex; align-items: center; gap: var(--re-space-1); }
.re-metric-card__legend strong { color: var(--re-color-text-primary); }
.re-metric-card__swatch { width: 12px; height: 3px; border-radius: 2px; display: inline-block; }
.re-metric-card__swatch--1 { background: var(--re-pill-color-1); }
.re-metric-card__swatch--2 { background: var(--re-pill-color-4); }

.re-metric-card__expanded-popover canvas {
  width: 100%;
  max-height: 420px;
}

/* specs/016-admin-user-company-lists: a plain data table for admin lists (many rows, several
   columns, scanned rather than browsed card-by-card) -- the first table in this codebase
   meant to BE the primary UI rather than an accessible fallback under a chart, so it needs
   its own real styling rather than relying on the browser default the chart tables (above)
   get away with sitting inside a collapsed <details>. */
.re-table-wrap {
  overflow-x: auto;
  margin: var(--re-space-4) 0;
}

.re-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.re-table th,
.re-table td {
  padding: var(--re-space-2) var(--re-space-3);
  text-align: left;
  border-bottom: 1px solid var(--re-border-card);
  white-space: nowrap;
}

.re-table th {
  font-weight: 600;
  color: var(--re-color-disabled);
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.re-table tbody tr:hover {
  background-color: var(--re-surface-card-hover);
}

/* Field-level validation message (specs/021-admin-invoicing editor and acceptance form).
   Text, not just color, carries the error (Principle XIII). */
.re-field__error {
  margin: var(--re-space-1) 0 0;
  color: var(--re-color-error);
  font-size: 0.875rem;
  font-weight: 600;
}

.re-field__error::before {
  content: "Error: ";
}

/* Sections that follow the agreement document (payment, pay online, accept) span the
   same width as the document rather than the 860px panel default. */
.re-agreement ~ .re-panel {
  max-width: none;
  margin-top: var(--re-space-4);
}

/* Tables whose cells may wrap -- long provider references break instead of forcing
   horizontal scrolling. */
.re-table--wrap th,
.re-table--wrap td {
  white-space: normal;
  vertical-align: top;
}

.re-table__ref {
  overflow-wrap: anywhere;
  font-family: var(--re-font-mono);
  font-size: 0.8125rem;
}

/* specs/023: the two pay-online choices side by side, stacking on narrow screens. */
.re-pay-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--re-space-4);
}

.re-pay-option {
  padding: var(--re-space-4);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
}

/* specs/022: void-payment control inline in its table cell. */
.re-inline-form {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--re-space-2);
  align-items: center;
  margin-left: var(--re-space-2);
}

/* Partner agreement document (specs/021-admin-invoicing): one layout for screen and
   print, mirroring the hand-made agreement. */
.re-agreement {
  margin-top: var(--re-space-4);
  padding: var(--re-space-6);
  background-color: var(--re-surface-card);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  color: var(--re-color-text-primary);
  line-height: 1.5;
}

.re-agreement__title {
  margin-top: 0;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.re-agreement__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-2) var(--re-space-6);
  margin: 0 0 var(--re-space-4);
}

.re-agreement__meta dt,
.re-agreement__party dt,
.re-agreement__signature dt {
  font-weight: 700;
}

.re-agreement__meta dd,
.re-agreement__party dd,
.re-agreement__signature dd {
  margin: 0;
}

.re-agreement__table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--re-space-2) 0 var(--re-space-4);
}

.re-agreement__table th,
.re-agreement__table td {
  padding: var(--re-space-2) var(--re-space-3);
  border: 1px solid var(--re-border-card);
  text-align: left;
  vertical-align: top;
}

.re-agreement__table thead th {
  background-color: var(--re-surface-page);
}

.re-agreement__table tbody th {
  font-weight: 400;
}

.re-agreement__num {
  text-align: right;
  white-space: nowrap;
}

.re-agreement__table th.re-agreement__num,
.re-agreement__table td.re-agreement__num {
  text-align: right;
}

.re-agreement__row--empty {
  color: var(--re-color-disabled);
}

.re-agreement__total th,
.re-agreement__total td {
  font-weight: 700;
  background-color: var(--re-surface-page);
}

.re-agreement__section h4 {
  margin-bottom: var(--re-space-1);
}

.re-agreement__section p {
  margin-top: 0;
}

.re-agreement__version {
  font-size: 0.8125rem;
  color: var(--re-color-disabled);
}

.re-agreement__signatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--re-space-4);
}

.re-agreement__signature {
  margin: 0;
  padding: var(--re-space-3);
  border: 1px solid var(--re-border-card);
}

.re-agreement__line {
  display: inline-block;
  min-width: 12rem;
  border-bottom: 1px solid currentColor;
}

.re-agreement__void {
  padding: var(--re-space-2) var(--re-space-3);
  border: 2px solid var(--re-color-error);
}

/* Print (Section 5 "Print-Aware Layout" / "Profile Layout Rules" print
   column): reports and profiles must become clean print/PDF artifacts
   without extra cleanup. Hide interactive-only chrome, drop decorative
   elevation, keep items from splitting mid-block, and print URLs as
   visible text since paper has no hover state. */
@media print {
  body {
    background-color: var(--re-print-paper);
  }

  form,
  button,
  .re-btn,
  [popover],
  .re-titlebar,
  .re-shell__nav,
  .re-shell__chat-space {
    display: none;
  }

  .re-shell {
    display: block;
  }

  .re-panel,
  .re-card {
    box-shadow: none;
    border: 1px solid var(--re-print-ink);
  }

  .re-item,
  .re-card {
    break-inside: avoid;
  }

  main a[href]::after {
    content: " (" attr(href) ")";
    font-size: 0.75em;
  }

  /* specs/021-admin-invoicing: only the agreement document prints. */
  @page {
    margin: 18mm 16mm;
  }

  .re-agreement-actions {
    display: none;
  }

  .re-agreement {
    margin: 0;
    padding: 0;
    border: 0;
    font-family: var(--re-font-print);
    font-size: 10.5pt;
    color: var(--re-print-ink);
  }

  .re-agreement__table th,
  .re-agreement__table td,
  .re-agreement__signature {
    border-color: var(--re-print-ink);
  }

  .re-agreement__table thead th,
  .re-agreement__total th,
  .re-agreement__total td {
    background-color: var(--re-print-fill);
  }

  .re-agreement__table,
  .re-agreement__section,
  .re-agreement__acceptance {
    break-inside: avoid;
  }

  .re-agreement a[href]::after {
    content: none;
  }

  /* The payment record prints as a continuation of the agreement, not a floating card. */
  .re-payment-summary {
    margin-top: 6mm;
    padding: 4mm 0 0;
    border: 0;
    border-top: 1px solid var(--re-print-ink);
    border-radius: 0;
    box-shadow: none;
    font-family: var(--re-font-print);
    font-size: 10.5pt;
    color: var(--re-print-ink);
    break-inside: avoid;
  }

  .re-table-wrap {
    overflow: visible;
  }

  .re-table th,
  .re-table td {
    white-space: normal;
    color: var(--re-print-ink);
    border-bottom-color: var(--re-print-ink);
  }
}

/* ---------------------------------------------------------------- public home page (specs/025) */
.re-home__hero {
  padding: var(--re-space-6) 0 var(--re-space-5);
  max-width: 48rem;
}
.re-home__hero h1 {
  font-family: var(--re-font-heading);
  line-height: 1.15;
  margin: 0 0 var(--re-space-4);
}
.re-home__lead {
  font-size: 1.125rem;
  line-height: 1.6;
  margin: 0 0 var(--re-space-5);
}
.re-home__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--re-space-3);
}
.re-home__signin {
  margin-top: var(--re-space-3);
}
.re-home__grid {
  display: grid;
  gap: var(--re-space-4);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.re-home__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.re-home__preview {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-2);
}
.re-home__count {
  display: inline-block;
  min-width: 1.75rem;
  padding: 0 var(--re-space-2);
  border-radius: var(--re-radius-pill);
  background: var(--re-surface-nav-active);
  font-size: 0.875rem;
  text-align: center;
}
.re-home__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--re-space-3);
}
.re-home__items li {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.re-home__more {
  margin-top: auto;
  font-weight: 600;
}
.re-home__steps {
  padding-left: var(--re-space-5);
  line-height: 1.6;
}
.re-home__industries {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--re-space-3);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.re-home__industries li {
  display: flex;
  flex-direction: column;
  gap: var(--re-space-1);
  padding: var(--re-space-4);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  background: var(--re-surface-card);
}
.re-home__closing {
  padding-bottom: var(--re-space-7);
}
@media (max-width: 900px) {
  .re-home__grid,
  .re-home__industries {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .re-home__grid,
  .re-home__grid--two,
  .re-home__industries {
    grid-template-columns: minmax(0, 1fr);
  }
  .re-home__actions .re-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}

/* ---------------------------------------------------------------- evaluate candidates (specs/028) */
/* Columns line up across the header row, each row and its summary line. */
.re-evaluate {
  --ev-gap: var(--re-space-3);
  --ev-handle: 0.75rem;
  --ev-count: 5.5rem;
  --ev-moves: calc(8rem + 3 * var(--re-space-1)); /* pin, ignore, up, down */
}
/* The title and the candidate count share a line, to save height. */
.re-evaluate__heading { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--re-space-3); margin-top: var(--re-space-3); margin-bottom: var(--re-space-1); }
.re-evaluate__title { margin: 0; }
/* Shorter buttons on this dense page (.re-btn's 44px otherwise wins over --compact). */
.re-evaluate .re-btn--compact { min-height: 28px; }
.re-evaluate__section { margin-top: 0; }
.re-evaluate__section > .re-field__help { margin: 0 0 var(--re-space-2); }
.re-evaluate__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--re-space-2);
  margin-bottom: var(--re-space-2);
}
.re-evaluate__toolbar form { display: contents; }
.re-evaluate__toolbar form:last-child .re-btn { margin-left: auto; }
.re-evaluate__toolbar-label { font-size: 0.8125rem; font-weight: 600; }
/* Sort, Options and Show: each a dropdown on a phone (a <details>, no JavaScript); on wider
   screens, where the browser can open a <details> through CSS, its buttons sit inline as before
   and the dropdown's own button and label swap back. */
.re-evaluate__menu { position: relative; }
.re-evaluate__menu > summary { list-style: none; cursor: pointer; }
.re-evaluate__menu > summary::-webkit-details-marker { display: none; }
.re-evaluate__menu-items {
  position: absolute; left: 0; top: calc(100% + 4px); z-index: 20;
  display: flex; flex-direction: column; align-items: stretch; gap: var(--re-space-2);
  min-width: 15rem; padding: var(--re-space-2);
  background: var(--re-surface-card); border: var(--re-border-card);
  border-radius: var(--re-radius-card); box-shadow: var(--re-shadow-float);
}
.re-evaluate__menu-items .re-btn,
.re-evaluate__menu-items button { width: 100%; margin-left: 0 !important; justify-content: flex-start; text-align: left; }
.re-evaluate__menu-label { display: none; }
@supports selector(::details-content) {
  @media (min-width: 641px) {
    .re-evaluate__menu,
    .re-evaluate__menu::details-content { display: contents; content-visibility: visible; }
    .re-evaluate__menu > summary { display: none; }
    .re-evaluate__menu-items { display: contents; }
    .re-evaluate__menu-items .re-btn,
    .re-evaluate__menu-items button { width: auto; text-align: center; }
    .re-evaluate__toolbar form:last-child .re-btn { margin-left: auto !important; }
    .re-evaluate__menu-label { display: inline; }
  }
}
.re-evaluate__columns,
.re-evaluate__row,
.re-evaluate__head { display: grid; gap: var(--ev-gap); align-items: center; }
.re-evaluate__columns {
  grid-template-columns: var(--ev-handle) minmax(0, 1fr) var(--ev-count) var(--ev-count) var(--ev-moves);
  padding: 0 var(--re-space-2) var(--re-space-1);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--re-color-disabled);
}
.re-evaluate__columns > span:nth-child(n + 3) { text-align: right; }
.re-evaluate__columns-label { grid-column: 2; }
.re-evaluate__columns > span:nth-child(3) { grid-column: 3; }
.re-evaluate__columns > span:nth-child(4) { grid-column: 4; }
.re-evaluate__columns > span:nth-child(5) { grid-column: 5; }
.re-evaluate__rows {
  list-style: none;
  margin: 0 0 var(--re-space-3);
  padding: 0;
  display: grid;
  gap: var(--re-space-1);
}
.re-evaluate__row {
  grid-template-columns: var(--ev-handle) minmax(0, 1fr) var(--ev-moves);
  align-items: start;
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  background: var(--re-surface-card);
  padding: var(--re-space-1) var(--re-space-2);
}
.re-evaluate__row > .re-evaluate__handle,
.re-evaluate__row > .re-evaluate__moves { min-height: 2.5rem; display: flex; align-items: center; }
/* Collapsed, a row's drag handle and its pin, ignore and move buttons sit centred beside the
   requirement; open, they stay at the top (not halfway down the candidates). */
.re-evaluate__row:has(> .re-evaluate__details:not([open])) > .re-evaluate__handle,
.re-evaluate__row:has(> .re-evaluate__details:not([open])) > .re-evaluate__moves { align-self: center; }
.re-evaluate__row--pinned {
  border-color: var(--re-color-primary);
  box-shadow: inset 3px 0 0 var(--re-color-primary);
}
.re-evaluate__pin { color: var(--re-color-disabled); }
.re-evaluate__pin[aria-pressed="true"] { color: var(--re-color-link); }
/* Ignored requirements (the opposite of pinned): set aside, so they read as such. */
.re-evaluate__ignore { color: var(--re-color-disabled); }
.re-evaluate__ignore[aria-pressed="true"] { color: var(--re-color-warning); }
.re-evaluate__row--ignored .re-evaluate__label,
.re-evaluate__row--ignored .re-evaluate__counts { opacity: 0.55; }
.re-evaluate__row--ignored .re-evaluate__label { text-decoration: line-through; }
/* Partial matches sit beside the count, smaller. */
.re-evaluate__partial { font-size: 0.6em; font-weight: 500; color: var(--re-color-disabled); }
.re-evaluate__row.is-draggable { cursor: grab; }
.re-evaluate__row.is-dragging { opacity: 0.5; }
.re-evaluate__rows.is-saving { opacity: 0.7; pointer-events: none; }
.re-evaluate__head {
  grid-template-columns: minmax(0, 1fr) var(--ev-count) var(--ev-count);
  min-height: 2.5rem;
  cursor: pointer;
  list-style: none;
}
.re-evaluate__head::-webkit-details-marker { display: none; }
.re-evaluate__handle { color: var(--re-border-card); font-size: 1.25rem; line-height: 1; }
.re-evaluate__row.is-draggable .re-evaluate__handle { color: var(--re-color-text-primary); }
.re-evaluate__label { min-width: 0; overflow-wrap: anywhere; }
.re-evaluate__counts { display: contents; }
.re-evaluate__count { text-align: right; }
.re-evaluate__number { font-size: 1.125rem; font-weight: 700; }
.re-evaluate__count--together .re-evaluate__number { color: var(--re-color-link); }
/* specs/054: while anyone is starred, a third count -- how many of the starred engineers meet it.
   The column is always in the page, hidden while nobody is starred; the layout follows its heading. */
#evaluate-table #starred-heading[hidden], .re-evaluate__count--starred[hidden], #sort-starred[hidden] { display: none; }
#evaluate-table:has(#starred-heading:not([hidden])) .re-evaluate__columns {
  grid-template-columns: var(--ev-handle) minmax(0, 1fr) var(--ev-count) var(--ev-count) var(--ev-count) var(--ev-moves);
}
#evaluate-table:has(#starred-heading:not([hidden])) .re-evaluate__columns > span:nth-child(6) { grid-column: 6; }
#evaluate-table:has(#starred-heading:not([hidden])) .re-evaluate__head { grid-template-columns: minmax(0, 1fr) var(--ev-count) var(--ev-count) var(--ev-count); }
.re-evaluate__count--starred .re-evaluate__number { color: var(--re-color-warning); }
/* Desktop: the column header names the counts; the per-row captions are for screen readers. */
.re-evaluate__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.re-evaluate__moves { gap: var(--re-space-1); justify-content: flex-end; }
.re-evaluate__moves .re-btn--compact { width: 2rem; padding: 0; }
.re-evaluate__moves .re-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.re-evaluate__panel { padding: 0 0 var(--re-space-2); }
.re-evaluate__panel > :first-child { margin-top: var(--re-space-1); }
/* A candidate's name opens their profile popover; it reads as a link. */
.re-evaluate__name {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--re-color-link);
  text-decoration: underline;
  cursor: pointer;
}
.re-evaluate__name:hover { color: var(--re-color-link-hover); }
.re-evaluate__people { list-style: none; padding-left: 0; margin: var(--re-space-1) 0; line-height: 1.4; }
.re-evaluate__people li { padding: 3px var(--re-space-2) 2px 1.75rem; position: relative; border-radius: 4px; }
.re-evaluate__person--all-above {
  background: color-mix(in srgb, var(--re-color-success) 12%, transparent);
  border-left: 3px solid var(--re-color-success);
}
.re-evaluate__mark { position: absolute; left: var(--re-space-2); color: var(--re-color-success); font-weight: 700; }
/* Excluding a candidate: a toggle beside each name in an expanded row; excluded people stay
   listed (struck through) and appear as dismissible pills above the list. */
.re-evaluate__people li { display: flex; align-items: flex-start; gap: var(--re-space-2); }
.re-evaluate__person-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
/* On a phone a supporter is two lines: star, compare, name and Exclude, then the evidence across
   the full width (rather than a narrow column beside the buttons). */
@media (max-width: 640px) {
  .re-evaluate__people li { flex-wrap: wrap; align-items: center; }
  .re-evaluate__people .re-evaluate__person-text { display: contents; }
  .re-evaluate__people .re-evaluate__person-text > strong { flex: 1; min-width: 0; }
  .re-evaluate__people .re-evaluate__dash { display: none; }
  .re-evaluate__people .re-evaluate__evidence { order: 2; flex-basis: 100%; }
  .re-evaluate__people li > :last-child:not(.re-evaluate__person-text) { order: 1; }
}
.re-evaluate__exclude { flex: none; font-size: 0.75rem; min-height: 0; padding: 1px var(--re-space-2); }
.re-evaluate__exclude[aria-pressed="true"] { border-color: var(--re-color-error); color: var(--re-color-error); }
.re-evaluate__person--excluded .re-evaluate__person-text { color: var(--re-color-disabled); }
.re-evaluate__person--excluded .re-evaluate__name { text-decoration: line-through; color: var(--re-color-disabled); }
.re-evaluate__excluded-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--re-color-error);
}
.re-evaluate__excluded {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--re-space-2);
  margin: var(--re-space-2) 0;
}
.re-evaluate__excluded[hidden] { display: none; }
/* The Comparing row is as tall empty as with picks in it (a Clear button), so the first pick
   doesn't move the page. */
.re-evaluate__comparing { min-height: 28px; }
.re-evaluate__pills { display: flex; flex-wrap: wrap; gap: var(--re-space-1); list-style: none; margin: 0; padding: 0; }
.re-evaluate__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--re-space-1);
  padding: 2px 4px 2px var(--re-space-3);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-pill);
  background: var(--re-surface-card);
  font-size: 0.8125rem;
}
.re-evaluate__pill form { display: inline-flex; }
.re-evaluate__pill-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--re-color-text-primary);
  cursor: pointer;
  font-size: 0.75rem;
}
.re-evaluate__pill-remove:hover,
.re-evaluate__pill-remove:focus-visible { background: color-mix(in srgb, var(--re-color-error) 16%, transparent); color: var(--re-color-error); }
@media (max-width: 640px) {
  .re-evaluate__columns,
  .re-evaluate__row > .re-evaluate__handle { display: none; }
  /* The pin and move buttons sit in the row's top corner beside the requirement, so an opened
     requirement's candidates and evidence use the row's full width below them. */
  .re-evaluate__row { grid-template-columns: minmax(0, 1fr); position: relative; }
  .re-evaluate__row > .re-evaluate__moves { position: absolute; top: var(--re-space-2); right: var(--re-space-2); }
  .re-evaluate__head,
  #evaluate-table:has(#starred-heading:not([hidden])) .re-evaluate__head { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-right: var(--ev-moves); }
  .re-evaluate__counts { grid-column: 1; display: flex; flex-wrap: wrap; column-gap: var(--re-space-3); }
  .re-evaluate__count { text-align: left; white-space: nowrap; }
  .re-evaluate__caption { position: static; width: auto; height: auto; margin: 0; clip: auto; font-size: 0.75rem; margin-left: var(--re-space-1); }
  .re-evaluate__panel { padding-left: 0; }
}

/* specs/029: apply with your profile -- what's still missing. */
.re-apply__steps { padding-left: var(--re-space-5, 1.25rem); line-height: 1.8; }
.re-apply__done { color: var(--re-color-disabled); text-decoration: line-through; }
.re-apply__done::marker { color: var(--re-color-success); }

/* specs/030: privacy notes are an info icon beside the field's label (wherever the notice is
   included in a .re-field, it's moved up next to the label), with the note on hover/focus. */
.re-field:has(> .re-notice) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--re-space-1);
}
.re-field:has(> .re-notice) > * { flex: 0 0 100%; order: 3; }
.re-field:has(> .re-notice) > label { flex: 0 1 auto; order: 0; }
.re-field:has(> .re-notice) > .re-notice { flex: 0 0 auto; order: 1; margin-bottom: var(--re-space-2); }
/* A zero-height full-width item: forces the control onto its own line even when it has a
   max-width that would otherwise fit beside the label. */
.re-field:has(> .re-notice)::before { content: ""; flex: 0 0 100%; height: 0; order: 2; }
.re-notice {
  position: relative;
  display: inline-flex;
  color: var(--re-color-warning);
  cursor: help;
  border-radius: 50%;
}
.re-notice:focus-visible { outline: 2px solid var(--re-color-primary); outline-offset: 2px; }
.re-notice__text {
  position: absolute;
  top: calc(100% + 6px);
  left: -8px;
  z-index: 20;
  width: max-content;
  max-width: min(320px, 70vw);
  padding: var(--re-space-2) var(--re-space-3);
  border-radius: 6px;
  background: var(--re-color-text-primary);
  color: var(--re-surface-card);
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.4;
  box-shadow: var(--re-shadow-float);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}
.re-notice:hover .re-notice__text,
.re-notice:focus .re-notice__text { opacity: 1; visibility: visible; }

/* specs/030: a project's evidence in the edit dialog -- each piece with its values, who can
   see it, and Edit / Remove (add and edit open their own dialogs over this one). */
.re-evidence-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--re-space-2);
  margin-top: var(--re-space-4);
}
.re-evidence-heading h4 { margin: 0; }
.re-evidence-list { list-style: none; padding: 0; margin: var(--re-space-2) 0 var(--re-space-4); }
.re-evidence-list__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--re-space-2);
  border-bottom: 1px solid var(--re-border-card);
  padding: var(--re-space-2) 0;
}
.re-evidence-list__main {
  flex: 1 1 12rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow-wrap: anywhere;
}
.re-evidence-list__actions { display: flex; gap: var(--re-space-1); }
.re-evidence-list__actions form { margin: 0; }
[popover].re-panel--narrow { width: min(90vw, 520px); }

/* specs/030: while adding a project, "Who can see this" starts at the default for the chosen
   category -- one picker per default, shown for the matching categories. */
.re-visibility-by-category { display: none; }
.re-project-wizard:has(input[name="category"][value="professional"]:checked)
  .re-visibility-by-category[data-visibility-default="hiring"],
.re-project-wizard:has(input[name="category"][value="military"]:checked)
  .re-visibility-by-category[data-visibility-default="hiring"],
.re-project-wizard:has(input[name="category"][value="personal"]:checked)
  .re-visibility-by-category[data-visibility-default="public"],
.re-project-wizard:has(input[name="category"][value="academic"]:checked)
  .re-visibility-by-category[data-visibility-default="public"] {
  display: block;
}

/* specs/032: the system dashboard's financial section. */
.re-finance-headlines {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--re-space-3);
  margin-bottom: var(--re-space-4);
}
.re-finance-headline h3 { margin: 0; }
.re-finance-headline .re-metric-card__total { margin: var(--re-space-1) 0; }
.re-finance-charts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--re-space-4);
}
.re-finance-headline,
.re-finance-chart { max-width: none; }
.re-finance-chart--wide { grid-column: 1 / -1; }
/* Chart.js sizes a chart to its container when the aspect ratio is free, so the container
   needs a fixed height of its own. */
.re-finance-chart__canvas { position: relative; height: 340px; }
.re-finance-chart__canvas--wide { height: 300px; }
.re-finance-chart .re-table { width: 100%; font-size: 0.875rem; }
.re-finance-chart .re-table td { text-align: right; }

/* specs/033: buttons side by side in a card header (no extra space above). */
.re-form-actions--tight { margin-top: 0; flex-wrap: wrap; gap: var(--re-space-2); }

/* specs/034: a page title with an action beside it (e.g. Companies + Add). */
.re-page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--re-space-3);
}
.re-page-heading h1 { margin-bottom: 0; }

/* specs/034: the expected payroll date only shows for a founder / equity-only role. */
.re-equity:not(:has(input[name="is_equity_only"]:checked)) .re-equity__date { display: none; }

/* specs/034: feature switches. */
.re-switch-list { display: grid; gap: var(--re-space-3); }
.re-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--re-space-3);
}
.re-switch form { display: flex; align-items: center; gap: var(--re-space-2); }
.re-read-only-banner { margin: 0 0 var(--re-space-3); }

/* specs/034: dashboard lists. */
.re-notice-list { list-style: none; padding: 0; margin: var(--re-space-2) 0; display: grid; gap: var(--re-space-1); }
.re-new-jobs {
  list-style: none;
  padding: 0;
  display: grid;
  /* Same column width as .re-project-grid, so it's three across like every other grid. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--re-space-3);
}
.re-new-jobs .re-card { max-width: none; }
/* Row headings in a table body read as ordinary text, not column headings. */
.re-table tbody th { text-transform: none; letter-spacing: normal; font-size: inherit; }

/* specs/035: the mobile menu button (shown only on narrow screens, see the 768px rules). */
.re-titlebar__start { display: flex; align-items: center; gap: var(--re-space-2); }
.re-titlebar__logo { display: inline-flex; flex-shrink: 0; }
.re-titlebar__logo img { display: block; width: auto; height: 32px; }
@media (max-width: 480px) {
  .re-titlebar__logo img { height: 26px; }
  /* Menu, logo, name, light/dark and Sign out share a 360-390px phone without overflowing. */
  .re-titlebar { padding-inline: var(--re-space-4); gap: var(--re-space-3); }
  .re-titlebar__end { gap: var(--re-space-2); }
}
@media (max-width: 380px) {
  .re-titlebar__brand { font-size: 1rem; }
}
.re-nav-toggle {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.re-nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--re-radius-chip);
  color: var(--re-color-nav-text);
  cursor: pointer;
}
.re-nav-burger:hover { background-color: var(--re-surface-nav-item-active); color: var(--re-color-text-on-fill); }
.re-nav-toggle:focus-visible + .re-nav-burger { outline: 2px solid var(--re-color-text-on-fill); outline-offset: 2px; }
.re-nav-burger__close { display: none; }
.re-nav-toggle:checked + .re-nav-burger .re-nav-burger__open { display: none; }
.re-nav-toggle:checked + .re-nav-burger .re-nav-burger__close { display: block; }
@media (max-width: 768px) {
  .re-nav-burger { display: inline-flex; }
}

/* The billing contact section on Invoices (moved from its own page). */
.re-billing-contact { margin-bottom: var(--re-space-6); }

/* specs/036: admin -- add a person to a company. */
.re-add-company {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--re-space-3);
  margin-top: var(--re-space-3);
}
.re-add-company .re-field { margin-bottom: 0; min-width: 14rem; }

/* specs/036: dropdowns and search boxes used inline (outside a .re-field) get the same look. */
.re-switch select,
.re-inline-form select,
.re-inline-form input[type="search"],
.re-inline-form input[type="text"] {
  padding: var(--re-space-1) var(--re-space-3);
  min-height: 36px;
  border: 1px solid var(--re-border-card);
  border-radius: 8px;
  font-family: var(--re-font-sans);
  font-size: 0.9375rem;
  color: var(--re-color-text-primary);
  background-color: var(--re-surface-card);
}
.re-inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-2); }

/* specs/038: company logos on job postings, the jobs board and the dashboard. */
.re-company-logo--xs { width: 40px; height: 40px; border-radius: 8px; }
.re-company-logo--sm { width: 48px; height: 48px; border-radius: 10px; }
.re-company-logo--md { width: 72px; height: 72px; border-radius: 12px; }
.re-company-logo--fit {
  object-fit: contain;
  background-color: var(--re-surface-logo);
  border: 1px solid var(--re-border-card);
  padding: 4px;
}
.re-company-logo--xs.re-company-logo--placeholder svg,
.re-company-logo--sm.re-company-logo--placeholder svg { width: 55%; height: 55%; }
.re-job-card { display: flex; gap: var(--re-space-3); align-items: flex-start; }
.re-job-card__body { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.re-job-heading { display: flex; gap: var(--re-space-4); align-items: center; }
.re-job-heading h1 { margin-bottom: var(--re-space-1); }
@media (max-width: 640px) {
  /* A job posting's header on a phone: logo + title on top, the buttons below. */
  .re-card__header:has(> .re-job-heading) { flex-wrap: wrap; }
  .re-job-heading { gap: var(--re-space-3); }
  .re-job-heading .re-company-logo--md { width: 56px; height: 56px; }
}

/* specs/039: an unclaimed company page's note, on the dark hero card. */
.re-company-hero__note {
  margin: var(--re-space-4) 0 0;
  padding-top: var(--re-space-3);
  border-top: 1px solid var(--re-border-nav-section);
  color: var(--re-color-nav-text);
  font-size: 0.875rem;
}

/* specs/039: the message for engineers leads the page, marked with the brand accent. */
.re-engineer-message {
  border-left: 4px solid var(--re-color-secondary);
}

/* A company page's hero on a phone: the logo, name and "Edit this page" can't all fit on
   one row, so the row wraps (the button drops below), the logo shrinks, and a long
   one-word name may break rather than push the page wider than the screen. */
@media (max-width: 640px) {
  .re-company-hero > .re-card__header {
    flex-wrap: wrap;
  }
  .re-company-hero > .re-card__header > .re-meta-with-icon {
    min-width: 0;
    gap: var(--re-space-3);
  }
  .re-company-hero > .re-card__header > .re-meta-with-icon > div {
    min-width: 0;
  }
  .re-company-hero h1 {
    overflow-wrap: anywhere;
  }
  .re-company-hero .re-company-logo--lg {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
  }
  /* Tighter on a phone: a smaller name and Test pill, and the actions as small pills. */
  .re-company-hero h1 { font-size: 1.75rem; line-height: 1.15; }
  .re-company-hero h1 .re-pill { font-size: 0.75rem; padding: 2px 8px; vertical-align: middle; }
  .re-company-hero .re-form-actions { gap: var(--re-space-1); margin-top: var(--re-space-2); }
  .re-company-hero .re-btn--compact { min-height: 32px; padding: 0 var(--re-space-3); font-size: 0.875rem; border-radius: var(--re-radius-pill); }
  .re-company-hero .re-icon-btn { min-width: 36px; min-height: 36px; }
}

/* The hero's Website and LinkedIn links as small pills that light up on hover. */
.re-company-hero__links a {
  padding: 2px var(--re-space-3);
  border: 1px solid color-mix(in srgb, var(--re-color-link) 40%, transparent);
  border-radius: var(--re-radius-pill);
  font-size: 0.875rem;
  text-decoration: none;
}
.re-company-hero__links a:hover,
.re-company-hero__links a:focus-visible {
  background: color-mix(in srgb, var(--re-color-link) 18%, transparent);
}

/* specs/028 FR-016: a candidate's technical due diligence, opened from their name on the
   Evaluate page. Status colours always sit beside their word, never alone. */
/* The popover: a bar of actions over the framed report, which loads only when it opens. */
[popover].re-tdd-dialog {
  width: min(94vw, 920px);
  height: min(88vh, 1000px);
  max-height: none;
  padding: 0;
  overflow: hidden;
}
.re-tdd-dialog:popover-open { display: flex; flex-direction: column; }
.re-tdd-dialog__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--re-space-2);
  padding: var(--re-space-3) var(--re-space-4);
  border-bottom: 1px solid var(--re-border-card);
}
.re-tdd-dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-2); }
/* The decisions about this candidate -- Shortlist, Compare, Exclude -- are the big buttons; the
   rest of the bar (View profile, Open in new tab, Regenerate, Close) is small. */
.re-tdd-dialog__toggles { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-2); }
.re-tdd-dialog__toggles .re-btn { min-height: 2.5rem; padding: var(--re-space-2) var(--re-space-4); gap: 0.35em; font-size: 0.9375rem; font-weight: 600; }
.re-tdd-dialog__actions > .re-btn, .re-tdd-dialog__actions > form .re-btn { min-height: 0; padding: 2px var(--re-space-2); font-size: 0.75rem; }
.re-tdd-dialog__frame { flex: 1; width: 100%; min-height: 0; border: 0; }
/* The report page (also framed above). */
.re-tdd-page { background: var(--re-surface-card); }
.re-tdd { max-width: 880px; margin: 0 auto; padding: var(--re-space-5); }
.re-tdd section { margin-top: var(--re-space-5); }
.re-tdd__who { min-width: 0; }
.re-tdd__name { margin: var(--re-space-1) 0; font-size: 1.5rem; overflow-wrap: anywhere; }
.re-tdd__summary {
  background: var(--re-surface-card-hover);
  border: 1px solid var(--re-surface-card-selected);
  border-left: 4px solid var(--re-color-primary);
  border-radius: var(--re-radius-card);
  padding: var(--re-space-4);
}
.re-tdd__summary p { margin: 0 0 var(--re-space-3); line-height: 1.6; }
.re-tdd__counts { display: flex; flex-wrap: wrap; gap: var(--re-space-2); list-style: none; margin: 0; padding: 0; }
.re-tdd__count {
  display: inline-flex;
  align-items: baseline;
  gap: var(--re-space-1);
  padding: var(--re-space-1) var(--re-space-3);
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-pill);
  background: var(--re-surface-card);
  font-size: 0.8125rem;
}
.re-tdd__count strong { font-size: 1.125rem; }
/* specs/062: the shortlist's candidate report -- the role, and how to reach the candidate. */
.re-candidate-report { margin-bottom: var(--re-space-4); padding: var(--re-space-4); border: 1px solid var(--re-border-card); border-radius: var(--re-radius-card); background: var(--re-surface-card); }
.re-candidate-report__role { margin: var(--re-space-1) 0 var(--re-space-3); }
.re-candidate-report__contact { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--re-space-2) var(--re-space-4); margin: 0; }
.re-candidate-report__contact dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--re-color-disabled); }
.re-candidate-report__contact dd { margin: 0; overflow-wrap: anywhere; }
.re-pipeline__shortlist li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-2); }
/* specs/059: the report's counts by criticality and status. Numbers take their status colour,
   mixed with the text colour so they read on white; a zero is muted. */
.re-tdd__count-table { width: 100%; max-width: 46rem; border-collapse: collapse; font-size: 0.9375rem; }
.re-tdd__count-table th, .re-tdd__count-table td { padding: var(--re-space-2) var(--re-space-3); border-bottom: 1px solid var(--re-border-card); text-align: center; }
.re-tdd__count-table th[scope="row"], .re-tdd__count-corner { text-align: left; }
.re-tdd__count-corner { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--re-color-disabled); }
.re-tdd__count-table tfoot th, .re-tdd__count-table tfoot td { border-top: 2px solid var(--re-border-card); border-bottom: 0; background: var(--re-surface-page); font-weight: 700; }
.re-tdd__count-cell { font-size: 1.125rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.re-tdd__count-cell--met { color: color-mix(in srgb, var(--re-color-success) 60%, var(--re-color-text-primary)); }
.re-tdd__count-cell--partial { color: var(--re-color-partial-ink); }
.re-tdd__count-cell--no_evidence, .re-tdd__count-cell--not_evidenced { color: color-mix(in srgb, var(--re-color-error) 75%, var(--re-color-text-primary)); }
.re-tdd__count-cell--not_assessed, .re-tdd__count-cell--unresolved, .re-tdd__count-cell--total { color: var(--re-color-text-primary); }
.re-tdd__count-cell--zero { color: var(--re-color-disabled); font-weight: 400; }
@media (max-width: 640px) {
  /* Six columns on a phone: tighter cells, and the status pills may wrap onto two lines. */
  .re-tdd__count-table { font-size: 0.8125rem; }
  .re-tdd__count-table th, .re-tdd__count-table td { padding: var(--re-space-1) 2px; }
  .re-tdd__count-table thead .re-tdd__status, .re-tdd__count-total-pill { white-space: normal; font-size: 0.625rem; padding: 1px 4px; letter-spacing: 0; }
  /* The corner's "Criticality" is still read out; the criticality pills say it visually. */
  .re-tdd__count-corner-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .re-tdd__count-cell { font-size: 1rem; }
  .re-tdd__count-table tfoot th { font-size: 0.6875rem; }
}
.re-tdd__count-total-pill { display: inline-block; padding: 2px var(--re-space-2); border-radius: var(--re-radius-pill); background: var(--re-color-text-primary); color: var(--re-surface-card); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.re-tdd__requirements, .re-tdd__project-evidence { list-style: none; margin: 0; padding: 0; }
.re-tdd__req { padding: var(--re-space-2) 0 var(--re-space-2) var(--re-space-3); border-left: 3px solid var(--re-border-card); }
.re-tdd__req + .re-tdd__req { margin-top: var(--re-space-1); }
/* A report opened from a requirement's row on Evaluate lands on that requirement, briefly lit. */
.re-tdd__req { transition: background-color 0.6s ease; }
.re-tdd__req--focus,
.re-tdd__req:target { background-color: color-mix(in srgb, var(--re-color-primary) 10%, transparent); }
.re-tdd__req--met { border-left-color: var(--re-color-success); }
.re-tdd__req--partial { border-left-color: var(--re-color-partial); }
.re-tdd__req--unresolved { border-left-color: var(--re-color-info); }
.re-tdd__req--not_evidenced, .re-tdd__req--no_evidence, .re-tdd__req--not_assessed { border-left-color: var(--re-color-disabled); }
.re-tdd__req-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--re-space-2); }
.re-tdd__req-label { flex: 1; min-width: 12rem; font-weight: 600; }
.re-tdd__ref {
  display: inline-block;
  min-width: 2.25rem;
  font-family: var(--re-font-label);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--re-color-link);
}
.re-tdd__status {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px var(--re-space-2);
  border-radius: var(--re-radius-pill);
  white-space: nowrap;
}
.re-tdd__status--met { background: color-mix(in srgb, var(--re-color-success) 16%, transparent); color: var(--re-color-success); }
.re-tdd__status--partial { background: color-mix(in srgb, var(--re-color-partial) 28%, transparent); color: var(--re-color-partial-ink); }
.re-tdd__status--unresolved { background: color-mix(in srgb, var(--re-color-info) 16%, transparent); color: var(--re-color-text-primary); }
.re-tdd__status--not_evidenced, .re-tdd__status--no_evidence, .re-tdd__status--not_assessed { background: color-mix(in srgb, var(--re-color-disabled) 18%, transparent); color: var(--re-color-text-primary); }
.re-tdd__evidence { margin: var(--re-space-1) 0 0 calc(2.25rem + var(--re-space-2)); font-size: 0.875rem; line-height: 1.45; }
/* specs/056: the key finding and gap stand out above the narrative -- tinted, labelled, in the
   status colours. Sources line up with the text, as on Compare. */
.re-tdd__callout { margin: var(--re-space-2) 0 0 calc(2.25rem + var(--re-space-2)); padding: var(--re-space-1) var(--re-space-2); border-left: 3px solid; border-radius: 0 var(--re-radius-chip) var(--re-radius-chip) 0; font-size: 0.875rem; line-height: 1.45; color: var(--re-color-text-primary); }
.re-tdd__callout + .re-tdd__callout { margin-top: var(--re-space-1); }
.re-tdd__callout--finding { border-left-color: var(--re-color-success); background: color-mix(in srgb, var(--re-color-success) 10%, transparent); }
.re-tdd__callout--gap { border-left-color: var(--re-color-partial); background: color-mix(in srgb, var(--re-color-partial) 18%, transparent); }
.re-tdd__callout--note { border-left-color: var(--re-color-disabled); background: color-mix(in srgb, var(--re-color-disabled) 10%, transparent); }
.re-tdd__req .re-tdd__sources { margin-left: calc(2.25rem + var(--re-space-2)); }
/* One full-width card per project, stacked: cards side by side left uneven gaps under the shorter one. */
.re-tdd__projects { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--re-space-3); }
.re-tdd__project {
  border: 1px solid var(--re-border-card);
  border-radius: var(--re-radius-card);
  padding: var(--re-space-3);
  scroll-margin-top: var(--re-space-4);
}
.re-tdd__project:target { border-color: var(--re-color-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--re-color-primary) 25%, transparent); }
.re-tdd__project-name { margin: 0 0 var(--re-space-1); font-size: 1rem; }
.re-tdd__project-evidence li { font-size: 0.8125rem; line-height: 1.4; margin-top: var(--re-space-1); }
.re-tdd__project-link { display: inline-block; margin-top: var(--re-space-2); font-size: 0.875rem; }
.re-tdd__questions { margin: 0; padding-left: var(--re-space-5); line-height: 1.5; }
.re-tdd__questions li + li { margin-top: var(--re-space-2); }
@media (max-width: 640px) {
  .re-tdd { padding: var(--re-space-4); }
  [popover].re-tdd-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
  .re-tdd__evidence, .re-tdd__callout, .re-tdd__req .re-tdd__sources { margin-left: 0; }
}

/* specs/028 FR-017: saving candidates to compare side by side. */
.re-evaluate__save,
.re-evaluate__compare { flex: none; font-size: 0.75rem; min-height: 0; padding: 1px var(--re-space-2); }
/* Icon-only star and compare toggles: the same small square, the glyph centred. */
.re-evaluate__save--icon { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.5rem; padding: 0; font-size: 0.875rem; line-height: 1; }
/* Picking to compare shows its own progress (no page overlay -- it changes no count). */
.re-evaluate__compare.htmx-request, form.htmx-request > button { opacity: 0.5; cursor: wait; }
/* A word at the pointer after picking someone to compare ("Added to comparison"), fading away. */
.re-flash-note {
  position: fixed;
  z-index: 1000;
  pointer-events: none;
  padding: 2px var(--re-space-2);
  border-radius: var(--re-radius-pill);
  background: var(--re-color-text-primary);
  color: var(--re-surface-card);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  animation: re-flash-note 1.6s ease forwards;
}
@keyframes re-flash-note {
  0% { opacity: 0; transform: translateY(4px); }
  12% { opacity: 1; transform: none; }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  .re-flash-note { animation-name: re-flash-note-still; }
  @keyframes re-flash-note-still { 0%, 70% { opacity: 1; } 100% { opacity: 0; } }
}
.re-evaluate__save[aria-pressed="true"] { border-color: var(--re-color-warning); color: var(--re-color-text-primary); }
.re-evaluate__save[aria-pressed="true"] span { color: var(--re-color-warning); }
.re-evaluate__pill--saved > span[aria-hidden] { color: var(--re-color-warning); }
.re-evaluate__saved[hidden] { display: none; }
.re-compare__choose { margin: var(--re-space-4) 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--re-space-3); }
.re-compare__choose fieldset { border: 0; margin: 0; padding: 0; }
.re-compare__choices { display: flex; flex-wrap: wrap; gap: var(--re-space-2) var(--re-space-4); margin-top: var(--re-space-1); }
.re-compare__choice { display: inline-flex; align-items: center; gap: var(--re-space-1); }
/* The comparison scrolls inside its own box (sideways on narrow screens; the page never does).
   specs/050 FR-002: the box is at most a window tall and scrolls down too, so the candidates'
   names row (sticky) stays above whatever rows are being read. */
.re-compare__scroll { overflow: auto; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); margin: var(--re-space-4) 0; border: 1px solid var(--re-border-card); border-radius: var(--re-radius-card); background: var(--re-surface-card); }
.re-compare__table thead th { position: sticky; top: 0; z-index: 2; background: var(--re-surface-card); box-shadow: inset 0 -2px 0 var(--re-border-card); }
.re-compare__table thead .re-compare__corner { left: 0; z-index: 3; }
/* View profile, Shortlist and Exclude: small links on one line (specs/050 follow-up). */
.re-compare__links { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: var(--re-space-1) var(--re-space-3); margin-top: var(--re-space-1); font-size: 0.8125rem; font-weight: 400; }
.re-compare__links form { margin: 0; display: inline; }
.re-compare__link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--re-color-link); text-decoration: underline; cursor: pointer; }
.re-compare__link-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.re-compare__link-btn--on { font-weight: 600; }
.re-compare__link-btn--on span[aria-hidden] { color: var(--re-color-warning); }
.re-compare__list { margin: var(--re-space-5) 0 0; }
.re-compare__list ol, .re-compare__excluded { margin: var(--re-space-2) 0; }
.re-compare__excluded { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--re-space-2); }
.re-compare__excluded li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-3); }
.re-compare__excluded form { margin: 0; }
/* specs/050 FR-012: a requirement's sources -- each file once, its pages right beside it. */
.re-tdd__sources { margin: var(--re-space-1) 0 0; font-size: 0.8125rem; color: var(--re-color-disabled); }
.re-tdd__source { white-space: normal; }
/* Fixed layout: the Requirement column has its own width and every candidate gets an equal
   share of the rest, whatever their reports say. Long words (file names) wrap in their cell. */
.re-compare__table { border-collapse: collapse; width: 100%; min-width: calc(10rem + var(--people) * 13rem); font-size: 0.875rem; table-layout: fixed; }
.re-compare__table th, .re-compare__table td { padding: var(--re-space-2) var(--re-space-3); border-bottom: 1px solid var(--re-border-card); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.re-compare__table tbody th { width: 10rem; font-weight: 600; background: var(--re-surface-page); position: sticky; left: 0; z-index: 1; }
.re-compare__corner { width: 10rem; position: sticky; left: 0; z-index: 2; background: var(--re-surface-card); }
.re-compare__person { display: table-cell; min-width: 13rem; }
.re-compare__person > * { display: block; }
.re-compare__name { font-size: 1.0625rem; font-weight: 700; }
.re-compare__counts { display: flex !important; flex-wrap: wrap; gap: var(--re-space-1) var(--re-space-3); margin-top: var(--re-space-1); font-size: 0.75rem; font-weight: 400; }
.re-compare__summary { margin: 0; line-height: 1.5; }
.re-compare__summary-row td { background: var(--re-surface-card-hover); }
.re-compare__cell { border-left: 3px solid var(--re-border-card); }
.re-compare__cell.re-tdd__req--met { border-left-color: var(--re-color-success); }
.re-compare__cell.re-tdd__req--partial { border-left-color: var(--re-color-partial); }
.re-compare__cell.re-tdd__req--unresolved { border-left-color: var(--re-color-info); }
.re-compare__cell.re-tdd__req--not_evidenced, .re-compare__cell.re-tdd__req--no_evidence, .re-compare__cell.re-tdd__req--not_assessed { border-left-color: var(--re-color-disabled); }
.re-compare__cell p { margin: var(--re-space-1) 0 0; line-height: 1.45; }
.re-compare__cell .re-tdd__callout { margin-left: 0; font-size: 0.8125rem; }
.re-compare { padding: var(--re-space-5); }
@media (max-width: 640px) {
  .re-compare { padding: var(--re-space-4); }
  .re-compare__table { min-width: calc(7rem + var(--people) * 15rem); }
  .re-compare__table tbody th, .re-compare__corner { width: 7rem; font-size: 0.8125rem; }
}
/* Alternating rows (and the row under the pointer) so the eye can follow a requirement across
   every candidate. The sticky requirement column takes the same band; it must stay opaque. */
.re-compare__table tbody tr:not(.re-compare__summary-row) > * { background: var(--re-surface-card); }
.re-compare__table tbody tr:not(.re-compare__summary-row):nth-child(even) > * {
  background: color-mix(in srgb, var(--re-border-card) 40%, var(--re-surface-card));
}
.re-compare__table tbody tr:not(.re-compare__summary-row):hover > * {
  background: var(--re-surface-card-hover);
}

/* specs/028 FR-018: requirement criticality. Colour always sits beside its word. */
.re-crit {
  display: inline-block;
  padding: 0 var(--re-space-2);
  border: 1px solid currentColor;
  border-radius: var(--re-radius-pill);
  font-family: var(--re-font-label);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.02em;
  vertical-align: 0.1em;
  white-space: nowrap;
}
.re-crit--gated { color: var(--re-surface-page); border-color: var(--re-color-error); background: var(--re-color-error); } /* specs/072: pass/fail */
.re-crit--critical { color: var(--re-color-error); background: color-mix(in srgb, var(--re-color-error) 10%, transparent); }
.re-crit--must { color: var(--re-color-text-primary); border-color: var(--re-color-warning); background: color-mix(in srgb, var(--re-color-warning) 18%, transparent); }
.re-crit--should { color: var(--re-color-link); background: color-mix(in srgb, var(--re-color-primary) 8%, transparent); }
.re-crit--nice { color: var(--re-color-text-primary); border-color: var(--re-border-card); background: var(--re-surface-page); }
/* The filter: one toggle per level, styled as its pill. */
.re-evaluate__crit-filter { gap: var(--re-space-2); }
.re-evaluate__crit-toggle { cursor: pointer; font-size: 0.8125rem; padding: var(--re-space-1) var(--re-space-3); vertical-align: middle; }
.re-evaluate__crit-toggle[aria-pressed="false"] { filter: grayscale(1); opacity: 0.5; }
.re-evaluate__crit-all { border: 1px solid var(--re-border-card); border-radius: var(--re-radius-pill); background: var(--re-surface-card); color: var(--re-color-text-primary); font-family: var(--re-font-label); font-weight: 700; }
.re-evaluate__crit-all[aria-pressed="true"] { border-color: var(--re-color-primary); color: var(--re-color-link); filter: none; opacity: 1; }
.re-evaluate__saved-actions { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-2); }
/* While htmx updates the requirements in place: a clear layer over the page takes every click
   (so nothing is pressed twice or mid-update) and shows the wait cursor; the "Updating..." pill
   fades in only if it takes a moment. htmx puts .htmx-request on it (hx-indicator). */
.re-evaluate__busy {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: var(--re-space-6);
  visibility: hidden;
  pointer-events: none;
}
.re-evaluate__busy.htmx-request {
  visibility: visible;
  pointer-events: auto;
  cursor: wait;
  background: color-mix(in srgb, var(--re-surface-page) 30%, transparent);
  transition: background 150ms ease-in 150ms;
}
.re-evaluate__busy-pill {
  padding: var(--re-space-2) var(--re-space-4);
  border-radius: var(--re-radius-pill);
  background: var(--re-color-primary);
  color: var(--re-color-text-on-fill);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: var(--re-shadow-float);
  opacity: 0;
}
.re-evaluate__busy.htmx-request .re-evaluate__busy-pill { opacity: 1; transition: opacity 150ms ease-in 150ms; }
/* A report popover sits above any overlay (the top layer): while its own Save/Exclude is
   saving (.htmx-request on that button), it takes no clicks and shows the wait cursor too. */
.re-tdd-dialog:has(.htmx-request) { cursor: wait; }
.re-tdd-dialog:has(.htmx-request) > * { pointer-events: none; }
/* Highlighted only by counting a partial match somewhere above (or here). */
.re-evaluate__person--via-partial {
  background: color-mix(in srgb, var(--re-color-success) 6%, transparent);
  border-left-style: dashed;
}

/* specs/041: a role's own due-diligence reports -- progress while they're prepared. */
.re-evaluate__progress { display: flex; align-items: center; gap: var(--re-space-2); margin: var(--re-space-2) 0; }
.re-evaluate__progress:empty { display: none; }
.re-evaluate__progress--running {
  padding: var(--re-space-2) var(--re-space-3);
  border: 1px solid var(--re-surface-card-selected);
  border-left: 4px solid var(--re-color-primary);
  border-radius: var(--re-radius-card);
  background: var(--re-surface-card-hover);
}
.re-evaluate__spinner {
  flex: none;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--re-surface-card-selected);
  border-top-color: var(--re-color-primary);
  border-radius: 50%;
  animation: re-spin 0.9s linear infinite;
}
@keyframes re-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .re-evaluate__spinner { animation: none; } }
.re-evaluate__report-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--re-space-2); margin: var(--re-space-2) 0; }
.re-evaluate__unavailable { margin-top: var(--re-space-5); }

/* specs/042: the requirements builder. */
.re-reqb__source-grid { display: grid; gap: var(--re-space-4); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.re-reqb__source-title { margin: 0 0 var(--re-space-2); font-size: 1rem; }
.re-reqb__description { max-height: 16rem; overflow: auto; font-size: 0.875rem; }
.re-reqb__files { list-style: none; margin: var(--re-space-2) 0; padding: 0; display: grid; gap: var(--re-space-2); }
.re-reqb__files li { display: flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-2); }
.re-reqb__file-name { flex: 1 1 10rem; min-width: 0; overflow-wrap: anywhere; }
.re-reqb__draft { display: flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-3); margin-top: var(--re-space-4); }
.re-reqb__heading-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--re-space-2); }
.re-reqb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--re-space-2); }
/* Full width (cards are capped at 380px elsewhere): requirement text and evidence read best wide. */
.re-reqb__item { display: grid; gap: var(--re-space-2); max-width: none; }
.re-reqb__sources .re-card { max-width: none; }
.re-reqb__item p { margin: 0; }
.re-reqb__row { display: flex; align-items: flex-start; gap: var(--re-space-3); }
.re-reqb__body { flex: 1 1 auto; min-width: 0; display: grid; gap: var(--re-space-1); }
.re-reqb__code { flex: none; min-width: 2.5rem; font-family: var(--re-font-label); font-weight: 700; color: var(--re-color-disabled); }
.re-reqb__text { font-weight: 600; overflow-wrap: anywhere; }
.re-reqb__evidence { font-size: 0.875rem; overflow-wrap: anywhere; }
.re-reqb__label { font-weight: 600; }
.re-reqb__refs { overflow-wrap: anywhere; }
.re-reqb__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--re-space-2); }
.re-reqb__actions > form { display: inline-flex; flex-wrap: wrap; gap: var(--re-space-2); }
/* Edit sits on the button row; opened, its form takes the full width below. */
.re-reqb__edit { flex: 0 0 auto; }
.re-reqb__edit[open] { flex: 1 1 100%; }
.re-reqb__edit > summary { list-style: none; display: inline-flex; align-items: center; cursor: pointer; min-height: 44px; box-sizing: border-box; }
#suggestions .re-reqb__item + .re-reqb__item { margin-top: var(--re-space-3); }
.re-reqb__edit > summary::-webkit-details-marker { display: none; }
.re-reqb__edit[open] > summary { margin-bottom: var(--re-space-2); }
.re-reqb__edit-form { display: grid; gap: var(--re-space-2); max-width: 48rem; }
.re-reqb__crit { flex: none; }
.re-reqb__crit-select { font-size: 0.75rem; padding: var(--re-space-1) var(--re-space-2); cursor: pointer; }
.re-reqb__inline-heading { display: inline; font-size: 1.125rem; }
.re-reqb__add { margin-top: var(--re-space-3); }
@media (max-width: 640px) {
  .re-reqb__row { flex-wrap: wrap; }
  .re-reqb__crit { flex: 1 1 100%; }
}

/* specs/043: the audit trail. */
.re-audit__filters { display: grid; gap: var(--re-space-3); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); align-items: end; margin-bottom: var(--re-space-4); }
.re-audit__filter-actions { display: flex; gap: var(--re-space-2); }
.re-audit__mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.8125rem; overflow-wrap: anywhere; }
.re-audit__facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--re-space-1) var(--re-space-4); margin: var(--re-space-4) 0; }
.re-audit__facts dt { font-weight: 600; }
.re-audit__facts dd { margin: 0; overflow-wrap: anywhere; }
.re-audit__change { display: grid; gap: var(--re-space-3); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.re-audit__pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.8125rem; padding: var(--re-space-3); border: 1px solid var(--re-border-card); border-radius: var(--re-radius-card); background: var(--re-surface-card); }
.re-audit__prompt { max-height: none; }
.re-audit__pages { display: flex; gap: var(--re-space-3); align-items: center; }
@media (max-width: 640px) { .re-audit__facts { grid-template-columns: 1fr; } }

/* System dashboard: products and credits -- full-width cards, one above the other. */
.re-products { display: grid; gap: var(--re-space-4); }
@media (max-width: 640px) {
  .re-products__card { padding: var(--re-space-3); }
  .re-products__table th, .re-products__table td { padding: var(--re-space-2); font-size: 0.875rem; }
  .re-products__table th[scope="row"] { min-width: 0; font-size: 0.875rem; }
  .re-products__table thead th { font-size: 0.6875rem; letter-spacing: 0; }
}
.re-products__card { max-width: none; min-width: 0; }
.re-products__table th[scope="row"] { white-space: normal; min-width: 10rem; text-transform: none; letter-spacing: 0; font-size: 0.9375rem; color: var(--re-color-text-primary); }
.re-products__table td, .re-products__table thead th:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }

/* Jobs board: roles you apply for on RealEngineers stand out (and are listed first). */
.re-job-card--direct { border-left: 4px solid var(--re-color-primary); }
.re-job-card__direct-pill { background: color-mix(in srgb, var(--re-color-primary) 12%, transparent); color: var(--re-color-link); font-weight: 600; }

/* The build under the brand: small and quiet -- for support, not for reading. */
.re-titlebar__brand-block { display: inline-flex; flex-direction: column; line-height: 1.15; }
.re-titlebar__build { font-size: 0.625rem; letter-spacing: 0.02em; color: var(--re-color-text-on-fill); opacity: 0.55; font-variant-numeric: tabular-nums; }

/* specs/067: the light/dark toggle in the title bar -- the button for the other theme. */
.re-theme-toggle { display: inline-flex; margin: 0; }
.re-theme-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--re-border-nav-section);
  border-radius: var(--re-radius-pill);
  background: transparent;
  color: var(--re-color-nav-text);
  cursor: pointer;
}
.re-theme-toggle__btn:hover { background-color: var(--re-surface-nav-item-active); color: var(--re-color-text-on-fill); }
.re-theme-toggle__btn:focus-visible { outline: 2px solid var(--re-color-text-on-fill); outline-offset: 2px; }
.re-theme-toggle__to-light { display: none; }
:root[data-theme="dark"] .re-theme-toggle__to-dark { display: none; }
:root[data-theme="dark"] .re-theme-toggle__to-light { display: inline-flex; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .re-theme-toggle__to-dark { display: none; }
  :root:not([data-theme="light"]) .re-theme-toggle__to-light { display: inline-flex; }
}

/* A company logo beside its name (directory cards, the company editor) gets room to breathe. */
.re-meta-with-icon:has(> .re-company-logo) { gap: var(--re-space-3); }

/* specs/045: viewing as someone -- unmissable, with the way out right there. */
/* specs/054: acting as someone else (viewing as a person, administering a company) -- a yellow
   box in the header with the button to stop. On narrow screens only the who and the button. */
.re-access-box {
  display: flex;
  align-items: center;
  gap: var(--re-space-3);
  min-width: 0;
  margin: 0 auto;
  padding: var(--re-space-1) var(--re-space-1) var(--re-space-1) var(--re-space-3);
  border-radius: var(--re-radius-card);
  background: var(--re-color-caution-fill);
  color: var(--re-color-caution-ink);
  font-size: 0.8125rem;
  line-height: 1.3;
}
.re-access-box form { margin: 0; flex: none; }
.re-access-box__text { min-width: 0; }
.re-access-box__stop {
  padding: var(--re-space-1) var(--re-space-3);
  border: 1px solid var(--re-color-caution-ink);
  border-radius: var(--re-radius-card);
  background: transparent;
  color: var(--re-color-caution-ink);
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.re-access-box__stop:hover, .re-access-box__stop:focus-visible { background: var(--re-color-caution-ink); color: var(--re-color-caution-fill); }
@media (max-width: 900px) {
  .re-titlebar:has(.re-access-box) { flex-wrap: wrap; row-gap: var(--re-space-2); }
  .re-access-box { order: 3; flex: 1 1 100%; justify-content: space-between; margin: 0; }
  .re-access-box__detail { display: none; }
}

/* specs/046: a project description keeps its line breaks (imported ones are one per skill). */
.re-card__summary--lines { white-space: pre-line; }
.re-project-card__review { margin: var(--re-space-1) 0 var(--re-space-2); }

/* specs/047: passages quoted from a candidate's files, per requirement. */
.re-evidence__requirements { list-style: none; padding: 0; display: grid; gap: var(--re-space-3); }
.re-evidence__requirement { max-width: none; }
.re-evidence__requirement-text { font-size: 1rem; display: flex; flex-wrap: wrap; gap: var(--re-space-2); align-items: baseline; }
.re-evidence__passage { margin: var(--re-space-2) 0 0; padding-left: var(--re-space-3); border-left: 3px solid var(--re-border-card); }
.re-evidence__passage blockquote { margin: 0; }

/* specs/053: a role's Pipeline page -- the title and status on one line, then the role's steps
   left to right (posting, requirements, evaluate), stacking on narrow screens. */
.re-pipeline__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-2) var(--re-space-3); }
.re-pipeline__title h1 { margin: 0; }
.re-pipeline__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--re-space-4); margin: var(--re-space-5) 0; }
.re-pipeline__step { max-width: none; display: flex; flex-direction: column; }
.re-pipeline__step > :last-child { margin-top: auto; margin-bottom: 0; }
.re-pipeline__step-title { margin: 0 0 var(--re-space-2); font-size: 1.125rem; }
@media (max-width: 768px) {
  .re-pipeline__steps { grid-template-columns: 1fr; }
}
.re-pipeline__section-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--re-space-3); }
.re-pipeline__section-head h2 { margin: 0; }
/* Sortable table headers: the header is a link that sorts by its column. */
.re-table__sort { color: inherit; text-decoration: none; }
.re-table__sort:hover, .re-table__sort:focus-visible { text-decoration: underline; }

/* specs/054: a circled ? beside a pipeline step's heading; it opens that step's help popover. */
.re-help-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: var(--re-space-1);
  padding: 0;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: var(--re-color-link);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}
.re-help-link:hover, .re-help-link:focus-visible { background: var(--re-color-primary); color: var(--re-color-text-on-fill); }
.re-help-popover { width: min(40rem, calc(100vw - 2rem)); max-height: min(80vh, 48rem); overflow: auto; }
.re-help-popover__body { line-height: 1.55; }
.re-help-popover__actions { display: flex; align-items: center; justify-content: space-between; gap: var(--re-space-3); margin-top: var(--re-space-3); }
/* Each step's help -- in its popover and on the full page. */
.re-help__title { margin: 0 0 var(--re-space-2); font-size: 1.25rem; }
.re-help__subtitle { margin: var(--re-space-4) 0 var(--re-space-1); font-size: 1rem; }
.re-help ul, .re-help-popover ul { padding-left: var(--re-space-5); }
.re-help ul li, .re-help-popover ul li { margin-bottom: var(--re-space-1); }
/* The pipeline help page. */
.re-help__lead { max-width: 70ch; font-size: 1.0625rem; line-height: 1.55; }
.re-help__steps { max-width: 70ch; padding-left: var(--re-space-5); line-height: 1.55; }
.re-help__steps > li { margin-bottom: var(--re-space-6); }
.re-help__steps section { scroll-margin-top: var(--re-space-5); }
.re-pipeline__inline-form { margin: 0; }
/* specs/054 follow-up: compare picks -- the toggle beside each star, and the add button on a
   shortlist pill. Picked is a solid primary fill -- as unmistakable as a starred star (which
   keeps the warning colour); the thin arrows alone didn't show it. */
.re-evaluate__compare[aria-pressed="true"] {
  border-color: var(--re-color-primary);
  background-color: var(--re-color-primary);
  color: var(--re-color-text-on-fill);
  font-weight: 700;
}
.re-evaluate__compare[aria-pressed="true"]:hover,
.re-evaluate__compare[aria-pressed="true"]:focus-visible {
  background-color: var(--re-color-primary-hover);
  border-color: var(--re-color-primary-hover);
}
.re-evaluate__pills form { display: inline; margin: 0; }
.re-evaluate__pill-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--re-color-link);
  font: inherit;
  cursor: pointer;
}
.re-evaluate__pill-add:hover,
.re-evaluate__pill-add:focus-visible { background: color-mix(in srgb, var(--re-color-primary) 16%, transparent); }

/* specs/20261022-134243-portfolio-import: an imported source file, line by line. */
.re-source-lines th {
  width: 1%;
  text-align: right;
  white-space: nowrap;
  vertical-align: top;
}
.re-source-lines th a {
  color: inherit;
  text-decoration: none;
}
.re-source-lines td {
  padding-top: 0;
  padding-bottom: 0;
}
.re-source-lines pre {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--re-font-mono);
  font-size: 0.875rem;
}

/* specs/042: a role's accepted requirements on its page, in the team's order. */
.re-requirements-summary {
  margin: 0 0 var(--re-space-3);
  padding-left: 1.5rem;
  display: grid;
  gap: var(--re-space-1);
}
.re-requirements-summary li { line-height: 1.4; }
.re-requirements-summary .re-crit { margin-right: var(--re-space-1); vertical-align: 1px; }

/* specs/068: a secondary navigation -- the System Dashboard's sections. Scrolls sideways
   rather than wrapping on a phone. */
.re-subnav {
  display: flex;
  gap: var(--re-space-1);
  margin: 0 0 var(--re-space-5);
  border-bottom: 1px solid var(--re-border-card);
  overflow-x: auto; /* narrow screens scroll the tabs sideways */
  overflow-y: hidden; /* the tabs overlap the border by 1px; that's not something to scroll */
}
.re-subnav a {
  padding: var(--re-space-2) var(--re-space-3);
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  color: var(--re-color-disabled);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.re-subnav a:hover { color: var(--re-color-text-primary); }
.re-subnav a:focus-visible { outline: var(--re-border-focus); outline-offset: -2px; }
.re-subnav a[aria-current] { color: var(--re-color-link); border-bottom-color: var(--re-color-primary); }
/* The second row: the pages in the chosen theme, as lighter pills. */
.re-subnav--pages { border-bottom: none; margin-top: calc(-1 * var(--re-space-3)); }
.re-subnav--pages a {
  padding: var(--re-space-1) var(--re-space-3);
  border: none;
  margin: 0;
  border-radius: var(--re-radius-pill);
  font-weight: 500;
}
.re-subnav--pages a[aria-current] { background: var(--re-surface-card-selected); }
/* specs/082: an RFx's tabs, under its status card -- the same underlined tabs as My Company and
   Vendor Services' capabilities, with room above them. */
.re-subnav--section { margin: var(--re-space-5) 0 var(--re-space-5); }
/* specs/086: a tab not available yet (a new project's, until it's saved). */
.re-subnav__tab--disabled {
  padding: var(--re-space-2) var(--re-space-3);
  color: var(--re-color-disabled);
  opacity: 0.6;
  font-weight: 600;
  white-space: nowrap;
  cursor: not-allowed;
}

/* specs/068: the Engagement page. */
.re-engagement__periods { display: flex; gap: var(--re-space-2); flex-wrap: wrap; margin-bottom: var(--re-space-4); }
.re-engagement__periods a[aria-current="page"] { background: var(--re-surface-card-selected); }
.re-engagement__grid { display: grid; gap: var(--re-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* The page-views table and its chart: wide enough for the table's four columns. */
.re-engagement__grid--wide { grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); }
/* Cards here fill their column (cards elsewhere stop at 380px). */
.re-engagement__grid > .re-card { max-width: none; min-width: 0; }
.re-engagement__chart { position: relative; height: 260px; }
.re-table td.re-num, .re-table th.re-num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
  /* Four columns on a phone: tighter cells, and the card's own padding trimmed. */
  .re-engagement__grid > .re-card { padding: var(--re-space-3); }
  .re-engagement__grid .re-table th,
  .re-engagement__grid .re-table td { padding-inline: var(--re-space-2); }
  .re-engagement__grid .re-table th[scope="row"] { white-space: normal; }
  .re-engagement__grid .re-table th[scope="row"] .re-card__meta { display: block; }
}

/* specs/071: the vendor workspace -- lists of documents, certificates, projects and engineers,
   and validity flags (outlined; the word, not just the colour, says it). */
.re-vendor-list {
  list-style: none;
  margin: 0 0 var(--re-space-3);
  padding: 0;
}
.re-vendor-list__item {
  padding: var(--re-space-2) 0;
  border-bottom: 1px solid var(--re-border-card);
}
.re-vendor-dl dt {
  font-weight: 600;
}
.re-vendor-dl dd {
  margin: 0 0 var(--re-space-2);
}
.re-flag {
  display: inline-block;
  margin-left: var(--re-space-1);
  padding: 0 var(--re-space-2);
  border: 1px solid var(--re-border-card);
  border-radius: 999px;
  font-size: 0.85em;
}
.re-flag--expired {
  border-color: var(--re-color-error);
  color: var(--re-color-error);
}
.re-flag--expiring {
  border-color: var(--re-color-warning);
  color: var(--re-color-warning);
}

/* specs/081 + 082: Vendor Services' one form -- capabilities, engagement models and contract types
   in tabs (static/js/tabs.js; without it the panels follow one another), and Save kept in view at
   the bottom while the form scrolls. */
.re-tabs__list {
  display: flex;
  gap: var(--re-space-1);
  margin-bottom: var(--re-space-3);
  border-bottom: 1px solid var(--re-border-card);
  overflow-x: auto;
  overflow-y: hidden;
}
.re-tabs__list [role="tab"] {
  padding: var(--re-space-2) var(--re-space-3);
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--re-color-disabled);
  font: inherit;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.re-tabs__list [role="tab"]:hover { color: var(--re-color-text-primary); }
.re-tabs__list [role="tab"]:focus-visible { outline: var(--re-border-focus); outline-offset: -2px; }
.re-tabs__list [role="tab"][aria-selected="true"] {
  color: var(--re-color-link);
  border-bottom-color: var(--re-color-primary);
}
.re-form-actions--sticky {
  position: sticky;
  bottom: 0;
  z-index: 1;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--re-space-3) 0;
  background: var(--re-surface-page);
  border-top: 1px solid var(--re-border-card);
}

/* A bulleted list capped on the page, the rest in a "More" popover (companies/_capped_list.html). */
.re-capped-list {
  margin: 0 0 var(--re-space-2);
  padding-left: var(--re-space-5);
  list-style: disc;
}

.re-capped-list li {
  overflow-wrap: anywhere;
}

/* A page title with an action beside it (e.g. Your company -- name, View published page). */
.re-page-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--re-space-3) var(--re-space-4);
}

.re-page-title h1 {
  margin: 0;
}

/* specs/088: the star that adds a company, job or challenge to your dashboard -- top right of its
   card on the public lists; and the dashboard's small cards of what you starred. */
.re-card:has(> .re-dashboard-star) { position: relative; padding-right: calc(var(--re-space-4) + 2rem); }
.re-card > .re-dashboard-star { position: absolute; top: var(--re-space-2); right: var(--re-space-2); }
.re-dashboard-star { margin: 0; }
.re-dashboard-star__btn {
  background: none;
  border: none;
  padding: var(--re-space-1);
  font-size: 1.35rem;
  line-height: 1;
  color: var(--re-color-disabled);
  cursor: pointer;
}
.re-dashboard-star__btn:hover { color: var(--re-color-link); }
.re-dashboard-star__btn[aria-pressed="true"] { color: var(--re-color-warning); }
.re-dashboard-star__btn:focus-visible { outline: var(--re-border-focus); outline-offset: 2px; }
.re-mini-grid {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--re-space-4);
  display: grid;
  gap: var(--re-space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.re-card--mini {
  display: flex;
  gap: var(--re-space-2);
  align-items: flex-start;
  padding: var(--re-space-3);
  max-width: none;
}
.re-card--mini .re-dashboard-star { margin-left: auto; }
/* specs/079: the compact job and challenge cards (dashboard, home page). */
.re-job-card--compact,
.re-challenge-card--compact,
.re-company-card--compact { padding: var(--re-space-3); max-width: none; height: 100%; }
.re-job-card--compact .re-card__title,
.re-challenge-card--compact .re-card__title,
.re-company-card--compact .re-card__title { font-size: 1rem; margin: 0; }
.re-job-card--compact .re-card__meta,
.re-challenge-card--compact .re-card__meta,
.re-company-card--compact .re-card__meta { margin: 0; }
/* On the home page they sit inside the preview's own card: no second border. */
.re-home__items .re-card { padding: 0; border: none; box-shadow: none; background: none; }
.re-card--mini__body { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.re-card--mini .re-card__title { font-size: 1rem; }
.re-card--mini .re-card__meta { margin: 0; }