/* Турбо-улитка — base.css
   Tokens (light/dark), fonts, typography, layout and SHARED COMPONENTS.
   Feature CSS files may use everything here; they must not edit this file.

   Shared components (full list with markup examples: docs/contract.txt)
   - Layout:   .screen  .screen-bar  .screen-head (+ .lead)  .screen-cols > .col-main/.col-side
               .stack .stack-sm .stack-lg  .row .row-between  .prose  .center
   - Buttons:  .btn + .btn-primary | .btn-soft | .btn-ghost   sizes .btn-small .btn-big .btn-block
               .linkbtn  .iconbtn  .back
   - Chips:    .chips > .chip[aria-pressed]   .tag
   - Surfaces: .card  .card-band  .card-sun  .card-sel  .card-dashed  .card-clay
   - Pebbles:  .pebble (+ .p2 .p3 shapes) + tint .t-clay .t-sun .t-sage .t-sky
   - Forms:    .field .label .hint .text (input/textarea)  .stepper  .seg  .range
               .switch (button role=switch) / .cswitch (label+checkbox)  .chk  .opts > .opt
   - Progress: .dots (ol, li[data-s=done|now|next])  .progress > span (--p:0..1)
   - States:   .empty  .confirm (TS.ui.inlineConfirm)  .note  .reward-note
   - Utility:  .sr  .mob-only  .desk-only  .nowrap
*/

