/* PBXpeople — design tokens + base styles.
   Family shell (matches PBXhost/PBXchange: light header + accent underline,
   1480px frame, auth choice cards) with the PBXpeople accent: CREW VIOLET.
   ALL colour on --pbx-* variables — interim until the style-guide package;
   re-skin = token swap. Spacing on an 8px rhythm. */

:root {
  /* Core palette — PBXpeople */
  --pbx-ink: #17324d;          /* family ink / headers */
  --pbx-deep: #3d2f7a;         /* deep violet — secondary */
  --pbx-action: #6a4bbc;       /* CREW VIOLET — buttons, links, accents */
  --pbx-caution: #c58a1b;      /* caution gold (family constant) */
  --pbx-success: #287a55;      /* success green (family constant) */
  --pbx-critical: #a33a3a;     /* critical red (family constant) */
  --pbx-surface: #f5f4f8;      /* page background (violet-tinged) */
  --pbx-card: #ffffff;
  --pbx-muted: #635e75;        /* muted text */
  --pbx-border: #ddd9e6;

  /* Sensitive-information states (per Sensitive Info bible) */
  --sens-masked: #635e75;
  --sens-revealed: #3d2f7a;
  --sens-restricted: #a33a3a;

  /* Rhythm */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;

  --radius: 8px;
  --shadow-card: 0 1px 3px rgba(61, 47, 122, 0.1);
  --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-stack);
  background: var(--pbx-surface);
  color: var(--pbx-ink);
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
}

[hidden] {
  display: none !important;
}

h1, h2, h3 {
  margin: 0 0 var(--sp-2);
  line-height: 1.25;
}

a {
  color: var(--pbx-action);
}

.muted { color: var(--pbx-muted); }

/* ---- Header (family shell) ---- */

.pbx-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--pbx-card);
  color: var(--pbx-ink);
  border-bottom: 3px solid var(--pbx-action);
  box-shadow: 0 1px 3px rgba(61, 47, 122, 0.08), 0 8px 24px rgba(61, 47, 122, 0.06);
  transition: box-shadow 0.22s ease, border-bottom-width 0.22s ease;
}

.pbx-header__inner {
  width: min(1480px, calc(100vw - 4rem));
  margin: 0 auto;
  padding: var(--sp-2) var(--sp-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  transition: padding 0.22s ease;
}

.pbx-header__brand {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  min-width: 0;
  transition: gap 0.22s ease;
}

.pbx-header__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  min-width: 0;
}

.pbx-header .brand {
  font-size: 20px;
  font-weight: 800;
  transition: font-size 0.22s ease;
}

.pbx-header .brand span {
  color: var(--pbx-action);
}

.pbx-header__context {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  min-width: 0;
}

.pbx-header .context-line {
  color: var(--pbx-ink);
  font-size: 14px;
  font-weight: 600;
  max-width: min(22rem, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  line-height: 1.25;
}

.staff-badge {
  background: var(--pbx-caution);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  border-radius: 4px;
  padding: 2px 8px;
  flex-shrink: 0;
}

.pbx-header--compact .context-line {
  font-size: 12px;
}

.pbx-header--compact .staff-badge {
  font-size: 10px;
  padding: 1px 6px;
}

.pbx-header--compact .pbx-header__context {
  gap: 2px;
}

.pbx-header__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-left: auto;
  flex-wrap: wrap;
}

.pbx-header .user-label {
  color: var(--pbx-muted);
  font-size: 13px;
}

.pbx-header .brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  flex-shrink: 0;
  transition: width 0.22s ease, height 0.22s ease;
}

.pbx-header--compact {
  border-bottom-width: 2px;
  box-shadow: 0 1px 2px rgba(61, 47, 122, 0.1), 0 4px 14px rgba(61, 47, 122, 0.08);
}

.pbx-header--compact .pbx-header__inner {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.pbx-header--compact .pbx-header__brand {
  gap: 0.65rem;
}

.pbx-header--compact .brand-logo {
  width: 36px;
  height: 36px;
}

.pbx-header--compact .brand {
  font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .pbx-header,
  .pbx-header__inner,
  .pbx-header__brand,
  .pbx-header .brand,
  .pbx-header .brand-logo {
    transition: none;
  }
}

/* ---- Buttons & fields ---- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
  background: var(--pbx-action);
  color: #fff;
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}

.btn:hover {
  filter: brightness(1.08);
}

.btn__icon {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.staff-page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.staff-page-head h1 {
  margin: 0;
}

.staff-page-head__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-1);
  flex-wrap: wrap;
}

/* Matches one column of the People directory pair (22rem across two buttons). */
.person-edit-actions .btn {
  width: calc((22rem - var(--sp-1)) / 2);
}

.person-edit-session {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--pbx-action) 30%, var(--pbx-border));
  border-radius: 999px;
  background: color-mix(in srgb, var(--pbx-action) 8%, var(--pbx-card));
  color: var(--pbx-deep);
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.person-edit-form {
  display: grid;
  gap: var(--sp-2);
}

.person-edit-section {
  margin: 0;
}

.person-edit-section--sensitive {
  border-left: 4px solid var(--pbx-action);
}

.person-edit-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.person-edit-grid .field {
  margin: 0;
}

.person-edit-grid .field--wide {
  grid-column: 1 / -1;
}

.person-edit-field--sensitive {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--pbx-action) 24%, var(--pbx-surface));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--pbx-action) 8%, var(--pbx-card));
}

.person-edit-status {
  margin: 0 0 var(--sp-2);
}

.person-edit-grid input[readonly] {
  background: var(--pbx-surface);
  color: var(--pbx-muted);
  cursor: not-allowed;
}

.person-edit-timeout .ack-actions .btn {
  flex: 1 1 0;
}

@media (max-width: 640px) {
  .person-edit-grid {
    grid-template-columns: 1fr;
  }

  .person-edit-grid .field--wide {
    grid-column: auto;
  }
}

.staff-page-head--submissions {
  margin-bottom: var(--sp-3);
}

.staff-page-head--submissions .staff-page-head__actions {
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-1);
}

.staff-page-head--submissions .filter-row {
  margin: 0;
}

.staff-page-head--submissions h1 {
  line-height: 1.2;
  padding-top: 4px;
}

.people-directory-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 22rem;
}

.people-directory-actions .btn {
  width: 100%;
}

.admin-invite-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  padding: var(--sp-2);
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background: var(--pbx-card);
}

.admin-invite-panel__body {
  min-width: 0;
}

.admin-invite-panel .admin-section-title {
  margin: 0 0 6px;
  font-size: 15px;
}

.admin-invite-panel .admin-status {
  margin: 0;
}

.admin-invite-panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .admin-invite-panel {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
  }
}

.search-bar {
  display: flex;
  gap: var(--sp-1);
  margin-bottom: var(--sp-3);
}

.search-bar:has(+ .people-list-toolbar) {
  margin-bottom: 0.65rem;
}

.search-bar input {
  flex: 1;
  width: 100%;
  padding: 12px var(--sp-2);
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  font-size: 16px;
  font: inherit;
  background: var(--pbx-card);
  color: var(--pbx-ink);
}

.search-bar input:focus {
  outline: 2px solid color-mix(in srgb, var(--pbx-action) 40%, transparent);
  border-color: var(--pbx-action);
}

.btn.secondary {
  background: var(--pbx-card);
  color: var(--pbx-deep);
  border-color: var(--pbx-border);
}

.btn.secondary:hover:not(:disabled) {
  filter: none;
  border-color: var(--pbx-action);
  background: color-mix(in srgb, var(--pbx-action) 12%, transparent);
}

.btn.small {
  font-size: 0.8125rem;
  padding: 0.35rem 0.75rem;
}

.people-list-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.people-list-toolbar .admin-status {
  margin: 0;
  flex: 1;
  min-width: 0;
}

.people-list-toolbar .admin-status:not([hidden]) {
  margin-right: auto;
}

.people-list-toolbar .btn {
  box-sizing: border-box;
  height: auto;
  min-height: 0;
  margin-left: auto;
  padding: 9px 16px;
  font-size: 15px;
}

.field {
  display: block;
  margin-bottom: var(--sp-2);
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--pbx-muted);
}

.field--check {
  margin-top: 4px;
}

.field--check label.field-check,
.field label.field-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 0;
  width: 100%;
  font-size: 14px;
  font-weight: 500;
  color: var(--pbx-ink);
  cursor: pointer;
}

.field-check__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* Matches the box height (1.05rem) so the tick centres on this line, not the block. */
.field-check__title {
  line-height: 1.2;
}

.field-check__hint {
  font-size: 13px;
  font-weight: 400;
  color: var(--pbx-muted);
}

