/* checkins-aura.css — "Aura" warm-minimal / calm skin — CHECK-IN screen
   Serene quiet-luxury: warm cream page, sage progress + selected scale-dots,
   olive submit. Inter, generous air, soft radii. Single-line labels.
   Pure-CSS overlay scoped to html[data-skin="aura"]. ZERO DOM change.
   Mirrors grow-progress-aura.css so all five screens are one product family. */

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

html[data-skin="aura"]{
  --gp-page:#F4F1EA;
  --gp-card:#FBFAF6;
  --gp-ink:#2B2A26;
  --gp-ink-mid:#6E6A60;
  --gp-ink-dim:#9A9588;
  --gp-accent:#6F7651;
  --gp-accent-dk:#565C3D;
  --gp-accent-dim:rgba(111,118,81,0.09);
  --gp-accent-border:rgba(111,118,81,0.22);
  --gp-border:#E6E1D6;
  --gp-border-lt:#ECE8DE;
  --gp-deep:#34372A;
  --gp-on-deep:#F1EFE6;
  --gp-green:#5A7350;
  --gp-amber:#9B6A3C;
  --gp-serif:'Inter',-apple-system,system-ui,sans-serif;
  --gp-sans:'Inter',-apple-system,system-ui,sans-serif;
  --gp-r-sm:14px; --gp-r-md:18px; --gp-r-lg:22px; --gp-r-xl:26px;
  --gp-sh:0 1px 2px rgba(52,55,42,0.04),0 4px 14px rgba(52,55,42,0.04);
  --gp-sh-md:0 2px 5px rgba(52,55,42,0.05),0 12px 32px rgba(52,55,42,0.06);
}

/* ---- outer frame chrome ---- */
html[data-skin="aura"] .frame{ background:var(--gp-page); box-shadow:0 24px 70px rgba(52,55,42,0.16); }
html[data-skin="aura"] .gp-status{ color:var(--gp-ink); font-weight:600; letter-spacing:-0.01em; }

/* ---- drill header — match the other four screens exactly ---- */
html[data-skin="aura"] .gp-drill-head{ padding:6px 22px 18px; gap:14px; }
html[data-skin="aura"] .gp-back{
  border:1px solid var(--gp-border); background:var(--gp-card);
  box-shadow:var(--gp-sh); color:var(--gp-ink);
}
html[data-skin="aura"] .gp-back svg{ color:var(--gp-ink-mid); }
html[data-skin="aura"] .gp-dh-eye{
  font-size:10px; font-weight:600; letter-spacing:.22em; color:var(--gp-accent-dk);
}
html[data-skin="aura"] .gp-dh-ttl{
  font-family:var(--gp-serif); font-size:27px; font-weight:600;
  letter-spacing:-0.03em; line-height:1.04; margin-top:5px; color:var(--gp-ink);
}

/* ---- progress block — sage fill, calm ---- */
html[data-skin="aura"] .gp-ck-prog{ padding:0 22px 20px; }
html[data-skin="aura"] .gp-ck-prog > div:first-child{
  font-size:13px !important; color:var(--gp-ink-mid) !important;
  font-weight:500 !important; letter-spacing:-0.005em; margin-bottom:13px !important;
}
html[data-skin="aura"] .gp-ck-prog-bar{ height:6px; background:var(--gp-border); border-radius:999px; }
html[data-skin="aura"] .gp-ck-prog-fill{
  background:var(--gp-accent); border-radius:999px;
  box-shadow:0 0 0 0.5px rgba(86,92,61,0.18) inset;
}
html[data-skin="aura"] .gp-ck-prog-txt{ margin-top:10px; }
html[data-skin="aura"] .gp-ck-prog-l{ font-size:11px; color:var(--gp-ink-dim); font-weight:500; letter-spacing:.005em; }
html[data-skin="aura"] .gp-ck-prog-r{ font-size:11px; color:var(--gp-accent-dk); font-weight:600; letter-spacing:-0.005em; }

