/* Турбо-улитка — timer.css (TIMER screen: setup, run, done) */

/* ===== setup ===== */
.setup{display:grid;gap:1.5rem}
.setup-main{display:grid;gap:1.5rem;min-width:0}
.tform{display:grid;gap:1.25rem;min-width:0}
.durs{display:grid;gap:.6rem}
.durs legend{font-weight:650;margin-bottom:.45rem}
.dur-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.5rem}
.dur{position:relative;display:block}
.dur input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.dur span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:4.25rem;border-radius:1.15rem;border:2px solid var(--line-strong);background:var(--surface);color:var(--ink);line-height:1.1;transition:background-color .2s,border-color .2s}
.dur span b{font-family:var(--font-display);font-weight:900;font-size:1.55rem}
.dur span small{font-size:.9375rem;color:var(--ink-2)}
.dur input:hover + span{background:var(--surface-2)}
.dur input:checked + span{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.dur input:checked + span small{color:var(--on-primary-2)}
.dur input:focus-visible + span{outline:3px solid var(--focus);outline-offset:3px}
.own{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}
.own-l{color:var(--ink-2);font-weight:500}
.start{margin-top:.25rem}
.setup-visual{display:flex;align-items:flex-end;gap:.75rem}
.setup-visual .pond-wrap{width:min(46%, 11rem);flex:none}
.say{display:grid;gap:.3rem;justify-items:start;min-width:0}
.bubble{position:relative;padding:.6rem .85rem;border-radius:1.1rem 1.1rem 1.1rem .3rem;background:var(--surface);color:var(--ink);font-weight:600;line-height:1.35;box-shadow:var(--shadow)}
.say .logo{width:4rem;margin-left:.3rem}

/* ===== pond ===== */
.pond{width:100%;height:auto;overflow:visible}
.p-bed{fill:var(--bed)} .p-dots{fill:var(--bed-dot)}
.p-rim{fill:none;stroke:var(--rim);stroke-width:17}
.p-rim-o{fill:none;stroke:var(--rim-2);stroke-width:2}
.p-rim-i{fill:none;stroke:var(--rim-2);stroke-width:2.5}
.p-peb{fill:var(--rim-3)} .p-peb2{fill:var(--rim-2)}
.p-tick{fill:var(--tick)}
.p-start{fill:var(--sun);stroke:var(--rim-2);stroke-width:1.5}
.p-w0{stop-color:var(--water-0)} .p-w1{stop-color:var(--water-1)} .p-w2{stop-color:var(--water-2)}
.p-edge{fill:none;stroke:var(--water-edge);stroke-width:3;stroke-linecap:round}
.p-foam{fill:none;stroke:var(--foam);stroke-width:4;stroke-linecap:round;opacity:.75}
.p-foam-dots{fill:none;stroke:var(--foam);stroke-width:3.2;stroke-linecap:round}
.p-glint{fill:var(--glint)}
.p-ripple{fill:none;stroke:var(--ripple);stroke-width:1.6}
/* soft motion only for a moment after the round starts (nothing moves endlessly while you focus) */
.p-rip{transform-box:fill-box;transform-origin:50% 50%;animation:ripple 7s ease-in-out 2}
@keyframes ripple{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.08);opacity:.65}}
.p-lily{fill:var(--lily)} .p-lily-v{fill:none;stroke:var(--lily-2);stroke-width:1.2} .p-lily-f{fill:var(--petal)} .p-lily-c{fill:var(--sun)}
.p-hub{fill:var(--hub);stroke:var(--rim-2);stroke-width:2} .p-hub-in{fill:var(--hub-in)}
.p-pause{fill:var(--ink)}

