@font-face {
  font-family: "Foda";
  src: url("../fonts/foda.ttf") format("opentype");
  font-display: swap;
  font-style: normal;
  font-weight: 400;
}

:root {
  color-scheme: light;
  --brand-800: #793217;
  --brand-700: #a44320;
  --brand-600: #cf6028;
  --brand-500: #f18927;
  --brand-200: #ffd4af;
  --brand-100: #fff0e2;
  --ink-950: #191d1a;
  --ink-900: #242824;
  --ink-700: #505650;
  --ink-500: #7c837b;
  --line: #e8e0d7;
  --paper: #fffefa;
  --canvas: #f6f4ef;
  --success: #27734e;
  --success-bg: #e9f7ef;
  --warning: #8a5a12;
  --warning-bg: #fff5d9;
  --danger: #a53636;
  --danger-bg: #fdecec;
  --shadow: 0 28px 80px rgba(34, 31, 25, 0.1);
  --shadow-soft: 0 14px 40px rgba(34, 31, 25, 0.07);
  font-family: "Foda", Tahoma, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--canvas);
}

body {
  position: relative;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink-900);
  background:
    radial-gradient(
      circle at 8% 4%,
      rgba(241, 137, 39, 0.14),
      transparent 24rem
    ),
    radial-gradient(
      circle at 92% 26%,
      rgba(121, 50, 23, 0.07),
      transparent 28rem
    ),
    var(--canvas);
  line-height: 1.5;
}

body::before {
  position: fixed;
  z-index: -1;
  width: 28rem;
  height: 28rem;
  top: 58vh;
  left: -16rem;
  border: 1px solid rgba(207, 96, 40, 0.12);
  border-radius: 45% 55% 67% 33% / 42% 38% 62% 58%;
  content: "";
  transform: rotate(28deg);
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

a {
  color: var(--brand-700);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--brand-600);
}

[hidden] {
  display: none !important;
}

.auth-pending .protected-app {
  visibility: hidden;
}

.skip-link {
  position: fixed;
  z-index: 20;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.65rem;
  color: #fff;
  background: var(--brand-700);
  transform: translateY(-180%);
}

.skip-link:focus {
  transform: translateY(0);
}

.brand-mark {
  display: inline-grid;
  width: 3.35rem;
  height: 3.35rem;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 1.15rem 0.55rem 1.15rem 1.15rem;
  color: #fff;
  font-size: 1.65rem;
  font-weight: 800;
  box-shadow: 0 0 0 0.35rem rgba(255, 255, 255, 0.1);
  transform: rotate(-3deg);
}

.brand-mark--dark {
  border-color: var(--brand-500);
  color: var(--brand-700);
  box-shadow: 0 0 0 0.35rem var(--brand-100);
  background: #fff;
}

