@import "/assets/brand.css";

/* Volunteer WiFi captive portal — layout on top of the iceConnect brand layer.
   Self-hosted, no external fonts/CDNs. */

body {
  /* Dark slate ground; the card sits on it (approved pairing: surface on slate). */
  background: var(--slate);
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-lg);
}

.portal {
  background: var(--bg-surface);
  width: 100%;
  max-width: 420px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-default);
  box-shadow: var(--elevation-lg);
  overflow: hidden;
  margin-top: 2rem;
}

.portal header {
  background: var(--slate);
  color: var(--white);
  padding: var(--space-lg) var(--space-lg);
  border-bottom: 3px solid var(--brass);   /* brass accent rule */
}
.portal header .brand-logo { height: 26px; width: auto; display: block; margin-bottom: var(--space-md); }
.portal header h1 { font-size: 1.35rem; }
.portal header p  { font-family: var(--font-body); font-size: .85rem; color: var(--slate-200); margin-top: .35rem; }

.portal .body { padding: var(--space-lg); }

.field { margin-bottom: var(--space-md); }

button.primary { width: 100%; font-size: 1rem; padding: .8rem 1rem; }

/* Status icon block on success / notice pages. */
.status-icon { width: 48px; height: 48px; margin: 0 0 var(--space-sm); }
.status-icon.success { color: var(--success-base); }
.status-icon.error   { color: var(--error-base); }
.status-icon.info    { color: var(--info-base); }

/* Brand: left-align body copy; never centre paragraphs. */
.note { font-size: .8rem; color: var(--text-secondary); margin-top: var(--space-md); }
</content>