/* checkins-superhuman.css — Editorial-classic LIGHT check-in screen.
   Cream page, white question cards, gold progress fill, espresso submit.
   Libre Baskerville + Montserrat. Cohesive with grow-progress-superhuman. */

html[data-skin="superhuman"]{
  --ws-page-bg:#F7F3EC; --ws-card-bg:#FFFFFF; --ws-text:#211C16; --ws-text-dim:#6E6557;
  --ws-accent:#C9A96E; --ws-field-border:#E7DFD0; --ws-bottom-bar-bg:#211B14;
  --ws-font-head:'Libre Baskerville',Georgia,serif; --ws-font-body:'Montserrat','Helvetica Neue',Arial,sans-serif;

  --gp-page:#F7F3EC; --gp-card:#FFFFFF; --gp-ink:#211C16;
  --gp-ink-mid:#6E6557; --gp-ink-dim:#A39A8B; --gp-accent:#C0A063;
  --gp-accent-dk:#8A6A2E; --gp-accent-dim:rgba(192,160,99,0.085); --gp-accent-border:rgba(192,160,99,0.28);
  --gp-border:#EAE2D3; --gp-border-lt:#F1EBDF; --gp-deep:#241D15;
  --gp-on-deep:#F4ECDC; --gp-green:#3C6B4E; --gp-amber:#A85A23;
  --gp-r-sm:12px; --gp-r-md:16px; --gp-r-lg:20px; --gp-r-xl:26px; --gp-r-pill:999px;
  --gp-sh:0 1px 2px rgba(36,29,21,0.04),0 4px 14px rgba(36,29,21,0.045);
  --gp-sh-md:0 2px 6px rgba(36,29,21,0.05),0 14px 36px rgba(36,29,21,0.08);
}

/* HARD RULE 2 — one page color across the chain */
html[data-skin="superhuman"] body{background:#D8CFBF;}
html[data-skin="superhuman"] .frame{
  background:var(--gp-page);
  box-shadow:0 24px 70px rgba(36,29,21,0.20);
}
html[data-skin="superhuman"] .gp-status{color:var(--gp-ink);font-weight:600;letter-spacing:.01em;}

/* ===== drill header — editorial masthead (matches detail screens) ===== */
html[data-skin="superhuman"] .gp-drill-head{padding:8px 22px 18px;gap:14px;align-items:center;}
html[data-skin="superhuman"] .gp-back{
  width:44px;height:44px;border:1px solid #E7DECF;background:#FFFFFF;
  box-shadow:0 1px 2px rgba(36,29,21,0.05),0 3px 10px rgba(36,29,21,0.05);color:var(--gp-ink);
}
html[data-skin="superhuman"] .gp-dh-eye{font-size:9.5px;letter-spacing:.24em;color:var(--gp-accent-dk);font-weight:700;}
html[data-skin="superhuman"] .gp-dh-ttl{font-size:28px;letter-spacing:-0.022em;line-height:1.0;margin-top:5px;font-weight:700;color:var(--gp-ink);}

/* ===== progress strip — gold fill ===== */
html[data-skin="superhuman"] .gp-ck-prog{padding:0 22px 20px;}
html[data-skin="superhuman"] .gp-ck-prog > div:first-child{
  font-size:11.5px !important;color:var(--gp-ink-mid) !important;font-weight:600 !important;
  letter-spacing:.02em;text-transform:none;margin-bottom:13px !important;
}
html[data-skin="superhuman"] .gp-ck-prog-bar{
  height:6px;background:#EAE2D3;border:1px solid #E4DBCB;border-radius:var(--gp-r-pill);
}
html[data-skin="superhuman"] .gp-ck-prog-fill{
  background:linear-gradient(90deg,var(--gp-accent),var(--gp-accent-dk));
  box-shadow:0 1px 3px rgba(192,160,99,0.4);
}
html[data-skin="superhuman"] .gp-ck-prog-txt{margin-top:10px;font-size:11px;}
html[data-skin="superhuman"] .gp-ck-prog-l{color:var(--gp-ink-dim);font-weight:600;letter-spacing:.01em;}
html[data-skin="superhuman"] .gp-ck-prog-r{color:var(--gp-accent-dk);font-weight:700;letter-spacing:.01em;}

/* ===== question cards — white, editorial, gold-ruled top ===== */
html[data-skin="superhuman"] .gp-q-card{
  margin:0 20px 13px;background:#FFFFFF;border:1px solid #ECE4D5;
  border-radius:var(--gp-r-lg);box-shadow:var(--gp-sh);padding:17px 19px;
  position:relative;overflow:hidden;
}
/* gold rule on the ACTIVE (pending) card to draw the eye */
html[data-skin="superhuman"] .gp-q-card:not(.submitted)::before{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,var(--gp-accent),rgba(192,160,99,0));opacity:.85;
}
/* submitted cards recede gently — still raised above page, not double-slab */
html[data-skin="superhuman"] .gp-q-card.submitted{
  background:#FBF8F2;border-color:#EFE8DA;box-shadow:0 1px 2px rgba(36,29,21,0.03);
}
html[data-skin="superhuman"] .gp-q-top{margin-bottom:13px;gap:12px;}
html[data-skin="superhuman"] .gp-q-num{
  font-size:9.5px;letter-spacing:.18em;color:var(--gp-accent-dk);font-weight:700;margin-bottom:6px;
}
html[data-skin="superhuman"] .gp-q-text{
  font-family:var(--gp-serif);font-size:17px;font-weight:700;line-height:1.28;
  letter-spacing:-0.01em;color:var(--gp-ink);
}
/* state chips */
html[data-skin="superhuman"] .gp-q-state{
  font-size:8.5px;letter-spacing:.1em;font-weight:700;padding:5px 11px;border-radius:var(--gp-r-pill);
}
html[data-skin="superhuman"] .gp-q-state.done{
  background:rgba(60,107,78,0.10);color:var(--gp-green);border:1px solid rgba(60,107,78,0.22);
}
html[data-skin="superhuman"] .gp-q-state.pending{
  background:rgba(168,90,35,0.10);color:var(--gp-amber);border:1px solid rgba(168,90,35,0.24);
}
/* answer block — quiet recessed cream */
html[data-skin="superhuman"] .gp-q-answer{
  font-family:var(--gp-serif);font-size:14px;font-style:italic;line-height:1.6;
  color:var(--gp-ink);background:#FBF8F2;border:1px solid #EFE8DA;
  border-left:3px solid var(--gp-accent);border-radius:8px;padding:13px 15px;
}
/* textarea input */
html[data-skin="superhuman"] .gp-q-input{
  min-height:84px;border:1.5px solid #E7DECF;border-radius:var(--gp-r-sm);
  background:#FBF8F2;font-family:var(--gp-sans);font-size:14px;color:var(--gp-ink);padding:13px 15px;
}
html[data-skin="superhuman"] .gp-q-input::placeholder{color:var(--gp-ink-dim);font-style:italic;}
html[data-skin="superhuman"] .gp-q-input:focus{
  outline:none;border-color:var(--gp-accent);background:#FFFFFF;
  box-shadow:0 0 0 3px rgba(192,160,99,0.14);
}

