.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 120px;
  height: 48px;
  padding: 8px 16px;
  border: 2px solid var(--accent-base);
  border-radius: 28px;
  background: transparent;
  color: var(--accent-base);
  font: 400 15px/1.5 var(--font-family-base);
  white-space: nowrap;
  cursor: pointer;
}

@media (min-width: 768px) {
  .cta {
    height: 56px;
    padding: 10px 16px;
    gap: 10px;
    font-size: 16px;
  }
}

.cta:hover:not(:disabled),
.cta:active:not(:disabled) {
  color: var(--cta-text);
  font-weight: 700;
  box-shadow: var(--shadow-cta);
}

.cta:hover:not(:disabled) {
  background: var(--accent-base);
}

.cta:active:not(:disabled) {
  background: var(--accent-deep);
}

.cta:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

.cta:disabled {
  color: color-mix(in srgb, var(--accent-base) 40%, transparent);
  cursor: not-allowed;
}

.cta__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transform: rotate(90deg);
}

.cta__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Reversed direction (e.g. an expanded Show more/less toggle) */
.cta__icon--reversed {
  transform: rotate(-90deg);
}

/* Tertiary — lower-emphasis variant of the same CTA primitive (e.g. expand/collapse actions) */
.cta--tertiary {
  min-width: 0;
  height: auto;
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  background: var(--surface-alt);
  box-shadow: var(--shadow-cta);
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .cta--tertiary {
    padding: 12px 16px;
  }
}

.cta--tertiary:hover:not(:disabled),
.cta--tertiary:active:not(:disabled) {
  background: var(--surface-alt);
}

.cta--tertiary:hover:not(:disabled) {
  color: var(--accent-base);
}

.cta--tertiary:active:not(:disabled) {
  color: var(--accent-deep);
}

.cta--tertiary:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  color: var(--accent-base);
  font-weight: 400;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--accent-base);
  font: var(--text-body-mobile);
  text-decoration: none;
  cursor: pointer;
}

.text-link__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transform: rotate(90deg);
}

.text-link__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.text-link:hover:not(:disabled):not([aria-disabled="true"]),
.text-link:active:not(:disabled):not([aria-disabled="true"]) {
  font: var(--text-body-bold-mobile);
}

.text-link:active:not(:disabled):not([aria-disabled="true"]) {
  color: var(--accent-deep);
}

.text-link:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}

.text-link:disabled,
.text-link[aria-disabled="true"] {
  color: color-mix(in srgb, var(--accent-base) 40%, transparent);
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .text-link {
    gap: 10px;
    padding: 12px 16px;
    font: var(--text-body-desktop);
  }

  .text-link:hover:not(:disabled):not([aria-disabled="true"]),
  .text-link:active:not(:disabled):not([aria-disabled="true"]) {
    font: var(--text-body-bold-desktop);
  }
}

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  background: transparent;
  border: none;
  color: var(--text-primary);
  font: var(--text-body-mobile);
  text-decoration: none;
  cursor: pointer;
}

.nav-item__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transform: rotate(90deg);
}

.nav-item__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.nav-item:hover:not(:disabled):not([aria-disabled="true"]),
.nav-item:focus-visible,
.nav-item:disabled,
.nav-item[aria-disabled="true"],
.nav-item[aria-current="page"] {
  font: var(--text-body-bold-mobile);
}

.nav-item:hover:not(:disabled):not([aria-disabled="true"]),
.nav-item:focus-visible {
  color: var(--accent-base);
}

.nav-item:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 0;
}

.nav-item:disabled,
.nav-item[aria-disabled="true"] {
  color: color-mix(in srgb, var(--accent-base) 40%, transparent);
  cursor: not-allowed;
}

/* Persistent "current section" indicator — not a mouse :active press state */
.nav-item[aria-current="page"] {
  color: var(--accent-deep);
}

@media (min-width: 768px) {
  .nav-item {
    gap: 10px;
    padding: 12px 16px;
    font: var(--text-body-desktop);
  }

  .nav-item:hover:not(:disabled):not([aria-disabled="true"]),
  .nav-item:focus-visible,
  .nav-item:disabled,
  .nav-item[aria-disabled="true"],
  .nav-item[aria-current="page"] {
    font: var(--text-body-bold-desktop);
  }
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  font: var(--text-caption-bold-mobile);
  white-space: nowrap;
}

.tag__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.tag__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.tag--strong { background: var(--fit-strong); color: var(--fit-text); }
.tag--medium { background: var(--fit-medium); color: var(--fit-text); }
.tag--weak { background: var(--fit-weak); color: var(--fit-text); }
.tag--ai { background: var(--accent-base); color: var(--ai-text); gap: 4px; }
.tag--neutral { background: var(--surface-alt); color: var(--text-primary); }

