/* ═════════════════════════════════════════════════════════════════════
   GDP — staff surface. Light, calm, mobile-first 480px column.
   Uses logical properties throughout so dir="rtl" mirrors for free.
   ═════════════════════════════════════════════════════════════════════ */

/* ── shell ── */
.staff-shell {
  max-width: var(--shell-narrow);
  margin-inline: auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
@media (min-width: 720px) {
  body { padding-block: var(--space-7); }
  .staff-shell { min-height: calc(100dvh - 2 * var(--space-7)); }
}

/* ── app header (home + in-flow screens) ── */
.app-header {
  position: sticky; top: 0; z-index: 5;
  background: var(--ui-bg);
  padding: var(--space-4) var(--space-5) var(--space-3);
  border-bottom: 1px solid var(--ui-rule);
}
.brand-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.brand-name { font-size: var(--text-body); font-weight: var(--weight-bold); margin: 0; letter-spacing: -.01em; }
.session-label { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--ui-text-2); white-space: nowrap; }
.header-meta { font-size: var(--text-xs); color: var(--ui-text-2); margin: 2px 0 0; }

main.staff-main { flex: 1; padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }

/* ── auth screens ── */
.auth { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: var(--space-6) var(--space-5) var(--space-8); }
.auth-mark { margin-block-end: var(--space-7); }
.auth-mark .rule { display: block; inline-size: 44px; block-size: 3px; background: var(--ui-accent); margin-block-end: var(--space-4); }
.auth-mark .logo { display: block; block-size: 32px; inline-size: auto; margin-block-end: var(--space-4); }
.auth-mark .org { margin: 0 0 var(--space-1); color: var(--ui-text-3); }
.auth-mark h1 { font-size: var(--text-section); line-height: var(--lh-section); font-weight: var(--weight-semi); letter-spacing: -.01em; margin: 0; }
.auth-mark .tag { font-size: var(--text-sm); color: var(--ui-text-2); margin: var(--space-2) 0 0; }

/* ── forms ── */
.field { display: flex; flex-direction: column; gap: 6px; margin-block-end: var(--space-4); }
.field label { font-size: var(--text-xs); font-weight: var(--weight-semi); }
.field input[type="email"],
.field input[type="password"],
.field input[type="text"] {
  min-height: 48px;
  padding: 0 var(--space-4);
  font: inherit;
  color: var(--ui-text);
  background: var(--ui-surface);
  border: 1.5px solid var(--ui-edge);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease);
}
.field input:focus { outline: none; border-color: var(--ui-action); box-shadow: 0 0 0 1px var(--ui-action); }
.field .assist { font-size: var(--text-xs); color: var(--ui-text-3); margin: 0; }

/* ── buttons ── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: var(--space-2);
  inline-size: 100%; min-height: 54px;
  padding: 0 var(--space-5);
  font: inherit; font-weight: var(--weight-semi);
  border-radius: var(--radius); border: none; cursor: pointer;
  transition: background var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.btn:active { filter: brightness(.92); }
.btn-primary { background: var(--ui-action); color: var(--ui-on-action); }
.btn-primary:hover { background: var(--ui-action-hover); }
.btn-primary:disabled { opacity: .35; cursor: default; }
.btn-quiet { background: transparent; color: var(--ui-text-2); border: 1.5px solid var(--ui-edge); }
.btn-quiet:hover { color: var(--ui-text); border-color: var(--ui-text-2); }
.btn-row { display: flex; flex-direction: column; gap: var(--space-3); margin-block-start: var(--space-5); }

.form-foot { font-size: var(--text-xs); color: var(--ui-text-3); text-align: center; margin-block-start: var(--space-5); }

/* ── notice (forced password change, decline info) ── */
.notice {
  display: flex; gap: var(--space-3); align-items: flex-start;
  background: var(--ui-accent-tint);
  border: 1px solid var(--ui-accent-edge);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-sm); line-height: var(--lh-sm);
  margin-block-end: var(--space-6);
}
.notice svg { flex: 0 0 auto; margin-block-start: 2px; stroke: var(--ui-text); }

/* password requirements */
.req-list { list-style: none; margin: var(--space-2) 0 var(--space-5); padding: 0; display: flex; flex-direction: column; gap: 6px; }
.req-list li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ui-text-2); }
.req-list li::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--ui-edge); flex: 0 0 auto; }
.req-list li.met { color: var(--ui-ok); }
.req-list li.met::before { background: var(--ui-ok); }

/* ── cards ── */
.card {
  background: var(--ui-surface);
  border: 1px solid var(--ui-rule);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.card + .card { margin-block-start: 0; }
.card h2 { font-size: var(--text-title); line-height: var(--lh-title); font-weight: var(--weight-semi); letter-spacing: -.01em; margin: 0 0 var(--space-1); }
.card .kicker { color: var(--ui-text-3); margin: 0 0 var(--space-3); }
.card p { margin: 0; font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ui-text-2); }

