/* tipline landing page — matches the dashboard's matrix aesthetic. */

:root {
  --bg: #000;
  --bg-panel: #050a06;
  --fg: #00ff41;
  --fg-dim: #006a2d;
  --fg-bright: #b0ffc4;
  --accent: #66ff8a;
  --warn: #ffb000;
  --err: #ff0040;
  --border: #003d1a;
  --border-bright: #008a36;
  --mono: 'Cascadia Mono', 'JetBrains Mono', 'Fira Code', 'Consolas', 'Courier New', monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.55;
}

main {
  max-width: 720px;
  margin: 0 auto;
  padding: 1rem 1.1rem 3rem;
}

/* ── Header ────────────────────────────────── */
.hdr {
  text-align: left;
  padding: 1.5rem 0.25rem 1.25rem;
  border-bottom: 1px solid var(--border-bright);
  margin-bottom: 1.25rem;
}
.brand {
  margin: 0;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--fg-bright);
}
.tagline {
  margin: 0.45rem 0 0;
  color: var(--fg-dim);
  font-size: 0.95rem;
}

/* ── Section wrappers ──────────────────────── */
/* No outer chrome — just vertical rhythm. The visual boxing is reserved
   for the individual cards inside (.platform), so the page doesn't read
   as nested borders within borders. */
.panel {
  margin-bottom: 1.5rem;
}
.panel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--fg-bright);
  margin: 0 0 0.75rem;
  letter-spacing: 0.06em;
}
.section-intro {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
}
.dim { color: var(--fg-dim); }

/* About paragraphs — match the privacy section's body color (--fg). */
.panel.about p {
  color: var(--fg);
  font-size: 0.95rem;
  margin: 0 0 0.7rem;
}
.panel.about p:last-child { margin-bottom: 0; }

/* ── Platforms ─────────────────────────────── */
.platform-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.platform {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 0.65rem 0.75rem 0.75rem;
}
.platform-head {
  margin-bottom: 0.5rem;
}
.platform-name {
  color: var(--fg-bright);
  font-weight: 700;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}

/* Tap-to-copy handle */
.handle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.55rem 0.6rem;
  cursor: pointer;
  text-align: left;
  gap: 0.6rem;
  /* Help touch targets on mobile */
  min-height: 44px;
  -webkit-tap-highlight-color: rgba(0, 255, 65, 0.15);
}
.handle:hover, .handle:focus {
  border-color: var(--border-bright);
  outline: none;
}
.handle-text {
  flex: 1;
  word-break: break-all;
  font-size: 0.95rem;
}
.handle-long .handle-text {
  /* Session IDs are 66 chars; shrink slightly so they fit two lines on
     narrow mobile widths without forcing horizontal scroll. */
  font-size: 0.78rem;
  letter-spacing: 0.01em;
}
.copy-hint {
  color: var(--fg-dim);
  font-size: 0.8rem;
  text-transform: lowercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.handle.copied {
  border-color: var(--accent);
}
.handle.copied .copy-hint {
  color: var(--accent);
}
.platform-note {
  margin: 0.45rem 0 0;
  color: var(--fg-dim);
  font-size: 0.85rem;
}

/* Outbound "open in <platform>" link, rendered when a deep_link is set. */
.open-link {
  display: inline-block;
  margin-top: 0.45rem;
  color: var(--accent);
  font-size: 0.85rem;
  text-decoration: none;
  border-bottom: 1px dotted var(--border-bright);
  padding: 0.1em 0;
  min-height: 32px;
}
.open-link:hover, .open-link:focus {
  color: var(--fg-bright);
  outline: none;
}

/* ── Privacy ───────────────────────────────── */
.privacy-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.privacy-list li {
  display: flex;
  gap: 0.6rem;
  padding: 0.35rem 0;
  font-size: 0.92rem;
}
.privacy-list .ok { color: var(--fg); flex-shrink: 0; width: 1ch; }
.privacy-list .warn { color: var(--warn); flex-shrink: 0; width: 1ch; }
/* Single flex child holding the item's text + any inline markup. min-width:0
   lets it shrink so long content (e.g. a URL) wraps instead of overflowing. */
.privacy-text { min-width: 0; }
.privacy-list strong { color: var(--fg-bright); font-weight: 700; }
.privacy-list a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-bright);
  overflow-wrap: anywhere;
}
.privacy-list a:hover,
.privacy-list a:focus { color: var(--fg-bright); outline: none; }

