/* ==================================================================
   NEXUS RECRUIT — application stylesheet
   ==================================================================

   Written against the markup in app/Views. Tokens live in
   variables.css, which is loaded first; a tenant's generated theme is
   loaded last and works by redefining those same tokens, so nothing
   here may hard-code a brand colour.

   Naming is BEM: .block, .block__element, .block--modifier. State is a
   separate .is-* class so it can be toggled without knowing the block.

   Sections
     1. Reset and document
     2. Typography and prose
     3. Layout shells
     4. Buttons
     5. Forms
     6. Tables and lists
     7. Panels, cards and surfaces
     8. Badges, chips and meters
     9. Feedback
    10. Navigation
    11. Public site
    12. Job board and pipeline
    13. Assessments and builder
    14. Admin
    15. Utilities
    16. Responsive
    17. Print
   ================================================================== */

/* ==================================================================
   1. RESET AND DOCUMENT
   ================================================================== */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

p, ul, ol, dl, figure, pre, blockquote { margin: 0; }

ul, ol { padding: 0; list-style: none; }

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-colors);
}

a:hover { text-decoration: underline; }

img, svg, video, canvas { display: block; max-width: 100%; }

img, video { height: auto; }

svg { flex: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; background: none; border: 0; padding: 0; }

code, pre, .input--code {
  font-family: var(--font-mono);
  font-size: 0.925em;
}

code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  background: var(--surface-sunken);
}

hr {
  height: 1px;
  margin: var(--space-6) 0;
  border: 0;
  background: var(--border-subtle);
}

/* Focus is never removed, only replaced. A keyboard user who cannot see
   where they are cannot use the application at all. */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

:focus:not(:focus-visible) { outline: none; }

[hidden], [x-cloak] { display: none !important; }

::selection {
  background: var(--color-brand-100);
  color: var(--color-brand-900);
}

.skip-link {
  position: absolute;
  top: -100%;
  inset-inline-start: var(--space-4);
  z-index: var(--z-tooltip);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-button);
  background: var(--surface-brand);
  color: var(--text-inverted);
  font-weight: var(--weight-semibold);
  transition: var(--transition-transform);
}

.skip-link:focus { top: var(--space-4); text-decoration: none; }

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

/* ==================================================================
   2. TYPOGRAPHY AND PROSE
   ================================================================== */

