/* ============================================================================
   Outpost WiFi — guest splash (CWA + standalone)
   ============================================================================
   Inherits design tokens from tokens.css (loaded BEFORE this file). Brand is
   light + navy; per-tenant overrides set --accent at the .splash element via
   inline <style> in cwa.html.
   ============================================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; min-height: 100%;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--fg);
}

.splash {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  background:
    radial-gradient(ellipse at 50% 0%, var(--color-navy-50, #f1f4f9) 0%, transparent 70%),
    var(--bg);
}

.splash__card {
  width: 100%;
  max-width: 30rem;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.splash__logo {
  display: block;
  max-width: 220px;
  max-height: 110px;
  margin: 0 auto var(--space-4);
  object-fit: contain;
}
/* Brand reset 2026-05-04: when the splash falls back to the canonical
   horizontal lockup, lift the cap a touch — the lockup is wider than
   most operator logos and the icon would render too small at 220×110. */
.splash__logo--lockup {
  max-width: 320px;
  max-height: 100px;
}
.splash__logo-fallback { display: contents; }

.splash__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}
.splash__subtitle {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  line-height: var(--leading-normal);
}
.splash__note {
  margin: 0 0 var(--space-5);
  color: var(--muted);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

/* ---- plan picker ---- */
.splash__plans {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-5) 0 var(--space-3);
}
.plan {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--panel-soft);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  text-align: left;
}
.plan__name { font-weight: 600; color: var(--fg); }
.plan__price {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: var(--text-md);
  color: var(--accent);
  font-family: var(--font-display);
}
.plan__currency { color: var(--muted); font-weight: 400; font-size: 0.85em; }

.plan__cta, .splash__btn {
  background: var(--accent);
  color: var(--accent-fg);
  border: 1px solid var(--accent);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: filter var(--transition-fast);
  text-align: center;
}
.plan__cta { grid-column: 1 / -1; }
.plan__cta:hover, .splash__btn:hover { filter: brightness(1.06); }
.plan__cta:focus-visible, .splash__btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  box-shadow: var(--ring-focus, 0 0 0 3px rgba(9, 74, 148, 0.30));
}
.plan__cta:disabled, .splash__btn:disabled {
  opacity: 0.5; cursor: not-allowed; filter: grayscale(0.3);
}
/* F4 (50-burn 2026-05-03): operator wants the free CTA to look the same
   as every other primary action. Previous outline-button treatment made
   it read as secondary/optional. Drop the override — inherit the filled
   accent style from .splash__btn. */
.splash__btn--free { margin-top: var(--space-2); }

/* F4 (cont.): visual separator drawn by the template between consecutive
   enabled auth options. The template tracks a `seen` flag and emits an
   <hr class="splash__divider"> before each non-first enabled block. */
.splash__divider {
  border: 0;
  border-top: 1px solid var(--border-soft, rgba(0, 0, 0, 0.10));
  margin: var(--space-3) 0;
}

/* S2-HIGH (S2-1, Wave-4 splash audit, 2026-05-02): inline subline under
   the Free CTA explaining the trade-off when both pay and free are
   enabled. Scoped tighter than .muted so it sits flush under the
   button. */
.splash__free-note {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-xs);
  text-align: center;
}

/* S1-HIGH (S1-3, Wave-4 splash audit, 2026-05-02): "I already paid —
   check status" recovery button rendered next to the status banner
   when /confirm errors after Helcim approved the charge. Distinct
   styling so it doesn't look like a primary action — neutral surface,
   accent text, smaller padding. */
.splash__btn--recheck {
  background: var(--bg-elevated, #fff);
  color: var(--accent);
  border: 1px solid var(--accent);
  margin: var(--space-3) auto 0;
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}
.splash__btn--recheck:hover { background: var(--accent-soft-bg); filter: none; }

/* ---- access-mode forms (voucher / password / free) ---- */
.splash__access {
  display: grid;
  gap: var(--space-2);
  margin: var(--space-3) 0;
  text-align: left;
}
.splash__label {
  font-size: var(--text-xs);
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  font-weight: 600;
}
.splash__input {
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  color: var(--fg);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}
.splash__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* ---- status banners (post-submit feedback) ---- */
.splash__status {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  text-align: left;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  border: 1px solid var(--border);
}
.splash__status--info  { background: var(--accent-soft-bg); color: var(--accent); border-color: var(--accent); }
.splash__status--warn  { background: var(--warn-soft-bg);   color: var(--warn);   border-color: var(--warn);   }
.splash__status--error { background: var(--bad-soft-bg);    color: var(--bad);    border-color: var(--bad);    }
.splash__status--ok    { background: var(--good-soft-bg);   color: var(--good);   border-color: var(--good);   }

/* ---- ToS expander ---- */
.splash__tos {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: left;
}
.splash__tos summary { cursor: pointer; user-select: none; }
.splash__tos summary:hover { color: var(--fg-soft); }
.splash__tos-body {
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--panel-soft);
  border-radius: var(--radius-sm);
  max-height: 220px;
  overflow-y: auto;
}

