/*
 * Self-screening form — action sheets and the controls inside them (ZM-SS-3).
 *
 * Every colour is the page's own theme (admin.partials.theme, the same variables the
 * rest of this form and the officer console use), so this layer cannot drift from
 * the tenant's colours (Malawi: emerald, see form.blade.php): no literal colour may appear
 * in this file. Geometry: a control is a 44px target around a 40px face;
 * the sheet is the only layer above the page.
 */
.ssk {
  --c-bg: hsl(var(--background)); --c-surface: hsl(var(--card)); --c-surface-2: hsl(var(--muted));
  --c-hairline: hsl(var(--border)); --c-hairline-strong: hsl(var(--input));
  --c-ink: hsl(var(--foreground)); --c-ink-2: hsl(var(--foreground)); --c-muted: hsl(var(--muted-foreground));
  --c-accent: hsl(var(--brand)); --c-accent-press: hsl(var(--brand-ink)); --c-accent-soft: hsl(var(--brand-soft)); --c-accent-ring: hsl(var(--ring) / 35%);
  --c-on-accent: hsl(var(--primary-foreground));
  --c-no-ink: hsl(var(--critical)); --c-no-soft: hsl(var(--critical-soft)); --c-yes-ink: hsl(var(--success));
  --c-fill: hsl(var(--foreground) / 6%); --backdrop: hsl(var(--foreground) / 32%);
  --sh-pop: 0 8px 32px hsl(var(--foreground) / 12%), 0 2px 8px hsl(var(--foreground) / 6%);
  --r-sheet: 24px; --r-panel: 12px; --r-control: 8px; --r-pill: 9999px;
  --target: 44px; --face: 40px;
  --ease: cubic-bezier(.16, 1, .3, 1); --dur-fast: 200ms; --dur-base: 250ms; --dur-max: 300ms;
}

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

/* ── The sheet ─────────────────────────────────────────────────────────── */
.ssk-layer { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; }
.ssk-scrim { position: absolute; inset: 0; background: var(--backdrop); animation: ssk-fade var(--dur-base) var(--ease); border: 0; padding: 0; width: 100%; height: 100%; cursor: default; }
.ssk-sheet {
  position: relative; width: 100%; max-width: 640px; max-height: 88vh; max-height: 88dvh;
  display: flex; flex-direction: column; background: var(--c-surface); color: var(--c-ink);
  border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: var(--sh-pop);
  padding-bottom: env(safe-area-inset-bottom); animation: ssk-slide-up var(--dur-max) var(--ease);
  touch-action: pan-y;
}
.ssk-grab { display: flex; justify-content: center; padding: 8px 0 0; cursor: grab; touch-action: none; }
.ssk-grab::before { content: ''; width: 36px; height: 4px; border-radius: 2px; background: var(--c-hairline-strong); }
.ssk-head { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 8px 0 20px; touch-action: none; }
.ssk-title { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--c-ink); }
.ssk-x {
  flex: none; width: var(--target); height: var(--target); display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--c-ink-2); border-radius: var(--r-pill); cursor: pointer;
}
.ssk-x > span { width: var(--face); height: var(--face); display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-pill); }
.ssk-x:hover > span { background: var(--c-fill); }
.ssk-x svg { width: 20px; height: 20px; }
.ssk-body { flex: 1 1 auto; min-height: 0; padding: 0 20px 20px; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
.ssk-foot { flex: none; display: flex; gap: 8px; padding: 12px 20px 20px; border-top: 1px solid var(--c-hairline); }
.ssk-foot > * { flex: 1; }
.ssk-search { flex: none; padding: 0 0 12px; }
/* A sheet that is a list: the search stays put and only the list scrolls. */
.ssk-body-list { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-bottom: 0; }
.ssk-body-list > .ssk-note { flex: none; }
.ssk-body-list > .ssk-list { flex: 1 1 auto; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding-bottom: 20px; }

/* ── Controls ──────────────────────────────────────────────────────────── */
.ssk-btn {
  min-height: var(--target); padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--r-pill); font-size: 14px; line-height: 20px; font-weight: 600; cursor: pointer;
  transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.ssk-btn:active { transform: scale(.98); }
.ssk-btn-primary { background: var(--c-accent); color: var(--c-on-accent); }
.ssk-btn-primary:hover { background: var(--c-accent-press); }
.ssk-btn-plain { background: var(--c-fill); color: var(--c-ink); }
.ssk-btn[disabled] { opacity: .45; cursor: not-allowed; }
.ssk-btn-block { width: 100%; }

.ssk-input {
  width: 100%; min-height: var(--target); padding: 0 12px; border: 1px solid var(--c-hairline-strong); border-radius: var(--r-control);
  background: var(--c-surface); color: var(--c-ink); font-size: 16px; line-height: 20px;
}
.ssk-input::placeholder { color: var(--c-muted); }
/* The page's own fields and switches, lifted to the 44px target. */
.ssk .input, .ssk .ss-seg-btn { min-height: var(--target); }
.ssk .ss-seg-btn { min-width: var(--target); }
.ssk .select { height: var(--target) !important; }
/* A tick box is a 24px face inside a 44px target. */
.ssk input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none; width: var(--target); height: var(--target); margin: -10px;
  display: inline-grid; place-content: center; background: transparent; border: 0; border-radius: var(--r-control); cursor: pointer;
}
.ssk input[type="checkbox"]::before {
  content: ''; width: 24px; height: 24px; border: 1px solid var(--c-muted); border-radius: 4px; background: var(--c-surface);
}
.ssk input[type="checkbox"]:checked::before {
  border-color: var(--c-accent);
  background: var(--c-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}
.ssk-dob { display: grid; grid-template-columns: 1fr 1fr 1.5fr; gap: 8px; }
.ssk-dob label { display: block; font-size: 12.5px; line-height: 16px; color: var(--c-muted); margin-bottom: 4px; }
.ssk-dob input { text-align: center; font-variant-numeric: tabular-nums; }

/* A field that opens a sheet: the chosen value, then a chevron. */
.ssk-pick {
  width: 100%; min-height: var(--target); padding: 0 12px; display: flex; align-items: center; gap: 8px; text-align: start;
  border: 1px solid var(--c-hairline-strong); border-radius: var(--r-control); background: var(--c-surface); color: var(--c-ink);
  font-size: 14px; line-height: 20px; cursor: pointer;
}
.ssk-pick > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ssk-pick-empty > span:first-child { color: var(--c-muted); }
.ssk-pick svg { flex: none; width: 16px; height: 16px; color: var(--c-muted); }

.ssk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ssk-chip {
  min-height: var(--target); padding: 0 16px; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--c-hairline-strong); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-ink-2);
  font-size: 14px; line-height: 20px; font-weight: 500; cursor: pointer;
}
.ssk-chip[aria-pressed="true"], .ssk-chip[aria-checked="true"] { border-color: var(--c-accent); background: var(--c-accent-soft); color: var(--c-accent-press); }