.lede {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.hint {
  display: block;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.hint--inline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.section-heading {
  margin: var(--space-8) 0 var(--space-4);
  font-size: var(--text-lg);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

/* Operator-authored HTML. Everything inside was purified on write and
   again on read, so the rules here are purely visual. */
.prose {
  max-width: var(--content-prose);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.prose > * + * { margin-top: var(--space-4); }

.prose h2 {
  margin-top: var(--space-8);
  font-size: var(--text-xl);
}

.prose h3 {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
}

.prose h2:first-child,
.prose h3:first-child { margin-top: 0; }

.prose ul,
.prose ol {
  padding-inline-start: var(--space-5);
  list-style: disc;
}

.prose ol { list-style: decimal; }

.prose li + li { margin-top: var(--space-2); }

.prose a { text-decoration: underline; }

.prose blockquote {
  padding-inline-start: var(--space-4);
  border-inline-start: 3px solid var(--border-strong);
  color: var(--text-muted);
  font-style: italic;
}

.prose img { border-radius: var(--radius-md); }

.prose table { width: 100%; border-collapse: collapse; }

.prose th,
.prose td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
  text-align: start;
}

.answer-block {
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: var(--leading-relaxed);
}

.quotes { display: grid; gap: var(--space-3); }

.quotes blockquote {
  padding: var(--space-4);
  border-inline-start: 3px solid var(--border-strong);
  background: var(--surface-sunken);
  border-start-start-radius: 0;
  border-start-end-radius: var(--radius-md);
  border-end-end-radius: var(--radius-md);
  border-end-start-radius: 0;
  color: var(--text-secondary);
}

.linkbutton {
  color: var(--text-link);
  text-decoration: underline;
  font: inherit;
}

/* ==================================================================
   3. LAYOUT SHELLS
   ================================================================== */

main { display: block; }

/* --- the signed-in shell ---------------------------------------- */

.app-shell {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

.app-shell__main {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.app-shell__content {
  flex: 1;
  padding: var(--space-6);
  display: grid;
  gap: var(--space-6);
  align-content: start;
}

.app-shell__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--surface-overlay);
  display: none;
}

.app-shell--admin .sidebar { background: var(--surface-inverted); }

/* --- the public shell ------------------------------------------- */

.layout-public main {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.layout-public main > * + * { margin-top: var(--space-12); }

/* --- the auth shell --------------------------------------------- */

.auth {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
  min-height: 100dvh;
}

.auth__pane {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) var(--space-6);
  background: var(--surface-raised);
}

.auth__inner {
  width: 100%;
  max-width: 26rem;
  display: grid;
  gap: var(--space-5);
}

.auth__brand { display: block; margin-bottom: var(--space-2); }

.auth__brand:hover { text-decoration: none; }

.auth__glyph {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-pill);
  background: var(--color-brand-50);
  color: var(--color-brand-600);
}

.auth__title { font-size: var(--text-2xl); }

.auth__lede { color: var(--text-secondary); }

.auth__form { display: grid; gap: var(--space-4); }

.auth__providers { display: grid; gap: var(--space-2); }

.auth__divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.auth__divider::before,
.auth__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

.auth__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.auth__link,
.auth__alt { font-size: var(--text-sm); }

.auth__alt { color: var(--text-secondary); }

.auth__legal {
  display: flex;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.auth__aside {
  display: none;
  position: relative;
  padding: var(--space-12);
  background: var(--surface-brand) center / cover no-repeat;
  color: var(--text-inverted);
  align-items: flex-end;
}

.auth__asideBody { position: relative; max-width: 30rem; }

.auth__asideBody h2 {
  color: inherit;
  font-size: var(--text-3xl);
  margin-bottom: var(--space-3);
}

.auth__asideBody p { opacity: 0.9; line-height: var(--leading-relaxed); }

/* --- the minimal shell ------------------------------------------ */

.minimal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  height: var(--topbar-height);
  padding: 0 var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.minimal-bar__nav { display: flex; gap: var(--space-5); }

.minimal-bar__nav a {
  color: var(--text-secondary);
  font-weight: var(--weight-medium);
}

.minimal-bar__actions { display: flex; gap: var(--space-2); }

.minimal-bar__timer {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
}

.minimal-bar__timer.is-low {
  background: var(--color-danger-50);
  color: var(--color-danger-700);
}

.minimal {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: var(--space-8) var(--content-padding) var(--space-16);
}

/* --- shared page furniture -------------------------------------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.two-col > div { display: grid; gap: var(--space-6); align-content: start; }

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

.form { display: grid; gap: var(--space-6); }

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.inline-form { display: inline-flex; }

/* Move-up / move-down buttons on an ordered list. */
.reorder { display: inline-flex; gap: var(--space-1); }

.inline-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.inline-fields .field { flex: 1 1 12rem; }

.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.notice-page {
  max-width: 34rem;
  margin: var(--space-16) auto;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.notice-page h1 { font-size: var(--text-2xl); }

.notice-page p { color: var(--text-secondary); }

.notice-page__glyph {
  display: grid;
  place-items: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.notice-page__glyph--success {
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.notice-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

.notice-page__score { width: 100%; max-width: 20rem; }

/* --- error pages ------------------------------------------------- */

.layout-error { display: grid; place-items: center; min-height: 100vh; }

.errorpage {
  max-width: 32rem;
  padding: var(--space-8);
  display: grid;
  gap: var(--space-4);
  justify-items: center;
  text-align: center;
}

.errorpage__code {
  font-size: var(--text-6xl);
  font-weight: var(--weight-extrabold);
  line-height: 1;
  color: var(--color-brand-200);
  letter-spacing: var(--tracking-tighter);
}

.errorpage__title { font-size: var(--text-2xl); }

.errorpage__body { color: var(--text-secondary); }

.errorpage__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
/* ==================================================================
   4. BUTTONS
   ================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: var(--surface-sunken);
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors);
}

.btn:hover { text-decoration: none; }

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary {
  background: var(--surface-brand);
  border-color: var(--surface-brand);
  color: var(--text-inverted);
  box-shadow: var(--shadow-xs);
}

.btn--primary:hover { background: var(--color-brand-600); border-color: var(--color-brand-600); }

.btn--outline {
  background: var(--surface-raised);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.btn--outline:hover { border-color: var(--border-strong); background: var(--surface-sunken); }

.btn--ghost { background: transparent; color: var(--text-secondary); }

.btn--ghost:hover { background: var(--surface-sunken); color: var(--text-primary); }

.btn--ghost.is-active { color: var(--color-brand-600); }

.btn--danger {
  background: var(--color-danger-500);
  border-color: var(--color-danger-500);
  color: var(--text-inverted);
}

.btn--danger:hover { background: var(--color-danger-600); border-color: var(--color-danger-600); }

.btn--sm { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }

.btn--lg { padding: var(--space-4) var(--space-6); font-size: var(--text-md); }

.btn--block { display: flex; width: 100%; }

.btn--icon {
  padding: var(--space-2);
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
}

/* ==================================================================
   5. FORMS
   ================================================================== */

.field { display: grid; gap: var(--space-2); }

.field + .field,
.field + .field-row,
.field-row + .field,
.field-row + .field-row { margin-top: var(--space-4); }

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.field__req { margin-inline-start: 0.15em; color: var(--color-danger-500); }

.field__hint {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.field__error {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--color-danger-600);
}

.input {
  width: 100%;
  padding: var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-input);
  background: var(--surface-white);
  color: var(--text-primary);
  font-size: var(--text-sm);
  transition: var(--transition-shadow);
}

.input::placeholder { color: var(--text-hint); }

.input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--shadow-focus);
}

.input:disabled,
.input[readonly] {
  background: var(--surface-sunken);
  color: var(--text-muted);
  cursor: not-allowed;
}

.field.has-error .input {
  border-color: var(--color-danger-500);
}

.field.has-error .input:focus { box-shadow: var(--shadow-focus-danger); }

.input--area { min-height: 6rem; resize: vertical; line-height: var(--leading-relaxed); }

.input--code {
  min-height: 12rem;
  resize: vertical;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  background: var(--surface-sunken);
}

.input--select {
  appearance: none;
  padding-inline-end: var(--space-8);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right var(--space-4) center, right var(--space-3) center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.input--file { padding: var(--space-2); }

.input--file::file-selector-button {
  margin-inline-end: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}

.input--sm { padding: var(--space-2); font-size: var(--text-xs); }

.input-group {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
}

.input-group > svg {
  position: absolute;
  inset-inline-start: var(--space-3);
  color: var(--text-hint);
  pointer-events: none;
}

.input-group .input { padding-inline-start: var(--space-10); }

.field__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  cursor: pointer;
}

.field__check input { margin-top: 0.15em; accent-color: var(--surface-brand); }

.field__radios { display: grid; gap: var(--space-2); }

.field__radio {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: var(--transition-colors);
}

.field__radio:hover { border-color: var(--border-default); background: var(--surface-sunken); }

.field__radio input { accent-color: var(--surface-brand); }

.field--captcha { justify-items: start; }

/* Options in an assessment: bigger targets, clearer selected state. */
.option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  cursor: pointer;
  transition: var(--transition-colors);
}

.option:hover { border-color: var(--border-strong); }

.option:has(input:checked) {
  border-color: var(--surface-brand);
  background: var(--color-brand-50);
}

.option input { accent-color: var(--surface-brand); }

.option--compact { padding: var(--space-2) var(--space-4); justify-content: center; }

.option--slot { align-items: flex-start; }

.option__note {
  display: block;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.option-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.option-row .input { flex: 1; }

/* A switch is a checkbox with the explanation beside it, because a
   toggle with a two-word label is guesswork. */
.switch {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.switch + .switch { margin-top: var(--space-3); }

.switch input { margin-top: 0.2em; accent-color: var(--surface-brand); }

.switch strong { display: block; font-size: var(--text-sm); }

.switch__note {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  flex-wrap: wrap;
}

.filter-bar--wrap { align-items: flex-end; }

.filter-bar .input-group { min-width: 12rem; }

/* ==================================================================
   6. TABLES AND LISTS
   ================================================================== */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-card);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  vertical-align: middle;
}

.table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-base);
  background: var(--surface-sunken);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  white-space: nowrap;
}

.table tbody tr { border-top: 1px solid var(--border-subtle); }

.table tbody tr:hover { background: var(--surface-sunken); }

.table tbody tr.is-invalid { background: var(--color-danger-50); }

.table .hint { display: inline; }

.table td strong + .hint { display: block; }

.table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
  white-space: nowrap;
}

.table__note {
  font-size: var(--text-xs);
  color: var(--color-danger-700);
}

.plain-list { display: grid; gap: var(--space-2); }

.plain-list > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.plain-list--panel > li {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.plain-list--panel > li:first-child { border-top: 0; }

.plain-list--panel > li > span {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.detail-list { display: grid; gap: var(--space-3); }

.detail-list > div { display: grid; gap: 0.15rem; }

.detail-list--grid {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: var(--space-4);
}

.detail-list dt {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.detail-list dd { margin: 0; font-size: var(--text-sm); }

.ticklist { display: grid; gap: var(--space-2); }

.ticklist > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.ticklist > li > svg { color: var(--color-success-500); margin-top: 0.15em; }

.ticklist--todo > li > svg { color: var(--text-hint); }

.timeline { display: grid; gap: var(--space-5); position: relative; }

.timeline__item {
  position: relative;
  padding-inline-start: var(--space-5);
  border-inline-start: 2px solid var(--border-subtle);
}

.timeline__item::before {
  content: "";
  position: absolute;
  inset-inline-start: -0.3125rem;
  top: 0.35rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--border-strong);
}

.timeline__item h3 { font-size: var(--text-sm); }

.timeline__meta { font-size: var(--text-sm); color: var(--text-secondary); }

.timeline__dates {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.timeline__body {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.timeline--compact { gap: var(--space-4); }

.check-list { display: grid; gap: var(--space-3); }

.check-list > li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0 var(--space-3);
  font-size: var(--text-sm);
}

.check-list__label { font-weight: var(--weight-medium); }

.check-list__score { font-variant-numeric: tabular-nums; color: var(--text-secondary); }

.check-list__detail {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.checklist { display: grid; gap: var(--space-3); }

.checklist__item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.checklist__item.is-done { opacity: 0.7; }

.checklist__mark { color: var(--text-hint); flex: none; }

.checklist__item.is-done .checklist__mark { color: var(--color-success-500); }

.checklist__body { flex: 1; display: grid; gap: var(--space-2); min-width: 0; }

.checklist__body h3 { font-size: var(--text-sm); }

.checklist__body h2 { font-size: var(--text-md); }

.checklist__item.is-done h2,
.checklist__item.is-done h3 { text-decoration: line-through; }

.checklist__due,
.checklist__done,
.checklist__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.checklist--status > li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border: 0;
  background: none;
  border-top: 1px solid var(--border-subtle);
}

.checklist--status > li:first-child { border-top: 0; }

.checklist--status > li > svg { color: var(--text-hint); margin-top: 0.15em; }

.checklist--status > li.is-done > svg { color: var(--color-success-500); }

.checklist--status span { display: grid; gap: 0.1rem; }

.checklist--status strong { font-size: var(--text-sm); }

.notes { display: grid; gap: var(--space-4); }

.notes__item {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.notes__item header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.notes__item p { font-size: var(--text-sm); line-height: var(--leading-relaxed); }

.queue-list { display: grid; }

.queue-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-sm);
}

.queue-list__item:first-child { border-top: 0; }

.queue-list__item > span { flex: 1; }

.queue-list__item > svg { color: var(--text-secondary); }

.task-list { display: grid; }

.task-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.task-list__item:first-child { border-top: 0; }

.task-list__body { flex: 1; min-width: 0; }

.task-list__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.task-list__meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.task-list__due {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-warning-700);
  white-space: nowrap;
}

.app-list { display: grid; }

.app-list__item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
}

