/* ============================================================
   StayIn Worksheet — shared presentation (screen + structure)
   ------------------------------------------------------------
   Layout, type, and the writing surface for every worksheet.
   Print/A4 rules live in worksheet-print.css.

   GRAYSCALE-FIRST: structure and hierarchy are carried by ink
   (dark forest tones), weight, and size — never by color alone.
   The spiral palette appears once, as a thin decorative tick,
   and degrades gracefully to gray. If all color were removed the
   sheet still reads as complete and professional.
   ============================================================ */

:root{
  --ink:        #213c29;   /* darkest — headings (reads ~30% gray) */
  --ink-2:      #2f4636;   /* body text */
  --ink-3:      #5d6f63;   /* helper / muted — still print-safe */
  --accent-b:   #c96f4c;   /* peach, enhancement only */
  --paper:      #FFFDF8;
  --paper-2:    #F6EFE0;
  --hair:       rgba(33,60,41,0.55);   /* footer hairline — dark enough for B&W */
  --write:      rgba(33,60,41,0.5);    /* writing rules — visible in grayscale */
  --box:        #213c29;               /* checkbox border — ink, not color */
  --sans:       "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --serif:      "Playfair Display", Georgia, "Times New Roman", serif;
  --rainbow: linear-gradient(90deg,#9bdc23 0%,#ff9a1a 26%,#e040c0 52%,#7d2de6 76%,#3acfff 100%);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  background:#EFE7D6;
  color:var(--ink-2);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
@media screen{
  body{ padding:28px 16px; display:flex; flex-direction:column; align-items:center; }
  /* prevent overflow on tablets between the mobile breakpoint and 210mm+padding */
  .sheet{ max-width:100%; }
}

/* ---------- The A4 sheet ---------- */
.sheet{
  width:210mm;
  min-height:297mm;
  background:var(--paper);
  color:var(--ink-2);
  padding:18mm 18mm 13mm;
  box-shadow:0 12px 40px rgba(33,60,41,0.14);
  border-radius:4px;
  display:flex;
  flex-direction:column;
}

/* ---------- Header ---------- */
.wk-head{ text-align:center; }
.wk-logo{ height:38px; width:auto; display:inline-block; }
.wk-title{
  font-family:var(--serif);
  font-weight:600;
  color:var(--ink);
  font-size:27pt;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin-top:13px;
}
.wk-sub{
  color:var(--ink-3);
  font-size:11pt;
  line-height:1.45;
  max-width:140mm;
  margin:9px auto 0;
  font-style:italic;
}
/* The single decorative accent. Pure enhancement → in grayscale it
   becomes a short neutral tick; nothing structural depends on it. */
.wk-rule{
  height:3px; width:60px; margin:14px auto 0;
  border-radius:3px; background:var(--rainbow);
}

/* ---------- Body grid (two airy columns) ---------- */
.sheet-body{
  margin-top:16px;
  flex:1;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:14mm;
  align-content:start;
}
.col{ display:flex; flex-direction:column; }

/* Generous breathing room between sections, no dividers. */
.sec{ break-inside:avoid; margin-bottom:17px; }
.sec:last-child{ margin-bottom:0; }

.sec-t{
  font-family:var(--sans);
  font-weight:700;
  color:var(--ink);
  font-size:11.5pt;
  line-height:1.25;
  letter-spacing:0.002em;
  margin-bottom:9px;
}
.sec-note{
  color:var(--ink-3);
  font-size:9pt;
  line-height:1.4;
  margin:-3px 0 9px;
}

/* ---------- "Before You Start" — light, no box ---------- */
.note-list{ list-style:none; }
.note-list li{
  position:relative;
  padding-left:19px;
  font-size:9.6pt;
  line-height:1.5;
  color:var(--ink-2);
}
.note-list li + li{ margin-top:7px; }
.note-list li::before{
  content:"✓";
  position:absolute; left:0; top:0;
  color:var(--ink);          /* ink, not color → survives grayscale */
  font-weight:700; font-size:9pt;
}

/* ---------- Write prompts ---------- */
.prompt{ font-size:9.6pt; line-height:1.45; color:var(--ink-2); }
.prompt-q{ font-weight:600; color:var(--ink); }
.prompt-eg{ color:var(--ink-2); font-style:italic; }
.prompt + .prompt{ margin-top:14px; }

/* a single ruled writing line */
.write{
  display:block;
  height:0;
  border-bottom:1.3px solid var(--write);
  margin-top:15px;
}
.write.big + .write.big{ margin-top:26px; }
.write.big{ margin-top:20px; }

/* ---------- Example openings (inspiration, no writing area) ---------- */
.examples{ list-style:none; }
.examples li{
  position:relative;
  padding-left:16px;
  font-size:9.6pt; line-height:1.5;
  color:var(--ink-2); font-style:italic;
}
.examples li + li{ margin-top:9px; }
.examples li::before{
  content:"•";
  position:absolute; left:2px; top:0;
  color:var(--ink);          /* ink bullet → survives grayscale */
  font-weight:700; font-style:normal;
}

/* ---------- Checkbox list ---------- */
.checks{ list-style:none; display:flex; flex-direction:column; gap:9px; }
/* Compact two-column layout — reduces vertical height for short responses. */
.checks.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:9px 12px; }
.check{
  display:flex; align-items:flex-start; gap:9px;
  font-size:9.6pt; line-height:1.4; color:var(--ink-2);
}
.box{
  flex:0 0 auto;
  width:13px; height:13px; margin-top:1px;
  border:1.5px solid var(--box);
  border-radius:3px;
  background:#fff;
}
.check.check-fill{ align-items:flex-end; }
.check.check-fill .box{ margin-top:0; }
.check-fill .write{ flex:1; margin-top:0; }

/* ---------- Footer CTA — one hairline, no heavy box ---------- */
.wk-foot{
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--hair);
  display:flex; align-items:center; gap:16px;
}
.foot-text{ flex:1; }
.foot-eyebrow{
  font-size:7.8pt; font-weight:700; letter-spacing:0.13em;
  text-transform:uppercase; color:var(--ink-2);
}
.foot-title{
  font-family:var(--serif); font-weight:600;
  color:var(--ink); font-size:14pt; line-height:1.15;
  margin-top:3px;
}
.foot-meta{ color:var(--ink-3); font-size:9pt; margin-top:4px; }
.foot-url{ color:var(--ink-3); font-size:8pt; margin-top:5px; word-break:break-all; }
.qr-wrap{ flex:0 0 auto; text-align:center; }
.qr{
  width:80px; height:80px;
  background:#fff; padding:5px;
  border:1px solid var(--hair);
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.qr img, .qr canvas{ width:100%!important; height:100%!important; display:block; }
.qr-cap{ font-size:7.2pt; color:var(--ink-3); margin-top:5px; letter-spacing:0.04em; }
.qr-link{
  display:block; margin-top:6px;
  font-size:7.8pt; font-weight:600; color:var(--ink-2);
  text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:1px; letter-spacing:0.01em;
}
@media print{ .qr-link{ display:none; } }

.wk-credit{
  text-align:center; color:var(--ink-3);
  font-size:7.6pt; letter-spacing:0.06em; margin-top:11px;
}

/* ---------- Download button (screen only) ---------- */
.dl-btn{
  position:fixed; right:24px; bottom:24px; z-index:50;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--ink); color:#fbf5e4;
  border:none; border-radius:999px;
  padding:13px 22px;
  font-family:var(--sans); font-weight:600; font-size:14px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(33,60,41,0.32);
  transition:transform .15s ease, box-shadow .15s ease;
}
.dl-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(33,60,41,0.4); }
.dl-btn svg{ width:17px; height:17px; }
.screen-hint{ text-align:center; color:#6f7e73; font-size:12px; margin:0 0 16px; }

/* ---------- Small-screen preview (SCREEN ONLY) ----------
   Must be screen-scoped: without it, A4's ~794px print width can fall
   under this breakpoint and collapse the printed sheet to one column
   (→ overflow to a 2nd page). Print always uses the two-column base. */
@media screen and (max-width:780px){
  body{ padding:14px 0; }
  .sheet{ width:100%; min-height:auto; padding:24px 20px 20px; border-radius:0; }
  .sheet-body{ grid-template-columns:1fr; }
  .wk-title{ font-size:23pt; }
  .wk-foot{ flex-direction:column; align-items:flex-start; }
  .qr-wrap{ align-self:center; }
}