/* ============================================================
   DiveWaiver Web — DESIGN-SYSTEM LAYER ("Soft Bento")
   Single source of truth for the QR web form's look, kept in sync with the
   mobile app's design system (divewaiver-docs/DiveWaiver_DesignSystem:
   colors_and_type.css + components.css). Plain CSS — no build step — so it
   works on static hosting and survives the "no NPM build" runtime constraint.

   Loaded AFTER tailwind.css; Tailwind is kept only for layout utilities
   (flex/grid/gap/spacing) and the `hidden` toggle the JS relies on. All colour,
   type, radius, border and component styling comes from the tokens/classes
   below — no hardcoded orange/gray/green utilities in the markup.
   ============================================================ */

/* ============================================================
   SELF-HOSTED FONTS — IBM Plex Sans + Mono (latin + cyrillic).
   Self-hosted so the CSP stays `font-src 'self'` and the form works offline
   (divers fill it on boats with poor connectivity).
   ============================================================ */
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-sans-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('../fonts/ibm-plex-sans-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-mono-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('../fonts/ibm-plex-mono-cyrillic-500.woff2') format('woff2');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }

/* ============================================================
   TOKENS — mirror of colors_and_type.css :root (single source of truth).
   ============================================================ */
:root {
  --deep:#0B2341; --ocean:#0D4F8B; --azure:#1A73C7;
  --coral:#FF6B4A; --sunset:#FF8C42; --amber:#F5A623;
  --screen-bg:#F3F1ED; --pearl:#FFFFFF; --fog:#E8E4DF;
  --ink:#1A1A2E; --harbor:#45556C; --slate:#6B7280; --mist:#99A1AF;
  --mint:#2DD4A8; --reef:#0EA47A; --mango:#EF4444;
  --tile-mint:#DAF5EC; --tile-mint-ink:#0B7A5C;
  --tile-butter:#FBEAC2; --tile-butter-ink:#8A6310;
  --tile-sky:#DCEAFB; --tile-sky-ink:#134D8C;
  --tile-coral:#FFE3DB; --tile-coral-ink:#C2412A;

  --font-sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  --r-tile:24px; --r-mid:16px; --r-field:14px; --r-chip:12px; --r-pill:999px;
  --shadow:0 4px 22px rgba(11,35,65,0.06);
  --shadow-cta:0 8px 20px rgba(255,107,74,0.30);
  --hair:1px solid #ECEAE4;
}

/* ============================================================
   APP SHELL — screen background + centred container (parity with the app's
   stepper screen: soft warm-grey canvas, pearl tiles on top, no white card).
   ============================================================ */
.dw-body { background: var(--screen-bg); color: var(--ink); font-family: var(--font-sans); }
.dw-app  { background: transparent; border: none; box-shadow: none; }

/* ============================================================
   TYPE HELPERS (canon .eyebrow / .h-screen / .h-card / .sub / .seclabel)
   ============================================================ */
.dw-eyebrow { font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--coral); }
.dw-h-screen { font-family: var(--font-sans); font-size: 27px; font-weight: 700; line-height: 1.08; letter-spacing: -.03em; color: var(--deep); }
.dw-h-card { font-family: var(--font-sans); font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--deep); }
.dw-sub { font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--harbor); }
.dw-seclabel { font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); }
.dw-section-title { font-family: var(--font-sans); font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--deep); }

/* ============================================================
   STEP INDICATOR (canon .steps .seg — flat segments, no labels above)
   ============================================================ */
.dw-steps { display: flex; gap: 6px; }
.dw-seg { flex: 1; height: 5px; border-radius: 3px; background: var(--fog); transition: background-color .2s; }
.dw-seg.is-on { background: var(--coral); }

/* ============================================================
   FIELDS (canon .field / .fl / .fbox)
   ============================================================ */