/* ===== run ===== */
.run{display:grid;gap:.9rem;min-width:0}
.now{display:grid;gap:.15rem;min-width:0}
.phase-line{display:flex;align-items:center;gap:.55rem;color:var(--ink-2);font-weight:500}
.phase-line .pulse{flex:none;width:.6rem;height:.6rem;border-radius:50%;background:var(--leaf-2);animation:breathe 4s ease-in-out 3}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.35)}}
.is-paused .phase-line .pulse{background:var(--clay);animation:none}
.now h1{font-size:clamp(1.4rem, 1.15rem + 1.3vw, 2.1rem);overflow-wrap:anywhere;outline-offset:4px}
.pond-col{display:grid;gap:.4rem;justify-items:center;min-width:0}
.pond-stage{position:relative;width:min(100%, 20rem);margin-inline:auto}
.pond-stage .pond{transition:filter .6s}
.is-paused .pond-stage .pond{filter:saturate(.5)}
.pond-snail{position:absolute;width:25%;right:-2%;bottom:-3%}
.time-pill{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;padding:.3rem .95rem .35rem;border-radius:1.1rem;background:var(--surface);color:var(--ink);box-shadow:var(--shadow);line-height:1.1}
.time-pill b{font-family:var(--font-display);font-weight:900;font-size:1.7rem;font-variant-numeric:tabular-nums}
.time-pill span{color:var(--ink-2);font-size:.9375rem}
.ends{color:var(--ink-2);text-align:center}
.ends b{color:var(--ink);font-variant-numeric:tabular-nums}
.run-info{display:grid;gap:1rem;min-width:0}
.ctrls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.ctrl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;min-height:3.6rem;padding:.4rem .35rem;border-radius:1.15rem;border:2px solid transparent;background:var(--chip);color:var(--ink);font-weight:650;line-height:1.2;text-align:center;transition:background-color .2s}
.ctrl:hover{background:var(--sel)}
.ctrl:disabled{opacity:.5}
.ctrl .ico{width:1.35rem;height:1.35rem}
.ctrl.fin{background:transparent;border-color:var(--line-strong)}
.ctrl.fin:hover{background:var(--surface-2)}
.ctrls.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.ctrl.ci-yes{background:var(--primary);color:var(--on-primary)}
.ctrl.ci-yes:hover{background:var(--primary-hover)}
.phase-line.is-ask{color:var(--ink);font-weight:650}
.phase-line.is-ask .pulse{background:var(--sun);animation:none;box-shadow:0 0 0 3px var(--sun-soft)}
.long-note{display:flex;gap:.5rem;align-items:center;color:var(--ink-2)}
.long-note .ico{color:var(--leaf-2);width:1.25rem;height:1.25rem}
/* phones: the back pill on the running timer is icon-only (its name stays for screen readers) so «Показать минуты» fits */
@media (max-width:479px){
  .run-screen .screen-bar .back{width:2.75rem;padding:0;justify-content:center}
  .run-screen .screen-bar .back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* thought basket */
.parking{position:relative;display:grid;gap:.6rem;padding:.95rem 1.05rem 1.05rem;border-radius:1.75rem;background:var(--band)}
.parking h2{font-size:1.2rem}
.park-form{display:grid;gap:.45rem}
.park-form label{font-weight:500}
.park-row{display:flex;flex-wrap:wrap;gap:.5rem}
.park-row .text{flex:1 1 7rem;min-width:0;text-overflow:ellipsis}
/* a tall phone has room: the button goes under the field and the example is shown whole (a short phone keeps one row) */
@media (min-height:741px){.park-row .text{flex-basis:14rem}}
.park-row .btn{flex:0 0 auto}
.basket-row{display:flex;align-items:center;gap:.9rem}
.basket{width:5.6rem;flex:none;overflow:visible}
.basket-row p{color:var(--ink-2)}
.basket-row p b{color:var(--ink)}
.bk-handle{fill:none;stroke:var(--clay);stroke-width:5;stroke-linecap:round}
.bk-back{fill:var(--rim-2)}
.bk-body{fill:var(--rim)}
.bk-weave{fill:none;stroke:var(--rim-2);stroke-width:2;stroke-linecap:round}
.bk-rim{fill:none;stroke:var(--clay);stroke-width:4.5;stroke-linecap:round}
.seed{stroke:var(--snail-line);stroke-width:1.2}
.sd0{fill:var(--sun)} .sd1{fill:var(--flower)} .sd2{fill:var(--leaf)} .sd3{fill:var(--petal)}
.basket .new{animation:seedIn .5s ease-out}
@keyframes seedIn{from{transform:translateY(-14px);opacity:0}to{transform:none;opacity:1}}
.flying{position:fixed;z-index:4;pointer-events:none;max-width:16rem;padding:.4rem .8rem;border-radius:999px;background:var(--sun-soft);color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--shadow)}

