/* Visual language of NVC Rising's printed Empathy Walk booklet.
   Keep this theme separate from the interaction and responsive layout rules. */
body[data-page="empathy-walk-game"]{background:var(--paper);color:var(--ink);}
.walk{--walk-ink:var(--ink);--walk-muted:var(--ink-soft);--walk-line:var(--line);--booklet-serif:'Times New Roman',Times,serif;background:radial-gradient(ellipse at 10% 70%,#e8dff080,transparent 48%),radial-gradient(ellipse at 80% 0%,#f8deec65,transparent 46%),var(--paper);}
.walk-header{position:relative;border-bottom:0;}
.walk-header::after{content:'';position:absolute;bottom:0;left:42px;right:42px;height:2px;background:var(--gradient-spectrum);}
.walk-reference{border-color:var(--line);}
.walk-reference a{text-decoration-color:#c4adc0;}
.walk .tiny{font-family:var(--font-mono);font-weight:400;letter-spacing:.16em;}
.walk h1,.garden-caption h2,.walk dialog h2{font-family:var(--booklet-serif);letter-spacing:-.025em;}
.walk h1{color:var(--ink-soft);font-size:clamp(38px,4.2vw,57px);font-weight:400;line-height:1.08;}
.intro h1{font-size:clamp(58px,5.5vw,78px);color:var(--ink);margin-top:20px;margin-bottom:22px;}
.intro h1 em{color:var(--brand);font-weight:400;}
.intro .tiny{color:var(--brand-ink);}
.seed-mark{display:none;}
.cover-invitation{font-family:var(--booklet-serif);font-size:26px;font-style:italic;color:var(--brand-ink);line-height:1.4;margin:0 0 16px;}
.garden-caption h2{font-size:36px;}.garden-caption .tiny{color:var(--ink-faint);font-size:10px;}
.garden-caption p{font-size:14px;}
.garden-art{opacity:.65;}
.garden-art .plant,.garden-art .butterfly{opacity:.55;}
.booklet-giraffe{position:absolute;right:-2%;bottom:3%;width:23%;height:auto;pointer-events:none;filter:drop-shadow(0 8px 5px #54415810);animation:booklet-breathe 9s ease-in-out infinite;transform-origin:bottom center;}
.booklet-stones{position:absolute;bottom:0;left:0;width:20%;height:auto;pointer-events:none;}
.stones{position:relative;width:100%;height:100%;}
.stone-number{border-radius:50%;background:color-mix(in srgb,var(--stone) 86%,white);box-shadow:0 0 0 6px color-mix(in srgb,var(--stone) 13%,var(--paper)),0 0 0 7px color-mix(in srgb,var(--stone) 45%,var(--paper));}
.stone-label{background:#fbf8f3e8;color:var(--ink-soft);}
.stone[aria-current] .stone-number{box-shadow:0 0 0 6px color-mix(in srgb,var(--stone) 14%,var(--paper)),0 0 0 8px var(--stone);}
.garden-bottom{font-family:var(--booklet-serif);font-size:18px;color:var(--ink-soft);}
.walk .primary{background:var(--brand-ink);border-color:var(--brand-ink);}
.walk .secondary{background:#f8edf3;border-color:#e5cddc;color:#763554;}
.length-option[aria-pressed=true]{background:var(--accent-magenta-soft);border-color:var(--brand);}
.walk .length-option{border-radius:12px;}
.deep-toggle input{accent-color:var(--brand-ink);}
.walk :focus-visible{outline-color:var(--brand-ink);}
.walk h1:focus{outline:none;}
.station-meta{padding-bottom:20px;border-bottom:1px solid var(--line);margin-bottom:28px;}
.station-meta>.tiny{color:color-mix(in srgb,var(--station) 78%,var(--ink));}
.booklet-heading{display:flex;align-items:flex-start;gap:20px;margin-bottom:25px;}
.booklet-heading>div{min-width:0;}
.booklet-heading h1{margin:0 0 8px;}
.booklet-station-mark{display:block;flex:none;width:45px;height:45px;margin:8px 7px 0;background:color-mix(in srgb,var(--station) 80%,white);border-radius:50%;box-shadow:0 0 0 7px color-mix(in srgb,var(--station) 14%,var(--paper)),0 0 0 9px var(--station);}
.station-invitation{font-family:var(--booklet-serif);font-style:italic;font-size:23px;line-height:1.35;color:color-mix(in srgb,var(--station) 83%,var(--ink));margin:0;}
.station-hint{max-width:none;line-height:1.75;}
/* A real writable notebook page: line-height and ruling share one measure. */
.notebook-field{--ruling:38px;background:white;border:1px solid var(--line-strong);border-left:4px solid var(--station,var(--brand));border-radius:15px;margin:26px 0 18px;padding:22px 24px 12px;box-shadow:0 3px 10px #2a223304;}
.walk .notebook-field label.field-label{display:block;font-family:var(--booklet-serif);font-style:italic;font-size:22px;line-height:1.4;font-weight:400;color:var(--ink);margin:0 0 12px;}
.walk .notebook-field textarea{display:block;border:0;border-radius:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--ruling) - 1px),#d6c9b57a calc(var(--ruling) - 1px),#d6c9b57a var(--ruling));background-position:0 0;line-height:var(--ruling);font-size:18px;padding:0 0 4px;min-height:calc(var(--ruling)*4 + 4px);color:var(--ink-soft);resize:vertical;}
.walk .notebook-field textarea::placeholder{color:#8a8294;}
.walk .notebook-field textarea:focus-visible{outline:0;}
.notebook-field:focus-within{border-color:color-mix(in srgb,var(--station,var(--brand)) 55%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--station,var(--brand)) 10%,transparent);}
.writing-space{border-color:var(--line);}.writing-space .notebook-field{margin-top:4px;}
.thought-return{background:var(--accent-rose-soft);border:1px solid #e4b5af;border-left:3px solid var(--accent-rose);border-radius:12px;}
.thought-return blockquote{font-family:var(--booklet-serif);font-style:italic;}
.thought-bubble{background:var(--accent-rose-soft);color:var(--ink-soft);}
.walk button.word{background:linear-gradient(155deg,#fff7fb,var(--accent-magenta-soft));border-color:#edc0d9;color:#8d3b6b;}
.walk button.word::before{background:var(--brand);}
.walk button.word[aria-pressed=true]{background:linear-gradient(145deg,#c44e8f,var(--brand-ink));border-color:var(--brand-ink);color:white;}
.walk .need{background:linear-gradient(155deg,#fffaf0,var(--accent-gold-soft));border-color:#e3d19d;color:#77602f;}
.walk .need[aria-pressed=true]{background:linear-gradient(145deg,#efdaa0,#dfbd65);border-color:#ba963d;color:#59451f;}
.walk .feeling-thread{background:var(--accent-magenta-soft);border-color:#eabbd5;color:#773759;}
.walk .feeling-thread[aria-pressed=true]{background:#efc7df;border-color:var(--brand-ink);}
.walk .custom-word input,.walk select{background:white;border-color:var(--line-strong);color:var(--ink-soft);}
.nudge{background:color-mix(in srgb,var(--station,var(--brand)) 10%,var(--paper));border-left-color:var(--station,var(--brand));padding:12px 16px;border-radius:0 10px 10px 0;color:var(--ink-soft);}
.breath-flower i{background:#bbb5e866;}.breath-need,.breath-cue{color:#655aa2;}
.forgiveness{background:var(--accent-green-soft);border:1px solid #c7ddb9;border-radius:14px;padding:22px 16px;}
.forgiveness p,.forgiveness select{font-family:var(--booklet-serif);}.forgiveness select{background:transparent;}
.walk-card{background:white;border-color:var(--line-strong);border-left:4px solid var(--accent-coral);box-shadow:0 6px 0 -3px #eee6dd;}
.walk-card>.tiny{border-image:var(--gradient-spectrum) 1;}.card-line p{font-family:var(--booklet-serif);}.card-line>span{font-family:var(--font-mono);}
.walk dialog{background:var(--paper);}.recovery-notice{background:#f4eaf1;color:var(--ink-soft);border-color:var(--line);}
@keyframes booklet-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@media(hover:hover) and (pointer:fine){.walk .primary:hover{background:#963060;}.walk button.word:hover{border-color:var(--brand);}.walk .need:hover{border-color:#c8a347;}}
@media(max-width:760px){
 .walk-header::after{left:16px;right:16px;}
 .is-walking .garden{background:#fbf8f3f7;border-color:var(--line);}
 .is-walking .booklet-giraffe,.is-walking .booklet-stones{display:none;}
 .is-walking .stone-number{width:28px;height:28px;}
 .is-walking .stone-label{color:var(--ink-soft);background:none;}
 .is-walking .stones::before{background:var(--line-strong);}
 .garden-caption h2{font-size:29px;}.garden-caption .tiny{font-size:9px;}
 .intro h1{font-size:64px;}.cover-invitation{font-size:24px;}
 .station-meta{gap:8px;margin-bottom:26px;padding-bottom:16px;}
 .booklet-heading{gap:15px;}.booklet-heading h1{font-size:37px;}
 .booklet-station-mark{width:28px;height:28px;margin:7px 5px 0;box-shadow:0 0 0 5px color-mix(in srgb,var(--station) 14%,var(--paper)),0 0 0 6px var(--station);}
 .station-invitation{font-size:21px;}
 .notebook-field{padding:19px 17px 12px;--ruling:36px;}
 .walk .notebook-field label.field-label{font-size:21px;}
 .walk .notebook-field textarea{font-size:18px;}
}