.field--check input[type="checkbox"],
.field label.field-check input {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 1.05rem;
  margin: 0;
  padding: 0;
  border: none;
  accent-color: var(--pbx-action);
}

.field-hint {
  margin: 6px 0 0;
  font-size: 12px;
}

.field-error {
  margin: 6px 0 0;
  color: var(--pbx-critical);
  font-size: 12px;
  font-weight: 600;
}

.field--invalid > label {
  color: var(--pbx-critical);
}

.field--invalid input,
.field--invalid select,
.field--invalid textarea {
  border-color: var(--pbx-critical);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pbx-critical) 16%, transparent);
}

/* On a phone row only the number is at fault, not the country picker. */
.field--invalid .phone-input__country {
  border-color: var(--pbx-border);
  box-shadow: none;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 15px;
  background: #fff;
}

.field input:focus,
.field textarea:focus {
  outline: 2px solid var(--pbx-action);
  outline-offset: 0;
  border-color: var(--pbx-action);
}

.field__secret {
  position: relative;
}

.field__secret input {
  padding-right: 4.4rem;
}

.field__show-password {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  margin: 0;
  padding: 0 10px;
  min-width: 3.4rem;
  height: 1.75rem;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--pbx-muted) 12%, white);
  color: var(--pbx-muted);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.field__show-password[aria-pressed="true"] {
  background: color-mix(in srgb, var(--pbx-action) 14%, white);
  color: var(--pbx-action);
}

/* ---- Brand logo / sign-in card (family shell) ---- */

.brand-logo {
  display: block;
  border-radius: 7px;
}

.auth-card .brand-logo--large {
  margin: 0 auto var(--sp-2);
}

.auth-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
}

.auth-card {
  background: var(--pbx-card);
  border: 1px solid var(--pbx-border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(61, 47, 122, 0.08), 0 16px 42px rgba(61, 47, 122, 0.1);
  padding: var(--sp-4);
  width: 100%;
  max-width: 430px;
}

/* Spacing mirrors PBXhost's sign-in brand block: tight to the logo
   (line-height 1) with a clear gap before the heading. */
.auth-card .product-name {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 1.75rem;
  text-align: center;
}

.auth-card .product-name span {
  color: var(--pbx-action);
}

.auth-card .tagline {
  color: var(--pbx-muted);
  font-size: 14px;
  margin: 0.25rem 0 1.25rem;
  text-align: center;
}

.auth-card .auth-heading {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 0.25rem;
  text-align: center;
}

.auth-card .auth-error {
  background: #fde8e8;
  color: #8a1f1f;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: var(--sp-2);
}

.auth-card .mock-note {
  margin-top: var(--sp-2);
  font-size: 12px;
  color: var(--pbx-muted);
  text-align: center;
}

.auth-choice {
  display: grid;
  gap: 0.875rem;
}

.auth-choice__card {
  width: 100%;
  min-height: 92px;
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 0.875rem;
  padding: 0.95rem 1rem;
  border: 1px solid var(--pbx-border);
  border-radius: 14px;
  background: var(--pbx-card);
  color: var(--pbx-ink);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}

.auth-choice__card:hover,
.auth-choice__card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--pbx-action);
  background: color-mix(in srgb, var(--pbx-action) 8%, white);
  outline: none;
}

/* Keeps the family hover so the styling reads as live, but the cursor stays
   honest about there being nothing to click yet. */
.auth-choice__card--inactive {
  cursor: default;
}

.auth-choice__icon {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: var(--pbx-action);
  background: color-mix(in srgb, var(--pbx-action) 10%, white);
}

.auth-choice__content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.auth-choice__content strong {
  font-size: 1rem;
  line-height: 1.3;
}

.auth-choice__content span {
  color: var(--pbx-muted);
  font-size: 0.8125rem;
  line-height: 1.4;
}

.auth-choice__arrow {
  color: var(--pbx-action);
  font-size: 1.35rem;
}

/* ---- Sign-in intro (wordmark reveal, then options stagger in) ----
   Plays once per tab session (js/signInIntro.js sets `no-intro`). */

.auth-card .product-name--intro {
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-card .product-name .product-name__primary {
  color: inherit;
}

/* Zero-width clipped column: "people" slides out from behind the right edge
   of "PBX" as the column opens, pushing "PBX" left of centre. */
.product-name__reveal {
  display: grid;
  grid-template-columns: 1fr;
}

.product-name__reveal > span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-align: left;
}

.brand-logo--intro {
  opacity: 0;
  animation: intro-logo-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.product-name--intro .product-name__primary {
  opacity: 0;
  animation: intro-pbx-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.product-name--intro .product-name__reveal {
  grid-template-columns: 0fr;
  animation: intro-reveal 0.8s cubic-bezier(0.77, 0, 0.18, 1) 0.95s forwards;
}

.intro-enter {
  opacity: 0;
  animation: intro-fade-up 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.intro-enter--d1 {
  animation-delay: 1.7s;
}

.intro-enter--d2 {
  animation-delay: 1.82s;
}

.intro-enter--d3 {
  animation-delay: 1.96s;
}

.intro-enter--d4 {
  animation-delay: 2.1s;
}

.intro-enter--d5 {
  animation-delay: 2.24s;
}

@keyframes intro-logo-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes intro-pbx-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes intro-reveal {
  from {
    grid-template-columns: 0fr;
  }
  to {
    grid-template-columns: 1fr;
  }
}

@keyframes intro-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.no-intro .brand-logo--intro,
.no-intro .product-name--intro .product-name__primary,
.no-intro .intro-enter {
  animation: none;
  opacity: 1;
}

.no-intro .product-name--intro .product-name__reveal {
  animation: none;
  grid-template-columns: 1fr;
}

@media (prefers-reduced-motion: reduce) {
  .brand-logo--intro,
  .product-name--intro .product-name__primary,
  .intro-enter {
    animation: none;
    opacity: 1;
  }

  .product-name--intro .product-name__reveal {
    animation: none;
    grid-template-columns: 1fr;
  }

  .auth-choice__card {
    transition: none;
  }
}

.auth-card .auth-links {
  display: flex;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: 13px;
}

.auth-card .auth-links a {
  color: var(--pbx-action);
}

.auth-card #sign-in-submit {
  width: 100%;
}

.auth-back {
  margin-top: var(--sp-2);
  text-align: center;
}

.auth-back button {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--pbx-action);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* ---- Page frame + footer (family shell) ---- */

.page {
  width: min(1480px, calc(100vw - 4rem));
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-3) var(--sp-6);
  flex: 1;
}

.site-footer {
  margin-top: auto;
  padding: 1.25rem 1.5rem;
  text-align: center;
  font-size: 0.8125rem;
  color: var(--pbx-muted);
  border-top: 1px solid var(--pbx-border);
  background: rgba(255, 255, 255, 0.68);
}

.site-footer p {
  margin: 0;
}

/* ---- Shared blocks ---- */

.panel-block {
  background: var(--pbx-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.panel-block h2 { font-size: 16px; margin-bottom: var(--sp-1); }

.profile-intro {
  margin: -0.5rem 0 var(--sp-2);
}

.kv-row {
  display: grid;
  grid-template-columns: 24rem 1fr;
  gap: var(--sp-2);
  padding: 8px 0;
  border-top: 1px solid var(--pbx-surface);
  font-size: 14px;
  align-items: center;
}

.kv-label {
  color: var(--pbx-muted);
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
}

.kv-label--wrap {
  white-space: normal;
}

.kv-label--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  white-space: normal;
}

.kv-label__title {
  white-space: nowrap;
}

.kv-label__title--doc {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Sized to the label text so a document row is no taller than a data row. */
.kv-label__icon {
  flex: none;
  width: 13px;
  height: 13px;
  color: var(--pbx-action);
}

.kv-label__note {
  font-weight: 400;
  color: var(--pbx-muted);
  white-space: normal;
  overflow-wrap: anywhere;
}

.section-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-1);
  margin: var(--sp-3) 0 var(--sp-2);
}

.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: var(--pbx-muted);
}

.status-pill[data-status="confirmed"] { background: var(--pbx-success); }
.status-pill[data-status="pencilled"] { background: var(--pbx-caution); }
.status-pill[data-status="travel"] { background: var(--pbx-deep); }
.status-pill[data-status="complete"] { background: var(--pbx-muted); }

/* ---- Dashboard ---- */

.hero-job {
  background: linear-gradient(120deg, var(--pbx-deep), var(--pbx-action));
  color: #fff;
  border-radius: 14px;
  padding: var(--sp-3);
  margin-bottom: var(--sp-3);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}

.hero-job__label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}