.app-list__item:first-child { border-top: 0; }

.app-list__body { flex: 1; min-width: 0; }

.app-list__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.app-list__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.news-list { display: grid; gap: var(--space-6); }

.news-list__item {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.news-list__item h2 { font-size: var(--text-xl); margin: var(--space-2) 0; }

.news-list__item p { color: var(--text-secondary); }

.news-list__item time {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.news-list__item.is-pinned { border-inline-start: 3px solid var(--surface-brand); padding-inline-start: var(--space-4); }
/* ==================================================================
   7. PANELS, CARDS AND SURFACES
   ================================================================== */

.panel {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

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

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.panel__head h2,
.panel__head h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
}

.panel__head h2 > svg { color: var(--text-secondary); }

.panel__meta {
  font-size: var(--text-xs);
  color: var(--text-muted);
  white-space: nowrap;
}

.panel__more { font-size: var(--text-sm); font-weight: var(--weight-medium); }

.panel__body { padding: var(--space-5); display: grid; gap: var(--space-4); }

.panel__body > .table-wrap { margin: 0 calc(var(--space-5) * -1) calc(var(--space-5) * -1); }

.panel__subhead {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.panel__actions--stacked { display: grid; gap: var(--space-3); }

.panel--urgent { border-color: var(--color-warning-500); }

.panel--urgent .panel__head { background: var(--color-warning-50); }

.panel--quiet { background: var(--surface-sunken); box-shadow: none; }

.card {
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  display: grid;
  gap: var(--space-4);
}

.card--sticky { position: sticky; top: var(--space-6); }

.card__lede { font-size: var(--text-sm); color: var(--text-secondary); }

.callout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--color-brand-200);
  border-radius: var(--radius-card);
  background: var(--color-brand-50);
  flex-wrap: wrap;
}

.callout__title { font-size: var(--text-md); }

.callout__body {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.empty {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  padding: var(--space-12) var(--space-6);
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  color: var(--text-hint);
}

.empty__title { font-size: var(--text-md); }

.empty__body {
  max-width: 26rem;
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

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

.stat {
  position: relative;
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  display: grid;
  gap: var(--space-1);
}

.stat__icon {
  position: absolute;
  top: var(--space-4);
  inset-inline-end: var(--space-4);
  color: var(--text-hint);
}

.stat__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.stat__value {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}

.stat__delta {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
}

.stat.is-up .stat__delta { color: var(--color-success-600); }

.stat.is-down .stat__delta { color: var(--color-danger-600); }

.stat__deltaNote { font-weight: var(--weight-normal); color: var(--text-muted); }

/* A whole-card link, so the target is the card and not just the words. */
.stat__link { position: absolute; inset: 0; }

.stat-grid--compact .stat { padding: var(--space-4); }

.stat-grid--compact .stat__value { font-size: var(--text-xl); }

.disclosure {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.disclosure > summary {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}

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

.disclosure > summary::before {
  content: "\203A";
  display: inline-block;
  margin-inline-end: var(--space-2);
  transition: var(--transition-transform);
}

.disclosure[open] > summary::before { transform: rotate(90deg); }

.disclosure > *:not(summary) { padding: 0 var(--space-4) var(--space-4); }

.repeater__row {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.repeater__row + .repeater__row { margin-top: var(--space-3); }

.repeater__row > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  list-style: none;
}

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

.repeater__title { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.repeater__hint { font-size: var(--text-xs); color: var(--text-muted); }

.repeater__form { padding: 0 var(--space-4) var(--space-4); }

.repeater__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.repeater__row--new { border-style: dashed; background: transparent; }

.dropdown { position: relative; display: inline-block; }

.dropdown__panel,
.dropdown__form {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.dropdown__form { min-width: 22rem; padding: var(--space-4); text-align: start; }

.dropdown__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-align: start;
  white-space: nowrap;
}

.dropdown__item:hover { background: var(--surface-sunken); text-decoration: none; }

.dropdown__item--danger { color: var(--color-danger-600); }

.dropdown__divider {
  height: 1px;
  margin: var(--space-2) 0;
  background: var(--border-subtle);
}

.dropdown > summary { list-style: none; }

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

/* ==================================================================
   8. BADGES, CHIPS, AVATARS AND METERS
   ================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 0.15rem var(--space-2);
  border-radius: var(--radius-chip);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); }
.badge--brand   { background: var(--color-brand-50); color: var(--color-brand-700); }
.badge--info    { background: var(--color-info-50); color: var(--color-info-700); }
.badge--success { background: var(--color-success-50); color: var(--color-success-700); }
.badge--warning { background: var(--color-warning-50); color: var(--color-warning-700); }
.badge--danger  { background: var(--color-danger-50); color: var(--color-danger-700); }

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

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-chip);
  background: var(--surface-raised);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.chip--sm { padding: 0.15rem var(--space-2); font-size: var(--text-xs); }

.chip__note { color: var(--text-hint); font-size: var(--text-xs); }

.chips--tight { gap: var(--space-1); }

.chips--nav .chip { cursor: pointer; transition: var(--transition-colors); }

.chips--nav .chip:hover { border-color: var(--border-strong); text-decoration: none; }

.chips--nav .chip.is-active {
  background: var(--surface-brand);
  border-color: var(--surface-brand);
  color: var(--text-inverted);
}

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  object-fit: cover;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--text-inverted);
  text-transform: uppercase;
  overflow: hidden;
}

.avatar--sm { width: 2rem; height: 2rem; font-size: var(--text-2xs); }

.avatar--lg { width: 4rem; height: 4rem; font-size: var(--text-md); }

.avatar--blank { background: var(--surface-sunken); color: var(--text-hint); }

.meter {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

.meter__label {
  flex: 1 0 100%;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.meter__track {
  flex: 1;
  min-width: 4rem;
  height: 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  overflow: hidden;
}

.meter__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--surface-brand);
  transition: var(--transition-transform);
}

.meter__fill--success { background: var(--color-success-500); }
.meter__fill--info    { background: var(--color-info-500); }
.meter__fill--warning { background: var(--color-warning-500); }
.meter__fill--danger  { background: var(--color-danger-500); }

.meter__value {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.weights { display: grid; gap: var(--space-2); }

.weights > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.weights__label { color: var(--text-secondary); }

.weights__value { font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; }

/* ==================================================================
   9. FEEDBACK
   ================================================================== */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.alert > svg { flex: none; margin-top: 0.1em; }

.alert--neutral { background: var(--surface-sunken); border-color: var(--border-subtle); color: var(--text-secondary); }
.alert--info    { background: var(--color-info-50); border-color: var(--color-info-100); color: var(--color-info-700); }
.alert--success { background: var(--color-success-50); border-color: var(--color-success-100); color: var(--color-success-700); }
.alert--warning { background: var(--color-warning-50); border-color: var(--color-warning-100); color: var(--color-warning-700); }
.alert--danger  { background: var(--color-danger-50); border-color: var(--color-danger-100); color: var(--color-danger-700); }

.alert a { color: inherit; text-decoration: underline; font-weight: var(--weight-semibold); }

.alert__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-semibold);
}

.alert__list {
  margin-top: var(--space-2);
  padding-inline-start: var(--space-5);
  list-style: disc;
}

.alert__list li + li { margin-top: var(--space-1); }

.toast-stack {
  position: fixed;
  inset-inline-end: var(--space-5);
  bottom: var(--space-5);
  z-index: var(--z-toast);
  display: grid;
  gap: var(--space-2);
  max-width: min(24rem, calc(100vw - var(--space-8)));
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-inverted);
  color: var(--text-inverted);
  box-shadow: var(--shadow-xl);
  font-size: var(--text-sm);
}

.toast.is-success { background: var(--color-success-600); }
.toast.is-danger  { background: var(--color-danger-600); }
.toast.is-warning { background: var(--color-warning-600); color: var(--text-inverted); }
.toast.is-info    { background: var(--color-info-600); }

.toast__body { flex: 1; }

.toast__close {
  color: inherit;
  opacity: 0.7;
  font-size: var(--text-lg);
  line-height: 1;
}

.toast__close:hover { opacity: 1; }

.criteria {
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--color-brand-300);
  border-start-start-radius: 0;
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  border-end-start-radius: 0;
  background: var(--color-brand-50);
  font-size: var(--text-sm);
}

.criteria h3 {
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-brand-700);
  margin-bottom: var(--space-1);
}