/* ===== Fonts: local files only (OFL). Fallback stacks look fine without them. ===== */
@font-face{font-family:"Geologica";src:url("../fonts/geologica-cyrillic.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Geologica";src:url("../fonts/geologica-latin.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-cyrillic.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Nunito";src:url("../fonts/nunito-latin.woff2") format("woff2");font-weight:700 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ===== Tokens: light (default) ===== */
:root{
  --font-body:"Geologica", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head:"Geologica", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display:"Nunito", ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;

  --bg:#E9F0E8;
  --glow:rgba(242,195,78,.22);
  --glow-2:rgba(111,167,125,.18);
  --surface:#F6F9F3;
  --surface-2:#EEF4EC;
  --band:#DCE8DA;
  --chip:#D3E2D3;
  --sel:#CFE5D4;
  --ink:#14301F;
  --ink-2:#3D5A49;
  --line:#C6D7C6;
  --line-strong:#64836E;
  --primary:#2B5A3F;
  --primary-hover:#234B34;
  --on-primary:#F5F8EE;
  --on-primary-2:#CFE3D4;
  --primary-deco:rgba(245,248,238,.10);
  --go-bg:#F2C34E;
  --go-ink:#14301F;
  --clay:#C0703F;
  --clay-ink:#8F4620;
  --sun:#F2C34E;
  --sun-soft:#F7E6B0;
  --hl-bg:#F5DC8E;
  --hl-ink:#14301F;
  --card-glow:rgba(255,253,240,0);
  --halo:#F7E6B0;
  --seg-on:#F6F9F3;
  --tint-clay:#F1DCC6;
  --tint-sun:#F6E7B5;
  --tint-sage:#CFE5D4;
  --tint-sky:#D4E8E6;
  --mini-rim:rgba(245,248,238,.42);
  --mini-bed:rgba(245,248,238,.14);
  --mini-water:#9AD6C8;
  --water-0:#93D3C4;
  --water-1:#55A596;
  --water-2:#3A8A7E;
  --water-edge:#2C766B;
  --foam:rgba(255,255,250,.85);
  --glint:rgba(255,251,230,.45);
  --ripple:rgba(255,255,250,.5);
  --lily:#5E9F72;
  --lily-2:#477F58;
  --bed:#F1E7D3;
  --bed-dot:#DCCBA9;
  --rim:#DCC8A2;
  --rim-2:#C7AF83;
  --rim-3:#E9DBBE;
  --tick:#8C7550;
  --hub:#E9DBBE;
  --hub-in:#C0703F;
  --shell:#EBC08E;
  --snail-body:#CDE6D3;
  --snail-line:#14301F;
  --jet:#CADCD4;
  --leaf:#6FA77D;
  --leaf-2:#4F8B62;
  --stem:#4F8B62;
  --petal:#FFFDF6;
  --petal-line:#D6CDB6;
  --core:#A9592F;
  --flower:#DB8A62;
  --ground:#C9DCC5;
  --ground-2:#D5E4D2;
  --ff-op:0;
  --firefly:#F0D46A;
  --deco:#D5E4D3;
  --focus:#14301F;
  --shadow:0 1px 2px rgba(20,48,31,.06), 0 12px 30px -18px rgba(20,48,31,.32);
  color-scheme:light;
}
/* ===== Tokens: dark — night garden (auto) ===== */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0D1E1B; --glow:rgba(240,212,106,.07); --glow-2:rgba(63,126,99,.20);
    --surface:#132925; --surface-2:#18302B; --band:#142C28; --chip:#21403A; --sel:#24443D;
    --ink:#E2EEE5; --ink-2:#A6C2B4; --line:#244540; --line-strong:#6F9686;
    --primary:#EBD47C; --primary-hover:#F3E096; --on-primary:#13241C; --on-primary-2:#3B4A2A; --primary-deco:rgba(19,36,28,.08);
    --go-bg:#13241C; --go-ink:#EBD47C; --clay:#E7A47E; --clay-ink:#E7A47E;
    --sun:#F0D46A; --sun-soft:#1E3A33; --hl-bg:transparent; --hl-ink:#F0D46A;
    --card-glow:rgba(240,212,106,.16); --halo:rgba(240,212,106,.16); --seg-on:#335A51;
    --tint-clay:#3A2C22; --tint-sun:#3A3820; --tint-sage:#1F3F37; --tint-sky:#1B3A40;
    --mini-rim:rgba(19,36,28,.38); --mini-bed:rgba(19,36,28,.10); --mini-water:#2F7F75;
    --water-0:#3E9A8A; --water-1:#2A766B; --water-2:#1C5A52; --water-edge:#86CDBB;
    --foam:rgba(214,240,230,.6); --glint:rgba(226,240,232,.2); --ripple:rgba(214,240,230,.24);
    --lily:#3F7E63; --lily-2:#2F6650; --bed:#24342B; --bed-dot:#33473B;
    --rim:#34483D; --rim-2:#2A3C32; --rim-3:#3E5446; --tick:#A6C2B4; --hub:#3E5446; --hub-in:#F0D46A;
    --shell:#D9A577; --snail-body:#B5D9C4; --snail-line:#0D1E1B; --jet:#9FC0B4;
    --leaf:#5E9E7E; --leaf-2:#3F7E63; --stem:#4E8E70; --petal:#E8F1EA; --petal-line:#E8F1EA;
    --core:#8A5A3C; --flower:#E7A47E; --ground:#183A33; --ground-2:#14312B;
    --ff-op:1; --firefly:#F0D46A; --deco:#16302B; --focus:#F0D46A;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.6);
    color-scheme:dark;
  }
}
/* ===== Tokens: dark (chosen by hand) ===== */
:root[data-theme="dark"]{
  --bg:#0D1E1B; --glow:rgba(240,212,106,.07); --glow-2:rgba(63,126,99,.20);
  --surface:#132925; --surface-2:#18302B; --band:#142C28; --chip:#21403A; --sel:#24443D;
  --ink:#E2EEE5; --ink-2:#A6C2B4; --line:#244540; --line-strong:#6F9686;
  --primary:#EBD47C; --primary-hover:#F3E096; --on-primary:#13241C; --on-primary-2:#3B4A2A; --primary-deco:rgba(19,36,28,.08);
  --go-bg:#13241C; --go-ink:#EBD47C; --clay:#E7A47E; --clay-ink:#E7A47E;
  --sun:#F0D46A; --sun-soft:#1E3A33; --hl-bg:transparent; --hl-ink:#F0D46A;
  --card-glow:rgba(240,212,106,.16); --halo:rgba(240,212,106,.16); --seg-on:#335A51;
  --tint-clay:#3A2C22; --tint-sun:#3A3820; --tint-sage:#1F3F37; --tint-sky:#1B3A40;
  --mini-rim:rgba(19,36,28,.38); --mini-bed:rgba(19,36,28,.10); --mini-water:#2F7F75;
  --water-0:#3E9A8A; --water-1:#2A766B; --water-2:#1C5A52; --water-edge:#86CDBB;
  --foam:rgba(214,240,230,.6); --glint:rgba(226,240,232,.2); --ripple:rgba(214,240,230,.24);
  --lily:#3F7E63; --lily-2:#2F6650; --bed:#24342B; --bed-dot:#33473B;
  --rim:#34483D; --rim-2:#2A3C32; --rim-3:#3E5446; --tick:#A6C2B4; --hub:#3E5446; --hub-in:#F0D46A;
  --shell:#D9A577; --snail-body:#B5D9C4; --snail-line:#0D1E1B; --jet:#9FC0B4;
  --leaf:#5E9E7E; --leaf-2:#3F7E63; --stem:#4E8E70; --petal:#E8F1EA; --petal-line:#E8F1EA;
  --core:#8A5A3C; --flower:#E7A47E; --ground:#183A33; --ground-2:#14312B;
  --ff-op:1; --firefly:#F0D46A; --deco:#16302B; --focus:#F0D46A;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 14px 34px -18px rgba(0,0,0,.6);
  color-scheme:dark;
}

/* ===== Base ===== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{font-size:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:hidden;overflow-x:clip}
html[data-big="true"]{font-size:118.75%}
body{
  margin:0;min-height:100vh;overflow-x:hidden;overflow-x:clip;
  background-color:var(--bg);
  background-image:
    radial-gradient(42rem 26rem at 100% -6rem, var(--glow), transparent 70%),
    radial-gradient(36rem 28rem at -12% 22rem, var(--glow-2), transparent 70%);
  background-repeat:no-repeat;
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;line-height:1.55;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.18;margin:0;letter-spacing:-.018em;text-wrap:balance}
h1{font-size:clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem)}
h2{font-size:1.3rem}
h3{font-size:1.125rem}
p,ul,ol,dl,figure{margin:0}
b,strong{font-weight:650}
a{color:inherit;text-decoration-thickness:1.5px;text-underline-offset:.2em}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
button:disabled{cursor:default}
svg{display:block}
img{max-width:100%;height:auto}
.ico{width:1.5rem;height:1.5rem;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ico.fill{fill:currentColor;stroke:none}
:focus{outline:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
[tabindex="-1"]:focus,[tabindex="-1"]:focus-visible{outline:none}
::selection{background:var(--hl-bg);color:var(--ink)}
.sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.skip{position:absolute;left:1rem;top:-5rem;z-index:20;background:var(--surface);color:var(--ink);padding:.75rem 1rem;border-radius:.75rem;font-weight:650;box-shadow:var(--shadow)}
.skip:focus{top:.75rem}
.wrap{width:100%;max-width:80rem;margin-inline:auto;padding-inline:1rem}
.prose{max-width:62ch}
.prose > * + *{margin-top:.75rem}
.center{text-align:center}
.muted{color:var(--ink-2)}
.small{font-size:.9375rem}
.noscript{margin:1rem;padding:1rem;border-radius:1rem;background:var(--sun-soft)}

/* ===== Layout ===== */
.view{min-width:0}
.view.is-entering{animation:viewIn .32s ease-out}
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen{display:grid;gap:1.5rem;padding-top:.25rem;min-width:0}
.screen-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;min-height:2.75rem}
.screen-bar .bar-end{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem;margin-left:auto}
.screen-bar .chip{padding:.35rem .62rem;gap:.35rem}
@media (max-width:479px){ .screen-bar .back{padding:.4rem .8rem .4rem .5rem} }
.screen-head{display:grid;gap:.6rem;min-width:0}
.screen-head h1{outline-offset:4px;overflow-wrap:anywhere}
.lead{font-size:1.125rem;color:var(--ink-2);max-width:46ch}
.lead b{color:var(--ink)}
.kicker{display:flex;align-items:center;gap:.5rem;color:var(--ink-2);font-weight:500}
.kicker .ico{color:var(--leaf-2)}
.screen-cols{display:grid;gap:1.5rem;min-width:0}
.col-main,.col-side{display:grid;gap:1.25rem;align-content:start;min-width:0}
.stack{display:grid;gap:1rem;min-width:0}
.stack-sm{display:grid;gap:.5rem;min-width:0}
.stack-lg{display:grid;gap:1.5rem;min-width:0}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem}
.row-between{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem 1rem}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.75rem 1.25rem;border-radius:999px;border:2px solid transparent;font-weight:650;line-height:1.25;text-align:left;text-decoration:none;transition:background-color .2s, border-color .2s, transform .2s}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-hover)}
.btn-soft{background:var(--chip);color:var(--ink)}
.btn-soft:hover{background:var(--sel)}
.btn-ghost{background:transparent;border-color:var(--line-strong);color:var(--ink)}
.btn-ghost:hover{background:var(--surface-2)}
.btn-small{min-height:2.75rem;padding:.5rem .95rem;font-weight:600}
.btn-big{min-height:3.9rem;font-size:1.125rem;border-radius:1.25rem;padding:.9rem 1.4rem}
.btn-block{width:100%;justify-content:center;text-align:center}
.linkbtn{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.4rem .5rem;border:0;background:none;color:var(--ink);font-weight:650;border-radius:.75rem;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:.2em;text-decoration-color:var(--line-strong);text-align:left}
.linkbtn:hover{text-decoration-color:var(--ink)}
.linkbtn .ico{width:1.25rem;height:1.25rem}
.iconbtn{display:inline-grid;place-items:center;flex:none;width:2.75rem;height:2.75rem;padding:0;border-radius:999px;border:2px solid var(--line-strong);background:transparent;color:var(--ink)}
.iconbtn:hover{background:var(--surface-2)}
.iconbtn[aria-pressed="true"],.iconbtn[aria-expanded="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.back{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:.4rem .95rem .4rem .55rem;border-radius:999px;border:0;background:var(--chip);color:var(--ink);font-weight:650;text-decoration:none}
.back:hover{background:var(--sel)}

/* ===== Chips & tags ===== */
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.4rem .95rem;border-radius:999px;border:2px solid var(--line-strong);background:transparent;color:var(--ink);font-weight:600;line-height:1.2;text-align:left;transition:background-color .2s,border-color .2s}
.chip:hover{background:var(--surface-2)}
.chip .ico{width:1.25rem;height:1.25rem}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.tag{display:inline-block;padding:.05rem .55rem;border-radius:999px;border:1.5px solid var(--line-strong);color:var(--ink-2);font-family:var(--font-body);font-weight:500;font-size:.9375rem;line-height:1.35;letter-spacing:0}

