/* Energy Elevation: mobile-first styles */

/* ============================================================
   THEME TOKENS. To reskin, change values in this block only.
   Component rules and the result chart (core.js) read from these.
   Current theme ported from the Claude Design direction:
   warm paper, Newsreader serif + Hanken Grotesk sans, sky accent.
   ============================================================ */
:root{
  /* Palette */
  --ink:#232B33;        /* primary text */
  --ink2:#59616B;       /* secondary text */
  --muted:#9AA1A8;      /* tertiary / labels */
  --bg:#FAF8F4;         /* page background (warm paper) */
  --bg2:#F1EDE6;        /* track / pill background */
  --card:#FFFFFF;       /* surface */
  --line:#E8E3DC;       /* borders, gridlines */

  --accent:#2D72B8;     /* sky blue: peak, primary actions */
  --accent-press:#28649E;
  --accent-glow:rgba(45,114,184,.22);

  --good:#4F8C6B;  --good-line:#CBE0D3;  --good-soft:#EFF6F1;   /* energizes */
  --valley:#B26A50; --valley-line:#E6CFC6; --valley-soft:#FAF1EE; /* drains */
  --star:#E8A93B;

  /* Aliases used by the chart and chips */
  --sky:#2D72B8; --sky-deep:#2D72B8; --sky-soft:#E3ECF5;

  /* Typography */
  --font-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-serif:'Newsreader',Georgia,'Times New Roman',serif;

  /* Shape */
  --radius-card:20px;   /* swipe card */
  --radius-lg:16px;     /* stage, panels */
  --radius-md:11px;     /* buttons */
  --radius-sm:10px;     /* inputs */
  --radius-pill:999px;

  /* Effects + layout */
  --shadow:0 1px 2px rgba(30,40,50,.04),0 14px 34px rgba(30,40,50,.05);
  --shadow-btn:0 1px 2px rgba(30,40,50,.06),0 10px 26px var(--accent-glow);
  --maxw:520px;
}
/* ============================================================ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  background:var(--bg); color:var(--ink); line-height:1.5;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.wrap{ max-width:var(--maxw); margin:0 auto; padding:14px 16px 18px; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; }
.stage{ background:transparent; flex:1; display:flex; flex-direction:column; }

h1{ font-family:var(--font-serif); font-weight:500; font-size:30px; margin:0 0 6px; line-height:1.12; letter-spacing:-.01em; }
h2{ font-family:var(--font-serif); font-weight:500; font-size:24px; margin:0 0 8px; line-height:1.2; letter-spacing:-.01em; }
.sub{ color:var(--muted); font-size:14px; margin:0 0 18px; }
.lead{ font-size:16px; line-height:1.6; margin:0 0 16px; color:var(--ink2); }
.eyebrow{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-bottom:14px; }
.note{ font-size:12px; color:var(--muted); margin-top:16px; border-top:1px solid var(--line); padding-top:12px; line-height:1.55; }

/* Buttons */
button{ font:inherit; cursor:pointer; border:none; border-radius:var(--radius-md); }
.btn-primary{ background:var(--accent); color:#fff; padding:16px; font-weight:600; font-size:17px; width:100%; font-family:var(--font-sans); box-shadow:var(--shadow-btn); transition:transform .15s ease, filter .15s ease; }
.btn-primary:active{ transform:translateY(1px); }
.btn-primary:hover{ filter:brightness(1.04); }
.btn-ghost{ background:none; color:var(--ink2); padding:12px 0; font-weight:500; font-size:15px; }
.back{ background:none; color:var(--ink2); font-size:14px; font-weight:500; padding:10px 0; border:none; }
.back:active{ color:var(--accent); }
.nav{ margin-top:16px; min-height:22px; }

/* Progress */
.progress{ height:5px; background:var(--bg2); border-radius:var(--radius-pill); overflow:hidden; margin-bottom:8px; }
.progress > i{ display:block; height:100%; background:var(--accent); width:0; transition:width .4s cubic-bezier(.2,.8,.2,1); }
.count{ font-size:12px; color:var(--muted); margin-bottom:18px; letter-spacing:.05em; text-transform:uppercase; font-weight:600; }
.prompt-label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; font-weight:600; text-align:center; }