.review {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.review + .review { margin-top: var(--space-3); }

.review__head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.review__rating {
  margin-inline-start: auto;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
}

.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  padding-top: var(--space-4);
}

.pagination__summary { font-size: var(--text-sm); color: var(--text-muted); }

.pagination__list { display: flex; align-items: center; gap: var(--space-1); }

.pagination__link {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  padding: 0 var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: var(--transition-colors);
}

.pagination__link:hover { border-color: var(--border-strong); text-decoration: none; }

.pagination__link.is-current {
  background: var(--surface-brand);
  border-color: var(--surface-brand);
  color: var(--text-inverted);
}

.pagination__link.is-disabled { opacity: 0.45; cursor: not-allowed; }

.pagination__gap { padding: 0 var(--space-1); color: var(--text-hint); }
/* ==================================================================
   10. NAVIGATION
   ================================================================== */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
}

.logo__img { height: 2rem; width: auto; }

.logo__mark {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--surface-brand);
  color: var(--text-inverted);
  font-size: var(--text-xs);
}

.logo__text { font-size: var(--text-md); }

/* --- public header ----------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  max-width: var(--content-max);
  height: var(--navbar-height);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}

.navbar__brand:hover { text-decoration: none; }

.navbar__nav { display: none; flex: 1; }

.navbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.navbar__burger { display: grid; place-items: center; padding: var(--space-2); }

.navbar__drawer {
  padding: var(--space-4) var(--content-padding) var(--space-6);
  border-top: 1px solid var(--border-subtle);
  display: grid;
  gap: var(--space-3);
}

.menu { display: flex; align-items: center; gap: var(--space-1); }

.menu--stacked { flex-direction: column; align-items: stretch; gap: var(--space-1); }

.menu--sub { flex-direction: column; align-items: stretch; gap: 0; }

.menu__item { position: relative; }

.menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  transition: var(--transition-colors);
}

.menu__link:hover { background: var(--surface-sunken); color: var(--text-primary); text-decoration: none; }

.menu__link.is-active { color: var(--color-brand-600); }

.menu__divider {
  height: 1px;
  margin: var(--space-2) var(--space-3);
  background: var(--border-subtle);
}

.menu__submenu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: var(--z-dropdown);
  min-width: 12rem;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.menu--stacked .menu__submenu { position: static; box-shadow: none; border: 0; padding: 0 0 0 var(--space-4); }

.has-children > .menu__link > svg:last-child { color: var(--text-hint); }

/* --- footer ------------------------------------------------------ */

.footer {
  margin-top: var(--space-16);
  border-top: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.footer__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-12) var(--content-padding);
}

.footer__brand { display: grid; gap: var(--space-3); align-content: start; }

.footer__tagline {
  max-width: 22rem;
  font-size: var(--text-sm);
  color: var(--text-muted);
  line-height: var(--leading-relaxed);
}

.footer__social { display: flex; gap: var(--space-2); }

.footer__social a {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
  color: var(--text-secondary);
}

.footer__social a:hover { background: var(--color-brand-50); color: var(--color-brand-600); }

.footer__col .menu__link { padding-inline-start: 0; }

.footer__legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--space-5) var(--content-padding);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- dashboard sidebar ------------------------------------------- */

.sidebar {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  inset-inline-end: auto;
  z-index: var(--z-sidebar);
  width: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  border-inline-end: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  transform: translateX(calc(-100% * var(--flip)));
  transition: var(--transition-transform);
  overflow-y: auto;
}

.is-sidebar-open .sidebar { transform: none; }

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: var(--topbar-height);
  padding: 0 var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
  flex: none;
}

.sidebar__brand:hover { text-decoration: none; }

.sidebar__tag {
  padding: 0.1rem var(--space-2);
  border-radius: var(--radius-chip);
  background: var(--color-danger-50);
  color: var(--color-danger-700);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.sidebar__nav { flex: 1; padding: var(--space-4) var(--space-3); }

.sidebar__heading {
  padding: var(--space-4) var(--space-3) var(--space-2);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  color: var(--text-hint);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.sidebar__list { display: grid; gap: 0.1rem; }

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  transition: var(--transition-colors);
}

.sidebar__link:hover { background: var(--surface-sunken); color: var(--text-primary); text-decoration: none; }

.sidebar__link > svg { color: var(--text-hint); flex: none; }

.sidebar__link.is-active {
  background: var(--color-brand-50);
  color: var(--color-brand-700);
}

.sidebar__link.is-active > svg { color: var(--color-brand-600); }

.sidebar__foot {
  flex: none;
  padding: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.sidebar__version {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs);
  color: var(--text-hint);
}

/* The admin shell inverts the sidebar so an operator acting on somebody
   else's data can never mistake it for their own workspace. */
.sidebar--admin,
.app-shell--admin .sidebar {
  background: var(--surface-inverted);
  border-inline-end-color: transparent;
}

.sidebar--admin .logo,
.sidebar--admin .sidebar__link,
.app-shell--admin .sidebar .logo,
.app-shell--admin .sidebar .sidebar__link { color: var(--color-gray-300); }

.sidebar--admin .sidebar__brand,
.sidebar--admin .sidebar__foot,
.app-shell--admin .sidebar .sidebar__brand,
.app-shell--admin .sidebar .sidebar__foot { border-color: rgba(255, 255, 255, 0.08); }

.sidebar--admin .sidebar__link:hover,
.app-shell--admin .sidebar .sidebar__link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--surface-white);
}