@media (min-width: 768px) {
  .tag {
    gap: 10px;
    padding: 12px 16px;
    font: var(--text-caption-bold-desktop);
  }

  .tag--ai {
    gap: 8px;
  }

  .tag__icon {
    width: 20px;
    height: 20px;
  }
}

.circle-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  color: var(--text-primary);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
}

.circle-cta svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Optional: when a Circle CTA's icon is a genuinely different vector per breakpoint (not just
   the same path scaled), render both and toggle visibility here — purely additive, doesn't
   change the sizing rule above or any other established Circle CTA behavior. */
.circle-cta__icon--tablet-up {
  display: none;
}

@media (min-width: 768px) {
  .circle-cta__icon--mobile-only {
    display: none;
  }

  .circle-cta__icon--tablet-up {
    display: block;
  }
}

.circle-cta:hover:not(:disabled) {
  color: var(--accent-base);
}

.circle-cta:active:not(:disabled) {
  color: var(--accent-deep);
}

.circle-cta:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
  color: var(--accent-base);
}

.circle-cta:disabled {
  color: color-mix(in srgb, var(--accent-base) 40%, transparent);
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .circle-cta {
    width: 56px;
    height: 56px;
  }

  .circle-cta svg {
    width: 24px;
    height: 24px;
  }
}

/* Module / Search Prompt — composition only; visuals owned by Tag, Text Area, CTA, Text Link */
.search-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.search-prompt--input {
  gap: 32px;
}

.search-prompt__field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.search-prompt__field .text-area {
  width: 100%;
}

.search-prompt__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

@media (min-width: 1440px) {
  .search-prompt__action {
    gap: 32px;
  }
}

.search-prompt__hint {
  width: 100%;
  margin: 0;
  color: var(--text-primary);
  font: var(--text-body-mobile);
}

@media (min-width: 768px) {
  .search-prompt__hint {
    font: var(--text-body-desktop);
  }
}

/* Module / Lead Card — composition + its own Show more/less state; visuals owned by Tag, CTA, Text Link.
   Intentionally separate from Module / Search Parameter's card — no shared abstraction between them. */
.lead-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  padding: 24px 16px;
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .lead-card {
    padding: 32px;
  }
}

.lead-card__role,
.lead-card__post {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  color: var(--text-primary);
}

@media (min-width: 768px) {
  .lead-card__role,
  .lead-card__post {
    gap: 16px;
  }
}

.lead-card__title,
.lead-card__poster {
  width: 100%;
  margin: 0;
}

.lead-card__title {
  font: var(--text-body-bold-mobile);
}

.lead-card__poster {
  font: var(--text-body-mobile);
}

@media (min-width: 768px) {
  .lead-card__title {
    font: var(--text-body-bold-desktop);
  }

  .lead-card__poster {
    font: var(--text-body-desktop);
  }
}

.lead-card__meta,
.lead-card__poster-meta {
  width: 100%;
  margin: 0;
  color: var(--text-primary);
  font: var(--text-caption-mobile);
}

@media (min-width: 768px) {
  .lead-card__meta,
  .lead-card__poster-meta {
    font: var(--text-caption-desktop);
  }
}

.lead-card__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
}

.lead-card__tags {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px;
}

.lead-card__rationale {
  width: 100%;
  margin: 0;
  color: var(--text-primary);
  font: var(--text-body-mobile);
}

@media (min-width: 768px) {
  .lead-card__rationale {
    font: var(--text-body-desktop);
  }
}

.lead-card__description {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
}

@media (min-width: 768px) {
  .lead-card__description {
    gap: 16px;
  }
}

.lead-card__description-text {
  width: 100%;
  margin: 0;
  color: var(--text-primary);
  font: var(--text-body-mobile);
}

@media (min-width: 768px) {
  .lead-card__description-text {
    font: var(--text-body-desktop);
  }
}