.hero-job h2 {
  margin: 4px 0 2px;
  font-size: 22px;
  color: #fff;
}

.hero-job .sub {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}

.hero-job .hero-cta {
  background: #fff;
  color: var(--pbx-deep);
}

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.tile {
  position: relative;
  display: block;
  background: var(--pbx-card);
  border: 1px solid var(--pbx-border);
  border-radius: 14px;
  padding: var(--sp-2);
  color: var(--pbx-ink);
  text-decoration: none;
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.tile .tile__badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #fcd34d;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
}

.tile:hover {
  transform: translateY(-2px);
  border-color: var(--pbx-action);
}

.tile__icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: var(--pbx-action);
  background: color-mix(in srgb, var(--pbx-action) 10%, white);
  margin-bottom: var(--sp-1);
}

.tile strong { display: block; font-size: 15px; }
.tile span { color: var(--pbx-muted); font-size: 13px; }

.tile--coming {
  opacity: 0.55;
  cursor: default;
}
.tile--coming:hover {
  transform: none;
  border-color: var(--pbx-border);
}

/* ---- Admin Console ---- */

.admin-crumb {
  font-size: 13px;
  color: var(--pbx-muted);
  margin: 0 0 var(--sp-1);
}
.admin-crumb a {
  color: var(--pbx-action);
  text-decoration: none;
  font-weight: 600;
}
.admin-crumb a:hover { text-decoration: underline; }

.admin-status {
  font-size: 14px;
  margin: 0 0 var(--sp-2);
  color: var(--pbx-deep);
}
.admin-status--error { color: #8a1f1f; }

/* ---- Transient top-of-page toasts ---- */

.pbx-toast-host {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  width: min(34rem, calc(100vw - 2rem));
  pointer-events: none;
}

.pbx-toast {
  padding: 12px var(--sp-2);
  border-radius: 10px;
  background: var(--pbx-card);
  border: 1px solid var(--pbx-border);
  border-left: 3px solid var(--pbx-action);
  box-shadow: 0 10px 28px rgba(23, 50, 77, 0.16);
  color: var(--pbx-ink);
  font-size: 14px;
  line-height: 1.4;
  text-align: left;
  opacity: 0;
  transform: translateY(-0.6rem);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
  cursor: pointer;
}

.pbx-toast--error {
  border-left-color: var(--pbx-critical);
  color: #8a1f1f;
}

.pbx-toast--in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .pbx-toast {
    transition: opacity 0.2s ease;
    transform: none;
  }
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.admin-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-2);
}
.admin-form__actions {
  display: flex;
  gap: var(--sp-1);
}
.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  margin-bottom: var(--sp-1);
}
.admin-toolbar h2 { margin: 0; }
.admin-search {
  min-width: min(100%, 220px);
  padding: 8px 12px;
  border: 1px solid var(--pbx-border);
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  background: var(--pbx-card);
}
.admin-search:focus {
  outline: 2px solid color-mix(in srgb, var(--pbx-action) 35%, transparent);
  border-color: var(--pbx-action);
}
.admin-count { margin: 0 0 var(--sp-1); }

.people-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-bottom: var(--sp-3);
  background: var(--pbx-card);
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
}

.people-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  background: var(--pbx-card);
}

.people-table th,
.people-table td {
  text-align: left;
  padding: 0.65rem 0.875rem;
  border-bottom: 1px solid var(--pbx-border);
  vertical-align: top;
}

.people-table th {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: var(--pbx-muted);
  background: color-mix(in srgb, var(--pbx-surface) 70%, white);
  white-space: nowrap;
  padding: 0;
}

.people-table tbody tr:last-child td {
  border-bottom: none;
}

.people-table__sort {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0.65rem 0.875rem;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.people-table__sort::after {
  content: "";
  font-size: 0.7em;
  font-weight: 600;
  min-width: 0.75em;
}

.people-table__sort:hover {
  color: var(--pbx-action);
  background: color-mix(in srgb, var(--pbx-action) 6%, white);
}

.people-table th.is-sorted .people-table__sort {
  color: var(--pbx-deep);
}

.people-table th.is-sorted .people-table__sort::after {
  content: "↑";
  opacity: 0.9;
}

.people-table th.is-sorted-desc .people-table__sort::after {
  content: "↓";
}

.people-table td {
  color: var(--pbx-ink);
  vertical-align: middle;
}

.people-table__account {
  text-align: center;
  width: 7.5rem;
  font-variant-numeric: tabular-nums;
}

/* Tick is set larger than the row text, so it keeps its own line box height
   out of the row rhythm. */
.people-table__account--yes {
  color: var(--pbx-action);
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
}

/* ---- People table skeleton loading ---- */

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

.people-table--skeleton {
  pointer-events: none;
  user-select: none;
}

.people-table--skeleton th {
  padding: 0.65rem 0.875rem;
}

.people-table--skeleton td {
  height: 2.7rem;
  vertical-align: middle;
}

.people-skeleton-line {
  display: block;
  width: 72%;
  height: 0.75rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--pbx-border) 70%, var(--pbx-surface));
  animation: people-skeleton-pulse 1.2s ease-in-out infinite;
}

.people-skeleton-line--heading {
  width: 62%;
  height: 0.7rem;
}

.people-skeleton-line--title {
  width: 38%;
  height: 1rem;
  margin-bottom: 0.5rem;
}

.people-skeleton-line--crumb {
  width: 12rem;
  height: 0.7rem;
}

.people-skeleton-line--page-title {
  width: min(18rem, 70%);
  height: 1.6rem;
}

.person-skeleton-crumb {
  display: flex;
  align-items: center;
  min-height: 1.25rem;
}

.home-skeleton-head {
  display: flex;
  align-items: center;
  min-height: 2.4rem;
  margin-bottom: var(--sp-2);
}

.person-skeleton-panel .kv-label .people-skeleton-line {
  width: 70%;
}

.people-skeleton-line--0 { width: 78%; }
.people-skeleton-line--1 { width: 58%; }
.people-skeleton-line--2 { width: 88%; }
.people-skeleton-line--3 { width: 68%; }

@keyframes people-skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .people-skeleton-line {
    animation: none;
  }
}

.people-table tbody tr:hover td {
  background: color-mix(in srgb, var(--pbx-action) 8%, white);
}

.people-table__row {
  cursor: default;
  user-select: text;
}

.vault-subhead {
  margin: var(--sp-2) 0 var(--sp-1);
  font-size: 14px;
  font-weight: 700;
  color: var(--pbx-deep);
}

.vault-access-log {
  margin-top: 0;
  font-size: 14px;
}

.vault-access-log summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--pbx-deep);
}

@media (max-width: 640px) {
  .admin-form__row { grid-template-columns: 1fr; }
}

.notice-row {
  display: flex;
  gap: var(--sp-1);
  padding: 10px 0;
  border-top: 1px solid var(--pbx-surface);
  font-size: 14px;
  align-items: baseline;
}

.notice-row time {
  color: var(--pbx-muted);
  font-size: 12px;
  white-space: nowrap;
}

.review-nudge {
  background: color-mix(in srgb, var(--pbx-caution) 12%, white);
  border-left: 4px solid var(--pbx-caution);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-2);
  margin-bottom: var(--sp-3);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
}

/* ---- Job page ---- */

.job-head { margin-bottom: var(--sp-2); }
.job-title { margin: 6px 0 4px; font-size: 24px; }

.job-split {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--sp-2);
  align-items: start;
}

@media (max-width: 900px) {
  .job-split { grid-template-columns: 1fr; }
}

.call-banner {
  background: var(--pbx-deep);
  color: #fff;
  border-radius: var(--radius);
  padding: var(--sp-2);
  margin-bottom: var(--sp-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-1);
  font-size: 15px;
}

.call-banner strong { font-size: 20px; }

.sched-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--sp-1);
  padding: 8px 0;
  border-top: 1px solid var(--pbx-surface);
  font-size: 14px;
}

.sched-row time {
  color: var(--pbx-action);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-1);
  padding: 10px 0;
  border-top: 1px solid var(--pbx-surface);
  font-size: 14px;
}

.contact-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-1);
  padding: 8px 0;
  border-top: 1px solid var(--pbx-surface);
  font-size: 14px;
  flex-wrap: wrap;
}

/* ---- My details: sensitive information (per Sensitive Info bible) ---- */

.sens-panel {
  border-left: 4px solid var(--pbx-action);
}

.sens-explain {
  background: color-mix(in srgb, var(--pbx-action) 7%, white);
  border-radius: var(--radius);
  padding: var(--sp-1) var(--sp-2);
  font-size: 13px;
  color: var(--pbx-deep);
  margin-bottom: var(--sp-1);
}