/* ── Rows (inset list): hairlines divide rows and start at the text ─────── */
.ssk-list { list-style: none; margin: 0; padding: 0; }
.ssk-row {
  width: 100%; min-height: var(--target); padding: 8px 0; display: flex; align-items: center; gap: 12px; text-align: start;
  border: 0; border-bottom: 1px solid var(--c-hairline); background: transparent; color: var(--c-ink);
  font-size: 14px; line-height: 20px; cursor: pointer;
}
.ssk-list > li:last-child .ssk-row, .ssk-row:last-child { border-bottom: 0; }
.ssk-row-main { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ssk-row-meta { flex: none; max-width: 45%; font-size: 12.5px; line-height: 16px; color: var(--c-muted); text-align: end; overflow-wrap: anywhere; }
.ssk-row[aria-selected="true"] .ssk-row-main, .ssk-row[aria-checked="true"] .ssk-row-main { color: var(--c-accent-press); font-weight: 600; }
.ssk-row svg { flex: none; width: 18px; height: 18px; color: var(--c-accent); }
.ssk-fact { cursor: default; align-items: flex-start; }
.ssk-fact .ssk-row-meta { order: -1; flex: 0 0 38%; max-width: 38%; text-align: start; padding-top: 2px; }
.ssk-group { margin: 16px 0 4px; font-size: 12.5px; line-height: 16px; font-weight: 600; color: var(--c-muted); }

.ssk-note { margin: 0 0 12px; font-size: 14px; line-height: 20px; color: var(--c-ink-2); }
.ssk-error { margin: 8px 0 0; padding: 8px 12px; border-radius: var(--r-control); background: var(--c-no-soft); color: var(--c-no-ink); font-size: 13px; line-height: 18px; }
.ssk-ok { color: var(--c-yes-ink); }

.ssk :focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; }
.ssk-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .ssk-scrim, .ssk-sheet { animation-duration: .01ms; }
  .ssk-btn { transition-duration: .01ms; }
}
@media (prefers-reduced-transparency: reduce) { .ssk-scrim { background: hsl(var(--foreground) / 60%); } }