.sidebar--admin .sidebar__link.is-active,
.app-shell--admin .sidebar .sidebar__link.is-active {
  background: var(--color-brand-600);
  color: var(--surface-white);
}

.sidebar--admin .sidebar__link.is-active > svg,
.app-shell--admin .sidebar .sidebar__link.is-active > svg { color: var(--surface-white); }

/* --- topbar ------------------------------------------------------ */

.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  min-height: var(--topbar-height);
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-raised);
}

.topbar__burger { display: grid; place-items: center; padding: var(--space-2); }

.topbar__title { flex: 1; min-width: 0; }

.topbar__title h1 {
  font-size: var(--text-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topbar__title p { font-size: var(--text-xs); color: var(--text-muted); }

.topbar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

.impersonation-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding: var(--space-2) var(--space-6);
  background: var(--color-warning-500);
  color: var(--color-gray-900);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

/* --- account menu ------------------------------------------------ */

.usermenu { position: relative; }

.usermenu__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-pill);
  transition: var(--transition-colors);
}

.usermenu__trigger:hover { background: var(--surface-sunken); }

.usermenu__name {
  display: none;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.usermenu__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  min-width: 14rem;
  padding: var(--space-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
}

.usermenu__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--text-primary);
  text-align: start;
}

.usermenu__link:hover { background: var(--surface-sunken); text-decoration: none; }

.usermenu__link > svg { color: var(--text-hint); }

.usermenu__link--button { color: var(--color-danger-600); }

.usermenu__divider { height: 1px; margin: var(--space-2) 0; background: var(--border-subtle); }

.usermenu__warning {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-warning-50);
  color: var(--color-warning-700);
  font-size: var(--text-xs);
}

/* --- notifications ------------------------------------------------ */

.notifications { position: relative; }

.notifications__trigger { position: relative; }

.notifications__badge {
  position: absolute;
  top: 0;
  inset-inline-end: 0;
  min-width: 1.1rem;
  padding: 0 0.2rem;
  border-radius: var(--radius-pill);
  background: var(--color-danger-500);
  color: var(--surface-white);
  font-size: var(--text-2xs);
  font-weight: var(--weight-bold);
  line-height: 1.1rem;
  text-align: center;
}

.notifications__panel {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + var(--space-2));
  z-index: var(--z-dropdown);
  width: min(22rem, calc(100vw - var(--space-8)));
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.notifications__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.notifications__head h2 { font-size: var(--text-sm); }

.notifications__empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.notifications__list { max-height: 22rem; overflow-y: auto; }

.notifications__item { border-top: 1px solid var(--border-subtle); }

.notifications__item:first-child { border-top: 0; }

.notifications__item.is-unread { background: var(--color-brand-50); }

.notifications__link {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: var(--text-primary);
}

.notifications__link:hover { background: var(--surface-sunken); text-decoration: none; }

.notifications__icon { color: var(--text-hint); margin-top: 0.15em; }

.notifications__body { display: grid; gap: 0.15rem; font-size: var(--text-sm); min-width: 0; }

.notifications__text { color: var(--text-secondary); font-size: var(--text-xs); }

.notifications__body time { font-size: var(--text-2xs); color: var(--text-hint); }

/* --- breadcrumbs and page headers --------------------------------- */

.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); }

.breadcrumbs li + li::before { content: "/"; color: var(--text-hint); }

.breadcrumbs a { color: var(--text-muted); }

.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-header__title { font-size: var(--text-xl); margin-top: var(--space-1); }

.page-header__subtitle {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.page-header__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
/* ==================================================================
   11. PUBLIC SITE
   ================================================================== */

.hero {
  padding: var(--space-16) 0 var(--space-12);
  text-align: center;
}

.hero__inner { max-width: var(--content-narrow); margin: 0 auto; display: grid; gap: var(--space-5); }

.hero__badge {
  justify-self: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--color-brand-50);
  color: var(--color-brand-700);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.hero__title {
  font-size: var(--text-4xl);
  letter-spacing: var(--tracking-tighter);
}

.hero__lede {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: var(--leading-relaxed);
}

.hero__actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.homesearch { display: grid; gap: var(--space-3); }

.homesearch__form {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  box-shadow: var(--shadow-md);
}

.homesearch__popular {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.homesearch__popular a { color: var(--text-secondary); }

.band { display: grid; gap: var(--space-6); }

.band--muted {
  padding: var(--space-12) var(--content-padding);
  margin: 0 calc(var(--content-padding) * -1);
  background: var(--surface-sunken);
  border-radius: var(--radius-2xl);
}

.band__head { display: grid; gap: var(--space-2); text-align: center; max-width: 44rem; margin: 0 auto; }

.band__head h2 { font-size: var(--text-2xl); }

.band__head p { color: var(--text-secondary); }

.band__more { text-align: center; }

.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: center;
}

.split__text { display: grid; gap: var(--space-4); justify-items: start; }

.split__text h2 { font-size: var(--text-2xl); }

.split__lede { color: var(--text-secondary); line-height: var(--leading-relaxed); }

.split__media img { border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }

.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: var(--space-3);
}

.category-tile {
  display: grid;
  gap: var(--space-1);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  transition: var(--transition-shadow);
}

.category-tile:hover { box-shadow: var(--shadow-md); text-decoration: none; }

.category-tile__name { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-primary); }

.category-tile__count { font-size: var(--text-xs); color: var(--text-muted); }

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6);
  counter-reset: step;
}

.steps__item { display: grid; gap: var(--space-2); }

.steps__number {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface-brand);
  color: var(--text-inverted);
  font-weight: var(--weight-bold);
}

.steps__item h3 { font-size: var(--text-md); }

.steps__item p { font-size: var(--text-sm); color: var(--text-secondary); }

.logo-wall {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: center;
}

.logo-wall img {
  max-height: 2.5rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.65;
  transition: var(--transition-colors);
}

.logo-wall a:hover img { filter: none; opacity: 1; }

.stats-band { text-align: center; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-6);
}

.stats-row__value {
  display: block;
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-brand-600);
  font-variant-numeric: tabular-nums;
}

.stats-row__label { font-size: var(--text-sm); color: var(--text-muted); }

.quote {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  margin: 0;
}

.quote__rating { display: flex; gap: 0.1rem; color: var(--color-warning-500); }

.quote blockquote {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--text-secondary);
}