.lead-card__description-text--clamped {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lead-card__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.lead-card__footer .text-link {
  width: 100%;
  justify-content: center;
}

/* .lead-card__footer optionally holds a second child: a "Move to Saved" or "Move to Passed"
   .cta (mutually exclusive, reciprocal actions). Context-specific — only include one when Lead
   Card renders inside the Passed-screen modal (Move to Saved) or Saved-screen modal (Move to
   Passed). Everywhere else (Lead Review, etc.) omit both entirely; this is a per-context markup
   decision made by the consumer, not a module prop/flag. */

/* Module / Search Parameter — composition only; visuals owned by Tag and CTA.
   Intentionally separate from Module / Lead Card — both use a surface/rounded-16/padded
   card, but no shared abstraction between them (confirmed decision, not derivative). */
.search-parameter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

.search-parameter__prompt {
  width: 100%;
  margin: 0;
  color: var(--text-primary);
  text-align: center;
  font: var(--text-h4-mobile);
}

@media (min-width: 768px) {
  .search-parameter__prompt {
    font: var(--text-h4-desktop);
  }
}

.search-parameter__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 32px;
  background: var(--surface);
  border-radius: 16px;
  overflow: hidden;
}

.search-parameter__details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

.search-parameter__title {
  width: 100%;
  margin: 0;
  color: var(--text-primary);
  text-align: center;
  font: var(--text-h3-mobile);
}

@media (min-width: 768px) {
  .search-parameter__title {
    font: var(--text-h3-desktop);
  }
}

.search-parameter__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
}

.search-parameter__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* Module / Lead Actions ("Floating Lead Action") — composition only; visuals owned by Circle CTA and CTA.
   No responsive CSS of its own — the outer pill's padding/gap/radius are identical at every screen size in
   Figma; sizing is fully driven by Circle CTA's and CTA's own existing 768px breakpoint. Independent of the
   other modules — shares only primitives/tokens. */
.lead-actions {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 32px;
  padding: 16px;
  background: var(--surface-alt);
  border-radius: 50px;
  box-shadow: var(--shadow-high);
}

/* Module / Lead List Item — clickable row summarizing a lead (e.g. Saved/Passed lists).
   Own module, not derived from Lead Card — shares only primitives/tokens, no structural abstraction.
   The real <button> only wraps phrasing content (spans, not the <p>s other modules use) since HTML5's
   button content model disallows block children; the divider and hover/focus background live on the
   non-interactive outer wrapper and bubble state up from the button via :has(), the same technique
   already used for Text Area's focus ring. */
.lead-list-item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
}

.lead-list-item:has(.lead-list-item__trigger:hover),
.lead-list-item:has(.lead-list-item__trigger:active) {
  background: var(--surface);
}

.lead-list-item:has(.lead-list-item__trigger:focus-visible) {
  background: var(--surface);
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.lead-list-item__trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lead-list-item__trigger:focus-visible {
  outline: none;
}

.lead-list-item__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  flex: 1 0 0;
  min-width: 0;
  color: var(--text-primary);
}

.lead-list-item__title {
  display: block;
  width: 100%;
  font: var(--text-body-bold-mobile);
}

.lead-list-item__meta,
.lead-list-item__poster-meta {
  display: block;
  width: 100%;
  font: var(--text-caption-mobile);
}

.lead-list-item__poster {
  display: block;
  width: 100%;
  font: var(--text-body-mobile);
}

@media (min-width: 768px) {
  .lead-list-item__title {
    font: var(--text-body-bold-desktop);
  }

  .lead-list-item__meta,
  .lead-list-item__poster-meta {
    font: var(--text-caption-desktop);
  }

  .lead-list-item__poster {
    font: var(--text-body-desktop);
  }
}

.lead-list-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--icon-primary);
}

.lead-list-item__icon svg {
  width: 22px;
  height: 19px;
  fill: currentColor;
}

/* The "..." Action Menu trigger — absolutely positioned at the item's top-right corner (per the
   corrected Figma mobile Lead List Item), independent of the chevron in the row below it. Sits
   at the same 44px hit-target size as the chevron and other icon buttons in this system. The
   containing block for an absolutely positioned descendant is the ancestor's *padding box*, which
   ignores the ancestor's own padding — so top/right must explicitly repeat .lead-list-item's 8px
   padding here, or the icon lands 8px above/right of where the padded trigger row (and its
   flush-right chevron) actually starts, misaligning the two icons. */
.lead-list-item__menu {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--icon-primary);
  cursor: pointer;
}

.lead-list-item__menu svg {
  width: 25px;
  height: 5px;
  fill: currentColor;
}

.lead-list-item__menu:hover:not(:disabled) {
  color: var(--accent-base);
}

.lead-list-item__menu:active:not(:disabled) {
  color: var(--accent-deep);
}

.lead-list-item__menu:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
  color: var(--accent-base);
}

.lead-list-item__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

