/* Турбо-улитка — breakdown.css («Разбить задачу»: start, steps editor, one step on screen, done).
   Shared classes from base.css first; own classes are prefixed .bd-… */

.bd .bd-err{color:var(--clay-ink);font-weight:600}
.bd .bd-err:empty{display:none}
.bd .bd-hint{color:var(--ink-2)}
.bd .bd-hint b{color:var(--ink)}
.bd-del{border-color:transparent;color:var(--ink-2)}
.bd-del:hover{color:var(--ink);background:var(--surface-2)}

/* ===== start ===== */
.bd-resume{gap:.85rem}
.bd-resume .kicker{font-weight:600}
.bd-resume h2{font-size:1.45rem;overflow-wrap:anywhere}
.bd-res-prog{display:grid;gap:.45rem}
.bd-res-prog .progress{background:var(--surface);max-width:22rem}
.bd-res-prog p,.bd-res-next{color:var(--ink-2)}
.bd-res-prog b,.bd-res-next b{color:var(--ink)}
.bd-res-next{max-width:46ch;overflow-wrap:anywhere}
.bd-res-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;margin-top:.15rem}
.bd-res-acts .bd-del{margin-left:auto}
.bd-res-acts .bd-del:hover{background:var(--surface)}

.bd-new{gap:1rem}
.bd-new-h{font-size:1.2rem}
.bd-ex{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:-.25rem}
.bd-ex-chip{gap:.55rem;padding:.35rem .9rem .35rem .4rem}
.bd-ex-tag{display:inline-block;padding:.12rem .55rem;border-radius:999px;background:var(--tint-sun);color:var(--ink);font-weight:600;font-size:.9375rem;line-height:1.3}

.bd-list{display:grid;gap:.6rem}
.bd-list h2{font-size:1.2rem}
.bd-tasks{list-style:none;margin:0;padding:.375rem;display:grid;border-radius:1.5rem;background:var(--surface)}
.bd-task{position:relative;display:grid;gap:.5rem}
.bd-task + .bd-task::before{content:"";position:absolute;left:4rem;right:.75rem;top:0;height:1px;background:var(--line)}
.bd-task-row{display:flex;align-items:center;gap:.15rem}
.bd-task-open{flex:1 1 auto;display:flex;align-items:center;gap:.8rem;min-width:0;min-height:4.2rem;padding:.6rem;border:0;border-radius:1.15rem;background:none;color:var(--ink);text-align:left}
.bd-task-open:hover{background:var(--surface-2)}
.bd-task-open .tx{display:grid;gap:.05rem;min-width:0}
.bd-task-open .t{font-weight:650;overflow-wrap:anywhere}
.bd-task-open .s{color:var(--ink-2)}
.bd-task-open .chev{margin-left:auto;color:var(--ink-2)}
.bd-task .confirm{margin:0 .35rem .35rem}

.bd-fin{display:grid;gap:.6rem}
.bd-fin-t{display:flex;align-items:center;gap:.8rem;width:100%;min-height:3.75rem;padding:.45rem .9rem .45rem .5rem;border:2px dashed var(--line-strong);border-radius:1.5rem;background:none;color:var(--ink);font-weight:650;text-align:left;transition:background-color .2s,border-color .2s}
.bd-fin-t:hover{background:var(--surface-2)}
.bd-fin-t .chev{margin-left:auto;color:var(--ink-2);transition:transform .25s}
.bd-fin-t[aria-expanded="true"]{border-style:solid;border-color:var(--line)}
.bd-fin-t[aria-expanded="true"] .chev{transform:rotate(180deg)}

