/* Practice sheets. Seventeen pages carried this byte-for-byte in a <style>
   block until it lived here: thirteen emotion sheets and four toolkits.

   Page-scoped and token-driven. Every accent reads --ws / --ws-ink / --ws-rgb,
   set inline on <article class="sheet"> so one sheet can be anger and the next
   the lemon gold without a line of CSS changing. To make the next sheet: swap
   those three vars, the lemon image, and the content. The structure is fixed.

   Loaded after global.css and emotion.css, which is the order the inline block
   sat in and the order these rules expect. */

/* ============================================
   PRACTICE SHEET - page-scoped, token-driven
   Every accent uses --ws / --ws-rgb (set on .sheet).
   To make the next sheet: swap the two vars, the
   lemon image, and the content. Structure is fixed.
   ============================================ */

.ws-page {
  padding: 116px 24px 88px;
}

.sheet {
  max-width: 840px;
  margin: 0 auto;
  background: #FFFDF7;
  border: 1px solid rgba(47, 58, 46, 0.08);
  box-shadow: 0 1px 50px rgba(47, 58, 46, 0.07);
  padding: 60px 64px 56px;
}

/* --- Masthead --- */
.ws-masthead {
  text-align: center;
  position: relative;
  padding-bottom: 8px;
}
.ws-glow {
  position: absolute;
  top: -32px; left: 50%;
  transform: translateX(-50%);
  width: 340px; height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ws-rgb), 0.16), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.ws-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ws-ink, var(--ws));
  margin-bottom: 26px;
  position: relative;
  z-index: 1;
}
.ws-lemon {
  width: 188px; height: 188px;
  margin: 0 auto 4px;
  position: relative;
  z-index: 1;
}
.ws-lemon img {
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 12px 30px rgba(var(--ws-rgb), 0.30));
  animation: float 6s ease-in-out infinite;
}
.ws-title {
  font-family: var(--font-headline);
  font-size: clamp(3rem, 7vw, 4.4rem);
  color: var(--ws-ink, var(--ws));
  letter-spacing: 0.04em;
  line-height: 1;
  margin-bottom: 6px;
  position: relative; z-index: 1;
}
.ws-archetype {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  position: relative; z-index: 1;
}
.ws-orient {
  max-width: 440px;
  margin: 0 auto;
  font-size: 0.98rem;
  color: var(--text-muted);
  line-height: 1.7;
  position: relative; z-index: 1;
}
.ws-tools {
  display: flex;
  justify-content: center;
  margin-top: 26px;
  position: relative; z-index: 1;
}
.ws-save {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: none;
  border: 1px solid rgba(47, 58, 46, 0.18);
  padding: 9px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.ws-save:hover { border-color: var(--ws-ink, var(--ws)); color: var(--ws-ink, var(--ws)); }
.ws-save svg { width: 14px; height: 14px; }

/* --- Section scaffold --- */
.ws-rule {
  height: 1px;
  background: rgba(47, 58, 46, 0.1);
  border: 0;
  margin: 52px 0;
}
.ws-num {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ws-ink, var(--ws));
  margin-bottom: 12px;
}
.ws-h {
  font-family: var(--font-headline);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  color: var(--text);
  line-height: 1.15;
  margin-bottom: 8px;
}
.ws-sub {
  color: var(--text-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 30px;
}

/* --- 01 · The Wiser Way (ready reckoner grid) --- */
.ws-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ws-step {
  background: rgba(var(--ws-rgb), 0.04);
  border: 1px solid rgba(var(--ws-rgb), 0.16);
  padding: 26px 26px 28px;
}
.ws-step .n {
  font-family: var(--font-headline);
  font-size: 2.1rem;
  color: var(--ws-ink, var(--ws));
  line-height: 1;
  opacity: 0.92;
}
.ws-step h4 {
  font-family: var(--font-headline);
  font-size: 1.32rem;
  color: var(--text);
  margin: 12px 0 7px;
}
.ws-step p {
  font-size: 0.94rem;
  color: var(--text-muted);
  line-height: 1.62;
}
.ws-step .cue {
  display: block;
  margin-top: 12px;
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 1.04rem;
  color: var(--ws-ink, var(--ws));
}

/* --- 02 · In the moment (regulation callout) --- */
.ws-reset {
  background: rgba(var(--ws-rgb), 0.06);
  border-left: 3px solid var(--ws);
  padding: 32px 36px 34px;
}
.ws-reset-kicker {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ws-ink, var(--ws));
  margin-bottom: 8px;
}
.ws-reset h3 {
  font-family: var(--font-headline);
  font-size: 1.7rem;
  color: var(--text);
  margin-bottom: 14px;
}
.breath {
  margin: 4px 0 18px;
  max-width: 340px;
}
.breath svg { width: 100%; height: auto; display: block; }
.breath-caption {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  margin-top: 4px;
}
.ws-reset-how {
  font-size: 1rem;
  color: var(--text);
  line-height: 1.75;
  margin-bottom: 14px;
}
.ws-reset-how strong { color: var(--ws-ink, var(--ws)); font-weight: 500; }
.ws-reset-ground {
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* --- Practice illustration (the lemon doing the practice) --- */
.ws-practice-art {
  margin: 0 0 26px;
  border-radius: 16px;
  overflow: hidden;
  background: #F4ECDA;
  border: 1px solid rgba(var(--ws-rgb), 0.18);
  box-shadow: 0 1px 30px rgba(47, 58, 46, 0.06);
}
.ws-practice-art img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 03 · Try this (walking practice) --- */
.ws-try {
  background: rgba(47, 58, 46, 0.04);
  border: 1px solid rgba(47, 58, 46, 0.1);
  padding: 38px 40px;
}
.ws-try-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 22px;
}
.ws-try h3 {
  font-family: var(--font-headline);
  font-size: 1.55rem;
  color: var(--ws-ink, var(--ws));
}
.ws-try .dur {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-subtle);
  white-space: nowrap;
}
.ws-tlist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ws-tlist li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.ws-tnum {
  flex-shrink: 0;
  width: 28px; height: 28px;
  border: 1px solid rgba(var(--ws-rgb), 0.4);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-headline);
  font-size: 0.95rem;
  color: var(--ws-ink, var(--ws));
  margin-top: 1px;
}
.ws-tlist p {
  font-size: 0.97rem;
  color: var(--text);
  line-height: 1.62;
}
.ws-tlist em {
  font-family: var(--font-headline);
  font-style: italic;
  color: var(--text-muted);
}
.ws-try-body {
  font-size: 0.97rem;
  color: var(--text);
  line-height: 1.74;
}