/* ===== done ===== */
/* the DOM is in phone order: head → «Как прошло?» → thoughts → break → buttons (Tab follows what you see) */
.done{display:grid;gap:1.5rem;min-width:0}
.done-head{display:grid;gap:.9rem;min-width:0}
.reward{position:relative;overflow:hidden;border-radius:1.75rem;background:var(--band)}
.reward svg{width:100%;height:auto}
.rw-halo{fill:var(--halo)}
.rw-sun{fill:var(--sun)}
.rw-check{fill:none;stroke:var(--snail-line);stroke-width:9;stroke-linecap:round;stroke-linejoin:round}
.rw-ray{stroke:var(--sun);stroke-width:4;stroke-linecap:round}
.wiggle{transform-box:fill-box;transform-origin:50% 100%;animation:wiggle 1.5s ease-in-out .35s 1}
@keyframes wiggle{0%{transform:rotate(0)}18%{transform:rotate(-5deg)}38%{transform:rotate(4deg)}58%{transform:rotate(-2.5deg)}78%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}
.grow{transform-box:fill-box;transform-origin:50% 100%;animation:grow 1.1s cubic-bezier(.2,.8,.2,1) .25s both}
@keyframes grow{from{transform:scale(.2,.05)}to{transform:none}}
.petal-fx{position:absolute;top:-14px;width:10px;height:14px;border-radius:70% 0 70% 0;pointer-events:none}
.pf0{background:var(--sun)} .pf1{background:var(--flower)} .pf2{background:var(--leaf)} .pf3{background:var(--petal)}
.done-head h1{font-size:clamp(1.8rem, 1.4rem + 1.8vw, 2.5rem);outline-offset:4px}
.gnote{color:var(--ink-2)}
.gnote b{color:var(--ink)}
.how{display:grid;gap:.5rem;min-width:0}
.how legend{font-family:var(--font-head);font-weight:700;font-size:1.25rem;letter-spacing:-.015em;margin-bottom:.5rem}
.how .opt{min-height:4.4rem}
.how-reply{color:var(--ink);font-weight:500;min-height:1.55em}
.break{display:flex;align-items:flex-start;gap:.9rem}
.break h2{font-size:1.1rem}
.break-tx{display:grid;gap:.25rem;min-width:0}
.break-tx p b{font-weight:650}
.break .linkbtn{justify-self:start;margin-left:-.5rem}
.done-acts{display:flex;flex-wrap:wrap;gap:.6rem}
.done-acts .btn{flex:1 1 13rem;min-height:3.5rem;justify-content:center;text-align:center}
.done-acts .btn-big{flex-basis:100%}
.review{align-content:start}
.review h2{font-size:1.3rem;display:flex;align-items:center;gap:.6rem}
.review .lead{font-size:1rem}
.trows{list-style:none;margin:.25rem 0 0;padding:0;display:grid}
.trow{display:grid;gap:.6rem;padding:.9rem 0;border-top:1px solid var(--line)}
.trow .tt{display:flex;gap:.65rem;align-items:flex-start;font-weight:600;overflow-wrap:anywhere}
.trow .tt svg{width:1.1rem;height:1.1rem;flex:none;margin-top:.25rem}
.tt-seed{fill:var(--sun);stroke:var(--snail-line);stroke-width:1.6}
.trow .acts{display:flex;flex-wrap:wrap;gap:.45rem}
.trow .acts .btn{flex:1 1 auto;min-height:2.9rem;padding:.45rem .7rem;border-radius:1rem;font-size:1rem;justify-content:center;text-align:center}
.trow .acts .btn .ico{width:1.15rem;height:1.15rem}
@media (max-width:519px){ .trow .acts .btn:first-child{flex-basis:100%} }
.trow .status{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem .75rem;color:var(--ink-2)}
.trow.gone .tt{color:var(--ink-2);font-weight:400}
.r-empty{color:var(--ink-2)}

/* ===== phones: the pond follows the screen height so the basket input stays visible (375×667) ===== */
@media (max-width:959px){
  .setup-visual{order:3}
  .pond-stage{width:min(100%, 20rem, max(10.5rem, 100vh - 29.5rem));width:min(100%, 20rem, max(10.5rem, 100svh - 29.5rem))}
  .view[data-route="timer"] .screen{gap:1rem}
  .run{gap:.75rem}
  .how .opts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .how .opt{grid-template-areas:"ico ok" "lbl lbl";grid-template-columns:auto 1fr;column-gap:.4rem;min-height:4.4rem;padding:.6rem .65rem}
}

