/* v66 «WHOOP для каждого» (approved preview, 06.10.2026): the WHOOP page (connect, status, «Сегодня», settings,
   disconnect), the «Сегодня пока» line on Главная and the optional «Есть WHOOP?» row. Same tokens as «Старт».
   WHOOP's puck stays white on black, never recoloured (WHOOP's design guidelines). One line each at 320–430 px. */
:root{--wm-puck-line:#0000;--wm-switch-off:#d6e2e8}
html[data-theme="dark"]{--wm-puck-line:#3a3a3c;--wm-switch-off:#48484a}
.wm{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;color:var(--st-ink)}
.wm-puck.provider-icon{display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:11px;background:#000;box-shadow:inset 0 0 0 1px var(--wm-puck-line);overflow:hidden;padding:0}
.wm-puck.provider-icon img,.wm-puck.provider-icon svg{width:100%;height:100%}
.wm-puck.provider-icon.big{flex-basis:56px;width:56px;height:56px;border-radius:15px}
.wm-puck.provider-icon.sm{flex-basis:18px;width:18px;height:18px;border-radius:5px;box-shadow:none}
.wm-title{margin:2px 2px 0;font-size:24px;letter-spacing:-.5px;white-space:nowrap}
.wm-back{justify-self:start;border:0;background:none;color:var(--st-teal-ink);font-size:15px;font-weight:600;padding:6px 2px;cursor:pointer}
.wm .surface{margin:0;container-type:inline-size}
.wm h2{margin:0;font-size:18px;letter-spacing:-.3px;white-space:nowrap}
.wm-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.wm-head small{color:var(--st-muted);font-size:13px;white-space:nowrap}

/* Status */
.wm-status{display:grid;grid-template-columns:44px minmax(0,1fr);gap:12px;align-items:center}
.wm-status .wm-puck.provider-icon{flex-basis:44px;width:44px;height:44px;border-radius:12px}
.wm-status b{display:block;font-size:17px;letter-spacing:-.2px;white-space:nowrap}
.wm-status small{display:block;color:var(--st-muted);font-size:13px;margin-top:2px;white-space:nowrap}
.wm-sync{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--st-line)}
.wm-sync>span{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--st-muted);white-space:nowrap}
.wm-sync>span b{color:var(--st-ink);font-weight:650}
.wm .st-go.quiet{background:var(--st-accent-soft);color:var(--st-teal-ink);box-shadow:none}
.wm .st-go[disabled]{opacity:.45;cursor:default}
.wm-spin{width:16px;height:16px;border-radius:50%;border:2px solid var(--st-line);border-top-color:var(--st-teal);animation:wm-spin .8s linear infinite}
@keyframes wm-spin{to{transform:rotate(360deg)}}
.wm-bar{height:8px;border-radius:99px;background:var(--st-line);overflow:hidden}
.wm-bar span{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#46d4c0,#1aa6c1);transition:width .5s ease}
.wm-bar.indef{position:relative}
.wm-bar.indef span{position:absolute;inset:0 auto 0 0;width:36%;animation:wm-slide 1.4s ease-in-out infinite}
@keyframes wm-slide{0%{transform:translateX(-100%)}100%{transform:translateX(280%)}}
@media (prefers-reduced-motion:reduce){.wm-bar.indef span{animation:none;width:100%;opacity:.5}}
.wm-progress{display:grid;gap:10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--st-line)}
.wm-progress p{margin:0;font-size:13.5px;color:var(--st-muted);white-space:nowrap}

/* «Сегодня»: one row per WHOOP item; «пока» stays quiet */
.wm-rows{list-style:none;margin:10px 0 0;padding:0;display:grid}
.wm-row{display:grid;grid-template-columns:40px minmax(0,1fr);gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--st-line)}
.wm-row:first-child{border-top:0}
.wm-row img{width:40px;height:40px;object-fit:contain;filter:var(--st-icon-shadow)}
.wm-row b{display:block;font-size:16px;white-space:nowrap;font-variant-numeric:tabular-nums}
.wm-row b em{font-style:normal;font-weight:500;color:var(--st-muted);font-size:14px}
.wm-row small{display:block;color:var(--st-muted);font-size:12.5px;margin-top:2px;white-space:normal;overflow-wrap:anywhere}
.wm-row small.in{color:var(--st-good)}
.wm-row small.wait{color:var(--st-amber-ink)}
.wm-row.pending b{color:var(--st-muted);font-weight:600}
.wm-row.gone img{filter:grayscale(1);opacity:.45}
.wm-row.gone b{color:var(--st-muted);font-weight:600}
.wm-attr{display:flex;align-items:center;gap:6px;margin-top:10px;font-size:11.5px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:var(--st-soft);white-space:nowrap}

