/* Crewvector | JOBS — public site styles.
   Faithful to the approved design: docs/design/home/Crewvector Jobs Home.dc.html
   (frames 1a mobile 390, 1b desktop 1280, 1c zero state, 1d–1f filter sheets, 1g suggestions).
   Mobile-first; desktop breakpoint 1024px. No CSS frameworks. */

/* ---------- Self-hosted fonts (wwwroot/fonts, no CDN) ---------- */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/archivo-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url('../fonts/ibm-plex-sans-var.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2');
}

/* ---------- Design tokens ---------- */

:root {
  --c-blue: #2E6AAF;
  --c-blue-hover: #255894;
  --c-navy: #10243B;
  --c-green: #8CC63F;
  --c-green-hover: #7CB434;
  --c-bg: #F5F7FA;
  --c-surface: #fff;
  --c-border: #E3E8EF;
  --c-border-soft: #EDF1F6;
  --c-border-input: #DDE4EC;
  --c-ink: #16202B;
  --c-heading: #10243B;
  --c-body: #41546B;
  --c-muted: #51637A;
  --c-soft: #5B6B7C;
  /* Placeholder text in the wizard's and the sheets' fields (macет "Crewvector Jobs Onboarding",
     updated 2026-08-23) — lighter than both of the above, which read as entered text rather than a
     hint once a real value sits next to them. */
  --c-placeholder: #98A6B5;
  --c-label: #26364A;
  --c-chip-active-bg: #E7F0FA;
  --c-chip-active-ink: #1F4E85;
  --c-chip-active-hover: #D3E4F6;
  --c-tag-blue-bg: #EEF4FB;
  --c-field-bg: #F1F5F9;
  --c-pale: #F7FAFC;
  --c-check-border: #C6D3E1;
  --c-card-hover-border: #B9CEE6;
  --c-hero-lead: #B8CBDF;
  --c-footer-link: #C3D5E8;
  --c-footer-muted: #7C93AC;
  /* Vacancy page (design "Crewvector Jobs Vacancy", frames 1a–1f). */
  --c-applied-bg: #EFF6E6;
  --c-applied-ink: #3C5A16;
  --c-disabled-ink: #8496A8;
  --c-avatar-bg: #DDE7F2;
  /* Company cabinet vacancy-status badges (design "Crewvector Jobs Company", frames 1d-1f/2d-2f). Draft
     and Closed reuse existing tokens exactly (--c-field-bg/--c-border-input/--c-body for Draft,
     --c-soft for Closed's ink); Published is its own new green, not --c-applied-* — that pair is the
     seafarer's "you applied" chip and happens to read close, but is a different design's colour. */
  --c-published-bg: #EAF6EC;
  --c-published-border: #9BCBA6;
  --c-published-ink: #2C6B3F;
  --c-closed-border: #C3CEDA;
  /* Applying and revoking (design "Crewvector Jobs Application", frames 1a–1m / 2a–2l): the amber
     "something is missing" pair, the red of a withdrawal, and the border of the blue "New" badge. */
  --c-warn-bg: #FFF6E4;
  --c-warn-border: #E8B451;
  --c-warn-ink: #8A5A00;
  --c-danger: #A32020;
  --c-danger-hover: #8A1B1B;
  --c-danger-ink: #A32020;
  --c-danger-border: #EFD3D3;
  --c-danger-bg: #FDF3F3;
  /* The "Expired" document badge (macет "Crewvector Jobs Onboarding", frame 2m, updated 2026-08-25).
     Its own role, not a reuse of --c-danger-* above: that triple is the revoke/consent red and colours
     the delete button, and the two happen to read close but are not the same values (expiry-and-dialog
     spec §2) — a shared variable would make the delete button redder the day either one is retuned. */
  --c-expired-ink: #A32A1E;
  --c-expired-bg: #FDECEA;
  --c-expired-border: #E39189;
  /* The scan-attached clip's own muted blue-grey (macет "Crewvector Jobs Onboarding", frame 2m,
     document-row-chips task) — none of --c-soft/--c-muted/--c-body is this shade. */
  --c-doc-scan-icon: #8397AC;
  /* The dash placeholder on a vacancy card's metrics row before anything has been counted (macет
     "Vacancies Stats", frame 10b) — lighter than --c-disabled-ink, which is the label next to it. */
  --c-metric-dash: #B8C4D0;
  /* Form validation red (macет "Crewvector Jobs Onboarding", updated 2026-08-23): an invalid field's
     border and its message use this shade. Kept separate from --c-danger, which stays the colour of
     the application's own revoke/consent red and is not this task's to move. */
  --c-invalid: #C0392B;
  --c-badge-new-border: #A9C8E8;
  /* Reading a scan (design "Crewvector Jobs Document Scans", frames 1v–1y / 2r–2u): the blue of a
     card being read, the green of one that has been, the amber of one that could not be. */
  --c-read-border: #CFDFEE;
  --c-read-track: #DFE9F3;
  --c-read-ok-border: #8CC63F;
  --c-read-ok-bg: #F7FBF1;
  --c-read-warn-border: #EDD9AE;
  --c-read-warn-title: #5C3D00;
  --c-read-warn-text: #6B4A08;
  --c-scrim: rgba(16, 36, 59, .45);
  /* Deeper than the sheet's scrim: the full-size scan is meant to be the only thing on screen (2p). */
  --c-scrim-deep: rgba(16, 36, 59, .62);
  --font-sans: 'IBM Plex Sans', system-ui, sans-serif;
  --font-display: 'Archivo', 'IBM Plex Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --shadow-card: 0 1px 2px rgba(16, 36, 59, .05);
  --shadow-card-hover: 0 3px 10px rgba(16, 36, 59, .09);
  --shadow-card-hover-lg: 0 4px 14px rgba(16, 36, 59, .09);
  --shadow-pop: 0 8px 24px rgba(16, 36, 59, .16);
  --shadow-pop-sort: 0 10px 28px rgba(16, 36, 59, .18);
  --shadow-bar: 0 -6px 18px rgba(16, 36, 59, .08);
  --shadow-rail: 0 2px 10px rgba(16, 36, 59, .06);
  --tap: 44px;
}

/* ---------- Base ---------- */

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--c-ink);
  background: var(--c-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

main { flex: 1; }

a { color: var(--c-blue); text-decoration: none; }
a:hover { color: var(--c-blue-hover); }

input, button { font-family: var(--font-sans); }

svg { display: block; }

:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }

.shell { width: 100%; max-width: 1280px; margin: 0 auto; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  border: 0;
  cursor: pointer;
  text-decoration: none;
}

.btn--primary {
  background: var(--c-blue);
  color: #fff;
  font: 600 13.5px/1 var(--font-sans);
  padding: 0 18px;
  border-radius: 11px;
}
.btn--primary:hover { background: var(--c-blue-hover); color: #fff; }

/* ---------- Header ---------- */

.site-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
}

.site-header__brand { display: flex; align-items: center; gap: 8px; }
.site-header__arrow { width: 23px; height: 23px; flex: none; }
.site-header__wordmark { height: 14px; width: auto; flex: none; }
.site-header__jobs {
  font: 600 11.5px/1 var(--font-display);
  color: var(--c-soft);
  letter-spacing: .08em;
  white-space: nowrap;
}
.site-header__spacer { flex: 1; }
.site-header__companies { display: none; }
.site-header__signin {
  font: 600 13px/1 var(--font-sans);
  color: #fff;
  background: var(--c-blue);
  padding: 0 15px;
  border-radius: 10px;
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
.site-header__signin:hover { background: var(--c-blue-hover); color: #fff; }

/* Dark strip under the header — mobile only (frame 1a). */
.subnav { background: var(--c-navy); }
.subnav .shell { padding: 0 16px; display: flex; align-items: center; }
.subnav__link {
  font: 500 12.5px/1 var(--font-sans);
  color: var(--c-footer-link);
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.subnav__link:hover { color: var(--c-green); }
.subnav__icon { width: 13px; height: 13px; }

/* ---------- Hero + search ---------- */

/* Mobile: white search panel (frame 1a). Desktop: navy hero with headline (frame 1b). */
.hero { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.hero__inner { padding: 14px 16px 12px; position: relative; z-index: 3; }
/* Frame 1a shows no headline on mobile, but the page's only h1 has to stay in the document
   for mobile-first indexing and screen readers — hide it visually, not from the a11y tree. */
.hero__title {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
.hero__lead { display: none; }

.search { display: flex; gap: 10px; }
.search__box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  background: var(--c-field-bg);
  border: 1px solid var(--c-border-input);
  border-radius: 12px;
  padding: 0 14px;
}
.search__box:focus-within { border-color: var(--c-blue); background: var(--c-surface); }
.search__icon { width: 18px; height: 18px; flex: none; color: var(--c-soft); }
.search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: 400 15px/1 var(--font-sans);
  color: var(--c-ink);
  padding: 14px 0;
}
.search__input::placeholder { color: var(--c-soft); opacity: 1; }
.search__submit {
  display: none;
  flex: none;
  min-height: 52px;
  align-items: center;
  padding: 0 26px;
  border-radius: 12px;
  border: 0;
  background: var(--c-green);
  color: var(--c-navy);
  font: 600 15px/1 var(--font-sans);
  cursor: pointer;
}
.search__submit:hover { background: var(--c-green-hover); }

/* Suggestions dropdown (frame 1g). */
.suggest { position: relative; }
.suggest__pop {
  position: absolute;
  left: 0; right: 0; top: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  z-index: 4;
}
.suggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
  border-bottom: 1px solid var(--c-field-bg);
}
.suggest__item:last-child { border-bottom: 0; }
.suggest__item:hover { background: var(--c-bg); }
.suggest__icon { width: 15px; height: 15px; flex: none; color: var(--c-soft); }
.suggest__label { flex: 1; min-width: 0; font: 400 14.5px/1.3 var(--font-sans); color: var(--c-ink); }
.suggest__kind { flex: none; font: 400 11px/1 var(--font-mono); color: var(--c-muted); }

/* ---------- Filter chips (mobile, frame 1a) ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.chip {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  color: inherit;
}
.chip:hover { border-color: var(--c-blue); color: inherit; }
.chip__label { font: 500 13.5px/1 var(--font-sans); color: var(--c-label); white-space: nowrap; }
.chip__chevron { width: 13px; height: 13px; color: var(--c-soft); }

.chip--active {
  gap: 2px;
  padding: 0 4px 0 13px;
  background: var(--c-chip-active-bg);
  border: 1px solid var(--c-blue);
}
.chip--active .chip__open {
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-chip-active-ink);
  white-space: nowrap;
  padding: 12px 4px 12px 0;
}
.chip__clear {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
}
.chip__clear:hover { background: var(--c-chip-active-hover); }
.chip__clear svg { width: 14px; height: 14px; color: var(--c-chip-active-ink); }

/* ---------- List meta row (count + sort) ---------- */

.list-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 4px;
  position: relative;
  z-index: 4;
}
.list-meta__count { font: 500 12.5px/1.2 var(--font-mono); color: var(--c-body); }
.sort { position: relative; flex: none; }
.sort-toggle {
  min-height: 40px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 9px;
  font: 600 12.5px/1 var(--font-sans);
  color: var(--c-blue);
}
.sort-toggle:hover { background: var(--c-chip-active-bg); color: var(--c-blue); }
.sort-toggle svg { width: 15px; height: 15px; }
.sort-toggle .sort-toggle__chevron { width: 12px; height: 12px; }
.sort-toggle__label { display: none; }
.sort-toggle__mobile { display: inline; }

/* "SORT BY" menu. Always in the markup; [hidden] is the closed state, set by the server
   (?sortMenu=1) and flipped in place by site.js when JavaScript is available. */
.sort-menu {
  position: absolute;
  right: 0;
  top: 46px;
  width: 216px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: 12px;
  box-shadow: var(--shadow-pop-sort);
  overflow: hidden;
  z-index: 6;
}
.sort-menu[hidden] { display: none; }
.sort-menu__title {
  font: 400 10.5px/1 var(--font-mono);
  color: var(--c-muted);
  letter-spacing: .05em;
  padding: 12px 14px 6px;
}
.sort-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 14px;
}
.sort-menu__item:hover { background: var(--c-bg); }
.sort-menu__check { width: 15px; height: 15px; flex: none; color: var(--c-blue); }
.sort-menu__label { flex: 1; font: 500 14px/1.35 var(--font-sans); color: var(--c-ink); }

/* ---------- Vacancy cards ---------- */

.cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 12px 16px;
}

.vacancy-card {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: var(--shadow-card);
  color: inherit;
}
.vacancy-card:hover {
  border-color: var(--c-card-hover-border);
  box-shadow: var(--shadow-card-hover);
  color: inherit;
}

.vacancy-card__top { display: flex; gap: 12px; align-items: flex-start; }
.vacancy-card__title {
  margin: 0;
  flex: 1;
  min-width: 0;
  font: 600 16.5px/1.3 var(--font-display);
  color: var(--c-heading);
  text-wrap: pretty;
}
.vacancy-card__pay { flex: none; text-align: right; }
.vacancy-card__salary {
  font: 700 16px/1.2 var(--font-display);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vacancy-card__period { font: 400 10.5px/1.4 var(--font-mono); color: var(--c-soft); }

.vacancy-card__divider { height: 1px; background: var(--c-border-soft); margin: 11px 0 10px; }

.vacancy-card__vessel { margin: 0; font: 400 13px/1.45 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

.vacancy-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 11.5px/1 var(--font-mono);
  border-radius: 8px;
  padding: 7px 9px;
}
.tag svg { width: 13px; height: 13px; }
.tag--join { color: var(--c-chip-active-ink); background: var(--c-tag-blue-bg); }
.tag--duration { color: var(--c-body); background: var(--c-field-bg); }

.vacancy-card__foot {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border-soft);
}
.vacancy-card__company { flex: 1; min-width: 0; font: 500 12.5px/1.35 var(--font-sans); color: var(--c-label); text-wrap: pretty; }
.vacancy-card__posted { flex: none; font: 400 11.5px/1 var(--font-mono); color: var(--c-muted); }

.vacancy-card__cta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font: 600 13px/1 var(--font-sans);
  color: var(--c-blue);
  min-height: 24px;
}
.vacancy-card__cta svg { width: 14px; height: 14px; }

/* ---------- Zero state (frames 1a/1c) ---------- */

.zero {
  margin: 4px 12px 18px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 26px 20px;
  text-align: center;
}
.zero__icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--c-field-bg);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
}
.zero__icon svg { width: 22px; height: 22px; color: var(--c-soft); }
.zero__title { margin: 0 0 8px; font: 600 16px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.zero__text { margin: 0 0 16px; font: 400 13.5px/1.5 var(--font-sans); color: var(--c-body); }

/* ---------- Load more ---------- */

.more-slot { padding: 4px 14px 20px; }
.load-more {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  border-radius: 12px;
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-blue);
}
.load-more:hover { border-color: var(--c-blue); color: var(--c-blue); }

/* ---------- Desktop filter rail (frame 1b) ---------- */

.page-grid { display: block; }
.rail { display: none; }

/* ---------- Mobile filter sheet (frames 1d–1f) ---------- */

.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 36, 59, .45);
  display: flex;
  align-items: flex-end;
  z-index: 5;
}
.sheet {
  width: 100%;
  background: var(--c-surface);
  border-radius: 18px 18px 0 0;
  display: flex;
  flex-direction: column;
  max-height: 92vh;
}
.sheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px 16px;
  border-bottom: 1px solid var(--c-border);
}
.sheet__title { flex: 1; font: 600 16px/1.3 var(--font-display); color: var(--c-heading); }
.sheet__close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  /* The wizard sheet's own close is a <button> inside a <form method="dialog"> (dialog-sheets spec, same
     idiom as _ConfirmDialog's Cancel) — a no-op reset for the home-page filter sheet's <a>, which has
     none of a button's UA chrome to begin with. */
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
}
.sheet__close:hover { background: var(--c-field-bg); }
.sheet__close svg { width: 17px; height: 17px; color: var(--c-body); }

.sheet__search { padding: 12px 16px 4px; }
.sheet__searchbox {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  background: var(--c-field-bg);
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  padding: 0 12px;
}
.sheet__searchbox svg { width: 16px; height: 16px; flex: none; color: var(--c-soft); }
.sheet__searchbox input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: 400 14.5px/1 var(--font-sans);
  color: var(--c-ink);
  padding: 12px 0;
}

.sheet__list { overflow-y: auto; max-height: 296px; padding: 6px 8px 8px; }

.opt {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 46px;
  padding: 0 8px;
  border-radius: 10px;
  cursor: pointer;
}
.opt:hover { background: var(--c-bg); }
.opt__label { flex: 1; min-width: 0; font: 400 14.5px/1.35 var(--font-sans); color: var(--c-ink); }
.opt__count { flex: none; font: 400 12px/1 var(--font-mono); color: var(--c-muted); }

/* Square check (rank / vessel type multi-select). */
.opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid var(--c-check-border);
  background: var(--c-surface);
  flex: none;
  cursor: pointer;
}
.opt input[type="checkbox"]:checked {
  border: 0;
  background: var(--c-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

/* Round radio (join date presets). */
.opt input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 50%;
  border: 1.5px solid var(--c-check-border);
  background: var(--c-surface);
  flex: none;
  cursor: pointer;
}
.opt input[type="radio"]:checked { border: 6px solid var(--c-blue); }

.sheet__none { padding: 22px 10px; text-align: center; font: 400 13.5px/1.5 var(--font-sans); color: var(--c-muted); }

/* Salary sheet body (frame 1e). */
.sheet__salary { padding: 18px 16px 8px; }
.salary-value { font: 700 22px/1.2 var(--font-display); color: var(--c-ink); font-variant-numeric: tabular-nums; }
.salary-sub { font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); margin-top: 4px; }
.sheet__salary input[type="range"] { width: 100%; margin: 20px 0 4px; accent-color: var(--c-blue); height: 24px; }
.salary-scale { display: flex; justify-content: space-between; font: 400 11.5px/1 var(--font-mono); color: var(--c-muted); }
.salary-note { margin: 14px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); }

/* Join sheet body (frame 1f). */
.sheet__join { padding: 14px 16px 8px; }
.sheet__join .opt-list { display: flex; flex-direction: column; gap: 6px; }
.sheet__divider { height: 1px; background: var(--c-border-soft); margin: 12px 0; }
.range-label {
  font: 400 10.5px/1 var(--font-mono);
  color: var(--c-muted);
  letter-spacing: .05em;
  margin-bottom: 8px;
}
.date-range { display: flex; align-items: center; gap: 8px; }
.date-range input[type="date"] {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  border: 1px solid var(--c-border-input);
  border-radius: 10px;
  padding: 0 10px;
  font: 400 14px/1 var(--font-sans);
  color: var(--c-ink);
  background: var(--c-surface);
}
.date-range__arrow { font: 400 13px/1 var(--font-mono); color: var(--c-muted); }

.sheet__foot {
  display: flex;
  gap: 10px;
  padding: 12px 16px 18px;
  border-top: 1px solid var(--c-border);
  margin-top: 8px;
}
.sheet__clear {
  flex: none;
  min-height: 48px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-radius: 12px;
  border: 1px solid var(--c-border-input);
  font: 600 14px/1 var(--font-sans);
  color: var(--c-label);
  background: var(--c-surface);
  cursor: pointer;
}
.sheet__clear:hover { border-color: var(--c-blue); color: var(--c-label); }
.sheet__apply {
  flex: 1;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 12px;
  background: var(--c-blue);
  color: #fff;
  font: 600 14.5px/1 var(--font-sans);
  cursor: pointer;
}
.sheet__apply:hover { background: var(--c-blue-hover); }

/* ---------- Footer ---------- */

.site-footer { background: var(--c-navy); }
.site-footer__inner { padding: 20px 16px 22px; }
.site-footer__brand { display: flex; align-items: center; gap: 9px; }
.site-footer__arrow { display: none; width: 20px; height: 20px; }
.site-footer__copy { font: 400 11.5px/1.5 var(--font-mono); color: var(--c-footer-muted); }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 2px 20px; }
.site-footer__nav a {
  font: 400 13px/1 var(--font-sans);
  color: var(--c-footer-link);
  min-height: var(--tap);
  display: flex;
  align-items: center;
}
.site-footer__nav a:hover { color: var(--c-green); }
.site-footer__inner { display: flex; flex-direction: column-reverse; }
.site-footer__brand { margin-top: 6px; }

/* ---------- Plain content pages (login, vacancy stub) ---------- */

.plain {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}
.plain h1 { font: 700 26px/1.25 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; margin: 0 0 10px; }
.plain h2 { font: 600 16px/1.3 var(--font-display); color: var(--c-heading); margin: 24px 0 8px; }
.plain p, .plain li { font: 400 14.5px/1.6 var(--font-sans); color: var(--c-body); }
.plain .lead { font: 500 14.5px/1.5 var(--font-sans); color: var(--c-body); margin: 0 0 18px; }
.plain dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; }
.plain dt { font: 400 11px/1.6 var(--font-mono); color: var(--c-muted); letter-spacing: .04em; text-transform: uppercase; }
.plain dd { margin: 0; font: 500 14px/1.5 var(--font-sans); color: var(--c-ink); }
.plain .backlink { display: inline-flex; align-items: center; gap: 7px; min-height: var(--tap); font: 500 13.5px/1 var(--font-sans); }

/* ---------- List narrowed to one company (from a vacancy page) ---------- */

.list-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 8px 12px 0;
  padding: 10px 12px;
  background: var(--c-tag-blue-bg);
  border-radius: 10px;
}
.list-note__text { font: 500 13px/1.4 var(--font-sans); color: var(--c-chip-active-ink); }
.list-note__clear { font: 500 12.5px/1.4 var(--font-sans); color: var(--c-blue); }

/* ---------- Vacancy page ----------
   Design: .crew/design/vacancy/"Crewvector Jobs Vacancy" — 1a mobile 390, 1b desktop 1280,
   1c/1d apply sheets, 1e after applying, 1f closed. Mobile first: the terms card sits in the
   content flow and the call to action is a fixed bottom bar; on desktop both move to a sticky rail. */

.vacancy-back { background: var(--c-surface); border-bottom: 1px solid var(--c-border); }
.vacancy-back .shell { padding: 6px 8px; }
.vacancy-back__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--tap);
  padding: 0 10px;
  border-radius: 10px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--c-blue);
}
.vacancy-back__link:hover { background: var(--c-tag-blue-bg); }
.vacancy-back__link svg { width: 16px; height: 16px; }

.vacancy-head {
  background: var(--c-surface);
  padding: 18px 16px 16px;
  border-bottom: 1px solid var(--c-border);
}
.vacancy-head__title {
  margin: 0 0 8px;
  font: 700 24px/1.22 var(--font-display);
  color: var(--c-heading);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.vacancy-head__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.vacancy-head__company { font: 600 14px/1.35 var(--font-sans); color: var(--c-blue); }
a.vacancy-head__company:hover { color: var(--c-blue-hover); }
.vacancy-head__posted { font: 400 12px/1.4 var(--font-mono); color: var(--c-muted); }
.vacancy-head--closed .vacancy-head__title,
.vacancy-head--closed .vacancy-head__company { color: var(--c-muted); }

.vacancy-closed {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 14px;
  padding: 11px 12px;
  background: var(--c-field-bg);
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  font: 600 13px/1.4 var(--font-sans);
  color: var(--c-label);
}
.vacancy-closed svg { width: 16px; height: 16px; flex: none; stroke: var(--c-body); }

/* Terms: salary, join date, contract length. */
.terms {
  margin: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
}
.terms--closed { opacity: .62; }
.terms__pay { padding: 15px 16px 14px; background: var(--c-pale); border-bottom: 1px solid var(--c-border); }
.terms__salary {
  font: 700 26px/1.1 var(--font-display);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.terms__period { margin-top: 4px; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
.terms__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--c-border); }
.terms__cell { background: var(--c-surface); padding: 12px 16px; }
.terms__label { font: 400 10.5px/1 var(--font-mono); color: var(--c-muted); letter-spacing: .05em; }
.terms__value { margin-top: 5px; font: 600 14.5px/1.3 var(--font-sans); color: var(--c-ink); }
.terms--closed .terms__salary,
.terms--closed .terms__value { color: var(--c-body); }
/* Mobile: the call to action lives in the fixed bar, not in the terms card. */
.terms__cta { display: none; }
.apply-rail__trust { display: none; }

/* Apply buttons and the "applied" pill. */
.apply-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  border: 0;
  border-radius: 12px;
  background: var(--c-blue);
  color: #fff;
  font: 600 15.5px/1 var(--font-sans);
  cursor: pointer;
}
.apply-btn:hover { background: var(--c-blue-hover); color: #fff; }
.apply-btn--ghost {
  background: var(--c-surface);
  border: 1px solid var(--c-blue);
  color: var(--c-blue);
  font-size: 15px;
}
.apply-btn--ghost:hover { background: var(--c-tag-blue-bg); color: var(--c-blue); }
.apply-btn--disabled,
.apply-btn--disabled:hover { background: var(--c-border-soft); color: var(--c-disabled-ink); cursor: not-allowed; }

.applied-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  border-radius: 12px;
  background: var(--c-applied-bg);
  border: 1px solid var(--c-green);
  color: var(--c-applied-ink);
  font: 600 15.5px/1 var(--font-sans);
}
.applied-pill svg { width: 17px; height: 17px; }

/* Content blocks: vessel, requirements, about, company. */
.vacancy-block {
  margin: 12px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
}
.vacancy-block__title { margin: 0 0 12px; font: 600 15px/1.2 var(--font-display); color: var(--c-heading); }

.spec { display: flex; flex-direction: column; }
.spec__row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--c-field-bg);
}
.spec__row:last-child { border-bottom: 0; }
.spec__key { flex: none; width: 106px; font: 400 12.5px/1.3 var(--font-mono); color: var(--c-muted); }
.spec__val { flex: 1; min-width: 0; font: 500 13.5px/1.4 var(--font-sans); color: var(--c-ink); }

.vacancy-note { margin: 12px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); }