/* Module / Lead Detail Modal — Saved/Passed's full Lead Card shown in a global overlay, composed
   entirely from existing primitives (Circle CTA close button + Module / Lead Card), per Figma's
   Saved/Passed "Overlay"/"Modal" frames. Screen-level/global composition mounted directly on
   <body> by static/js/modules/leadDetailModal.js — not owned by Saved or Passed individually, and
   Lead Card itself is untouched (its optional "Move to Saved" footer button is an existing,
   documented Lead Card behavior — see .lead-card__footer above). Close button → Lead Card gap is
   a fixed 32px at every breakpoint, confirmed via Figma frame measurements.

   Vertical centering deliberately uses `margin: auto 0` on .lead-detail-modal rather than
   `align-items: center` on the overlay — the align-items approach clips the top of the modal
   when its content is taller than the viewport (auto margins collapse to 0 and scroll naturally
   instead, so the whole modal — including the close button — stays reachable by scrolling). */
.lead-detail-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  padding: 24px 16px;
  overflow-y: auto;
  background: var(--overlay-scrim);
}

.lead-detail-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
  margin: auto 0;
}

/* Module / Content Banner — composition + eyebrow/heading/body text; no owned interactivity.
   Eyebrow is optional (e.g. Loading's banner omits it). Reused as-is by Search Setup, Search
   Confirmation, and Loading — content differs per screen, structure/styling does not. */
.content-banner {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
}

.content-banner__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  max-width: 792px;
  text-align: center;
}

.content-banner__eyebrow-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
}

.content-banner__eyebrow {
  width: 100%;
  margin: 0;
  color: var(--text-secondary);
  font: var(--text-eyebrow);
  text-transform: var(--text-eyebrow-transform);
}

.content-banner__heading {
  width: 100%;
  margin: 0;
  color: var(--text-primary);
  font: var(--text-h2-mobile);
}

.content-banner__body {
  width: 100%;
  margin: 0;
  color: var(--text-primary);
  font: var(--text-body-mobile);
}

@media (min-width: 768px) {
  .content-banner__heading {
    font: var(--text-h2-desktop);
  }

  .content-banner__body {
    font: var(--text-body-desktop);
  }
}

/* Module / Empty State — its own module per Figma (visually related to Content Banner but not
   merged with it). Composition only: reuses Module / Content Banner (no eyebrow) + an optional
   Primitive / CTA below, with a fixed 32px gap between them at every breakpoint — confirmed
   constant across Mobile/Tablet/Laptop/Desktop via Figma frame measurements, so it does not
   scale with the page-level gap. CTA sizing (48px mobile / 56px tablet+) is entirely the CTA
   primitive's own existing responsive rule; no override needed here. */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  width: 100%;
}

/* Module / Global Navigation Header — Job Discovery style only (the design system also defines a
   Portfolio style for this same component; not used in this project). Global page chrome, not nested
   content — unlike other modules it defines its own max-width/centering since nothing else will.
   Widths match Figma's literal header pill sizes per breakpoint (1120 laptop / 1200 desktop), which are
   intentionally narrower than .stage's own content max-widths (1120 / 1280) — a deliberate, slightly
   inset floating pill, not the same "content width" system. Mobile open/close (state, icon swap, body
   scroll lock, Escape-to-close, close-on-nav-select) is handled by static/js/modules/globalNavHeader.js —
   small interaction intrinsic to the nav widget itself, confirmed against the Figma mobile prototype
   (which demonstrates the Portfolio style's content, but the same overlay mechanism applies to both). */
.global-nav-header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(100% - 32px);
  max-width: 1200px;
  height: 60px;
  margin: 0 auto;
  padding: 0 16px;
  background: var(--surface);
  border-radius: 30px;
  box-shadow: var(--shadow-high);
}

@media (min-width: 768px) {
  .global-nav-header {
    width: calc(100% - 80px);
  }
}

@media (min-width: 1280px) {
  .global-nav-header {
    width: 100%;
    max-width: 1120px;
  }
}

@media (min-width: 1440px) {
  .global-nav-header {
    max-width: 1200px;
  }
}

.global-nav-header__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: none;
  color: var(--icon-primary);
  cursor: pointer;
}

@media (min-width: 768px) {
  .global-nav-header__toggle {
    display: none;
  }
}

.global-nav-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.global-nav-header__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

.global-nav-header__icon--close {
  display: none;
}

.global-nav-header__links {
  display: none;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  .global-nav-header__links {
    display: flex;
  }
}