/* ===== Surfaces ===== */
.card{position:relative;display:grid;gap:.75rem;padding:1.15rem;border-radius:1.5rem;background:var(--surface);min-width:0}
.card-band{background:var(--band)}
.card-sun{background-color:var(--sun-soft);background-image:radial-gradient(120% 90% at 100% 0%, var(--card-glow), transparent 60%)}
.card-sel{background:var(--sel)}
.card-clay{background:var(--tint-clay)}
.card-dashed{background:transparent;border:2px dashed var(--line-strong)}
.card h2{font-size:1.25rem}
@media (min-width:960px){ .card{padding:1.35rem;border-radius:1.75rem} }

/* ===== Pebble icon holders ===== */
.pebble{flex:none;display:grid;place-items:center;width:3.1rem;height:3rem;color:var(--ink);border-radius:47% 53% 44% 56% / 56% 46% 54% 44%}
.pebble.p2{border-radius:56% 44% 52% 48% / 46% 56% 44% 54%}
.pebble.p3{border-radius:44% 56% 58% 42% / 52% 44% 56% 48%}
.pebble.sm{width:2.5rem;height:2.4rem}
.pebble.sm .ico{width:1.25rem;height:1.25rem}
.t-clay{background:var(--tint-clay)} .t-sun{background:var(--tint-sun)} .t-sage{background:var(--tint-sage)} .t-sky{background:var(--tint-sky)} .t-surface{background:var(--surface)}