.sens-row {
  display: grid;
  grid-template-columns: 24rem 1fr auto;
  gap: var(--sp-2);
  padding: 10px 0;
  border-top: 1px solid var(--pbx-surface);
  font-size: 14px;
  align-items: center;
}

.identity-vault-slot {
  display: contents;
}

.linked-group {
  margin: 8px 0 0;
  padding: 2px 12px;
  border: 1px solid var(--pbx-border);
  border-radius: 10px;
  background: color-mix(in srgb, var(--pbx-action) 5%, var(--pbx-card));
}

.linked-group + .linked-group {
  margin-top: var(--sp-2);
}

.linked-group .kv-row:first-child {
  border-top: none;
}

.sens-row--inline {
  margin-inline: calc(-1 * var(--sp-2));
  padding: 8px var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--pbx-action) 24%, var(--pbx-surface));
  border-radius: 0;
  background: color-mix(in srgb, var(--pbx-action) 8%, var(--pbx-card));
}

.sens-row:has(.sens-value--document) {
  align-items: start;
}

.sens-value {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  color: var(--sens-masked);
}

.sens-value--revealed {
  color: var(--sens-revealed);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.sens-value--document {
  font-weight: 400;
  letter-spacing: 0;
}

.sens-doc-preview {
  display: block;
  max-width: min(100%, 420px);
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  background: var(--pbx-surface);
}

canvas.sens-doc-preview {
  object-fit: contain;
}

.sens-doc-pdf {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}

.sens-doc-pdf__pager {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.sens-doc-pdf__count {
  min-width: 7rem;
  font-size: 13px;
}

.sens-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.sens-row__actions .btn {
  min-width: 5.25rem;
}

.reveal-timer {
  font-size: 12px;
  font-weight: 700;
  color: var(--pbx-action);
  white-space: nowrap;
  min-width: 2.25em;
  text-align: right;
}

.visibility-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 9px;
  margin-left: 6px;
  vertical-align: middle;
}

.visibility-tag--operational { background: color-mix(in srgb, var(--pbx-action) 12%, white); color: var(--pbx-deep); }
.visibility-tag--emergency { background: color-mix(in srgb, var(--pbx-critical) 12%, white); color: var(--pbx-critical); }
.visibility-tag--restricted { background: color-mix(in srgb, var(--pbx-muted) 15%, white); color: var(--pbx-muted); }

.retention-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
  padding: var(--sp-1) 0 0;
  font-size: 13px;
  color: var(--pbx-muted);
}

.retention-actions { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

.access-log-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: var(--sp-1);
  padding: 7px 0;
  border-top: 1px solid var(--pbx-surface);
  font-size: 13px;
}

.access-log-row time { color: var(--pbx-muted); font-size: 12px; }

/* ---- Reveal reason overlay ---- */

.ack-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 50, 77, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-3);
  /* Above the sticky header (z-index 40) so a tall dialog is never clipped. */
  z-index: 60;
  overscroll-behavior: contain;
}

.ack-card {
  background: var(--pbx-card);
  border-radius: 14px;
  padding: var(--sp-3);
  max-width: 460px;
  width: 100%;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}

.people-form-modal {
  position: relative;
  max-width: 560px;
  border-top: 3px solid var(--pbx-action);
  animation: invite-modal-in 0.16s ease-out;
}

/* Submit veil + bouncing dots (same pattern as the PBXchange download modal). */
.modal-busy {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: inherit;
  background: color-mix(in srgb, var(--pbx-card) 74%, transparent);
  backdrop-filter: blur(1.5px);
  animation: modal-busy-in 0.14s ease-out;
}

.modal-busy__dots {
  display: flex;
  gap: 9px;
}

.modal-busy__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pbx-action);
  animation: modal-busy-bounce 0.95s ease-in-out infinite;
}

.modal-busy__dot:nth-child(2) {
  animation-delay: 0.14s;
}

.modal-busy__dot:nth-child(3) {
  animation-delay: 0.28s;
}

@keyframes modal-busy-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-busy-bounce {
  0%,
  70%,
  100% {
    transform: translateY(0);
    opacity: 0.45;
  }
  35% {
    transform: translateY(-8px);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal-busy {
    animation: none;
  }

  .modal-busy__dot {
    animation: modal-busy-fade 1.1s ease-in-out infinite;
  }

  @keyframes modal-busy-fade {
    0%,
    100% {
      opacity: 0.35;
    }
    50% {
      opacity: 1;
    }
  }
}

.people-form-modal h2 {
  margin-bottom: 0;
}

.people-form-modal__lead {
  margin: 8px 0 var(--sp-2);
}

.people-form-modal__email-notice {
  margin: 6px 0 0;
  font-size: 13px;
}

.people-form-modal__note {
  min-height: 6.5rem;
  resize: vertical;
}

/* Same locked look as the intake form's Email: the value is there to read, not
   to change. Used when Request Details opens from a person's own page. */
.people-form-modal input[readonly] {
  background: var(--pbx-surface);
  color: var(--pbx-muted);
  cursor: not-allowed;
}

.people-form-modal .ack-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.people-form-modal .ack-actions .btn {
  width: 100%;
}

.ack-actions {
  display: flex;
  gap: var(--sp-1);
  margin-top: var(--sp-2);
}

/* Submit confirmation: one decision, so the two choices split the card evenly. */
.intake-confirm__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: var(--sp-3);
}

.intake-confirm__actions .btn {
  width: 100%;
}

/* ---- Invite to PBXpeople modal ---- */

.invite-modal {
  max-width: 440px;
  border-top: 3px solid var(--pbx-action);
  animation: invite-modal-in 0.16s ease-out;
}

.invite-modal__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--sp-2);
  border-radius: 12px;
  color: var(--pbx-action);
  background: color-mix(in srgb, var(--pbx-action) 12%, transparent);
}

.invite-modal__title {
  margin: 0 0 6px;
  font-size: 19px;
}

.invite-modal__lead {
  margin: 0 0 var(--sp-2);
  color: var(--pbx-muted);
  font-size: 14px;
}

.invite-modal__detail {
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.invite-modal__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 10px var(--sp-2);
  font-size: 14px;
}

.invite-modal__row + .invite-modal__row {
  border-top: 1px solid var(--pbx-border);
}

.invite-modal__row-label {
  color: var(--pbx-muted);
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}

.invite-modal__row-value {
  color: var(--pbx-ink);
  text-align: right;
  word-break: break-word;
}

.invite-modal .admin-status {
  margin: var(--sp-2) 0 0;
}

.invite-modal__actions {
  justify-content: flex-end;
  margin-top: var(--sp-3);
}

.confirm-modal {
  /* Anchors the .modal-busy veil to the card. */
  position: relative;
}

/* Vault reason/password prompt: Cancel and confirm split the card evenly. */
.vault-step-modal .ack-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: stretch;
  width: 100%;
}

.vault-step-modal .ack-actions .btn {
  width: 100%;
}

.confirm-modal .ack-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-content: stretch;
  width: 100%;
}

.confirm-modal .ack-actions .btn {
  width: 100%;
}

.invite-modal__actions .btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@keyframes invite-modal-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .invite-modal,
  .people-form-modal {
    animation: none;
  }
}

/* ---- Public person-details intake ---- */

.intake-page {
  max-width: 900px;
}

.intake-loading,
.intake-fatal,
.intake-success {
  margin: var(--sp-4) auto;
  text-align: center;
}

.intake-heading {
  margin-bottom: var(--sp-3);
}

.intake-heading h1 {
  margin-bottom: var(--sp-1);
}

/* Title left, expiry pill hard right, above the explanatory paragraph. */
.intake-heading__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-1);
}

.intake-heading__row h1 {
  margin-bottom: 0;
}

.intake-expiry {
  display: inline-flex;
  margin: 0;
  padding: 6px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pbx-action) 10%, white);
  color: var(--pbx-deep);
  font-size: 13px;
  font-weight: 600;
}

.intake-status {
  margin-bottom: var(--sp-2);
}

/* Only surfaces if the module is slow to boot, so the skeleton never flashes
   behind a text message on a normal load. */
.intake-loading {
  opacity: 0;
  animation: intake-loading-appear 0.2s ease 0.6s forwards;
}

@keyframes intake-loading-appear {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intake-loading {
    opacity: 1;
    animation: none;
  }
}

/* ---- Intake form skeleton ---- */

.intake-skeleton-pill {
  width: 15rem;
  height: 1.8rem;
  border-radius: 999px;
}

.intake-skeleton-lead {
  height: 0.7rem;
  margin-bottom: 6px;
}