.doc-label { margin: 16px 0 8px; font: 400 10.5px/1 var(--font-mono); color: var(--c-muted); letter-spacing: .05em; }
.docs { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.docs__item { display: flex; align-items: flex-start; gap: 9px; }
.docs__item svg { width: 15px; height: 15px; flex: none; margin-top: 2px; stroke: var(--c-blue); }
.docs__item span { flex: 1; font: 400 13.5px/1.45 var(--font-sans); color: var(--c-label); text-wrap: pretty; }

.about__p { margin: 0 0 10px; font: 400 14px/1.6 var(--font-sans); color: var(--c-label); text-wrap: pretty; }
.about__p:last-child { margin-bottom: 0; }

.company { display: grid; grid-template-columns: auto 1fr; gap: 0 12px; align-items: center; }
.company__logo {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  background: var(--c-tag-blue-bg);
  display: grid;
  place-items: center;
  font: 700 15px/1 var(--font-display);
  color: var(--c-blue);
}
.company__body { min-width: 0; }
.company__name { font: 600 15px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.company__since { margin-top: 2px; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
/* Desktop only (frame 1b), where the same fact is the closing sentence of the blurb instead. */
.company__since-inline { display: none; }
/* Optional blurb; the paragraph is not rendered at all when the company has not written one. */
.company__about {
  grid-column: 1 / -1;
  margin: 12px 0 0;
  font: 400 13.5px/1.55 var(--font-sans);
  color: var(--c-body);
  text-wrap: pretty;
}
.company__link {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap);
  margin-top: 8px;
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-blue);
}
.company__link svg { width: 14px; height: 14px; }

.similar__title { margin: 22px 16px 10px; font: 600 15px/1.2 var(--font-display); color: var(--c-heading); }
.similar__list { padding: 0 12px 4px; }

/* After applying (frame 1e): pinned to the foot of the screen, in place of the apply bar it replaces. */
.applied-panel {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding: 14px 16px 16px;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--c-border-input);
  box-shadow: var(--shadow-bar);
}
/* The closed vacancy (frame 1f) has nothing to pin: its way forward stays in the flow of the page. */
.closed-cta {
  margin-top: 12px;
  padding: 14px 16px 18px;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border-input);
}
.applied-panel__row { display: flex; align-items: center; gap: 12px; }
.applied-panel__row .applied-pill { flex: 1; }
.applied-panel__date { flex: none; max-width: 96px; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
.applied-panel__note { margin: 10px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.closed-cta__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 48px;
  margin-top: 8px;
  font: 600 14px/1 var(--font-sans);
  color: var(--c-blue);
}
.closed-cta__link svg { width: 14px; height: 14px; }

/* Fixed apply bar (mobile, frame 1a). */
.apply-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px 14px;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--c-border-input);
  box-shadow: var(--shadow-bar);
}
.apply-bar__pay { flex: none; }
.apply-bar__salary {
  font: 700 15px/1.1 var(--font-display);
  color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.apply-bar__join { margin-top: 3px; font: 400 10.5px/1.3 var(--font-mono); color: var(--c-muted); }
.apply-bar__cta { flex: 1; }
/* The fixed bar must not cover the end of the page; the applied panel is taller by its note. */
body:has(.apply-bar) .site-footer__inner { padding-bottom: 92px; }
body:has(.applied-panel) .site-footer__inner { padding-bottom: 150px; }

/* Apply sheet (frames 1c guest / 1d signed-in seafarer). */
.apply-overlay { position: fixed; inset: 0; z-index: 6; display: flex; align-items: flex-end; }
.apply-overlay__scrim { position: absolute; inset: 0; background: var(--c-scrim); }
.apply-sheet {
  position: relative;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--c-surface);
  border-radius: 18px 18px 0 0;
}
.apply-sheet__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 12px 10px 16px;
  border-bottom: 1px solid var(--c-border);
}
.apply-sheet__title { flex: 1; font: 600 16px/1.3 var(--font-display); color: var(--c-heading); }
.apply-sheet__close {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: var(--c-body);
}
.apply-sheet__close:hover { background: var(--c-field-bg); color: var(--c-body); }
.apply-sheet__close svg { width: 17px; height: 17px; }
.apply-sheet__body { padding: 14px 16px 20px; }
.apply-sheet__lead { margin: 0 0 14px; font: 400 13.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.apply-sheet__fields { display: flex; flex-direction: column; gap: 10px; }
.apply-sheet__field {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 14px;
  border: 1px solid var(--c-border-input);
  border-radius: 12px;
  font: 400 15px/1 var(--font-sans);
  color: var(--c-muted);
}
.apply-sheet__field:hover { border-color: var(--c-blue); color: var(--c-muted); }
.apply-sheet__forgot {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font: 500 13px/1 var(--font-sans);
  color: var(--c-blue);
}
.apply-sheet__rule {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0;
  font: 400 11px/1 var(--font-mono);
  color: var(--c-muted);
}
.apply-sheet__rule::before,
.apply-sheet__rule::after { content: ""; flex: 1; height: 1px; background: var(--c-border-soft); }
.apply-sheet__fine { margin: 12px 0 0; font: 400 12px/1.5 var(--font-sans); color: var(--c-muted); }
.apply-sheet__label { margin-bottom: 8px; font: 400 10.5px/1 var(--font-mono); color: var(--c-muted); letter-spacing: .05em; }
.apply-sheet__message {
  width: 100%;
  height: 88px;
  resize: none;
  padding: 12px;
  border: 1px solid var(--c-border-input);
  border-radius: 12px;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--c-ink);
  background: var(--c-surface);
  outline: none;
}
.apply-sheet__message:focus { border-color: var(--c-blue); }
.apply-sheet__count {
  display: flex;
  justify-content: flex-end;
  margin: 6px 0 12px;
  font: 400 11px/1 var(--font-mono);
  color: var(--c-muted);
}

.seafarer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-pale);
}
.seafarer__avatar {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  background: var(--c-avatar-bg);
  display: grid;
  place-items: center;
  font: 600 15px/1 var(--font-display);
  color: var(--c-blue);
}
.seafarer__body { flex: 1; min-width: 0; }
.seafarer__name { font: 600 14.5px/1.3 var(--font-sans); color: var(--c-ink); }
.seafarer__rank { margin-top: 3px; font: 400 12px/1.4 var(--font-mono); color: var(--c-muted); }
.seafarer__edit { flex: none; font: 500 12px/1 var(--font-sans); color: var(--c-blue); }

/* ---------- Desktop (frame 1b) ---------- */

@media (min-width: 1024px) {
  .site-header__inner { padding: 0 32px; gap: 11px; min-height: 66px; }
  .site-header__brand { gap: 11px; }
  .site-header__arrow { width: 27px; height: 27px; }
  .site-header__wordmark { height: 17px; }
  .site-header__jobs { font-size: 13px; }
  .site-header__companies {
    display: flex;
    align-items: center;
    font: 500 14px/1 var(--font-sans);
    color: var(--c-label);
    min-height: var(--tap);
    padding: 0 8px;
  }
  .site-header__companies:hover { color: var(--c-blue); }
  .site-header__signin { font-size: 14px; padding: 0 20px; border-radius: 11px; }

  .subnav { display: none; }

  .hero { background: var(--c-navy); border-bottom: 0; }
  .hero__inner { padding: 34px 32px 32px; }
  .hero__title {
    display: block;
    position: static;
    width: auto; height: auto;
    clip: auto; overflow: visible; white-space: normal;
    margin: 0 0 8px;
    font: 700 32px/1.2 var(--font-display);
    color: #fff;
    letter-spacing: -.02em;
    max-width: 660px;
    text-wrap: pretty;
  }
  .hero__lead {
    display: block;
    margin: 0 0 22px;
    font: 400 15px/1.5 var(--font-sans);
    color: var(--c-hero-lead);
    max-width: 560px;
  }
  .search { max-width: 720px; }
  .search__box { min-height: 52px; background: var(--c-surface); border: 0; border-radius: 12px; padding: 0 16px; gap: 12px; }
  .search__icon { width: 19px; height: 19px; }
  .search__input { font-size: 15.5px; padding: 16px 0; }
  .search__submit { display: flex; }

  .chips { display: none; }

  .page-grid {
    display: grid;
    grid-template-columns: 264px 1fr;
    gap: 24px;
    padding: 24px 32px 32px;
    align-items: start;
  }

  /* Filter rail. */
  .rail {
    display: block;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 18px;
  }
  .rail__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
  .rail__title { font: 600 13px/1 var(--font-display); color: var(--c-heading); letter-spacing: .02em; }
  .rail__reset { font: 500 12px/1 var(--font-sans); color: var(--c-blue); }
  .rail__label {
    font: 400 10.5px/1 var(--font-mono);
    color: var(--c-muted);
    letter-spacing: .05em;
    margin-bottom: 8px;
  }
  .rail__divider { height: 1px; background: var(--c-border-soft); margin: 14px 0; }
  .rail__search {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    background: var(--c-pale);
    border: 1px solid var(--c-border-input);
    border-radius: 9px;
    padding: 0 10px;
    margin-bottom: 6px;
  }
  .rail__search svg { width: 14px; height: 14px; flex: none; color: var(--c-soft); }
  .rail__search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: none;
    font: 400 13px/1 var(--font-sans);
    color: var(--c-ink);
    padding: 11px 0;
  }
  .rail__list { max-height: 176px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
  .rail .opt { gap: 9px; min-height: 34px; padding: 0 4px; border-radius: 8px; }
  .rail .opt__label { font: 400 13.5px/1.3 var(--font-sans); color: var(--c-label); }
  .rail .opt__count { font-size: 11px; }
  .rail .opt input[type="checkbox"] { width: 17px; height: 17px; border-radius: 5px; }
  .rail .opt input[type="checkbox"]:checked { background-size: 11px 11px; }

  .rail .salary-value { font: 700 17px/1.2 var(--font-display); }
  .rail input[type="range"] { width: 100%; margin: 12px 0 2px; accent-color: var(--c-blue); height: 22px; }
  .rail .salary-scale { font-size: 11px; }

  .rail__pills { display: flex; flex-wrap: wrap; gap: 6px; }
  .rail__pill { position: relative; flex: none; cursor: pointer; }
  .rail__pill input { position: absolute; opacity: 0; pointer-events: none; }
  .rail__pill span {
    min-height: 36px;
    display: flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 9px;
    border: 1px solid var(--c-border-input);
    background: var(--c-surface);
    font: 500 12.5px/1 var(--font-sans);
    color: var(--c-label);
    white-space: nowrap;
  }
  .rail__pill:hover span { border-color: var(--c-blue); }
  .rail__pill input:checked + span {
    border-color: var(--c-blue);
    background: var(--c-chip-active-bg);
    color: var(--c-chip-active-ink);
  }
  .rail .date-range { margin-top: 8px; }
  .rail .date-range input[type="date"] { min-height: 38px; border-radius: 9px; padding: 0 8px; font-size: 12.5px; }
  .rail__apply { margin-top: 14px; }
  .rail__apply .btn { width: 100%; }

  /* List column. */
  .list-meta { padding: 0 0 14px; }
  .list-meta__count { font-size: 13px; }
  .sort-toggle {
    gap: 7px;
    padding: 0 12px;
    border: 1px solid var(--c-border-input);
    background: var(--c-surface);
    border-radius: 10px;
    font: 600 13px/1 var(--font-sans);
    color: var(--c-label);
  }
  .sort-toggle:hover { background: var(--c-surface); border-color: var(--c-blue); color: var(--c-label); }
  .sort-toggle svg { stroke: var(--c-soft); }
  .sort-toggle__label { display: inline; }
  .sort-toggle__mobile { display: none; }
  .sort-menu { width: 224px; }

  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; }
  .vacancy-card { padding: 16px; display: flex; flex-direction: column; }
  .vacancy-card:hover { box-shadow: var(--shadow-card-hover-lg); }
  .vacancy-card__title { font-size: 17px; }
  .vacancy-card__salary { font-size: 17px; }
  .vacancy-card__vessel { font-size: 13.5px; }
  .vacancy-card__tags { margin-top: 12px; }
  .vacancy-card__grow { flex: 1; }
  .vacancy-card__foot { margin-top: 14px; padding-top: 11px; }

  .zero { grid-column: 1 / -1; margin: 0; padding: 44px 20px; }
  .zero__title { font-size: 18px; }
  .zero__text { font-size: 14px; margin-bottom: 18px; }

  .more-slot { grid-column: 1 / -1; padding: 0; }

  /* The filter sheet belongs to mobile only — on desktop the rail (frame 1b) replaces it. This hides
     every .sheet-overlay, so a desktop variant of the sheet must restore `display` itself; the wizard
     sheet does that in .wsheet-overlay below (frame 2f). */
  .sheet-overlay { display: none; }

  .site-footer__inner { padding: 26px 32px 30px; flex-direction: row; align-items: center; gap: 28px; }
  .site-footer__brand { margin-top: 0; }
  .site-footer__arrow { display: block; }
  .site-footer__copy { font-size: 12px; }
  .site-footer__nav { margin-left: auto; gap: 24px; }
  .site-footer__nav a { font-size: 13.5px; }

  .plain { padding: 32px 24px 56px; }

  .list-note { margin: 0 0 12px; padding: 10px 14px; }

  /* ----- Vacancy page, frame 1b: content left, sticky terms and Apply right ----- */

  .vacancy-back { background: transparent; border-bottom: 0; }
  .vacancy-back .shell { padding: 18px 32px 0; }
  .vacancy-back__link { min-height: 40px; padding: 0; }
  .vacancy-back__link:hover { background: transparent; color: var(--c-blue-hover); }

  .vacancy-grid {
    display: grid;
    grid-template-columns: 1fr 372px;
    gap: 0 28px;
    padding: 10px 32px 34px;
    align-items: start;
  }
  .vacancy-head { grid-column: 1; grid-row: 1; }
  .vacancy-body { grid-column: 1; grid-row: 2; }
  .apply-rail {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .vacancy-head {
    border: 1px solid var(--c-border);
    border-radius: 14px;
    padding: 24px 26px;
  }
  .vacancy-head__title { margin-bottom: 10px; font-size: 32px; line-height: 1.18; letter-spacing: -.02em; }
  .vacancy-head__meta { gap: 6px 10px; }
  .vacancy-head__company { font-size: 15px; }
  .vacancy-head__posted { font-size: 12.5px; }

  .terms { margin: 0; box-shadow: var(--shadow-rail); }
  .terms__pay { padding: 20px 22px 18px; }
  .terms__salary { font-size: 30px; }
  .terms__period { margin-top: 5px; font-size: 12px; }
  .terms__cell { padding: 14px 22px; }
  .terms__value { margin-top: 6px; font-size: 15px; }
  .terms__cta { display: block; padding: 18px 22px 22px; }
  .terms__cta .apply-btn { min-height: 52px; font-size: 16px; }
  .apply-rail__note { margin: 12px 0 0; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
  .apply-rail__similar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: var(--tap);
    margin-top: 4px;
    font: 500 13px/1 var(--font-sans);
    color: var(--c-blue);
  }
  .apply-rail__similar svg { width: 15px; height: 15px; }
  .apply-rail__trust {
    display: block;
    margin: 0;
    padding: 16px 18px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 14px;
    font: 400 12.5px/1.55 var(--font-sans);
    color: var(--c-muted);
    text-wrap: pretty;
  }
  .apply-rail__trust a { font-weight: 600; }

  .vacancy-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
  .vacancy-block { margin: 18px 0 0; padding: 20px 22px; }
  .vacancy-pair .vacancy-block { margin: 0; }
  .vacancy-pair { margin-top: 18px; }
  .spec__key { width: 112px; }

  .about { padding: 22px 26px; }
  .about__p { margin-bottom: 12px; font-size: 14.5px; line-height: 1.65; max-width: 64ch; }

  .company { padding: 22px 26px; align-items: start; gap: 0 18px; }
  .company__logo { width: 52px; height: 52px; border-radius: 13px; font-size: 17px; }
  .company__name { font-size: 17px; }
  .company__about { grid-column: 2; margin-top: 8px; font-size: 14px; line-height: 1.6; max-width: 60ch; }
  /* Frame 1b folds "on Crewvector since" into the blurb; without a blurb the line stays on its own. */
  .company:has(.company__since-inline) .company__since { display: none; }
  /* With .company__since hidden, .company__body alone is shorter than the 52px logo, which would
     otherwise force the logo's row to that height and leave a ~30px gap above .company__about's
     own 8px margin. Letting the logo span into .company__about's row lets the auto track sizing
     size the first row from .company__body's own content instead — restores the ~8px gap without
     touching the no-description fallback (logo stays single-row there). */
  .company:has(.company__about) .company__logo { grid-row: 1 / span 2; }
  .company__since-inline { display: inline; }
  .company__link { grid-column: 2; margin-top: 6px; font-size: 14px; }

  .similar__title { margin: 26px 0 12px; font-size: 17px; }
  .similar__list { padding: 0; }

  /* The rail carries the call to action on desktop; the mobile panels would duplicate it. */
  .apply-bar,
  .applied-panel,
  .closed-cta { display: none; }
  body:has(.apply-bar) .site-footer__inner,
  body:has(.applied-panel) .site-footer__inner { padding-bottom: 30px; }

  .apply-overlay { align-items: center; justify-content: center; padding: 24px; }
  .apply-sheet { width: 440px; max-width: 100%; max-height: 88vh; border-radius: 18px; box-shadow: var(--shadow-pop); }
}

/* ---------- Account pages ----------
   Design: .crew/design/onboarding/"Crewvector Jobs Onboarding" — 1a/1b/1c mobile 390,
   2a/2b/2c desktop 1280. Mobile puts the form straight on the page background; desktop centres it
   in a 448px white card. No new colours or fonts: everything below comes from the tokens above. */

.auth { padding: 24px 16px 28px; }
.auth__inner { width: 100%; }
.auth__title {
  margin: 0 0 6px;
  font: 700 24px/1.2 var(--font-display);
  color: var(--c-heading);
  letter-spacing: -.01em;
}
.auth__lead {
  margin: 0 0 20px;
  font: 400 14px/1.55 var(--font-sans);
  color: var(--c-body);
  text-wrap: pretty;
}

/* Seafarer | Company switch above the registration form (design "Crewvector Jobs Onboarding" 1b/2b and
   "Crewvector Jobs Company" 1a-1c/2a-2c) — one markup for both screens and both widths; only which tab
   carries --regtabs__tab--active changes. Both segments are always real links (the active one links to
   itself) so the two screens render byte-for-byte the same partial. */
.regtabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  margin: 0 0 20px;
  background: var(--c-border-soft);
  border: 1px solid var(--c-border);
  border-radius: 12px;
}
.regtabs__tab {
  flex: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--c-muted);
  text-decoration: none;
}
.regtabs__tab:hover { color: var(--c-heading); background: rgba(255, 255, 255, .6); }
.regtabs__tab--active,
.regtabs__tab--active:hover {
  background: var(--c-surface);
  box-shadow: 0 1px 3px rgba(16, 36, 59, .14);
  font-weight: 600;
  color: var(--c-heading);
}

/* CV read into the Personal step (frame 1m) */
.wcvbanner { background: #F7FBF1; border: 1px solid var(--c-green); border-radius: 14px; padding: 14px; margin-bottom: 14px; }
.wcvbanner__title { font: 600 14.5px/1.35 var(--font-sans); color: var(--c-heading); }
.wcvbanner__note { margin: 5px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.field__labelrow { display: flex; align-items: center; gap: 7px; }
.wauto-badge {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: .06em;
  color: #1F4E85;
  background: #E7F0FA;
  border: 1px solid #B9CEE6;
  border-radius: 5px;
  padding: 3px 5px;
}

/* Fields */
.fields { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* Same reason as .wdrop[hidden] elsewhere in this file: .field already sets its own display, so the
   [hidden] state (the Document name field, hidden for every type but Other — document-name-and-headings
   spec §1) needs the higher specificity here to still win. */
.field[hidden] { display: none; }
.field__label { font: 500 12px/1 var(--font-sans); color: var(--c-body); }
.field__input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  background: var(--c-surface);
  padding: 0 13px;
  font: 400 15px/1.3 var(--font-sans);
  color: var(--c-ink);
}
.field__input::placeholder { color: var(--c-placeholder); }
.field__input:focus-visible { border-color: var(--c-blue); }
.field__error { font: 400 12.5px/1.45 var(--font-sans); color: var(--c-chip-active-ink); }
/* ASP.NET's own validation tag helpers add these classes next to the ones already in the markup —
   "input-validation-error" on the field itself, "field-validation-error" on its message — which is
   enough to hook the invalid state without inventing one of our own (macет, updated 2026-08-23). */
.field__input.input-validation-error,
.field__select.input-validation-error { border-color: var(--c-invalid); }
.field-validation-error { color: var(--c-invalid); }

/* Password field with the show/hide eye (the button is revealed by account.js). */
.field__wrap { position: relative; display: flex; align-items: center; }
.field__wrap .field__input { padding-right: 50px; }
.field__toggle {
  position: absolute;
  right: 6px;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 0; border-radius: 9px;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
}
.field__toggle svg { width: 17px; height: 17px; }
.field__toggle:hover { color: var(--c-blue); }

/* Password strength: three bars, filled by account.js. */
.strength { display: flex; gap: 4px; margin-top: 2px; }
.strength__bar { flex: 1; height: 3px; border-radius: 2px; background: var(--c-border); }
.strength__bar.is-on { background: var(--c-green); }
.strength__hint { font: 400 12px/1.45 var(--font-sans); color: var(--c-muted); }

/* The honeypot: the wrapper leaves the screen, the input itself stays a normal focusable input.
   display:none or hidden on the input is exactly what a form-filling script checks for. */
.form-shield {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* Consent block (frames 1b/2b) */
.consent {
  display: flex;
  gap: 11px;
  margin-top: 18px;
  padding: 13px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-surface);
}
.consent__box {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 22px; height: 22px;
  margin: 0;
  border: 1.5px solid var(--c-check-border);
  border-radius: 6px;
  background: var(--c-surface);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.consent__box:checked { background: var(--c-blue); border-color: var(--c-blue); }
.consent__box:checked::after {
  content: "";
  width: 14px; height: 14px;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") no-repeat center / contain;
}
.consent__text { margin: 0; flex: 1; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.consent__text a { font-weight: 600; }

/* Buttons and rows */
.btn--wide {
  width: 100%;
  min-height: 52px;
  border-radius: 12px;
  background: var(--c-blue);
  color: #fff;
  font: 600 15.5px/1 var(--font-sans);
}
.btn--wide:hover { background: var(--c-blue-hover); color: #fff; }
.btn--wide:disabled { background: var(--c-border-soft); color: var(--c-disabled-ink); cursor: default; }
.btn--wide.is-spaced { margin-top: 16px; }
.btn--wide.is-spaced-lg { margin-top: 20px; }

.auth__forgot { display: flex; align-items: center; min-height: var(--tap); margin-top: 2px; }
.auth__forgot a { font: 500 13px/1 var(--font-sans); }

.auth__divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.auth__divider::before,
.auth__divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border); }
.auth__divider span { font: 400 11px/1 var(--font-mono); color: var(--c-muted); }

.social { display: flex; flex-direction: column; gap: 8px; }
.social__btn {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--c-border);
  border-radius: 11px;
  background: var(--c-pale);
  color: var(--c-disabled-ink);
  font: 600 14.5px/1 var(--font-sans);
  cursor: not-allowed;
}
.social__soon {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .06em;
  background: var(--c-border-soft);
  color: var(--c-muted);
  border-radius: 5px;
  padding: 4px 6px;
}

.auth__alt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 48px;
  margin-top: 12px;
  font: 400 13.5px/1 var(--font-sans);
  color: var(--c-body);
}
.auth__alt a { font-weight: 600; }

/* Notices. The design has no error state and the palette has no red, so a failed attempt is a blue
   notice with an accent rule rather than an invented colour. */
.notice {
  margin: 0 0 16px;
  padding: 11px 13px;
  border-radius: 12px;
  border-left: 3px solid var(--c-blue);
  background: var(--c-tag-blue-bg);
  font: 400 13.5px/1.5 var(--font-sans);
  color: var(--c-chip-active-ink);
  text-wrap: pretty;
}
.notice--done {
  border-left-color: var(--c-green);
  background: var(--c-applied-bg);
  color: var(--c-applied-ink);
}
.notice ul { margin: 6px 0 0; padding-left: 18px; }
.notice p { margin: 0; font: inherit; color: inherit; }

/* Confirm your e-mail (frames 1c/2c) */
.auth--centered { text-align: center; }
.verify__icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--c-tag-blue-bg);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  color: var(--c-blue);
}
.verify__icon svg { width: 26px; height: 26px; }
.verify__title { margin: 0 0 8px; font: 700 22px/1.25 var(--font-display); color: var(--c-heading); }
.verify__lead { margin: 0 0 22px; font: 400 14px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.verify__address { font-weight: 600; color: var(--c-ink); }
.code { display: flex; gap: 8px; justify-content: center; }
.code__digit {
  width: 46px; height: 56px;
  padding: 0;
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  background: var(--c-surface);
  text-align: center;
  font: 600 22px/1 var(--font-mono);
  color: var(--c-ink);
}
.code__digit:focus-visible { border-color: var(--c-blue); }
.verify__resend {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 6px;
  font: 400 13px/1.4 var(--font-mono);
  color: var(--c-muted);
}
.verify__resend button {
  border: 0;
  background: none;
  padding: 0;
  font: 500 13px/1.4 var(--font-sans);
  color: var(--c-blue);
  cursor: pointer;
}
.verify__resend button:hover { color: var(--c-blue-hover); }
.verify__hint { margin: 6px 0 0; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.verify__hint a { font-weight: 600; }

/* Signed-in state in the header */
.site-header__account { display: flex; align-items: center; gap: 1.5rem; }
.site-header__email {
  display: none;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font: 500 13px/1 var(--font-sans);
  color: var(--c-label);
}
.site-header__signout {
  border: 1px solid var(--c-border);
  border-radius: 10px;
  background: var(--c-surface);
  color: var(--c-label);
  font: 600 13px/1 var(--font-sans);
  padding: 0 14px;
  min-height: var(--tap);
  cursor: pointer;
}
.site-header__signout:hover { border-color: var(--c-card-hover-border); color: var(--c-blue); }

/* ---------- Account pages, desktop (frames 2a/2b/2c) ---------- */

@media (min-width: 1024px) {
  .auth { display: flex; justify-content: center; padding: 46px 32px 56px; }
  .auth__inner { width: 448px; max-width: 100%; }
  .auth__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 30px;
  }
  .auth--centered .auth__card { padding: 34px 30px; }

  .regtabs__tab { min-height: 42px; font-size: 14px; }
  .auth__title { font-size: 26px; }
  .auth__lead { margin-bottom: 22px; font-size: 14.5px; }
  .verify__icon { width: 54px; height: 54px; border-radius: 15px; margin-bottom: 18px; }
  .verify__icon svg { width: 27px; height: 27px; }
  .verify__title { font-size: 24px; }
  .verify__lead { margin-bottom: 24px; font-size: 14.5px; }

  .consent { margin: 18px 0; padding: 14px; background: var(--c-pale); }
  .auth__divider { margin: 20px 0; }
  .social { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .social__btn { font-size: 14px; }
  .auth__alt { margin-top: 0; }

  .code__digit { width: 52px; height: 60px; border-radius: 12px; font-size: 24px; }

  .site-header__email { display: block; }
}

/* ---------- Profile wizard ----------
   Design: .crew/design/onboarding/"Crewvector Jobs Onboarding" — 1k/1e/1f/1g/1h/1n mobile 390,
   1d/2d/2e/2f/2g/2j desktop 1280. Education (1n/2j) reuses the Sea service card and sheet
   patterns. Mobile-first, same tokens as the rest of the site; the only additions are the
   warning-chip colours the design itself introduces (frame 1f, "Expires soon"). */

:root {
  --c-warn-ink: #8A5A00;
  --c-warn-bg: #FFF6E4;
  --c-warn-border: #E8B451;
  /* Refusals, as the scan zone shows them (frames 1s/2o). Distinct from the amber above on purpose:
     amber is "this certificate runs out soon", red is "this file was not accepted". */
  --c-error-ink: #A32020;
  --c-error-bg: #FDECEC;
  --c-error-border: #E1A6A6;
  --c-error-soft: #FDF3F3;
  /* Scans (1r/2n): the tint behind a document icon, and the blue the "still processing" line is set in. */
  --c-scan-icon-bg: #EEF3F9;
  --c-scan-note-ink: #1B4E86;
  /* The dark full-size viewer (1t): the stage the file is shown on, and the two whites over navy. */
  --c-viewer-bg: #1B2A3C;
  --c-on-dark-line: rgba(255, 255, 255, .12);
  --c-on-dark-hover: rgba(255, 255, 255, .22);
  --c-on-dark-muted: rgba(255, 255, 255, .65);
}

/* Wizard header. Every step page below Start draws its own step strip right under this header
   (.wizard__strip on Personal, .wizard__band on Documents/Sea service/Education/Photo & CV) — on
   mobile that put two headings on screen at once ("Seafarer profile" here, the step's own title right
   below). Frame 1e, which is where the "Seafarer profile" row came from, is gone from the current
   canvas, and every mobile step frame that remains (1f, 1h, 1n, 1i) starts straight on the step strip
   with no header above it — so on mobile this header is hidden entirely on every step page except
   Start (mockup frame 1k), which has no step strip of its own to duplicate. Going back on mobile still
   works: every step's bottom bar carries its own Back button (_WizardNav), so losing the arrow here
   costs nothing. Desktop keeps the header as it always did (frames 2f/2g/2j): brand + Finish later +
   avatar, reset back to visible below. */
.wiz-header:not(.wiz-header--start) { display: none; }
.wiz-header .site-header__inner { gap: 6px; padding: 8px 8px 8px 6px; }
.wiz-header__back {
  width: var(--tap);
  height: var(--tap);
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: var(--c-label);
}
.wiz-header__back:hover { background: var(--c-field-bg); color: var(--c-label); }
.wiz-header__back svg { width: 18px; height: 18px; }
.wiz-header__name { font: 600 15px/1.2 var(--font-display); color: var(--c-heading); }
.wiz-header__brand { display: none; }
.wiz-header__later {
  font: 500 13px/1 var(--font-sans);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  padding: 0 8px;
}
/* The account block (avatar + Sign out, .site-header__account — shared with the plain header) stays off
   the wizard header on mobile exactly as the bare avatar div used to (profile-nav-fixes item 4: only the
   Start page's header shows on mobile at all, and neither the avatar nor sign-out belong on it there). */
.wiz-header .site-header__account { display: none; }
.wiz-header--start .wiz-header__brand { display: flex; }
.wiz-header--start .wiz-header__later { display: none; }

/* Shell */
.wizard { padding-bottom: 96px; }
.wizard--start { padding-bottom: 28px; }
.wizard__shell { width: 100%; }
/* The three list steps (Documents/Sea service/Education) and Photo & CV draw straight into this shell
   with no inner wrapper of their own — unlike .wizard__shell--narrow, whose form supplies its own
   padding (.wizard__body below). Without this the shell's own content (the section divider, the cards)
   sits flush against the viewport edge on narrow widths: no gap under .wizard__band, and a divider
   heading with no side inset at all next to cards whose *own* 14px card padding only looks like an
   inset by comparison (mockup frames 1f/1h/1n, macet "Crewvector Jobs Onboarding": 14px 12px 16px).
   Reset to 0 at the 1024px breakpoint below, where the two-column desktop layout supplies its own. */
.wizard__shell--wide { padding: 14px 12px 16px; }
.wizard__intro { display: none; }
.wizard__heading {
  margin: 0 0 6px;
  font: 700 28px/1.2 var(--font-display);
  color: var(--c-heading);
  letter-spacing: -.02em;
}
.wizard__lead { margin: 0 0 20px; font: 400 14.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

.wizard__strip,
.wizard__band {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  padding: 12px 16px 14px;
}
/* Centered, not baseline: baseline only works while every child is text (title + counter) — a square
   icon button has no text baseline to share, so .wizard__back used to hang from the row's baseline and
   sag well below the title (band-align fix). Center keeps the title/counter pair looking the same as
   before, since two same-line text siblings land in the same place either way. */
.wizard__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
.wizard__step-title { font: 600 14px/1.2 var(--font-display); color: var(--c-heading); }
/* Pushed to the row's far end with an auto margin rather than .wizard__meta's own justify-content,
   because the counter and .wizard__back below never appear together (one wizard step, one wizard
   passed) — an auto margin gets the same "title left, this right" result without caring which of
   the two the title is currently paired with. */
.wizard__step-counter { font: 400 11.5px/1 var(--font-mono); color: var(--c-muted); margin-left: auto; }
.wizard__band-note { margin: 8px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
/* Return to the profile (band-back-button spec): only past the wizard, when this list is a
   standalone page reached from the dashboard rather than a step — see _WizardBand.cshtml. Sized and
   shaped like the old wiz-header__back it replaces, but drawn smaller (32px) than the 44px tap minimum
   so the square doesn't outweigh a 14/19px title next to it; the 44px hit area (var(--tap)) moves to
   the ::before instead of the visible box, per the band-align fix. */
.wizard__back {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  color: var(--c-label);
}
/* Invisible, centered on the button, sized up to var(--tap) — this is what a thumb actually hits. */
.wizard__back::before {
  content: "";
  position: absolute;
  inset: calc((32px - var(--tap)) / 2);
}
.wizard__back:hover { background: var(--c-field-bg); color: var(--c-label); }
.wizard__back svg { width: 18px; height: 18px; }

/* Progress bars (all frames; labels only on the desktop shell, frame 1d) */
.wbars { display: flex; gap: 5px; }
.wbars--labeled { gap: 8px; }
.wbars__seg { flex: 1; min-width: 0; display: block; }
.wbars__bar { display: block; height: 5px; border-radius: 3px; background: var(--c-border-input); }
.wbars__bar.is-on { background: var(--c-blue); }
a.wbars__seg:hover .wbars__bar { background: var(--c-blue-hover); }
a.wbars__seg:hover .wbars__bar:not(.is-on) { background: var(--c-card-hover-border); }
.wbars__lbl {
  display: block;
  margin-top: 8px;
  font: 400 12.5px/1.3 var(--font-sans);
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wbars__lbl.is-current { font-weight: 600; color: var(--c-heading); }

/* Step body */
.wizard__body { padding: 14px 12px 0; }
.wizard__card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
}
.wizard__cardhead { display: none; }
.wizard__cardtitle { margin: 0; font: 600 19px/1.2 var(--font-display); color: var(--c-heading); }
.wizard__note { display: none; }

.wfields { display: flex; flex-direction: column; gap: 14px; }
.wgrid { display: grid; grid-template-columns: 1fr; gap: 14px 10px; }
.wgrid--always, .wgrid--three, .wgrid--sheet, .wgrid--four { grid-template-columns: 1fr 1fr; }
/* The two phone fields: each grows past the plain field height once its messenger picker is drawn under
   it, and the two need not match — align-items: start (default: stretch) keeps a shorter number's own
   field from being stretched down to the taller one's height. */
.wgrid--top { align-items: start; }
.field__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background: var(--c-surface) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351637A' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E") no-repeat right 13px center / 14px 14px;
}
.field__input--mono { font-family: var(--font-mono); font-size: 14.5px; }
/* The "Comment" box of the add/edit sheets: three lines tall, the frame of every other field
   (frames 1g/2f, 1h, 1n/2j). The vertical padding is its own — .field__input centres one line. */
.field__input--area {
  min-height: 76px;
  padding: 12px 13px;
  font: 400 14px/1.5 var(--font-sans);
  resize: vertical;
}
.field__label-optional { font-weight: 400; color: var(--c-muted); }
.field__hint { font: 400 11.5px/1.4 var(--font-sans); color: var(--c-muted); }
/* Field-level error with an icon and, sometimes, a link inside the sentence (design "Crewvector Jobs
   Company", frames 1b/2b: the occupied-email and weak-password notices sit under their own field, not
   in a page banner). asp-validation-for's plain span still covers the attribute-level messages
   (required, too long); this is only for the two cases that need an icon or a link mid-sentence. */
.field__hint--error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--c-invalid);
}
.field__hint--error svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: var(--c-invalid); }
.field__hint--error a { font-weight: 600; color: inherit; }
.wdivider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  font: 400 10.5px/1 var(--font-mono);
  color: var(--c-muted);
  letter-spacing: .05em;
}
/* Separate "optional" mark next to a section title (macет "Crewvector Jobs CV Reading", frame 1d,
   updated 2026-08-24) — a muted, lower-case sibling of the title, not part of it. */
