:root {
  --ground: #f5f7f9;
  --surface: #ffffff;
  --surface-2: #eef2f5;
  --border: #d5dde3;
  --ink: #14202b;
  --ink-2: #54646f;
  --accent: #2563eb;
  --accent-ink: #ffffff;
  --danger: #dc2626;
  --danger-soft: #fbe0e0;
  --ok: #059669;
  --ok-soft: #d6f2e6;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --r: 9px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #12161a;
    --surface: #1c2128;
    --surface-2: #252b33;
    --border: #30373f;
    --ink: #e6ecf0;
    --ink-2: #97a6b0;
    --accent: #4b88f0;
    --accent-ink: #ffffff;
    --danger: #f87171;
    --danger-soft: #2b0f0f;
    --ok: #34d399;
    --ok-soft: #0d2b1f;
    color-scheme: dark;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}

.page-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 18px 16px 14px;
}

.page-header h1 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.detachment-name {
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink-2);
}

.page-main {
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 16px 48px;
}

#survey-host {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 4px 4px 12px;
}

#turnstile-widget {
  margin: 16px 0;
  display: flex;
  justify-content: center;
}

/* The ID rule's display:flex outranks the browser's [hidden] rule, so without this the
   solved check stayed on screen above "Application filed". */
#turnstile-widget[hidden] {
  display: none;
}

/* SurveyJS 3.0.2's theme sets its text font to "Open Sans" alone. The page does not load that
   font (the fontless stylesheet, and font-src 'self'), so without this the form shows Open Sans
   only where a device has it installed, and the browser's default font everywhere else. The
   theme variables sit in :where(.sd-theme-root), specificity 0, so this rule wins. */
.sd-theme-root {
  --sjs2-typography-font-family-text: var(--sans);
}

.form-error {
  background: var(--danger-soft);
  color: var(--danger);
  border-radius: var(--r);
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 14px;
}

.form-error[hidden] {
  display: none;
}

.form-error p {
  margin: 0 0 8px;
}

.form-error .btn-reload {
  border: 1px solid var(--danger);
  background: transparent;
  color: var(--danger);
  border-radius: 7px;
  padding: 7px 12px;
  font: 600 13px var(--sans);
  cursor: pointer;
}

.form-confirm {
  background: var(--ok-soft);
  color: var(--ink);
  border-radius: var(--r);
  padding: 18px 16px;
  margin: 14px 0;
}

.form-confirm[hidden] {
  display: none;
}

.form-confirm h2 {
  margin: 0 0 10px;
  font-size: 17px;
  color: var(--ok);
}

.form-confirm p {
  margin: 0 0 10px;
  font-size: 14.5px;
}

.form-confirm p:last-child {
  margin-bottom: 0;
}

.form-confirm a {
  color: var(--accent);
  word-break: break-all;
}

/* SurveyJS 3.0.2's default theme is self-contained in survey-core.fontless.min.css; this file only
   sets the outer card and this app's own error/confirm states, so an upstream version bump
   inside the same major line cannot silently change this page's own controls. */