.brand-logo {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.brand-logo--light {
  filter: none;
}

.brand-logo--dark {
  filter: none;
}

.brand-logo--auth {
  width: min(100%, 19rem);
  height: auto;
  padding: 0.75rem 1rem;
  border-radius: 1rem 0.45rem 1rem 1rem;
  background: rgba(255, 255, 255, 0.94);
}

.brand-logo--topbar {
  width: 9.5rem;
  height: auto;
  flex: 0 0 auto;
}

.brand-logo--public {
  width: 13rem;
  height: auto;
}

.brand-logo--standalone {
  width: min(100%, 18rem);
  margin-inline: auto;
}

.auth-layout {
  display: grid;
  min-height: 100vh;
  padding: 1rem;
  grid-template-columns: minmax(22rem, 0.92fr) minmax(26rem, 1.08fr);
  gap: 1rem;
}

.auth-brand {
  position: relative;
  display: flex;
  min-height: calc(100vh - 2rem);
  padding: clamp(2rem, 6vw, 5rem);
  overflow: hidden;
  border-radius: 2.2rem 1rem 2.2rem 2.2rem;
  align-items: center;
  color: #fff;
  background:
    linear-gradient(145deg, rgba(23, 27, 23, 0.08), transparent 48%),
    linear-gradient(145deg, #853819, #cf6028 58%, #f39a3e);
  box-shadow: 0 35px 90px rgba(107, 44, 20, 0.25);
}

.auth-brand::before,
.auth-brand::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.auth-brand::before {
  width: 28rem;
  height: 28rem;
  top: -10rem;
  left: -10rem;
  border-radius: 42% 58% 34% 66% / 48% 39% 61% 52%;
  transform: rotate(20deg);
}

.auth-brand::after {
  width: 18rem;
  height: 18rem;
  right: -7rem;
  bottom: -6rem;
  border-radius: 61% 39% 54% 46% / 45% 62% 38% 55%;
}

.brand-content {
  position: relative;
  z-index: 1;
  max-width: 34rem;
}

.brand-content h1 {
  margin: 2rem 0 1rem;
  font-size: clamp(2rem, 4vw, 3.7rem);
  line-height: 1.25;
}

.brand-content p {
  max-width: 30rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  line-height: 1.9;
}

.brand-chip {
  display: inline-flex;
  margin-top: 2rem;
  padding: 0.55rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.1);
  font-size: 0.9rem;
}

.auth-main {
  display: grid;
  padding: clamp(1.25rem, 5vw, 4rem);
  place-items: center;
}

.auth-card {
  width: min(100%, 31rem);
  padding: clamp(1.5rem, 5vw, 3rem);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 2rem 0.9rem 2rem 2rem;
  background: rgba(255, 254, 250, 0.82);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.auth-card__eyebrow {
  margin: 0 0 0.65rem;
  color: var(--brand-700);
  font-size: 0.85rem;
  font-weight: 700;
}

.auth-card h2 {
  margin: 0;
  font-size: clamp(1.65rem, 4vw, 2.2rem);
}

.auth-card__intro {
  margin: 0.8rem 0 1.7rem;
  color: var(--ink-700);
  line-height: 1.8;
}

.field {
  margin-top: 1.15rem;
}

.field label {
  display: block;
  margin-bottom: 0.45rem;
  font-size: 0.94rem;
  font-weight: 700;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 3.15rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid #ddd6cc;
  border-radius: 0.9rem 0.45rem 0.9rem 0.9rem;
  outline: none;
  color: var(--ink-900);
  background: rgba(255, 255, 255, 0.82);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 0.22rem rgba(229, 123, 47, 0.16);
}

.field textarea {
  min-height: 7rem;
  resize: vertical;
}

/* The stepper arrows on a number field, removed at HR's request on 2026-08-25.
   They are a hazard on a payroll form rather than a convenience: the arrows sit under the cursor
   where the caret is, a stray click or a scroll over a focused field silently moves a figure by one
   step, and «دقائق التأخر» is entered by typing a number read off an attendance sheet, never by
   nudging it 386 times. The field still accepts the keyboard arrows, and `step` still governs what
   is valid — this hides the control, it does not relax the validation. */
.field input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.field input[type="number"]::-webkit-outer-spin-button,
.field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-left: 4.6rem;
}

.password-toggle {
  position: absolute;
  top: 50%;
  left: 0.45rem;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 0.45rem;
  color: var(--brand-700);
  background: transparent;
  cursor: pointer;
  transform: translateY(-50%);
}

.password-toggle:hover {
  background: var(--brand-100);
}

.field-hint {
  display: block;
  margin-top: 0.45rem;
  color: var(--ink-500);
  font-size: 0.82rem;
  line-height: 1.55;
}

.form-meta {
  display: flex;
  margin-top: 1rem;
  justify-content: flex-end;
  font-size: 0.9rem;
}

.primary-button,
.secondary-button {
  display: inline-flex;
  min-height: 3.15rem;
  padding: 0.75rem 1.1rem;
  border-radius: 0.9rem 0.45rem 0.9rem 0.9rem;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition:
    transform 150ms ease,
    box-shadow 150ms ease,
    background 150ms ease;
}

.primary-button {
  width: 100%;
  margin-top: 1.4rem;
  border: 1px solid var(--brand-600);
  color: #fff;
  background: linear-gradient(135deg, var(--brand-700), var(--brand-500));
  box-shadow: 0 10px 24px rgba(198, 90, 40, 0.22);
  font-weight: 700;
}

.primary-button:hover:not(:disabled) {
  color: #fff;
  box-shadow: 0 13px 30px rgba(198, 90, 40, 0.3);
  transform: translateY(-1px);
}

.primary-button--fit {
  width: auto;
  margin-top: 0;
  white-space: nowrap;
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.secondary-button {
  border: 1px solid var(--line);
  color: var(--ink-700);
  background: var(--paper);
}

.secondary-button:hover {
  color: var(--brand-700);
  background: var(--brand-100);
}

.message {
  margin: 1rem 0 0;
  padding: 0.8rem 0.9rem;
  border-radius: 0.65rem;
  font-size: 0.9rem;
  line-height: 1.65;
}

.message[data-type="info"] {
  color: #315f78;
  background: #ebf5fa;
}

.message[data-type="success"] {
  color: var(--success);
  background: var(--success-bg);
}

.message[data-type="warning"] {
  color: var(--warning);
  background: var(--warning-bg);
}

.message[data-type="error"] {
  color: var(--danger);
  background: var(--danger-bg);
}

.auth-footer {
  margin: 1.5rem 0 0;
  color: var(--ink-500);
  font-size: 0.86rem;
  text-align: center;
}

.redirect-page {
  display: grid;
  min-height: 100vh;
  padding: 1.5rem;
  place-items: center;
}

.redirect-card {
  width: min(100%, 27rem);
  padding: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 1.2rem;
  background: var(--paper);
  box-shadow: var(--shadow);
  text-align: center;
}

.loading-dot {
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 1.25rem;
  border-radius: 50%;
  background: var(--brand-500);
  animation: pulse 900ms ease-in-out infinite alternate;
}

@keyframes pulse {
  to {
    opacity: 0.3;
    transform: scale(0.7);
  }
}

.topbar {
  position: sticky;
  z-index: 10;
  width: min(calc(100% - 2rem), 80rem);
  top: 0.75rem;
  display: flex;
  min-height: 5.2rem;
  margin: 0.75rem auto 0;
  padding: 0.85rem 1.1rem;
  border: 1px solid rgba(255, 255, 255, 0.88);
  border-radius: 1.35rem 0.7rem 1.35rem 1.35rem;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 254, 250, 0.82);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.topbar__brand,
.user-chip {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.topbar__brand strong,
.user-chip strong,
.user-chip small {
  display: block;
}

.topbar__brand small,
.user-chip small {
  margin-top: 0.2rem;
  color: var(--ink-500);
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.section-nav {
  display: flex;
  width: fit-content;
  max-width: calc(100% - 2rem);
  min-height: 3.35rem;
  margin: 0.7rem auto 0;
  padding: 0.3rem;
  border: 1px solid rgba(232, 224, 215, 0.88);
  border-radius: 999px;
  align-items: stretch;
  gap: 0.4rem;
  overflow-x: auto;
  background: rgba(255, 254, 250, 0.72);
  box-shadow: 0 9px 28px rgba(34, 31, 25, 0.05);
  backdrop-filter: blur(14px);
}

.section-nav__link {
  display: inline-flex;
  padding: 0.65rem 1rem;
  border: 0;
  border-radius: 999px;
  align-items: center;
  color: var(--ink-700);
  font-size: 0.92rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.section-nav__link:hover,
.section-nav__link.is-active {
  color: #fff;
  background: var(--ink-950);
}

.dashboard-main {
  width: min(100% - 2rem, 75rem);
  margin: 0 auto;
  padding: clamp(2.2rem, 5vw, 4.6rem) 0;
}

.dashboard-main--wide {
  width: min(100% - 2rem, 80rem);
}

.page-heading {
  display: flex;
  margin-bottom: 1.5rem;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
}

.page-heading__eyebrow {
  margin: 0 0 0.45rem;
  color: var(--brand-700);
  font-weight: 700;
}

.page-heading h1 {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.2rem);
  letter-spacing: -0.02em;
}

.page-heading p {
  margin: 0.65rem 0 0;
  color: var(--ink-700);
}

.notice-card {
  display: flex;
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid #cce8d8;
  border-radius: 0.85rem;
  align-items: flex-start;
  gap: 0.8rem;
  color: var(--success);
  background: var(--success-bg);
  line-height: 1.7;
}

.notice-card__icon {
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  flex: 0 0 auto;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: var(--success);
  font-weight: 800;
}

.stat-grid {
  display: grid;
  margin-top: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.stat-card,
.content-card {
  border: 1px solid var(--line);
  border-radius: 1.4rem 0.65rem 1.4rem 1.4rem;
  background: rgba(255, 254, 250, 0.86);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.stat-card {
  position: relative;
  padding: 1.25rem;
  overflow: hidden;
}

.stat-card::after {
  position: absolute;
  width: 4rem;
  height: 4rem;
  left: -1.8rem;
  bottom: -2rem;
  border-radius: 50%;
  background: var(--brand-100);
  content: "";
}

.stat-card__label {
  color: var(--ink-700);
  font-size: 0.92rem;
}

.stat-card__value {
  display: block;
  margin-top: 0.7rem;
  color: var(--brand-700);
  font-size: 2rem;
  font-weight: 800;
}

.content-card {
  margin-top: 1rem;
  padding: clamp(1.25rem, 4vw, 2rem);
}

.content-card h2 {
  margin: 0;
}

.content-card p {
  margin: 0.7rem 0 0;
  color: var(--ink-700);
  line-height: 1.8;
}

.section-heading {
  display: flex;
  margin-bottom: 1.25rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.section-heading h2,
.section-heading p {
  margin: 0;
}

.section-heading p {
  margin-top: 0.45rem;
}

.filter-grid {
  display: grid;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  grid-template-columns: minmax(14rem, 1.7fr) repeat(3, minmax(9rem, 1fr));
  gap: 0.8rem;
  background: #fbf8f3;
}

.field--compact {
  margin-top: 0;
}

.field--full {
  grid-column: 1 / -1;
}

.field--compact input,
.field--compact select {
  min-height: 2.8rem;
}

.candidate-grid {
  display: grid;
  margin-top: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
  gap: 1rem;
}

.candidate-card {
  padding: 1.15rem;
  border: 1px solid var(--line);
  border-radius: 1.5rem 0.55rem 1.5rem 1.5rem;
  background: rgba(255, 255, 255, 0.88);
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.candidate-card:hover {
  border-color: #d8c4ae;
  box-shadow: 0 12px 30px rgba(82, 55, 32, 0.08);
  transform: translateY(-3px);
}

.candidate-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.candidate-card__header h3 {
  margin: 0;
  font-size: 1.08rem;
}

.candidate-code {
  display: block;
  margin-top: 0.3rem;
  color: var(--ink-500);
  direction: ltr;
  font-size: 0.78rem;
  text-align: right;
}

.status-badge {
  display: inline-flex;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.status-badge[data-tone="info"] {
  color: #315f78;
  background: #e8f4fa;
}

.status-badge[data-tone="warning"] {
  color: var(--warning);
  background: var(--warning-bg);
}

.status-badge[data-tone="success"] {
  color: var(--success);
  background: var(--success-bg);
}

.status-badge[data-tone="neutral"] {
  color: #626762;
  background: #edf0ed;
}

.candidate-meta {
  display: grid;
  margin: 1rem 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.candidate-meta div {
  min-width: 0;
}

.candidate-meta dt {
  color: var(--ink-500);
  font-size: 0.76rem;
}

.candidate-meta dd {
  margin: 0.28rem 0 0;
  overflow: hidden;
  color: var(--ink-700);
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.candidate-card__actions {
  display: flex;
  padding-top: 0.9rem;
  border-top: 1px solid #eee7de;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.compact-select {
  min-height: 2.5rem;
  max-width: 10.5rem;
  padding: 0.5rem 0.65rem;
  border: 1px solid #d6ccc0;
  border-radius: 0.55rem;
  color: var(--ink-700);
  background: #fff;
}

.secondary-button--small {
  min-height: 2.5rem;
  margin-inline-start: auto;
  padding: 0.5rem 0.7rem;
  font-size: 0.84rem;
}

.text-button {
  display: inline-flex;
  padding: 0.45rem 0.35rem;
  border: 0;
  align-items: center;
  color: var(--brand-700);
  background: transparent;
  cursor: pointer;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
}

.text-button:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

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

.empty-state {
  margin-top: 1.25rem;
  padding: 2rem 1rem;
  border: 1px dashed #d8cbbb;
  border-radius: 0.85rem;
  color: var(--ink-700);
  background: #fbf8f3;
  text-align: center;
}

.empty-state strong {
  display: block;
  color: var(--ink-900);
  font-size: 1.05rem;
}

.empty-state p {
  margin: 0.45rem 0 0;
}

.empty-state .secondary-button {
  margin-top: 1rem;
}

.form-panel {
  border-color: #e2c6ae;
  scroll-margin-top: 6rem;
}

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

.form-actions {
  display: flex;
  margin-top: 1.4rem;
  grid-column: 1 / -1;
  align-items: center;
  gap: 0.7rem;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.data-table th,
.data-table td {
  padding: 0.9rem 0.75rem;
  border-bottom: 1px solid #eee7de;
  text-align: right;
  vertical-align: middle;
  white-space: nowrap;
}

.data-table th {
  color: var(--ink-500);
  background: #fbf8f3;
  font-size: 0.8rem;
}

.data-table tbody tr:hover {
  background: #fffaf5;
}

.table-subtext {
  display: block;
  margin-top: 0.25rem;
  color: var(--ink-500);
  direction: ltr;
  text-align: right;
}

.table-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.back-link {
  display: inline-flex;
  margin-bottom: 1.2rem;
  color: var(--ink-700);
  font-size: 0.9rem;
}

.candidate-hero {
  display: flex;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: 1.1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: linear-gradient(135deg, #fffdf9, #fff3e7);
  box-shadow: 0 12px 38px rgba(82, 55, 32, 0.07);
}

.candidate-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}

.candidate-hero p:last-child {
  margin: 0.55rem 0 0;
  color: var(--ink-700);
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.details-grid {
  display: grid;
  margin-top: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.detail-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 0.85rem;
  background: var(--paper);
}

.detail-card span {
  display: block;
  color: var(--ink-500);
  font-size: 0.78rem;
}

.detail-card strong {
  display: block;
  margin-top: 0.4rem;
  overflow-wrap: anywhere;
}

.answers-grid {
  display: grid;
  margin: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
}

.answer-item {
  padding: 0.9rem;
  border: 1px solid #eee7de;
  border-radius: 0.7rem;
  background: #fff;
}

.answer-item dt {
  color: var(--ink-500);
  font-size: 0.82rem;
}

.answer-item dd {
  margin: 0.45rem 0 0;
  overflow-wrap: anywhere;
  line-height: 1.65;
}

.legacy-label {
  display: inline-flex;
  padding: 0.18rem 0.4rem;
  border-radius: 999px;
  color: var(--warning);
  background: var(--warning-bg);
  font-size: 0.68rem;
}

.empty-inline {
  grid-column: 1 / -1;
  color: var(--ink-500);
}

.attachments-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0.7rem;
}

/* الوحدات التشغيلية: التقييمات والمقابلات والرواتب والإدارة. */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: 1rem;
}

.module-card {
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 1.35rem 0.55rem 1.35rem 1.35rem;
  background: #fff;
}

.module-card h3,
.module-card p {
  margin: 0;
}

.module-card p {
  margin-top: 0.45rem;
  color: var(--ink-500);
  line-height: 1.7;
}

.module-card__actions {
  display: flex;
  margin-top: 1rem;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.score-pill {
  display: inline-flex;
  min-width: 4.2rem;
  min-height: 2.3rem;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: var(--brand-700);
  background: var(--brand-100);
  font-weight: 800;
}

.evaluation-form {
  display: grid;
  gap: 0.8rem;
}

.criterion-row {
  display: grid;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem 0.45rem 1rem 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(9rem, 0.38fr);
  align-items: center;
  gap: 1rem;
  background: #fff;
}

.criterion-row h3,
.criterion-row p {
  margin: 0;
}

.criterion-row p {
  margin-top: 0.35rem;
  color: var(--ink-500);
  font-size: 0.86rem;
}

.score-control {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.score-control input {
  width: 100%;
  min-height: 2.8rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid #ddd6cc;
  border-radius: 0.75rem;
}

.toolbar {
  display: flex;
  margin-bottom: 1rem;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.toolbar .field {
  min-width: min(100%, 18rem);
  margin-top: 0;
}

.inline-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.summary-strip {
  display: grid;
  margin: 1rem 0;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.75rem;
}

.summary-strip > div {
  padding: 0.9rem;
  border: 1px solid var(--line);
  border-radius: 0.9rem;
  background: #fff;
}

.summary-strip span,
.summary-strip strong {
  display: block;
}

.summary-strip span {
  color: var(--ink-500);
  font-size: 0.78rem;
}

.summary-strip strong {
  margin-top: 0.35rem;
  font-size: 1.18rem;
}

.salary-result {
  padding: clamp(1.25rem, 4vw, 2rem);
  border-radius: 1.6rem 0.65rem 1.6rem 1.6rem;
  color: #fff;
  background: linear-gradient(135deg, var(--ink-950), #4a2b1e);
}

.salary-result .summary-strip > div {
  border-color: rgba(255, 255, 255, 0.13);
  background: rgba(255, 255, 255, 0.07);
}

.salary-result .summary-strip span {
  color: rgba(255, 255, 255, 0.68);
}

.salary-result__net {
  margin: 0.8rem 0 0;
  color: var(--brand-500);
  font-size: clamp(2.2rem, 6vw, 4.5rem);
  font-weight: 400;
}

/* ── The salary calculator's own scale ──────────────────────────────────────────────────────────
   HR asked on 2026-08-25 for this page to be smaller and quieter: it is filled in once per employee,
   forty times in an afternoon, and the design system's default scale — a 3.2rem heading, 3.15rem
   fields, a 4.5rem net figure — made a page that had to be scrolled to enter one month.

   Scoped to `.salary-page` rather than applied to the system, because every other HR page is a list
   or a form somebody meets once, where that scale is the point. Only spacing and type size change
   here; the palette, the radii and the components are the system's. */
.salary-page .page-heading {
  margin-bottom: 1rem;
  align-items: center;
}

.salary-page .page-heading__eyebrow {
  margin-bottom: 0.15rem;
  font-size: 0.78rem;
}

.salary-page .page-heading h1 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
}

.salary-page .page-heading p {
  margin-top: 0.2rem;
  color: var(--ink-500);
  font-size: 0.84rem;
}

.salary-page .content-card {
  margin-top: 0.8rem;
  padding: clamp(0.9rem, 2vw, 1.35rem);
  border-radius: 1rem 0.5rem 1rem 1rem;
}

.salary-page .content-card h2 {
  font-size: 1.02rem;
}

.salary-page .section-heading {
  margin-bottom: 0.75rem;
}

.salary-page .section-heading p {
  margin-top: 0.2rem;
  font-size: 0.8rem;
}

/* Auto-fit rather than the two fixed columns: the employee is a full-width row of its own — the
   name plus the salary plus the working basis is the longest text on the page and a narrow select
   clips it — and the five numbers fill one row beneath. The same rule drops to fewer columns on a
   narrow screen without a media query. */
.salary-page .data-form {
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0 0.7rem;
}

.salary-page .field {
  margin-top: 0.55rem;
}


.salary-page .field label {
  margin-bottom: 0.25rem;
  font-size: 0.8rem;
  font-weight: 600;
}

.salary-page .field input,
.salary-page .field select {
  min-height: 2.45rem;
  padding: 0.4rem 0.65rem;
  border-radius: 0.6rem 0.35rem 0.6rem 0.6rem;
  font-size: 0.92rem;
}

.salary-page .field-hint {
  margin-top: 0.2rem;
  font-size: 0.74rem;
}

/* The switch and the two buttons on one line: nothing between the last field and the action. */
.salary-page .salary-form-footer {
  display: flex;
  margin-top: 1rem;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.salary-page .salary-form-footer .modern-switch {
  margin: 0;
  font-size: 0.85rem;
}

.salary-page .salary-form-footer .form-actions {
  margin: 0;
}

.salary-page .form-actions .primary-button,
.salary-page .form-actions .secondary-button {
  padding: 0.5rem 1.1rem;
  font-size: 0.88rem;
}

/* ── The result panel ── */
.salary-page .salary-result {
  margin-top: 0.8rem;
  padding: clamp(0.9rem, 2vw, 1.3rem);
  border-radius: 1.1rem 0.5rem 1.1rem 1.1rem;
}

/* The net beside its label instead of under it, which is most of the height the panel used to take. */
.salary-page .salary-result__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}

.salary-page .salary-result__head #result-title {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.78rem;
}

.salary-page .salary-result__label {
  margin: 0.2rem 0 0;
  font-size: 0.95rem;
  font-weight: 600;
}

.salary-page .salary-result__net {
  margin: 0;
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.salary-page .salary-result .summary-strip {
  margin: 0.85rem 0 0;
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
  gap: 0.45rem;
}

.salary-page .salary-result .summary-strip > div {
  padding: 0.5rem 0.6rem;
  border-radius: 0.55rem;
}

.salary-page .salary-result .summary-strip span {
  font-size: 0.7rem;
}

.salary-page .salary-result .summary-strip strong {
  font-size: 0.9rem;
  font-weight: 600;
}

.salary-page .salary-result .table-wrap {
  margin-top: 0.85rem;
}

/* `.data-table` is built for a light card: its row headers carry a near-white background and grey
   text, which inside this dark panel read as a pale stripe down the middle of the figures. On the
   ledger the label is a label, not a heading — so it takes the panel's own muted white and the rules
   between rows become faint white instead of the light-card cream. */
.salary-page .data-table--ledger {
  font-size: 0.86rem;
}

.salary-page .data-table--ledger th,
.salary-page .data-table--ledger td {
  padding: 0.42rem 0.1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  white-space: normal;
}

.salary-page .data-table--ledger th {
  background: none;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.86rem;
  font-weight: 400;
}

.salary-page .data-table--ledger td {
  width: 1%;
  text-align: left;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.salary-page .data-table--ledger tr:hover {
  background: none;
}

/* The two lines anybody actually reads: the figure the month was worked out from, and the result. */
.salary-page .data-table--ledger .is-subtotal th,
.salary-page .data-table--ledger .is-subtotal td {
  border-bottom-color: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: 600;
}

.salary-page .data-table--ledger .is-total th,
.salary-page .data-table--ledger .is-total td {
  border-bottom: none;
  color: var(--brand-500);
  font-size: 0.95rem;
  font-weight: 700;
}

.salary-page .salary-result .inline-actions,
.salary-page .salary-result .muted-text {
  margin-top: 0.85rem;
}

.salary-page .salary-result .muted-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.78rem;
}

.salary-page .salary-result .secondary-button {
  padding: 0.45rem 1rem;
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.86rem;
}

.salary-page .data-table:not(.data-table--ledger) {
  font-size: 0.84rem;
}

.salary-page .data-table:not(.data-table--ledger) th,
.salary-page .data-table:not(.data-table--ledger) td {
  padding: 0.5rem 0.6rem;
}

.section-stack {
  display: grid;
  gap: 1rem;
}

.status-select {
  min-height: 2.65rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 0.7rem;
  background: #fff;
}

.danger-button {
  display: inline-flex;
  min-height: 2.65rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid #efcaca;
  border-radius: 0.75rem;
  align-items: center;
  justify-content: center;
  color: var(--danger);
  background: var(--danger-bg);
  cursor: pointer;
  font-weight: 700;
}

.danger-button:hover:not(:disabled) {
  border-color: var(--danger);
}

.field--first {
  margin-top: 0.4rem;
}

.option-editor__heading {
  display: flex;
  margin: 0.35rem 0 0.8rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.option-editor__heading strong,
.option-editor__heading span {
  display: block;
}

.option-editor__heading span {
  margin-top: 0.3rem;
  color: var(--ink-500);
  font-size: 0.82rem;
}

.option-editor {
  display: grid;
  gap: 0.65rem;
}

.option-editor__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
}

.option-editor__row input {
  margin: 0;
}

.option-editor__row .danger-button {
  min-height: 3.15rem;
}

.advanced-settings {
  margin-top: 1.2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1rem 0.45rem 1rem 1rem;
  background: #fbf8f3;
}

.advanced-settings summary {
  color: var(--brand-700);
  cursor: pointer;
  font-weight: 800;
}

.advanced-settings[open] summary {
  margin-bottom: 0.6rem;
}

.muted-text {
  color: var(--ink-500);
}

.ltr-value {
  direction: ltr;
  text-align: right;
}

.print-only {
  display: none;
}

@media print {
  body {
    background: #fff;
  }

  body::before,
  .no-print,
  .topbar,
  .section-nav {
    display: none !important;
  }

  .print-only {
    display: block;
  }

  .dashboard-main {
    width: 100%;
    padding: 0;
  }

  .content-card,
  .candidate-hero {
    box-shadow: none;
    break-inside: avoid;
  }
}

@media (max-width: 680px) {
  .criterion-row {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }
}

.attachment-button {
  min-height: 3.4rem;
  padding: 0.8rem;
  border: 1px solid #ddc9b6;
  border-radius: 0.7rem;
  color: var(--brand-700);
  background: #fff9f3;
  cursor: pointer;
  font-weight: 700;
}

.attachment-button:hover:not(:disabled) {
  border-color: var(--brand-500);
  background: var(--brand-100);
}

.attachment-button:disabled {
  border-color: var(--line);
  color: var(--ink-500);
  background: #f4f2ef;
  cursor: not-allowed;
}

.jobs-hero {
  position: relative;
  display: flex;
  min-height: 20rem;
  padding: clamp(2rem, 6vw, 4.5rem);
  overflow: hidden;
  border-radius: 2.5rem 0.8rem 2.5rem 2.5rem;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  color: #fff;
  background:
    radial-gradient(
      circle at 12% 15%,
      rgba(241, 137, 39, 0.42),
      transparent 18rem
    ),
    linear-gradient(125deg, #161a17, #2c332e 62%, #823719);
  box-shadow: 0 35px 85px rgba(25, 29, 26, 0.2);
}

.jobs-hero::before,
.jobs-hero::after {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.13);
  content: "";
}

.jobs-hero::before {
  width: 18rem;
  height: 18rem;
  top: -7rem;
  left: -4rem;
  border-radius: 44% 56% 38% 62% / 52% 39% 61% 48%;
  transform: rotate(32deg);
}

.jobs-hero::after {
  width: 24rem;
  height: 24rem;
  right: -12rem;
  bottom: -14rem;
  border-radius: 50%;
}

.jobs-hero__content,
.jobs-hero > .primary-button {
  position: relative;
  z-index: 1;
}

.jobs-hero .page-heading__eyebrow {
  color: var(--brand-200);
}

.jobs-hero h1 {
  max-width: 46rem;
  margin: 0;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.03;
}

.jobs-hero h1 span {
  color: var(--brand-500);
}

.jobs-hero p:last-child {
  max-width: 42rem;
  margin: 1.3rem 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.02rem;
  line-height: 1.8;
}

.jobs-hero .primary-button {
  border-color: var(--brand-500);
  background: var(--brand-500);
  box-shadow: 0 18px 40px rgba(241, 137, 39, 0.25);
}

.jobs-metrics {
  display: grid;
  margin: -1.7rem 2rem 0;
  position: relative;
  z-index: 2;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.jobs-metrics > div {
  display: flex;
  min-height: 6rem;
  padding: 1rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 1.2rem 0.5rem 1.2rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  background: rgba(255, 254, 250, 0.9);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}

.jobs-metrics span {
  color: var(--ink-500);
  font-size: 0.82rem;
}

.jobs-metrics strong {
  color: var(--brand-700);
  font-size: 2rem;
  font-weight: 400;
}

.jobs-workspace {
  display: grid;
  margin-top: 1.4rem;
  grid-template-columns: minmax(19rem, 0.8fr) minmax(24rem, 1.2fr);
  gap: 1rem;
}

.jobs-column,
.qualifications-column {
  min-width: 0;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border: 1px solid var(--line);
  background: rgba(255, 254, 250, 0.8);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(12px);
}

.jobs-column {
  border-radius: 2rem 0.7rem 2rem 2rem;
}

.qualifications-column {
  border-radius: 0.7rem 2rem 2rem 2rem;
}

.workspace-heading {
  display: flex;
  min-height: 4.5rem;
  margin-bottom: 1.2rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.workspace-heading > div {
  min-width: 0;
}

.workspace-heading h2,
.workspace-heading p {
  margin: 0;
}

.workspace-heading h2 {
  overflow: hidden;
  font-size: 1.45rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workspace-heading p {
  margin-top: 0.35rem;
  color: var(--ink-500);
  font-size: 0.85rem;
  line-height: 1.6;
}

.workspace-kicker {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--brand-600);
  direction: ltr;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-align: right;
}

.round-add-button {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: var(--ink-950);
  cursor: pointer;
  font-size: 1.45rem;
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.round-add-button:hover {
  background: var(--brand-600);
  transform: rotate(90deg);
}

.jobs-list,
.qualifications-list {
  display: grid;
  gap: 0.75rem;
}

.job-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 1.3rem 0.45rem 1.3rem 1.3rem;
  background: #fff;
  transition:
    border-color 160ms ease,
    transform 160ms ease,
    box-shadow 160ms ease;
}

.job-card:hover,
.job-card.is-selected {
  border-color: var(--brand-500);
  box-shadow: 0 14px 30px rgba(81, 49, 25, 0.09);
  transform: translateY(-2px);
}

.job-card.is-selected {
  background: linear-gradient(145deg, #fff, #fff7ee);
}

.job-card__select {
  width: 100%;
  padding: 1rem;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  text-align: right;
}

.job-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.job-ordinal {
  color: var(--brand-500);
  direction: ltr;
  font-size: 0.76rem;
  letter-spacing: 0.12em;
}

.job-card h3 {
  margin: 1rem 0 0.35rem;
  font-size: 1.15rem;
}

.job-card p {
  display: -webkit-box;
  min-height: 2.8rem;
  margin: 0;
  overflow: hidden;
  color: var(--ink-500);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 0.82rem;
  line-height: 1.7;
}

.job-card__count {
  display: block;
  margin-top: 0.8rem;
  color: var(--ink-700);
  font-size: 0.78rem;
}

.job-card__actions {
  display: flex;
  padding: 0.45rem 0.75rem;
  border-top: 1px solid #eee8df;
  align-items: center;
  gap: 0.65rem;
}

.live-pill {
  display: inline-flex;
  padding: 0.27rem 0.55rem;
  border-radius: 999px;
  color: #60655f;
  background: #edf0ed;
  font-size: 0.7rem;
  white-space: nowrap;
}

.live-pill[data-active="true"] {
  color: var(--success);
  background: var(--success-bg);
}

.qualification-row {
  display: flex;
  min-height: 5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--line);
  border-radius: 1.1rem 0.4rem 1.1rem 1.1rem;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
}

.qualification-row__main,
.qualification-row__actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.qualification-marker {
  width: 0.55rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: linear-gradient(var(--brand-500), var(--brand-700));
}

.qualification-row h3 {
  margin: 0 0 0.35rem;
  font-size: 0.98rem;
}

.editor-dialog {
  width: min(calc(100% - 2rem), 38rem);
  max-height: calc(100vh - 2rem);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 2rem 0.75rem 2rem 2rem;
  color: var(--ink-900);
  background: transparent;
}

.editor-dialog::backdrop {
  background: rgba(18, 21, 18, 0.62);
  backdrop-filter: blur(8px);
}

.editor-dialog__card {
  max-height: calc(100vh - 2rem);
  padding: clamp(1.4rem, 5vw, 2.4rem);
  overflow-y: auto;
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: inherit;
  background: rgba(255, 254, 250, 0.97);
  box-shadow: 0 35px 100px rgba(0, 0, 0, 0.25);
}

.dialog-heading {
  display: flex;
  margin-bottom: 1.4rem;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.dialog-heading span {
  color: var(--brand-600);
  font-size: 0.78rem;
}

.dialog-heading h2 {
  margin: 0.4rem 0 0;
  font-size: 1.8rem;
}

.dialog-close {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 50%;
  place-items: center;
  color: var(--ink-700);
  background: #fff;
  cursor: pointer;
  font-size: 1.35rem;
}

.modern-switch {
  display: flex;
  margin-top: 1.3rem;
  align-items: center;
  gap: 0.75rem;
  color: var(--ink-700);
  cursor: pointer;
  font-size: 0.9rem;
}

.modern-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.modern-switch span {
  position: relative;
  width: 3rem;
  height: 1.65rem;
  flex: 0 0 auto;
  border-radius: 999px;
  background: #cbd0cb;
  transition: background 160ms ease;
}

.modern-switch span::after {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  top: 0.225rem;
  right: 0.25rem;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.18);
  content: "";
  transition: transform 160ms ease;
}

.modern-switch input:checked + span {
  background: var(--brand-600);
}

.modern-switch input:checked + span::after {
  transform: translateX(-1.3rem);
}

.modern-switch input:focus-visible + span {
  outline: 3px solid rgba(241, 137, 39, 0.25);
  outline-offset: 2px;
}

@media (max-width: 820px) {
  .auth-layout {
    display: block;
    padding: 0.75rem;
  }

  .auth-brand {
    min-height: auto;
    padding: 2rem 1.25rem;
    border-radius: 1.6rem 0.7rem 1.6rem 1.6rem;
  }

  .brand-content h1 {
    margin: 1.2rem 0 0.6rem;
    font-size: 1.7rem;
  }

  .brand-content p,
  .brand-chip {
    display: none;
  }

  .auth-main {
    padding: 1.25rem;
  }

  .auth-card {
    margin-top: -0.5rem;
  }

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

  .filter-grid,
  .data-form,
  .details-grid,
  .answers-grid {
    grid-template-columns: 1fr;
  }

  .candidate-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .hero-actions .compact-select,
  .hero-actions .primary-button {
    width: 100%;
    max-width: none;
  }

  .user-chip {
    display: none;
  }

  .jobs-hero {
    min-height: 24rem;
    align-items: flex-start;
    flex-direction: column;
    justify-content: flex-end;
  }

  .jobs-metrics {
    margin-inline: 0.75rem;
  }

  .jobs-workspace {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .topbar {
    width: calc(100% - 1rem);
    top: 0.35rem;
    margin-top: 0.35rem;
  }

  .topbar__brand small {
    display: none;
  }

  .brand-mark {
    width: 2.85rem;
    height: 2.85rem;
  }

  .brand-logo--topbar {
    width: 7.5rem;
  }

  .brand-logo--public {
    width: 8.25rem;
  }

  .secondary-button {
    min-height: 2.8rem;
    padding: 0.65rem 0.8rem;
  }

  .page-heading,
  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .page-heading .primary-button {
    width: 100%;
  }

  .candidate-meta {
    grid-template-columns: 1fr;
  }

  .jobs-hero {
    min-height: 27rem;
    padding: 1.5rem;
    border-radius: 1.8rem 0.6rem 1.8rem 1.8rem;
  }

  .jobs-hero h1 {
    font-size: clamp(2.2rem, 14vw, 3.3rem);
  }

  .jobs-hero .primary-button {
    width: 100%;
  }

  .jobs-metrics {
    margin-top: -1rem;
    grid-template-columns: 1fr;
  }

  .jobs-metrics > div {
    min-height: 4.5rem;
  }

  .qualification-row {
    align-items: stretch;
    flex-direction: column;
  }

  .qualification-row__actions {
    padding-top: 0.45rem;
    border-top: 1px solid #eee8df;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Public application — editorial, warm and intentionally distinct from dashboards. */
.public-application-page {
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(241, 137, 39, 0.2),
      transparent 26rem
    ),
    linear-gradient(180deg, #fbf8f2 0, #f4f0e8 50%, #fbfaf6 100%);
}

.public-application-page::before {
  width: 40rem;
  height: 40rem;
  top: 18rem;
  left: -27rem;
  border-color: rgba(121, 50, 23, 0.15);
}

.public-topbar,
.public-footer {
  display: flex;
  width: min(100% - 2rem, 86rem);
  margin-inline: auto;
  align-items: center;
  justify-content: space-between;
}

.public-topbar {
  min-height: 7rem;
}

.public-brand {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--ink-900);
  text-decoration: none;
}

.public-brand > span:last-child {
  display: grid;
}

.public-brand strong {
  font-size: 1.08rem;
}

.public-brand small {
  color: var(--ink-500);
}

.public-login-link {
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--brand-500);
  font-weight: 700;
  text-decoration: none;
}

.application-main {
  width: min(100% - 2rem, 86rem);
  margin: 0 auto;
}

.application-hero {
  position: relative;
  display: grid;
  min-height: 37rem;
  padding: clamp(2rem, 6vw, 5.8rem);
  overflow: hidden;
  border-radius: 4.5rem 1.25rem 4.5rem 4.5rem;
  color: #fff;
  background:
    radial-gradient(
      circle at 10% 110%,
      rgba(255, 198, 135, 0.35),
      transparent 32rem
    ),
    linear-gradient(125deg, #713018 0%, #ae4720 48%, #e77b29 100%);
  box-shadow: 0 36px 110px rgba(112, 47, 23, 0.24);
  grid-template-columns: minmax(0, 1fr) 17rem;
  align-items: end;
  gap: 4rem;
}

.application-hero::before,
.application-hero::after {
  position: absolute;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 45% 55% 43% 57% / 54% 38% 62% 46%;
}

.application-hero::before {
  width: 37rem;
  height: 37rem;
  top: -22rem;
  left: -10rem;
  transform: rotate(20deg);
}

.application-hero::after {
  width: 17rem;
  height: 17rem;
  right: 42%;
  bottom: -13rem;
}

.application-hero__copy,
.application-hero__seal {
  position: relative;
  z-index: 1;
}

.application-kicker {
  display: flex;
  margin: 0 0 1.5rem;
  align-items: center;
  gap: 0.7rem;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 700;
}

.application-kicker span {
  width: 2.8rem;
  height: 1px;
  background: #fff;
}

.application-hero h1 {
  max-width: 50rem;
  margin: 0;
  font-size: clamp(3.3rem, 8vw, 7.4rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.application-hero h1 em {
  color: #ffd6ae;
  font-style: normal;
}

.application-hero__copy > p:last-child {
  max-width: 38rem;
  margin: 2rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.08rem;
  line-height: 1.9;
}

.application-hero__seal {
  display: grid;
  min-height: 17rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  align-content: center;
  justify-items: center;
  text-align: center;
  background: rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(12px);
  transform: rotate(-4deg);
}

.application-hero__seal > span {
  display: grid;
  width: 3rem;
  height: 3rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  place-items: center;
  color: var(--brand-800);
  background: #fff;
}

.application-hero__seal strong {
  font-size: 1.25rem;
}
.application-hero__seal small {
  color: rgba(255, 255, 255, 0.72);
}

.application-message {
  margin: 1.5rem 0;
}

.application-state {
  display: grid;
  min-height: 17rem;
  margin: 2rem 0;
  border: 1px solid var(--line);
  border-radius: 2rem;
  place-items: center;
  align-content: center;
  gap: 1rem;
  background: rgba(255, 254, 250, 0.75);
}

.application-loader {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid var(--brand-100);
  border-top-color: var(--brand-600);
  border-radius: 50%;
  animation: application-spin 0.8s linear infinite;
}

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

.application-state--empty span {
  color: var(--brand-600);
  font-size: 2rem;
}
.application-state--empty h2 {
  margin: 0;
  font-size: 2rem;
}
.application-state--empty p {
  margin: 0;
  color: var(--ink-500);
}

.application-layout {
  display: grid;
  margin: 2.5rem 0 5rem;
  grid-template-columns: minmax(15rem, 0.31fr) minmax(0, 0.69fr);
  gap: 1.25rem;
  align-items: start;
}

.application-rail {
  min-height: 31rem;
}

.application-rail__sticky {
  position: sticky;
  top: 1rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid rgba(255, 255, 255, 0.85);
  border-radius: 1rem 3rem 3rem 3rem;
  background: rgba(255, 254, 250, 0.72);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
}

.rail-index,
.workspace-kicker {
  color: var(--brand-600);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.application-rail h2 {
  margin: 2rem 0 0.75rem;
  font-size: 2rem;
}
.application-rail p {
  margin: 0;
  color: var(--ink-700);
  line-height: 1.85;
}

.completion-meter {
  margin: 2rem 0;
  padding: 1.2rem 0;
  border-block: 1px solid var(--line);
}

.completion-meter > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.completion-meter small {
  color: var(--ink-500);
}
.completion-track {
  display: block;
  height: 0.42rem;
  margin-top: 1rem;
  overflow: hidden;
  border-radius: 99px;
  background: #e9e3da;
}
.completion-track i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-700), var(--brand-500));
  transition: width 280ms ease;
}

.application-notes {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 1rem;
}
.application-notes li {
  display: grid;
  color: var(--ink-700);
  grid-template-columns: 2rem 1fr;
  gap: 0.6rem;
}
.application-notes span {
  color: var(--brand-600);
  font-size: 0.75rem;
  font-weight: 800;
}

.application-form-card {
  padding: clamp(1.4rem, 4vw, 3.5rem);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 3.5rem 1rem 3.5rem 3.5rem;
  background: rgba(255, 254, 250, 0.91);
  box-shadow: var(--shadow);
}

.honeypot-field {
  position: absolute !important;
  width: 1px;
  height: 1px;
  left: -10000px;
  overflow: hidden;
}

.apply-section {
  min-width: 0;
  margin: 0;
  padding: 0 0 3.5rem;
  border: 0;
}

.apply-section + .apply-section,
[data-dynamic-sections] + .apply-section {
  padding-top: 3.5rem;
  border-top: 1px solid var(--line);
}

[data-dynamic-sections] .apply-section:not(:first-child) {
  padding-top: 3.5rem;
  border-top: 1px solid var(--line);
}

.apply-section legend {
  display: flex;
  width: 100%;
  margin-bottom: 2rem;
  align-items: center;
  gap: 1rem;
}

.apply-section legend > span {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid var(--brand-200);
  border-radius: 50%;
  place-items: center;
  color: var(--brand-700);
  font-size: 0.78rem;
  background: var(--brand-100);
}

.apply-section legend strong {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.application-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.35rem;
}

.application-fields-grid .field {
  margin: 0;
}
.application-fields-grid .field--wide,
.application-fields-grid .dynamic-field:has(textarea),
.application-fields-grid .dynamic-field:has(.choice-grid) {
  grid-column: 1 / -1;
}

.application-form-card
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.application-form-card select,
.application-form-card textarea {
  min-height: 3.65rem;
  border: 1px solid #ddd4c9;
  border-radius: 1rem 0.45rem 1rem 1rem;
  background: #fff;
}

.application-form-card textarea {
  min-height: 8rem;
}
.required-mark,
.optional-mark {
  display: inline-flex;
  margin-inline-start: 0.4rem;
  padding: 0.12rem 0.48rem;
  border-radius: 99px;
  color: var(--brand-700);
  background: var(--brand-100);
  font-size: 0.68rem;
  font-weight: 700;
  vertical-align: middle;
}
.optional-mark {
  color: var(--ink-500);
  background: #efede8;
}
.field-hint,
.job-preview {
  display: block;
  margin-top: 0.55rem;
  color: var(--ink-500);
  line-height: 1.7;
}
.job-preview {
  padding: 0.8rem 1rem;
  border-inline-start: 2px solid var(--brand-500);
  background: #faf6ef;
}

.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.75rem;
}

.choice-card,
.rating-group label {
  position: relative;
  cursor: pointer;
}

.choice-card input,
.rating-group input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.choice-card span,
.rating-group span {
  display: grid;
  min-height: 3.35rem;
  padding: 0.75rem 1rem;
  border: 1px solid #ddd4c9;
  border-radius: 1rem 0.45rem 1rem 1rem;
  place-items: center;
  color: var(--ink-700);
  background: #fff;
  transition: 160ms ease;
}

.choice-card input:checked + span,
.rating-group input:checked + span {
  border-color: var(--brand-600);
  color: var(--brand-800);
  background: var(--brand-100);
  box-shadow: inset 0 0 0 1px var(--brand-600);
}

.choice-card input:focus-visible + span,
.rating-group input:focus-visible + span {
  outline: 3px solid rgba(241, 137, 39, 0.28);
  outline-offset: 2px;
}

.rating-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}
.rating-group label {
  flex: 1 1 3.2rem;
}
.rating-group span {
  min-width: 3.2rem;
}

.section-intro {
  margin: -0.8rem 0 2rem;
  color: var(--ink-500);
}
.file-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.file-field {
  padding: 1.2rem;
  border: 1px dashed #d7c7b8;
  border-radius: 1.25rem 0.5rem 1.25rem 1.25rem;
  background: #fcfaf6;
}
.file-field label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}
.file-field small {
  color: var(--ink-500);
}

.file-picker {
  position: relative;
  margin: 1rem 0 0.7rem;
}

.file-picker input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.file-picker__control {
  display: grid !important;
  min-height: 6.2rem;
  padding: 0.85rem;
  border: 1px solid #dfd5c9;
  border-radius: 1rem 0.42rem 1rem 1rem;
  align-content: center;
  justify-items: start !important;
  gap: 0.7rem !important;
  background: #fff;
  cursor: pointer;
  transition: 160ms ease;
}

.file-picker__button {
  display: inline-flex;
  min-height: 2.45rem;
  padding: 0.55rem 0.8rem;
  border-radius: 0.7rem;
  align-items: center;
  color: var(--brand-800);
  background: var(--brand-100);
  font-weight: 800;
}

.file-picker__name {
  width: 100%;
  overflow: hidden;
  color: var(--ink-500);
  font-size: 0.82rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-picker input:focus-visible + .file-picker__control {
  outline: 3px solid rgba(241, 137, 39, 0.28);
  outline-offset: 2px;
}

.file-picker--selected .file-picker__control {
  border-color: var(--brand-600);
  background: #fffaf3;
  box-shadow: inset 0 0 0 1px var(--brand-600);
}

.file-picker--selected .file-picker__name {
  color: var(--success);
  font-weight: 800;
}

.application-submit-zone {
  padding: clamp(1.3rem, 3vw, 2rem);
  border-radius: 1rem 2rem 2rem 2rem;
  color: #fff;
  background: var(--ink-950);
}

.privacy-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  line-height: 1.75;
  cursor: pointer;
}
.privacy-consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.35rem;
  accent-color: var(--brand-500);
  flex: 0 0 auto;
}
.captcha-wrap {
  min-height: 4.5rem;
  margin: 1.25rem 0;
}
.captcha-setup {
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 207, 132, 0.35);
  border-radius: 0.8rem;
  color: #ffdeb2;
  background: rgba(241, 137, 39, 0.12);
}
.application-submit {
  display: flex;
  width: 100%;
  min-height: 4.5rem;
  padding: 1rem 1.35rem;
  border: 0;
  border-radius: 1rem 0.45rem 1rem 1rem;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-950);
  background: linear-gradient(110deg, #fff4e7, #f6a04b);
  cursor: pointer;
  font-weight: 800;
}
.application-submit i {
  display: grid;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: var(--brand-800);
  font-style: normal;
}
.application-submit:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}
.submit-assurance {
  display: block;
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.58);
  text-align: center;
}

.application-success {
  width: min(100%, 52rem);
  margin: 3rem auto 6rem;
  padding: clamp(2rem, 6vw, 5rem);
  border: 1px solid #e6dbce;
  border-radius: 4rem 1rem 4rem 4rem;
  text-align: center;
  background: #fffefa;
  box-shadow: var(--shadow);
}

.success-orbit {
  display: grid;
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.5rem;
  border: 1px solid var(--brand-200);
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: var(--brand-600);
  box-shadow: 0 0 0 0.8rem var(--brand-100);
  font-size: 1.6rem;
}
.application-success > p:first-of-type {
  margin: 0;
  color: var(--brand-700);
  font-weight: 800;
}
.application-success h2 {
  margin: 0.8rem 0 2rem;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.1;
}
.success-code {
  display: inline-grid;
  min-width: 15rem;
  padding: 1rem 2rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--canvas);
}
.success-code span {
  color: var(--ink-500);
  font-size: 0.8rem;
}
.success-code strong {
  color: var(--brand-700);
  font-size: 1.5rem;
  direction: ltr;
}
.application-success > p:last-child {
  max-width: 32rem;
  margin: 2rem auto 0;
  color: var(--ink-700);
}

.public-footer {
  min-height: 7rem;
  padding-block: 1.5rem;
  border-top: 1px solid var(--line);
  color: var(--ink-500);
  font-size: 0.88rem;
}
.jobs-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .application-hero {
    min-height: 33rem;
    grid-template-columns: 1fr;
  }
  .application-hero__seal {
    display: none;
  }
  .application-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .application-rail,
  .application-form-card {
    min-width: 0;
  }
  .application-rail {
    min-height: 0;
  }
  .application-rail__sticky {
    position: static;
  }
  .application-notes {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .public-topbar {
    min-height: 5.8rem;
  }
  .public-brand small {
    display: none;
  }
  .public-login-link {
    font-size: 0.82rem;
  }
  .application-main {
    width: min(100% - 1rem, 86rem);
  }
  .application-hero {
    min-height: 31rem;
    padding: 1.7rem;
    border-radius: 2.2rem 0.65rem 2.2rem 2.2rem;
  }
  .application-hero h1 {
    font-size: clamp(3rem, 16vw, 4.7rem);
  }
  .application-hero__copy > p:last-child {
    font-size: 0.96rem;
  }
  .application-layout {
    margin-top: 1rem;
  }
  .application-rail__sticky {
    border-radius: 0.7rem 2rem 2rem 2rem;
  }
  .application-notes {
    grid-template-columns: 1fr;
  }
  .application-form-card {
    padding: 1.15rem;
    border-radius: 2rem 0.65rem 2rem 2rem;
  }
  .application-fields-grid,
  .file-grid {
    grid-template-columns: 1fr;
  }
  .application-fields-grid .dynamic-field {
    grid-column: auto;
  }
  .option-editor__heading {
    align-items: stretch;
    flex-direction: column;
  }
  .option-editor__heading .secondary-button {
    width: 100%;
  }
  .apply-section {
    padding-bottom: 2.5rem;
  }
  .apply-section + .apply-section,
  [data-dynamic-sections] + .apply-section,
  [data-dynamic-sections] .apply-section:not(:first-child) {
    padding-top: 2.5rem;
  }
  .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .public-footer {
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 0.4rem;
  }
}

/* Application portal refresh — clear, calm and grounded in the association identity. */
.public-application-page {
  --application-radius: 2.25rem;
  background:
    radial-gradient(circle at 94% 4%, rgba(241, 137, 39, 0.12), transparent 24rem),
    linear-gradient(rgba(247, 245, 240, 0.965), rgba(247, 245, 240, 0.965)),
    url("../img/alehsan-pattern-orange.svg?v=2") top center / 56rem auto repeat;
}

.public-application-page::before {
  width: 32rem;
  height: 32rem;
  top: auto;
  right: -22rem;
  bottom: 7rem;
  left: auto;
  border-color: rgba(241, 137, 39, 0.15);
}

.public-topbar,
.public-footer,
.application-main {
  width: min(100% - 3rem, 82rem);
}

.public-topbar {
  min-height: 6.4rem;
  justify-content: flex-start;
}

.brand-logo--public {
  width: 13.5rem;
}

.public-login-link {
  display: inline-flex;
  min-height: 2.9rem;
  padding: 0.65rem 1rem;
  border: 1px solid #ddd8cf;
  border-radius: 999px;
  align-items: center;
  gap: 0.35rem;
  color: #575650;
  background: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  transition: border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.public-login-link:hover {
  border-color: var(--brand-500);
  color: var(--brand-700);
  transform: translateY(-1px);
}

.application-hero {
  display: grid;
  min-height: 27rem;
  padding: 0.75rem;
  border: 1px solid rgba(87, 86, 80, 0.12);
  border-radius: var(--application-radius);
  color: #575650;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 32px 90px rgba(57, 48, 39, 0.1);
  grid-template-columns: minmax(0, 1.18fr) minmax(21rem, 0.82fr);
  gap: 0;
  align-items: stretch;
}

.application-hero::before {
  z-index: 0;
  width: 17rem;
  height: 17rem;
  top: -10rem;
  right: -8rem;
  left: auto;
  border-color: rgba(241, 137, 39, 0.15);
  border-radius: 50%;
  transform: none;
}

.application-hero::after {
  display: none;
}

.application-hero__copy {
  display: flex;
  padding: clamp(2.5rem, 4.8vw, 4.35rem);
  flex-direction: column;
  justify-content: center;
}

.application-kicker {
  margin: 0 0 1.4rem;
  color: var(--brand-700);
  font-size: 0.88rem;
  font-weight: 800;
}

.application-kicker span {
  width: 2.35rem;
  background: var(--brand-500);
}

.application-hero h1 {
  max-width: 42rem;
  color: #575650;
  font-size: clamp(2.65rem, 4.7vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.application-hero h1 em {
  color: var(--brand-600);
}

.application-journey {
  display: flex;
  margin-top: 1.9rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.application-journey span {
  display: inline-flex;
  min-height: 2.7rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid #e6e0d8;
  border-radius: 0.85rem;
  align-items: center;
  gap: 0.55rem;
  color: #575650;
  background: #fbfaf7;
  font-size: 0.82rem;
}

.application-journey b {
  color: var(--brand-600);
  font-size: 0.7rem;
}

.application-hero__visual {
  position: relative;
  min-height: 25.5rem;
  overflow: hidden;
  border-radius: 1.7rem;
  color: #575650;
  background:
    radial-gradient(circle at 15% 18%, rgba(241, 137, 39, 0.2), transparent 14rem),
    linear-gradient(145deg, #fffaf3 0%, #fff2e4 55%, #ffe3c7 100%);
  isolation: isolate;
}

.application-hero__visual::after {
  position: absolute;
  z-index: -1;
  width: 15rem;
  height: 15rem;
  right: -6rem;
  bottom: -6rem;
  border: 1px solid rgba(241, 137, 39, 0.23);
  border-radius: 50%;
  content: "";
}

.application-hero__visual > img {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 100%;
  inset: 0;
  object-fit: cover;
  opacity: 0.45;
}

.application-hero__visual-copy {
  position: absolute;
  right: 1.5rem;
  bottom: clamp(1.5rem, 3vw, 2.5rem);
  left: 1.5rem;
  display: grid;
  justify-items: center;
  text-align: center;
}

.application-hero__visual-copy small {
  color: var(--brand-700);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

.application-hero__visual-copy strong {
  color: #575650;
  font-size: clamp(1.85rem, 2.8vw, 2.75rem);
  font-weight: 500;
  line-height: 1.1;
}

.application-hero__visual-mark {
  position: absolute;
  top: 2rem;
  left: 2rem;
  display: grid;
  width: 4.7rem;
  height: 4.7rem;
  overflow: hidden;
  border: 1px solid rgba(241, 137, 39, 0.24);
  border-radius: 50%;
  place-items: center;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(164, 67, 32, 0.12);
  backdrop-filter: blur(8px);
}

.application-hero__visual-mark img {
  width: 62%;
  height: 62%;
  object-fit: contain;
}

.application-state {
  margin: 1.5rem 0 3rem;
  border-color: rgba(87, 86, 80, 0.13);
  border-radius: var(--application-radius);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 18px 55px rgba(57, 48, 39, 0.06);
}

.application-layout {
  margin: 1.5rem 0 4.5rem;
  grid-template-columns: minmax(16.5rem, 0.3fr) minmax(0, 0.7fr);
  gap: 1rem;
}

.application-rail__sticky {
  overflow: hidden;
  padding: clamp(1.6rem, 3vw, 2.3rem);
  border: 0;
  border-radius: var(--application-radius);
  color: #fff;
  background:
    linear-gradient(rgba(38, 40, 37, 0.93), rgba(38, 40, 37, 0.96)),
    url("../img/alehsan-pattern-orange.svg?v=2") center / auto 100%;
  box-shadow: 0 22px 60px rgba(34, 35, 32, 0.17);
  backdrop-filter: none;
}

.application-rail__sticky::before {
  display: block;
  width: 2.5rem;
  height: 0.24rem;
  margin-bottom: 1.5rem;
  border-radius: 99px;
  background: var(--brand-500);
  content: "";
}

.rail-index {
  color: #f6a256;
  letter-spacing: 0;
}

.application-rail h2 {
  margin: 1rem 0 0.7rem;
  color: #fff;
  font-size: 2.15rem;
  font-weight: 400;
}

.application-rail p,
.application-notes li {
  color: rgba(255, 255, 255, 0.72);
}

.completion-meter {
  border-color: rgba(255, 255, 255, 0.13);
}

.completion-meter small {
  color: rgba(255, 255, 255, 0.52);
}

.completion-track {
  background: rgba(255, 255, 255, 0.12);
}

.completion-track i {
  background: linear-gradient(90deg, #f18927, #ffc17d);
}

.application-notes span {
  color: #f6a256;
}

.application-form-card {
  padding: clamp(1.5rem, 4vw, 3.35rem);
  border: 1px solid rgba(87, 86, 80, 0.12);
  border-radius: var(--application-radius);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 24px 72px rgba(57, 48, 39, 0.08);
}

.public-application-page .honeypot-field {
  width: 1px;
  height: 1px;
  right: 0;
  left: auto;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

.apply-section + .apply-section,
[data-dynamic-sections] + .apply-section,
[data-dynamic-sections] .apply-section:not(:first-child) {
  border-color: #ece7df;
}

.apply-section legend {
  margin-bottom: 1.8rem;
}

.apply-section legend > span {
  width: 2.65rem;
  height: 2.65rem;
  border: 0;
  border-radius: 0.85rem;
  color: #fff;
  background: linear-gradient(145deg, var(--brand-600), var(--brand-500));
  box-shadow: 0 8px 20px rgba(207, 96, 40, 0.2);
}

.apply-section legend strong {
  color: #575650;
  font-weight: 400;
}

.application-form-card
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.application-form-card select,
.application-form-card textarea,
.choice-card span,
.rating-group span {
  border-color: #dedad3;
  border-radius: 0.85rem;
  background: #fcfbf8;
}

.application-form-card
    input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
.application-form-card select:focus,
.application-form-card textarea:focus {
  border-color: var(--brand-500);
  outline: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(241, 137, 39, 0.14);
}

.required-mark {
  color: #a44320;
  background: #fff0e2;
}

.file-field {
  border-color: #ded7cd;
  border-radius: 1rem;
  background: #faf8f4;
}

.file-picker__control {
  border-color: #dedad3;
  border-radius: 0.85rem;
}

.application-submit-zone {
  border-radius: 1.25rem;
  background:
    radial-gradient(circle at 0 100%, rgba(241, 137, 39, 0.22), transparent 18rem),
    #292c28;
}

.application-submit {
  border-radius: 0.85rem;
  background: linear-gradient(110deg, #fff5e9, #f5a04e);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.application-submit:not(:disabled):hover {
  box-shadow: 0 12px 30px rgba(241, 137, 39, 0.2);
  transform: translateY(-1px);
}

.application-success {
  border-radius: var(--application-radius);
}

.public-footer {
  min-height: 6rem;
  border-color: #e2ddd5;
  color: #777770;
}

.public-footer span:last-child {
  color: var(--brand-700);
}

@media (max-width: 900px) {
  .public-topbar,
  .public-footer,
  .application-main {
    width: min(100% - 2rem, 82rem);
  }

  .application-hero {
    min-height: 0;
    grid-template-columns: 1fr;
  }

  .application-hero__visual {
    min-height: 13rem;
  }

  .application-hero__visual-copy {
    right: 1.5rem;
    bottom: 1.5rem;
    left: 1.5rem;
  }

  .application-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .application-rail,
  .application-form-card {
    min-width: 0;
  }

  .application-rail__sticky {
    position: static;
  }

  .application-notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .public-application-page {
    --application-radius: 1.35rem;
  }

  .public-topbar,
  .public-footer,
  .application-main {
    width: min(100% - 1.25rem, 82rem);
  }

  .public-topbar {
    min-height: 5.7rem;
  }

  .brand-logo--public {
    width: 10rem;
  }

  .public-login-link {
    min-height: 2.5rem;
    padding: 0.5rem 0.75rem;
  }

  .application-hero {
    min-height: 0;
    padding: 0.45rem;
    border-radius: var(--application-radius);
  }

  .application-hero__copy {
    padding: 2rem 1.2rem 2.3rem;
  }

  .application-hero h1 {
    font-size: clamp(2.35rem, 11vw, 3.25rem);
    line-height: 1.13;
  }

  .application-journey {
    margin-top: 1.65rem;
    gap: 0.45rem;
  }

  .application-journey span {
    min-height: 2.4rem;
    padding: 0.45rem 0.62rem;
    font-size: 0.73rem;
  }

  .application-hero__visual {
    min-height: 10.5rem;
    border-radius: 1rem;
  }

  .application-hero__visual-copy strong {
    font-size: 1.8rem;
  }

  .application-hero__visual-mark {
    top: 1rem;
    left: 1rem;
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.35rem;
  }

  .application-layout {
    margin-top: 0.8rem;
  }

  .application-rail__sticky,
  .application-form-card {
    border-radius: var(--application-radius);
  }

  .application-notes {
    grid-template-columns: 1fr;
  }

  .application-form-card {
    padding: 1.05rem;
  }

  .apply-section legend {
    align-items: flex-start;
  }

  .apply-section legend strong {
    padding-top: 0.2rem;
  }
}

/* ===============================================================================================
   Application form — stepped flow
   ===============================================================================================
   Appended rather than woven in: theme.css is shared by the HR dashboard, the auth screens and the
   error pages, so every rule below is scoped to `.public-application-page` and cannot reach them.

   The page was a single scroll whose hero promised three steps while the body numbered as many
   fieldsets as the HR builder had made. It is now one numbering, rendered from the panel list, and
   the panels are shown one at a time when the script runs. With the script blocked every panel
   stays visible and these rules degrade to a slightly prettier long form -- which is why nothing
   here hides a panel; only the script does.
   =============================================================================================== */

.public-application-page {
  /* Apple's and Google's floor for a touch target. Named because six rules below depend on it and
     a number changed in one place only would quietly shrink half the controls on a phone. */
  --tap: 2.75rem;
}

/* --- the stepper ----------------------------------------------------------------------------- */

.public-application-page .apply-steps {
  position: relative;
  margin-block-end: 2.25rem;
}

.public-application-page .apply-steps__track {
  position: absolute;
  /* Sits behind the dots, level with their centres. */
  inset-block-start: calc(var(--tap) / 2);
  inset-inline: 0;
  block-size: 2px;
  border-radius: 999px;
  background: #ece6dd;
}

.public-application-page .apply-steps__track i {
  display: block;
  inline-size: 0;
  block-size: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--brand-500), #ffc17d);
  transition: inline-size 260ms ease;
}

.public-application-page .apply-steps__list {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  gap: 0.25rem;
  list-style: none;
}

.public-application-page .apply-step {
  flex: 1 1 0;
  min-inline-size: 0;
}

.public-application-page .apply-step__hit {
  display: flex;
  min-block-size: var(--tap);
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.15rem;
  border-radius: 0.9rem;
  color: #8a877e;
  text-decoration: none;
  transition: color 160ms ease;
}

.public-application-page .apply-step__dot {
  display: grid;
  inline-size: var(--tap);
  block-size: var(--tap);
  border: 1px solid #e6e0d8;
  border-radius: 50%;
  place-items: center;
  color: #a8a49a;
  background: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}

.public-application-page .apply-step__label {
  font-size: 0.82rem;
  line-height: 1.25;
  text-align: center;
  /* Section labels come from the HR builder and cannot be trusted to be short. */
  overflow-wrap: anywhere;
}

.public-application-page .apply-step.is-reachable .apply-step__hit {
  color: #575650;
}

.public-application-page .apply-step.is-done .apply-step__dot {
  border-color: var(--brand-500);
  color: #fff;
  background: var(--brand-500);
}

/* The number gives way to a tick once the step is behind you -- it has done its job by then, and a
   row of ticks reads as progress at a glance. */
.public-application-page .apply-step.is-done .apply-step__dot b {
  font-size: 0;
}

.public-application-page .apply-step.is-done .apply-step__dot b::after {
  content: "✓";
  font-size: 1.1rem;
}

.public-application-page .apply-step.is-current .apply-step__dot {
  border-color: var(--brand-500);
  color: var(--brand-700);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(241, 137, 39, 0.16);
  transform: scale(1.06);
}

.public-application-page .apply-step.is-current .apply-step__label {
  color: var(--brand-700);
  font-weight: 700;
}

.public-application-page .apply-step:not(.is-reachable) .apply-step__hit {
  cursor: default;
}

.public-application-page .apply-step__hit:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 3px;
}

.public-application-page .apply-steps__status {
  margin: 1.1rem 0 0;
  color: #8a877e;
  font-size: 0.85rem;
  text-align: center;
}

/* --- step controls --------------------------------------------------------------------------- */

.public-application-page .apply-nav {
  display: flex;
  margin-block-start: 2rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.public-application-page .apply-nav__btn {
  display: inline-flex;
  min-block-size: var(--tap);
  padding: 0.7rem 1.35rem;
  border: 1px solid transparent;
  border-radius: 999px;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.public-application-page .apply-nav__btn--primary {
  color: #fff;
  background: var(--brand-500);
}

.public-application-page .apply-nav__btn--primary:hover {
  background: var(--brand-600);
  transform: translateY(-1px);
}

.public-application-page .apply-nav__btn--ghost {
  border-color: #e6e0d8;
  color: #575650;
  background: #fff;
}

.public-application-page .apply-nav__btn--ghost:hover:not(:disabled) {
  border-color: var(--brand-500);
  color: var(--brand-700);
}

.public-application-page .apply-nav__btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.public-application-page .apply-nav__btn:focus-visible {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.public-application-page .apply-nav__count {
  color: #8a877e;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* --- hero and section copy ------------------------------------------------------------------- */

.public-application-page .application-hero__lede {
  margin: 1.6rem 0 0;
  max-inline-size: 34rem;
  color: #6f6d66;
  font-size: 0.95rem;
  line-height: 1.7;
}

.public-application-page .section-intro--warning {
  margin-block-start: 1.25rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(241, 137, 39, 0.28);
  border-radius: 0.9rem;
  color: #7a5a33;
  background: rgba(241, 137, 39, 0.07);
}

/* A stepped form shows one fieldset at a time, so the separators that spaced a long scroll would be
   drawing lines between things never on screen together. */
.public-application-page .is-stepped .apply-section + .apply-section {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

/* --- touch sizing ---------------------------------------------------------------------------- */
/* At every width, not only on phones: a 36px control is awkward on a trackpad too, and the desktop
   layout has room to spare. */

.public-application-page .field input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.public-application-page .field select,
.public-application-page .file-picker__control {
  min-block-size: var(--tap);
}

/* --- choices: answer cards and rating circles ------------------------------------------------- */
/*
 * These had no styling at all. theme.css carries a `.choice-card` / `.rating-group` block from
 * moard2 and the Blade renders `.choice` inside `.choice-grid` -- the names drifted in the port, so
 * every radio and checkbox on the form has been the browser's default control ever since. The old
 * block is left where it is: it is inert, and removing it belongs in its own change.
 *
 * The native input stays in the DOM, focusable, announced and covering the card, so the keyboard
 * and the screen reader deal with a real radio. Only its rendering is replaced.
 */
.public-application-page .choice {
  position: relative;
  display: flex;
  min-block-size: var(--tap);
  align-items: center;
  cursor: pointer;
}

.public-application-page .choice input {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.public-application-page .choice span {
  position: relative;
  display: flex;
  inline-size: 100%;
  min-block-size: var(--tap);
  padding-block: 0.7rem;
  padding-inline: 0.85rem 1rem;
  border: 1px solid #e6e0d8;
  border-radius: 0.95rem;
  align-items: center;
  gap: 0.7rem;
  color: #575650;
  background: #fff;
  font-size: 0.95rem;
  line-height: 1.35;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    color 180ms ease,
    box-shadow 220ms ease,
    transform 220ms cubic-bezier(0.2, 0.8, 0.3, 1.15);
}

/* The indicator, built from two stacked inset shadows so it can animate: a fixed white ring on top,
   and under it a brand fill whose spread grows from nothing to the whole circle. The result is the
   dot every radio button has had for thirty years -- rim, gap, centre -- rather than the thick
   doughnut a single inset spread produces. Both states declare both layers, or there is nothing to
   interpolate between and the dot appears rather than grows. */
.public-application-page .choice span::before {
  display: grid;
  flex: 0 0 auto;
  inline-size: 1.3rem;
  block-size: 1.3rem;
  border: 1.5px solid #d8d2c8;
  border-radius: 50%;
  place-items: center;
  color: #fff;
  background: #fff;
  box-shadow:
    inset 0 0 0 0.22rem #fff,
    inset 0 0 0 0 var(--brand-500);
  font-size: 0.8rem;
  font-weight: 900;
  content: "";
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 260ms cubic-bezier(0.2, 0.8, 0.3, 1.45);
}

.public-application-page .choice input:checked + span {
  border-color: var(--brand-500);
  color: var(--brand-700);
  background: rgba(241, 137, 39, 0.07);
  box-shadow: 0 6px 18px rgba(241, 137, 39, 0.14);
}

.public-application-page .choice input:checked + span::before {
  border-color: var(--brand-500);
  box-shadow:
    inset 0 0 0 0.22rem #fff,
    inset 0 0 0 1rem var(--brand-500);
}

.public-application-page .choice input:not(:checked):hover + span {
  border-color: #d8cbb8;
  background: #fdfcfa;
  transform: translateY(-1px);
}

.public-application-page .choice input:active + span {
  transform: translateY(0) scale(0.985);
}

.public-application-page .choice input:focus-visible + span {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* Checkboxes: a square that fills and takes a tick. The glyph swap cannot tween, so a short pop
   carries the change instead of it appearing from nowhere. */
.public-application-page .choice-grid--multi .choice span::before {
  border-radius: 0.42rem;
}

.public-application-page .choice-grid--multi .choice input:checked + span::before {
  border-color: var(--brand-500);
  background: var(--brand-500);
  box-shadow: none;
  content: "✓";
  animation: choice-pop 240ms cubic-bezier(0.2, 0.8, 0.3, 1.5);
}

@keyframes choice-pop {
  0% { transform: scale(0.6); }
  60% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/*
 * Ratings are a short numeric scale, so they read as a row of circles rather than a column of
 * cards -- the number is the whole label and a leading indicator beside it would say nothing.
 */
.public-application-page .choice-grid--rating {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.public-application-page .choice-grid--rating .choice {
  flex: 0 0 auto;
}

.public-application-page .choice-grid--rating .choice span {
  inline-size: 3.25rem;
  block-size: 3.25rem;
  min-block-size: 0;
  padding: 0;
  border-radius: 50%;
  justify-content: center;
  gap: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.public-application-page .choice-grid--rating .choice span::before {
  display: none;
}

.public-application-page .choice-grid--rating .choice input:not(:checked):hover + span {
  border-color: var(--brand-500);
  transform: translateY(-2px);
}

.public-application-page .choice-grid--rating .choice input:checked + span {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(140deg, var(--brand-500), #ffb161);
  box-shadow: 0 10px 24px rgba(241, 137, 39, 0.32);
  transform: translateY(-2px) scale(1.06);
}

/*
 * The halo that expands out of a chosen rating. On `.choice` rather than the span because it has to
 * paint *behind* the circle, and `:has()` because no sibling selector reaches a parent's
 * pseudo-element. A browser without `:has()` simply never shows it -- the gradient fill, the lift
 * and the shadow above already carry the state, so nothing is lost but the flourish.
 */
.public-application-page .choice-grid--rating .choice::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(241, 137, 39, 0.3), transparent 68%);
  opacity: 0;
  content: "";
  pointer-events: none;
  transform: scale(0.55);
  transition:
    opacity 280ms ease,
    transform 320ms cubic-bezier(0.2, 0.8, 0.3, 1.35);
}

.public-application-page .choice-grid--rating .choice:has(input:checked)::after {
  opacity: 1;
  transform: scale(1.5);
}

.public-application-page .privacy-consent {
  min-block-size: var(--tap);
  align-items: center;
}

.public-application-page .privacy-consent input {
  /* A 16px checkbox on a phone is a miss waiting to happen, and this one is the consent gate. */
  inline-size: 1.4rem;
  block-size: 1.4rem;
}

@media (max-width: 640px) {
  /*
   * Phones: labels under six dots do not fit, so only the current step keeps its label and the rest
   * collapse to numbered circles. The stepper's own status line is hidden with them -- the label
   * below the current dot says the same thing -- but it stays in the accessibility tree, announced
   * on every change, for anyone the dots do not serve.
   */
  .public-application-page .apply-step__label {
    display: none;
  }

  .public-application-page .apply-step.is-current .apply-step__label {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(var(--tap) + 0.6rem);
    display: block;
    font-size: 0.9rem;
  }

  .public-application-page .apply-steps {
    margin-block-end: 3.5rem;
  }

  .public-application-page .apply-steps__status {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .public-application-page .apply-steps__list {
    gap: 0.5rem;
  }

  /*
   * The controls follow the thumb instead of sitting at the end of a scroll. Sticky, not fixed:
   * fixed would cover the last step's submit button, and a bar that hides the thing it is meant to
   * lead you to is worse than no bar.
   */
  .public-application-page .apply-nav {
    position: sticky;
    inset-block-end: 0;
    margin-inline: -1.05rem;
    margin-block-end: -1.05rem;
    padding: 0.85rem 1.05rem;
    border-block-start: 1px solid #ece6dd;
    background: rgba(255, 255, 255, 0.96);
    flex-wrap: wrap;
    backdrop-filter: blur(8px);
  }

  .public-application-page .apply-nav__btn {
    flex: 1 1 0;
    justify-content: center;
  }

  .public-application-page .apply-nav__count {
    order: -1;
    flex: 0 0 100%;
    text-align: center;
  }

  .public-application-page .application-hero__lede {
    font-size: 0.9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .public-application-page .apply-steps__track i,
  .public-application-page .apply-step__dot,
  .public-application-page .apply-nav__btn,
  .public-application-page .choice span,
  .public-application-page .choice span::before,
  .public-application-page .choice-grid--rating .choice::after {
    transition: none;
  }

  /* The states stay, only the movement goes -- a chosen rating must still look chosen. */
  .public-application-page .choice input:checked + span,
  .public-application-page .choice input:hover + span,
  .public-application-page .choice input:active + span {
    transform: none;
  }

  .public-application-page .choice-grid--multi .choice input:checked + span::before {
    animation: none;
  }
}