.wdivider__optional { color: var(--c-placeholder); }
.wdivider__line { flex: 1; height: 1px; background: var(--c-border); }
/* The CV FILE heading's own gap before the card below it (mockup 1i/2h: 12px mobile, 14px desktop
   further down in the 1024px block) — scoped to this one heading, not added to the bare .wdivider
   above, which other pages use without wanting the same breathing room (photo-block-fixes, 2026-08-25). */
.wdivider--gap { margin-bottom: 12px; }

/* The Documents step's own section headings (macет "Crewvector Jobs Onboarding", frames 2e/1f,
   updated 2026-08-24) — heavier and darker than the bare .wdivider the Personal step's headings use
   (document-name-and-headings spec §2): the two are visually different things and share only the
   line-and-layout half of the class, not the type. Font size differs by width — 14px on desktop, the
   design's own 11.5px below it — everything else is the same at both. */
.wdivider.wdivider--section {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1;
  font-weight: 600;
  color: var(--c-body);
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 8px 0;
}
/* The document count next to a section heading — our own addition, not in the design (spec §2). Its
   own element and its own, softer weight so it reads as a count rather than as the .wdivider__optional
   mark above, though both end up the same muted colour: the design uses one close to it (#8494A6) for
   this exact count in frames 2e/1f, and re-deriving a second near-identical token would only add one
   more grey to the palette for no visible difference. */
.wdivider__count {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--c-body);
  padding: 7px 9px; 
}

/* Actions: desktop row inside the card / under the grid; mobile — fixed bottom bar (frame 1e) */
.wizard__actions { display: none; }
.wizard__actions-spacer { flex: 1; }
.wizard__later-btn {
  border: 0;
  background: none;
  padding: 0 8px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--c-blue);
  min-height: var(--tap);
  display: flex;
  align-items: center;
  cursor: pointer;
}
.wizard__later-btn:hover { color: var(--c-blue-hover); }

.wbtn { border-radius: 12px; font: 600 14.5px/1 var(--font-sans); min-height: 50px; padding: 0 18px; }
.wbtn--primary { background: var(--c-blue); color: #fff; border: 0; }
.wbtn--primary:hover { background: var(--c-blue-hover); color: #fff; }
.wbtn--primary:disabled { background: var(--c-border-soft); color: var(--c-disabled-ink); cursor: default; }
.wbtn--back { border: 1px solid var(--c-border-input); background: var(--c-surface); color: var(--c-label); }
.wbtn--back:hover { border-color: var(--c-blue); color: var(--c-label); }
.wbtn--grow { flex: 1; }
.wbtn--wide { width: 100%; }

.wizard__bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  background: rgba(255, 255, 255, .97);
  border-top: 1px solid var(--c-border-input);
  padding: 12px 16px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-bar);
}

/* Step 0 — Start with your CV (frames 1k/2d; upload is a later phase, hence disabled + "soon") */
.wizard--start .wizard__shell { padding: 24px 16px 0; }
.wstart__title {
  margin: 0 0 8px;
  font: 700 24px/1.2 var(--font-display);
  color: var(--c-heading);
  letter-spacing: -.01em;
  text-wrap: pretty;
}
.wstart__lead { margin: 0 0 20px; font: 400 14px/1.6 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.wdrop {
  display: flex;
  flex-direction: column;
  border: 1px dashed var(--c-card-hover-border);
  border-radius: 14px;
  background: var(--c-surface);
  padding: 26px 20px;
  text-align: center;
}
.wdrop__icon { width: 28px; height: 28px; margin: 0 auto 10px; color: var(--c-blue); }
.wdrop__label { font: 600 15px/1.3 var(--font-sans); color: var(--c-blue); }
.wdrop__hint { font: 400 11.5px/1.5 var(--font-mono); color: var(--c-muted); margin-top: 6px; }
.wdrop--disabled { background: var(--c-pale); }
.wdrop--disabled .wdrop__icon,
.wdrop--disabled .wdrop__label { color: var(--c-disabled-ink); }
.wdrop--compact { padding: 18px; }
/* A file dragged over the zone (site.js): the same highlight picking one by click would get. */
.wdrop.is-dragover { border-color: var(--c-blue); background: var(--c-tag-blue-bg); }
/* .wdrop already sets display: flex above; .wdrop--pick (below) still overrides it back to
   display: block for the Documents zones — same specificity, later in the file wins, same as it did
   before this zone had a display of its own. [hidden] needs the higher specificity here to still win —
   the zone is hidden by script while a file is picked and while one is already attached. */
.wdrop[hidden] { display: none; }
.wstart__actions { margin-top: 14px; display: flex; flex-direction: column; align-items: stretch; }
/* Same reason as .wdrop[hidden] above: .wstart__actions already sets its own display, so the [hidden]
   attribute site.js applies on submit (data-cv-actions) needs the matching specificity to still win. */
.wstart__actions[hidden] { display: none; }
.wstart__manual {
  font: 600 13.5px/1 var(--font-sans);
  min-height: 48px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wstart__note { margin: 6px 0 0; font: 400 12px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }

/* Step 0, uploaded/reading state (frame 1k second card) */
.wstart__uploaded { margin-top: 14px; }
/* The "uploading…" strip is shown by site.js the instant the form submits, and hidden by default so a
   scriptless browser never sees it — the file goes straight to the ordinary POST either way. */
.wstart__uploading[hidden] { display: none; }

/* Cards (frames 1f/1h; desktop grid 2e/2g) */
.wcards { display: flex; flex-direction: column; gap: 10px; }
.wcard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 14px; }
.wcard__head { display: flex; gap: 10px; align-items: flex-start; }
.wcard__text { flex: 1; min-width: 0; }
/* Edit and delete, in a row, same corner as before (macет "Crewvector Jobs Onboarding", updated
   2026-08-23) — deleting used to live inside the edit sheet; now both controls start from the card. */
.wcard__icons { display: flex; gap: 2px; flex: none; }
/* document-cards-wide spec: a long title, vessel name or number must wrap inside its own line rather
   than force the card wider and push .wcard__icons out of view — same rule for all three card kinds
   below, so it lives on the shared rule rather than a per-page one. */
.wcard__title { font: 600 15px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; overflow-wrap: anywhere; }
.wcard__vessel { font: 500 13px/1.4 var(--font-sans); color: var(--c-ink); margin-top: 5px; text-wrap: pretty; overflow-wrap: anywhere; }
.wcard__sub { font: 400 12px/1.5 var(--font-mono); color: var(--c-muted); margin-top: 3px; text-wrap: pretty; overflow-wrap: anywhere; }
/* Flag document (document-categories spec §5): the heroicons flag-outline, inline at the end of the sub
   line, same contour as frame 2e. */
.wcard__flag { display: inline-flex; align-items: center; vertical-align: -2px; margin-left: 5px; }
.wcard__flag svg { width: 14px; height: 14px; }
/* The "·" between two fields sharing a .wrow (document-cards-wide spec, macets 2g/2j) — a plain
   character, not a border or generated content, so it is real text a screen reader (and a test) can
   see. Present in the markup at every width; only shown once .wrow itself turns into a row below. */
.wcard__dot { display: none; color: var(--c-placeholder); font: 400 13px/1 var(--font-sans); }
/* One row of a card's text block that may hold more than one field — a document's title next to its
   number, a contract's rank next to its vessel, a vessel's specs next to its engine. Stacked (today's
   mobile look) until there is room to flow inline; the field count and whether a .wcard__dot sits
   between them is the only thing that differs between a document, a contract and an education entry —
   the row itself is the same component everywhere. */
.wrow { }
.wcard__foot {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border-soft);
  font: 500 12.5px/1.35 var(--font-sans);
  color: var(--c-label);
  text-wrap: pretty;
}
.wicon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex: none;
  color: var(--c-muted);
}
.wicon:hover { background: var(--c-field-bg); color: var(--c-muted); }
.wicon svg { width: 16px; height: 16px; }
.wchips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.wchip {
  font: 500 11.5px/1 var(--font-mono);
  color: var(--c-body);
  background: var(--c-field-bg);
  border-radius: 8px;
  padding: 7px 9px;
}
.wchip--blue { color: var(--c-chip-active-ink); background: var(--c-tag-blue-bg); }
.wchip--warn {
  color: var(--c-warn-ink);
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-border);
  padding: 6px 8px;
}
/* "Expired" (frame 2m) — same shape as .wchip--warn, its own red rather than --c-danger-*
   (expiry-and-dialog spec §2). */
.wchip--expired {
  color: var(--c-expired-ink);
  background: var(--c-expired-bg);
  border: 1px solid var(--c-expired-border);
  padding: 6px 8px;
}
/* Scan chips (frames 1f/2n). "Scan uploaded" is a done chip in the brand green; "No scan" is a dashed
   outline and a link — the one chip in the row that is worth clicking, because it is the one with
   something missing behind it. */
.wchip--scan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--c-applied-ink);
  background: var(--c-applied-bg);
  border: 1px solid var(--c-green);
  padding: 6px 8px;
}
.wchip--scan svg { width: 12px; height: 12px; flex: none; }
.wchip--none {
  color: var(--c-muted);
  background: var(--c-field-bg);
  border: 1px dashed var(--c-check-border);
  padding: 6px 8px;
}
.wchip--none:hover { color: var(--c-blue); border-color: var(--c-card-hover-border); }
.wadd {
  min-height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--c-card-hover-border);
  border-radius: 12px;
  background: var(--c-surface);
  font: 600 14.5px/1 var(--font-sans);
  color: var(--c-blue);
}
.wadd:hover { border-color: var(--c-blue); background: var(--c-pale); color: var(--c-blue); }
.wadd svg { width: 16px; height: 16px; }

/* Empty states (frames 1f/1h) */
.wempty {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 26px 20px;
  text-align: center;
}
.wempty__icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--c-field-bg);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: var(--c-soft);
}
.wempty__icon svg { width: 22px; height: 22px; }
.wempty__title { margin: 0 0 8px; font: 600 16px/1.3 var(--font-display); color: var(--c-heading); }
.wempty__lead { margin: 0 0 16px; font: 400 13.5px/1.5 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.wempty__note { margin: 14px 0 0; font: 400 12px/1.5 var(--font-sans); color: var(--c-muted); }

/* Languages block, under the Education step's cards (frames 2j/1n) — no sheet, no dialog; every row is
   edited and saved right on the card, entirely on the client (_LanguagesCard, site.js). */
.wlang-card { margin-top: 10px; }
.wlang__title { margin: 0; font: 600 15px/1.2 var(--font-display); color: var(--c-heading); }
.wlang__note { margin: 7px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.wlang__rows { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
/* One tap column on a saved row: the trash and the checkmark share the same slot so the row never shows
   two buttons at once and its width never shifts when the checkmark replaces the trash. A blank row's
   own slot only ever holds the checkmark (no trash — the macet draws none for a row with nothing saved
   yet to delete). The add row below matches with a single empty placeholder column of its own. */
.wlang__row { display: grid; grid-template-columns: 1fr 1fr var(--tap); gap: 8px; align-items: end; }
.wlang__addform { display: flex; flex-direction: column; gap: 10px; }
/* The row's own trash button — same 44px column the macet gives it (var(--tap)), taller than the
   generic .wicon so it lines up with the 48px selects beside it. .wlang__save (the checkmark — not in
   the macet, see _LanguagesCard's own remark) sits in the same grid cell on a saved row; only one of the
   two is ever visible (site.js toggles the `hidden` attribute), so pinning both to column 3 is what
   makes them swap in place instead of one falling to a new row. */
.wlang__remove, .wlang__save {
  grid-column: 3;
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: 10px;
  background: none;
  display: grid;
  place-items: center;
  color: var(--c-muted);
}
.wlang__remove:hover, .wlang__save:hover { background: var(--c-field-bg); }
/* The checkmark is green whenever it is shown — a row is only ever "changed" or "just filled in" when
   it appears (language-row-edit spec), never a neutral default action like the trash beside it. */
.wlang__save { color: var(--c-green); }
.wlang__remove svg, .wlang__save svg { width: 16px; height: 16px; }
/* Same reason as .wcam-trigger[hidden] above: both buttons set their own display, so [hidden] needs the
   higher specificity here to still win — otherwise the button HTML's `hidden` attribute (no script, or
   before site.js runs) would not actually hide it and the slot would show both at once. */
.wlang__remove[hidden], .wlang__save[hidden] { display: none; }
.wadd--lang { min-height: 48px; font-size: 14px; }

/* Add/edit sheet (1g mobile bottom sheet; 2f desktop modal). A native <dialog> rather than a hand-built
   overlay (dialog-sheets spec, same move dialog-confirmations made for the delete questions): .sheet and
   .wsheet still give the panel its look for free — both are class-only, so they do not care that the
   element carrying them is now a <dialog> instead of the div the home-page filter sheet still uses. Only
   the positioning is new, since there is no .sheet-overlay flex parent left to centre or bottom-anchor
   it; ::backdrop replaces that parent's own dimmed background. */
/* .sheet's own `display: flex` is an author rule, and an author rule always beats the UA stylesheet's
   `dialog:not([open]) { display: none }` — no matter the specificity. Once .sheet moved from the div it
   used to be onto this <dialog> (dialog-sheets spec), a closed dialog kept the flex box visible, empty,
   until htmx had something to put in it. Restating the UA rule here, after .sheet, wins the cascade back
   and hides it again while closed. dialog.confirm never set its own `display`, so it was never at risk —
   but it is covered too, so the next dialog on the site does not have to rediscover this. */
dialog:not([open]) { display: none; }
/* The scroll used to hang on the dialog itself (.wsheet's own overflow-y), and a classic scrollbar
   paints inside the element's own border box — on desktop it covered the right-hand corners' own
   border-radius while the left ones, with no scrollbar over them, stayed visibly round (acceptance
   defect on document-row-chips). Moving the scroll onto .wsheet__body and clipping .wsheet itself fixes
   the corners and, because .sheet__head sits in .wsheet as .wsheet__body's own sibling rather than
   inside it, keeps the header (title + close button) fixed in place while only the body scrolls — the
   sheet's own border-bottom on the head was already drawn for exactly that separation. */
.wsheet { overflow: hidden; }
dialog.wsheet {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  border: 0;
  padding: 0;
}
dialog.wsheet::backdrop { background: rgba(16, 36, 59, .45); }
/* A container of the right height, not the word "loading" (dialog-sheets spec) — the instant gap
   between showModal() opening the dialog and htmx swapping the real form into #wsheet-body. */
.wsheet__skeleton { min-height: 320px; }
/* min-height: 0 overrides the flex item's default auto — without it a column flex child never shrinks
   below its content's natural height, and overflow-y: auto never gets the chance to kick in. */
.wsheet__body { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; min-height: 0; }
.wsheet__divider { display: flex; align-items: center; gap: 12px; }
.wsheet__divider::before,
.wsheet__divider::after { content: ""; flex: 1; height: 1px; background: var(--c-border-soft); }
.wsheet__divider span { font: 400 11px/1 var(--font-mono); color: var(--c-muted); letter-spacing: .04em; }
.wsheet__actions { display: flex; gap: 12px; padding-top: 4px; }
.wsheet__actions .wbtn--primary { flex: 1; }

/* "Some fields need fixing" — sits above the first field once a save attempt has failed; a fresh open
   of the sheet never shows it (macет "Crewvector Jobs Onboarding", updated 2026-08-23, frame 1g). The
   per-field messages stay where they are; this is a summary above them, not a replacement. */
.wform-errors {
  display: flex;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--c-danger-border);
  border-radius: 12px;
  background: var(--c-danger-bg);
}
.wform-errors__icon { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--c-invalid); }
.wform-errors__title { margin: 0; font: 700 13.5px/1.4 var(--font-sans); color: var(--c-invalid); }
.wform-errors__lead { margin: 3px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-invalid); text-wrap: pretty; }

/* ---------- The scan zone inside the document sheet (frames 1r/2n, refusals 1s/2o) ---------- */

.wscan { display: flex; flex-direction: column; gap: 10px; }
.wscan__divider {
  font: 400 10.5px/1 var(--font-mono);
  color: var(--c-muted);
  letter-spacing: .05em;
}
/* 1r and 2n word some things differently — the format hint in the opposite order, a date a phone has
   no room for. Both wordings are rendered and one is hidden, so the copy stays in the markup where it
   can be read and asserted on, instead of being assembled in CSS. */
.wscan__at-wide,
.wscan__at-wide-inline { display: none; }
/* Elements that set their own display later in this file would otherwise win on source order alone —
   same specificity, later rule. Naming both classes puts the hiding back in front. */
.btn.wscan__at-wide,
.scanview__icon.wscan__at-wide { display: none; }
/* The empty zone is a <label> wrapping the file input: the whole dashed area is the control, which is
   what makes it work on a phone and without a line of script. */