/* Swipe card (Layer 1) */
.cardzone{ flex:1; display:flex; align-items:center; justify-content:center; }
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:26px 22px; width:100%; min-height:150px; touch-action:none; user-select:none; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-serif); font-weight:400; font-size:26px; line-height:1.28; letter-spacing:-.005em;
  text-align:center; color:var(--ink); box-shadow:var(--shadow);
  transition:transform .05s linear, box-shadow .15s ease, border-color .15s ease;
}
.card.tag-e{ border-color:var(--good); box-shadow:0 0 0 3px var(--good-soft); }
.card.tag-d{ border-color:var(--valley); box-shadow:0 0 0 3px var(--valley-soft); }
.card.tag-n{ border-color:var(--accent); box-shadow:0 0 0 3px var(--sky-soft); }
.swipes{ display:flex; gap:10px; margin-top:18px; }
.swipe{ flex:1; padding:15px 8px; border:1px solid var(--line); border-radius:13px; background:var(--card); font-weight:600; font-size:15px; min-height:54px; color:var(--ink2); transition:transform .12s ease; }
.swipe:active{ transform:translateY(1px); }
.swipe.neutral{ flex:0 0 74px; }
.swipe.drain{ border-color:var(--valley-line); background:var(--valley-soft); color:var(--valley); }
.swipe.energize{ border-color:var(--good-line); background:var(--good-soft); color:var(--good); }
.swipehint{ text-align:center; font-size:13px; color:var(--muted); margin-top:16px; }

/* Swipe card v2: dark title + gray quarter-circle cues */
.prompt-title{ text-align:center; font-family:var(--font-sans); font-size:19px; font-weight:600; color:var(--ink); line-height:1.3; margin:4px 0 14px; }
.swipe-stage{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:0; }
.swipe-row{ display:flex; align-items:center; justify-content:center; gap:6px; width:100%; }
.swipe-row .card{ width:auto; flex:1 1 auto; min-width:0; max-width:300px; font-size:22px; padding:24px 18px; }
.cue{ display:flex; flex-direction:column; align-items:center; gap:3px; cursor:pointer; -webkit-tap-highlight-color:transparent; user-select:none; background:none; border:0; }
.cue:active{ opacity:.55; }
.cue-up{ margin-bottom:6px; }
.cue-lab{ font-size:12px; font-weight:600; color:var(--muted); }
.cue-arc{ width:50px; height:130px; display:block; }
.cue-arc.up{ width:58px; height:34px; }

/* Would-you-rather (Layer 2): left vs right */
.vs{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:12px; margin-top:10px; flex:1; }
.opt{
  flex:1; aspect-ratio:4/5; max-height:62vh; padding:18px 14px; border:1px solid var(--line); background:var(--card); font-size:16px;
  font-weight:600; text-align:center; color:var(--ink); box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center; transition:transform .12s ease, border-color .15s ease;
}
.opt:active{ transform:translateY(1px); border-color:var(--accent); }
.or{ align-self:center; color:var(--muted); font-size:13px; letter-spacing:.08em; flex:0 0 auto; }

/* Result */
.res-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-block; background:var(--bg2); color:var(--ink2); font-size:11px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:5px 11px; border-radius:var(--radius-pill); }
.readout{ margin:14px 0 2px; font-size:15px; line-height:1.55; color:var(--ink2); }
.readout b{ font-family:var(--font-serif); font-weight:500; color:var(--accent); }
.panel{ border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--card); padding:14px 14px 8px; box-shadow:var(--shadow); margin:12px 0 18px; }
svg{ width:100%; height:auto; display:block; }

/* Forms */
.field{ margin:14px 0; }
.field label{ display:block; font-size:13px; font-weight:600; color:var(--ink2); margin-bottom:6px; }
.field input, .field textarea, .field select{
  width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font:inherit; background:var(--card); color:var(--ink); outline:none;
}
.field input:focus, .field textarea:focus{ border-color:var(--accent); }
.stars{ display:flex; gap:8px; }
.star{ font-size:30px; line-height:1; color:var(--line); background:none; border:none; padding:2px 4px; }
.star.on{ color:var(--star); }
.row2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }

