/* calc.css — режим calc (PLAN §26, окно 3, 27.10.2026; прототип — marketing/shkaly/proto/calc.css): калькуляторы самопроверки.
   Корень — .tw.tw-tool.tw-test.tw-calc[data-kind="calc"] («ночное окно» breath.css + tests.css: линза, кольцо, ориентиры, поле времени sc-*,
   ввод ударов pi-*, шаги qz-*), своё — с префиксом cc-. Подключается после бандла (cssFor в build.mjs, как mysl.css); светлая тема — сборкой. */

.tw-calc{--mood:#5ec8ff;--dial:clamp(150px,calc(100svh - 650px),210px);gap:12px}
.tw-calc[data-calc="caffeine"]{--mood:#ffb547}
.tw-calc[data-calc="ruffier"]{--mood:#ff8f6b}
.tw-calc[data-calc="chrono"]{--mood:#8c7bff}
.tw-calc .tw-head{min-height:30px}
/* до calc.js сборка рисует круг и заглушку: высота = окно без круга (замер 360–1366 px, 27.10), иначе CLS 0,6–0,9 */
.cc-ph{align-self:stretch;height:615px}
.tw-calc[data-calc="caffeine"] .cc-ph{height:815px}
.tw-calc[data-calc="ruffier"] .cc-ph{height:450px}
.tw-calc[data-calc="chrono"] .cc-ph{height:760px}
.cc-top:empty{display:none}
.cc-top{align-self:stretch;display:flex;justify-content:center}
.cc-body{align-self:stretch;display:flex;flex-direction:column;align-items:center;gap:12px;min-height:0}
.cc-body[data-anim]{animation:ccIn .35s var(--au-spring,cubic-bezier(.32,.72,0,1))}
@keyframes ccIn{from{opacity:0;transform:translateX(14px)}}
.tw-calc .l-num{font-size:15cqw}
.tw-calc .ring .mark{stroke:none}
.tw-calc .tw-foot.cc-foot{flex-direction:column;align-items:center;gap:10px;padding-bottom:16px}
.tw-calc .mt-lbl{display:block;margin:0 0 6px;font:600 11px/1.3 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.tw-calc .mt-q{margin:0;font:700 18px/1.25 var(--f-display);letter-spacing:-.015em;text-align:center;text-wrap:balance}
.tw-calc .mt-sub{margin:-4px 0 0;max-width:36ch;font-size:13.5px;line-height:1.45;color:var(--muted);text-align:center;text-wrap:pretty}
.tw-calc .go{flex:none;width:100%;max-width:300px;height:54px;font-size:15.5px;padding:0 22px}
.tw-calc .go:disabled{display:none}
/* tools.css рисует свой «▶» в .tw-tool .go::before — со своими svg в кнопке он дублируется */
.tw-calc .go::before{display:none}
.tw-calc .l-label{max-width:98%;font-size:max(10px,4.3cqw);white-space:nowrap}
.tw-calc .mt-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--fg);font:600 14px/1.2 var(--f-body)}
.tw-calc .mt-ghost svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cc-acts{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}

/* итог одной строкой и примечания */
.cc-res{margin:0;max-width:360px;font-size:13.5px;line-height:1.45;color:var(--muted);text-align:center;text-wrap:pretty}
.cc-res b{color:var(--fg);font-weight:600}
.cc-res:empty{display:none}
.cc-note{display:flex;gap:8px;align-items:flex-start;margin:0;max-width:360px;font-size:12px;line-height:1.45;color:var(--dim);text-align:left}
.cc-note svg{flex:none;width:16px;height:16px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.cc-formula{margin:0;max-width:360px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.035);font:500 12px/1.45 var(--f-body);color:var(--muted);text-align:center;font-variant-numeric:tabular-nums}
.cc-formula:empty{display:none}
.tw-calc .hold-norms-wrap{max-width:360px}

/* поле времени: несколько на виджете — у каждого свой якорь списка */
.tw-calc .sc-pick{position:relative}
.tw-calc .sc-pick .sc-pop{z-index:20}
.tw-calc .sc-when{gap:12px}
.tw-calc .sc-wl{font:600 14px/1.2 var(--f-body);color:var(--muted)}
.tw-calc .cc-sm .sc-tbtn{height:40px;padding:0 10px 0 12px;font-size:18px}
.tw-calc .cc-sm .sc-tbtn svg{width:15px;height:15px;margin-left:5px}

/* кофеин: напитки */
.cc-grp{align-self:stretch;display:flex;flex-direction:column;max-width:380px;margin-inline:auto;width:100%}
.cc-cups{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.cc-cup{display:grid;grid-template-columns:1fr auto 30px;align-items:center;gap:8px}
.cc-sel{min-width:0;height:40px;padding:0 30px 0 12px;border-radius:14px;border:1px solid var(--card-line);background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9b3d6' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 9px center/16px;
  color:var(--fg);font:500 13.5px/1.2 var(--f-body);-webkit-appearance:none;appearance:none;text-overflow:ellipsis}
.cc-sel:focus{outline:0;border-color:color-mix(in srgb,var(--mood) 65%,transparent)}
.cc-sel option{background:#0b1123;color:#f1f4ff}
.tw-calc .cc-cup .sc-tbtn{height:40px;padding:0 9px 0 12px;font-size:17px;min-height:0}
.tw-calc .cc-cup .sc-tbtn svg{width:15px;height:15px;margin-left:5px}
.tw-calc .cc-cup .sc-pop{left:auto;right:-38px;transform:none}
.cc-del{width:30px;height:30px;min-height:0;padding:0;border:0;border-radius:50%;background:none;color:var(--dim);display:grid;place-items:center}
.cc-del:hover{color:var(--fg);background:rgba(255,255,255,.06)}
.cc-del svg,.cc-add svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.cc-add{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:34px;margin-top:6px;padding:0 12px 0 8px;border:1px dashed var(--line);border-radius:999px;background:none;color:var(--muted);font:600 13px/1 var(--f-body)}
.cc-add:hover{color:var(--fg);border-color:color-mix(in srgb,var(--mood) 50%,transparent)}
.cc-add[hidden]{display:none}
.cc-curve{width:100%;max-width:380px}
.cc-curve svg{display:block;width:100%;height:auto;overflow:visible}
.cc-curve text{font:600 9px/1 var(--f-body);fill:var(--dim)}
.cc-curve .cv-line{fill:none;stroke:var(--mood);stroke-width:2;stroke-linejoin:round;filter:drop-shadow(0 0 4px color-mix(in srgb,var(--mood) 60%,transparent))}
.cc-curve .cv-lim{stroke:var(--ok);stroke-width:1;stroke-dasharray:3 3;opacity:.8}
.cc-curve .cv-lt{fill:var(--ok)}
.cc-curve .cv-bed{stroke:#8c7bff;stroke-width:1.2}
.cc-curve .cv-bt{fill:#b8adff}
.cc-curve .cv-night{fill:rgba(140,123,255,.09)}
.cc-curve .cv-ax{stroke:rgba(255,255,255,.12);stroke-width:1}
.cc-curve .cv-cup{fill:var(--mood);stroke:#060a18;stroke-width:1.5}
.cc-half{display:flex;flex-direction:column;align-items:center;gap:6px}
.cc-hl{font:600 11px/1.3 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.cc-half .tw-cap{margin:0;max-width:300px;text-wrap:balance}

/* проба Руфье: план, шаги, ввод ударов */
.cc-plan{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;list-style:none;max-width:360px}
.cc-plan li{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--card-line);font-size:13.5px;line-height:1.4;color:var(--muted)}
.cc-plan b{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--mood) 22%,transparent);color:var(--mood);font:700 12px/1 var(--f-display)}
.tw-calc .qz-head{align-self:stretch;max-width:380px;margin-inline:auto;width:100%}
.tw-calc .qz-back svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.tw-calc .qz-mini .sg{stroke:var(--mood);stroke-width:7;stroke-opacity:.25;stroke-linecap:round}
.tw-calc .qz-mini .sg.on,.tw-calc .qz-mini .sg.done{stroke-opacity:1}
.tw-calc .pulse-in{order:0;gap:8px;padding:12px 14px 14px}
.cc-sub{margin-top:-4px;font-size:12px;color:var(--dim)}
.cc-dim{opacity:.55}
.cc-slot{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.cc-pins{display:grid;grid-template-columns:1fr;gap:8px;width:100%;max-width:360px}
.cc-pins .pulse-in{max-width:none;flex-direction:row;justify-content:space-between;padding:8px 10px 8px 14px}
.cc-pins .pi-q{font-size:13.5px}
.cc-pins .pi-row{gap:8px}
.cc-pins .pi-row .step-btn{width:38px;height:38px}
.cc-pins .pi-num{width:2.6em;height:46px;font-size:22px}
.cc-out{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%}
.cc-nhint{margin:0}
.tw-calc[data-calc="ruffier"][data-ph="down"] .lens{transform:translate(-50%,-50%) scale(.94);transition:transform .7s}
.tw-calc[data-calc="ruffier"][data-ph="up"] .lens{transform:translate(-50%,-50%) scale(1.04);transition:transform .7s}

/* хронотип: будни и выходные */
.cc-days{display:grid;grid-template-columns:1fr;gap:8px;width:100%;max-width:380px}
.cc-day{padding:10px 12px 12px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid var(--card-line)}
.cc-day.cc-free{border-color:color-mix(in srgb,var(--mood) 35%,transparent)}
.cc-day .mt-lbl{margin-bottom:8px}
.cc-pair{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:auto auto;gap:4px 10px;justify-items:start}
.cc-pl{font-size:12.5px;color:var(--muted)}
.tw-calc .ring .cc-wk{stroke-opacity:.55;filter:none}

/* хаб проб: поля */
.tw-calc .cc-probes{gap:5px}
.tw-calc .cc-probes .tw-chip{height:32px;padding:0 11px;font:600 12.5px/1 var(--f-body)}
.tw-calc .cc-probes .tw-chip.active{background:var(--glass-2);color:var(--fg);border-color:color-mix(in srgb,var(--mood) 55%,transparent)}
.tw-calc .sc-dir .tw-chip.active{border-color:color-mix(in srgb,var(--mood) 55%,transparent)}
.cc-need{margin:0;font:600 12.5px/1.3 var(--f-body);color:var(--dim);text-align:center}
.cc-fields{display:flex;flex-direction:column;gap:6px;width:100%;max-width:380px}
.cc-num{display:grid;grid-template-columns:1fr auto 52px;align-items:center;gap:8px;padding:6px 8px 6px 14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--card-line)}
.cc-nl{font-size:13px;line-height:1.3;color:var(--fg)}
.cc-nu{font-size:11.5px;line-height:1.2;color:var(--dim)}
.cc-num .pi-row{gap:6px}
.tw-calc .cc-num .step-btn{width:34px;height:34px;min-height:0;font-size:18px}
.tw-calc .cc-num .pi-num{width:3.2em;height:40px;border-radius:12px;font-size:18px}

@media (min-width:1000px){
  .tw-calc{--dial:clamp(140px,calc(100svh - 700px),190px)}
}
@media (max-width:374px){
  .cc-cup{grid-template-columns:1fr auto 26px;gap:6px}
}