.wdrop--pick { display: block; cursor: pointer; padding: 20px; border-radius: 12px; }
.wdrop--pick:hover { border-color: var(--c-blue); }
.wdrop--pick:focus-within { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.wdrop__note { margin-top: 8px; font: 400 12px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
/* Every .wdrop label wraps the real file input as a click/tap target, not a visible control —
   this used to be scoped to .wdrop--pick only, which left the browser's native "Choose File"
   button showing (and overlapping the copy) on zones like step 0 that never got that modifier. */
.wdrop input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
.wdrop--error { border-color: var(--c-error-border); background: var(--c-error-soft); }
.wdrop--error .wdrop__icon,
.wdrop--error .wdrop__label { color: var(--c-error-ink); }

.wscanfile {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px;
  border: 1px solid var(--c-border-input);
  border-radius: 12px;
  background: var(--c-surface);
}
/* The picked-but-not-saved instance of this box starts [hidden] and the display set above needs the
   higher specificity here to still win when a script shows or hides it. */
.wscanfile[hidden] { display: none; }
/* Page-shaped, matching the 3:4 the preview is generated at, so a scan of A4 fills the box. */
.wscanfile__thumb {
  width: 62px;
  height: 80px;
  flex: none;
  border-radius: 8px;
  border: 1px solid var(--c-border-input);
  background: var(--c-field-bg);
  object-fit: cover;
  display: grid;
  place-items: center;
  color: var(--c-disabled-ink);
}
/* No page image: a labelled document icon (1r/2n). The label is what makes it informative rather than
   decorative — it says what the file is, which is all an icon can honestly say about a PDF. */
.wscanfile__thumb--blank,
.wscanfile__thumb--wait {
  background: var(--c-scan-icon-bg);
  border-color: var(--c-border-input);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--c-soft);
}
.wscanfile__thumb--blank svg { width: 22px; height: 22px; }
.wscanfile__thumb--wait { color: var(--c-disabled-ink); }
.wscanfile__thumb--wait svg { width: 20px; height: 20px; }
.wscanfile__kind {
  font: 500 9.5px/1 var(--font-mono);
  color: var(--c-soft);
  letter-spacing: .06em;
}
.wscanfile__text { flex: 1; min-width: 0; }
.wscanfile__name {
  font: 500 13.5px/1.35 var(--font-sans);
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wscanfile__meta { margin-top: 3px; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
/* The recognition zone's own "on its way" state (macет decision, 2026-08-23) — indeterminate, next to
   the file name; the bar reuses the reading cards' own track and runner (.wread__track/.wread__runner)
   so the two "we can't tell you how far along this is" moments look like the same idea. */
.wscanfile__uploading { margin-top: 6px; }
.wscanfile__uploading-label { font: 500 12px/1.4 var(--font-sans); color: var(--c-muted); }
.wscanfile__uploading .wread__track { margin-top: 6px; }
.wscanfile__note {
  margin: 6px 0 0;
  font: 500 12.5px/1.5 var(--font-sans);
  color: var(--c-scan-note-ink);
  text-wrap: pretty;
}
.wscanfile__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wscanfile__actions .wbtn { min-height: var(--tap); padding: 0 12px; font-size: 13px; }
.wscanfile__remove {
  border: 1px solid var(--c-error-border);
  background: var(--c-surface);
  color: var(--c-error-ink);
  cursor: pointer;
}
.wscanfile__remove:hover { background: var(--c-error-soft); color: var(--c-error-ink); }

.wscan__error {
  display: flex;
  gap: 9px;
  padding: 11px 12px;
  border: 1px solid var(--c-error-border);
  border-radius: 11px;
  background: var(--c-error-bg);
}
.wscan__error svg { width: 16px; height: 16px; flex: none; margin-top: 1px; color: var(--c-error-ink); }
.wscan__error p {
  margin: 0;
  font: 500 13px/1.5 var(--font-sans);
  color: var(--c-error-ink);
  text-wrap: pretty;
}

/* Cancel, on the file picked but not yet saved: drawn by the script only, next to the name in the same
   wscanfile box the finished scan uses. Without a script the box stays [hidden] and the form is an
   ordinary multipart POST that carries the file along — slower to watch, exactly as functional. */
/* An icon button at 390 (1r), the word "Cancel" at 1280 (2n) — the mobile card has no room for a
   label next to a file name. */
.wscan__cancel {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: none;
  display: grid;
  place-items: center;
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-error-ink);
  cursor: pointer;
}
.wscan__cancel svg { width: 16px; height: 16px; }
.wscan__cancel:hover { background: var(--c-error-soft); color: var(--c-error-ink); }
/* The line under the zone. Which sentence it carries is the state's business (see the markup); what it
   looks like never changes. */
.wscan__foot { margin: -2px 0 0; font: 400 12px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.wscan__remove-form { display: none; }

/* ---------- A scan at full size (frames 1t/2p) ---------- */

/* Two looks, one markup. At 390 (1t) the viewer is the screen and it is dark all through — the file is
   the only thing on it, and dark chrome keeps a scan of white paper from being blinding. At 1280 (2p)
   the same elements become a light modal over the document list. The file itself is drawn by the
   browser: an <img>, or the PDF viewer every browser already has. */
.scanview {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  background: var(--c-navy);
}
.scanview__panel { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--c-navy); }
.scanview__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 10px 8px;
  border-bottom: 1px solid var(--c-on-dark-line);
}
.scanview__text { flex: 1; min-width: 0; }
.scanview__title {
  font: 600 14.5px/1.3 var(--font-display);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scanview__meta {
  margin-top: 2px;
  font: 400 11.5px/1.4 var(--font-mono);
  color: var(--c-on-dark-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.scanview__icon {
  width: var(--tap);
  height: var(--tap);
  flex: none;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #fff;
}
.scanview__icon:hover { background: var(--c-on-dark-line); color: #fff; }
.scanview__icon svg { width: 18px; height: 18px; }
.scanview__body {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: var(--c-viewer-bg);
}
.scanview__image { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; }
.scanview__frame { width: 100%; height: 100%; border: 0; border-radius: 4px; background: var(--c-surface); }
.scanview__foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 12px;
  border-top: 1px solid var(--c-on-dark-line);
  background: var(--c-navy);
}
.scanview__pages { text-align: center; font: 400 12px/1 var(--font-mono); color: var(--c-on-dark-muted); }
.scanview__spacer { display: none; }
/* Frame 1t: one wide button across the foot of the screen. */
.scanview__back {
  justify-content: center;
  min-height: 48px;
  border: 0;
  background: var(--c-on-dark-line);
  color: #fff;
  font-size: 14.5px;
}
.scanview__back:hover { background: var(--c-on-dark-hover); color: #fff; }

.wcheck { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.wcheck span { font: 400 13.5px/1.4 var(--font-sans); color: var(--c-label); }
.wcheck__box {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin: 0;
  border-radius: 6px;
  border: 1.5px solid var(--c-check-border);
  background: var(--c-surface);
  flex: none;
  cursor: pointer;
}
.wcheck__box:checked {
  border: 0;
  background: var(--c-blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 12.75 6 6 9-13.5'/%3E%3C/svg%3E") center / 13px 13px no-repeat;
}

/* Airport suggestions (frame 1e) */
.wsuggest-anchor { position: relative; }
.wsuggest-pop { position: relative; }
.wsuggest {
  position: absolute;
  top: 4px;
  left: 0;
  right: 0;
  z-index: 6;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.wsuggest__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 0;
  border-bottom: 1px solid var(--c-field-bg);
  background: var(--c-surface);
  cursor: pointer;
  text-align: left;
}
.wsuggest__item:last-child { border-bottom: 0; }
.wsuggest__item:hover { background: var(--c-bg); }
.wsuggest__code { font: 600 12.5px/1 var(--font-mono); color: var(--c-blue); flex: none; }
.wsuggest__name {
  flex: 1;
  min-width: 0;
  font: 400 14px/1.3 var(--font-sans);
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Step 5 — Photo & CV (frames 1i mobile, 2h desktop) */
.wfiles { display: flex; flex-direction: column; gap: 12px; }
.wfiles__main { display: flex; flex-direction: column; gap: 12px; }
.wcard--pad { padding: 16px; }

.wphoto { display: flex; align-items: flex-start; gap: 14px; }
.wphoto__avatar {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  background: var(--c-avatar-bg);
}
.wphoto__avatar--empty {
  display: grid;
  place-items: center;
  font: 600 22px/1 var(--font-display);
  color: var(--c-blue);
}
.wphoto__body { flex: 1; min-width: 0; }

/* The photo card's whole control row — Upload, camera trigger, Remove — is one flex line at every
   width (photo-webcam design update, 2026-08-25: 2h desktop and 1i mobile draw the same three
   controls now, just at two sizes — 46/19px icons and a 16px Remove pad on desktop, 44/18px icons
   and 14px on mobile). Nothing here switches direction at 1024px any more, only sizes do, in the
   media query below. */
.wupload__row { display: flex; align-items: center; gap: 8px; }

.wupload { display: flex; align-items: center; gap: 10px; }
.wupload--block { margin-top: 12px; }
.wupload__pick {
  flex: 1;
  min-width: 0;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--c-blue);
  border-radius: 11px;
  font: 600 14px/1 var(--font-sans);
  color: var(--c-blue);
  cursor: pointer;
}
.wupload__pick:hover,
.wupload__pick.is-dragover { background: var(--c-tag-blue-bg); }
.wupload__pick:focus-within { outline: 2px solid var(--c-blue); outline-offset: 2px; }
/* The input stays in the layout (and reachable) but is drawn as the button above it. */
.wupload__pick input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
/* The photo card's own "Upload photo"/"Replace photo" picker (design 2h/1i): unlike the CV card's
   text button above, this one is a plain icon square, the same shape as the camera trigger beside
   it — the visible label is dropped in favour of the icon, and its text moves to .visually-hidden so
   the control still has a name for a screen reader and the title="" tooltip. */
.wupload__pick--photo {
  flex: none;
  width: var(--tap);
  min-width: 0;
  gap: 0;
  padding: 0;
}
.wupload__pick--photo svg { width: 18px; height: 18px; }
.wupload__go {
  flex: none;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  background: var(--c-surface);
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-label);
  cursor: pointer;
}
.wupload__go:hover { border-color: var(--c-blue); }
.wupload__remove-btn {
  min-height: var(--tap);
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: none;
  font: 500 14px/1 var(--font-sans);
  color: var(--c-muted);
  cursor: pointer;
}
.wupload__remove-btn:hover { background: var(--c-field-bg); }

/* Camera capture trigger (photo-webcam, design 2h/1i): a square button beside "Upload photo", 44px to
   match --tap on mobile and 46px on desktop per the mockup. Rendered [hidden] by the server and
   revealed only by site.js — the button's own display:flex needs [hidden] repeated here to still win,
   same reason as .wdrop[hidden] above. */
.wcam-trigger {
  flex: none;
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-blue);
  border-radius: 11px;
  background: var(--c-surface);
  color: var(--c-blue);
  cursor: pointer;
}
.wcam-trigger[hidden] { display: none; }
.wcam-trigger svg { width: 18px; height: 18px; }
.wcam-trigger:hover { background: var(--c-tag-blue-bg); }
.wupload__hint { margin: 8px 0 0; font: 400 11.5px/1.45 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.wupload__hint--formats { font-family: var(--font-mono); font-size: 11px; }
.wupload__error {
  margin: 8px 0 0;
  font: 500 12.5px/1.45 var(--font-sans);
  color: var(--c-warn-ink);
  text-wrap: pretty;
}

/* "Saved, still on its way to storage" — a state, deliberately not styled as an error. */
.wnote {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: var(--c-field-bg);
  font: 400 12.5px/1.45 var(--font-sans);
  color: var(--c-muted);
  text-wrap: pretty;
}

.wfile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-pale);
}
.wfile__kind {
  width: 38px;
  height: 44px;
  flex: none;
  border-radius: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  display: grid;
  place-items: center;
  font: 600 9.5px/1 var(--font-mono);
  color: var(--c-blue);
}
.wfile__text { flex: 1; min-width: 0; }
.wfile__name {
  font: 500 13.5px/1.35 var(--font-sans);
  color: var(--c-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wfile__meta { margin-top: 3px; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
.wicon--btn { border: 0; background: none; cursor: pointer; }

.wcomplete__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wcomplete__title { font: 600 15px/1.2 var(--font-display); color: var(--c-heading); }
.wcomplete__pct { font: 700 18px/1 var(--font-display); color: var(--c-blue); font-variant-numeric: tabular-nums; }
.wcomplete__track {
  height: 6px;
  border-radius: 4px;
  background: var(--c-border-soft);
  margin: 12px 0 14px;
  overflow: hidden;
}
.wcomplete__fill { height: 100%; background: var(--c-blue); border-radius: 4px; }
.wcomplete__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.wcomplete__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font: 400 13.5px/1.45 var(--font-sans);
  color: var(--c-label);
  text-wrap: pretty;
}
.wcomplete__item svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--c-warn-ink); }
.wcomplete__item.is-done { color: var(--c-body); }
.wcomplete__item.is-done svg { color: var(--c-green); }

/* One-shot confirmation banner after a redirect */
.flash { background: var(--c-applied-bg); border-bottom: 1px solid var(--c-check-border); }
.flash__inner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 0;
  font: 500 13.5px/1.4 var(--font-sans);
  color: var(--c-applied-ink);
}
.flash__inner svg { width: 16px; height: 16px; flex: none; }

/* ---------- Profile wizard, desktop (frames 1d/2d/2e/2f/2g) ---------- */

@media (min-width: 1024px) {
  .wiz-header:not(.wiz-header--start) { display: block; }
  .wiz-header .site-header__inner { gap: 11px; padding: 11px 32px; min-height: 66px; }
  .wiz-header__back, .wiz-header__name { display: none; }
  .wiz-header__brand { display: flex; }
  .wiz-header__later { font-size: 14px; }
  .wiz-header .site-header__account { display: flex; }
  .wiz-header--start .wiz-header__later { display: flex; }

  .wizard { padding-bottom: 44px; }
  .wizard__shell--narrow { width: 640px; max-width: calc(100% - 64px); margin: 34px auto 0; }
  .wizard__shell--wide { width: 840px; max-width: calc(100% - 64px); margin: 26px auto 0; padding: 0; }
  .wizard__intro { display: block; margin-bottom: 16px; }
  .wizard__strip { display: none; }
  .wizard__band { padding: 18px 32px 20px; }
  .wizard__band-inner { max-width: 840px; margin: 0 auto; }
  .wizard__band .wbars { gap: 6px; }
  .wizard__band .wizard__meta { margin-top: 12px; }
  .wizard__band .wizard__step-title { font-size: 19px; }
  .wizard__band .wizard__step-counter { font-size: 12px; }
  .wizard__band-note { margin-top: 10px; font-size: 13px; }

  .wizard__body { padding: 0; }
  .wizard__card { padding: 26px; }
  .wizard__cardhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 20px;
  }
  .wizard__cardhead .wizard__step-counter { font-size: 12px; }
  .wizard__note { display: block; margin: 14px 0 0; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }

  .wfields { gap: 16px; }
  .wgrid { grid-template-columns: 1fr 1fr; gap: 16px 14px; }
  .wgrid--three { grid-template-columns: 1fr 1fr 1fr; }
  .wgrid--four { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .wgrid--sheet { gap: 14px; }
  .wmsgother { grid-template-columns: 220px 1fr; }

  .wizard__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--c-border-soft);
  }
  .wizard--list .wizard__actions { margin-top: 22px; padding-top: 0; border-top: 0; }
  .wizard__bar { display: none; }
  .wbtn { min-height: 48px; font-size: 15px; padding: 0 22px; }
  .wbtn--primary { padding: 0 26px; font-size: 15.5px; }

  .wizard--start .wizard__shell { padding: 0; }
  .wstart__title { font-size: 28px; letter-spacing: -.02em; }
  .wstart__lead { margin-bottom: 22px; font-size: 14.5px; }
  .wstart__card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 16px;
    padding: 26px;
  }
  .wstart__card .wdrop { background: var(--c-pale); padding: 34px 22px; }
  .wstart__actions { flex-direction: row; align-items: center; gap: 12px; margin-top: 18px; }
  .wstart__actions .wbtn { flex: none; }
  .wstart__manual { margin-top: 0; justify-content: flex-start; min-height: var(--tap); }
  .wstart__note { margin-top: 14px; font-size: 12.5px; width: 100%; }

  /* document-cards-wide spec, 2026-08-25 (macets 2e/2g/2j): one column at full width on every step
     that uses .wcards — the two-column grid this used to be is gone outright, not overridden per
     page, because none of the three card kinds keep it any more. */
  .wrow { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
  /* A field that is not the row's first no longer carries its own stacked-narrow top margin — the
     row's own position (inherited from that first field, margins collapsing through the plain .wrow
     box) is the only spacing now that the fields sit side by side. */
  .wrow > :not(:first-child) { margin-top: 0; }
  .wcard__dot { display: inline; }
  .wdivider.wdivider--section { font-size: 14px; }
  .wcard { padding: 16px; }
  .wcard__title { font-size: 15.5px; }
  .wcard__foot { padding-top: 11px; }
  /* document-cards-wide spec, 2026-08-25: the add tile stays the same low bar as narrow — full width
     now that .wcards is one column, not a tall square sized for a grid cell. Macets 2e/2g/2j agree on
     one shape, so this is a shared tweak, not one per page. */
  .wadd { min-height: 48px; border-radius: 14px; font-size: 14px; }
  .wadd svg { width: 18px; height: 18px; }
  .wempty { padding: 34px 30px; }

  .wlang-card { margin-top: 16px; }
  .wlang__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .wlang__note { margin: 0; }
  .wlang__rows { gap: 12px; margin-top: 16px; }
  .wlang__row { gap: 12px; }
  .wlang__addform { gap: 12px; }
  .wadd--lang { width: 200px; }

  /* Frame 2f: on desktop the wizard sheet is a centred-width modal near the top of a dimmed page, not a
     bottom sheet — 26px above it, 32px off the sides, 40px of breathing room below (the same numbers
     .wsheet-overlay's own padding used to give it). A <dialog> has no flex parent to centre it with any
     more, so the offset and the internal scroll (.wsheet's own overflow-y, unconditional above) that used
     to belong to that parent both move onto the element itself. Covered by SiteCssTests. */
  dialog.wsheet {
    inset: 26px 0 auto 0;
    left: 50%;
    transform: translateX(-50%);
    max-height: calc(100vh - 66px);
  }
  .wsheet {
    width: 560px;
    max-height: none;
    border-radius: 16px;
    box-shadow: 0 18px 48px rgba(16, 36, 59, .3);
  }
  .wsheet .sheet__head { padding: 16px 14px 14px 24px; }
  .wsheet .sheet__title { font-size: 18px; }
  .wsheet__body { padding: 20px 24px 24px; gap: 16px; }

  /* Frame 2n: the scan card has room for the bigger preview, the longer button labels and the date. */
  .wscan__at-narrow { display: none; }
  .wscan__at-wide { display: block; }
  .wscan__at-wide-inline { display: inline; }
  /* Elements that lay themselves out get their own display back, not the generic block above. */
  .btn.wscan__at-wide { display: inline-flex; }
  .scanview__icon.wscan__at-wide { display: grid; }

  .wdrop--pick { padding: 22px; border-radius: 14px; }
  .wscanfile { padding: 16px; gap: 14px; border-radius: 14px; }
  .wscanfile__thumb { width: 74px; height: 96px; }
  .wscanfile__thumb--blank { gap: 6px; }
  .wscanfile__thumb--blank svg { width: 26px; height: 26px; }
  .wscanfile__thumb--wait svg { width: 24px; height: 24px; }
  .wscanfile__kind { font-size: 10px; }
  .wscanfile__name { font-size: 14.5px; }
  .wscanfile__meta { font-size: 12px; margin-top: 4px; }
  .wscanfile__note { font-size: 13px; margin-top: 8px; }
  .wscanfile__actions { margin-top: 12px; }
  .wscanfile__actions .wbtn { padding: 0 14px; font-size: 13.5px; }
  .wscan__foot { margin-top: -1px; }

  /* The word instead of the glyph (2n) — a text button, not a square one. */
  .wscan__cancel { width: auto; padding: 0 12px; color: var(--c-body); }
  .wscan__cancel:hover { background: none; color: var(--c-error-ink); }

  /* Frame 2p: the same markup becomes a light modal over the dimmed document list. */
  .scanview {
    align-items: center;
    justify-content: center;
    padding: 28px 32px;
    background: var(--c-scrim-deep);
  }
  .scanview__panel {
    flex: none;
    width: min(980px, 100%);
    height: min(640px, 100%);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 48px rgba(16, 36, 59, .35);
    background: var(--c-surface);
  }
  .scanview__head { padding: 14px 14px 14px 24px; border-bottom-color: var(--c-border); }
  .scanview__title { font-size: 17px; color: var(--c-heading); }
  .scanview__meta { font-size: 12px; margin-top: 3px; color: var(--c-muted); }
  .scanview__icon { color: var(--c-body); }
  .scanview__icon:hover { background: var(--c-field-bg); color: var(--c-body); }
  .scanview__body { padding: 22px; }
  .scanview__foot {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 24px;
    border-top-color: var(--c-border);
    background: var(--c-surface);
  }
  .scanview__pages { font-size: 12.5px; color: var(--c-muted); }
  .scanview__spacer { display: block; flex: 1; }
  .scanview__back {
    min-height: var(--tap);
    border: 1px solid var(--c-border-input);
    background: none;
    color: var(--c-label);
    font-size: 13.5px;
  }
  .scanview__back:hover { background: none; border-color: var(--c-blue); color: var(--c-label); }

  /* Step 5 (frame 2h): cards on the left, the completeness panel in a 320px rail beside them. */
  .wfiles { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
  .wfiles__main { gap: 16px; }
  .wcard--pad { padding: 22px 24px; }
  .wdivider--gap { margin-bottom: 14px; }
  .wphoto { align-items: center; gap: 18px; }
  .wphoto__avatar { width: 88px; height: 88px; }
  .wphoto__avatar--empty { font-size: 26px; }
  .wupload__row { gap: 10px; }
  .wupload__pick { flex: none; min-width: 190px; min-height: 46px; }
  /* Photo card only (design 2h): the same icon square as .wcam-trigger beside it, just 2px larger
     each way, matching the mockup's own desktop/mobile size difference. min-width is reset here too —
     .wupload__pick's own desktop rule above sets it to 190px for the CV card's text button, and
     min-width beats a plain width when both apply to the same box. */
  .wupload__pick--photo { width: 46px; min-width: 0; }
  .wupload__pick--photo svg { width: 19px; height: 19px; }
  .wupload__go { min-height: 46px; }
  .wcam-trigger { width: 46px; height: 46px; }
  .wcam-trigger svg { width: 19px; height: 19px; }
  .wupload__remove-btn { min-height: 46px; padding: 0 16px; }
  .wupload__hint { font-size: 12.5px; max-width: 46ch; }
  .wfile { gap: 14px; padding: 14px; }
  .wfile__kind { width: 40px; height: 48px; font-size: 10px; }
  .wfile__name { font-size: 14px; }
  .wcomplete { padding: 20px; }
  .wcomplete__pct { font-size: 20px; }
  .wcomplete__list { gap: 10px; }
  .wcomplete__item { font-size: 13px; line-height: 1.5; }
}

/* ---------- Profile overview ----------
   Design: .crew/design/onboarding/"Crewvector Jobs Onboarding" — 1j/1p/1q/1o mobile 390,
   2i/2l/2m/2k desktop 1280. One column on mobile, with the visibility and completeness cards above
   the sections; from 1024px the same markup becomes a 1fr/320px grid with those cards in the rail. */

:root {
  --c-ok-ink: #3F8A2E;
  --c-anon-ink: #98A6B5;
  --c-notice-border: #CFDFEE;
}

.po { padding: 14px 0 24px; }
.po__inner { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 12px; }

.po__head {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
}
.po__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  background: var(--c-avatar-bg);
  display: grid;
  place-items: center;
  font: 600 19px/1 var(--font-display);
  color: var(--c-blue);
}
.po__avatar--empty,
.po__avatar--anon {
  background: var(--c-border-soft);
  border: 1px dashed var(--c-check-border);
  color: var(--c-anon-ink);
}
.po__avatar--anon svg { width: 24px; height: 24px; }
/* The avatar doubles as the only way into "add/change photo" from the dashboard (photo-photo-entry). */
.po__avatar-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: none;
  border-radius: 14px;
  text-decoration: none;
}
.po__avatar-link:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.po__avatar--upload { border: 1px dashed var(--c-check-border); cursor: pointer; }
.po__avatar--upload svg { width: 22px; height: 22px; }
.po__avatar-link:hover .po__avatar--upload,
.po__avatar-link:focus-visible .po__avatar--upload {
  border-color: var(--c-blue);
  background: var(--c-tag-blue-bg);
  color: var(--c-blue);
}
.po__id { flex: 1; min-width: 0; }
.po__name { margin: 0; font: 700 19px/1.25 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.po__sub { margin-top: 4px; font: 400 12.5px/1.4 var(--font-mono); color: var(--c-muted); text-wrap: pretty; }
/* "Edit photo & CV →" under the name (frames 2i/2m) — drawn at both widths (architect decision,
   certificate-scans-zip): the mobile frames simply never got redrawn with it after this card was added. */
.po__edit-link {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  margin-top: 4px;
  font: 600 13px/1 var(--font-sans);
  color: var(--c-blue);
  text-decoration: none;
}
.po__edit-link:hover { color: var(--c-blue-hover); }
.po__preview {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--c-border-input);
  border-radius: 12px;
  background: var(--c-surface);
  font: 600 14.5px/1 var(--font-sans);
  color: var(--c-label);
}
.po__preview:hover { border-color: var(--c-blue); color: var(--c-label); }

.po__grid { display: flex; flex-direction: column; gap: 12px; }
.po__side { display: flex; flex-direction: column; gap: 12px; order: 1; }
.po__main { display: flex; flex-direction: column; gap: 12px; order: 2; }

.po-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
}
.po-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.po-card__title { margin: 0; font: 600 15px/1.2 var(--font-display); color: var(--c-heading); }
.po-card__title--plain { margin: 0 0 10px; }
.po-card__edit {
  font: 600 13px/1 var(--font-sans);
  min-height: 32px;
  display: flex;
  align-items: center;
}
.po-card__empty { margin: 0; font: 400 13.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.po-card__note { margin: 0 0 10px; font: 400 12.5px/1.4 var(--font-mono); color: var(--c-muted); }
/* The company preview's sea-time total, in the header row's right slot (frame 2k) — same wording as
   po-card__note, laid out inline next to the title instead of as its own paragraph underneath. */
.po-card__head-note { font: 400 12.5px/1.4 var(--font-mono); color: var(--c-muted); text-align: right; }
.po-card__foot {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--c-border-soft);
  font: 400 12px/1.5 var(--font-sans);
  color: var(--c-muted);
  text-wrap: pretty;
}

.po-rows { display: flex; flex-direction: column; }
.po-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border-soft);
}
.po-row:last-child { border-bottom: 0; }
.po-row__label { flex: none; width: 108px; font: 400 12.5px/1.3 var(--font-mono); color: var(--c-muted); }
.po-row__value { flex: 1; font: 500 13.5px/1.4 var(--font-sans); color: var(--c-ink); text-wrap: pretty; }

.po-docs { display: flex; flex-direction: column; gap: 10px; }
/* One row per document, all the way across the card; on narrow widths the meta wraps to its own
   line instead of switching to a second markup (overview-and-preview spec §1). */
.po-doc { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.po-doc__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 500 13.5px/1.4 var(--font-sans);
  color: var(--c-ink);
  text-wrap: pretty;
  flex: 1;
}
/* The scan-attached clip (frame 2m) — heroicons paper-clip, catalogued in Icons.cs, never the
   designer's own hand-drawn contour (icons-heroicons rule). */
.po-doc__scan { display: inline-flex; align-items: center; color: var(--c-doc-scan-icon); }
.po-doc__scan svg { width: 14px; height: 14px; }
.po-doc__no { font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
.po-doc__meta { font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
.po-doc__meta--warn {
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 500;
  color: var(--c-warn-ink);
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-border);
}
/* "Expired" (frame 2m) — same shape as --warn, its own red (see --c-expired-* above). */
.po-doc__meta--expired {
  padding: 3px 8px;
  border-radius: 8px;
  font-weight: 500;
  color: var(--c-expired-ink);
  background: var(--c-expired-bg);
  border: 1px solid var(--c-expired-border);
}
/* "Unlimited" (frame 2m, document-row-chips spec) — a document with no expiry date at all. Plain
   surface tones already used elsewhere (--c-body/--c-field-bg/--c-border-input, e.g. .tag--duration),
   not a --c-warn/--c-expired reuse and not a new colour: neither is a "something needs attention"
   state. Padding is the frame's own 6px 8px, not --warn/--expired's 3px 8px — the frame draws it wider. */
.po-doc__meta--unlimited {
  padding: 6px 8px;
  border-radius: 8px;
  font-weight: 500;
  color: var(--c-body);
  background: var(--c-field-bg);
  border: 1px solid var(--c-border-input);
}

.po-lines { display: flex; flex-direction: column; gap: 10px; }
.po-line { display: flex; gap: 10px; align-items: baseline; }
.po-line__period { flex: none; width: 108px; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
.po-line__text { flex: 1; font: 500 13.5px/1.4 var(--font-sans); color: var(--c-ink); text-wrap: pretty; }
.po-line__owner { display: block; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); margin-top: 3px; }

/* Visibility switch (frames 1j/2i). The knob is a submit button, so it works without JavaScript. */
.po-vis { display: flex; align-items: flex-start; gap: 12px; }
.po-vis__text { flex: 1; min-width: 0; }
.po-vis__title { font: 600 14px/1.3 var(--font-sans); color: var(--c-ink); }
.po-vis__hint { margin: 5px 0 0; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.po-switch {
  flex: none;
  width: 52px;
  height: 30px;
  border: 0;
  border-radius: 15px;
  padding: 3px;
  background: var(--c-check-border);
  display: flex;
  justify-content: flex-start;
  cursor: pointer;
}
.po-switch.is-on { background: var(--c-blue); justify-content: flex-end; }
.po-switch__knob {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(16, 36, 59, .3);
}

/* Completeness card: amber while the profile is empty (1p/2l), green at 100% (1q/2m), blue in between. */
.po-meter__head { display: flex; align-items: center; gap: 10px; }
.po-meter__icon { width: 20px; height: 20px; flex: none; color: var(--c-ok-ink); }
.po-meter__title { flex: 1; font: 600 15px/1.25 var(--font-display); color: var(--c-heading); }
.po-meter__pct { font: 700 20px/1 var(--font-display); color: var(--c-blue); font-variant-numeric: tabular-nums; }
.po-meter__track {
  height: 6px;
  border-radius: 4px;
  background: var(--c-border-soft);
  margin: 12px 0 14px;
  overflow: hidden;
}
.po-meter__fill { height: 100%; border-radius: 4px; background: var(--c-blue); }
.po-meter--low .po-meter__pct { color: var(--c-warn-ink); }
.po-meter--low .po-meter__fill { background: var(--c-warn-border); }
.po-meter--done .po-meter__pct { color: var(--c-ok-ink); }
.po-meter--done .po-meter__fill { background: var(--c-ok-ink); }
.po-meter__note { margin: 0 0 14px; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.po-meter__note--foot {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-soft);
  color: var(--c-muted);
}
.po-meter__actions { display: flex; flex-direction: column; gap: 10px; }
.po-meter__small { margin: 10px 0 0; font: 400 12px/1.5 var(--font-sans); color: var(--c-muted); }

.po-btn { width: 100%; min-height: 48px; border-radius: 12px; font: 600 14.5px/1 var(--font-sans); }
.po-btn--primary { background: var(--c-blue); color: #fff; }
.po-btn--primary:hover { background: var(--c-blue-hover); color: #fff; }
.po-btn--ghost { border: 1px solid var(--c-border-input); background: var(--c-surface); color: var(--c-label); }
.po-btn--ghost:hover { border-color: var(--c-blue); color: var(--c-label); }

.po-check { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.po-check__item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font: 400 13px/1.5 var(--font-sans);
  color: var(--c-body);
  text-wrap: pretty;
}
.po-check__item svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--c-warn-ink); }
.po-check__item.is-done svg { color: var(--c-green); }

.po-note {
  margin: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
  font: 400 12.5px/1.55 var(--font-sans);
  color: var(--c-muted);
  text-wrap: pretty;
}

/* Empty profile, right after sign-up (frames 1p/2l). Mobile puts the invitation inside the
   completeness card (1p); desktop gives it a card of its own beside the checklist (2l). The markup
   carries both and each width shows one — the wording is identical either way. */
.po-start { display: none; gap: 14px; align-items: flex-start; }
.po-start__icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--c-tag-blue-bg);
  display: grid;
  place-items: center;
  flex: none;
  color: var(--c-blue);
}
.po-start__icon svg { width: 22px; height: 22px; }
.po-start__body { flex: 1; min-width: 0; }
.po-start__title { margin: 0 0 8px; font: 600 17px/1.25 var(--font-display); color: var(--c-heading); }
.po-start__lead { margin: 0 0 16px; font: 400 13.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.po-start__actions { display: flex; flex-direction: column; gap: 10px; }
.po-sections { display: flex; flex-direction: column; gap: 12px; }

/* "Preview as a company" (frames 1o/2k) */
.preview-header { background: var(--c-navy); border-bottom: 0; }
.preview-header .site-header__inner { gap: 10px; padding: 12px 14px; min-height: 60px; }
.preview-header__back {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: rgba(255, 255, 255, .12);
  color: #fff;
}
.preview-header__back svg { width: 16px; height: 16px; }
.preview-header__back:hover { color: #fff; background: rgba(255, 255, 255, .2); }
.preview-header__title { font: 600 14.5px/1.3 var(--font-display); color: #fff; }
.preview-header__note { display: none; font: 400 13px/1.4 var(--font-sans); color: rgba(255, 255, 255, .75); }
.preview-header__exit { display: none; }

.po-notice {
  display: flex;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--c-notice-border);
  border-radius: 12px;
  background: var(--c-tag-blue-bg);
  margin-bottom: 12px;
}
.po-notice svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--c-blue); }
.po-notice p { margin: 0; flex: 1; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-label); text-wrap: pretty; }