.dw-field-label { display: block; font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); margin-bottom: 7px; }
.dw-input {
  width: 100%; min-height: 52px; background: var(--pearl); color: var(--ink);
  border: none; border-radius: var(--r-field); box-shadow: var(--shadow);
  padding: 10px 16px; font-family: var(--font-sans); font-size: 16px;
  appearance: none; -webkit-appearance: none;
}
.dw-input::placeholder { color: var(--mist); }
.dw-input:focus { outline: 2px solid var(--coral); outline-offset: 1px; }
/* Locked (instructor pre-filled, secure source) — visibly inert, not editable. */
.dw-input--locked { background: var(--screen-bg); color: var(--slate); box-shadow: none; border: 1.5px solid var(--fog); cursor: not-allowed; }
/* Select chevron wrapper */
.dw-select-wrap { position: relative; }
.dw-select-wrap .dw-input { padding-right: 40px; }
.dw-select-chevron { pointer-events: none; position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: center; padding-right: 12px; color: var(--slate); }
.dw-select-chevron svg { width: 20px; height: 20px; }

/* ============================================================
   BANNERS (canon .banner sky/amber)
   ============================================================ */
.dw-banner { display: flex; gap: 11px; border-radius: var(--r-mid); padding: 14px 15px; font-size: 12.5px; line-height: 1.45; }
.dw-banner--sky { background: var(--tile-sky); color: var(--tile-sky-ink); }
.dw-banner--amber { background: rgba(245,166,35,.13); color: #8A6310; }

/* ============================================================
   GUARDIAN BLOCK (minor) — tinted amber tile (canon banner-amber family)
   ============================================================ */
.dw-guardian { border-radius: var(--r-mid); background: rgba(245,166,35,.10); border: 1.5px solid rgba(245,166,35,.45); padding: 16px; }
.dw-guardian-title { font-family: var(--font-sans); font-size: 15px; font-weight: 700; color: #8A6310; }

/* ============================================================
   CHECK ROW (canon .checkrow) — native checkbox tinted `deep`, on a pearl tile
   ============================================================ */
.dw-checkrow { display: flex; align-items: flex-start; gap: 12px; padding: 14px; border-radius: var(--r-mid); background: var(--pearl); box-shadow: var(--shadow); cursor: pointer; }
.dw-checkrow input[type="checkbox"] { width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; accent-color: var(--deep); cursor: pointer; }
.dw-checkrow__text { font-family: var(--font-sans); font-size: 13px; line-height: 1.45; color: var(--harbor); }
.dw-checkrow__text a { color: var(--coral); font-weight: 700; text-decoration: underline; }

/* ============================================================
   MEDICAL Yes/No (canon .yn .ynb) + question card (canon .tile, danger variant)
   ============================================================ */
.dw-tile { background: var(--pearl); border-radius: var(--r-tile); box-shadow: var(--shadow); padding: 18px; }
.dw-q-card { background: var(--pearl); border-radius: var(--r-tile); box-shadow: var(--shadow); padding: 18px; border: 2px solid transparent; transition: border-color .2s, background-color .2s; }
.dw-q-card.is-flagged { border-color: var(--mango); background: rgba(245,166,35,.10); box-shadow: none; }
.dw-q-text { font-family: var(--font-sans); font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--ink); margin-bottom: 16px; }
.dw-q-card.is-flagged .dw-q-text { color: #9A6A0F; }
.dw-sub-box { margin-top: 16px; padding-left: 16px; border-left: 2px solid var(--fog); display: flex; flex-direction: column; gap: 14px; }
.dw-sub-q { padding: 12px 0; }
.dw-sub-q .dw-q-text { font-weight: 500; margin-bottom: 12px; }

.dw-yn-group { display: flex; gap: 11px; }
.dw-yn-btn { flex: 1; min-height: 48px; border-radius: var(--r-field); border: 2px solid var(--fog); background: var(--pearl); color: var(--slate); font-family: var(--font-sans); font-size: 15px; font-weight: 700; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.dw-yn-btn.is-selected.is-no { background: var(--reef); border-color: var(--reef); color: #fff; }
.dw-yn-btn.is-selected.is-yes { background: var(--amber); border-color: var(--amber); color: var(--deep); }
.dw-yn-btn.is-selected.is-danger { background: var(--mango); border-color: var(--mango); color: #fff; }

.dw-flag-note { display: none; margin-top: 12px; font-family: var(--font-sans); font-size: 12.5px; font-weight: 700; color: #9A6A0F; }
.dw-q-card.is-flagged .dw-flag-note, .dw-sub-q.is-flagged .dw-flag-note { display: block; }

/* ============================================================
   WAIVER TEXT (canon nested pearl block; headings via templateLoader)
   ============================================================ */
.dw-waiver-box { background: var(--pearl); border-radius: var(--r-tile); box-shadow: var(--shadow); padding: 18px; font-family: var(--font-sans); font-size: 14px; line-height: 1.5; color: var(--ink); }
.dw-waiver-h2 { font-family: var(--font-sans); font-size: 16px; font-weight: 700; color: var(--deep); margin: 14px 0 6px; }
.dw-waiver-h3 { font-family: var(--font-sans); font-size: 14px; font-weight: 700; color: var(--deep); margin: 12px 0 4px; }
.dw-waiver-p { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.55; color: var(--harbor); margin-top: 6px; text-align: justify; }

/* ============================================================
   SIGNATURE (canon .sigpad — dashed pearl pad + clear link)
   ============================================================ */
.dw-sigpad { position: relative; background: var(--pearl); border: 2px dashed var(--fog); border-radius: var(--r-mid); box-shadow: var(--shadow); overflow: hidden; }
.dw-sigpad--guardian { border-color: rgba(245,166,35,.55); }
.dw-sig-clear { position: absolute; top: 8px; right: 8px; background: var(--pearl); color: var(--slate); border: 1.5px solid var(--fog); border-radius: var(--r-field); padding: 6px 12px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }

/* ============================================================
   BUTTONS (canon .btn-primary / .btn-secondary). One coral CTA — Next AND
   Submit are coral (the app has no green submit).
   ============================================================ */
.dw-btn-primary { width: 100%; min-height: 54px; padding: 8px 18px; border: none; border-radius: var(--r-mid); background: var(--coral); color: #fff; font-family: var(--font-sans); font-size: 16px; font-weight: 700; box-shadow: var(--shadow-cta); cursor: pointer; transition: transform .12s; }
.dw-btn-primary:active { transform: scale(.97); }
.dw-btn-primary:disabled { opacity: .6; cursor: default; }
.dw-btn-secondary { width: 100%; min-height: 54px; padding: 8px 18px; border: 2px solid var(--deep); border-radius: var(--r-mid); background: transparent; color: var(--deep); font-family: var(--font-sans); font-size: 16px; font-weight: 700; cursor: pointer; transition: transform .12s; }
.dw-btn-secondary:active { transform: scale(.97); }

/* ============================================================
   STATE SCREENS (loading / error / success) — canon tints
   ============================================================ */
.dw-spinner { width: 48px; height: 48px; border: 4px solid var(--fog); border-top-color: var(--coral); border-radius: 50%; animation: dw-spin 1s linear infinite; margin: 0 auto; }
@keyframes dw-spin { to { transform: rotate(360deg); } }
.dw-state-error, .dw-state-success { padding: 40px 20px; }
.dw-state-error { background: var(--tile-coral); border-radius: var(--r-tile); color: var(--tile-coral-ink); }
.dw-state-error svg { color: var(--mango); }
.dw-state-success { background: var(--tile-mint); border-radius: var(--r-tile); }
.dw-state-success svg { color: var(--reef); }
.dw-state-success h2 { color: var(--tile-mint-ink); font-family: var(--font-sans); font-weight: 700; }
.dw-state-success p { color: var(--tile-mint-ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}