.intake-skeleton-hint {
  width: 46%;
  height: 0.7rem;
  margin-bottom: var(--sp-2);
}

.intake-skeleton-label {
  height: 0.75rem;
  margin-bottom: 12px;
}

.intake-skeleton-label--0 { width: 42%; }
.intake-skeleton-label--1 { width: 55%; }
.intake-skeleton-label--2 { width: 34%; }
.intake-skeleton-label--3 { width: 48%; }

/* Heights match the real input and textarea boxes so the real fields land in
   the same place when the skeleton is swapped out. */
.intake-skeleton-control {
  width: 100%;
  height: 45px;
  border-radius: var(--radius);
}

.intake-skeleton-control--tall {
  height: 90px;
}

.intake-section {
  position: relative;
  border: 1px solid var(--pbx-border);
  box-shadow: none;
  padding: var(--sp-3);
}

.intake-section--sensitive {
  border-left: 3px solid var(--pbx-action);
}

.intake-section h2 {
  margin: 0 0 4px;
  font-size: 18px;
}

.intake-section__hint {
  margin: 0 0 var(--sp-2);
  font-size: 13px;
}

.intake-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.intake-form-grid .field {
  margin: 0;
}

.intake-form-grid .field--wide {
  grid-column: 1 / -1;
}

.intake-form-grid .field--start-row {
  grid-column-start: 1;
}

.multi-select {
  position: relative;
}

.multi-select__button {
  width: 100%;
  min-height: 45px;
  padding: 10px 42px 10px 12px;
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background:
    linear-gradient(45deg, transparent 50%, var(--pbx-muted) 50%) calc(100% - 18px) 19px / 5px 5px no-repeat,
    linear-gradient(135deg, var(--pbx-muted) 50%, transparent 50%) calc(100% - 13px) 19px / 5px 5px no-repeat,
    var(--pbx-card);
  color: var(--pbx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.multi-select__button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pbx-action) 22%, transparent);
  outline-offset: 1px;
  border-color: var(--pbx-action);
}

.multi-select__panel {
  position: absolute;
  z-index: 8;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  padding: 6px;
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background: var(--pbx-card);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--pbx-ink) 16%, transparent);
}

.multi-select__panel[hidden] {
  display: none;
}

.field label.multi-select__option {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0;
  padding: 8px 10px;
  border-radius: calc(var(--radius) - 2px);
  color: var(--pbx-ink);
  font-weight: 500;
  cursor: pointer;
}

.field label.multi-select__option:hover {
  background: color-mix(in srgb, var(--pbx-action) 7%, var(--pbx-card));
}

.field label.multi-select__option input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: var(--pbx-action);
}

.intake-form-grid .field--linked-trigger,
.intake-form-grid .field--linked {
  padding: 8px 12px;
  margin: -8px -12px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--pbx-action) 9%, transparent);
}

/* Open at the seam so the two halves draw one unbroken outline. */
.intake-form-grid .field--linked-trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow:
    inset 1px 1px 0 color-mix(in srgb, var(--pbx-action) 22%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--pbx-action) 22%, transparent);
}

/* Only the seam eats its grid gap; the closing edge keeps its own so back-to-back
   containers never butt up against each other. */
.intake-form-grid .field--linked {
  margin-bottom: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow:
    inset 1px 0 0 color-mix(in srgb, var(--pbx-action) 22%, transparent),
    inset -1px -1px 0 color-mix(in srgb, var(--pbx-action) 22%, transparent);
  animation: linked-reveal-in 180ms ease-out;
}

@keyframes linked-reveal-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .intake-form-grid .field--linked {
    animation: none;
  }
}

.intake-form-grid input,
.intake-form-grid select,
.intake-form-grid textarea,
.intake-credential-list input,
.intake-credential-builder input:not([type="file"]),
.intake-credential-builder select,
.intake-supporting-builder input:not([type="file"]),
.intake-upload-line input[type="file"] {
  width: 100%;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background: var(--pbx-card);
  color: var(--pbx-ink);
  font: inherit;
}

.intake-form-grid input,
.intake-form-grid select,
.intake-credential-list input,
.intake-credential-builder input:not([type="file"]),
.intake-credential-builder select,
.intake-supporting-builder input:not([type="file"]) {
  min-height: 45px;
}

/* The browser's date editor is a couple of pixels taller than a text line, so
   a date control would otherwise stand proud of the fields beside it. */
.intake-form input[type="date"] {
  height: 45px;
}

.intake-form input[type="date"]::-webkit-datetime-edit {
  padding: 0;
}

.field__date {
  position: relative;
}

.field__date-hint {
  display: none;
  position: absolute;
  top: 50%;
  left: 13px;
  transform: translateY(-50%);
  color: var(--pbx-muted);
  pointer-events: none;
}

/* Safari (iOS especially) centres the date value while every other control in
   the form reads from the left edge, and leaves an empty date field blank with
   no format hint at all. Left-align the native value, then draw our own hint
   while the field is empty — the native one is blanked so the two cannot
   double up. */
@supports (-webkit-hyphens: none) {
  .intake-form input[type="date"] {
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
  }

  .intake-form input[type="date"]::-webkit-date-and-time-value {
    margin: 0;
    text-align: left;
  }

  .field__date:not(.field__date--filled) input[type="date"] {
    color: transparent;
  }

  .field__date:not(.field__date--filled) .field__date-hint {
    display: block;
  }
}

.intake-form-grid select,
.intake-credential-builder select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%2317324d' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
  cursor: pointer;
}

.intake-form-grid textarea {
  resize: vertical;
  min-height: 82px;
}

.intake-form-grid input:focus,
.intake-form-grid select:focus,
.intake-form-grid textarea:focus,
.intake-credential-list input:focus,
.intake-credential-builder input:not([type="file"]):focus,
.intake-credential-builder select:focus,
.intake-supporting-builder input:not([type="file"]):focus,
.intake-upload-line input[type="file"]:focus {
  outline: 2px solid color-mix(in srgb, var(--pbx-action) 35%, transparent);
  border-color: var(--pbx-action);
}

.intake-form-grid input[readonly] {
  background: var(--pbx-surface);
  color: var(--pbx-muted);
}

/* Segmented Yes/No control. The pair is centred as a group so it reads as one
   answer rather than two widely spaced options. */
.boolean-choice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 45px;
  padding: 4px;
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background: var(--pbx-card);
}

/* Scoped past `.field label { display: block }`, which would otherwise stop
   these from behaving as centred flex rows. */
.boolean-choice label.boolean-choice__option {
  display: flex;
  flex: 0 1 108px;
  align-self: stretch;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0 14px;
  border-radius: 6px;
  color: var(--pbx-muted);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.boolean-choice label.boolean-choice__option:has(input:checked) {
  color: var(--pbx-action);
}

/* Undo the full-width text-input treatment the intake grid applies to inputs. */
.boolean-choice label.boolean-choice__option input[type="radio"] {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--pbx-action);
}

.intake-form-grid .field--wide .boolean-choice {
  width: 100%;
}

.intake-form-grid .field--wide .boolean-choice label.boolean-choice__option {
  flex: 1 1 0;
}

.intake-credential-list {
  display: grid;
  gap: var(--sp-1);
}

.intake-credential-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.intake-credential-row .field {
  margin: 0;
}

.intake-credential-builder {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.intake-credential-builder__row {
  position: relative;
  padding: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--pbx-action) 20%, var(--pbx-border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--pbx-action) 5%, var(--pbx-card));
}

.intake-credential-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--pbx-critical) 30%, var(--pbx-border));
  border-radius: 50%;
  background: var(--pbx-card);
  color: var(--pbx-critical);
  font: 600 17px/1 sans-serif;
  cursor: pointer;
}

.intake-credential-remove:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pbx-critical) 10%, var(--pbx-card));
}

.intake-credential-remove:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pbx-critical) 24%, transparent);
  outline-offset: 2px;
}

.intake-credential-remove:disabled {
  opacity: 0.5;
  cursor: default;
}

.intake-credential-builder__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

.intake-credential-builder__controls .field,
.intake-credential-builder__value .field {
  margin: 0;
}

.intake-credential-builder__supporting:empty {
  display: none;
}

/* Sits directly in the credential row rather than in a box of its own, which
   would read as a second nested container. */
.intake-upload-line--inline {
  min-height: 0;
  margin-top: var(--sp-2);
  padding: var(--sp-2) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--pbx-action) 18%, var(--pbx-border));
}

.intake-section-uploads {
  margin-top: var(--sp-2);
}

.intake-form-grid .intake-employment-upload {
  grid-column: 1 / -1;
  border-top: 0;
}

/* Groups each policy with the document it belongs to, rather than separating
   the fields from their upload. */