.quote figcaption {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.quote__role { display: block; font-size: var(--text-xs); color: var(--text-muted); }

.cta-band {
  padding: var(--space-12) var(--space-6);
  border-radius: var(--radius-2xl);
  background: var(--surface-brand);
  color: var(--text-inverted);
  text-align: center;
  display: grid;
  gap: var(--space-4);
  justify-items: center;
}

.cta-band h2 { color: inherit; font-size: var(--text-2xl); }

.cta-band p { opacity: 0.9; }

.cta-band .btn--primary {
  background: var(--surface-white);
  border-color: var(--surface-white);
  color: var(--color-brand-700);
}

.content-index { display: grid; gap: var(--space-6); }

.content-index__head { display: grid; gap: var(--space-2); }

.content-index__head h1 { font-size: var(--text-3xl); }

.content-index__head p { color: var(--text-secondary); }

.content-index__search {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  align-items: center;
}

.post-card {
  display: grid;
  gap: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  overflow: hidden;
}

.post-card__media img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

.post-card__body { padding: var(--space-4); display: grid; gap: var(--space-2); }

.post-card--compact { padding: var(--space-4); gap: var(--space-2); }

.post-card__category {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-brand-600);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.post-card__title { font-size: var(--text-md); }

.post-card__excerpt { font-size: var(--text-sm); color: var(--text-secondary); }

.post-card__meta { font-size: var(--text-xs); color: var(--text-muted); }

.article { max-width: var(--content-prose); margin: 0 auto; display: grid; gap: var(--space-6); }

.article__head { display: grid; gap: var(--space-3); }

.article__category { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.article__title { font-size: var(--text-3xl); }

.article__meta {
  display: flex;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.article__hero { border-radius: var(--radius-xl); width: 100%; }

.article__tags { margin-top: var(--space-4); }

.article__related { max-width: var(--content-max); margin: var(--space-12) auto 0; display: grid; gap: var(--space-4); }

.static-page { max-width: var(--content-prose); margin: 0 auto; display: grid; gap: var(--space-6); }

.static-page__title { font-size: var(--text-3xl); }

.static-page__updated { font-size: var(--text-xs); color: var(--text-muted); }

.faq { display: grid; gap: var(--space-6); max-width: var(--content-prose); margin: 0 auto; }

.faq__group { display: grid; gap: var(--space-2); }

.faq__groupTitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.faq__item {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.faq__item > summary {
  padding: var(--space-4);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  list-style: none;
}

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

.faq__item > div { padding: 0 var(--space-4) var(--space-4); }

.faq__contact { text-align: center; color: var(--text-secondary); }

/* --- companies and candidates ------------------------------------ */

.company-card,
.candidate-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  text-align: center;
  justify-items: center;
  transition: var(--transition-shadow);
}

.company-card:hover,
.candidate-card:hover { box-shadow: var(--shadow-md); }

.company-card__name,
.candidate-card__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-md);
}

.company-card__tagline,
.candidate-card__headline { font-size: var(--text-sm); color: var(--text-secondary); }

.company-card__facts,
.candidate-card__facts {
  display: grid;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.company-card__facts li,
.candidate-card__facts li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.company { display: grid; gap: var(--space-6); }

.company__banner img { aspect-ratio: 4 / 1; object-fit: cover; width: 100%; border-radius: var(--radius-xl); }

.company__head { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }

.company__heading { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }

.company__heading h1 {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-2xl);
}

.company__tagline { color: var(--text-secondary); }

.company__facts,
.job__facts,
.applicant__facts,
.profile__facts,
.scheduler__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.company__facts li,
.job__facts li,
.applicant__facts li,
.profile__facts li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.company__about,
.company__jobs { display: grid; gap: var(--space-4); }

.profile { display: grid; gap: var(--space-6); }

.profile__head { display: flex; gap: var(--space-5); align-items: flex-start; flex-wrap: wrap; }

.profile__heading { flex: 1; min-width: 0; display: grid; gap: var(--space-3); }

.profile__heading h1 { font-size: var(--text-2xl); }

.profile__headline { color: var(--text-secondary); }

.profile__contact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.profile__contact li { display: flex; align-items: center; gap: var(--space-2); }

.profile__gated { max-width: 34rem; }

.profile__section { display: grid; gap: var(--space-3); }

.profile__section h2 { font-size: var(--text-lg); }

.resume-share { padding: var(--space-6) 0; }

.resume-share__paper {
  max-width: 51rem;
  margin: 0 auto;
  padding: var(--space-10);
  border-radius: var(--radius-lg);
  background: var(--surface-white);
  box-shadow: var(--shadow-lg);
}
/* ==================================================================
   12. JOB BOARD AND PIPELINE
   ================================================================== */

.board { display: grid; gap: var(--space-6); }

.board__head { display: grid; gap: var(--space-2); }

.board__head h1 { font-size: var(--text-3xl); }

.board__head p { color: var(--text-secondary); }

.board__search {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.board__searchRow {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.board__filters > summary {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

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

.board__filterGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}

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

.board__count { font-size: var(--text-sm); font-weight: var(--weight-semibold); }

.board__sort {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.board__results {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

.job-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  transition: var(--transition-shadow);
}

.job-card:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); }

.job-card--compact { padding: var(--space-4); gap: var(--space-2); }

.job-card__head { display: flex; gap: var(--space-3); align-items: flex-start; }

.job-card__heading { flex: 1; min-width: 0; }

.job-card__title { font-size: var(--text-md); }

.job-card__title a { color: var(--text-primary); }

.job-card__company {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.job-card__verified { color: var(--color-info-500); display: inline-flex; }

.job-card__match { flex: none; }

.job-card__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.job-card__facts li { display: flex; align-items: center; gap: var(--space-1); }

.job-card__excerpt {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: var(--leading-snug);
}

.job-card__foot {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.job-card__posted { display: flex; align-items: center; gap: var(--space-1); }

.job-card__deadline { color: var(--color-warning-700); font-weight: var(--weight-medium); }

.job-card__save { margin-inline-start: auto; }

.job { display: grid; gap: var(--space-8); }

.job__hero {
  padding: var(--space-8) var(--space-6);
  border-radius: var(--radius-xl);
  background: var(--surface-sunken);
}

.job__heroInner {
  display: flex;
  gap: var(--space-5);
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: var(--content-max);
  margin: 0 auto;
}

.job__title { font-size: var(--text-3xl); }

.job__company {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-2) 0 var(--space-4);
  font-size: var(--text-md);
  color: var(--text-secondary);
}

.job__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  align-items: start;
}

.job__main { display: grid; gap: var(--space-8); min-width: 0; }

.job__main section { display: grid; gap: var(--space-3); }

.job__aside { display: grid; gap: var(--space-4); }

.job__skills h2 { font-size: var(--text-lg); }

.job__match { display: grid; gap: var(--space-2); }

.job__matchNote { font-size: var(--text-xs); color: var(--text-muted); }

.job__breakdown > summary {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  cursor: pointer;
}

.job__breakdown ul { display: grid; gap: var(--space-2); margin-top: var(--space-3); }

.job__breakdown li { display: grid; gap: 0.1rem; font-size: var(--text-xs); }

.job__breakdown li span { color: var(--text-muted); }

.job__deadline {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-warning-700);
}

.job__similar { display: grid; gap: var(--space-4); }

.job__similar h2 { font-size: var(--text-xl); }

/* --- the kanban board -------------------------------------------- */

.board-scroll {
  margin: 0 calc(var(--space-6) * -1);
  padding: 0 var(--space-6);
  overflow-x: auto;
}

.kanban {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  min-height: 20rem;
  padding-bottom: var(--space-4);
}

.kanban__column {
  flex: none;
  width: var(--kanban-column-width);
  border: 1px solid var(--border-subtle);
  border-top: 3px solid var(--stage-color, var(--border-strong));
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.kanban__head { padding: var(--space-3) var(--space-4); }

.kanban__head h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-sm);
}