@media (max-width: 767px) {
  .global-nav-header[data-state="expanded"] {
    position: fixed;
    inset: 16px;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: auto;
    max-width: none;
    height: auto;
    padding: 8px 16px 60px;
    z-index: 100;
  }

  /* Close control sits in the same horizontally-centered position as the collapsed Menu
     control (that pill has only one child and is centered via .global-nav-header's own
     justify-content: center) — not pinned to an edge. */
  .global-nav-header[data-state="expanded"] .global-nav-header__toggle {
    align-self: center;
  }

  .global-nav-header[data-state="expanded"] .global-nav-header__icon--menu {
    display: none;
  }

  .global-nav-header[data-state="expanded"] .global-nav-header__icon--close {
    display: flex;
  }

  .global-nav-header[data-state="expanded"] .global-nav-header__links {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

/* Module / Global Navigation Footer — single style (no Job Discovery/Portfolio split for this component).
   Full-bleed global chrome — width:100%, no max-width cap, matching Figma's edge-to-edge background. */
.global-nav-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 20px 16px;
  background: var(--footer-background);
  color: var(--text-primary);
  font: var(--text-body-mobile);
}

@media (min-width: 768px) {
  .global-nav-footer {
    flex-direction: row;
    justify-content: space-between;
    padding: 24px 40px;
    font: var(--text-body-desktop);
  }
}

@media (min-width: 1280px) {
  .global-nav-footer {
    padding: 32px 80px;
  }
}

@media (min-width: 1440px) {
  .global-nav-footer {
    padding: 32px 184px;
  }
}

.global-nav-footer__text {
  margin: 0;
  text-align: center;
}

@media (min-width: 768px) {
  .global-nav-footer__text {
    text-align: left;
  }
}

.global-nav-footer__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--icon-primary);
}

.global-nav-footer__icon svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

/* Primitive / Action Menu Item — a self-contained interactive row (text + its own trailing
   divider), not a shared-primitive wrapper. Follows the same interactive-child/non-interactive-
   wrapper split as Module / Lead List Item (button content model disallows the <hr> as a direct
   child of a <button>), with hover/pressed/focus state bubbled from the button to the wrapper
   via :has() — same established technique. Hover and Pressed intentionally share one visual
   treatment for V1 (per Figma), so no separate :active-only rule. */
.action-menu-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  padding: 8px;
  border-radius: 4px;
}

.action-menu-item:has(.action-menu-item__trigger:hover:not(:disabled)),
.action-menu-item:has(.action-menu-item__trigger:active:not(:disabled)) {
  background: var(--surface-alt);
}

.action-menu-item:has(.action-menu-item__trigger:focus-visible) {
  background: var(--surface-alt);
  outline: 2px solid var(--focus-ring);
  outline-offset: -2px;
}

.action-menu-item__trigger {
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: var(--text-primary);
  font: var(--text-body-mobile);
  text-align: center;
  cursor: pointer;
}

.action-menu-item__trigger:focus-visible {
  outline: none;
}

.action-menu-item__trigger:disabled {
  color: color-mix(in srgb, var(--text-primary) 40%, transparent);
  cursor: not-allowed;
}

@media (min-width: 768px) {
  .action-menu-item__trigger {
    font: var(--text-body-desktop);
  }
}

.action-menu-item__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--border);
}

/* Module / Action Menu — global, screen-level overlay (mounted on <body>, not inside any
   .stage) composed from Primitive / Action Menu Item, per Figma's "Module / Action Menu".
   Centered in the viewport over a scrim, same overlay-centering approach as Lead Detail Modal.
   Width hugs content up to the designed minimum (240px item + 8px+8px container padding =
   256px), but shrinks below that on very narrow viewports instead of overflowing — the overlay's
   own 16px padding plus this min() is what keeps it in view down to ~288px-wide viewports and
   fluidly below that (V1's "Fluid Mobile" range has no fixed floor, per CLAUDE.md). */
.action-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: var(--overlay-scrim);
}

.action-menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: min(256px, 100%);
  padding: 8px;
  background: var(--surface);
  border-radius: 4px;
  box-shadow: var(--shadow-high);
}

.text-area {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 100px;
  padding: 8px 16px;
  border: 2px solid var(--accent-base);
  border-radius: 4px;
  background: var(--surface);
}

.text-area__field {
  flex: 1 0 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font: var(--text-body-mobile);
  resize: none;
  outline: none;
  overflow: hidden;
}

.text-area__field::placeholder {
  color: var(--text-secondary);
  opacity: 1;
}

.text-area:has(.text-area__field:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 4px;
}

.text-area__icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--accent-base);
}

.text-area__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

@media (min-width: 768px) {
  .text-area {
    padding: 16px;
  }

  .text-area__field {
    font: var(--text-body-desktop);
  }
}