.center{ text-align:center; }
.spacer{ flex:1; }
.linkbox{ display:flex; gap:8px; margin-top:8px; }
.linkbox input{ flex:1; }
.copy{ background:var(--accent); color:#fff; font-weight:600; padding:0 16px; border-radius:var(--radius-sm); }
.msg{ font-size:13px; margin-top:8px; }
.msg.ok{ color:var(--good); }
.msg.err{ color:var(--valley); }

/* Admin */
.stat{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:12px 0; }
.statcard{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius-md); padding:14px; }
.statcard .n{ font-family:var(--font-serif); font-size:26px; font-weight:500; }
.statcard .l{ font-size:12px; color:var(--muted); }
table.norms{ width:100%; border-collapse:collapse; font-size:14px; margin-top:8px; }
table.norms th, table.norms td{ text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); }
table.norms th{ font-size:12px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
table.norms td.num{ text-align:right; font-variant-numeric:tabular-nums; }

/* Chart animations (respected by reduced-motion) */
@keyframes ee-draw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
@keyframes ee-pop{ from{ opacity:0; transform:scale(.4); } to{ opacity:1; transform:scale(1); } }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; } }

/* ---- Team shape ---- */
.cta-card{ background:var(--sky-soft); border:1px solid #D4E1EF; border-radius:var(--radius-lg); padding:18px; }
.cta-card .field input{ background:var(--card); }

.pyr{ display:flex; flex-direction:column; gap:8px; }
.pyr-row{ display:flex; align-items:center; gap:10px; }
.pyr-lab{ flex:0 0 96px; font-family:var(--font-serif); font-size:14px; color:var(--ink); line-height:1.05; }
.pyr-lab i{ display:block; font-style:normal; font-family:var(--font-sans); font-size:9.5px; color:var(--muted); }
.pyr-track{ flex:1; text-align:center; }
.pyr-bar{ display:inline-block; height:18px; border-radius:9px; background:var(--accent); vertical-align:middle; transition:width .4s ease; }
.pyr-n{ flex:0 0 18px; text-align:right; font-size:12px; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; }

.cov-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); }
.cov-row:last-child{ border-bottom:0; }
.cov-lab{ font-family:var(--font-serif); font-size:15px; color:var(--ink); }
.cov-lab i{ font-style:normal; font-family:var(--font-sans); font-size:10px; color:var(--muted); margin-left:6px; }
.cov-chip{ font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase; padding:4px 9px; border-radius:var(--radius-pill); }
.cov-chip.covered{ background:var(--good-soft); color:var(--good); border:1px solid var(--good-line); }
.cov-chip.thin{ background:#FBF4E6; color:#9A7426; border:1px solid #ECDCB6; }
.cov-chip.gap{ background:var(--valley-soft); color:var(--valley); border:1px solid var(--valley-line); }

.roster{ display:flex; flex-direction:column; }
.roster-row{ display:flex; align-items:baseline; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.roster-row:last-child{ border-bottom:0; }
.r-name{ font-weight:600; color:var(--ink); }
.r-type{ font-family:var(--font-serif); color:var(--accent); }
.r-top{ margin-left:auto; font-size:12px; color:var(--muted); }

/* ---- QR + share + present ---- */
.invite-row{ display:flex; gap:8px; margin-top:10px; }
.invite-row .btn-ghost{ flex:1; }
.qr-box{ display:flex; flex-direction:column; align-items:center; gap:7px; margin-top:16px; }
.qr-box svg{ width:132px; height:132px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:7px; }
.qr-cap{ font-size:12px; color:var(--muted); }

.present-overlay{ position:fixed; inset:0; z-index:1000; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:28px; overflow:auto; }
.present-close{ position:absolute; top:14px; right:20px; font-size:32px; line-height:1; background:none; border:0; color:var(--muted); cursor:pointer; }
.present-grid{ display:flex; flex-wrap:wrap; gap:48px; align-items:center; justify-content:center; max-width:1000px; }
.present-left{ text-align:center; }
.present-qr svg{ width:300px; max-width:80vw; height:auto; background:#fff; border:1px solid var(--line); border-radius:18px; padding:16px; }
.present-eyebrow{ font-size:14px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-bottom:16px; }
.present-url{ margin-top:16px; font-size:22px; color:var(--accent); font-weight:600; }
.present-right{ width:340px; max-width:90vw; }
.present-title{ font-family:var(--font-serif); font-size:30px; color:var(--ink); text-align:center; margin-bottom:12px; }
.present-count{ text-align:center; margin-top:14px; font-size:17px; color:var(--ink2); font-weight:600; }