.po-hidden { display: flex; gap: 10px; background: var(--c-tag-blue-bg); border-color: var(--c-notice-border); }
.po-hidden__icon { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--c-blue); }
.po-hidden__body { flex: 1; min-width: 0; }
.po-hidden__title { font: 600 14.5px/1.3 var(--font-sans); color: var(--c-heading); }
.po-hidden__text { margin: 8px 0 0; font: 400 12.5px/1.6 var(--font-sans); color: var(--c-label); text-wrap: pretty; }
.po-back { margin-top: 2px; }

/* Downloads card (frames 2i/2m, 1j/1q) — "Download CV" stays disabled here (task cv-pdf turns it on);
   "All certificates" is a live link once there is at least one scan, disabled the same way otherwise. */
.po-dl__lead { margin: 5px 0 14px; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.po-dl__buttons { display: flex; flex-direction: column; gap: 9px; }
.po-dl__btn {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  font: 600 14px/1 var(--font-sans);
  color: var(--c-label);
  text-decoration: none;
}
.po-dl__btn svg { width: 17px; height: 17px; flex: none; }
.po-dl__btn:hover { border-color: var(--c-blue); color: var(--c-blue); }
.po-dl__btn--disabled,
.po-dl__btn--disabled:hover { color: var(--c-disabled-ink); cursor: not-allowed; }

/* Signed-in avatar in the site header — the way into the profile (frames 1j/2i) */
.site-header__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--c-avatar-bg);
  display: grid;
  place-items: center;
  font: 600 12px/1 var(--font-display);
  color: var(--c-blue);
  flex: none;
}
.site-header__avatar:hover { background: var(--c-chip-active-hover); color: var(--c-blue); }

/* ---------- Profile overview, desktop (frames 2i/2k/2l/2m) ---------- */

@media (min-width: 1024px) {
  .po { padding: 30px 0 46px; }
  /* 1000px of content between 32px gutters — the column width of frames 2i/2k/2l/2m. */
  .po__inner { max-width: 1064px; padding: 0 32px; }

  .po__head {
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    gap: 18px;
    margin-bottom: 20px;
    flex-wrap: nowrap;
  }
  .po__avatar { width: 72px; height: 72px; font-size: 22px; }
  .po__avatar--anon svg { width: 30px; height: 30px; }
  .po__avatar--upload svg { width: 26px; height: 26px; }
  .po__name { font: 700 28px/1.2 var(--font-display); letter-spacing: -.02em; }
  .po__sub { margin-top: 6px; font-size: 13px; }
  .po__preview { flex: none; width: auto; min-height: 52px; padding: 0 22px; font-size: 15px; }

  .po__grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
  .po__main { grid-column: 1; grid-row: 1; gap: 16px; }
  .po__side { grid-column: 2; grid-row: 1; gap: 16px; }

  .po-card { padding: 22px 24px; }
  .po-card--tight { padding: 20px; }
  .po-card__title { font-size: 17px; }
  .po-card__empty { font-size: 14px; line-height: 1.55; }
  .po-row { gap: 14px; padding: 9px 0; }
  .po-row__label { width: 132px; }
  .po-row__value { font-size: 14px; line-height: 1.45; }
  .po-line { gap: 14px; }
  .po-line__period { width: 132px; font-size: 12px; }
  .po-line__text { font-size: 14px; line-height: 1.45; }
  .po-doc__title { font-size: 14px; }

  .po-sections { gap: 16px; }
  .po-sections--pairs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .po-start { display: flex; padding: 26px 24px; gap: 18px; }
  /* Frame 2l: the rail keeps the bar and the checklist; the invitation is the card on the left. */
  .po-meter--low .po-meter__note,
  .po-meter--low .po-meter__actions,
  .po-meter--low .po-meter__small { display: none; }
  .po-meter--low .po-meter__track { margin-bottom: 16px; }
  .po-meter--low .po-check { margin-top: 0; }
  .po-start__title { font-size: 19px; }
  .po-start__lead { font-size: 14px; line-height: 1.6; max-width: 56ch; }
  .po-start__actions { flex-direction: row; }
  .po-start__actions .po-btn { width: auto; min-height: 50px; padding: 0 24px; font-size: 15px; }

  .preview-header .site-header__inner { gap: 14px; padding: 0 32px; }
  .preview-header__back { display: none; }
  .preview-header__title { font-size: 15px; }
  .preview-header__note { display: block; }
  .preview-header__exit {
    display: flex;
    align-items: center;
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .14);
    font: 600 13.5px/1 var(--font-sans);
    color: #fff;
  }
  .preview-header__exit:hover { color: #fff; background: rgba(255, 255, 255, .24); }
  .po-back { display: none; }
}

/* ---------- Applying, consent and revoking ----------
   Design: .crew/design/application/"Crewvector Jobs Application" — 1a–1i, 1k–1m mobile 390,
   2a–2e, 2g, 2l desktop 1280. Mobile first, as everywhere else: one column that becomes a centred
   760px column from 1024px. No new fonts — the few colours added are tokens at the top of this file. */

/* Frames that word the same sentence differently at the two widths write both and hide one, the way
   the scan cards already do. The copy stays in the markup, where it can be read and asserted on. */
.at-wide { display: none; }
.at-narrow { display: inline; }

/* The amber note under the call to action when the profile is below the minimum (1a/2a). */
.apply-warn {
  display: flex;
  gap: 9px;
  margin-top: 10px;
  padding: 11px 12px;
  background: var(--c-warn-bg);
  border: 1px solid var(--c-warn-border);
  border-radius: 11px;
  color: var(--c-warn-ink);
}
.apply-warn svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.apply-warn__text { margin: 0; font: 500 12.5px/1.5 var(--font-sans); color: var(--c-warn-ink); text-wrap: pretty; }
/* The mobile copy of the same note: it sits in the flow, because the fixed bar has no room for it. */
.apply-warn--flow { margin: 0 12px; }

.apply-btn--danger { background: var(--c-danger); }
.apply-btn--danger:hover { background: var(--c-danger-hover); color: #fff; }

.applied-panel__link {
  flex: none;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 4px;
  font: 600 13px/1 var(--font-sans);
  color: var(--c-blue);
}

/* The badge on an application — one class, three colours (1f, 1g/2g, 1i). */
.appbadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border-radius: 8px;
  font: 500 11.5px/1 var(--font-mono);
  white-space: nowrap;
}
.appbadge svg { width: 12px; height: 12px; flex: none; }
.appbadge--new { color: var(--c-chip-active-ink); background: var(--c-tag-blue-bg); border: 1px solid var(--c-badge-new-border); }
.appbadge--applied,
.appbadge--opened { color: var(--c-applied-ink); background: var(--c-applied-bg); border: 1px solid var(--c-green); }
.appbadge--gone { color: var(--c-muted); background: var(--c-field-bg); border: 1px dashed var(--c-check-border); }

/* Frame 1f: a card in the list the reader has already applied to. */
.vacancy-card__applied { margin-bottom: 10px; }
.vacancy-card--withdrawn { opacity: .85; }
.vacancy-card__again {
  margin: 12px 0 0;
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--c-muted);
  text-wrap: pretty;
}

/* ---------- The pages: consent (1d/2d), missing pieces (1c/2c), sent (1e/2e), revoke (1k/1l/2l) ---------- */

.apage { padding: 12px 12px 28px; }
.apage__inner { display: flex; flex-direction: column; gap: 14px; }
.apage--centred { display: flex; justify-content: center; padding: 24px 12px 40px; }
.apage__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  min-height: var(--tap);
  padding: 0 8px 0 4px;
  border-radius: 10px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--c-blue);
}
.apage__back:hover { background: var(--c-tag-blue-bg); }
.apage__back svg { width: 16px; height: 16px; }
.apage__title {
  margin: 0;
  font: 600 21px/1.25 var(--font-display);
  color: var(--c-heading);
  text-wrap: pretty;
}
.apage__sub { font: 400 13px/1.5 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.apage__lead { margin: 0; font: 400 14px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.apage__actions { display: flex; flex-direction: column; gap: 10px; }
.apage__cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  font: 600 14.5px/1 var(--font-sans);
  color: var(--c-body);
}
.apage__cancel:hover { color: var(--c-heading); }

/* What applying gives away (1d/2d). The blue border is the point of the card: it is the one thing on
   the page the seafarer is agreeing to. */
.cons {
  background: var(--c-surface);
  border: 1.5px solid var(--c-blue);
  border-radius: 14px;
  padding: 16px 14px;
}
.cons__title { margin: 0 0 8px; font: 600 17px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.cons__lead { margin: 0 0 14px; font: 400 13.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.cons__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.cons__item { display: flex; gap: 9px; align-items: flex-start; }
.cons__item svg { width: 16px; height: 16px; flex: none; margin-top: 2px; stroke: var(--c-blue); }
.cons__item span { font: 400 13.5px/1.5 var(--font-sans); color: var(--c-ink); text-wrap: pretty; }
.cons__fine {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-soft);
  font: 400 13px/1.55 var(--font-sans);
  color: var(--c-body);
  text-wrap: pretty;
}

.cons-form { display: flex; flex-direction: column; gap: 14px; }
.cons-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 14px;
}
.cons-check--error { border: 1.5px solid var(--c-danger-ink); }
.cons-check__box { width: 26px; height: 26px; flex: none; margin: 0; accent-color: var(--c-blue); }
.cons-check__body { flex: 1; min-width: 0; }
.cons-check__label {
  display: block;
  font: 500 14.5px/1.5 var(--font-sans);
  color: var(--c-ink);
  text-wrap: pretty;
  cursor: pointer;
}
.cons-check__error {
  display: block;
  margin-top: 8px;
  font: 500 12.5px/1.5 var(--font-sans);
  color: var(--c-danger-ink);
  text-wrap: pretty;
}

.cons-msg { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 14px; }
.cons-msg__label { display: block; margin-bottom: 6px; font: 500 12px/1 var(--font-sans); color: var(--c-body); }
.cons-msg__optional { color: var(--c-muted); font-weight: 400; }
.cons-msg__box {
  display: block;
  width: 100%;
  min-height: 92px;
  padding: 12px 13px;
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  font: 400 14px/1.5 var(--font-sans);
  color: var(--c-ink);
  resize: vertical;
}
.cons-msg__box:focus { border-color: var(--c-blue); outline: none; }
.cons-msg__foot {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
  font: 400 11.5px/1.4 var(--font-sans);
  color: var(--c-muted);
}
.cons-msg__count { font-family: var(--font-mono); }
.cons-msg__error:not(:empty) {
  display: block;
  margin-top: 8px;
  font: 500 12.5px/1.5 var(--font-sans);
  color: var(--c-danger-ink);
}

/* Frames 1c/2c — what is missing before an application means anything. */
.miss { display: flex; flex-direction: column; gap: 8px; }
.miss__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--c-warn-border);
  background: var(--c-warn-bg);
  border-radius: 12px;
}
.miss__row--done { border-color: var(--c-border); background: var(--c-surface); }
.miss__box {
  width: 20px;
  height: 20px;
  flex: none;
  margin-top: 1px;
  border: 1.5px solid var(--c-warn-border);
  border-radius: 6px;
  background: var(--c-surface);
}
.miss__tick { width: 18px; height: 18px; flex: none; margin-top: 2px; stroke: var(--c-applied-ink); }
.miss__body { flex: 1; min-width: 0; }
.miss__title { font: 600 14px/1.35 var(--font-sans); color: var(--c-ink); text-wrap: pretty; }
.miss__title--plain { font-weight: 500; color: var(--c-body); }
.miss__or { font-weight: 400; color: var(--c-muted); }
.miss__hint { margin-top: 3px; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.miss__actions { display: none; }
.miss__go {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 16px;
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  background: var(--c-surface);
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-label);
  white-space: nowrap;
}
.miss__go:hover { border-color: var(--c-blue); color: var(--c-label); }

