/* checkins-hipster.css — Hipster skin for the Check-in screen.
   Pure CSS overlay scoped to html[data-skin="hipster"]. No DOM changes.
   Palette: cream page · forest ink · chartreuse single accent · hard offset shadow.
   Matches grow-progress-hipster.css (Home + detail screens) exactly. */

html[data-skin="hipster"]{
  /* ---- core palette (mirror Home) ---- */
  --gp-page:#F4ECDD;
  --gp-card:#FBF6EC;
  --gp-ink:#1F3A2E;
  --gp-ink-mid:#4E6354;
  --gp-ink-dim:#8A9489;
  --gp-accent:#C5F542;
  --gp-accent-dk:#2A4A38;
  --gp-accent-dim:rgba(31,58,46,0.055);
  --gp-accent-border:rgba(31,58,46,0.16);
  --gp-border:#1F3A2E;
  --gp-border-lt:rgba(31,58,46,0.12);
  --gp-deep:#1F3A2E;
  --gp-on-deep:#F4ECDD;
  --gp-green:#3A6B4C;
  --gp-amber:#A85A22;

  --gp-serif:'Libre Baskerville',Georgia,serif;
  --gp-sans:'Montserrat','Helvetica Neue',Arial,sans-serif;

  --gp-sh:3px 3px 0 0 #1F3A2E;
  --gp-sh-md:4px 4px 0 0 #1F3A2E;

  --gp-r-sm:10px; --gp-r-md:14px; --gp-r-lg:16px; --gp-r-xl:18px; --gp-r-pill:999px;
}

/* page + frame: ONE color */
html[data-skin="hipster"] body{background:#D8CFBC;}
html[data-skin="hipster"] .frame{background:var(--gp-page);}
html[data-skin="hipster"] .gp-status{color:var(--gp-ink);font-weight:700;}

/* ---- drill header (matches the detail screens) ---- */
html[data-skin="hipster"] .gp-drill-head{padding:4px 20px 18px;}
html[data-skin="hipster"] .gp-back{
  border:2px solid var(--gp-ink);background:var(--gp-card);
  box-shadow:3px 3px 0 0 var(--gp-ink);color:var(--gp-ink);
}
html[data-skin="hipster"] .gp-dh-eye{color:var(--gp-ink-mid);letter-spacing:.18em;font-weight:700;}
html[data-skin="hipster"] .gp-dh-ttl{font-size:30px;letter-spacing:-0.025em;color:var(--gp-ink);}

/* ============ PROGRESS BAR ============ */
html[data-skin="hipster"] .gp-ck-prog{padding:0 20px 18px;}
/* the "Questions from your coach" lead-in line */
html[data-skin="hipster"] .gp-ck-prog > div:first-child{color:var(--gp-ink-mid) !important;font-weight:600 !important;}
html[data-skin="hipster"] .gp-ck-prog-bar{
  height:7px;background:var(--gp-card);
  border:1.5px solid var(--gp-ink);border-radius:var(--gp-r-pill);overflow:hidden;
}
html[data-skin="hipster"] .gp-ck-prog-fill{
  background:var(--gp-accent);border-radius:0;height:100%;
}
html[data-skin="hipster"] .gp-ck-prog-l{color:var(--gp-ink-mid);font-weight:600;}
html[data-skin="hipster"] .gp-ck-prog-r{color:var(--gp-ink);font-weight:700;}

/* ============ QUESTION CARDS ============ */
html[data-skin="hipster"] .gp-q-card{
  background:var(--gp-card);
  border:2px solid var(--gp-ink);
  box-shadow:3px 3px 0 0 var(--gp-ink);
  border-radius:var(--gp-r-lg);
  margin:0 20px 16px;
}
/* submitted cards read as "settled" — keep one color, no competing slab */
html[data-skin="hipster"] .gp-q-card.submitted{
  background:var(--gp-card);box-shadow:2px 2px 0 0 var(--gp-ink);
}
html[data-skin="hipster"] .gp-q-num{color:var(--gp-ink-mid);letter-spacing:.14em;font-weight:700;}
html[data-skin="hipster"] .gp-q-text{color:var(--gp-ink);font-weight:700;}

/* state badges — done = forest chip / chartreuse tick; pending = hairline forest */
html[data-skin="hipster"] .gp-q-state.done{
  background:var(--gp-ink);color:var(--gp-accent);font-weight:700;
}
html[data-skin="hipster"] .gp-q-state.pending{
  background:transparent;color:var(--gp-ink-mid);
  border:1.5px solid var(--gp-accent-border);font-weight:700;
}

/* answer block — sits on page color, forest hairline (one-color rule) */
html[data-skin="hipster"] .gp-q-answer{
  background:var(--gp-page);color:var(--gp-ink);
  border:1.5px solid var(--gp-border-lt);border-radius:var(--gp-r-sm);
}
/* textarea — forest hairline field on page color */
html[data-skin="hipster"] .gp-q-input{
  background:var(--gp-page);color:var(--gp-ink);
  border:1.5px solid var(--gp-ink);border-radius:var(--gp-r-sm);
}
html[data-skin="hipster"] .gp-q-input::placeholder{color:var(--gp-ink-dim);}

/* ============ SCALE ROW ============ */
html[data-skin="hipster"] .gp-scale-dot{
  background:var(--gp-card);
  border:1.5px solid var(--gp-ink);
  border-radius:var(--gp-r-sm);
  color:var(--gp-ink-mid);font-family:var(--gp-serif);font-weight:700;
}
/* selected = forest fill, chartreuse number (per direction) */
html[data-skin="hipster"] .gp-scale-dot.sel{
  background:var(--gp-ink);border-color:var(--gp-ink);color:var(--gp-accent);
  box-shadow:2px 2px 0 0 var(--gp-ink);
}

/* ============ SUBMIT ============ */
html[data-skin="hipster"] .gp-submit{
  background:var(--gp-ink);color:var(--gp-accent);
  border:2px solid var(--gp-ink);
  box-shadow:3px 3px 0 0 var(--gp-ink);
  border-radius:var(--gp-r-md);font-weight:700;letter-spacing:.01em;
  width:calc(100% - 43px);margin:8px 20px 0;min-height:56px;
}
html[data-skin="hipster"] .gp-submit svg{color:var(--gp-accent);}

/* FIX 2026-06-21: real live scale class .scale-btn + bottom clearance (card was overlapping the nav). */
html[data-skin="hipster"] .scale-btn{ background:var(--gp-card) !important; color:var(--gp-ink) !important; border:1.5px solid var(--gp-ink) !important; }
html[data-skin="hipster"] .scale-btn.selected{ background:var(--gp-ink) !important; color:var(--gp-accent) !important; border-color:var(--gp-ink) !important; }

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