/* ── CTF (optional block, only rendered if ctf_url is set) ─── */
.ctf a {
  display: inline-block;
  color: var(--accent);
  border-bottom: 1px dotted var(--border);
  padding: 0.1em 0;
  text-decoration: none;
}
.ctf a:hover, .ctf a:focus { color: var(--fg-bright); }

/* ── Footer ────────────────────────────────── */
.ftr {
  border-top: 1px solid var(--border);
  margin-top: 1.5rem;
  padding-top: 0.6rem;
  color: var(--fg-dim);
  font-size: 0.85rem;
  text-align: center;
}
.ftr p { margin: 0.2rem 0; }

/* ── Toast (tap-to-copy feedback) ──────────── */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(2rem);
  background: var(--bg-panel);
  border: 1px solid var(--border-bright);
  color: var(--fg-bright);
  padding: 0.45rem 0.9rem;
  font-size: 0.9rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 100;
}
.toast.visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Emergency gate (must-confirm overlay) ─────────────── */
/* Fixed full-viewport overlay. top/right/bottom/left (not `inset`) for the
   widest browser support; flexbox centering works everywhere. The card
   scrolls inside the overlay on very short (landscape phone) viewports. */
.emergency-gate {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  /* Keep the card clear of notches/home indicators (viewport-fit=cover). */
  padding: calc(1.25rem + env(safe-area-inset-top))
           calc(1.25rem + env(safe-area-inset-right))
           calc(1.25rem + env(safe-area-inset-bottom))
           calc(1.25rem + env(safe-area-inset-left));
  background: rgba(0, 0, 0, 0.96);
  /* Progressive enhancement — ignored where unsupported. */
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* JS adds this once the visitor confirms. Higher specificity than the
   base rule above, so it wins over display:flex. */
.emergency-gate.is-dismissed { display: none; }

/* Card matches the .platform panels: bg-panel + the dim --border, no glow. */
.emergency-card {
  width: 100%;
  max-width: 30rem;
  margin: auto;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 1.1rem 1.1rem 1.2rem;
}
.emergency-title {
  margin: 0 0 0.9rem;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-bright);
}
.emergency-body p {
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
  color: var(--fg);
}
.emergency-body strong { color: var(--fg-bright); }

/* The 000 call-out — red text, no box, the focal element of the dialog.
   Higher specificity than `.emergency-body p` so the red wins over the
   body's green. */
.emergency-body .emergency-call {
  text-align: center;
  margin: 1rem 0;
  color: var(--err);
}
/* 000 sits inline at the same size as the rest of the dialog text, just
   bold + red for emphasis. */
.emergency-call a {
  font-weight: 700;
  color: var(--err);
  text-decoration: none;
  -webkit-tap-highlight-color: rgba(255, 0, 64, 0.2);
}
.emergency-call a:hover,
.emergency-call a:focus { text-decoration: underline; outline: none; }
.emergency-call a:focus-visible {
  outline: 2px solid var(--err);
  outline-offset: 2px;
}

/* Button mirrors the tap-to-copy .handle: dark bg, dim border, --fg text,
   and a hover that just brightens the border (no solid-green fill). */
.emergency-confirm {
  display: block;
  width: 100%;
  margin-top: 1.2rem;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.6rem 0.6rem;
  min-height: 44px;
  cursor: pointer;
  text-align: center;
  -webkit-tap-highlight-color: rgba(0, 255, 65, 0.15);
}
.emergency-confirm:hover,
.emergency-confirm:focus {
  border-color: var(--border-bright);
  outline: none;
}
.emergency-confirm:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Lock background scroll while the gate is open. Applied by JS so JS-disabled
   visitors (gate hidden) keep a scrollable page. */