/* Notes: warm, never red */
.wm-note{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;background:var(--st-amber-bg);border:1px solid var(--st-amber-line);color:var(--st-amber-ink);border-radius:14px;padding:11px 13px;font-size:13.5px;line-height:1.4;text-wrap:pretty}
.wm-calm{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;background:var(--st-raised);border-radius:14px;padding:11px 13px;font-size:13.5px;line-height:1.4;color:var(--st-muted);text-wrap:pretty}
.wm-note svg,.wm-calm svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;margin-top:1px}
.wm-note b,.wm-calm b{display:block;font-weight:650;white-space:nowrap}
.wm-calm b{color:var(--st-ink)}
.wm-note .st-go{margin-top:10px}
.wm-gap{margin-top:12px}

/* Settings: radio cards and quiet switches */
.wm-set{display:grid;gap:16px;margin-top:12px}
.wm-label{display:block;margin-bottom:8px;font-size:12.5px;font-weight:600;color:var(--st-muted);letter-spacing:.01em;white-space:nowrap}
.wm-opts{display:grid;gap:8px}
.wm-opt{display:grid;grid-template-columns:minmax(0,1fr) 22px;column-gap:12px;align-items:center;width:100%;text-align:left;border:1.5px solid var(--st-line);background:var(--st-surface);color:var(--st-ink);border-radius:16px;padding:12px 14px;cursor:pointer;transition:border-color .2s,background .2s}
.wm-opt[aria-pressed="true"]{border-color:var(--st-teal);background:linear-gradient(160deg,var(--st-accent-soft),var(--st-surface) 70%)}
.wm-opt b{display:block;font-size:15.5px;white-space:nowrap}
.wm-opt small{display:block;color:var(--st-muted);font-size:12.5px;margin-top:2px;white-space:nowrap}
.wm-radio{width:22px;height:22px;border-radius:50%;border:2px solid var(--st-line);display:grid;place-items:center;color:transparent}
.wm-radio svg,.wm-box svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.wm-opt[aria-pressed="true"] .wm-radio{background:var(--st-teal);border-color:var(--st-teal);color:#fff}
.wm-switches{display:grid;border:1px solid var(--st-line);border-radius:16px;background:var(--st-surface);padding:0 14px}
.wm-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:11px 0;border:0;border-top:1px solid var(--st-line);background:none;color:var(--st-ink);text-align:left;cursor:pointer}
.wm-switch:first-child{border-top:0}
.wm-switch span{font-size:15px;white-space:nowrap}
.wm-sw{position:relative;flex:none;width:46px;height:28px;border-radius:99px;background:var(--wm-switch-off);transition:background .2s}
.wm-sw::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s}
.wm-switch[aria-checked="true"] .wm-sw{background:linear-gradient(120deg,var(--st-grad-a),var(--st-grad-b))}
.wm-switch[aria-checked="true"] .wm-sw::after{transform:translateX(18px)}
.wm-foot{display:grid;gap:4px;justify-items:center;margin-top:2px}
.wm-off{border:0;background:none;color:var(--st-amber-ink);font-weight:600;font-size:15px;padding:10px;cursor:pointer}
.wm-link{border:0;background:none;color:var(--st-teal-ink);font-weight:600;font-size:14px;padding:6px;cursor:pointer}
.wm-export{display:inline-flex;align-items:center;gap:7px;white-space:normal;text-align:left}
.wm-export svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.wm .wm-export:disabled{opacity:.6;cursor:default}

