/* ============================================================
   checkins-peak.css — "PEAK" dark athletic skin · Check-in screen
   Ink page · raised charcoal question cards · LIME accent · Space Grotesk
   Pure-CSS overlay scoped to html[data-skin="peak"]. No DOM change.
   Mirrors grow-progress-peak.css language exactly.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

html[data-skin="peak"]{
  --gp-page:#0C0D0B;
  --gp-card:#181A15;
  --gp-card-2:#1E211B;
  --gp-ink:#F2F4ED;
  --gp-ink-mid:#A7AC9D;
  --gp-ink-dim:#73786C;
  --gp-accent:#C5F542;
  --gp-accent-dk:#C5F542;
  --gp-accent-dim:rgba(197,245,66,0.10);
  --gp-accent-border:rgba(197,245,66,0.28);
  --gp-border:#262922;
  --gp-border-lt:#22251E;
  --gp-deep:#0E100D;
  --gp-on-deep:#F2F4ED;
  --gp-green:#9BE36A;
  --gp-amber:#F2B33D;
  --gp-serif:'Space Grotesk',sans-serif;
  --gp-sans:'Space Grotesk',sans-serif;
  --gp-r-sm:11px; --gp-r-md:15px; --gp-r-lg:18px; --gp-r-xl:22px; --gp-r-pill:999px;
  --gp-sh:0 1px 0 rgba(255,255,255,0.02),0 4px 14px rgba(0,0,0,0.45);
  --gp-sh-md:0 1px 0 rgba(255,255,255,0.03),0 10px 30px rgba(0,0,0,0.55);
}

/* page chrome — ONE page color */
html[data-skin="peak"] body{background:#000;color:var(--gp-ink);}
html[data-skin="peak"] .frame{
  background:var(--gp-page);
  box-shadow:0 24px 70px rgba(0,0,0,0.6);
  border:1px solid #1A1C16;
}
html[data-skin="peak"] .gp-status{
  color:var(--gp-ink);font-family:var(--gp-sans);font-weight:600;letter-spacing:.01em;
}

/* ---- drill header (cohesive with detail screens) ---- */
html[data-skin="peak"] .gp-drill-head{padding:6px 20px 16px;}
html[data-skin="peak"] .gp-back{
  background:var(--gp-card);border:1px solid var(--gp-border);
  color:var(--gp-ink);box-shadow:var(--gp-sh);
}
html[data-skin="peak"] .gp-dh-eye{
  color:var(--gp-accent);font-family:var(--gp-sans);font-weight:600;
  letter-spacing:.2em;font-size:9.5px;text-transform:uppercase;
}
html[data-skin="peak"] .gp-dh-ttl{
  font-family:var(--gp-serif);font-weight:700;letter-spacing:-0.025em;
  color:var(--gp-ink);font-size:27px;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */
html[data-skin="peak"] .gp-ck-prog{padding:0 20px 18px;}
html[data-skin="peak"] .gp-ck-prog > div:first-child{
  color:var(--gp-ink-mid)!important;font-family:var(--gp-sans);font-weight:500;
}
html[data-skin="peak"] .gp-ck-prog-bar{
  background:#1E211B;border:1px solid var(--gp-border);height:6px;
}
html[data-skin="peak"] .gp-ck-prog-fill{
  background:var(--gp-accent);
  box-shadow:0 0 10px rgba(197,245,66,0.35);
}
html[data-skin="peak"] .gp-ck-prog-txt{margin-top:9px;}
html[data-skin="peak"] .gp-ck-prog-l{
  color:var(--gp-ink-dim);font-family:var(--gp-sans);font-weight:500;letter-spacing:.01em;
}
html[data-skin="peak"] .gp-ck-prog-r{
  color:var(--gp-accent);font-family:var(--gp-sans);font-weight:600;letter-spacing:.01em;
}

/* ============================================================
   QUESTION CARDS — raised charcoal, hairline, lime accents
   ============================================================ */
html[data-skin="peak"] .gp-q-card{
  background:var(--gp-card);border:1px solid var(--gp-border);
  box-shadow:var(--gp-sh-md);border-radius:var(--gp-r-lg);
  padding:17px 18px;margin:0 20px 12px;
}
/* submitted cards: slightly deeper so the OPEN question (current) reads as the focus */
html[data-skin="peak"] .gp-q-card.submitted{
  background:var(--gp-deep);border-color:var(--gp-border-lt);box-shadow:var(--gp-sh);
}
/* current/open card gets a faint lime left edge to draw the eye */
html[data-skin="peak"] .gp-q-card:not(.submitted){
  border-color:var(--gp-accent-border);
  box-shadow:var(--gp-sh-md),inset 2px 0 0 var(--gp-accent);
}

html[data-skin="peak"] .gp-q-num{
  color:var(--gp-ink-dim);font-family:var(--gp-sans);font-weight:600;
  letter-spacing:.16em;font-size:9.5px;
}
html[data-skin="peak"] .gp-q-text{
  color:var(--gp-ink);font-family:var(--gp-sans);font-weight:600;
  font-size:15px;line-height:1.42;
}

/* state pills */
html[data-skin="peak"] .gp-q-state{
  font-family:var(--gp-sans);font-weight:600;letter-spacing:.08em;
}
html[data-skin="peak"] .gp-q-state.done{
  background:rgba(197,245,66,0.12);color:var(--gp-accent);
  border:1px solid var(--gp-accent-border);
}
html[data-skin="peak"] .gp-q-state.done svg{stroke-width:1.8;}
html[data-skin="peak"] .gp-q-state.pending{
  background:rgba(233,236,226,0.06);color:#AEB4A2;
  border:1px solid rgba(233,236,226,0.18);
}

/* submitted answer block — readable inset surface (no double-dark) */
html[data-skin="peak"] .gp-q-answer{
  background:#101209;border:1px solid var(--gp-border);
  color:var(--gp-ink);font-family:var(--gp-sans);
  font-size:13.5px;line-height:1.6;border-radius:var(--gp-r-sm);padding:12px 14px;
}

/* textarea for open question */
html[data-skin="peak"] .gp-q-input{
  background:#101209;border:1.5px solid var(--gp-border);
  color:var(--gp-ink);font-family:var(--gp-sans);font-size:14px;
  border-radius:var(--gp-r-sm);
}
html[data-skin="peak"] .gp-q-input::placeholder{color:var(--gp-ink-dim);}
html[data-skin="peak"] .gp-q-input:focus{
  outline:none;border-color:var(--gp-accent);
  box-shadow:0 0 0 3px rgba(197,245,66,0.12);
}

/* ---- scale dots — selected = LIME ---- */
html[data-skin="peak"] .gp-scale-dot{
  background:#101209;border:1.5px solid var(--gp-border);
  color:var(--gp-ink-mid);font-family:var(--gp-serif);font-weight:700;
}
html[data-skin="peak"] .gp-scale-dot.sel{
  background:var(--gp-accent);border-color:var(--gp-accent);color:#0C0D0B;
  box-shadow:0 2px 12px rgba(197,245,66,0.28);
}

/* ============================================================
   SUBMIT — lime-filled, dark text (matches Home CTA discipline)
   ============================================================ */
html[data-skin="peak"] .gp-submit{
  background:var(--gp-accent);color:#0C0D0B;
  font-family:var(--gp-sans);font-weight:700;letter-spacing:.01em;
  border-radius:var(--gp-r-md);
  box-shadow:0 4px 18px rgba(197,245,66,0.24);
}
html[data-skin="peak"] .gp-submit svg{stroke-width:2;}

html[data-skin="peak"] .gp-scroll-pad{height:60px;}

/* FIX 2026-06-21: real live scale class .scale-btn (dark theme — light number, lime selected) + bottom clearance. */
html[data-skin="peak"] .scale-btn{ background:#181A15 !important; color:#E9ECE2 !important; border:1.5px solid rgba(197,245,66,0.32) !important; }
html[data-skin="peak"] .scale-btn.selected{ background:var(--gp-accent) !important; color:#0C0D0B !important; border-color:var(--gp-accent) !important; }

/* LIVE LAYOUT SHIM (peak, 2026-06-21c) — the live template now emits the proposal gp-* classes
   alongside the base gp-ck-* names. Give that structure the proposal geometry so the approved
   per-theme rules land (the unscoped base styled .gp-ck-prog as a horizontal no-bar row). */
html[data-skin="peak"] .gp-ck-head.gp-drill-head{ display:flex; align-items:center; gap:14px; padding:4px 20px 16px; }
html[data-skin="peak"] .gp-ck-prog{ display:block; border:0; background:transparent; padding:0 20px 16px; margin:0; }
html[data-skin="peak"] .gp-ck-prog-lead{ font-size:12px; font-weight:500; margin-bottom:11px; color:var(--gp-ink-dim,#8a857c); }
html[data-skin="peak"] .gp-ck-prog-bar{ width:100%; overflow:hidden; }
html[data-skin="peak"] .gp-ck-prog-fill{ height:100%; display:block; }
html[data-skin="peak"] .gp-ck-prog-txt{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
html[data-skin="peak"] .gp-ck-card-top.gp-q-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
html[data-skin="peak"] .gp-ck-qhead{ flex:1; min-width:0; }
html[data-skin="peak"] .gp-ck-status.gp-q-state{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; flex-shrink:0; text-transform:none; }
html[data-skin="peak"] .gp-ck-submit.gp-submit{ display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 40px); border:0; }
html[data-skin="peak"] .gp-ck-submit.gp-submit svg{ width:14px; height:14px; flex-shrink:0; }