/* ===== scale row — serif numerals, espresso selected ===== */
html[data-skin="superhuman"] .gp-scale-row{gap:9px;}
html[data-skin="superhuman"] .gp-scale-dot{
  height:48px;border:1.5px solid #E7DECF;border-radius:var(--gp-r-sm);background:#FBF8F2;
  font-family:var(--gp-serif);font-size:18px;font-weight:700;color:var(--gp-ink-mid);
}
html[data-skin="superhuman"] .gp-scale-dot.sel{
  background:var(--gp-deep);border-color:var(--gp-deep);color:var(--gp-accent);
  box-shadow:0 3px 10px rgba(36,29,21,0.2);
}

/* ===== submit — espresso ink, gold ink + arrow ===== */
html[data-skin="superhuman"] .gp-submit{
  margin:8px 20px 0;min-height:56px;background:var(--gp-deep);color:var(--gp-accent);
  border-radius:var(--gp-r-md);font-size:15px;font-weight:700;letter-spacing:.02em;
  box-shadow:0 4px 16px rgba(36,29,21,0.22);
}
html[data-skin="superhuman"] .gp-submit svg{color:var(--gp-accent);}

/* FIX 2026-06-21: live check-in scale uses .scale-btn (numbers 1-10), NOT the harness .gp-scale-dot.
   Base sets color:var(--ws-accent) on bg:var(--ws-accent) => number invisible. Theme it visibly. */
html[data-skin="superhuman"] .scale-btn{ background:#FBF8F2 !important; color:var(--gp-ink) !important; border:1.5px solid var(--gp-accent-border) !important; }
html[data-skin="superhuman"] .scale-btn.selected{ background:var(--gp-deep) !important; color:var(--gp-accent) !important; border-color:var(--gp-deep) !important; }
/* clear the bottom nav so the last question/scale isn't squeezed under it */

/* LIVE LAYOUT SHIM (superhuman, 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="superhuman"] .gp-ck-head.gp-drill-head{ display:flex; align-items:center; gap:14px; padding:4px 20px 16px; }
html[data-skin="superhuman"] .gp-ck-prog{ display:block; border:0; background:transparent; padding:0 20px 16px; margin:0; }
html[data-skin="superhuman"] .gp-ck-prog-lead{ font-size:12px; font-weight:500; margin-bottom:11px; color:var(--gp-ink-dim,#8a857c); }
html[data-skin="superhuman"] .gp-ck-prog-bar{ width:100%; overflow:hidden; }
html[data-skin="superhuman"] .gp-ck-prog-fill{ height:100%; display:block; }
html[data-skin="superhuman"] .gp-ck-prog-txt{ display:flex; justify-content:space-between; align-items:center; margin-top:8px; }
html[data-skin="superhuman"] .gp-ck-card-top.gp-q-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
html[data-skin="superhuman"] .gp-ck-qhead{ flex:1; min-width:0; }
html[data-skin="superhuman"] .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="superhuman"] .gp-ck-submit.gp-submit{ display:flex; align-items:center; justify-content:center; gap:8px; width:calc(100% - 40px); border:0; }
html[data-skin="superhuman"] .gp-ck-submit.gp-submit svg{ width:14px; height:14px; flex-shrink:0; }