/* Call Purple — standalone phone-line demo.
   Native-fracktron palette (dark green-black, terminal green) with a
   playful hardware-phone treatment. Self-contained (no home.css dep) so
   it deploys as its own static bundle. */

:root {
  --bg: #080b08;
  --panel: #0e130e;
  --panel-2: #131a13;
  --ink: #e7f4e7;
  --muted: #8fae8f;
  --line: rgba(120, 200, 120, 0.16);
  --green: #5cff72;
  --green-dim: #2f8a3d;
  --purple: #b98bff;
  --purple-dim: #6d4bb0;
  --danger: #ff6b5c;
  --radius: 16px;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background:
    radial-gradient(1100px 600px at 50% -10%, rgba(92, 255, 114, 0.06), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  min-height: 100%;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--green); color: #000; padding: 0.5rem 0.9rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; z-index: 20; }

.shell { width: min(880px, 92vw); margin: 0 auto; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: rgba(8, 11, 8, 0.85); backdrop-filter: blur(6px); position: sticky; top: 0; z-index: 10; }
.header-row { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 0; }
.wordmark { font-family: var(--mono); font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.05rem; letter-spacing: -0.02em; }
.wordmark-cursor { display: inline-block; width: 0.55ch; height: 1.05em; background: var(--green); margin-left: 2px; vertical-align: -2px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.primary-nav { display: flex; gap: 1rem; margin-left: 0.5rem; }
.primary-nav a { color: var(--muted); text-decoration: none; font-size: 0.9rem; font-family: var(--mono); }
.primary-nav a:hover { color: var(--green); }
.auth-controls { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.auth-controls a { color: var(--green); text-decoration: none; }
.auth-controls .identity-name { color: var(--ink); font-family: var(--mono); }
.auth-controls img { width: 26px; height: 26px; border-radius: 50%; vertical-align: middle; }

/* Intro */
.call-main { padding: 2.4rem 0 4rem; }
.call-intro { text-align: center; margin-bottom: 2rem; }
.call-eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--purple); text-transform: uppercase; }
.call-intro h1 { font-size: clamp(2.2rem, 6vw, 3.4rem); margin: 0.5rem 0 0.6rem; letter-spacing: -0.03em; }
.call-intro p { color: var(--muted); max-width: 34rem; margin: 0 auto; line-height: 1.55; }
.call-intro strong { color: var(--green); }

/* Phone shell */
.phone-shell {
  width: min(420px, 100%);
  margin: 0 auto;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: 26px;
  padding: 1.1rem;
  box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.phone-topbar { display: flex; align-items: center; gap: 0.4rem; padding: 0 0.3rem 0.8rem; }
.phone-topbar .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.phone-label { font-family: var(--mono); font-size: 0.72rem; color: var(--muted); margin-left: 0.35rem; }
.on-air {
  margin-left: auto; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  padding: 0.2rem 0.5rem; border-radius: 999px; border: 1px solid var(--line);
  color: var(--muted); background: rgba(0,0,0,0.25); transition: all 0.25s;
}
.on-air[data-on="true"] { color: #000; background: var(--danger); border-color: var(--danger); box-shadow: 0 0 16px rgba(255, 107, 92, 0.6); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.72; } }

.phone-screen {
  background: radial-gradient(120% 100% at 50% 0%, rgba(92,255,114,0.05), transparent 70%), #060806;
  border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem; min-height: 190px;
  display: flex; flex-direction: column;
}

/* Meters */
.meters { display: flex; gap: 0.8rem; margin-bottom: 0.7rem; }
.meter { flex: 1; display: flex; align-items: center; gap: 0.4rem; }
.meter-cap { font-family: var(--mono); font-size: 0.62rem; color: var(--muted); width: 3.2em; }
.meter-bar { --level: 0; flex: 1; height: 6px; border-radius: 4px; background: rgba(255,255,255,0.06); position: relative; overflow: hidden; }
.meter-bar::after { content: ""; position: absolute; inset: 0; width: calc(var(--level) * 100%); border-radius: 4px; transition: width 0.06s linear; }
.meter-you .meter-bar::after { background: var(--green); }
.meter-purple .meter-bar::after { background: var(--purple); }

/* Transcript */
.transcript { flex: 1; overflow-y: auto; max-height: 220px; display: flex; flex-direction: column; gap: 0.45rem; margin-bottom: 0.6rem; padding-right: 0.2rem; }
.tx-row { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.88rem; line-height: 1.4; }
.tx-who { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; }
.tx-you .tx-who { color: var(--green-dim); }
.tx-purple .tx-who { color: var(--purple-dim); }
.tx-you .tx-text { color: var(--ink); }
.tx-purple .tx-text { color: #efe7ff; }

.call-status { margin: auto 0 0; font-family: var(--mono); font-size: 0.82rem; color: var(--muted); text-align: center; min-height: 1.4em; }

/* Call button */
.call-button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%; margin-top: 1rem; padding: 1rem 1.2rem;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--mono); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.01em;
  color: #001a06; background: var(--green);
  transition: transform 0.12s, background 0.2s, filter 0.2s;
}
.call-button:hover { filter: brightness(1.08); }
.call-button:active { transform: scale(0.98); }
.call-button:disabled { cursor: default; filter: grayscale(0.4) brightness(0.8); }
.call-button-icon { font-size: 1.2rem; }
.call-button-ring { position: absolute; inset: -4px; border-radius: 999px; border: 2px solid var(--green); opacity: 0; }
.call-button[data-mode="hangup"] { background: var(--danger); color: #180000; }
body[data-call-phase="dialing"] .call-button-ring,
body[data-call-phase="ringing"] .call-button-ring,
body[data-call-phase="queued"] .call-button-ring { opacity: 1; animation: ring 1s ease-out infinite; }
body[data-call-phase="queued"] .call-button-ring { animation-duration: 1.8s; }
@keyframes ring { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(1.15); opacity: 0; } }

/* Gate */
.call-gate .gate-line { color: var(--ink); text-align: center; margin: 0.4rem 0 1rem; }
.gate-login { display: block; text-align: center; padding: 0.85rem; border-radius: 999px; background: var(--green); color: #001a06; font-family: var(--mono); font-weight: 700; text-decoration: none; }
.gate-login:hover { filter: brightness(1.08); }
.gate-fine { color: var(--muted); font-size: 0.75rem; text-align: center; margin-top: 0.8rem; }

/* Mic card */
.mic-card { width: min(420px, 100%); margin: 1rem auto 0; background: var(--panel-2); border: 1px solid var(--danger); border-radius: var(--radius); padding: 1.1rem 1.2rem; }
.mic-card h2 { margin: 0 0 0.4rem; font-size: 1.05rem; color: var(--danger); }
.mic-card p { margin: 0 0 0.6rem; color: var(--ink); font-size: 0.9rem; }
.mic-card ul { margin: 0 0 0.8rem; padding-left: 1.1rem; color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.mic-dismiss { border: 1px solid var(--line); background: transparent; color: var(--ink); padding: 0.45rem 0.9rem; border-radius: 999px; cursor: pointer; font-family: var(--mono); }
.mic-dismiss:hover { border-color: var(--green); color: var(--green); }

.call-fine { width: min(420px, 100%); margin: 1.2rem auto 0; color: var(--muted); font-size: 0.78rem; text-align: center; line-height: 1.5; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); padding: 1.5rem 0; margin-top: 2rem; }
.site-footer a { color: var(--muted); text-decoration: none; font-family: var(--mono); font-size: 0.85rem; }
.site-footer a:hover { color: var(--green); }