/* ── progress ── */
.progress-block { margin-block: var(--space-4); }
.progress-row { display: flex; justify-content: space-between; align-items: baseline; margin-block-end: var(--space-2); font-size: var(--text-xs); color: var(--ui-text-2); }
.progress-row .pct { font-family: var(--font-mono); color: var(--ui-text); }
.progress-track { block-size: 8px; background: var(--ui-surface-sunk); border-radius: 4px; overflow: hidden; }
.progress-fill { display: block; block-size: 100%; background: var(--ui-action); border-radius: 4px; transition: inline-size .35s var(--ease); }
.w-32 { inline-size: 32%; }
.w-26 { inline-size: 26%; }

/* batch position strip */
.batch-strip { display: flex; gap: 4px; margin-block: var(--space-3) var(--space-4); }
.batch-strip i { flex: 1; block-size: 5px; border-radius: 3px; background: var(--ui-surface-sunk); }
.batch-strip i.done { background: var(--ui-accent); }
.batch-strip i.now { background: var(--ui-action); }

/* session row inside home card */
.session-line { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-block-start: 1px solid var(--ui-rule); margin-block-start: var(--space-4); font-size: var(--text-sm); }
.session-line svg { flex: 0 0 auto; stroke: var(--ui-text-2); }
.session-line .grow { flex: 1; }
.session-line b { display: block; font-weight: var(--weight-semi); color: var(--ui-text); }
.session-line span { color: var(--ui-text-2); font-size: var(--text-xs); }

/* ── locked / countdown ── */
.lock-chip {
  display: inline-flex; align-items: center; gap: var(--space-2);
  background: var(--ui-surface-sunk); color: var(--ui-text-2);
  border-radius: var(--radius-pill); padding: 6px 14px;
  font-size: var(--text-xs); font-weight: var(--weight-semi);
  margin-block-end: var(--space-3);
}
.lock-chip svg { stroke: var(--ui-text-2); }
.card p.countdown, .countdown { font-family: var(--font-mono); font-size: var(--text-cover); line-height: var(--lh-cover); font-weight: var(--weight-medium); letter-spacing: .02em; margin: var(--space-1) 0 var(--space-1); }
.card p.countdown-label, .countdown-label { font-size: var(--text-xs); color: var(--ui-text-3); margin: 0 0 var(--space-4); }

/* ── consent ── */
.consent-doc {
  background: var(--ui-surface);
  border: 1px solid var(--ui-rule);
  border-radius: var(--radius);
  padding: var(--space-5);
  max-block-size: 46vh; overflow-y: auto;
}
.consent-doc h3 { font-size: var(--text-micro); line-height: var(--lh-micro); font-weight: var(--weight-semi); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ui-text-3); margin: var(--space-5) 0 var(--space-2); }
:lang(ar) .consent-doc h3 { text-transform: none; letter-spacing: 0; }
.consent-doc h3:first-child { margin-block-start: 0; }
.consent-doc p { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ui-text-2); margin: 0 0 var(--space-2); }
.consent-doc strong { color: var(--ui-text); }

.check-row {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  min-height: var(--tap-min);
  cursor: pointer;
  font-size: var(--text-sm); line-height: var(--lh-sm);
}
.check-row input[type="checkbox"] {
  appearance: none; margin: 2px 0 0; flex: 0 0 auto;
  inline-size: 22px; block-size: 22px;
  border: 2px solid var(--ui-edge); border-radius: 6px;
  background: var(--ui-surface); cursor: pointer;
  display: grid; place-content: center;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.check-row input[type="checkbox"]::before {
  content: ""; inline-size: 12px; block-size: 12px;
  transform: scale(0); transition: transform var(--dur) var(--ease);
  background: var(--ui-on-action);
  clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 18%, 84% 5%, 38% 70%);
}
.check-row input[type="checkbox"]:checked { background: var(--ui-action); border-color: var(--ui-action); }
.check-row input[type="checkbox"]:checked::before { transform: scale(1); }

/* ── page titles on plain staff screens ── */
.page-head { padding-block-start: var(--space-3); }
.page-head .rule { display: block; inline-size: 44px; block-size: 3px; background: var(--ui-accent); margin-block-end: var(--space-4); }
.page-head h1 { font-size: var(--text-section); line-height: var(--lh-section); font-weight: var(--weight-semi); letter-spacing: -.01em; margin: 0 0 var(--space-2); }
.page-head p { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--ui-text-2); margin: 0; }

/* footer note */
.autosave { text-align: center; font-size: var(--text-xs); color: var(--ui-text-3); margin: var(--space-3) 0 0; }

/* language toggle (mockup nav aid) */
.lang-link { position: absolute; inset-block-start: var(--space-4); inset-inline-end: var(--space-5); font-size: var(--text-xs); color: var(--ui-text-2); text-decoration: none; border: 1px solid var(--ui-rule); border-radius: var(--radius-pill); padding: 6px 12px; background: var(--ui-surface); }
.lang-link:hover { color: var(--ui-text); }