/* ===== Forms ===== */
.field{display:grid;gap:.45rem;min-width:0}
.label,.field > label{font-weight:650}
.opt-l,.hint{font-weight:400;color:var(--ink-2)}
.text{width:100%;min-height:3.25rem;padding:.75rem 1rem;border-radius:1.1rem;border:2px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:1rem;line-height:1.4}
textarea.text{min-height:6rem;resize:vertical}
.text::placeholder{color:var(--ink-2);opacity:1}
.text:hover{border-color:var(--ink-2)}
.text:focus-visible{outline-offset:2px}
.text[aria-invalid="true"]{border-color:var(--clay)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0}

/* segmented control: buttons with aria-pressed */
.seg{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px;padding:3px;border-radius:1.6rem;background:var(--chip);max-width:100%}
.seg button{display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-height:2.75rem;min-width:2.75rem;padding:0 .8rem;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font-weight:600;font-size:1rem;transition:background-color .2s,color .2s}
.seg button:hover{color:var(--ink)}
/* long labels (bigger text, narrow phones) wrap between words instead of running into the next button */
.seg button{min-width:0;white-space:normal;text-align:center;line-height:1.15}
.seg button .ico{width:1.25rem;height:1.25rem}
.seg button[aria-pressed="true"]{background:var(--seg-on);color:var(--ink);box-shadow:var(--shadow)}