.intake-form-grid .intake-form-divider {
  grid-column: 1 / -1;
  height: 0;
  margin: var(--sp-1) 0;
  border-top: 1px solid var(--pbx-border);
}

.intake-form-grid .intake-form-divider[hidden] {
  display: none;
}

.intake-employment-message {
  margin: var(--sp-2) 0 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--pbx-action) 22%, var(--pbx-border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--pbx-action) 7%, var(--pbx-card));
  color: var(--pbx-ink);
  font-weight: 600;
}

.intake-supporting-builder {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.intake-supporting-builder__row {
  position: relative;
  padding: var(--sp-2);
  border: 1px solid color-mix(in srgb, var(--pbx-action) 20%, var(--pbx-border));
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--pbx-action) 5%, var(--pbx-card));
}

.intake-supporting-builder__controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  align-items: end;
}

.intake-supporting-builder__controls .field {
  margin: 0;
}

.intake-credential-add {
  justify-self: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--pbx-action) 35%, var(--pbx-border));
  border-radius: 50%;
  background: var(--pbx-card);
  color: var(--pbx-action);
  font: 500 27px/1 sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--pbx-action) 12%, transparent);
  transition: transform 150ms ease, background 150ms ease;
}

.intake-credential-add:hover {
  transform: translateY(-1px);
  background: color-mix(in srgb, var(--pbx-action) 7%, var(--pbx-card));
}

.intake-credential-add:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pbx-action) 24%, transparent);
  outline-offset: 2px;
}

/* Mirrors .field label metrics so the checkbox box starts at the same y as a
   labelled input in the next column. */
.field-label-spacer {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
}

.field--intake-check label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 45px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background: var(--pbx-card);
  color: var(--pbx-ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.field--intake-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-height: 0;
  flex: 0 0 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--pbx-action);
}

.intake-upload-list {
  display: grid;
}

/* Columns match .intake-form-grid so the upload control sits where a second
   field would sit on a two-column row. */
.intake-upload-line {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
  align-items: center;
  min-height: 72px;
  padding: 10px 0;
  border-top: 1px solid var(--pbx-border);
}

.intake-upload-line__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  min-width: 0;
}

.intake-upload-line__action input[type="file"] {
  flex: 1 1 10rem;
  min-width: 0;
}

.intake-upload-line:first-child {
  border-top: 0;
}

.intake-upload-line__info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.intake-upload-line__detail {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.intake-upload-line__detail:empty {
  display: none;
}

.intake-upload-section--photos .intake-upload-line__detail,
.intake-upload-section--medical .intake-upload-line__detail {
  overflow: visible;
  margin-top: 3px;
  line-height: 1.35;
  text-overflow: clip;
  white-space: normal;
}

.intake-upload-line input[type="file"] {
  padding: 7px;
  font-size: 13px;
}

.intake-upload-line__status {
  margin-left: auto;
  font-size: 13px;
}

.intake-upload-line__completed-actions {
  display: flex;
  gap: var(--sp-1);
  margin-left: auto;
}

.intake-upload-line__completed-actions[hidden] {
  display: none;
}

.intake-upload-delete {
  color: var(--pbx-critical);
  border-color: color-mix(in srgb, var(--pbx-critical) 40%, var(--pbx-border));
}

.btn.danger {
  color: #fff;
  border-color: var(--pbx-critical);
  background: var(--pbx-critical);
}

.intake-upload-line__status--error {
  color: var(--pbx-critical);
}

/* The tint reads as a band across the whole row, so it has to cross the
   section's own padding. Two flat shadows paint that bleed behind the row —
   a negative margin would do it too, but this leaves the grid columns,
   dividers, and buttons exactly where they were. */
.intake-upload-line--complete {
  --upload-bleed: var(--sp-3);
  --upload-tint: color-mix(in srgb, var(--pbx-success) 4%, transparent);
  background: var(--upload-tint);
  box-shadow:
    calc(-1 * var(--upload-bleed)) 0 0 var(--upload-tint),
    var(--upload-bleed) 0 0 var(--upload-tint);
}

/* Inside a credential or supporting-document card the row bleeds that card's
   own padding instead, so the band still stops at its border. */
.intake-upload-line--inline.intake-upload-line--complete,
.intake-upload-line--compact.intake-upload-line--complete {
  --upload-bleed: var(--sp-2);
}

.intake-upload-line--compact {
  display: block;
  min-height: 0;
  padding: 0;
  border: 0;
}

.intake-upload-line--compact .intake-upload-line__info {
  display: none;
}

/* Half the width of a normal upload row, so the file control has to be free to
   shrink or the Upload button drops to a second line. */
.intake-upload-line--compact .intake-upload-line__action {
  flex-wrap: nowrap;
  min-height: 45px;
}

.intake-upload-line--compact .intake-upload-line__action input[type="file"] {
  flex: 1 1 0;
}

.intake-preview-overlay {
  z-index: 20;
}

.intake-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(900px, 94vw);
  max-width: none;
  max-height: 90vh;
}

.intake-preview__heading h2,
.intake-preview__heading p {
  margin: 0;
}

.intake-preview__heading p {
  margin-top: 4px;
}

.intake-preview__image,
.intake-preview__frame {
  display: block;
  width: 100%;
  height: min(66vh, 680px);
  margin: var(--sp-2) 0;
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background: var(--pbx-surface);
}

.intake-preview__image {
  object-fit: contain;
}

.intake-preview > .btn {
  justify-self: end;
}

.intake-document-list {
  margin-top: var(--sp-2);
}

.intake-document-list > .muted {
  margin: 0;
}

.intake-document-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: 10px 0;
  border-top: 1px solid var(--pbx-border);
}

.intake-document-row > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.intake-document-row strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-pill--good {
  color: var(--pbx-success);
  background: color-mix(in srgb, var(--pbx-success) 12%, white);
}

.status-pill--caution {
  color: var(--pbx-caution);
  background: color-mix(in srgb, var(--pbx-caution) 16%, white);
}

.status-pill--bad {
  color: var(--pbx-critical);
  background: color-mix(in srgb, var(--pbx-critical) 12%, white);
}

.intake-form-actions {
  position: sticky;
  bottom: var(--sp-1);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: 12px;
  border: 1px solid var(--pbx-border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--pbx-card) 94%, transparent);
  box-shadow: 0 8px 24px rgba(23, 50, 77, 0.12);
  backdrop-filter: blur(8px);
}

.intake-saved {
  margin-right: auto;
  font-size: 13px;
}

.intake-form-actions__buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-1);
  width: 20rem;
  flex: 0 0 20rem;
}

.intake-form-actions__buttons .btn {
  width: 100%;
}

.intake-success {
  max-width: 540px;
  padding: var(--sp-4);
}

.intake-success p {
  margin: 0;
}

.intake-success p + p {
  margin-top: var(--sp-2);
}

.intake-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: var(--sp-2);
  border-radius: 50%;
  color: #fff;
  background: var(--pbx-success);
  font-size: 24px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .intake-form-grid,
  .intake-credential-row,
  .intake-credential-builder__controls,
  .intake-supporting-builder__controls {
    grid-template-columns: 1fr;
  }

  .intake-form-grid .field--wide {
    grid-column: auto;
  }

  .intake-upload-line {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: var(--sp-2) 0;
  }

  .intake-upload-line__status {
    margin-left: 0;
  }

  /* Single column, so there is nothing to line the checkbox up with. */
  .field-label-spacer {
    display: none;
  }

  .intake-form-actions {
    flex-wrap: wrap;
  }

  .intake-saved {
    width: 100%;
    margin: 0 0 4px;
  }

  .intake-form-actions__buttons {
    width: 100%;
    flex: 1 1 100%;
  }
}

/* ---- Filter chips (PBXchange pattern) ---- */