/* --- 04 · Journal (fillable) --- */
.ws-prompt { margin-bottom: 30px; }
.ws-prompt:last-child { margin-bottom: 0; }
.ws-q {
  font-family: var(--font-headline);
  font-size: 1.22rem;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 14px;
}
.ws-write {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  line-height: 2.4rem;
  min-height: 7.2rem;
  padding: 0 2px;
  outline: none;
  background-image: linear-gradient(to bottom, transparent calc(2.4rem - 1px), rgba(47, 58, 46, 0.2) 2.4rem);
  background-size: 100% 2.4rem;
  background-attachment: local;
}
.ws-write:focus { background-image: linear-gradient(to bottom, transparent calc(2.4rem - 1px), rgba(var(--ws-rgb), 0.45) 2.4rem); }
.ws-write:empty::before {
  content: attr(data-ph);
  color: var(--text-subtle);
  font-style: italic;
}

/* --- Footer --- */
.ws-close {
  text-align: center;
  margin-top: 8px;
}
.ws-close .line {
  font-family: var(--font-headline);
  font-style: italic;
  font-size: 1.28rem;
  color: var(--text);
  line-height: 1.5;
  max-width: 470px;
  margin: 0 auto 30px;
}
.ws-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.ws-actions .btn { cursor: pointer; }
.ws-links {
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
}
.ws-links a {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ws-links a:hover { color: var(--ws-ink, var(--ws)); opacity: 1; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .ws-page { padding: 96px 16px 64px; }
  .sheet { padding: 40px 24px 44px; }
  .ws-grid { grid-template-columns: 1fr; }
  .ws-reset, .ws-try { padding: 28px 24px; }
}

/* --- Print: a clean A4 document --- */
@media print {
  @page { size: A4; margin: 15mm; }
  :root { --bg: #ffffff; }
  html, body { background: #fff !important; }
  .site-nav, .site-footer, .skip-link, .nav-toggle, .whatsapp-fab,
  .ws-tools, .ws-actions, .ws-links { display: none !important; }
  .ws-page { padding: 0; }
  .sheet {
    max-width: none;
    border: 0;
    box-shadow: none;
    background: #fff;
    padding: 0;
  }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .ws-glow { display: none; }
  .ws-lemon { width: 132px; height: 132px; }
  .ws-lemon img { animation: none !important; }
  .ws-rule { margin: 22px 0; }
  .ws-masthead, .ws-step, .ws-reset, .ws-try, .ws-prompt, .ws-practice-art { break-inside: avoid; }
  .ws-practice-art { max-width: 460px; margin-left: auto; margin-right: auto; }
  .ws-num, .ws-h, .ws-sub, .ws-q { break-after: avoid; }
  .ws-masthead { padding-bottom: 4px; }
  .ws-write:empty::before { content: ''; }
  .ws-write { background-image: linear-gradient(to bottom, transparent calc(2.4rem - 1px), rgba(47, 58, 46, 0.55) 2.4rem); }
  .ws-close .line { margin-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ws-lemon img { animation: none; }
}

/* ============================================
   TOOLKIT SHEETS
   Four sheets (your-values, daily-journal, emotion-granularity,
   physiological-sigh) add a word bank and fill-in lines on top of the
   structure above. The other thirteen never load these rules; they cost
   under a kilobyte and save a second request.
   ============================================ */

.tk-words { font-size: 0.95rem; color: var(--text-muted); line-height: 1.7; }
.tk-bank { line-height: 2.6; }
.tk-bank span { display: inline-block; margin: 4px 6px; padding: 4px 8px; font-size: 1.02rem; color: var(--text); border-bottom: 1px solid transparent; transition: border-color .25s ease, color .25s ease; cursor: default; }
.tk-bank span:hover { color: var(--ws-ink, var(--ws)); border-bottom-color: rgba(var(--ws-rgb),0.5); }
.tk-line { display:flex; align-items:baseline; gap:12px; margin-bottom: 18px; }
.tk-line .lab { font-family: var(--font-headline); font-style: italic; color: var(--text-muted); font-size: 1.05rem; white-space:nowrap; }
.tk-fill { flex:1; min-height: 2.4rem; outline:none; border-bottom: 1px solid rgba(47,58,46,0.22); font-family: var(--font-body); }
.tk-fill:focus { border-bottom-color: rgba(var(--ws-rgb),0.5); }
.tk-bigwrite { min-height: 24rem; }
.tk-when .ws-step { background: rgba(var(--ws-rgb),0.04); border:1px solid rgba(var(--ws-rgb),0.16); }
.tk-when .ws-step h4 { margin-top:0; }
@media print {
  .tk-bank span { border-bottom-color: transparent; }
  .tk-bigwrite { min-height: 22rem; background-image: linear-gradient(to bottom, transparent calc(2.4rem - 1px), rgba(47,58,46,0.55) 2.4rem); }
  .tk-fill { border-bottom-color: rgba(47,58,46,0.55); }
}