.kanban__count {
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--surface-raised);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.kanban__sla {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-top: var(--space-1);
  font-size: var(--text-2xs);
  color: var(--text-hint);
}

.kanban__cards { display: grid; gap: var(--space-2); padding: 0 var(--space-3) var(--space-3); }

.kanban__empty {
  padding: var(--space-6) 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-hint);
}

.kanban__card { display: grid; gap: var(--space-2); }

.kanban__card.is-stalled .chip-card { border-color: var(--color-warning-500); }

.kanban__move .input { font-size: var(--text-2xs); }

.chip-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  cursor: grab;
}

.chip-card:active { cursor: grabbing; }

.chip-card__head { display: flex; align-items: center; gap: var(--space-2); }

.chip-card__name {
  flex: 1;
  min-width: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chip-card__star { color: var(--color-warning-500); }

.chip-card__headline {
  font-size: var(--text-xs);
  color: var(--text-muted);
  line-height: var(--leading-snug);
}

.chip-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--text-hint);
}

.stage-strip { display: grid; gap: var(--space-2); }

.stage-strip__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-inline-start: 3px solid var(--stage-color, var(--border-strong));
  border-start-start-radius: 0;
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
  border-end-start-radius: 0;
  background: var(--surface-sunken);
  font-size: var(--text-sm);
}

.stage-strip__count { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

.bulk-bar {
  position: sticky;
  top: var(--topbar-height);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--surface-inverted);
  color: var(--text-inverted);
  font-size: var(--text-sm);
}

.bulk-bar .btn { color: var(--text-inverted); border-color: rgba(255, 255, 255, 0.2); }

.applicant { display: flex; gap: var(--space-4); align-items: flex-start; flex-wrap: wrap; }

.applicant__body { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }

.applicant__body h2 { font-size: var(--text-xl); }

.applicant__headline { color: var(--text-secondary); font-size: var(--text-sm); }

.ranked { display: grid; gap: var(--space-3); counter-reset: rank; }

.ranked__item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.ranked__position {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-pill);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
}

.ranked__body { flex: 1; min-width: 0; display: grid; gap: var(--space-2); }

.ranked__body h3 { font-size: var(--text-md); }

.ranked__headline { font-size: var(--text-sm); color: var(--text-secondary); }

.ranked__breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-2);
  font-size: var(--text-xs);
}

.ranked__breakdown li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--text-muted);
}

.ranked__reasons {
  display: grid;
  gap: var(--space-1);
  padding-inline-start: var(--space-4);
  list-style: disc;
  font-size: var(--text-xs);
  color: var(--text-secondary);
}

.ranked__reason {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-style: italic;
}

.ranked__score { flex: none; width: 8rem; }

.funnel { display: grid; gap: var(--space-2); }

.funnel__stage {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  font-size: var(--text-sm);
}

.funnel__label { flex: 1; }

.funnel__count { font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

.funnel__drop {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  font-size: var(--text-xs);
  color: var(--color-danger-600);
}

.sparkbars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 6rem;
}

.sparkbars > li { flex: 1; height: 100%; display: flex; align-items: flex-end; }

.sparkbars__bar {
  width: 100%;
  min-height: 2px;
  border-radius: var(--radius-xs) var(--radius-xs) 0 0;
  background: var(--color-brand-300);
}

.scheduler { display: grid; gap: var(--space-6); }

.scheduler__head { display: grid; gap: var(--space-2); justify-items: center; text-align: center; }

.scheduler__head h1 { font-size: var(--text-2xl); }

.scheduler__meta { justify-content: center; }

.scheduler__slots { display: grid; gap: var(--space-2); border: 0; padding: 0; margin: 0; }

.scheduler__slots legend {
  margin-bottom: var(--space-2);
  font-weight: var(--weight-semibold);
}

.offer { display: grid; gap: var(--space-6); }

.offer__head { display: grid; gap: var(--space-2); justify-items: center; text-align: center; }

.offer__glyph {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--radius-pill);
  background: var(--color-success-50);
  color: var(--color-success-700);
}

.offer__role { font-size: var(--text-lg); color: var(--text-secondary); }

.offer__expiry {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-warning-700);
}