.bd-how{gap:.85rem}
.bd-how h2{font-size:1.2rem}
.bd-how-task{display:flex;align-items:center;gap:.5rem;font-size:1.0625rem}
.bd-how-task .ico{color:var(--leaf-2)}
.bd-mini{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.bd-mini li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.55rem .75rem .55rem .55rem;border-radius:1rem;background:var(--surface)}
.bd-mini .n{display:grid;place-items:center;width:2rem;height:1.9rem;border-radius:47% 53% 44% 56% / 56% 46% 54% 44%;background:var(--tint-sage);font-family:var(--font-display);font-weight:900}
.bd-mini .tx{overflow-wrap:anywhere}
.bd-mini .m{color:var(--ink-2);font-weight:600;white-space:nowrap}
.bd-mini li.first .n,.bd-mini li.first .m{background:var(--tint-sun)}
.bd-mini li.first .m{color:var(--ink);padding:.05rem .55rem;border-radius:999px}
.bd-src{color:var(--ink-2);font-size:.9375rem}

/* ===== steps editor ===== */
.bd-title{display:flex;align-items:flex-start;gap:.5rem}
.bd-title h1{min-width:0}
.bd-title .iconbtn{margin-top:.2rem}
.bd-rename{display:grid;gap:.65rem;padding:1rem;border-radius:1.25rem;background:var(--surface)}
.bd-steps{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.bd-step{gap:.5rem;padding:.7rem .7rem .55rem;border-radius:1.35rem}
.bd-step-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:.55rem}
.bd-num{margin-top:.2rem;font-family:var(--font-display);font-weight:900;font-size:1.15rem;line-height:1}
.bd-num.is-done{background:var(--primary);color:var(--on-primary)}
.bd-num .ico{width:1.1rem;height:1.1rem;stroke-width:2.6}
textarea.bd-text{display:block;min-height:2.9rem;padding:.6rem .85rem;border-radius:.95rem;resize:none;overflow:hidden;font-weight:500;line-height:1.4}
.bd-step.is-done .bd-text{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--line-strong)}
.bd-step-bot{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .4rem}
.bd-mins button{min-width:2.75rem;padding:0 .5rem;font-weight:650}
.bd-unit{padding:0 .55rem 0 .2rem;color:var(--ink-2);font-weight:500}
.bd-shrink{gap:.35rem;padding-inline:.4rem}
.bd-shrink .ico{color:var(--clay-ink)}
.bd-tip{padding:.6rem .8rem .6rem .65rem;border-radius:1rem;background:var(--tint-sun);color:var(--ink)}
.bd-tip .ico{color:var(--clay-ink)}

.bd-helper{gap:.75rem;padding:1rem;border-radius:1.25rem}
.bd-hq{font-family:var(--font-head);font-weight:700;font-size:1.15rem;line-height:1.25;letter-spacing:-.01em;outline-offset:4px}
.bd-helper .text{background:var(--surface)}
.bd-helper .field{gap:.35rem}
.bd-tpl-wrap{display:grid;gap:.45rem}
.bd-tpls{gap:.4rem}
.bd-tpls .chip{padding:.35rem .85rem;font-weight:600;background:var(--surface)}
.bd-tpls .chip:hover{background:var(--surface-2)}
.bd-helper .row{gap:.5rem 1rem}

.bd-gone{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem .75rem;padding:.45rem .5rem .45rem 1rem;border-radius:1.35rem;border:2px dashed var(--line-strong);color:var(--ink-2)}
.bd-gone p{display:flex;align-items:center;gap:.55rem;min-width:0;overflow-wrap:anywhere}
.bd-gone p .ico{width:1.25rem;height:1.25rem}
.bd-enough{display:flex;align-items:flex-start;gap:.65rem;padding:.9rem 1rem}
.bd-enough .ico{color:var(--leaf-2)}

.bd-add{gap:.6rem;padding:1rem}
.bd-add-l{font-weight:650}
.bd-add-row{display:flex;flex-wrap:wrap;gap:.5rem}
.bd-add-row .text{flex:1 1 13rem;min-width:0}
.bd-add-row .btn{flex:none}
.bd-max{align-items:flex-start}

