/* Турбо-улитка — home.css (HOME screen only) */
.home{display:grid;gap:1.75rem;padding-top:.25rem}
.home-main{display:grid;gap:1.25rem;min-width:0}
.home-side{display:flex;flex-direction:column;gap:1.25rem;min-width:0}

/* hero */
.hero{position:relative;display:grid;gap:.75rem;padding-top:.25rem}
.hero h1{font-size:clamp(2rem, 1.3rem + 2.7vw, 3.15rem);line-height:1.12;max-width:14ch;letter-spacing:-.028em;outline-offset:4px;position:relative}
.hero h1 mark{background:linear-gradient(transparent 58%, var(--hl-bg) 58%, var(--hl-bg) 93%, transparent 93%);color:var(--hl-ink);padding:0 .06em;margin:0 -.06em;border-radius:.2em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero .lead{max-width:40ch;position:relative}
.author-line{position:relative;padding-left:2.1rem;color:var(--ink-2);max-width:46ch}
.author-line::before{content:"";position:absolute;left:0;top:.78em;width:1.5rem;height:2px;border-radius:2px;background:var(--clay)}
.author-line b{color:var(--ink);font-weight:650}
.hero-sprig{position:absolute;right:-.25rem;top:2.4rem;width:5rem;height:auto;pointer-events:none}
.hero-sprig .s1{fill:var(--deco)}
.hero-sprig .s2{fill:none;stroke:var(--deco);stroke-width:3;stroke-linecap:round}
.ff{opacity:var(--ff-op)} .ff0{stop-color:var(--firefly);stop-opacity:.95} .ff1{stop-color:var(--firefly);stop-opacity:0}

/* main actions */
.home-acts{display:grid;gap:.75rem}
.act-main{position:relative;overflow:hidden;display:flex;align-items:center;gap:1rem;width:100%;min-height:6.5rem;padding:1.1rem 1.1rem 1.1rem 1.25rem;border-radius:1.75rem;background:var(--primary);color:var(--on-primary);text-decoration:none;transition:background-color .2s, transform .2s}
.act-main:hover{background:var(--primary-hover)}
.act-main:active{transform:translateY(1px)}
.act-main .mini{width:3.4rem;height:3.4rem;flex:none;position:relative}
.mini .m-rim{fill:var(--mini-bed);stroke:var(--mini-rim);stroke-width:3}
.mini .m-water{fill:var(--mini-water)}
.mini .m-hub{fill:var(--on-primary)}
.act-main .tx{display:grid;gap:.15rem;position:relative;min-width:0}
.act-main .t{font-family:var(--font-head);font-weight:700;font-size:1.45rem;line-height:1.15;letter-spacing:-.02em}
.act-main .s{color:var(--on-primary-2);font-weight:500}
.act-main .go{margin-left:auto;flex:none;display:grid;place-items:center;width:2.9rem;height:2.9rem;border-radius:50%;background:var(--go-bg);color:var(--go-ink);position:relative}
.act-main .waves{position:absolute;right:-1.5rem;top:-2.5rem;width:12rem;height:12rem;fill:none;stroke:var(--primary-deco);stroke-width:10}
@media (max-width:419px){ .act-main .mini{display:none} .act-main{min-height:5.75rem} }

.act-list{display:grid;padding:.375rem;border-radius:1.5rem;background:var(--surface)}
.act{position:relative;display:flex;align-items:center;gap:.9rem;width:100%;min-height:4.6rem;padding:.7rem .75rem;border-radius:1.15rem;color:var(--ink);text-decoration:none;transition:background-color .2s}
.act:hover{background:var(--surface-2)}
.act + .act::before{content:"";position:absolute;left:4.6rem;right:.75rem;top:0;height:1px;background:var(--line)}
.act .tx{display:grid;gap:.05rem;min-width:0}
.act .t{font-weight:650;font-size:1.0625rem}
.act .s{color:var(--ink-2)}
.act .chev{margin-left:auto;color:var(--ink-2)}

/* router */
.router{border:2px dashed var(--line-strong);border-radius:1.5rem;transition:background-color .25s,border-color .25s}
.router.open{border-style:solid;border-color:var(--line);background:var(--surface)}
.router-toggle{display:flex;align-items:center;gap:.9rem;width:100%;min-height:4.6rem;padding:.7rem .75rem;border:0;border-radius:1.4rem;background:none;color:var(--ink);text-align:left}
.router-toggle .tx{display:grid;gap:.05rem}
.router-toggle .t{font-weight:650;font-size:1.0625rem}
.router-toggle .s{color:var(--ink-2)}
.router-toggle .chev{margin-left:auto;color:var(--ink-2);transition:transform .25s}
.router-toggle[aria-expanded="true"] .chev{transform:rotate(180deg)}
.router-body{padding:0 1rem 1.1rem;display:grid;gap:1.1rem}
.q{display:grid;gap:.6rem;min-width:0}
.q legend{font-family:var(--font-head);font-weight:700;font-size:1.2rem;letter-spacing:-.015em;margin-bottom:.6rem}
.q .hint{margin-top:-.35rem}
.result{animation:pop .4s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.result h2{font-size:1.4rem;max-width:22ch;outline-offset:4px}
.result p{max-width:46ch}
.result .kicker{font-weight:650}
.result-acts{gap:.25rem .5rem;margin-top:.25rem}
.result-acts .btn-primary{margin-right:.5rem}

/* plan preview */
.plan-prev{display:grid;gap:.5rem}
.plan-prev h2{font-size:1.25rem}
.plan-prog{color:var(--ink-2)}
.plan-prog b{color:var(--ink)}
.plan-list{list-style:none;margin:0;padding:0;display:grid}
.plan-list .check-row span{overflow-wrap:anywhere}
.plan-empty{color:var(--ink-2);max-width:42ch}
.plan-empty b{color:var(--ink)}
.plan-prev .linkbtn{justify-self:start;margin-left:-.5rem}
.plan-inbox{display:flex;align-items:center;gap:.5rem;color:var(--ink-2)}
.plan-inbox .ico{width:1.25rem;height:1.25rem}

/* noise chip */
.noise-row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}
.noise-row .linkbtn{min-width:2.75rem;justify-content:center}
@media (max-width:479px){ .noise-row{gap:.5rem} .noise-row .linkbtn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .noise-row .linkbtn .ico{width:1.5rem;height:1.5rem} }
.noise-chip{display:inline-flex;align-items:center;gap:.6rem;min-height:3rem;padding:.35rem 1rem .35rem .4rem;border-radius:999px;border:2px solid var(--line-strong);background:transparent;color:var(--ink);font-weight:650;transition:background-color .2s,border-color .2s}
.noise-chip:hover{background:var(--surface-2)}
.noise-chip .nb{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--tint-sky)}
.noise-chip .nb .ico{width:1.3rem;height:1.3rem}
.noise-chip .st{font-weight:400;color:var(--ink-2)}
.noise-chip[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.noise-chip[aria-pressed="true"] .st{color:var(--on-primary-2)}
.noise-chip[aria-pressed="true"] .nb{background:var(--primary-deco)}

/* garden */
.garden{position:relative;overflow:hidden;padding:1.15rem 1.15rem 1rem;border-radius:1.75rem;background:var(--band);display:grid;gap:.6rem}
.g-head{display:flex;align-items:baseline;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.g-head h2{font-size:1.3rem}
.g-count{font-weight:650;color:var(--ink-2)}
.g-strip{margin-inline:-1.15rem;width:calc(100% + 2.3rem);height:auto}
.g-note{color:var(--ink-2);max-width:48ch}
.g-note b{color:var(--ink)}
.visits{display:flex;gap:.6rem;align-items:flex-start;padding-top:.6rem;border-top:1px solid var(--line)}
.visits .ico{color:var(--leaf-2);margin-top:.05rem}
.visits b{color:var(--ink)}
.g-ground{fill:var(--ground)} .g-ground2{fill:var(--ground-2)}
.g-back{opacity:.8}
.g-mound{fill:var(--ground)}
.g-ghost path{fill:none;stroke:var(--line-strong);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:2 2.6;opacity:.85}
.g-seedline{fill:none;stroke:var(--clay-ink);stroke-width:1.4;stroke-linecap:round;opacity:.6}
.g-peb{fill:var(--rim)}
.seedling{fill:var(--clay)}
.pl-stem{fill:none;stroke:var(--stem);stroke-width:2.2;stroke-linecap:round}
.pl-leaf{fill:var(--leaf)} .pl-leaf2{fill:var(--leaf-2)}
.pl-petal{fill:var(--petal);stroke:var(--petal-line);stroke-width:.8}
.pl-sun{fill:var(--sun)} .pl-core{fill:var(--core)} .pl-flower{fill:var(--flower)}

/* phone order: plan first, then noise, then garden (desktop: garden first) */
.plan-prev{order:1} .noise-row{order:2} .garden{order:3}

@media (min-width:960px){
  .home{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:3.5rem;align-items:start;padding-top:.75rem}
  .garden{order:0;padding:1.4rem 1.4rem 1.2rem}
  .g-strip{margin-inline:-1.4rem;width:calc(100% + 2.8rem)}
  .hero-sprig{width:7rem;right:1rem;top:1.5rem}
  .act-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;padding:0;background:transparent}
  .act{flex-direction:column;align-items:flex-start;gap:.75rem;min-height:9.25rem;padding:1.1rem;border-radius:1.5rem;background:var(--surface)}
  .act:hover{background:var(--surface-2)}
  .act + .act::before{display:none}
  .act .chev{display:none}
}
html[lang="en"] .hero h1{max-width:19.5ch}

/* the side column sticks only when it fits in the window */
@media (min-width:960px) and (min-height:720px){ html:not([data-big="true"]) .home-side{position:sticky;top:1rem} }
@media (min-width:960px) and (min-height:940px){ html[data-big="true"] .home-side{position:sticky;top:1rem} }