/* stepper: <div class="stepper"><button class="iconbtn">-</button><input class="stepper-val"><span>мин</span><button>+</button></div> */
.stepper{display:inline-flex;align-items:center;gap:.4rem;padding:.25rem;border-radius:999px;border:2px solid var(--line-strong);background:var(--surface)}
.stepper .iconbtn{border:0;background:var(--chip)}
.stepper .iconbtn:hover{background:var(--sel)}
.stepper-val{width:3.2rem;min-height:2.75rem;padding:0;border:0;border-radius:.6rem;background:transparent;color:var(--ink);text-align:center;font-family:var(--font-display);font-weight:900;font-size:1.35rem;font-variant-numeric:tabular-nums;-moz-appearance:textfield;appearance:textfield}
.stepper-val::-webkit-outer-spin-button,.stepper-val::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper-unit{color:var(--ink-2);padding-right:.35rem}

/* range slider */
.range{-webkit-appearance:none;appearance:none;width:100%;height:2.75rem;margin:0;background:transparent;cursor:pointer;--fill:50%}
.range::-webkit-slider-runnable-track{height:.65rem;border-radius:999px;background:linear-gradient(90deg, var(--primary) 0 var(--fill), var(--chip) var(--fill) 100%);border:0}
.range::-moz-range-track{height:.65rem;border-radius:999px;background:var(--chip)}
.range::-moz-range-progress{height:.65rem;border-radius:999px;background:var(--primary)}
.range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:1.75rem;height:1.75rem;margin-top:-.55rem;border-radius:50%;background:var(--surface);border:3px solid var(--primary);box-shadow:var(--shadow)}
.range::-moz-range-thumb{width:1.4rem;height:1.4rem;border-radius:50%;background:var(--surface);border:3px solid var(--primary)}
.range:focus-visible{outline:none}
.range:focus-visible::-webkit-slider-thumb{outline:3px solid var(--focus);outline-offset:2px}
.range:focus-visible::-moz-range-thumb{outline:3px solid var(--focus);outline-offset:2px}

/* switch as a button: <button class="switch" role="switch" aria-checked="false"><span class="txt"><b>…</b><span>…</span></span><span class="track"></span></button> */
.switch{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;min-height:3.25rem;padding:.5rem 0;border:0;background:none;color:var(--ink);text-align:left}
.switch .txt,.cswitch .txt{display:grid;gap:.1rem;min-width:0}
.switch .txt b,.cswitch .txt b{font-weight:650}
.switch .txt span,.cswitch .txt span{color:var(--ink-2)}
.track{position:relative;flex:none;width:3.25rem;height:2rem;border-radius:999px;border:2px solid var(--line-strong);background:var(--surface-2);transition:background-color .2s,border-color .2s}
.track::after{content:"";position:absolute;top:.2rem;left:.2rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--line-strong);transition:transform .2s, background-color .2s}
[aria-checked="true"] > .track,input:checked + .track{background:var(--primary);border-color:var(--primary)}
[aria-checked="true"] > .track::after,input:checked + .track::after{transform:translateX(1.25rem);background:var(--on-primary)}
/* switch as a label with a checkbox inside */
.cswitch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;cursor:pointer}
.cswitch input{position:absolute;opacity:0;width:3.25rem;height:2rem;right:0;margin:0;cursor:pointer}
.cswitch input:focus-visible + .track{outline:3px solid var(--focus);outline-offset:3px}
.cswitch .track{pointer-events:none}