/* Frames 1e/2e and 1m — one thing happened, and this is what it was. */
.done {
  width: 100%;
  max-width: 560px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px 18px;
  text-align: center;
}
.done__icon {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 16px;
  background: var(--c-field-bg);
  display: grid;
  place-items: center;
  color: var(--c-label);
}
.done__icon--good { background: var(--c-applied-bg); border: 1px solid var(--c-green); color: var(--c-applied-ink); }
.done__icon svg { width: 24px; height: 24px; }
.done__title { margin: 0 0 8px; font: 600 19px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.done__lead { margin: 0 0 18px; font: 400 13.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.done__note { margin: -10px 0 18px; font: 400 13px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.done__actions { display: flex; flex-direction: column; gap: 10px; }
.done__ghost {
  border: 1px solid var(--c-border-input);
  border-radius: 12px;
  background: var(--c-surface);
  min-height: 48px;
  font: 600 14.5px/1 var(--font-sans);
  color: var(--c-label);
}
.done__ghost:hover { border-color: var(--c-blue); color: var(--c-label); }

/* The amber block of frame 1l — revoking after the profile has been opened. */
.warn-card {
  background: var(--c-surface);
  border: 1px solid var(--c-warn-border);
  border-radius: 14px;
  padding: 16px 14px;
}
.warn-card__p { margin: 0 0 12px; font: 400 13.5px/1.6 var(--font-sans); color: var(--c-ink); text-wrap: pretty; }
.warn-card__strong { margin: 0; font: 500 13.5px/1.6 var(--font-sans); color: var(--c-warn-ink); text-wrap: pretty; }

/* ---------- My applications (1g/2g, empty 1h) and one application (1i) ---------- */

.apps { padding: 14px 12px 28px; }
.apps__inner { display: flex; flex-direction: column; gap: 12px; }
.apps__head { display: flex; align-items: baseline; gap: 12px; }
.apps__title { margin: 0; font: 600 21px/1.2 var(--font-display); color: var(--c-heading); }
.apps__count { font: 400 13px/1 var(--font-mono); color: var(--c-muted); }
.apps__list { display: flex; flex-direction: column; gap: 10px; }

.app-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 14px;
}
.app-card--gone { opacity: .85; }
.app-card__top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.app-card__date { font: 400 11.5px/1 var(--font-mono); color: var(--c-muted); }
.app-card__title {
  display: block;
  font: 600 15.5px/1.3 var(--font-display);
  color: var(--c-heading);
  text-wrap: pretty;
}
.app-card__title:hover { color: var(--c-blue); }
.app-card__company { margin-top: 4px; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.app-card__foot { display: flex; align-items: center; gap: 12px; margin-top: 8px; }
.app-card__progress { flex: 1; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.app-card__revoke {
  flex: none;
  display: flex;
  align-items: center;
  min-height: var(--tap);
  padding: 0 14px;
  border: 1px solid var(--c-danger-border);
  border-radius: 11px;
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-danger-ink);
  white-space: nowrap;
}
.app-card__revoke:hover { background: var(--c-danger-bg); color: var(--c-danger-ink); }

.apps-empty {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 26px 20px;
  text-align: center;
}
.apps-empty__icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 13px;
  background: var(--c-field-bg);
  display: grid;
  place-items: center;
  color: var(--c-soft);
}
.apps-empty__icon svg { width: 22px; height: 22px; }
.apps-empty__title { margin: 0 0 8px; font: 600 16px/1.3 var(--font-display); color: var(--c-heading); }
.apps-empty__lead { margin: 0 0 16px; font: 400 13.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

.app-detail,
.app-block {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 14px;
}
.app-detail__title { margin: 11px 0 0; font: 600 17px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.app-detail__company { margin-top: 4px; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.app-detail__link,
.app-block__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: var(--tap);
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-blue);
}
.app-detail__link svg { width: 14px; height: 14px; }
.app-block__label { margin-bottom: 10px; font: 400 10.5px/1 var(--font-mono); color: var(--c-muted); letter-spacing: .05em; }
.app-block__title { font: 600 14.5px/1.35 var(--font-sans); color: var(--c-ink); }
.app-block__note { margin: 6px 0 12px; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.app-block__text { margin: 0; font: 400 13.5px/1.55 var(--font-sans); color: var(--c-ink); text-wrap: pretty; }
.app-danger {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  border: 1px solid var(--c-danger-border);
  border-radius: 12px;
  font: 600 14.5px/1 var(--font-sans);
  color: var(--c-danger-ink);
}
.app-danger:hover { background: var(--c-danger-bg); color: var(--c-danger-ink); }

.app-time { display: flex; flex-direction: column; gap: 10px; }
.app-time__row { display: flex; gap: 10px; }
.app-time__at { flex: none; width: 88px; font: 400 11.5px/1.5 var(--font-mono); color: var(--c-muted); }
.app-time__what { font: 400 13px/1.5 var(--font-sans); color: var(--c-ink); text-wrap: pretty; }

/* The way into "my applications" from the profile overview (frame 1h). */
.po-apps { display: flex; align-items: center; gap: 12px; }
.po-apps:hover { border-color: var(--c-blue); }
.po-apps__body { flex: 1; min-width: 0; }
.po-apps__title { font: 600 15px/1.3 var(--font-display); color: var(--c-heading); }
.po-apps__sub { margin-top: 3px; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.po-apps__chevron { width: 16px; height: 16px; flex: none; color: var(--c-muted); }

/* The header's own way in (frames 2c/2d/2g). Hidden on a phone, where the header has no room for it —
   the profile card and the confirmation screens carry the same link. */
.site-header__applications { display: none; }

@media (min-width: 1024px) {
  .at-narrow { display: none; }
  .at-wide { display: inline; }

  .site-header__applications {
    display: flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 8px;
    font: 500 14px/1 var(--font-sans);
    color: var(--c-blue);
  }

  /* The rail already carries the amber note; the flow copy would say it twice. */
  .apply-warn--flow { display: none; }

  .apage { padding: 26px 32px 52px; display: flex; justify-content: center; }
  .apage--centred { padding: 52px 32px 64px; }
  .apage__inner { width: 760px; max-width: 100%; gap: 18px; }
  .apage__title { font-size: 26px; line-height: 1.2; }
  .apage__sub { font-size: 14px; }
  .apage__lead { font-size: 14.5px; line-height: 1.6; }
  .apage__actions { flex-direction: row; align-items: center; gap: 12px; }
  .apage__actions .apply-btn { flex: none; min-height: 54px; padding: 0 26px; font-size: 16px; }
  .apage__cancel {
    min-height: 54px;
    padding: 0 22px;
    border: 1px solid var(--c-border-input);
    border-radius: 12px;
    background: var(--c-surface);
    font-size: 15px;
    color: var(--c-label);
  }
  .apage__cancel:hover { border-color: var(--c-blue); color: var(--c-label); }

  .cons { border-radius: 16px; padding: 24px; }
  .cons__title { font-size: 20px; }
  .cons__lead { margin-bottom: 16px; font-size: 14.5px; line-height: 1.6; }
  .cons__list { grid-template-columns: 1fr 1fr; gap: 12px 24px; }
  .cons__item span { font-size: 14px; }
  .cons__fine { margin-top: 18px; padding-top: 14px; font-size: 13.5px; line-height: 1.6; }

  .cons-form { gap: 18px; }
  .cons-check { border-radius: 16px; padding: 20px 24px; gap: 14px; }
  .cons-check__label { font-size: 15px; }
  .cons-msg { border-radius: 16px; padding: 20px 24px; }
  .cons-msg__box { min-height: 96px; padding: 13px 14px; font-size: 14.5px; line-height: 1.55; }
  .cons-msg__foot { margin-top: 7px; font-size: 12px; }

  .miss__row { align-items: center; gap: 14px; padding: 16px 20px; border-radius: 14px; }
  .miss__box { width: 22px; height: 22px; margin-top: 0; }
  .miss__tick { width: 20px; height: 20px; margin-top: 0; }
  .miss__title { font-size: 15.5px; }
  .miss__hint { font-size: 13px; }
  .miss__actions { display: flex; flex: none; gap: 8px; }

  .done { padding: 36px; }
  .done__icon { width: 56px; height: 56px; margin-bottom: 16px; }
  .done__icon svg { width: 26px; height: 26px; }
  .done__title { margin-bottom: 10px; font-size: 24px; line-height: 1.25; }
  .done__lead { margin-bottom: 22px; font-size: 14.5px; line-height: 1.6; }
  .done__note { margin: -14px 0 22px; }
  .done__actions { flex-direction: row; justify-content: center; }
  .done__actions .apply-btn { min-height: 52px; padding: 0 22px; font-size: 15px; }
  .done__ghost { min-height: 52px; padding: 0 22px; font-size: 15px; }

  .warn-card { border-radius: 16px; padding: 20px 24px; }
  .warn-card__p { font-size: 14.5px; line-height: 1.65; }
  .warn-card__strong {
    padding: 14px 16px;
    background: var(--c-warn-bg);
    border: 1px solid var(--c-warn-border);
    border-radius: 12px;
    font-size: 14px;
  }

  .apps { padding: 26px 32px 44px; display: flex; justify-content: center; }
  .apps__inner { width: 1080px; max-width: 100%; gap: 18px; }
  .apps__title { font-size: 24px; }
  /* No align-items: start here (unlike .wcards) — a grid stretches its items by default, and that is
     exactly what two cards of different height in one row need: the shorter one grows to match its
     neighbour instead of leaving a gap under it (same defect as PR #59, this time in the row that has
     a "Withdraw" button making one card taller). */
  .apps__list { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  .app-card { padding: 18px 20px; }
  .app-card__title { font-size: 17px; }
  .app-card__company { font-size: 13px; line-height: 1.55; }
  .app-card__foot { margin-top: 14px; }
  .app-card__progress { font-size: 13px; }
  .apps-empty { padding: 38px; }
  .apps-empty__title { font-size: 18px; }
  .apps-empty__lead { font-size: 14px; line-height: 1.6; }

  .app-detail, .app-block { padding: 18px 20px; }
  .app-detail__title { font-size: 19px; }
}

/* ---------- Scans being read: the cards in the list (frames scans/1w, 2s) ---------- */

/* Three cards, one per ending, each with its own frame and its own ink. They sit in the same column
   (grid at 1024, frame 2s) as the saved documents, because that is where the seafarer is looking. */
.wread {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 14px;
  border-radius: 14px;
  background: var(--c-surface);
  border: 1px solid var(--c-read-border);
}
.wread--ready { border: 1.5px solid var(--c-read-ok-border); }
.wread--failed { border: 1px solid var(--c-read-warn-border); }
.wread__icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--c-blue); }
.wread--ready .wread__icon { color: var(--c-applied-ink); }
.wread--failed .wread__icon { color: var(--c-warn-ink); }
.wread__body { flex: 1; min-width: 0; }
.wread__title { font: 600 15px/1.3 var(--font-display); color: var(--c-heading); }
.wread--failed .wread__title { color: var(--c-read-warn-title); }
.wread__meta { margin-top: 3px; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); overflow-wrap: anywhere; }
.wread--failed .wread__meta { color: var(--c-read-warn-text); }
.wread__note { margin: 9px 0 0; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.wread--failed .wread__note { color: var(--c-read-warn-text); }
.wread__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 12px; }
.wread__actions form { display: contents; }
.wread__delete { border: 1px solid var(--c-danger-border); background: var(--c-surface); color: var(--c-danger-ink); }
.wread__delete:hover { background: var(--c-danger-bg); color: var(--c-danger-ink); }

/* The indicator measures nothing — the service reports no progress — so the bar runs and the icon
   turns, neither ever fills, and the card changes only when the poll says it has. */
.wread__icon--spin { animation: wread-spin 1.4s linear infinite; }
.wread__track { position: relative; height: 6px; border-radius: 3px; background: var(--c-read-track); margin-top: 11px; overflow: hidden; }
.wread__runner { position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 3px; background: var(--c-blue); animation: wread-run 1.6s ease-in-out infinite; }
@keyframes wread-spin { to { transform: rotate(360deg); } }
@keyframes wread-run { from { left: -38%; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .wread__icon--spin { animation: none; }
  .wread__runner { animation: none; left: 0; }
}

/* ---------- The first choice of the add window (frames scans/1v, 2r) ---------- */

.wchoice { display: flex; flex-direction: column; gap: 12px; }
.wdrop--read { position: relative; }
.wdrop--read .wdrop__note { text-wrap: pretty; }
.wchoice__count { font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); text-align: center; }
.wchoice__actions { display: flex; justify-content: center; }
.wchoice__actions .wbtn { min-height: 46px; }
.wchoice__manual {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  font: 600 14px/1 var(--font-sans);
  color: var(--c-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wchoice__manual:hover { color: var(--c-blue-hover); }
.wchoice__foot { margin: 0; font: 400 12px/1.5 var(--font-sans); color: var(--c-muted); text-align: center; text-wrap: pretty; }

/* ---------- The notice above a form filled from a scan (frames scans/1x, 2t) ---------- */

.wprefill { border: 1px solid var(--c-read-ok-border); border-radius: 12px; background: var(--c-read-ok-bg); padding: 13px 14px; }
.wprefill__head { display: flex; gap: 10px; align-items: flex-start; }
.wprefill__icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--c-applied-ink); }
.wprefill__text { flex: 1; min-width: 0; }
.wprefill__title { font: 600 14.5px/1.35 var(--font-sans); color: var(--c-heading); }
.wprefill__lead { margin-top: 5px; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.wprefill__foot { margin: 12px 0 0; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
/* The scan that was read is already the document's; there is nothing to replace and nothing to remove. */
.wscanfile--read .wscanfile__text { align-self: center; }

/* ---------- The three delete confirmations (frames scans/1y, 2u) ---------- */

/* A native <dialog> rather than a hand-built overlay (dialog-confirmations spec): showModal() supplies
   the centring, the backdrop, the focus trap, Esc and the scroll lock that .confirm-overlay used to do
   by hand, so only the look stays ours — same backdrop colour, same panel width/padding/radius as
   before. ::backdrop is a pseudo-element the platform draws behind the dialog once it is open; it needs
   no z-index and no fixed/flex wrapper of its own. */
dialog.confirm {
  width: calc(100% - 36px);
  margin: auto;
  border: 0;
  background: var(--c-surface);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(16, 36, 59, .3);
  padding: 22px 22px 20px;
}
dialog.confirm::backdrop { background: var(--c-scrim); }
/* A container of the right height, not the word "loading" (dialog-sheets spec's own rule, reused here
   now the question itself is fetched with htmx too — dialog-confirmations spec, 2026-08-25 addendum 2):
   the instant gap between showModal() opening the dialog and htmx swapping the real question in. */
.confirm__skeleton { min-height: 96px; }
.confirm__title { margin: 0; font: 600 17px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.confirm__lead { margin: 9px 0 0; font: 400 13.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.confirm__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.confirm__actions form { display: contents; }
.confirm__actions .wbtn { min-height: 48px; padding: 0 18px; font-size: 14.5px; }
.confirm__danger { background: var(--c-danger); border: 1px solid var(--c-danger); color: var(--c-surface); }
.confirm__danger:hover { background: var(--c-danger-hover); border-color: var(--c-danger-hover); color: var(--c-surface); }

@media (min-width: 1024px) {
  /* Frame 2u: the question is a modal of a fixed width, like the sheet above it. */
  dialog.confirm { width: 460px; }
}

/* ---------- Camera capture overlay (photo-webcam) ----------
   Not in any canvas — the mockup only draws the trigger button (design 2h); permission, live preview,
   the shot and the refusals are invented here from the same pieces the rest of the site already uses:
   a JS-built overlay exactly like the delete confirmation above (no address change, no history entry),
   the same .wbtn buttons, the same scrim. Desktop only — a narrow viewport opens the system camera
   through a plain capture input instead (site.js), so none of this markup is ever built there. */
.camcap-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--c-scrim);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 26px 18px 40px;
  overflow-y: auto;
}
.camcap {
  width: 100%;
  max-width: 420px;
  background: var(--c-surface);
  border-radius: 16px;
  box-shadow: 0 18px 48px rgba(16, 36, 59, .3);
  padding: 18px;
}
.camcap__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.camcap__title { margin: 0; font: 600 16px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.camcap__close {
  flex: none;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--c-muted);
  cursor: pointer;
}
.camcap__close svg { width: 18px; height: 18px; }
.camcap__close:hover { background: var(--c-bg); color: var(--c-heading); }

.camcap__stage {
  position: relative;
  margin-top: 14px;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: #10243B;
}
/* The live preview is mirrored so it behaves like a mirror, as people expect of their own face — the
   shot itself never is: the canvas below draws straight from the video's real, unmirrored frames, so
   text and a side parting come out the way they actually are, not flipped (spec's own warning). */
.camcap__video { transform: scaleX(-1); }
.camcap__video,
.camcap__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.camcap__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0 24px;
  font: 400 13.5px/1.5 var(--font-sans);
  color: #C7D6E6;
  text-align: center;
}
.camcap__loading[hidden] { display: none; }

.camcap__shoot {
  display: block;
  margin: 16px auto 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid var(--c-blue);
  background: var(--c-surface);
  cursor: pointer;
}
.camcap__shoot[hidden] { display: none; }
.camcap__shoot:hover { background: var(--c-tag-blue-bg); }

.camcap__actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.camcap__actions[hidden] { display: none; }
.camcap__actions .wbtn { flex: 1; min-height: 48px; padding: 0 18px; font-size: 14.5px; }

.camcap__error { margin: 14px 0 0; font: 400 13.5px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

/* ---------- "Reading your CV…" strip while a read is in flight (frame 1l) ---------- */

.wreadstrip {
  display: flex;
  align-items: center;
  gap: 9px;
  background: #EEF4FB;
  border-bottom: 1px solid #C9DCF0;
  padding: 9px 16px;
}
.wreadstrip__spinner {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #B9CEE6;
  border-top-color: var(--c-blue);
  flex: none;
  animation: wread-spin 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .wreadstrip__spinner { animation: none; }
}
.wreadstrip__text { flex: 1; font: 500 12.5px/1.35 var(--font-sans); color: #1F4E85; text-wrap: pretty; }
.wreadstrip__timer { font: 400 11px/1 var(--font-mono); color: #41546B; flex: none; }

/* ---------- CV proposal cards on Sea service, Education and Documents (cv-reading spec §5) ---------- */

/* Same shape and icons as a saved record's own card, so the list reads as one list — only the tint,
   the dashed border and the AUTO badge say this one is not a record yet. */
.wcard--proposal { border: 1.5px dashed var(--c-card-hover-border); background: var(--c-chip-active-bg); }
.wcard__titlerow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

/* ---------- Company cabinet ----------
   Design: .crew/design/company/"Crewvector Jobs Company" — 1d-1l mobile 390, 2d-2l desktop 1280.
   Mobile-first, same tokens as the rest of the site. One markup for both widths throughout: the
   account menu's company name and chevron, and the "New"/"New vacancy" button label, are the only
   things CSS hides per breakpoint (the .at-narrow/.at-wide utilities already used on the applications
   pages) — nothing here is a second copy of a block for the other width.
   <para>
   Dropdowns (the account menu, a card's "..." actions menu) are drawn as an anchored panel on every
   width, the same technique the public list's "SORT BY" menu already uses, rather than becoming a
   bottom sheet on mobile the way the macro draws them — a deliberate simplification of that one visual
   detail, noted in the task report; the menus themselves, their content and the two working actions
   behave identically at both widths. */

/* Header nav (frames 1d-1l/2d-2l). "Vacancies" is the only tab with a screen behind it in this task;
   the rest are drawn from the macro and disabled, same rule as the vacancy actions below. */
.cohead__nav { display: none; }
.cohead__link {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border-radius: 9px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--c-disabled-ink);
  text-decoration: none;
  white-space: nowrap;
}
.cohead__link--active { font-weight: 600; color: var(--c-blue); background: var(--c-tag-blue-bg); }
.cohead__link--soon { cursor: not-allowed; }
.cohead__link--soon:hover { color: var(--c-disabled-ink); }
.cohead__soon {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: .06em;
  background: var(--c-border-soft);
  color: var(--c-muted);
  border-radius: 5px;
  padding: 4px 6px;
}

/* Account menu trigger + dropdown (frames 1l/2l). */
.coacct { position: relative; }
.coacct__trigger {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 4px;
  border-radius: 10px;
  border: 0;
  background: none;
  text-decoration: none;
  cursor: pointer;
}
.coacct__trigger:hover { background: var(--c-field-bg); }
.coacct__name { display: none; font: 500 13.5px/1 var(--font-sans); color: var(--c-label); }
.coacct__avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--c-avatar-bg);
  display: grid;
  place-items: center;
  font: 600 12px/1 var(--font-display);
  color: var(--c-blue);
  flex: none;
}
.coacct__chev { display: none; width: 14px; height: 14px; color: var(--c-muted); }
.coacct__panel {
  position: absolute;
  right: 0;
  top: 52px;
  width: 280px;
  max-width: calc(100vw - 24px);
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: 14px;
  box-shadow: var(--shadow-pop-sort);
  padding: 8px;
  display: flex;
  flex-direction: column;
  z-index: 6;
}
.coacct__panel[hidden] { display: none; }
.coacct__who { padding: 10px 10px 12px; border-bottom: 1px solid var(--c-field-bg); margin-bottom: 6px; }
.coacct__whoname { font: 600 14.5px/1.3 var(--font-sans); color: var(--c-ink); }
.coacct__whorole { font: 400 12.5px/1.4 var(--font-mono); color: var(--c-muted); margin-top: 3px; }
.coacct__item {
  min-height: var(--tap);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 9px;
  font: 500 14px/1 var(--font-sans);
  color: var(--c-label);
  border: 0;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.coacct__item svg { width: 17px; height: 17px; flex: none; color: var(--c-muted); }
.coacct__item--button:hover { background: var(--c-field-bg); }
.coacct__item form { display: contents; }

/* Vacancy list page (frames 1d-1f/2d-2f). The column width/centering is not declared here: the page
   root carries "shell covacs" in markup, reusing .shell (the same 1280 column the cabinet header
   above it uses) rather than a second copy of width/max-width/margin. Every rule below — including
   the empty state, which has no width of its own — inherits that column from the root. */
.covacs { padding: 14px 12px 20px; }
.covacs__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.covacs__title { margin: 0; flex: 1; font: 700 22px/1.2 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; }

/* Status chips (frame 2d) — one row on every width, wrapping instead of a second mobile block. */
.statuschips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.statuschip {
  flex: none;
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  font: 500 13px/1 var(--font-sans);
  color: var(--c-body);
  text-decoration: none;
}
.statuschip:hover { border-color: var(--c-blue); color: var(--c-body); }
.statuschip--active,
.statuschip--active:hover { background: var(--c-navy); border-color: var(--c-navy); color: #fff; font-weight: 600; }

.covacs__none { margin: 0; padding: 22px 4px; font: 400 13.5px/1.5 var(--font-sans); color: var(--c-muted); }
.covacs__list { display: flex; flex-direction: column; gap: 12px; }

/* Buttons shared by the header's "New vacancy" and a card's primary action. Working (Publish) keeps the
   ordinary look; disabled ones (New vacancy, Edit, Duplicate) get the same pale/not-allowed treatment
   and SOON badge as the sign-in page's Google/Facebook buttons (project rule, 2026-08-26). */
.covacbtn {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 14px;
  border-radius: 11px;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  font: 600 14px/1 var(--font-sans);
  color: var(--c-label);
  cursor: pointer;
}
.covacbtn:hover { background: var(--c-field-bg); }
.covacbtn svg { width: 16px; height: 16px; }
.covacbtn--primary { border-color: transparent; background: var(--c-blue); color: #fff; }
.covacbtn--primary:hover { background: var(--c-blue-hover); color: #fff; }
.covacbtn:disabled {
  border-color: var(--c-border);
  background: var(--c-pale);
  color: var(--c-disabled-ink);
  cursor: not-allowed;
}
.covacbtn:disabled:hover { background: var(--c-pale); }

/* One card structure for draft, published and closed — only the badge colour, the date label and the
   actions differ with the content, never the wrapper (design frames 1d-1f/2d-2f). */
.covaccard {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.covaccard__top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.covaccard__badge {
  font: 500 11px/1 var(--font-mono);
  border-radius: 7px;
  padding: 5px 7px;
  border: 1px solid transparent;
}
.covaccard__badge--draft { color: var(--c-body); background: var(--c-field-bg); border-color: var(--c-border-input); }
.covaccard__badge--published { color: var(--c-published-ink); background: var(--c-published-bg); border-color: var(--c-published-border); }
.covaccard__badge--closed { color: var(--c-soft); background: var(--c-surface); border-color: var(--c-closed-border); }
.covaccard__date { font: 400 11.5px/1 var(--font-mono); color: var(--c-muted); }
.covaccard__title { font: 600 18px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.covaccard--closed .covaccard__title { color: var(--c-body); }
.covaccard__meta { font: 400 12.5px/1.5 var(--font-mono); color: var(--c-muted); text-wrap: pretty; }
.covaccard__actions { display: flex; align-items: start; gap: 8px; }
.covaccard__actions form { flex: 1; }
.covaccard__actions form .covacbtn,
.covaccard__actions .covacbtn:not(.covacbtn--new) { width: 100%; }

/* The "..." overflow trigger and its actions sheet/dropdown (design frames 1f: "actions sheet" —
   grip, vacancy title, actions, a Cancel row, dimmed backdrop; 2f: a plain anchored dropdown, no
   Cancel, no backdrop). One <dialog> for both: it is never opened with showModal() (a modal dialog is
   always centred in the browser's top layer and cannot be pinned next to one specific card's own
   button), so it carries no native ::backdrop either — .vacmenu__scrim below draws frame 1f's dimming
   by hand, the same way a hand-rolled overlay works elsewhere on this site. Mobile-first: the sheet is
   the base rule, the dropdown is the override under the 1024px query. */
.vacmenu { position: relative; flex: none; }
.vacmenu__trigger {
  width: 44px; height: 44px;
  border-radius: 11px;
  border: 1px solid var(--c-border-input);
  display: grid;
  place-items: center;
  color: var(--c-muted);
}
.vacmenu__trigger:hover { background: var(--c-field-bg); }
.vacmenu__trigger svg { width: 19px; height: 19px; }
/* The scrim is always in the DOM (no server-rendered open state — project rule, 2026-08-26): hidden
   until site.js opens the <dialog> next to it, shown only while that dialog is open. */
.vacmenu__scrim { position: fixed; inset: 0; background: var(--c-scrim); z-index: 5; display: none; }
.vacmenu:has(.vacmenu__panel[open]) .vacmenu__scrim { display: block; }
.vacmenu__panel {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: none;
  max-height: 82vh;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--c-surface);
  box-shadow: 0 -8px 26px rgba(16, 36, 59, .2);
  padding: 10px 12px 18px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 6;
}
.vacmenu__panel:not([open]) { display: none; }
.vacmenu__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--c-border-input); margin: 0 auto 12px; flex: none; }
.vacmenu__title {
  padding: 0 6px 10px;
  font: 600 15px/1.3 var(--font-display);
  color: var(--c-heading);
  text-wrap: pretty;
}
.vacmenu__item {
  min-height: 52px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 6px;
  font: 500 15px/1 var(--font-sans);
  color: var(--c-label);
  border: 0;
  border-top: 1px solid var(--c-field-bg);
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.vacmenu__item svg { width: 18px; height: 18px; flex: none; color: var(--c-muted); }
.vacmenu__item--button:hover { background: var(--c-field-bg); }
.vacmenu__item--soon { color: var(--c-disabled-ink); cursor: not-allowed; }
.vacmenu__item--soon svg { color: var(--c-disabled-ink); }
.vacmenu__item--soon span:not(.vacmenu__soon) { flex: 1; }
.vacmenu__soon {
  font: 500 10px/1 var(--font-mono);
  letter-spacing: .06em;
  background: var(--c-border-soft);
  color: var(--c-muted);
  border-radius: 5px;
  padding: 4px 6px;
}
.vacmenu__item form { display: contents; }
.vacmenu__cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  margin-top: 12px;
  border-radius: 12px;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  font: 600 15px/1 var(--font-sans);
  color: var(--c-label);
  text-decoration: none;
  flex: none;
}
.vacmenu__cancel:hover { background: var(--c-field-bg); }

/* Empty state (frames 1e/2e). */
.covacempty {
  background: var(--c-surface);
  border: 1px dashed var(--c-card-hover-border);
  border-radius: 16px;
  padding: 36px 20px;
  text-align: center;
}
.covacempty__icon {
  width: 50px; height: 50px;
  border-radius: 14px;
  background: var(--c-tag-blue-bg);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  color: var(--c-blue);
}
.covacempty__icon svg { width: 25px; height: 25px; }
.covacempty__title { margin: 0 0 8px; font: 700 19px/1.25 var(--font-display); color: var(--c-heading); }
.covacempty__lead { margin: 0 0 18px; font: 400 13.5px/1.6 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.covacempty .covacbtn { margin: 0 auto; }

@media (min-width: 1024px) {
  .cohead__nav { display: flex; align-items: center; gap: 2px; margin-left: 20px; }
  .coacct__name { display: block; }
  .coacct__chev { display: block; }

  /* The actions sheet becomes frame 2f's plain anchored dropdown: no scrim, no grip, no title, no
     Cancel — a click outside it (site.js) or its own trigger again is the only way to close it.
     !important: the open-scrim rule above is a `:has()` selector, higher specificity than a plain
     class, and would otherwise win here whenever the dialog happens to be open. */
  .vacmenu__scrim { display: none !important; }
  .vacmenu__grip,
  .vacmenu__title,
  .vacmenu__cancel { display: none; }
  .vacmenu__panel {
    position: absolute;
    inset: auto;
    top: 52px;
    right: 0;
    width: 236px;
    max-width: calc(100vw - 24px);
    max-height: none;
    border-radius: 12px;
    box-shadow: var(--shadow-pop-sort);
    padding: 6px;
  }
  .vacmenu__item {
    min-height: var(--tap);
    gap: 10px;
    padding: 0 10px;
    border-radius: 9px;
    border-top: 0;
    font-size: 14px;
  }
  .vacmenu__item svg { width: 17px; height: 17px; }

  .covacs { padding: 30px 32px 46px; }
  .covacs__title { font-size: 28px; }
  .covaccard { flex-direction: row; padding: 20px 22px; }
  .covaccard__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
  .covaccard__actions { flex: none; }
  .covaccard__actions form { flex: none; }
  .covaccard__actions form .covacbtn,
  .covaccard__actions .covacbtn:not(.covacbtn--new) { width: auto; }
  .covacempty { padding: 56px 32px; }
  .covacempty__icon { width: 54px; height: 54px; border-radius: 15px; margin-bottom: 18px; }
  .covacempty__icon svg { width: 27px; height: 27px; }
  .covacempty__title { font-size: 22px; }
}

/* ---------- Vacancy list numbers and the colleague filter (design "Vacancies Stats", frames
   10a-10f/9a-9f) ----------
   The responsible-colleague tag on a card (frame 10e/9e), the "no data yet"/real four-number metrics
   row and the "Not published" notice all live inside .covaccard__body, right after .covaccard__meta —
   see _CompanyVacancyCard.cshtml's own comment. The colleague filter itself is a second "vacmenu": same
   mobile-sheet-to-desktop-dropdown mechanism as a card's own "..." menu (data-vacmenu-toggle/-panel/
   -close), kept under its own class prefix rather than reusing .vacmenu's — two unrelated components
   sharing one class name would misdirect the next person grepping for either (the same .covacs/.cousers
   reasoning already in this file). */

.covaccard__owner {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 400 12px/1 var(--font-mono);
  color: var(--c-muted);
}
.covaccard__owner svg { width: 13px; height: 13px; flex: none; color: var(--c-disabled-ink); }

.covaccard__notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-soft);
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--c-muted);
}
.covaccard__notice svg { width: 16px; height: 16px; flex: none; color: var(--c-disabled-ink); margin-top: 1px; }

.covaccard__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--c-border-soft);
}
.covaccard__metric { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.covaccard__metricval { font: 600 17px/1 var(--font-mono); color: var(--c-heading); }
.covaccard--closed .covaccard__metricval { color: var(--c-body); }
.covaccard__metricval--dash { color: var(--c-metric-dash); }
.covaccard__metricval--new { color: var(--c-blue); }
.covaccard__metriclabel { font: 400 11.5px/1.3 var(--font-sans); color: var(--c-muted); }
.covaccard__metriclabel--new { color: var(--c-blue); }
.covaccard__metric:has(.covaccard__metricval--dash) .covaccard__metriclabel { color: var(--c-disabled-ink); }
/* "Published a few minutes ago — no visitors counted yet." — spans the full grid, under the four dashes. */
.covaccard__metricnote { grid-column: 1 / -1; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }

/* The count badge inside the card's own primary "Applications" button (frame 10a). */
.covacbtn__count {
  font: 600 11.5px/1 var(--font-mono);
  background: rgba(255, 255, 255, .22);
  border-radius: 6px;
  padding: 4px 6px;
}

/* Status chips and the colleague filter trigger share one row, wrapping together on a narrow screen —
   the same "one row, wraps" rule the chips alone already followed. */
.covacfilters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.covacfilters .statuschips { margin-bottom: 0; flex: 1; min-width: 0; }

.covacs__lead { margin: 0 0 16px; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.covacs__lead a { font-weight: 600; }

/* The colleague filter — mobile-first: a bottom sheet (base rules), a plain anchored dropdown from
   1024px (override below), the same split .vacmenu already uses for a card's own "..." menu. */
.assigneemenu { position: relative; flex: none; margin-left: auto; }
.assigneemenu__trigger {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 10px;
  border: 1px solid var(--c-blue);
  background: var(--c-surface);
  font: 600 13px/1 var(--font-sans);
  color: var(--c-heading);
  cursor: pointer;
  max-width: 100%;
}
.assigneemenu__trigger svg { width: 15px; height: 15px; flex: none; color: var(--c-blue); }
.assigneemenu__triggerlabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.assigneemenu__scrim { position: fixed; inset: 0; background: var(--c-scrim); z-index: 5; display: none; }
.assigneemenu:has(.assigneemenu__panel[open]) .assigneemenu__scrim { display: block; }
.assigneemenu__panel {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: none;
  max-height: 82vh;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--c-surface);
  box-shadow: 0 -8px 26px rgba(16, 36, 59, .2);
  padding: 16px 14px 20px;
  display: flex;
  flex-direction: column;
  z-index: 6;
}
.assigneemenu__panel:not([open]) { display: none; }
.assigneemenu__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--c-border-input); margin: 0 auto 14px; flex: none; }
.assigneemenu__title { margin-bottom: 14px; font: 600 18px/1.2 var(--font-display); color: var(--c-heading); }
.assigneemenu__list { overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.assigneerow {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  border-radius: 11px;
  text-decoration: none;
  font: 400 14.5px/1.3 var(--font-sans);
  color: var(--c-label);
}
.assigneerow:hover { background: var(--c-bg); color: var(--c-label); }
.assigneerow--active { background: var(--c-tag-blue-bg); font-weight: 600; color: var(--c-heading); }
.assigneerow--active:hover { background: var(--c-tag-blue-bg); color: var(--c-heading); }
.assigneerow__label { flex: 1; min-width: 0; }
.assigneerow__count { flex: none; font: 400 12px/1 var(--font-mono); color: var(--c-muted); }
.assigneerow svg { width: 14px; height: 14px; flex: none; color: var(--c-blue); }
/* "All colleagues" sits first in the list (user feedback, vacancy-stats), not in a footer below the
   individual rows — the divider below it is what used to sit above the footer instead. */
.assigneemenu__divider { height: 1px; background: var(--c-field-bg); margin: 6px 2px 8px; flex: none; }
.assigneemenu__all {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 10px;
  border-radius: 11px;
  font: 600 14.5px/1.3 var(--font-sans);
  color: var(--c-blue);
  text-decoration: none;
}
.assigneemenu__all:hover { background: var(--c-bg); color: var(--c-blue); }
.assigneemenu__all--active { background: var(--c-tag-blue-bg); }

@media (min-width: 1024px) {
  .covaccard__metrics { display: flex; flex-wrap: wrap; gap: 26px; }
  .covaccard__metric { flex-direction: column; align-items: flex-start; gap: 4px; }
  .covaccard__metricval { font-size: 20px; }
  .covaccard__metricnote { flex: 1 1 220px; display: flex; align-items: center; }

  .assigneemenu__scrim { display: none !important; }
  .assigneemenu__grip,
  .assigneemenu__title,
  .vacmenu__cancel { display: none; }
  .assigneemenu__panel {
    position: absolute;
    inset: auto;
    top: 44px;
    right: 0;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: none;
    border-radius: 12px;
    box-shadow: var(--shadow-pop-sort);
    padding: 10px;
  }
  .assigneerow { min-height: 40px; font-size: 13.5px; }
}

/* ==========================================================================
   Users of the account (design frames 1g-1k/2g-2k) — owner-only member list,
   inviting a colleague and the invite-sent banner. The accept-invite page
   itself (frames 1k/2k, outside the cabinet) reuses the plain .auth/.field
   markup instead of anything below — see Pages/Invite/Accept.cshtml.
   ========================================================================== */

/* Page shell — same shape as .covacs, kept separate: this page is not a vacancy list and a shared
   class name would misdirect the next person grepping for one or the other. Column width/centering
   again comes from "shell cousers" in markup, not from a rule here — see the .covacs comment above. */
.cousers { padding: 14px 12px 20px; }
.cousers__head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.cousers__title { margin: 0; flex: 1; font: 700 22px/1.2 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; }
.cousers__lead { margin: 0 0 16px; font: 400 13px/1.6 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

/* Buttons: the primary pill ("Invite user" / "Send invite"), a plain outline one ("Cancel") and the
   disabled "..." row trigger — no menu behind it yet (project rule, 2026-08-26: drawn, not omitted). */
.couserbtn {
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 18px;
  border-radius: 12px;
  border: 1px solid transparent;
  background: var(--c-blue);
  color: #fff;
  font: 600 14.5px/1 var(--font-sans);
  text-decoration: none;
  cursor: pointer;
}
.couserbtn:hover { background: var(--c-blue-hover); color: #fff; }
.couserbtn svg { width: 17px; height: 17px; }
.couserbtn--ghost { background: var(--c-surface); border-color: var(--c-border-input); color: var(--c-label); }
.couserbtn--ghost:hover { background: var(--c-field-bg); }
.couserbtn--small { min-height: 40px; padding: 0 14px; font-size: 13px; }
/* "Remove" on the Company profile logo (design "Crewvector Jobs Company", frame 2m) — same red as
   .app-danger's own revoke button, a different scoped class because every section here keeps its own. */
.couserbtn--danger { background: var(--c-surface); border-color: var(--c-danger-border); color: var(--c-danger-ink); }
.couserbtn--danger:hover { background: var(--c-danger-bg); color: var(--c-danger-ink); }

.comenu {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 11px;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  color: var(--c-disabled-ink);
  cursor: not-allowed;
}
.comenu svg { width: 19px; height: 19px; }

/* The member list — one structure for the owner, a confirmed colleague and a pending invite; only the
   avatar treatment, the badges and the trailing control differ with the row's own state. */
.cousers__list { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; }
.comember {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--c-field-bg);
}
.comember:last-child { border-bottom: 0; }
.comember__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-avatar-bg);
  display: grid;
  place-items: center;
  flex: none;
  font: 600 12.5px/1 var(--font-display);
  color: var(--c-blue);
}
.comember__avatar--pending {
  background: var(--c-field-bg);
  border: 1px dashed var(--c-check-border);
  color: var(--c-disabled-ink);
}
.comember__avatar--pending svg { width: 17px; height: 17px; }
.comember__body { flex: 1; min-width: 0; }
.comember__line1 { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.comember__name { font: 600 14.5px/1.3 var(--font-sans); color: var(--c-ink); overflow: hidden; text-overflow: ellipsis; }
.comember__name--pending { color: var(--c-body); }
.comember__meta {
  font: 400 12px/1.4 var(--font-mono);
  color: var(--c-muted);
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combadge { flex: none; font: 500 10.5px/1 var(--font-mono); border-radius: 7px; padding: 4px 6px; border: 1px solid transparent; }
.combadge--owner { color: var(--c-blue); background: var(--c-tag-blue-bg); border-color: var(--c-check-border); }
.combadge--you { color: var(--c-body); background: var(--c-field-bg); border-color: var(--c-border-input); }
.combadge--pending { color: var(--c-warn-ink); background: var(--c-warn-bg); border-color: var(--c-warn-border); }
.comember__resend { flex: none; }

/* "Last active ..." (frame 2g) is a desktop-only column — frame 1g's own row has no room for it and
   does not draw one. Same markup both widths, hidden by CSS at 390 rather than a second copy. */
.comember__lastactive { display: none; flex: none; font: 400 12.5px/1.3 var(--font-mono); color: var(--c-muted); }

/* Empty state — one person in the account (frame 1h/2h). Same shape as .covacempty (dashed card,
   icon circle, title, lead, primary button); its own classes for the same reason as .cousers above. */
.cousersempty {
  background: var(--c-surface);
  border: 1px dashed var(--c-card-hover-border);
  border-radius: 16px;
  padding: 28px 18px;
  text-align: center;
}
.cousersempty__title { margin: 0 0 8px; font: 700 18px/1.25 var(--font-display); color: var(--c-heading); }
.cousersempty__lead { margin: 0 0 18px; font: 400 13.5px/1.6 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.cousersempty .couserbtn { margin: 0 auto; }

/* "Invite sent" banner (frames 1j/2j) — the same success palette .appbadge--opened already uses. */
.couser-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--c-applied-bg);
  border: 1px solid var(--c-green);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 16px;
}
.couser-banner svg { width: 19px; height: 19px; flex: none; margin-top: 1px; color: var(--c-applied-ink); }
.couser-banner__title { font: 600 14px/1.35 var(--font-sans); color: var(--c-applied-ink); text-wrap: pretty; }
.couser-banner__lead { margin: 4px 0 0; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-applied-ink); text-wrap: pretty; }

/* "Invite a colleague" (frames 1i/2i): a bottom sheet under 1024px, a centred modal above it — same
   native-<dialog> mechanic as .wsheet (dialog-sheets spec), command/commandfor opens and closes it with
   no script required where the platform understands those attributes, site.js's own fallback otherwise. */
dialog.coinvite {
  position: fixed;
  inset: auto 0 0 0;
  margin: 0;
  width: 100%;
  max-width: none;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--c-surface);
  box-shadow: 0 -8px 26px rgba(16, 36, 59, .2);
  padding: 10px 16px 20px;
}
dialog.coinvite::backdrop { background: var(--c-scrim); }
.coinvite__grip { width: 40px; height: 4px; border-radius: 2px; background: var(--c-border-input); margin: 0 auto 14px; }
.coinvite__head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.coinvite__title { margin: 0; flex: 1; font: 700 20px/1.25 var(--font-display); color: var(--c-heading); }
.coinvite__close {
  width: 36px; height: 36px;
  flex: none;
  border-radius: 9px;
  border: 0;
  background: none;
  display: grid;
  place-items: center;
  color: var(--c-muted);
  cursor: pointer;
}
.coinvite__close:hover { background: var(--c-field-bg); }
.coinvite__close svg { width: 17px; height: 17px; }
.coinvite__note { margin: 14px 0 0; font: 400 12.5px/1.6 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.coinvite__actions { display: flex; gap: 10px; margin-top: 18px; }
.coinvite__actions .couserbtn { flex: 1; }

@media (min-width: 1024px) {
  .cousers { padding: 30px 32px 46px; }
  .cousers__title { font-size: 28px; }
  .cousersempty { padding: 40px 32px; }
  .cousersempty__title { font-size: 20px; }
  .comember__lastactive { display: block; }

  dialog.coinvite {
    inset: 60px 0 auto 0;
    left: 50%;
    transform: translateX(-50%);
    width: 460px;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(16, 36, 59, .28);
    padding: 28px;
  }
  .coinvite__grip { display: none; }
}

/* "You were invited to <company>" (frames 1k/2k) — the one bit of the accept-invite page that is not
   the ordinary .auth/.field markup already shared with Login/Register/ResetPassword. */
.invitecard { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.invitecard__mono {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--c-tag-blue-bg);
  display: grid;
  place-items: center;
  flex: none;
  font: 700 15px/1 var(--font-display);
  color: var(--c-blue);
}
.invitecard__body { flex: 1; min-width: 0; }
.invitecard__label { font: 400 12px/1 var(--font-mono); color: var(--c-muted); }
.invitecard__name { margin-top: 4px; font: 600 16px/1.3 var(--font-display); color: var(--c-heading); text-wrap: pretty; }

/* The small "not your invite?" note under the button (frames 1k/2k) — inside the card, unlike
   .auth__alt's own row below it, and smaller/muted rather than that row's ordinary body text. */
.auth__note { margin: 14px 0 0; text-align: center; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }

/* ==========================================================================
   Company profile (design "Crewvector Jobs Company", frames 1m mobile 390 /
   2m desktop 1280, task company-profile): name, logo and short description.
   One markup for both widths — the form + preview grid collapses to one
   column, and the logo/action button rows go from a full-width stack to a
   wrapping row, purely by media query, same DOM either way.
   ========================================================================== */

.coprof { padding: 14px 12px 20px; }
.coprof__title { margin: 0 0 6px; font: 700 22px/1.2 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; }
.coprof__lead { margin: 0 0 16px; font: 400 13px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

.coprof__grid { display: flex; flex-direction: column; gap: 16px; }

.coprof__card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.coprof__logo { display: flex; align-items: center; gap: 14px; }
.coprof__logoimg {
  width: 72px; height: 72px;
  flex: none;
  border-radius: 14px;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  object-fit: contain;
  display: grid;
  place-items: center;
  font: 700 20px/1 var(--font-display);
  color: var(--c-blue);
}
.coprof__logoimg--empty { background: var(--c-surface); }
.coprof__logobody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.coprof__logobtns { display: flex; flex-direction: column; gap: 8px; }
.coprof__logobtns .couserbtn { width: 100%; }

.coprof__countrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }

.coprof__actions { display: flex; flex-direction: column; gap: 9px; padding-top: 4px; }
.coprof__actions .couserbtn { width: 100%; }

.coprof__previewcard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 20px; }
.coprof__previewtitle { margin-bottom: 12px; font: 600 15px/1.2 var(--font-display); color: var(--c-heading); }
.coprof__previewrow {
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.coprof__previewavatar {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 10px;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  object-fit: contain;
  display: grid;
  place-items: center;
  font: 700 14px/1 var(--font-display);
  color: var(--c-blue);
}
.coprof__previewbody { flex: 1; min-width: 0; }
.coprof__previewname { font: 600 14.5px/1.3 var(--font-sans); color: var(--c-ink); }
.coprof__previewdesc { margin: 5px 0 0; font: 400 12px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.coprof__previewnote { margin: 12px 0 0; font: 400 11.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }

@media (min-width: 1024px) {
  .coprof { padding: 30px 32px 46px; }
  .coprof__title { font-size: 28px; }
  .coprof__lead { margin-bottom: 22px; font-size: 14px; }

  .coprof__grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }

  .coprof__card { padding: 22px 24px; gap: 16px; }
  .coprof__logo { gap: 16px; }
  .coprof__logoimg { width: 96px; height: 96px; font-size: 26px; }

  .coprof__logobtns { flex-direction: row; flex-wrap: wrap; gap: 9px; }
  .coprof__logobtns .couserbtn { width: auto; }

  .coprof__actions { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  .coprof__actions .couserbtn { width: auto; }
}

/* ==========================================================================
   Vacancy form (design "Crewvector Jobs Vacancy Form" + "... Actions",
   frames 1m-1u/2m-2u): New vacancy and Edit share this one page and one
   markup. Mobile-first; the sidebar nav becomes a wrapping chip row and the
   two-column grid collapses to one column under 1024px — same DOM both ways.
   ========================================================================== */

/* Deliberately its own width, not .shell/.covacs's 1280: the form column is narrower on purpose
   (project decision), so it carries width/max-width/margin here instead of taking "shell" in markup. */
.vacf { padding: 12px 12px 90px; max-width: 1060px; margin: 0 auto; }
.vacf__head { margin-bottom: 4px; }
.vacf__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  font: 500 13.5px/1 var(--font-sans);
  color: var(--c-blue);
  text-decoration: none;
}
.vacf__back svg { width: 16px; height: 16px; }

.vacf__titlerow { display: flex; align-items: center; gap: 10px; margin: 4px 0 10px; }
.vacf__title { margin: 0; flex: 1; min-width: 0; font: 700 22px/1.2 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; text-wrap: pretty; }
.vacf__badge { flex: none; font: 500 11px/1 var(--font-mono); border-radius: 8px; padding: 7px 9px; border: 1px solid transparent; }
.vacf__badge--draft { color: var(--c-body); background: var(--c-field-bg); border-color: var(--c-border-input); }
.vacf__badge--published { color: var(--c-published-ink); background: var(--c-published-bg); border-color: var(--c-published-border); }
.vacf__badge--closed { color: var(--c-soft); background: var(--c-surface); border-color: var(--c-closed-border); }
.vacf__menu { flex: none; }

.vacf__live {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--c-tag-blue-bg);
  border: 1px solid var(--c-card-hover-border);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 12px;
}
.vacf__live svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--c-blue); }
.vacf__live-title { font: 600 13.5px/1.4 var(--font-sans); color: var(--c-heading); text-wrap: pretty; }
.vacf__live-note { margin-top: 4px; font: 400 12px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

.vacf__banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--c-danger-bg);
  border: 1px solid var(--c-danger-border);
  border-radius: 12px;
  padding: 13px 14px;
  margin-bottom: 12px;
}
.vacf__banner svg { width: 14px; height: 14px; flex: none; margin-top: 2px; color: var(--c-invalid); }
.vacf__banner-title { font: 600 13.5px/1.4 var(--font-sans); color: var(--c-danger-ink); }
.vacf__banner-detail { margin-top: 3px; font: 400 12px/1.55 var(--font-sans); color: var(--c-danger-ink); text-wrap: pretty; }