/* Manual transfer: finished days with «Перенести» */
.wm-days{list-style:none;margin:10px 0 0;padding:0;display:grid}
.wm-day{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 0;border-top:1px solid var(--st-line)}
.wm-day:first-child{border-top:0}
.wm-day span b{display:block;font-size:15px;white-space:nowrap}
.wm-day span small{display:block;font-size:12.5px;color:var(--st-muted);white-space:nowrap;margin-top:1px}
.wm-day .wm-ok{font-size:13px;font-weight:600;color:var(--st-good);white-space:nowrap}

/* Connect page */
.wm-hero{display:grid;justify-items:start;gap:10px}
.wm-hero h2{margin:4px 0 0;font-size:22px;letter-spacing:-.4px;text-wrap:balance;white-space:normal}
.wm-hero p{margin:0;color:var(--st-muted);font-size:14.5px;white-space:nowrap}
.wm-hero .wm-rows{width:100%}
.wm-consent{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;width:100%;text-align:left;background:var(--st-raised);color:var(--st-ink);border:1.5px solid transparent;border-radius:16px;padding:13px 14px;cursor:pointer;transition:border-color .2s}
.wm-consent[aria-checked="true"]{border-color:var(--st-teal);background:var(--st-accent-soft)}
.wm-box{width:24px;height:24px;border-radius:7px;border:2px solid var(--st-soft);display:grid;place-items:center;color:transparent;background:var(--st-surface)}
.wm-box svg{width:15px;height:15px}
.wm-consent[aria-checked="true"] .wm-box{background:var(--st-teal);border-color:var(--st-teal);color:#fff}
.wm-consent b{display:block;font-size:15px;line-height:1.35;font-weight:600;text-wrap:pretty}
.wm-consent small{display:block;margin-top:4px;color:var(--st-muted);font-size:13px;white-space:nowrap}
.wm .st-primary[disabled]{opacity:.42;cursor:default;transform:none;filter:none}
.wm-notes{display:grid;gap:7px;padding:0 4px}
.wm-notes span{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--st-muted);white-space:nowrap}
.wm-notes svg{width:16px;height:16px;flex:none;fill:none;stroke:var(--st-teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}

/* Главная: the WHOOP line under the tiles */
.wm-strip{display:grid;grid-template-columns:minmax(0,1fr);gap:4px;padding:12px 14px;margin:0 0 10px;cursor:pointer}
.wm-strip>*,.wm-strip .wm-top>*{min-width:0}
.wm-strip .wm-top{display:flex;align-items:center;justify-content:space-between;gap:4px 10px;flex-wrap:wrap}
.wm-strip .wm-top b{font-size:14.5px;white-space:normal;overflow-wrap:anywhere}
.wm-strip .wm-top small{font-size:12px;color:var(--st-muted);white-space:nowrap}
.wm-strip p{margin:0;font-size:14px;color:var(--st-muted);white-space:normal;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.wm-strip p b{color:var(--st-ink);font-weight:700}
.wm-strip .wm-attr{margin-top:4px}

/* «Ваш старт»: the optional WHOOP row is not a counted step */
.st-opt-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;text-align:left;color:var(--st-ink);background:none;border:0;border-top:1px solid var(--st-line);margin-top:6px;padding:12px 0 0;cursor:pointer}
.st-opt-row b{display:block;font-size:15.5px;white-space:nowrap}
.st-opt-row small{display:block;color:var(--st-muted);font-size:13px;margin-top:2px;white-space:nowrap}
.st-opt-row .chev{color:var(--st-soft);font-size:20px;padding:0 4px}

/* Disconnect sheet (the app's own sheet look) */
#whoopSheet h2{margin:0;font-size:24px;letter-spacing:-.5px;text-wrap:balance}
#whoopSheet .st-sheet-body{gap:16px}
.wm-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wm-list li{display:grid;grid-template-columns:18px minmax(0,1fr);gap:10px;align-items:start;font-size:14.5px;line-height:1.4}
.wm-list li span{white-space:nowrap}
.wm-list svg{width:18px;height:18px;fill:none;stroke:var(--st-teal);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.wm-list li.stop svg{stroke:var(--st-amber-ink)}
.wm-fine{margin:0;font-size:13px;color:var(--st-muted);line-height:1.4;white-space:normal;overflow-wrap:anywhere;text-wrap:pretty}
.wm-amber{width:100%;border:1px solid var(--st-amber-line);background:var(--st-amber-bg);color:var(--st-amber-ink);font-weight:700;font-size:16px;padding:14px;border-radius:15px;cursor:pointer}
/* Dark theme: wellness.css paints every button grey with ID-level specificity (v65 lesson); WHOOP's controls keep
   the look of the approved preview, hover and disabled included. */
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet,#startCard) :is(.wm-opt,.wm-opt:hover,.wm-consent,.wm-consent:hover,.wm-switch,.wm-switch:hover,.wm-off,.wm-off:hover,.wm-link,.wm-link:hover,.wm-back,.wm-back:hover,.st-opt-row,.st-opt-row:hover){color:var(--st-ink);border-color:var(--st-line)}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) :is(.wm-opt,.wm-opt:hover){background:var(--st-surface)}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) :is(.wm-opt[aria-pressed="true"],.wm-opt[aria-pressed="true"]:hover){background:linear-gradient(160deg,var(--st-accent-soft),var(--st-surface) 70%);border-color:var(--st-teal)}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet,#startCard) :is(.wm-switch,.wm-switch:hover,.wm-back,.wm-back:hover,.st-opt-row,.st-opt-row:hover){background:none}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) :is(.wm-off,.wm-off:hover){background:none;color:var(--st-amber-ink)}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) :is(.wm-link,.wm-link:hover,.wm-link:disabled,.wm-back,.wm-back:hover){background:none;color:var(--st-teal-ink)}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) :is(.wm-consent,.wm-consent:hover){background:var(--st-raised);border-color:transparent}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) :is(.wm-consent[aria-checked="true"],.wm-consent[aria-checked="true"]:hover){background:var(--st-accent-soft);border-color:var(--st-teal)}
html[data-theme="dark"] #whoopSheet :is(.wm-amber,.wm-amber:hover){background:var(--st-amber-bg);color:var(--st-amber-ink);border-color:var(--st-amber-line)}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) :is(.st-go,.st-go:hover,.st-primary,.st-primary:hover){background:linear-gradient(120deg,var(--st-grad-a),var(--st-grad-b));color:#fff;border-color:transparent}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) :is(.st-go.quiet,.st-go.quiet:hover){background:var(--st-accent-soft);color:var(--st-teal-ink)}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) :is(.st-go,.st-primary):disabled{background:linear-gradient(120deg,var(--st-grad-a),var(--st-grad-b));color:#fff;opacity:.42;cursor:default}
html[data-theme="dark"] :is(#whoopMeView,#whoopMe,#whoopSheet) .st-go.quiet:disabled{background:var(--st-accent-soft);color:var(--st-teal-ink)}

/* Narrow phones (≤320): smaller icons and type so every line stays one line */
@container (max-width:300px){
 .wm-row{grid-template-columns:36px minmax(0,1fr);gap:10px}.wm-row img{width:36px;height:36px}.wm-row b{font-size:15px}.wm-row small{font-size:12px}
 .wm-opt b{font-size:15px}.wm-opt small{font-size:12px}.wm-switch span{font-size:14.5px}
 .wm-status{grid-template-columns:40px minmax(0,1fr);gap:10px}.wm-status .wm-puck.provider-icon{flex-basis:40px;width:40px;height:40px}.wm-status b{font-size:16px}.wm-status small{font-size:12.5px}
 .wm-sync>span{font-size:12.5px}.wm .st-go{padding:7px 10px;font-size:13px}
 .wm-hero p{font-size:13.5px}.wm-consent small{font-size:12.5px}
 .wm-strip p{font-size:13px}.wm-day span b{font-size:14.5px}
}
@container (max-width:300px){.st-opt-row{grid-template-columns:36px minmax(0,1fr) auto;gap:10px}.st-opt-row .wm-puck.provider-icon{flex-basis:36px;width:36px;height:36px}.st-opt-row b{font-size:14.5px}.st-opt-row small{font-size:12.5px}}
@media (max-width:340px){.wm-notes span{font-size:12.5px}}

/* The longer import-settings title stays readable on narrow phones. */
.wm-import-settings>.wm-head{flex-wrap:wrap}
.wm-import-settings>.wm-head h2{min-width:0;white-space:normal;overflow-wrap:anywhere}