.offer__terms,
.offer__letter,
.offer__notes,
.offer__decision {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.offer__terms h2,
.offer__letter h2,
.offer__notes h2,
.offer__decision h2 { font-size: var(--text-lg); }

.offer__terms h3 {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.offer__buttons { display: flex; gap: var(--space-3); flex-wrap: wrap; }

.onboarding { display: grid; gap: var(--space-6); }

.onboarding__head { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }

.onboarding__head h1 { font-size: var(--text-2xl); }

.onboarding__start {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.agency { display: grid; gap: var(--space-6); }

.agency__head { display: grid; gap: var(--space-2); }

.agency__head h1 { font-size: var(--text-2xl); }

.agency__head p { color: var(--text-secondary); }
/* ==================================================================
   13. ASSESSMENTS AND THE RESUME BUILDER
   ================================================================== */

.assessment { display: grid; gap: var(--space-6); }

.assessment__head { display: grid; gap: var(--space-2); }

.assessment__head h1 { font-size: var(--text-2xl); }

.assessment__meta { font-size: var(--text-sm); color: var(--text-muted); }

.assessment__saved {
  font-size: var(--text-xs);
  color: var(--color-success-600);
  min-height: 1em;
}

.assessment__foot {
  display: grid;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-subtle);
}

.question {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  margin: 0;
}

.question__legend,
.question__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.question__number {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: var(--color-brand-600);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.question__points,
.question__limit {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.question__text {
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.question__options { display: grid; gap: var(--space-2); }

.question__options--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.question__options--inline .option { flex: 1 1 4rem; }

.question__textForm { display: grid; gap: var(--space-3); justify-items: start; }

.recorder {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.recorder__preview {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--color-gray-900);
  object-fit: cover;
}

.recorder__waveform {
  height: 4rem;
  border-radius: var(--radius-md);
  background: var(--color-gray-900);
}

.recorder__status {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  min-height: 1.2em;
}

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

.recorder__takes { font-size: var(--text-xs); color: var(--text-muted); }

.answer-media {
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--color-gray-900);
}

video.answer-media { aspect-ratio: 16 / 9; }

.survey { display: grid; gap: var(--space-6); }

.survey__head { display: grid; gap: var(--space-3); }

.survey__head h1 { font-size: var(--text-2xl); }

.survey__lede { color: var(--text-secondary); }

.survey__nps {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
  margin: 0;
}

.survey__nps legend {
  padding: 0;
  font-weight: var(--weight-semibold);
}

.nps { display: flex; gap: var(--space-1); flex-wrap: wrap; }

.nps__option { flex: 1 1 2.5rem; }

.nps__option input { position: absolute; opacity: 0; }

.nps__option span {
  display: grid;
  place-items: center;
  height: 2.75rem;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: var(--transition-colors);
}

.nps__option input:checked + span {
  background: var(--surface-brand);
  border-color: var(--surface-brand);
  color: var(--text-inverted);
}

.nps__option input:focus-visible + span { outline: 2px solid var(--border-focus); outline-offset: 2px; }

.nps__scale {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --- the resume builder ------------------------------------------ */

.builder {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.builder__editor { display: grid; gap: var(--space-4); min-width: 0; }

.builder__aside { display: grid; gap: var(--space-4); }

.builder__section {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.builder__sectionHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.builder__sectionHead h2 { font-size: var(--text-sm); }

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

.builder__grip { color: var(--text-hint); cursor: grab; }

.builder__form { padding: var(--space-4); }

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

.builder__add {
  display: flex;
  align-items: flex-end;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-card);
  flex-wrap: wrap;
}

.builder__add .field { flex: 1 1 14rem; }

.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--space-4);
}

.template-card {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
}

.template-card h3 { font-size: var(--text-sm); }

.template-card p { font-size: var(--text-xs); color: var(--text-muted); }

.template-card__thumb {
  aspect-ratio: 3 / 4;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
}

.template-card__thumb--blank {
  display: grid;
  place-items: center;
  color: var(--text-hint);
}

/* ==================================================================
   14. ADMIN
   ================================================================== */

.plan__name { font-size: var(--text-xl); }

.translation {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-subtle);
}

.translation:first-child { border-top: 0; }

.translation__source {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  flex-wrap: wrap;
  font-size: var(--text-sm);
}

.translation__source span { color: var(--text-secondary); }

.settings__preview {
  max-height: 8rem;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ==================================================================
   15. UTILITIES
   ================================================================== */

.is-current { font-weight: var(--weight-semibold); }

.is-chosen { font-weight: var(--weight-semibold); color: var(--color-brand-700); }

/* Captcha widgets size themselves; this only stops them overflowing a
   narrow form on a phone. */
.g-recaptcha,
.h-captcha,
.cf-turnstile { max-width: 100%; overflow: hidden; }

/* ==================================================================
   16. RESPONSIVE
   ==================================================================

   Mobile first throughout: the rules above are the small-screen
   layout, and these widen it. The sidebar is a drawer below 1024px
   and a fixed column above it, which is why the shell's left padding
   only appears at that breakpoint.
   ================================================================== */

@media (min-width: 40rem) {
  .field-row { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

  .board__searchRow { grid-template-columns: 2fr 1.5fr auto; }

  .homesearch__form { grid-template-columns: 2fr 1.5fr auto; }

  .board__results { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }

  .usermenu__name { display: block; }

  .footer__inner { grid-template-columns: 1.5fr repeat(auto-fit, minmax(8rem, 1fr)); }
}

@media (min-width: 64rem) {
  .navbar__nav { display: block; }

  .navbar__burger,
  .navbar__drawer { display: none; }

  .topbar__burger { display: none; }

  .sidebar { transform: none; }

  .app-shell__main { margin-inline-start: var(--sidebar-width); }

  .app-shell__scrim { display: none !important; }

  .two-col { grid-template-columns: 1fr 20rem; }

  .two-col--wide { grid-template-columns: 1fr 22rem; }

  .job__body { grid-template-columns: 1fr 22rem; }

  .builder { grid-template-columns: 1fr 22rem; }

  .auth { grid-template-columns: 1fr 1fr; }

  .auth__aside { display: flex; }

  .split { grid-template-columns: 1fr 1fr; }

  .split--reverse .split__text { order: 2; }

  .hero__title { font-size: var(--text-5xl); }
}

@media (max-width: 63.99rem) {
  .app-shell__scrim { display: block; }
}

/* ==================================================================
   17. PRINT
   ==================================================================

   Two things are printed in practice: a shared resume and a report
   table. Everything else is chrome and is removed.
   ================================================================== */

@media print {
  .navbar,
  .footer,
  .sidebar,
  .topbar,
  .minimal-bar,
  .toast-stack,
  .pagination,
  .filter-bar,
  .form-actions,
  .btn,
  .skip-link,
  .impersonation-bar { display: none !important; }

  body { background: #fff; color: #000; }

  .app-shell__main { margin-inline-start: 0; }

  .app-shell__content { padding: 0; }

  .panel,
  .card,
  .job-card,
  .resume-share__paper {
    border: 1px solid #ddd;
    box-shadow: none;
    break-inside: avoid;
  }

  .resume-share { padding: 0; }

  .resume-share__paper { max-width: none; padding: 0; }

  a[href]::after { content: ""; }

  .table thead th { position: static; }
}

/* ==================================================================
   Late additions, kept here rather than threaded back into the
   sections above so the diff stays readable.
   ================================================================== */

.article__body { font-size: var(--text-md); }

.form--wide { max-width: none; }

.stage-strip__name { font-weight: var(--weight-medium); }

/* ==================================================================
   No-Alpine fallback
   ==================================================================

   app.js adds this class when Alpine has not initialised after three
   seconds. Panels that Alpine would have toggled are shown rather
   than left hidden: a dropdown stuck open is recoverable, a page with
   no visible way to sign out is not.
   ================================================================== */

.no-alpine .usermenu__panel,
.no-alpine .notifications__panel,
.no-alpine .dropdown__panel,
.no-alpine .menu__submenu {
  position: static;
  display: block;
  width: auto;
  min-width: 0;
  box-shadow: none;
  border: 0;
  border-top: 1px solid var(--border-subtle);
  border-radius: 0;
}

.no-alpine .app-shell__scrim { display: none !important; }

.no-alpine .sidebar { transform: none; }

.no-alpine .bulk-bar { display: none; }

.notifications__foot {
  padding: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* ==================================================================
   Plans and checkout
   ================================================================== */

.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.plan {
  display: grid;
  gap: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  background: var(--surface-raised);
}

.plan--popular { border-color: var(--surface-brand); box-shadow: var(--shadow-brand); }

.plan--current { background: var(--surface-sunken); }

.plan__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.plan__name { font-size: var(--text-lg); }

.plan__price { display: flex; align-items: baseline; gap: var(--space-2); }

.plan__amount {
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tighter);
}

.plan__period { font-size: var(--text-sm); color: var(--text-muted); }

.plan__lede { font-size: var(--text-sm); color: var(--text-secondary); }

.plan__limits {
  display: grid;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
}

.plan__limits > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.plan__limits dt { color: var(--text-secondary); }

.plan__limits dd { margin: 0; font-weight: var(--weight-semibold); }

.plan__note {
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.plan__form { display: grid; gap: var(--space-3); }

.transfer__amount {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
}

.transfer__reference {
  display: inline-block;
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-wide);
}

.reference { display: grid; gap: var(--space-5); }

.reference__head { display: grid; gap: var(--space-3); justify-items: center; text-align: center; }

.reference__head h1 { font-size: var(--text-2xl); }

.reference__decline { text-align: center; }

/* =====================================================================
   Right-to-left corrections
   ---------------------------------------------------------------------
   The layout is built from logical properties, so the document flows
   correctly from `dir` alone — including the sidebar, which slides off
   the inline-start edge via --flip. What follows is the handful of things
   CSS gives no logical keyword for, and so must be mirrored by hand.
   ===================================================================== */

[dir="rtl"] .input--select {
  /* The disclosure arrow is a background image, and background-position
     takes only physical keywords. Flip it to the other edge and the
     reserved padding follows automatically, because it is logical. */
  background-position: left var(--space-4) center, left var(--space-3) center;
}

[dir="rtl"] .disclosure > summary::before {
  /* A right-pointing chevron points the wrong way in RTL, so the
     mirror-image glyph is used rather than rotating a wrong-way arrow. */
  content: "\2039";
}

[dir="rtl"] .disclosure[open] > summary::before {
  /* Matching rotation for the mirrored glyph: a left-pointing chevron
     rotated counter-clockwise points down, the same as the LTR one. */
  transform: rotate(-90deg);
}