/* Sidebar nav on desktop, a wrapping chip row on mobile — same anchors, same DOM. */
.vacf__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 8px;
  margin-bottom: 12px;
}
.vacf__navitem {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 4px 10px;
  border-radius: 8px;
  font: 500 12.5px/1.3 var(--font-sans);
  color: var(--c-label);
  text-decoration: none;
  background: var(--c-field-bg);
}
.vacf__navstate { font: 400 10.5px/1 var(--font-mono); color: var(--c-muted); }
.vacf__navstate--error { color: var(--c-invalid); }

.vacf__main { display: flex; flex-direction: column; gap: 12px; }

.vacf__card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 18px 16px;
}
.vacf__cardhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.vacf__cardtitle { margin: 0; flex: 1; font: 600 16px/1.25 var(--font-display); color: var(--c-heading); }
.vacf__cardstate { font: 400 11.5px/1 var(--font-mono); color: var(--c-muted); }
.vacf__fields { display: flex; flex-direction: column; gap: 14px; }
.vacf__req { color: var(--c-invalid); }

/* Collapsible optional groups: <details>/<summary> so opening one is native browser behaviour, and a
   sidebar link straight to an element inside a closed one opens it with no script at all. */
.vacf__group {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
}
.vacf__group[open] { padding-bottom: 4px; }
.vacf__summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  cursor: pointer;
  list-style: none;
}
.vacf__summary::-webkit-details-marker { display: none; }
.vacf__summary-body { flex: 1; min-width: 0; }
.vacf__summary-title { display: block; font: 600 15px/1.25 var(--font-display); color: var(--c-heading); }
.vacf__summary-note { display: none; font: 400 11.5px/1.45 var(--font-mono); color: var(--c-muted); margin-top: 4px; }
.vacf__summary-state { flex: none; font: 400 11.5px/1 var(--font-mono); color: var(--c-muted); }
.vacf__chevron { width: 15px; height: 15px; flex: none; color: var(--c-disabled-ink); transition: transform .15s; }
.vacf__group[open] .vacf__chevron { transform: rotate(180deg); }
.vacf__group:not([open]) .vacf__summary-note { display: block; }
.vacf__group:not([open]):hover .vacf__summary { background: var(--c-pale); }
.vacf__group[open] .vacf__fields { padding: 0 16px 16px; }

.vacf__toggle {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 13px 14px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-pale);
  cursor: pointer;
}
.vacf__toggle-title { font: 400 13.5px/1.4 var(--font-sans); color: var(--c-label); }
.vacf__toggle-note { margin-top: 4px; font: 400 11.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }

.vacf__vesselrow { display: flex; flex-direction: column; gap: 14px; }
.vacf__imorow { display: flex; flex-direction: column; gap: 14px; }
.vacf__imowrap { display: flex; align-items: center; gap: 8px; }
.vacf__imowrap .field__input { flex: 1; }
.vacf__imobtn {
  flex: none;
  width: 40px; height: 40px;
  border-radius: 9px;
  border: 1px solid var(--c-card-hover-border);
  background: var(--c-tag-blue-bg);
  color: var(--c-blue);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.vacf__imobtn:hover { background: var(--c-chip-active-hover); }
.vacf__imo-icon,
.vacf__imo-spinner { width: 17px; height: 17px; grid-area: 1 / 1; }
.vacf__imo-spinner { display: none; animation: wread-spin 1s linear infinite; }
.vacf__imowrap:has(.vacf__imo-spinner.htmx-request) .vacf__imo-icon { display: none; }
.vacf__imowrap .vacf__imo-spinner.htmx-request { display: block; }
.vacf__inlinecheck { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; }
.vacf__inlinecheck span { font: 400 13.5px/1 var(--font-sans); color: var(--c-label); }

.vacf__checkrow { display: flex; flex-wrap: wrap; gap: 8px 28px; }

.vacf__responsible .field__select { max-width: 420px; }
.vacf__contactcard { display: flex; flex-direction: column; max-width: 420px; }
.vacf__contactrow {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--c-border-soft);
  font: 400 13.5px/1.4 var(--font-sans);
}
.vacf__contactrow:last-child { border-bottom: 0; }
.vacf__contactrow span:first-child { flex: none; width: 84px; font: 400 12px/1.3 var(--font-mono); color: var(--c-muted); }
.vacf__contactrow span:last-child { flex: 1; min-width: 0; color: var(--c-ink); }

.vacf__count { font: 400 11px/1 var(--font-mono); color: var(--c-muted); }
/* Down and to the right, under the field — same corner the message counter uses (cons-msg__foot). */
.vacf__countrow { display: flex; justify-content: flex-end; margin-top: 6px; }

.vacf__footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 14px 16px;
}
.vacf__footer-note { font: 400 12.5px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.vacf__btn--muted { background: var(--c-card-hover-border); color: #fff; }
.vacf__btn--muted:hover { background: var(--c-card-hover-border); }
.vacf__btn--danger { border-color: transparent; background: var(--c-invalid); color: #fff; }
.vacf__btn--danger:hover { background: #A32F23; }

/* The vessel and nationality pickers' shared overlay panel (picker-overlay-component). Unlike the old
   .vacf__pop, this is not scoped inside the field's own <details> group — .vacf__group's overflow:
   hidden was clipping it there, so it lost that fight rather than winning it. picker.js creates one
   singleton .picker-pop, appends it straight to <body>, and positions it in document coordinates
   (left/top/width/max-height all set inline per open, in sync with the anchored field's own rect) —
   nothing here fixes its size or place, only its look. z-index is set above the form's own layered
   pieces (.vacf__scrim: 8, .vacf__dialog: 9, .vacmenu__panel: 6) since it can be summoned from
   anywhere on the form; a real conflict is resolved by closing the picker when a menu opens, not by
   chasing a higher number here. max-height/overflow-y matter most for the nationalities list, which
   runs to the full countries dictionary (~240 rows) and must scroll instead of growing without end. */
.picker-pop {
  position: absolute;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  box-shadow: var(--shadow-pop);
  max-height: 400px;
}

/* Vessel-name autocomplete — reuses .wsuggest's own look (Airport suggestions), with a usage-count
   trailer and a "use as new vessel" row of its own. */
.vacf__vesselname { position: relative; }
.vacf__vessel-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 8px 12px;
  border: 0;
  border-bottom: 1px solid var(--c-field-bg);
  background: var(--c-surface);
  cursor: pointer;
  text-align: left;
}
.vacf__vessel-item:hover { background: var(--c-bg); }
.vacf__vessel-item svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--c-muted); }
.vacf__vessel-name { font: 600 14px/1.3 var(--font-sans); color: var(--c-ink); }
.vacf__vessel-meta { margin-top: 3px; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
.vacf__vessel-used { flex: none; font: 400 10.5px/1.3 var(--font-mono); color: var(--c-muted); }
.vacf__vessel-new {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-top: 1px solid var(--c-field-bg);
  background: var(--c-surface);
  color: var(--c-blue);
  font: 500 13px/1.3 var(--font-sans);
  cursor: pointer;
  text-align: left;
}
.vacf__vessel-new:hover { background: var(--c-bg); }
/* Keyboard highlight (picker-keyboard-and-swap) — picker.js adds/removes .is-active on the row
   ArrowUp/ArrowDown currently point at. One selector per row kind that can appear inside a picker
   panel — this rule originally only listed the vessel panel's two row kinds (acceptance defect:
   picker.js was correctly adding .is-active to a highlighted .vacf__nat-item, but nothing painted,
   since no rule matched that class there — arrow keys silently highlighted a row the user could not
   see in the nationalities panel). Any future row kind needs its own selector added here, next to
   its own :hover. Same background as the existing :hover rules so mouse and keyboard reach the
   identical look; nothing new invented for it. */
.vacf__vessel-item.is-active,
.vacf__vessel-new.is-active,
.vacf__nat-item.is-active,
.wmsg__item.is-active { background: var(--c-bg); }

/* Nationality chips-and-search (Requirements group) — the same focus/filter mechanism as the vessel
   picker above, over a hidden multi-select instead of a single text field. */
.vacf__natbox { position: relative; }
.vacf__natchips {
  min-height: 50px;
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  background: var(--c-surface);
  padding: 9px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.vacf__natchips:focus-within { border-color: var(--c-blue); }
.vacf__natchip {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--c-label);
  background: var(--c-tag-blue-bg);
  border: 1px solid var(--c-card-hover-border);
  border-radius: 8px;
  padding: 7px 8px;
}
.vacf__natchip button {
  display: flex;
  border: 0;
  background: none;
  padding: 0;
  color: var(--c-muted);
  cursor: pointer;
}
.vacf__natchip button svg { width: 11px; height: 11px; }
.vacf__natinput {
  flex: 1;
  min-width: 90px;
  border: 0;
  outline: none;
  background: transparent;
  padding: 4px 2px;
  font: 400 13px/1 var(--font-sans);
  color: var(--c-blue);
}
/* "+ Add" (frame 2q, picker-keyboard-and-swap) — now the input's own placeholder="+ Add" instead of a
   separate static <label data-nat-add> element (renderChips() in picker.js used to insert chips before
   that label as an anchor; it now inserts them before the input itself, which is the last element in
   .vacf__natchips either way). This is not a reversal of picker-overlay-fix's move away from a
   placeholder there — that decision was about a placeholder reappearing after every pick reading as an
   "always on" label rather than the mockup's genuinely static one. Hiding it specifically on focus is a
   later, direct request, and a placeholder is exactly the right tool for that: :focus::placeholder is
   the same across browsers, unlike trying to catch focus/blur in script to fake the same effect. */
.vacf__natinput::placeholder { color: var(--c-blue); opacity: 1; }
.vacf__natinput:focus::placeholder { color: transparent; }
.vacf__nat-item {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--c-field-bg);
  background: var(--c-surface);
  font: 400 13.5px/1.3 var(--font-sans);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
}
.vacf__nat-item:last-child { border-bottom: 0; }
.vacf__nat-item:hover { background: var(--c-bg); }

/* Messenger chips-and-search (Personal step "Apps on this number", profile-messengers task) — the same
   picker.js floating-panel mechanism as the nationality field above, but with two differences the
   nationality variant did not need: two independent instances on one page (phone and second phone, each
   its own anchor/select pair instead of one document-wide selector), and rows that stay in the list after
   being picked, showing a checkbox instead of disappearing (an app can be un-picked from the same panel
   it was picked in, mockup frame 1d "picker open"). */
.wmsg__caption { font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); margin-top: 6px; }
.wmsg.is-disabled { opacity: .5; pointer-events: none; }
.wmsg__box { position: relative; margin-top: 6px; }
.wmsg__chips {
  min-height: 44px;
  border: 1px solid var(--c-border-input);
  border-radius: 11px;
  background: var(--c-surface);
  padding: 8px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.wmsg__chips:focus-within { border-color: var(--c-blue); }
.wmsg__empty { font: 400 12.5px/1.4 var(--font-sans); color: var(--c-muted); }
.wmsg__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12.5px/1 var(--font-sans);
  color: var(--c-label);
  background: var(--c-tag-blue-bg);
  border: 1px solid var(--c-card-hover-border);
  border-radius: 8px;
  padding: 7px 8px;
}
.wmsg__chip button { display: flex; border: 0; background: none; padding: 0; color: var(--c-muted); cursor: pointer; }
.wmsg__chip button svg { width: 11px; height: 11px; }
.wmsg__add { display: inline-flex; align-items: center; gap: 5px; min-height: 34px; color: var(--c-blue); }
.wmsg__add svg { width: 13px; height: 13px; }
.wmsg__searchinput {
  min-width: 70px;
  border: 0;
  outline: none;
  background: transparent;
  padding: 4px 2px;
  font: 600 12.5px/1 var(--font-sans);
  color: var(--c-blue);
}
.wmsg__searchinput::placeholder { color: var(--c-blue); opacity: 1; }
.wmsg__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  background: var(--c-surface);
  font: 500 13.5px/1.4 var(--font-sans);
  color: var(--c-ink);
  text-align: left;
  cursor: pointer;
}
.wmsg__item:hover { background: var(--c-bg); }
.wmsg__item-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--c-border-input);
  display: grid;
  place-items: center;
  flex: none;
}
.wmsg__item.is-checked .wmsg__item-check { background: var(--c-blue); border-color: var(--c-blue); }
.wmsg__item.is-checked .wmsg__item-check svg { width: 12px; height: 12px; color: #fff; }
.wmsg__footer {
  padding: 8px 12px;
  border-top: 1px solid var(--c-field-bg);
  font: 400 11.5px/1.4 var(--font-mono);
  color: var(--c-muted);
}
/* "Other messenger — not tied to a number": a dropdown plus a free-text contact field, one column on
   mobile (the shared wgrid rule already handles that everywhere else), 220px + fill on desktop below. */
.wmsgother { display: grid; grid-template-columns: 1fr; gap: 14px; }

/* The vacancy form's own "..." menu shares .vacmenu with the card's (cabinet-polish, 2026-08-26): the
   open/closed scrim rules now live on the plain .vacmenu selector above, not scoped to .vacf__menu. */

.vacf__scrim { position: fixed; inset: 0; background: var(--c-scrim); z-index: 8; }
.vacf__dialog {
  position: fixed;
  inset: auto 12px 12px 12px;
  z-index: 9;
  background: var(--c-surface);
  border-radius: 16px;
  box-shadow: 0 26px 60px rgba(16, 36, 59, .32);
  padding: 22px 18px;
}
.vacf__dialog-title { margin: 0 0 8px; font: 700 19px/1.25 var(--font-display); color: var(--c-heading); }
.vacf__dialog-lead { margin: 0 0 14px; font: 400 13.5px/1.6 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.vacf__dialog-notes {
  display: flex;
  flex-direction: column;
  gap: 9px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-pale);
  padding: 12px 14px;
  margin-bottom: 18px;
}
.vacf__dialog-note { display: flex; align-items: flex-start; gap: 9px; font: 400 12.5px/1.5 var(--font-sans); color: var(--c-label); }
.vacf__dialog-note svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--c-muted); }
.vacf__dialog-note:first-child svg { color: var(--c-published-ink); }
.vacf__dialog-actions { display: flex; flex-direction: column-reverse; gap: 10px; }

@media (min-width: 1024px) {
  .vacf { padding: 26px 32px 46px; }
  .vacf__title { font-size: 26px; }
  .vacf__layout { display: grid; grid-template-columns: 236px 1fr; gap: 24px; align-items: start; }
  .vacf__nav {
    flex-direction: column;
    flex-wrap: nowrap;
    position: sticky;
    top: 20px;
    padding: 8px;
  }
  .vacf__navitem { background: none; min-height: 46px; padding: 0 12px; }
  .vacf__navitem:hover { background: var(--c-field-bg); }
  .vacf__card { padding: 20px 22px; }
  .vacf__group[open] .vacf__fields { padding: 0 22px 20px; }
  .vacf__summary { padding: 20px 22px; }
  .vacf__summary-note { display: block; }
  .vacf__vesselrow { flex-direction: row; align-items: flex-end; gap: 18px; }
  .vacf__vesselname { flex: 1; }
  .vacf__imorow { flex-direction: row; align-items: center; gap: 18px; }
  .vacf__imo { flex: 1; min-width: 0; }
  .vacf__imohint { flex: 1; min-width: 0; }
  .vacf__footer { flex-direction: row; align-items: center; padding: 15px 22px; }
  .vacf__footer-note { flex: 1; }
  .vacf__dialog { inset: auto; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 480px; padding: 28px 30px; }
  .vacf__dialog-actions { flex-direction: row; justify-content: flex-end; }
}

/* ==========================================================================
   Company applications (design "Crewvector Jobs Applications" — frames
   4a-4f desktop 1280, 3a-3f mobile 390): the grouped list behind the
   cabinet header's "Applications" item, one vacancy's own list, and the
   seafarer profile a row opens. Same tokens as the rest of the company
   cabinet; .appbadge (above) is reused as-is for New/Opened/Access revoked
   — its three colours already match this design exactly.
   ========================================================================== */

/* Page shell for both list screens (Index.cshtml and Vacancy.cshtml) — same shape as .covacs,
   kept apart because the two pages carry different heads (a lead paragraph vs. a back link and a
   vacancy heading). Column width/centering comes from "shell coapps" in markup, same as .covacs. */
.coapps { padding: 14px 12px 20px; }
.coapps__head { margin-bottom: 4px; }
.coapps__title { margin: 0; font: 700 22px/1.2 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; }
.coapps__lead { margin: 7px 0 0; font: 400 13px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

.coapps__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font: 500 13px/1 var(--font-sans);
  color: var(--c-body);
}
.coapps__back:hover { color: var(--c-blue); }
.coapps__back svg { width: 15px; height: 15px; }
.coapps__vactitle { margin: 0; font: 700 22px/1.25 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; text-wrap: pretty; }
.coapps__vacmeta { margin-top: 6px; font: 400 12.5px/1.5 var(--font-mono); color: var(--c-muted); text-wrap: pretty; }

/* No tabs on this screen (the designer removed them) — this single "Applications N" pill is what is
   left of that row, matching frame 3b's own mobile treatment at every width. */
.coapptabs { display: flex; margin: 16px 0 14px; }
.coapptabs__tab {
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border-radius: 10px;
  background: var(--c-navy);
  color: #fff;
  font: 600 13px/1 var(--font-sans);
}
.coapptabs__count { font: 600 11.5px/1 var(--font-mono); background: rgba(255, 255, 255, .16); border-radius: 6px; padding: 4px 6px; }

.coapps__list { display: flex; flex-direction: column; gap: 12px; }
.coapps__list--single { gap: 10px; }

/* One group card of the grouped list (frame 4a/3a): its own heading, the "N new" count and the "All N"
   link to the single-vacancy list, then up to IndexModel.PreviewRowCount rows. */