/* ---- ToS rendered markdown (inside .splash__tos-body) ---- */
.tos-rendered p { margin: 0 0 var(--space-3); }
.tos-rendered p:last-child { margin-bottom: 0; }
.tos-rendered ul,
.tos-rendered ol { padding-left: 1.4rem; margin: 0 0 var(--space-3); }
.tos-rendered li { margin-bottom: var(--space-1); }
.tos-rendered a { color: var(--accent); text-decoration: underline; }
.tos-rendered h2,
.tos-rendered h3,
.tos-rendered h4 {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--text-md);
  font-weight: 600;
}
.tos-rendered h2:first-child,
.tos-rendered h3:first-child,
.tos-rendered h4:first-child { margin-top: 0; }
.tos-rendered blockquote {
  border-left: 3px solid var(--border);
  padding-left: var(--space-3);
  margin: 0 0 var(--space-3);
  color: var(--fg-soft);
}
.tos-rendered code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  background: var(--panel-soft);
  padding: 0.1em 0.3em;
  border-radius: var(--radius-sm);
}
.tos-rendered hr {
  border: none;
  border-top: 1px solid var(--border-soft);
  margin: var(--space-4) 0;
}

/* ---- consent block (data-handling disclosure + ToS checkbox) ----
 * Litigator A2-1 + A2-4. The disclosure paragraph is visible by default
 * on every access mode (not hidden behind a <details>) so PIPEDA s.4.3
 * "knowledge and consent" is satisfied on its face. The checkbox is
 * un-pre-checked; CTAs are disabled until the box is ticked.
 */
.splash__consent {
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--panel-soft);
  text-align: left;
  font-size: var(--text-sm);
  color: var(--fg-soft);
  line-height: var(--leading-normal);
}
.splash__consent-disclosure {
  margin: 0 0 var(--space-3);
}
.splash__consent-disclosure a {
  color: var(--accent);
  text-decoration: underline;
}
.splash__consent-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
  user-select: none;
}
.splash__consent-checkbox {
  /* iOS auto-zooms when an input <16px gains focus; the 1.1rem here keeps
   * the tap target legible on phones without inviting the zoom behaviour
   * (which is gated on font-size, not size). */
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.15rem;
  accent-color: var(--accent);
  cursor: pointer;
}
.splash__consent-text {
  flex: 1 1 auto;
  font-size: var(--text-sm);
  color: var(--fg);
}
.splash__consent-text a {
  color: var(--accent);
  text-decoration: underline;
}

/* ---- splash footer (legal + tagline) ---- */
.splash__footer {
  margin: var(--space-6) auto 0;
  max-width: 30rem;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: var(--leading-relaxed);
}
.splash__tagline {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--space-2);
}
.splash__footer a {
  color: var(--muted);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-2) var(--space-2);
}
.splash__footer a:hover { color: var(--accent); text-decoration: underline; }
.splash__footer-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: center;
}

/* ---- debug + meta strips (collapsed by default) ---- */
.splash__debug {
  margin-top: var(--space-5);
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: left;
}
.splash__debug summary { cursor: pointer; }
.splash__meta {
  margin: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-soft);
  color: var(--muted);
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  text-align: left;
}
.splash__meta code {
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.85em;
  word-break: break-all;
}

/* ---- responsive tightening ---- */
@media (max-width: 480px) {
  .splash { padding: var(--space-4) var(--space-3); }
  .splash__card { padding: var(--space-6) var(--space-4); }
  .splash__logo { max-width: 180px; max-height: 90px; }
  .splash__title { font-size: var(--text-lg); }
}

/* F5 (DEFERRED → burn-3): on small phones with all 4 access modes
   enabled, the splash card stacks to ~1400px. Tighten vertical rhythm
   so the multi-gate splash fits in roughly one extra screen instead
   of two. Aggressive but reversible — only kicks in at <=420px which
   excludes any tablet. */
@media (max-width: 420px) {
  .splash__card { padding: var(--space-5) var(--space-4); }
  .splash__logo { margin-bottom: var(--space-3); }
  .splash__title { margin-bottom: var(--space-1); }
  .splash__subtitle { margin-bottom: var(--space-3); }
  .splash__access { padding: var(--space-3) var(--space-3); }
  .splash__divider { margin: var(--space-3) 0; }
  .splash__plans { gap: var(--space-2); }
  .splash__footer { margin-top: var(--space-4); }
}

/* ---- prevent iOS Safari auto-zoom on focused form fields ----
 * iOS zooms the viewport when a form field's font-size is < 16px and the
 * user taps to focus. Force 16px on every focusable form field at phone
 * widths so the splash never zooms unexpectedly mid-checkout. */
@media (max-width: 540px) {
  form input,
  form select,
  form textarea,
  .splash__input {
    font-size: 16px;
  }
}