/* ===== larger screens ===== */
@media (min-width:960px){
  .setup{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:4rem;align-items:center;padding-top:.5rem}
  .setup-visual{order:-1;flex-direction:column;align-items:flex-start;gap:.5rem}
  .setup-visual .pond-wrap{width:min(100%, 25rem)}
  .setup-visual .say{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:.75rem}
  .setup-visual .say .logo{width:4.6rem;margin:0}
  .run{grid-template-columns:minmax(0,1fr) minmax(0,29rem);grid-template-areas:"pond now" "pond rest";grid-template-rows:auto 1fr;column-gap:4rem;row-gap:1.25rem}
  .run .now{grid-area:now;align-self:end}
  .run .pond-col{grid-area:pond;align-self:center}
  .run .run-info{grid-area:rest;align-self:start}
  .pond-stage{width:min(100%, 30rem, max(18rem, 100vh - 15rem))}
  .done{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"head how" "head review" "break review" "acts review";grid-template-rows:auto auto auto 1fr;column-gap:3.5rem;row-gap:1.25rem;align-items:start}
  .done-head{grid-area:head} .how{grid-area:how} .review{grid-area:review} .break{grid-area:break} .done-acts{grid-area:acts}
  .done-acts .btn-big{flex-basis:auto}
}

/* bigger text on a phone that is not tall: timer.js puts the basket before the controls (DOM order = screen order) */
@media (max-width:959px) and (max-height:760px){
  html[data-big="true"] .pond-stage{width:min(100%, 20rem, max(8rem, 100vh - 26rem));width:min(100%, 20rem, max(8rem, 100svh - 26rem))}
}
@media (max-width:479px){
  html[data-big="true"] .screen-bar .chip{padding:.35rem .6rem}
  html[data-big="true"] .screen-bar .chip span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* long words never leave their buttons: controls go to two rows, feelings to one column (narrow phones, bigger text) */
@media (max-width:359px){
  .ctrls:not(.two){grid-template-columns:repeat(2,minmax(0,1fr))}
  .ctrls:not(.two) .fin{grid-column:1/-1;min-height:3rem;flex-direction:row}
  .how .opts{grid-template-columns:1fr}
  .how .opt{grid-template-areas:"ico lbl ok";grid-template-columns:auto 1fr auto;min-height:3.5rem}
}
@media (max-width:519px){
  html[data-big="true"] .ctrls:not(.two){grid-template-columns:repeat(2,minmax(0,1fr))}
  html[data-big="true"] .ctrls:not(.two) .fin{grid-column:1/-1;min-height:3rem;flex-direction:row}
  html[data-big="true"] .how .opts{grid-template-columns:1fr}
  html[data-big="true"] .how .opt{grid-template-areas:"ico lbl ok";grid-template-columns:auto 1fr auto;min-height:3.5rem}
}

/* short phones (iPhone SE): the setup's «Запустить» fits on the first screen */
@media (max-width:959px) and (max-height:740px){
  .view[data-route="timer"] .setup,.view[data-route="timer"] .setup-main{gap:1rem}
  .tform{gap:.9rem}
  .dur span{min-height:3.4rem}
  .setup .screen-head .lead{font-size:1rem}
}

/* phone on its side (landscape): pond on the left, everything else on the right, like on a computer */
@media (orientation:landscape) and (max-height:500px) and (min-width:600px) and (max-width:959px){
  .run{grid-template-columns:auto minmax(0,1fr);grid-template-areas:"pond now" "pond rest";grid-template-rows:auto 1fr;column-gap:1.5rem;row-gap:.75rem;align-items:start}
  .run .now{grid-area:now}
  .run .pond-col{grid-area:pond}
  .run .run-info{grid-area:rest}
  .pond-stage{width:min(62vh, 14rem);width:min(62svh, 14rem)}
  .setup{grid-template-columns:minmax(0,1fr) auto;column-gap:1.5rem;align-items:start}
  .setup-visual{order:0;flex-direction:column;align-items:center}
  .setup-visual .pond-wrap{width:min(50vh, 11rem)}
  .setup-visual .say{display:none}
}