html.gate-open,
html.gate-open body { overflow: hidden; }

/* ── Wider screens get a little breathing room ─── */
@media (min-width: 640px) {
  body { font-size: 16px; }
  main { padding: 1.5rem 1.5rem 3rem; }
  .handle-long .handle-text { font-size: 0.85rem; }
  .emergency-title { font-size: 1.5rem; }
}

/* --- Campaign lifecycle additions --- */

/* Countdown (pre-launch page) */
.countdown-panel { text-align: center; }
.countdown-teaser { font-size: 1.1rem; opacity: 0.85; margin-bottom: 1.25rem; }
.countdown { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.cd-unit { display: flex; flex-direction: column; align-items: center; min-width: 3.5rem; }
.cd-num { font-size: 2.4rem; font-variant-numeric: tabular-nums; line-height: 1; }
.cd-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.7; margin-top: 0.35rem; }
.countdown-live { margin-top: 1.25rem; font-weight: 600; }

/* Deadline line (live page) */
.deadline { text-align: center; font-weight: 600; margin: 0.5rem 0 1rem; }

/* Reporting other crimes block. Each item is a plain card (matching the
   .platform cards) — dim border, no accent, so the green-accented support
   callout stays the page's single focal point. */
.report-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.report-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  padding: 0.6rem 0.7rem;
}
.report-name { font-weight: 600; color: var(--fg-bright); }
.report-detail { font-size: 0.9rem; opacity: 0.8; }
.report-contact { font-size: 0.9rem; }
.report-contact a, .report-fallback a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--border-bright);
  overflow-wrap: anywhere;
}
.report-contact a:hover, .report-contact a:focus,
.report-fallback a:hover, .report-fallback a:focus { color: var(--fg-bright); outline: none; }
.report-fallback { margin-top: 1rem; font-size: 0.9rem; opacity: 0.85; }

/* Closed state hides the platform CTA (handles are public post-launch, but
   there is no reason to surface them once submissions have closed). */
.state-closed .platforms { display: none; }

/* Top-of-page intro hook (live page only) */
.intro-heading { font-size: 1.4rem; line-height: 1.25; margin: 0 0 0.75rem; }
.intro-lead { margin: 0 0 0.5rem; }
.intro-points { margin: 0 0 0.75rem; padding-left: 1.25rem; }
.intro-points li { margin: 0.2rem 0; }
.intro-tail { margin: 0; }

/* "It's okay to speak up" support block (live + closed). Intentionally warmer
   than the system panels: sentence-case heading and a soft accented callout
   card for the Kids Helpline contact, so it reads as care rather than process. */
.panel.support p { font-size: 0.95rem; margin: 0 0 0.7rem; }
.support-title { font-size: 1.25rem; letter-spacing: 0.02em; }
.support-card {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  padding: 0.8rem 0.9rem;
  margin: 0.4rem 0 0.9rem;
}
.support-card p { margin: 0 0 0.3rem; }
.support-card p:last-child { margin-bottom: 0; }
.support-card-title { color: var(--fg-bright); font-weight: 700; }
.support-line { font-size: 1.05rem; }
.support-card a { color: var(--accent); text-decoration: none; }
.support-line a { font-weight: 700; }
.support-meta { font-size: 0.85rem; opacity: 0.85; }
.support-meta a { border-bottom: 1px dotted var(--border-bright); overflow-wrap: anywhere; }
.support-card a:hover, .support-card a:focus { color: var(--fg-bright); outline: none; }
.support-emergency { font-size: 0.9rem; }
.support-emergency a { color: var(--err); font-weight: 700; text-decoration: none; }
.support-emergency a:hover, .support-emergency a:focus { color: var(--fg-bright); outline: none; }