.filter-row {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.chip {
  border: 1px solid var(--pbx-border);
  background: var(--pbx-card);
  color: var(--pbx-ink);
  border-radius: 999px;
  padding: 6px 14px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.chip--active {
  background: var(--pbx-action);
  border-color: var(--pbx-action);
  color: #fff;
}

/* ---- Submissions admin queue ---- */

.request-list {
  display: grid;
  gap: var(--sp-1);
}

.request-list__row {
  appearance: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: start;
  gap: var(--sp-3);
  width: 100%;
  padding: 14px var(--sp-2);
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background: var(--pbx-card);
  color: var(--pbx-ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.request-list__row:hover {
  border-color: var(--pbx-action);
  background: color-mix(in srgb, var(--pbx-action) 5%, white);
}

.request-list__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.request-list__identity strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-list__identity .muted,
.request-list__person {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-list__person {
  color: var(--pbx-ink);
}

.request-list__row > .status-pill {
  width: 7.5rem;
  box-sizing: border-box;
  align-self: center;
  text-align: center;
}

.request-list__date {
  color: var(--pbx-muted);
  font-size: 13px;
  align-self: center;
  white-space: nowrap;
}

.request-list__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: var(--sp-6) var(--sp-3);
  border: 1px dashed var(--pbx-border);
  box-shadow: none;
  text-align: center;
}

.request-list__empty-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin-bottom: var(--sp-1);
  border-radius: 50%;
  background: color-mix(in srgb, var(--pbx-action) 10%, white);
  color: var(--pbx-action);
}

.request-list__empty h2 {
  margin-bottom: 0;
}

.request-list__empty p {
  max-width: 34ch;
  font-size: 14px;
}

.request-list__pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

.request-list__pager-label {
  min-width: 9rem;
  text-align: center;
  font-size: 13px;
}

.request-list__pager .btn {
  min-width: 7.5rem;
}

.request-list__skeleton {
  padding: 14px var(--sp-2);
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background: var(--pbx-card);
}

.request-detail-modal {
  width: min(760px, calc(100vw - 2rem));
  max-width: 760px;
  /* Centred in the viewport, so this keeps the card clear of the header. */
  max-height: calc(100vh - 9rem);
  overflow: auto;
  overscroll-behavior: contain;
}

/* Close / Decline / Approve share the card width evenly, wrapping when narrow. */
.request-detail-modal .ack-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  justify-content: stretch;
  width: 100%;
}

.request-detail-modal .ack-actions .btn {
  width: 100%;
}

.request-detail-grid {
  margin-top: var(--sp-2);
}

/* Accreditation-photo download options, matched to PBXchange. */
/* Same footprint as the PBXchange download options card. */
.ack-card.download-options-modal {
  position: relative;
  max-width: 560px;
  max-height: min(92vh, 880px);
  overflow: auto;
  border-top: 3px solid var(--pbx-action);
}

.download-options-modal h2 {
  margin: 0 0 var(--sp-2);
}

/* Crop needs room for the preview, so the card widens only while it is on. */
.ack-card.download-options-modal--wide {
  max-width: 900px;
}

.download-options__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: start;
}

/* Card hugs its content so the preview column never leaves dead space. */
.ack-card.download-options-modal--wide {
  width: fit-content;
}

.download-options-modal--wide .download-options__body {
  grid-template-columns: 30rem auto;
}

.download-options__main {
  min-width: 0;
}

.download-options__crop-skeleton {
  width: 16rem;
  height: 12rem;
  border-radius: var(--radius);
}

.download-options__crop {
  display: grid;
  gap: 8px;
  align-content: start;
  justify-items: start;
}

.download-options__crop-tools {
  display: flex;
  gap: 6px;
}

.download-options__crop-tools .btn.is-active {
  border-color: var(--pbx-action);
  color: var(--pbx-action);
}

/* Shrink-wraps the image so no backdrop shows beside it. */
.download-options__crop-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border-radius: var(--radius);
  overflow: hidden;
  touch-action: none;
  user-select: none;
}

.download-options__crop-stage img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 22rem;
}

.download-options__crop-box {
  position: absolute;
  display: none;
  border: 2px solid var(--pbx-action);
  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
  cursor: move;
}

.download-options__crop-stage.is-ready .download-options__crop-box {
  display: block;
}

.download-options__crop-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid var(--pbx-action);
  border-radius: 2px;
}

.download-options__crop-handle.is-nw { left: -7px; top: -7px; cursor: nwse-resize; }
.download-options__crop-handle.is-ne { right: -7px; top: -7px; cursor: nesw-resize; }
.download-options__crop-handle.is-se { right: -7px; bottom: -7px; cursor: nwse-resize; }
.download-options__crop-handle.is-sw { left: -7px; bottom: -7px; cursor: nesw-resize; }
.download-options__crop-handle.is-n { left: calc(50% - 6px); top: -7px; cursor: ns-resize; }
.download-options__crop-handle.is-s { left: calc(50% - 6px); bottom: -7px; cursor: ns-resize; }
.download-options__crop-handle.is-w { left: -7px; top: calc(50% - 6px); cursor: ew-resize; }
.download-options__crop-handle.is-e { right: -7px; top: calc(50% - 6px); cursor: ew-resize; }

.download-options__crop-status {
  margin: 0;
  color: var(--pbx-muted);
  font-size: 12px;
}

.download-options__crop-status--error {
  color: var(--pbx-critical);
}

@media (max-width: 760px) {
  .ack-card.download-options-modal--wide {
    width: 100%;
  }

  .download-options-modal--wide .download-options__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.download-options__list {
  display: grid;
  gap: 8px;
}

.download-options__list-divider {
  height: 0;
  margin: 4px 0;
  border: 0;
  border-top: 1px solid var(--pbx-border);
}

.download-options__option {
  display: flex;
  /* Tick sits centred on the whole option, not on its first line of text. */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  background: var(--pbx-surface);
  cursor: pointer;
}

.download-options__option:has(.download-options__tick:checked) {
  border-color: var(--pbx-action);
  background: color-mix(in srgb, var(--pbx-action) 6%, var(--pbx-surface));
}

.download-options__option--expandable {
  display: flex;
  align-items: center;
  gap: 10px;
}

.download-options__option-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  cursor: inherit;
}

.download-options__option--inline-field {
  justify-content: space-between;
}

.download-options__option--locked {
  cursor: default;
  opacity: 0.55;
}

.download-options__tick {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--pbx-action);
}

.download-options__option-text {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.download-options__option-label {
  font-size: 14px;
  font-weight: 700;
}

.download-options__option-hint {
  color: var(--pbx-muted);
  font-size: 12px;
}

.download-options__inline-field {
  flex: 0 0 auto;
  min-width: 7.5rem;
}

.download-options__size-label {
  display: block;
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pbx-muted);
}

.download-options__size-input {
  display: grid;
  grid-template-columns: 4.5rem auto;
  align-items: center;
  gap: 6px;
}

.download-options__size-input input {
  width: 100%;
  min-width: 0;
  padding: 4px 8px;
}

.download-options__size-input span {
  color: var(--pbx-muted);
  font-size: 13px;
  font-weight: 700;
}

.download-options__format-select {
  display: block;
  width: 7.5rem;
  padding: 4px 8px;
  border: 1px solid var(--pbx-border);
  border-radius: var(--radius);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  background: #fff;
}

.download-options__rename-select {
  width: 17rem;
  max-width: 100%;
}

.download-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 6px var(--sp-2);
  margin: var(--sp-2) 0 0;
}

.download-summary dt {
  color: var(--pbx-muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.download-summary dd {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.download-options-modal .admin-status {
  margin: var(--sp-2) 0 0;
}

.download-options__divider {
  height: 0;
  margin: var(--sp-3) 0 0;
  border: 0;
  border-top: 1px solid var(--pbx-border);
}

.download-options-modal .ack-body {
  margin-top: var(--sp-2);
}

.download-options-modal .ack-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.download-options-modal .ack-actions .btn {
  width: 100%;
}

@media (max-width: 720px) {
  .request-list__row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-1);
  }

  .request-list__date {
    grid-column: 1 / -1;
    grid-row: 2;
  }
}


@media (max-width: 720px) {
  .pbx-header__inner,
  .page {
    width: 100%;
  }

  .pbx-header__inner {
    padding: 0.875rem 1rem;
  }

  .page {
    padding: var(--sp-3) 1rem var(--sp-4);
  }

  .pbx-header__actions {
    width: 100%;
    justify-content: flex-start;
  }

  .kv-row, .sens-row { grid-template-columns: 1fr; }
  .kv-label { white-space: normal; }
}

/* ---- Opportunities: engagement-stage separation (C10 / bible UX-004) ---- */

.stage-legend {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.stage-chip {
  display: inline-block;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 12px;
  letter-spacing: 0.02em;
}

.stage-chip--enquiry {
  background: var(--pbx-surface);
  color: var(--pbx-muted);
  border: 1.5px dashed var(--pbx-muted);
}

.stage-chip--offer {
  background: var(--pbx-action);
  color: #fff;
}

.stage-chip--contract {
  background: color-mix(in srgb, var(--pbx-caution) 16%, white);
  color: #7a5410;
  border: 1px solid var(--pbx-caution);
}

.stage-chip--assignment {
  background: color-mix(in srgb, var(--pbx-success) 14%, white);
  color: var(--pbx-success);
  border: 1px solid var(--pbx-success);
}

.opp-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  flex-wrap: wrap;
  margin-bottom: var(--sp-1);
}

.opp-card__head h2 { margin: 0; }

.opp-card--offer {
  border-left: 4px solid var(--pbx-action);
}

.not-an-offer {
  background: color-mix(in srgb, var(--pbx-muted) 10%, white);
  border: 1.5px dashed var(--pbx-muted);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--pbx-muted);
  margin-bottom: var(--sp-2);
}