.coappgroup { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; overflow: hidden; }
.coappgroup__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; }
.coappgroup__id { flex: 1 1 200px; min-width: 0; }
.coappgroup__title { font: 600 15px/1.35 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.coappgroup__title:hover { color: var(--c-blue); }
.coappgroup__meta { margin-top: 4px; font: 400 11.5px/1.5 var(--font-mono); color: var(--c-muted); }
.coappgroup__all { flex: none; }

/* Empty state, one vacancy with no applications (frame 4f/3f). */
.coappempty { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 30px 20px; text-align: center; }
.coappempty__icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  background: var(--c-field-bg);
  display: grid;
  place-items: center;
  margin: 0 auto 14px;
  color: var(--c-soft);
}
.coappempty__icon svg { width: 23px; height: 23px; }
.coappempty__title { margin: 0 0 8px; font: 600 17px/1.3 var(--font-display); color: var(--c-heading); }
.coappempty__lead { margin: 0 0 18px; font: 400 13.5px/1.6 var(--font-sans); color: var(--c-body); text-wrap: pretty; }
.coappempty .covacbtn { margin: 0 auto; }

/* ---------- One row, both lists (_CompanyApplicationRow.cshtml) ---------- */

.coapprow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  text-decoration: none;
  border-top: 1px solid var(--c-border-soft);
}
.coappgroup .coapprow:first-of-type { border-top: 1px solid var(--c-border-soft); }
.coapps__list--single .coapprow {
  border-top: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
}
.coapprow:hover { background: var(--c-pale); }
.coapps__list--single .coapprow:hover { background: var(--c-surface); border-color: var(--c-card-hover-border); }
.coapprow--gone { opacity: .92; }
.coapprow__avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-avatar-bg);
  display: grid;
  place-items: center;
  flex: none;
  font: 600 12.5px/1 var(--font-display);
  color: var(--c-blue);
}
.coapprow__avatar--gone { background: var(--c-field-bg); border: 1px dashed var(--c-check-border); color: var(--c-muted); }
.coapprow__avatar--gone svg { width: 17px; height: 17px; }
.coapprow__body { flex: 1; min-width: 0; }
.coapprow__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coapprow__name { font: 600 15.5px/1.3 var(--font-display); color: var(--c-heading); }
.coapprow--gone .coapprow__name { color: var(--c-body); }
.coapprow__meta { margin-top: 4px; font: 400 11.5px/1.5 var(--font-mono); color: var(--c-muted); }
.coapprow__msg { display: flex; align-items: flex-start; gap: 7px; margin-top: 9px; }
.coapprow__msg svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--c-muted); }
.coapprow__msgtext {
  font: 400 13px/1.5 var(--font-sans);
  color: var(--c-body);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.coapprow__msgtext--none { margin-top: 9px; color: var(--c-disabled-ink); }
.coapprow__gonenote { margin-top: 9px; font: 400 13px/1.5 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }
.coapprow__chevron { flex: none; align-self: center; width: 18px; height: 18px; color: var(--c-disabled-ink); }

/* ---------- One application in full (Details.cshtml, frames 4c/4d/4e/3c/3d/3e) ---------- */

.coapp { padding: 14px 12px 24px; }
.coapp__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  font: 500 13px/1 var(--font-sans);
  color: var(--c-body);
}
.coapp__back:hover { color: var(--c-blue); }
.coapp__back svg { width: 15px; height: 15px; }

.coapp__grid { display: flex; flex-direction: column; gap: 14px; }
.coapp__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.coapp__side { display: flex; flex-direction: column; gap: 14px; }

.coappcard { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 16px 14px; }
.coappcard--tight { padding: 16px; }
.coappcard__rule { border: 0; border-top: 1px solid var(--c-border-soft); margin: 16px 0; }
.coappcard__empty { margin: 0; font: 400 13.5px/1.5 var(--font-sans); color: var(--c-muted); }

.coappcard__head { display: flex; align-items: flex-start; gap: 12px; }
.coappcard__avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--c-avatar-bg);
  display: grid;
  place-items: center;
  flex: none;
  font: 600 14px/1 var(--font-display);
  color: var(--c-blue);
}
.coappcard__avatar--lg { width: 46px; height: 46px; font-size: 14px; }
.coappcard__avatar--gone { background: var(--c-field-bg); border: 1px dashed var(--c-check-border); color: var(--c-muted); }
.coappcard__avatar--gone svg { width: 20px; height: 20px; }
.coappcard__id { flex: 1; min-width: 0; }
.coappcard__namerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.coappcard__name { margin: 0; font: 700 18px/1.25 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; }
.coappcard__name--gone { color: var(--c-body); }
.coappcard__meta { margin-top: 4px; font: 400 11.5px/1.5 var(--font-mono); color: var(--c-muted); }
.coappcard__badge { margin-top: 2px; }

.coappviewedchip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  padding: 6px 7px;
  border-radius: 8px;
  border: 1px solid var(--c-border-input);
  background: var(--c-field-bg);
  font: 500 11px/1 var(--font-mono);
  color: var(--c-muted);
}
.coappviewedchip svg { width: 13px; height: 13px; flex: none; }

.coappmsg__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.coappmsg__head svg { width: 15px; height: 15px; flex: none; color: var(--c-label); }
.coappmsg__title { flex: 1; font: 600 13.5px/1 var(--font-sans); color: var(--c-ink); }
.coappmsg__len { font: 400 11px/1 var(--font-mono); color: var(--c-disabled-ink); }
.coappmsg__box {
  background: var(--c-pale);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px 13px;
  font: 400 13px/1.6 var(--font-sans);
  color: var(--c-ink);
  text-wrap: pretty;
  white-space: pre-wrap;
}
.coappmsg__empty {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px dashed var(--c-border-input);
  border-radius: 12px;
  padding: 12px 13px;
  font: 400 12.5px/1.5 var(--font-sans);
  color: var(--c-muted);
  text-wrap: pretty;
}
.coappmsg__empty svg { width: 15px; height: 15px; flex: none; color: var(--c-disabled-ink); }

.coappcard__subhead { font: 600 14px/1 var(--font-sans); color: var(--c-ink); margin-bottom: 14px; }
.coappcard__subhead--count { display: flex; align-items: center; gap: 8px; }
.coappcard__count { font: 400 11.5px/1 var(--font-mono); color: var(--c-disabled-ink); }

.coappcontacts { display: flex; flex-direction: column; gap: 11px; }
.coappcontacts__item { display: flex; gap: 12px; align-items: baseline; }
.coappcontacts__label { flex: none; width: 130px; font: 400 11px/1.5 var(--font-mono); color: var(--c-disabled-ink); }
.coappcontacts__value { flex: 1; min-width: 0; font: 400 13px/1.4 var(--font-mono); color: var(--c-ink); word-break: break-word; }
.coappcontacts__value--link { color: var(--c-blue); }
.coappcontacts__value--sans { font-family: var(--font-sans); font-weight: 500; }

.coappstats {
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--c-pale);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 12px 13px;
  margin-bottom: 16px;
}
.coappstats__item { display: flex; gap: 12px; align-items: baseline; }
.coappstats__label { flex: none; width: 150px; font: 400 11px/1.5 var(--font-mono); color: var(--c-disabled-ink); text-transform: uppercase; }
.coappstats__value { flex: 1; min-width: 0; font: 500 13.5px/1.4 var(--font-sans); color: var(--c-ink); }
.coappstats__value--muted { color: var(--c-disabled-ink); }

.coapplines { display: flex; flex-direction: column; gap: 12px; }
.coappline { display: flex; flex-direction: column; gap: 3px; padding-top: 12px; border-top: 1px solid var(--c-border-soft); }
.coappline:first-child { padding-top: 0; border-top: 0; }
.coappline__period { font: 400 11.5px/1.5 var(--font-mono); color: var(--c-muted); }
.coappline__text { font: 500 14px/1.4 var(--font-sans); color: var(--c-ink); }
.coappline__owner { font-weight: 400; color: var(--c-muted); }

.coappdocs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.coappdoc {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--c-border);
  border-radius: 11px;
}
.coappdoc svg { width: 17px; height: 17px; flex: none; color: var(--c-muted); }
.coappdoc--warn { border-color: var(--c-warn-border); background: var(--c-warn-bg); }
.coappdoc--warn svg { color: var(--c-warn-ink); }
.coappdoc--expired { border-color: var(--c-danger-border); background: var(--c-danger-bg); }
.coappdoc--expired svg { color: var(--c-danger-ink); }
.coappdoc__body { flex: 1; min-width: 0; }
.coappdoc__title { font: 500 13.5px/1.4 var(--font-sans); color: var(--c-ink); }
.coappdoc__sub { margin-top: 2px; font: 400 11.5px/1.4 var(--font-mono); color: var(--c-muted); }
.coappdoc--warn .coappdoc__sub { color: var(--c-warn-ink); }
.coappdoc--expired .coappdoc__sub { color: var(--c-danger-ink); }
/* Disabled: no document viewer exists for a company yet (project rule, 2026-08-26 — drawn, not omitted). */
.coappdoc__open { flex: none; font: 600 12.5px/1 var(--font-sans); color: var(--c-disabled-ink); cursor: not-allowed; }
.coappdocs__all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: var(--c-disabled-ink);
  cursor: not-allowed;
}

.coappcard__label { font: 400 11.5px/1 var(--font-mono); color: var(--c-disabled-ink); letter-spacing: .04em; margin-bottom: 10px; }
.coappcard__vactitle { font: 600 15px/1.35 var(--font-display); color: var(--c-heading); text-wrap: pretty; }
.coappcard__vacdate { margin-top: 6px; font: 400 12.5px/1.5 var(--font-mono); color: var(--c-muted); }
.coappcard__backbtn { width: 100%; margin-top: 14px; min-height: 46px; }

.coappnote { background: var(--c-pale); border: 1px solid var(--c-border); border-radius: 14px; padding: 16px; }
.coappnote__title { font: 600 13.5px/1.4 var(--font-sans); color: var(--c-ink); }
.coappnote__text { margin: 6px 0 0; font: 400 12.5px/1.6 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }

/* ---------- Revoked application (frames 4e/3e) ---------- */

.coappgone {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 15px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-pale);
}
.coappgone svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--c-muted); }
.coappgone__body { flex: 1; min-width: 0; }
.coappgone__title { font: 600 14px/1.35 var(--font-sans); color: var(--c-ink); }
.coappgone__text { margin: 6px 0 0; font: 400 13px/1.6 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

.coappstays { margin-top: 14px; padding: 14px 15px; border: 1px dashed var(--c-border-input); border-radius: 12px; }
.coappstays__label { font: 400 11px/1 var(--font-mono); color: var(--c-disabled-ink); letter-spacing: .04em; margin-bottom: 10px; }
.coappstays .coappstats { background: none; border: 0; padding: 0; margin-bottom: 0; }

.coappclosed {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  background: var(--c-field-bg);
  border: 1px dashed var(--c-check-border);
  color: var(--c-disabled-ink);
  font: 600 14.5px/1 var(--font-sans);
  cursor: not-allowed;
}
.coappclosed svg { width: 16px; height: 16px; }

@media (min-width: 1024px) {
  .coapps { padding: 26px 32px 46px; }
  .coapps__title { font-size: 28px; }
  .coapps__lead { font-size: 14px; }
  .coapps__vactitle { font-size: 26px; }
  .coapp { padding: 26px 32px 46px; }

  .coappgroup__head { padding: 18px 22px; flex-wrap: nowrap; }
  .coapprow { padding: 14px 22px; }
  .coapps__list--single .coapprow { padding: 18px 22px; }
  .coapprow__name { font-size: 17px; }
  .coapprow__avatar { width: 44px; height: 44px; font-size: 14px; }

  .coapp__grid { flex-direction: row; align-items: flex-start; gap: 20px; }
  .coapp__side { width: 300px; flex: none; }
  .coappcard { padding: 22px; }
  .coappcard--tight { padding: 20px; }
  .coappcard__avatar--lg { width: 64px; height: 64px; font-size: 19px; }
  .coappcard__name { font-size: 26px; }
  .coappcontacts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; }
  .coappcontacts__item { flex-direction: column; align-items: flex-start; gap: 5px; }
  .coappcontacts__label { width: auto; }
  .coappstats { grid-template-columns: repeat(3, 1fr); display: grid; }
  .coappstays .coappstats { grid-template-columns: 1fr 1fr; }
  .coappstats__item { flex-direction: column; align-items: flex-start; gap: 5px; }
  .coappstats__label { width: auto; }
  .coappline { flex-direction: row; gap: 16px; padding-top: 0; border-top: 0; }
  .coappline__period { flex: none; width: 150px; }
  .coapplines { gap: 14px; }
  .coapplines .coappline + .coappline { padding-top: 14px; border-top: 1px solid var(--c-border-soft); }
}

/* ---------- Search seafarers (design "Crewvector Jobs Search") ----------
   Frames 6a/5a (results), 6b/5g (nothing found), 6c/5f (many results, loaded in pages), 6g/5h (nothing
   selected yet), 6d/5e (one anonymous profile). Layout reuses .page-grid/.rail (desktop sidebar) and
   .sheet-overlay/.sheet/.opt/.field (mobile sheet, single sheet for every field rather than one per
   field) from the public vacancy list; only what search draws on its own — the head, the cards, the
   badges and the anonymous-profile "Ready to join" card — is new here. */

/* The mobile filter sheet's own fields (frame 5b) — one shared sheet for every field, so this scrolls
   as a whole rather than the .sheet__list a single rank/vessel picker used to be the only content of. */
.sheet__fields { padding: 4px 16px 0; display: flex; flex-direction: column; gap: 14px; overflow-y: auto; }
/* .rail__divider only had a desktop (1024px+) definition before this feature — the vacancy rail never
   needed one at mobile width, since the rail itself is desktop-only there. This filter sheet reuses the
   same divider between English and Visas at every width, so it needs a base rule too. */
.rail__divider { height: 1px; background: var(--c-border-soft); margin: 10px 0; }

.srch { padding: 14px 0 24px; }
.srch__inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 12px; }
.srch__title { margin: 0; font: 700 22px/1.25 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; }
.srch__lead { display: none; margin: 8px 0 0; font: 400 14px/1.6 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

/* Mobile toolbar: Filters (with an active-count badge) + Sort, above the count line. */
.srch-toolbar { display: flex; gap: 8px; margin-top: 12px; }
.srch-toolbar__btn {
  flex: 1;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  border-radius: 11px;
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-label);
}
.srch-toolbar__btn:hover { color: var(--c-label); }
.srch-toolbar__btn svg { width: 15px; height: 15px; color: var(--c-body); }
.srch-toolbar__count {
  font: 600 11px/1 var(--font-mono);
  background: var(--c-tag-blue-bg);
  color: var(--c-chip-active-ink);
  border-radius: 6px;
  padding: 3px 5px;
}
/* Sort is a fixed "Available soonest" for now — drawn like the vacancy list's own trigger, but inert:
   no menu behind it exists yet (only one order is offered). */
.srch-toolbar__sort { color: var(--c-disabled-ink); cursor: default; }
.srch-toolbar__sort:hover { color: var(--c-disabled-ink); }
.srch-toolbar__sort svg { color: var(--c-disabled-ink); }

/* Frame 5h: before any filter is set, the mobile screen offers one way in — "Set filters" — instead of
   the Filters/Sort toolbar (there is nothing to sort yet). */
.srch-toolbar__setup {
  margin-top: 12px;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border-radius: 12px;
  background: var(--c-blue);
  color: #fff;
  font: 600 14.5px/1 var(--font-sans);
}
.srch-toolbar__setup:hover { background: var(--c-blue-hover); color: #fff; }
.srch-toolbar__setup svg { width: 16px; height: 16px; }

.srch-count { margin: 14px 2px 10px; font: 500 13px/1.4 var(--font-sans); color: var(--c-label); }

/* Active-filter chips (frame 5g) — same shape as the vacancy list's own .chip, without the open/clear
   split: each of these only ever clears, there is nothing to open. */
.srch-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.srch-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 11px;
  border-radius: 10px;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  font: 500 12.5px/1 var(--font-sans);
  color: var(--c-label);
}
.srch-chip:hover { color: var(--c-label); border-color: var(--c-blue); }
.srch-chip svg { width: 11px; height: 11px; color: var(--c-body); }

.srch-cards { display: flex; flex-direction: column; gap: 10px; padding: 8px 12px 16px; }
.srch-card {
  display: flex;
  flex-direction: column;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 14px;
  box-shadow: var(--shadow-card);
}
.srch-card__top { display: flex; gap: 12px; align-items: flex-start; }
.srch-card__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex: none;
  background: var(--c-border-soft);
  border: 1px dashed var(--c-check-border);
  display: grid;
  place-items: center;
  color: var(--c-anon-ink, var(--c-disabled-ink));
}
.srch-card__avatar svg { width: 19px; height: 19px; }
.srch-card__body { flex: 1; min-width: 0; }
.srch-card__title { margin: 0; font: 600 15.5px/1.3 var(--font-display); color: var(--c-heading); }
.srch-card__meta { margin-top: 4px; font: 400 11.5px/1.5 var(--font-mono); color: var(--c-muted); }
.srch-card__badges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.srch-card__badge {
  font: 500 11px/1 var(--font-mono);
  border-radius: 7px;
  padding: 6px 8px;
}
.srch-card__badge--vessel { color: var(--c-chip-active-ink); background: var(--c-tag-blue-bg); }
.srch-card__badge--plain { color: var(--c-body); background: var(--c-field-bg); }
.srch-card__actions { display: flex; gap: 8px; margin-top: 12px; }
.srch-card__actions .btn { flex: 1; min-height: 46px; border-radius: 11px; font: 600 14px/1 var(--font-sans); }
.srch-card__open {
  flex: 1;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  border-radius: 11px;
  font: 600 14px/1 var(--font-sans);
  color: var(--c-label);
}
.srch-card__open:hover { background: var(--c-field-bg); color: var(--c-label); }

/* "Invite to vacancy" — drawn, disabled, SOON (spec: the invite half of this feature is a later task,
   same rule already applied to nav items with nothing behind them yet). */
.srch-invite {
  flex: 1;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--c-border-input);
  background: var(--c-field-bg);
  border-radius: 11px;
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-disabled-ink);
  cursor: not-allowed;
}
.srch-invite svg { width: 14px; height: 14px; }
.srch-invite__soon {
  font: 500 9.5px/1 var(--font-mono);
  letter-spacing: .06em;
  background: var(--c-border-input);
  color: var(--c-muted);
  border-radius: 5px;
  padding: 4px 6px;
}

.srch-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 46px;
  border: 1px solid var(--c-border-input);
  background: var(--c-surface);
  border-radius: 12px;
  font: 600 13.5px/1 var(--font-sans);
  color: var(--c-label);
}
.srch-loading svg { width: 15px; height: 15px; color: var(--c-body); animation: cv-spin 1.1s linear infinite; }
@keyframes cv-spin { to { transform: rotate(360deg); } }

/* One anonymous profile (frame 6d/5e). */
.srch-profile { padding: 14px 0 24px; }
.srch-profile__inner { width: 100%; max-width: 1000px; margin: 0 auto; padding: 0 12px; }
.srch-profile__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  font: 500 13px/1 var(--font-sans);
  color: var(--c-body);
}
.srch-profile__back:hover { color: var(--c-blue); }
.srch-profile__back svg { width: 15px; height: 15px; }
.srch-profile__head { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; flex-wrap: wrap; }
.srch-profile__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  flex: none;
  background: var(--c-border-soft);
  border: 1px dashed var(--c-check-border);
  display: grid;
  place-items: center;
  color: var(--c-anon-ink, var(--c-disabled-ink));
}
.srch-profile__avatar svg { width: 25px; height: 25px; }
.srch-profile__id { flex: 1; min-width: 0; }
.srch-profile__title { margin: 0; font: 700 20px/1.25 var(--font-display); color: var(--c-heading); }
.srch-profile__sub { margin-top: 5px; font: 400 11.5px/1.5 var(--font-mono); color: var(--c-muted); }
.srch-profile__grid { display: flex; flex-direction: column; gap: 16px; }
.srch-profile__main { display: flex; flex-direction: column; gap: 16px; order: 2; }
.srch-profile__side { display: flex; flex-direction: column; gap: 16px; order: 1; }
.srch-ready__badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* The invite action has two copies (frames 6d/5e): inline in the header row at 1024px+, pinned to a
   sticky bottom bar below it. Only one is ever visible at a given width. */
.srch-invite--desktop { display: none; }
.srch-profile__stickybar {
  position: sticky;
  bottom: 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: 12px;
  margin-top: 4px;
}
.srch-profile__stickybar .srch-invite { width: 100%; }

@media (min-width: 1024px) {
  .srch { padding: 30px 0 46px; }
  .srch__inner { padding: 0 32px; }
  .srch__title { font: 700 28px/1.2 var(--font-display); letter-spacing: -.02em; }
  .srch__lead { display: block; max-width: 74ch; }

  .srch-toolbar { display: none; }
  .srch-toolbar__setup { display: none; }
  .srch-chips { display: none; }

  .srch-count { margin: 0; padding: 2px 2px 4px; }

  .srch-cards { padding: 0; gap: 12px; }
  .srch-card { flex-direction: row; gap: 16px; padding: 18px 20px; align-items: flex-start; }
  .srch-card__avatar { width: 48px; height: 48px; }
  .srch-card__avatar svg { width: 22px; height: 22px; }
  .srch-card__title { font-size: 17px; }
  .srch-card__meta { font-size: 12.5px; }
  .srch-card__actions {
    flex: none;
    flex-direction: column;
    align-items: stretch;
    width: 168px;
    margin-top: 0;
  }
  .srch-card__actions .btn { min-height: 44px; }
  .srch-invite { min-height: 44px; }
  .srch-card__open { min-height: 40px; }

  .srch-profile { padding: 26px 0 46px; }
  .srch-profile__inner { max-width: 1064px; padding: 0 32px; }
  .srch-profile__title { font-size: 28px; }
  .srch-profile__sub { font-size: 13px; }
  .srch-invite--desktop { display: flex; flex: none; width: auto; padding: 0 22px; min-height: 52px; }
  .srch-profile__stickybar { display: none; }
  .srch-profile__grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
  .srch-profile__main { grid-column: 1; }
  .srch-profile__side { grid-column: 2; }
}

/* ==========================================================================
   "Your profile" (design "Crewvector Jobs Company User Profile", frames
   2a-2d desktop / 1a-1d mobile, task company-user-profile): the signed-in
   employee's own name and contacts. Mobile-first, one markup for both
   widths — the Save/Discard bar becomes a sticky bottom bar only under
   1024px (mockup: mobile draws it fixed to the viewport, desktop keeps it
   inline after the cards).
   ========================================================================== */

.couserprof { padding: 16px 12px 100px; max-width: 720px; margin: 0 auto; }
.couserprof__title { margin: 0 0 6px; font: 700 22px/1.2 var(--font-display); color: var(--c-heading); letter-spacing: -.01em; }
.couserprof__lead { margin: 0 0 16px; font: 400 13px/1.55 var(--font-sans); color: var(--c-body); text-wrap: pretty; }

.couserprof__form { display: flex; flex-direction: column; gap: 14px; }
.couserprof__card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 4px; }
.couserprof__cardhead { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.couserprof__cardtitle { margin: 0; font: 700 16px/1.25 var(--font-display); color: var(--c-heading); }
.couserprof__cardlead { margin: 0 0 14px; font: 400 12.5px/1.55 var(--font-sans); color: var(--c-muted); text-wrap: pretty; }

/* The "PUBLIC" pill next to "Contacts for vacancies" — its own blue, not --c-tag-blue-bg's plain
   surface: the mockup pairs a filled chip with a border, neither of which the existing token carries. */
.couserprof__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font: 500 10.5px/1 var(--font-mono);
  letter-spacing: .04em;
  color: #2C5279;
  background: #EEF4FB;
  border: 1px solid #C9DDF0;
  border-radius: 7px;
  padding: 5px 6px;
}
.couserprof__badge svg { width: 12px; height: 12px; }

.couserprof__grid { display: flex; flex-direction: column; gap: 12px; }

/* The neutral "you are the contact on N published vacancies" note (frames 2b/1b) — same pale surface
   as a read-only value box elsewhere on this page, not the blue --c-tag-blue-bg info style below. */
.couserprof__notice {
  display: flex;
  gap: 10px;
  padding: 12px;
  margin-top: 14px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-pale);
  font: 400 12.5px/1.55 var(--font-sans);
  color: var(--c-body);
}
.couserprof__notice svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--c-muted); }
.couserprof__notice p { margin: 0; text-wrap: pretty; }
.couserprof__notice a { font-weight: 600; }
.couserprof__notice--info {
  margin-top: 0;
  margin-bottom: 14px;
  border-color: #C9DDF0;
  background: #EEF4FB;
  color: #2C5279;
}
.couserprof__notice--info svg { color: #2C5279; }

.couserprof__preview { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--c-border-soft); }
.couserprof__previewlabel { font: 500 12px/1 var(--font-sans); color: var(--c-body); margin-bottom: 8px; }
.couserprof__previewcard { border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-pale); padding: 12px; }
.couserprof__previewname { font: 600 14px/1.3 var(--font-sans); color: var(--c-ink); }
.couserprof__previewrow { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; font: 400 12.5px/1.5 var(--font-mono); color: var(--c-body); }

/* Top-of-page banners: saved (green, reusing the same tokens Company cabinet's "Published" badge
   already uses) and refused (red, the mockup's own shade — --c-expired-* is close but not exact, and
   that triple belongs to a different feature per its own comment above). */
.couserprof__banner {
  display: flex;
  gap: 11px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 12px;
  font: 400 13.5px/1.55 var(--font-sans);
}
.couserprof__banner svg { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.couserprof__banner p { margin: 0; text-wrap: pretty; }
.couserprof__banner--success { border: 1px solid var(--c-published-border); background: var(--c-published-bg); color: var(--c-published-ink); }
.couserprof__banner--success svg { color: var(--c-published-ink); }
.couserprof__banner--error { border: 1px solid #C4463A; background: #FBEFED; color: #A32A1E; }
.couserprof__banner--error svg { color: #A32A1E; }

.couserprof__actions {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  margin: 0 -12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.couserprof .couserbtn:disabled { background: var(--c-border-soft); color: var(--c-disabled-ink); cursor: default; border-color: transparent; }
.couserprof__note { flex: none; }

/* "Sign-in email" (frames 2a/2c/1a/1c) — read-only display, its own layout since none of the editable
   .field markup applies: value plus a disabled "Change email" (backlog item 25, not this task). */
.couserprof__signin {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  background: var(--c-pale);
  flex-wrap: wrap;
}
.couserprof__signin svg { width: 18px; height: 18px; flex: none; color: var(--c-muted); }
.couserprof__signinbody { flex: 1; min-width: 0; }
.couserprof__signinvalue { font: 400 13.5px/1.4 var(--font-mono); color: var(--c-ink); word-break: break-all; }
.couserprof__signinnote { font: 400 12px/1.4 var(--font-sans); color: var(--c-muted); margin-top: 3px; }
.couserprof__signin .couserbtn { flex: none; width: 100%; }

@media (min-width: 1024px) {
  .couserprof { padding: 30px 32px 46px; max-width: 720px; }
  .couserprof__title { font-size: 28px; }
  .couserprof__lead { margin-bottom: 22px; font-size: 14.5px; }

  .couserprof__card { padding: 24px 26px; gap: 6px; }
  .couserprof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

  .couserprof__signin .couserbtn { width: auto; }

  .couserprof__actions {
    position: static;
    border-top: 0;
    margin: 0;
    padding: 0;
  }
}