/* round checkbox */
.chk{appearance:none;-webkit-appearance:none;flex:none;width:1.6rem;height:1.6rem;margin:0;border-radius:50%;border:2px solid var(--line-strong);background:transparent;display:grid;place-items:center;cursor:pointer;transition:background-color .2s,border-color .2s}
.chk::after{content:"";width:.45rem;height:.8rem;border:solid var(--on-primary);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) translate(-1px,-1px);opacity:0}
.chk:checked{background:var(--primary);border-color:var(--primary)}
.chk:checked::after{opacity:1}

/* choice tiles: <div class="opts"><button class="opt" aria-pressed="false">ico + <span class="ol">text</span> + <span class="ok">✓</span></button></div> */
.opts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.opts.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.opt{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ico . ok" "lbl lbl lbl";align-items:center;row-gap:.55rem;column-gap:.5rem;min-height:5rem;padding:.7rem .75rem;border-radius:1.15rem;border:2px solid var(--line-strong);background:var(--bg);color:var(--ink);text-align:left;font-weight:650;line-height:1.25;transition:background-color .2s,border-color .2s}
.opt:hover{background:var(--surface-2)}
.opt .ico{color:var(--ink-2)}
.opt[aria-pressed="true"]{background:var(--sel);border-color:var(--primary)}
.opt[aria-pressed="true"] .ico{color:var(--ink)}
.opt .oi{grid-area:ico} .opt .ol{grid-area:lbl;min-width:0} .opt .ok{grid-area:ok}
.opt .ok{display:grid;visibility:hidden;width:1.4rem;height:1.4rem;border-radius:50%;background:var(--primary);place-items:center}
.opt .ok .ico{width:.95rem;height:.95rem;stroke-width:2.6;color:var(--on-primary)}
.opt[aria-pressed="true"] .ok{visibility:visible}
@media (max-width:519px){
  .opts,.opts.two{grid-template-columns:1fr}
  .opt{grid-template-areas:"ico lbl ok";column-gap:.75rem;min-height:3.5rem;padding:.55rem .9rem}
}

/* ===== Progress ===== */
.dots{display:flex;flex-wrap:wrap;gap:.25rem 1rem;list-style:none;margin:0;padding:0;color:var(--ink-2)}
.dots li{display:flex;align-items:center;gap:.4rem}
.dots .dot{display:grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:50%;border:2px solid var(--line-strong);color:var(--on-primary)}
.dots .dot .ico{width:.9rem;height:.9rem;stroke-width:2.6;visibility:hidden}
.dots li[data-s="done"] .dot{background:var(--primary);border-color:var(--primary)}
.dots li[data-s="done"] .dot .ico{visibility:visible}
.dots li[data-s="now"]{color:var(--ink);font-weight:650}
.dots li[data-s="now"] .dot{border-color:var(--primary);box-shadow:inset 0 0 0 3px var(--surface), inset 0 0 0 8px var(--primary)}
.dots.compact li > span:not(.dot){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.progress{height:.6rem;border-radius:999px;background:var(--chip);overflow:hidden}
.progress > span{display:block;height:100%;width:calc(var(--p, 0) * 100%);border-radius:inherit;background:var(--primary);transition:width .4s ease-out}

/* ===== Lists ===== */
.list{list-style:none;margin:0;padding:0;display:grid}
.list > li{padding:.75rem 0;border-top:1px solid var(--line)}
.list > li:first-child{border-top:0}
.check-row{display:flex;align-items:center;gap:.75rem;min-height:2.9rem;padding:.25rem;border-radius:.75rem;cursor:pointer}
.check-row:hover{background:var(--surface-2)}
.check-row .chk:checked + span{color:var(--ink-2);text-decoration:line-through;text-decoration-color:var(--line-strong)}

/* ===== Empty state ===== */
.empty{display:grid;gap:.75rem;justify-items:start;padding:1.25rem;border-radius:1.5rem;background:var(--surface)}
.empty .pebble{width:3.6rem;height:3.5rem}
.empty h2{font-size:1.25rem}
.empty p{color:var(--ink-2);max-width:46ch}
.empty p b{color:var(--ink)}

/* ===== Inline confirm (TS.ui.inlineConfirm) ===== */
.confirm{display:grid;gap:.75rem;padding:.95rem 1rem;border-radius:1.15rem;background:var(--tint-clay);color:var(--ink)}
.confirm p{font-weight:500;max-width:52ch}
.confirm > p:first-child{font-weight:650}
.confirm .confirm-detail{color:var(--ink);font-weight:400}
.confirm ul{margin:0;padding-left:1.2rem}
.confirm .row{gap:.5rem}

/* ===== Notes ===== */
.note{display:flex;gap:.6rem;align-items:flex-start;color:var(--ink-2)}
.note .ico{color:var(--leaf-2);margin-top:.05rem;width:1.35rem;height:1.35rem}
.note b{color:var(--ink)}
.note-box{padding:.85rem 1rem;border-radius:1.15rem;background:var(--surface)}
.reward-note{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem .4rem .5rem;border-radius:999px;background:var(--sel);color:var(--ink);font-weight:600}
.reward-note .ico{color:var(--leaf-2)}
.reward-note.is-new{animation:growIn .6s cubic-bezier(.2,.8,.2,1)}
@keyframes growIn{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* tiny check pop (TS.rewards.check) */
.ts-pop{animation:tsPop .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes tsPop{0%{transform:scale(1)}40%{transform:scale(1.22)}100%{transform:scale(1)}}

/* ===== Snail symbol parts (logo, timer, done only) ===== */
.sn-body{fill:var(--snail-body);stroke:var(--snail-line);stroke-width:2;stroke-linejoin:round}
.sn-shell{fill:var(--shell);stroke:var(--snail-line);stroke-width:2}
.sn-spiral,.sn-line{fill:none;stroke:var(--snail-line);stroke-width:2;stroke-linecap:round}
.sn-jet{fill:var(--jet);stroke:var(--snail-line);stroke-width:2}
.sn-flame{fill:var(--sun);stroke:var(--snail-line);stroke-width:1.4;stroke-linejoin:round}
.sn-eye{fill:var(--snail-line)}
.sn-cheek{fill:var(--flower);opacity:.55}
.logo{width:2.6rem;height:auto}

/* ===== Top bar ===== */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding-block:.75rem}
.brand{position:relative;display:inline-flex;align-items:center;gap:.45rem;min-width:0;min-height:2.75rem;padding:.25rem .375rem .25rem .125rem;border-radius:1rem;font-family:var(--font-display);font-weight:900;font-size:1.12rem;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;text-decoration:none}
.brand .logo{width:2.45rem}
.brand .b1{color:var(--clay-ink)}
.brand-pop{position:absolute;left:1.35rem;top:-.1rem;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--sel);color:var(--leaf-2);opacity:0;pointer-events:none}
.brand-pop .ico{width:1rem;height:1rem}
.brand-pop.go{animation:brandPop 1.6s ease-out}
@keyframes brandPop{0%{opacity:0;transform:translateY(6px) scale(.5)}20%{opacity:1;transform:translateY(-4px) scale(1.05)}70%{opacity:1;transform:translateY(-8px) scale(1)}100%{opacity:0;transform:translateY(-14px) scale(.9)}}
.quick{display:flex;align-items:center;gap:.5rem;flex:none}
.lang-mob button{min-width:2.75rem;padding:0 .55rem}
.setbtn{display:inline-flex;align-items:center;gap:.4rem;min-height:2.75rem;padding:0 .85rem 0 .7rem;border-radius:999px;border:2px solid var(--line-strong);background:transparent;color:var(--ink);font-weight:650}
.setbtn .ico{width:1.25rem;height:1.25rem}
.setbtn[aria-expanded="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.tog{display:inline-flex;align-items:center;gap:.55rem;min-height:2.75rem;padding:0 .45rem 0 .85rem;border-radius:999px;border:2px solid var(--line-strong);background:transparent;color:var(--ink);font-weight:600;font-size:1rem;white-space:nowrap}
.tog:hover{background:var(--surface-2)}
.tog .aa{font-family:var(--font-display);font-weight:900;font-size:1.05rem;letter-spacing:-.02em}
.tog .ico{width:1.25rem;height:1.25rem}
.tog .track{width:2.6rem;height:1.6rem}
.tog .track::after{top:.15rem;left:.15rem;width:1rem;height:1rem}
.tog[aria-checked="true"] .track::after{transform:translateX(1rem)}
.desk-only{display:none !important}
@media (max-width:359px){ .lang-mob{display:none} .brand{font-size:1.05rem} .brand .logo{width:2.25rem} }
@media (max-width:419px){ .setbtn .ico{display:none} .setbtn{padding:0 .85rem} }
@media (max-width:459px){ html[data-big="true"] .lang-mob{display:none} }
@media (min-width:640px){ .brand{font-size:1.3rem} .brand .logo{width:2.9rem} .brand-pop{left:1.7rem} }
@media (min-width:1200px){
  html:not([data-big="true"]) .desk-only{display:inline-flex !important}
  html:not([data-big="true"]) .mob-only{display:none !important}
  html:not([data-big="true"]) .settings{display:none !important}
}

/* ===== Settings panel (inline, pushes content down) ===== */
.settings{margin:0 0 1.25rem;padding:1.1rem 1.15rem;border-radius:1.5rem;background:var(--surface);display:grid;gap:1rem;box-shadow:var(--shadow)}
.settings h2{font-size:1.25rem}
.set-row{display:grid;gap:.5rem}
.set-row .lbl{font-weight:650}
.set-row .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;max-width:27rem}
.set-row .seg button{padding:0 .5rem}
@media (max-width:399px){ .set-row .seg button .ico{display:none} }
@media (max-width:519px){ html[data-big="true"] .set-row .seg button .ico{display:none} }
.set-close{justify-self:start}
@media (min-width:640px){
  .settings{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;column-gap:2rem}
  .settings h2,.set-close{grid-column:1/-1}
}

/* ===== Status strip (timer elsewhere, noise on) ===== */
.strip{display:grid;gap:.5rem;margin:0 0 1rem}
.strip-item{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1rem;padding:.55rem .6rem .55rem 1rem;border-radius:1.25rem;background:var(--sel)}
.strip-item p{display:flex;align-items:center;gap:.55rem;font-weight:650;min-width:0;overflow-wrap:anywhere}
.strip-item p .ico{color:var(--leaf-2)}
.strip-item .row{gap:.35rem}
.strip-item.is-noise{background:var(--tint-sky)}
.strip-item.is-done{background-color:var(--sun-soft);background-image:radial-gradient(120% 90% at 100% 0%, var(--card-glow), transparent 60%)}

/* ===== Footer ===== */
.foot{margin-top:3rem;padding:1.5rem 0 2.5rem;border-top:1px solid var(--line);display:grid;gap:1.5rem;color:var(--ink-2)}
.foot .disc{color:var(--ink);font-weight:500;max-width:60ch}
.foot .local{display:flex;gap:.6rem;align-items:flex-start}
.foot .local .ico{color:var(--leaf-2);margin-top:.1rem}
.foot .local b{color:var(--ink)}
.foot-info{display:grid;gap:1rem;align-content:start}
.mydata{display:grid;gap:.75rem;align-content:start}
.mydata h2{font-family:var(--font-body);font-size:1rem;font-weight:650;color:var(--ink);letter-spacing:0}
.mydata .row{gap:.5rem}
.data-msg{color:var(--ink);font-weight:500}
.data-msg:empty{display:none}
.update-note{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.75rem 1rem;border-radius:1.15rem;background:var(--sel);color:var(--ink)}
.foot-meta{font-size:.9375rem}
@media (min-width:960px){
  .foot{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);column-gap:3rem;align-items:start}
  .foot-meta{grid-column:1/-1}
}

/* ===== Larger screens ===== */
@media (min-width:640px){ .wrap{padding-inline:1.5rem} }
@media (min-width:960px){
  .wrap{padding-inline:2.5rem}
  .topbar{padding-block:1.1rem}
  .screen{gap:1.75rem}
  .screen-cols{grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:3.5rem;align-items:start}
  .screen-cols.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .btn-big.btn-block{width:auto;min-width:16rem}
}
/* side columns stick only when they fit in the window (otherwise their lower part could not be seen) */
@media (min-width:960px) and (min-height:720px){ html:not([data-big="true"]) .col-side.sticky{position:sticky;top:1rem} }
@media (min-width:960px) and (min-height:940px){ html[data-big="true"] .col-side.sticky{position:sticky;top:1rem} }
@media (max-width:959px){ .hidden-mob{display:none !important} }
@media (min-width:960px){ .hidden-desk{display:none !important} }

/* ===== Calm mode & reduced motion ===== */
html[data-calm="true"] *,html[data-calm="true"] *::before,html[data-calm="true"] *::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}