/* ---- question cards — calm raised cards on the one page color ---- */
html[data-skin="aura"] .gp-q-card{
  margin:0 20px 12px; background:var(--gp-card);
  border:1px solid var(--gp-border); border-radius:var(--gp-r-lg);
  box-shadow:var(--gp-sh); padding:17px 18px;
}
/* submitted = quietly recessed so the pending question is the clear focus.
   Faint page-tinted fill + hairline, no elevation — never a dark slab. */
html[data-skin="aura"] .gp-q-card.submitted{
  background:linear-gradient(0deg, rgba(111,118,81,0.025), rgba(111,118,81,0.025)), var(--gp-page);
  border-color:var(--gp-border-lt); box-shadow:none;
}
html[data-skin="aura"] .gp-q-card.submitted .gp-q-answer{
  background:var(--gp-card); border-color:var(--gp-border-lt);
}
html[data-skin="aura"] .gp-q-top{ gap:12px; margin-bottom:13px; }
html[data-skin="aura"] .gp-q-num{
  font-size:9px; font-weight:600; letter-spacing:.18em; color:var(--gp-ink-dim); margin-bottom:6px;
}
html[data-skin="aura"] .gp-q-text{
  font-size:15px; font-weight:600; line-height:1.42; color:var(--gp-ink); letter-spacing:-0.012em;
}
html[data-skin="aura"] .gp-q-state{
  font-size:9px; font-weight:600; letter-spacing:.06em; padding:6px 11px; border-radius:999px;
}
html[data-skin="aura"] .gp-q-state.pending{
  background:rgba(155,106,60,0.10); color:var(--gp-amber);
}
html[data-skin="aura"] .gp-q-state.done{
  background:var(--gp-accent-dim); color:var(--gp-accent-dk); border:1px solid var(--gp-accent-border);
}
html[data-skin="aura"] .gp-q-state.done svg{ color:var(--gp-accent-dk); }

/* submitted answer — quiet inset on page color */
html[data-skin="aura"] .gp-q-answer{
  font-size:14px; color:var(--gp-ink); line-height:1.6;
  background:var(--gp-page); border:1px solid var(--gp-border-lt);
  border-radius:var(--gp-r-sm); padding:13px 15px;
}

/* textarea — serene, sage focus feel */
html[data-skin="aura"] .gp-q-input{
  min-height:82px; border:1.5px solid var(--gp-border); border-radius:var(--gp-r-sm);
  background:var(--gp-page); font-family:var(--gp-sans); font-size:14px;
  color:var(--gp-ink); padding:13px 15px; letter-spacing:-0.005em; line-height:1.55;
}
html[data-skin="aura"] .gp-q-input::placeholder{ color:var(--gp-ink-dim); }

/* scale dots — sage selected, calm unselected ---- */
html[data-skin="aura"] .gp-scale-row{ gap:9px; }
html[data-skin="aura"] .gp-scale-dot{
  height:48px; border:1.5px solid var(--gp-border); border-radius:var(--gp-r-sm);
  background:var(--gp-card); font-family:var(--gp-serif); font-size:17px;
  font-weight:600; color:var(--gp-ink-mid);
}
html[data-skin="aura"] .gp-scale-dot.sel{
  background:var(--gp-accent); border-color:var(--gp-accent); color:var(--gp-on-deep);
  box-shadow:0 1px 3px rgba(86,92,61,0.22);
}

/* ---- submit — olive, confident, generous tap target ---- */
html[data-skin="aura"] .gp-submit{
  margin:8px 20px 0; min-height:54px; background:var(--gp-accent); color:var(--gp-on-deep);
  border-radius:var(--gp-r-md); font-family:var(--gp-sans); font-size:15px;
  font-weight:600; letter-spacing:-0.01em; gap:9px;
  box-shadow:0 2px 8px rgba(86,92,61,0.20);
}
html[data-skin="aura"] .gp-submit svg{ color:var(--gp-on-deep); }

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

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