.offer-version {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--pbx-deep);
  background: color-mix(in srgb, var(--pbx-action) 8%, white);
  border-radius: var(--radius);
  padding: 6px 12px;
  margin-bottom: var(--sp-1);
}

.opp-deadline {
  margin-top: var(--sp-1);
  font-size: 13px;
}

/* Pre-reveal disclosure block (UX-026) */
.reveal-disclosure {
  background: var(--pbx-surface);
  border-radius: var(--radius);
  padding: 4px 12px 8px;
  margin: var(--sp-1) 0;
}

/* Future nav entries (bible IA, unbuilt) */

/* ---- Small-screen pass (bible UX-033: usable at 320px) ---- */

@media (max-width: 480px) {
  body { font-size: 14px; }
  .page { padding: var(--sp-2) 0.75rem var(--sp-3); }
  .pbx-header__inner { padding: 0.75rem; gap: var(--sp-1); }
  .pbx-header .brand-logo { width: 40px; height: 40px; }
  .hero-job { padding: var(--sp-2); }
  .hero-job h2 { font-size: 18px; }
  .tile-grid { grid-template-columns: 1fr; }
  .ack-actions { flex-wrap: wrap; }
  .ack-actions .btn { flex: 1 1 auto; }
  .stage-legend { gap: 6px; }
  .call-banner { flex-direction: column; }
  .auth-card { padding: var(--sp-3); }
}


.pbx-header__brand {
  text-decoration: none;
  color: inherit;
}

.pbx-header__brand:hover .brand {
  color: var(--pbx-action);
}

.pbx-header__actions {
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.pbx-header .context-line {
  color: var(--pbx-ink);
  font-size: 14px;
  font-weight: 600;
  max-width: min(22rem, 42vw);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  line-height: 1.25;
}

.pbx-header .context-line[hidden] {
  display: none !important;
}

/* ---- Site menu (hamburger → panel) ---- */

.site-menu-toggle {
  appearance: none;
  border: 1px solid var(--pbx-border);
  background: var(--pbx-card);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  padding: 0;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: var(--pbx-ink);
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
  flex-shrink: 0;
}

.site-menu-toggle:hover {
  border-color: var(--pbx-action);
  background: color-mix(in srgb, var(--pbx-action) 8%, white);
}

.site-menu-toggle:focus-visible {
  outline: 2px solid var(--pbx-action);
  outline-offset: 2px;
}

.site-menu-toggle__bars,
.site-menu-toggle__bars::before,
.site-menu-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-menu-toggle__bars { position: relative; }

.site-menu-toggle__bars::before,
.site-menu-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-menu-toggle__bars::before { top: -6px; }
.site-menu-toggle__bars::after { top: 6px; }

body.site-menu-open .site-menu-toggle__bars { background: transparent; }
body.site-menu-open .site-menu-toggle__bars::before {
  top: 0;
  transform: rotate(45deg);
}
body.site-menu-open .site-menu-toggle__bars::after {
  top: 0;
  transform: rotate(-45deg);
}

.site-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
}

.site-menu__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.4);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.site-menu__panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: min(20.5rem, 92vw);
  background: var(--pbx-card);
  box-shadow: -16px 0 48px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  padding: 28px 16px 24px;
  transform: translateX(104%);
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.site-menu.is-open .site-menu__backdrop { opacity: 1; }
.site-menu.is-open .site-menu__panel { transform: translateX(0); }

.site-menu.is-open .site-menu__user,
.site-menu.is-open .site-menu__link,
.site-menu.is-open .site-menu__sign-out {
  opacity: 1;
  transform: translateX(0);
}

.site-menu.is-open .site-menu__link--disabled,
.site-menu.is-open .site-menu__link--future {
  opacity: 0.42;
}

.site-menu__user,
.site-menu__link,
.site-menu__sign-out {
  opacity: 0;
  transform: translateX(14px);
  transition:
    opacity 0.22s ease,
    transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    background 0.12s ease,
    color 0.12s ease,
    padding-left 0.12s ease,
    border-color 0.12s ease;
}

.site-menu.is-open .site-menu__user { transition-delay: 0.06s; }
.site-menu.is-open .site-menu__link:nth-child(1) { transition-delay: 0.08s; }
.site-menu.is-open .site-menu__link:nth-child(2) { transition-delay: 0.1s; }
.site-menu.is-open .site-menu__link:nth-child(3) { transition-delay: 0.12s; }
.site-menu.is-open .site-menu__link:nth-child(4) { transition-delay: 0.14s; }
.site-menu.is-open .site-menu__link:nth-child(5) { transition-delay: 0.16s; }
.site-menu.is-open .site-menu__link:nth-child(6) { transition-delay: 0.18s; }
.site-menu.is-open .site-menu__link:nth-child(7) { transition-delay: 0.2s; }
.site-menu.is-open .site-menu__link:nth-child(8) { transition-delay: 0.22s; }
.site-menu.is-open .site-menu__link:nth-child(9) { transition-delay: 0.24s; }
.site-menu.is-open .site-menu__link:nth-child(10) { transition-delay: 0.26s; }
.site-menu.is-open .site-menu__sign-out { transition-delay: 0.16s; }

@media (prefers-reduced-motion: reduce) {
  .site-menu__backdrop,
  .site-menu__panel,
  .site-menu__user,
  .site-menu__link,
  .site-menu__sign-out {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

.site-menu__head {
  padding: 0 8px 16px;
  border-bottom: 1px solid var(--pbx-border);
  margin-bottom: 16px;
}

.site-menu__user {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-align: left;
  border: none;
  background: transparent;
  padding: 10px 12px;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--pbx-ink);
  cursor: pointer;
}

.site-menu__user-icon {
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  padding: 0.3rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--pbx-action) 12%, white);
  color: var(--pbx-action);
  box-sizing: border-box;
}

.site-menu__user-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-menu__user:hover,
.site-menu__user:focus-visible {
  background: color-mix(in srgb, var(--pbx-action) 10%, white);
  color: var(--pbx-action);
  outline: none;
}

.site-menu__user:hover .site-menu__user-icon,
.site-menu__user:focus-visible .site-menu__user-icon {
  background: color-mix(in srgb, var(--pbx-action) 18%, white);
}

.site-menu__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  overflow: auto;
  padding: 0 8px;
}

.site-menu__group {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--pbx-muted);
  padding: 14px 12px 6px;
}

.site-menu__group--disabled { opacity: 0.45; }

.site-menu__link {
  display: block;
  color: var(--pbx-ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: var(--radius);
}

.site-menu__link:hover {
  background: var(--pbx-surface);
  color: var(--pbx-action);
  padding-left: 16px;
}

.site-menu__link--active {
  background: color-mix(in srgb, var(--pbx-action) 12%, white);
  color: var(--pbx-action);
}

.site-menu__link--disabled,
.site-menu__link--future {
  color: var(--pbx-muted);
  cursor: not-allowed;
  font-weight: 600;
}

.site-menu__link--disabled:hover,
.site-menu__link--future:hover {
  background: transparent;
  color: var(--pbx-muted);
  padding-left: 12px;
}

.site-menu__foot {
  margin-top: auto;
  padding: 16px 8px 0;
  border-top: 1px solid var(--pbx-border);
}

.site-menu__sign-out {
  appearance: none;
  display: block;
  width: 100%;
  border: 1px solid var(--pbx-border);
  background: transparent;
  color: var(--pbx-ink);
  font: inherit;
  font-weight: 600;
  padding: 11px 12px;
  border-radius: var(--radius);
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  box-sizing: border-box;
}

.site-menu__sign-out:hover {
  border-color: var(--pbx-critical);
  color: var(--pbx-critical);
  background: color-mix(in srgb, var(--pbx-critical) 8%, white);
}

body.site-menu-open { overflow: hidden; }

.phone-input {
  display: grid;
  grid-template-columns: minmax(150px, 0.9fr) minmax(160px, 1.1fr);
  gap: 8px;
}

.phone-input__country,
.phone-input__number {
  width: 100%;
  min-width: 0;
}

.phone-input__preview {
  margin: 6px 0 0;
  min-height: 1.25em;
}

.phone-input__preview:empty {
  display: none;
}

.phone-input__preview--error {
  color: var(--pbx-critical);
}

@media (max-width: 620px) {
  .phone-input {
    grid-template-columns: 1fr;
  }
}