.bd-go{gap:.85rem}
.bd-sumbox{display:grid;gap:.3rem}
.bd-sum{display:flex;align-items:center;gap:.55rem;font-weight:650;font-size:1.0625rem}
.bd-sum .ico{color:var(--leaf-2)}
.bd-ends{color:var(--ink-2)}
.bd-ends b{color:var(--ink)}
.bd-deltask{justify-self:start;margin-left:-.5rem;color:var(--ink-2);font-weight:600}
.bd-deltask:hover{color:var(--ink)}
.bd-go .confirm{margin-top:-.25rem}

/* ===== one step on screen ===== */
.bd-run-grid{display:grid;gap:1.5rem;min-width:0}
.bd-run-main{display:grid;gap:1.1rem;align-content:start;min-width:0}
.bd-run-head{display:grid;gap:.7rem;min-width:0}
.bd-run-head .kicker{font-weight:600}
.bd-run-head .kicker span{min-width:0;overflow-wrap:anywhere}
.bd-stones{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;list-style:none;margin:0;padding:0}
.bd-stones li{width:1.2rem;height:.85rem;border-radius:52% 48% 46% 54% / 60% 56% 44% 40%;border:2px solid var(--line-strong);background:transparent}
.bd-stones li[data-s="done"]{background:var(--leaf-2);border-color:var(--leaf-2)}
.bd-stones li[data-s="now"]{width:1.65rem;height:1.15rem;background:var(--sun);border-color:var(--clay-ink)}

.bd-now{gap:.75rem;padding:1.35rem 1.25rem 1.4rem;border-radius:1.75rem;background-color:var(--surface);background-image:radial-gradient(90% 85% at 100% 0%, var(--glow), transparent 72%);box-shadow:var(--shadow)}
.bd-now-k{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem .6rem;color:var(--ink-2);font-weight:600}
.bd-pill{display:inline-block;padding:.12rem .7rem;border-radius:999px;background:var(--tint-sun);color:var(--ink);font-weight:650}
.bd-now h1{font-size:clamp(1.7rem, 1.3rem + 1.9vw, 2.55rem);line-height:1.14;letter-spacing:-.024em;max-width:20ch;overflow-wrap:anywhere;outline-offset:4px}
.bd-now h1.is-new{animation:bdIn .45s cubic-bezier(.2,.8,.2,1)}
@keyframes bdIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bd-now-min{display:flex;align-items:center;gap:.45rem;color:var(--ink-2);font-weight:500}
.bd-now-min .ico{width:1.25rem;height:1.25rem;color:var(--leaf-2)}

.bd-did{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem .75rem;padding:.4rem .4rem .4rem .5rem;border-radius:1.4rem;background:var(--sel)}
.bd-did p{flex:1 1 11rem;min-width:0;overflow-wrap:anywhere;font-weight:500}
.bd-did-l{color:var(--ink-2)}
.bd-did-ico{display:grid;place-items:center;flex:none;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--primary);color:var(--on-primary)}
.bd-did-ico .ico{width:1.15rem;height:1.15rem;stroke-width:2.6}
.bd-did .linkbtn{margin-left:auto}
.bd-short{align-items:flex-start}

.bd-acts{display:grid;gap:.6rem}
.bd-acts .btn{width:100%}
.bd-links{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem 1rem;margin:-.35rem 0 0 -.5rem}
.bd-links .ico{width:1.2rem;height:1.2rem}
.bd-links .ico[class]{color:var(--ink-2)}
.bd-links [data-bd="shrink"] .ico{color:var(--clay-ink)}

.bd-path{gap:.75rem;margin:0;padding:0 0 1.1rem;overflow:hidden}
.bd-path figcaption{display:grid;gap:.25rem;padding:0 1.15rem}
.bd-path-prog{font-weight:600}
.bd-path-prog b{font-weight:700}
.bd-path-left{color:var(--ink-2)}
.bd-path-left b{color:var(--ink)}

/* garden path art */
.bd-art{display:block;width:100%;height:auto}
.bd-art .a-g1{fill:var(--ground-2)}
.bd-art .a-g2{fill:var(--ground)}
.bd-art .a-path{fill:var(--bed)}
.bd-art .a-grass{fill:var(--leaf-2)}
.bd-art .a-bush{fill:var(--leaf);opacity:.55}
.bd-art .a-petal{fill:var(--petal);stroke:var(--petal-line);stroke-width:.6}
.bd-art .a-sunc{fill:var(--sun)}
.bd-art .a-st{fill:var(--rim);stroke:var(--tick);stroke-width:1.2;stroke-opacity:.75}
.bd-art .a-st.done{fill:var(--leaf);stroke:var(--leaf-2)}
.bd-art .a-st.now{fill:var(--sun);stroke:var(--clay-ink);stroke-width:1.6}
.bd-art .a-h0{stop-color:var(--sun);stop-opacity:.5}
.bd-art .a-h1{stop-color:var(--sun);stop-opacity:0}
.bd-art .a-stem{fill:none;stroke:var(--stem);stroke-width:2.2;stroke-linecap:round}
.bd-art .a-leaf{fill:var(--leaf)}
.bd-art .a-leaf2{fill:var(--leaf-2)}
.bd-art .a-pet{fill:var(--sun)}
.bd-art .a-core{fill:var(--core)}
.bd-art .a-bud{fill:var(--flower)}
.bd-art .a-ff{opacity:var(--ff-op)}
.bd-art .a-f0{stop-color:var(--firefly);stop-opacity:.95}
.bd-art .a-f1{stop-color:var(--firefly);stop-opacity:0}

/* ===== done ===== */
.bd-done-grid{display:grid;gap:1.5rem;grid-template-areas:"head" "art" "body";min-width:0}
.bd-done-head{grid-area:head;display:grid;gap:.6rem;min-width:0}
.bd-done-head h1{outline-offset:4px}
.bd-done-head .lead b{overflow-wrap:anywhere}
.bd-reward:empty{display:none}
.bd-done-art{grid-area:art;margin:0;padding:0;overflow:hidden}
.bd-done-body{grid-area:body;display:grid;gap:1.1rem;min-width:0}
.bd-donelist{list-style:none;margin:0;padding:.375rem;display:grid;border-radius:1.5rem;background:var(--surface)}
.bd-donelist li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;padding:.65rem .7rem}
.bd-donelist li + li::before{content:"";position:absolute;left:3.15rem;right:.7rem;top:0;height:1px;background:var(--line)}
.bd-donelist .ck{display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--primary);color:var(--on-primary)}
.bd-donelist .ck .ico{width:1rem;height:1rem;stroke-width:2.6}
.bd-donelist .tx{overflow-wrap:anywhere;font-weight:500}
.bd-donelist .m{color:var(--ink-2);white-space:nowrap}
.bd-done-acts{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem}

/* ===== larger screens ===== */
@media (min-width:640px){
  .bd-acts{grid-template-columns:repeat(2, minmax(0, max-content))}
  .bd-acts .btn{width:auto;min-width:13rem}
  .bd-step{padding:.85rem 1rem .75rem .85rem}
  .bd-step-bot{padding-left:3.05rem}
  .bd-tip,.bd-step .bd-helper{margin-left:3.05rem}
}
@media (min-width:960px){
  .bd-run-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:3.5rem;align-items:start;padding-top:.25rem}
  .bd-run-side{position:sticky;top:1rem}
  .bd-now{padding:1.75rem 1.75rem 1.8rem;border-radius:2rem}
  .bd-go .btn-big.btn-block{width:100%;min-width:0}
  .bd-done-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:3.5rem;grid-template-areas:"head art" "body art";align-items:start}
  .bd-done-art{position:sticky;top:1rem}
  .bd-start .col-side,.bd-edit .col-side{padding-top:.25rem}
}