/* Блок «Make it yours» новых страниц виджетов (21.10.2026, спецификация v2 plans/2026-10-21-widgets-v2-spec.md §9):
   прогресс-бар (Goals · One bar · Year), обратный отсчёт, часы. Вид — как у трекера привычек (assets/css/nwp-habit.css,
   вариант 1 прототипа /design-system/habit-widget/): те же правила с приставкой nwm-, файл трекера не меняется — когда трекер
   перейдёт на общий блок, его стили можно будет убрать. Подключается через pageCss2, логика — assets/js/nwp-make.js. */
.nwm-page{--col:1080px}
.nwm-page .tp-head{padding-bottom:34px}
.nwm [hidden]{display:none!important}

/* плитка: шапка, настройки, пример, полоса действия — области сетки */
.nwm-tile{display:grid;gap:20px 26px;padding:26px;align-items:start;grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto 1fr auto;grid-template-areas:"hd pv" "cfg pv" "act act"}
.nwm-hd{grid-area:hd}.nwm-cfg{grid-area:cfg}.nwm-pv{grid-area:pv}.nwm-act{grid-area:act}
.nwm-hd h2{margin:0}
.nwm-sub{margin:6px 0 0;color:var(--mute);font-size:15px;line-height:1.5}
.nwm-cfg{min-width:0;display:flex;flex-direction:column;gap:16px}

/* поля: подпись всегда сверху, одной высоты — колонки выровнены */
.nwm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.nwm-f{display:flex;flex-direction:column;gap:7px;min-width:0}
.nwm-f.wide{grid-column:1/-1}
.nwm-l{font-size:13px;line-height:18px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nwm-l em{font-style:normal;color:var(--mute2);margin-left:6px;font-size:12px}
.nwm-in{width:100%;min-width:0;height:40px;padding:0 12px;border:0;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);font:400 15px var(--font);color-scheme:dark;box-sizing:border-box}
.nwm-in::placeholder{color:var(--mute2)}
.nwm-in:focus,.nwm-sel select:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(167,139,250,.6)}
.nwm-sel{position:relative;display:block;min-width:0}
.nwm-sel select{-webkit-appearance:none;appearance:none;width:100%;height:40px;padding:0 34px 0 12px;border:0;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);font:400 15px var(--font);color-scheme:dark;cursor:pointer}
.nwm-chev{width:12px;height:12px;flex:none;color:var(--mute)}
.nwm-sel .nwm-chev{position:absolute;right:12px;top:50%;margin-top:-6px;pointer-events:none}
.nwm-two{display:grid;grid-template-columns:minmax(0,1fr) 116px;gap:8px}
/* переключатель из 2–3 вариантов */
.nwm-seg{display:flex;gap:2px;height:40px;padding:3px;border-radius:10px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--line2);min-width:0;box-sizing:border-box}
.nwm-seg button{flex:1 1 0;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;border:0;border-radius:7px;background:none;color:var(--mute);font:500 13.5px var(--font);white-space:nowrap;cursor:pointer;transition:background .15s,color .15s}
.nwm-seg button:hover{color:var(--ink)}
.nwm-seg button[aria-pressed="true"]{color:#fff;background:rgba(139,92,246,.24);box-shadow:inset 0 0 0 1px rgba(167,139,250,.5)}
.nwm-seg svg{width:14px;height:14px;flex:none}
.nwm-seg.only button{padding:0}
/* в узкой колонке значки у «Weeks / Month / Year» не помещаются — только текст */
.nwm-grid .nwm-f:not(.wide) .nwm-seg.ic:not(.only) svg{display:none}
/* выбор нескольких: цифры в подвале виджета */
.nwm-pills{display:flex;flex-wrap:wrap;gap:6px}
.nwm-pills button{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px 0 10px;border:0;border-radius:999px;background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--line2);color:var(--mute);font:500 13px var(--font);cursor:pointer}
.nwm-pills button::before{content:"";width:13px;height:13px;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--mute2);flex:none}
.nwm-pills button[aria-pressed="true"]{color:var(--ink);background:rgba(139,92,246,.14);box-shadow:inset 0 0 0 1px rgba(167,139,250,.45)}
.nwm-pills button[aria-pressed="true"]::before{box-shadow:none;background:var(--v) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
/* привычки — плашками в поле */
.nwm-hab{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-height:40px;padding:5px 6px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line2);cursor:text;box-sizing:border-box}
.nwm-hab:focus-within{box-shadow:inset 0 0 0 1px rgba(167,139,250,.6)}
.nwm-hc{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 3px 0 10px;border-radius:7px;background:rgba(255,255,255,.075);color:var(--ink);font-size:14px;max-width:100%;box-sizing:border-box}
.nwm-hc>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nwm-hc-dot{flex:none;width:12px;height:12px;margin-left:-3px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.14)}
.nwm-hc-x{flex:none;width:22px;height:22px;padding:0;border:0;border-radius:5px;background:none;color:var(--mute);font-size:15px;line-height:1;cursor:pointer}
.nwm-hc-x:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.nwm-hab-in{flex:1;min-width:96px;height:28px;padding:0 4px;border:0;background:none;color:var(--ink);font:400 14.5px var(--font);outline:none}
.nwm-hab-in::placeholder{color:var(--mute2)}
/* цвет */
.nwm-colw{display:flex;align-items:center;flex-wrap:wrap;gap:10px 18px;min-height:40px}
.nwm-acc{display:flex;gap:7px;flex-wrap:wrap}
.nwm-acc button{width:24px;height:24px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:inset 0 0 0 2px rgba(0,0,0,.15);transition:opacity .15s}
.nwm-acc button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--p1),0 0 0 4px var(--v2)}
.nwm-acc.off button{opacity:.3}.nwm-acc.off button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px rgba(0,0,0,.15)}
.nwm-tg{display:inline-flex;align-items:center;gap:8px;padding:0;border:0;background:none;color:var(--ink2);font:400 13.5px var(--font);white-space:nowrap;cursor:pointer}
.nwm-tg i{position:relative;flex:none;width:30px;height:18px;border-radius:99px;background:rgba(255,255,255,.14);transition:background .2s}
.nwm-tg i::after{content:"";position:absolute;left:2px;top:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:left .2s}
.nwm-tg[aria-checked="true"] i{background:var(--v)}.nwm-tg[aria-checked="true"] i::after{left:14px}
/* цель */
.nwm-goal{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.nwm-goal .nwm-seg{flex:1 1 190px;min-width:180px;max-width:280px}
.nwm-stp{display:inline-flex;align-items:center;gap:6px;height:40px;color:var(--mute);font-size:13.5px;white-space:nowrap}
.nwm-stp button{width:32px;height:32px;padding:0;border:0;border-radius:8px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink);font-size:16px;cursor:pointer}
.nwm-stp button:hover{background:rgba(255,255,255,.1)}
.nwm-stp b{min-width:22px;text-align:center;color:var(--ink);font:600 15px var(--mono)}
/* «More options» */
.nwm-more{border-top:1px solid var(--line)}
.nwm-more summary{display:flex;align-items:center;gap:10px;padding:14px 0 2px;list-style:none;cursor:pointer}
.nwm-more summary::-webkit-details-marker{display:none}
.nwm-more-t{font-weight:600;font-size:14.5px;color:var(--ink);white-space:nowrap}
.nwm-more-s{flex:1;min-width:0;font-size:13px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nwm-more[open] .nwm-chev{transform:rotate(180deg)}
.nwm-more>.nwm-grid{margin-top:14px}

/* пример: страница Notion на высоту настроек; заметки под виджетом занимают только свободное место (height:0 +
   flex-grow), высоту блока не задают — под примером нет пустоты (замечание Макса) */
.nwm-pv{min-width:0;display:flex;flex-direction:column;align-self:stretch}
.nwm-pv>.nwp-demo{flex:1;display:flex;flex-direction:column;margin:0}
.nwm-np-page{flex:1;display:flex;flex-direction:column;gap:14px;min-height:0}
.nwm-np-t{display:flex;align-items:center;gap:10px;padding-top:2px;font:700 26px/1.2 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;letter-spacing:-.01em;color:#37352F}
.nwm-np-ic{font-size:24px}
.nwp-demo[data-theme="dark"] .nwm-np-t{color:rgba(255,255,255,.81)}
.nwm-np-embed{margin:0 -8px;padding:2px 8px;border-radius:6px;transition:box-shadow .15s}
.nwm-np-embed:hover{box-shadow:0 0 0 1px rgba(55,53,47,.09)}
.nwp-demo[data-theme="dark"] .nwm-np-embed:hover{box-shadow:0 0 0 1px rgba(255,255,255,.09)}
.nwm-frame{display:block;width:100%;height:232px;border:0;background:transparent;color-scheme:light}
.nwm-np-more{position:relative;flex:1 1 auto;height:0;min-height:0;overflow:hidden;font:15px/1.5 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;color:#37352F}
.nwm-np-more::after{content:"";position:absolute;left:0;right:0;bottom:0;height:36px;background:linear-gradient(rgba(255,255,255,0),#fff)}
.nwp-demo[data-theme="dark"] .nwm-np-more{color:rgba(255,255,255,.81)}
.nwp-demo[data-theme="dark"] .nwm-np-more::after{background:linear-gradient(rgba(25,25,25,0),#191919)}
.nwm-np-more p{display:flex;align-items:center;gap:9px;margin:0;padding:3px 2px}
.nwm-np-more p.nwm-np-h{margin-top:4px;font-weight:600;font-size:19px}
.nwm-np-more p.nwm-np-tx{display:block}
.nwm-np-more i{flex:none;width:16px;height:16px;border-radius:3px;box-shadow:inset 0 0 0 1.5px #9B9A97}
.nwm-np-more i.on{box-shadow:none;background:#2383E2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.nwm-np-more p:has(i.on){color:#9B9A97;text-decoration:line-through}

/* полоса действия: ссылка и кнопки в одной строке, подпись под ними. Поле ссылки — блок .code с pre.nwp-url: по нему
   site.js размывает ссылку у гостя и после входа берёт ключ по сессии сервера; свою плашку входа site.js ставит
   после поля — здесь она не нужна (своя кнопка справа) */
.nwm-act{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 12px;min-width:0;margin:4px -26px -26px;padding:18px 26px 20px;border-top:1px solid var(--line);border-radius:0 0 var(--r3) var(--r3);background:rgba(255,255,255,.018);scroll-margin:120px}
.nwm-act>.wg-gate{display:none}
.nwm-urlw.code{position:relative;display:flex;align-items:center;gap:12px;height:46px;margin:0;padding:0 14px;border-radius:var(--r2);min-width:0}
.nwm-url-l{flex:none;font:500 12px var(--mono);color:var(--mute)}
.nwm-urlw .nwm-url{flex:1;min-width:0;margin:0;padding:0;background:none;font:400 13px/46px var(--mono);color:#E4DFF2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nwm-lock{position:absolute;right:7px;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 11px;border-radius:8px;font:500 12px var(--mono);color:var(--ink2);background:rgba(23,20,31,.94);box-shadow:inset 0 0 0 1px var(--line2);white-space:nowrap}
.nwm-btns{display:flex;gap:10px;min-width:0}
.signed-in .nwm-btns button.nwp-s{display:inline-flex!important}
.nwm-note{grid-column:1/-1;margin:0;font:400 12.5px/1.5 var(--mono);color:var(--mute)}
.nwm-act .nwp-back{grid-column:1/-1;margin:0}

/* телефон и планшет: шапка блока → пример → настройки → ссылка */
@media (max-width:900px){
  .nwm-tile{padding:18px;gap:16px;grid-template-columns:minmax(0,1fr);grid-template-rows:none;grid-template-areas:"hd" "pv" "cfg" "act"}
  .nwm-act{margin:4px -18px -18px;padding:16px 18px 18px}
  .nwm-np-more{display:none}
}
@media (max-width:560px){
  .nwm-grid{grid-template-columns:minmax(0,1fr)}
  .nwm-act{grid-template-columns:minmax(0,1fr)}
  .nwm-btns{flex-wrap:wrap}.nwm-btns .btn{flex:1 1 auto}
  .nwm-np-t{font-size:20px}.nwm-np-ic{font-size:19px}
  .nwm-np-page.nwp-demo-page{padding:12px 8px 12px}
  .nwm-lock{font-size:11.5px;padding:0 9px}
  .nwm-goal .nwm-seg{flex-basis:100%;max-width:none}
  .nwm-page .tp-head{padding-bottom:24px}
}

/* ── дополнения общего блока (не было у трекера) ── */
/* переключатель вида в шапке плитки: Goals · One bar · Year */
.nwm-modes{margin-top:14px;max-width:360px}
.nwm-anchor{position:absolute;top:-120px}
.nwm-tile{position:relative}
/* цвет «по умолчанию» — круг с чертой */
.nwm-acc button.def{background:linear-gradient(135deg,transparent 46%,var(--mute) 46%,var(--mute) 54%,transparent 54%),rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px var(--line2)}
.nwm-acc button.def[aria-pressed="true"]{box-shadow:inset 0 0 0 1.5px var(--line2),0 0 0 2px var(--p1),0 0 0 4px var(--v2)}
/* подсказка под полем */
.nwm-hint{margin:0;font-size:12.5px;line-height:1.45;color:var(--mute2)}
/* цели строками: имя, сделано, всего, удалить (и точка цвета при «своём цвете») */
.nwm-gl{display:flex;flex-direction:column;gap:8px}
.nwm-gr{display:grid;grid-template-columns:minmax(0,1fr) 78px 78px 34px;gap:6px;align-items:center}
.nwm-gr.pc{grid-template-columns:20px minmax(0,1fr) 78px 78px 34px}
.nwm-gr .nwm-in{height:38px;padding:0 10px;font-size:14.5px}
.nwm-gr .nwm-in[type="number"]{font-variant-numeric:tabular-nums}
.nwm-gdot{width:14px;height:14px;padding:0;border:0;border-radius:50%;background:var(--c);cursor:pointer;box-shadow:0 0 0 2px rgba(255,255,255,.14);justify-self:center}
.nwm-gx{width:34px;height:34px;padding:0;border:0;border-radius:8px;background:none;color:var(--mute);font-size:17px;line-height:1;cursor:pointer}
.nwm-gx:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.nwm-gx:disabled{opacity:.3;cursor:default;background:none}
.nwm-gh{display:grid;grid-template-columns:minmax(0,1fr) 78px 78px 34px;gap:6px;font-size:12px;color:var(--mute2)}
.nwm-gh.pc{grid-template-columns:20px minmax(0,1fr) 78px 78px 34px}
.nwm-add{align-self:flex-start;height:32px;padding:0 12px;border:0;border-radius:8px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink2);font:500 13px var(--font);cursor:pointer}
.nwm-add:hover{color:var(--ink);background:rgba(255,255,255,.09)}
.nwm-add:disabled{opacity:.4;cursor:default}
/* два поля в строку (значение и цель, дата и время) */
.nwm-row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.nwm-in[type="date"],.nwm-in[type="time"]{font-variant-numeric:tabular-nums}
.nwm-in::-webkit-calendar-picker-indicator{filter:invert(.8);opacity:.7;cursor:pointer}
/* готовые наборы отсчёта */
.nwm-pre{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.nwm-pre-l{font-size:13px;color:var(--mute);margin-right:2px}
.nwm-pre button{height:30px;padding:0 12px;border:0;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink2);font:500 13px var(--font);cursor:pointer;white-space:nowrap}
.nwm-pre button:hover{color:var(--ink);background:rgba(139,92,246,.14);box-shadow:inset 0 0 0 1px rgba(167,139,250,.45)}
/* ещё пояса у часов: плашки и выбор */
.nwm-zs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.nwm-zs:empty{display:none}
/* выпадающий список с длинными названиями поясов */
.nwm-sel select option,.nwm-sel select optgroup{background:#17141F;color:var(--ink)}
/* подсказка «Saved widgets …» под ссылкой на всю ширину */
.nwm-note b{font-weight:500;color:var(--ink2)}
@media (max-width:560px){
  .nwm-gr,.nwm-gh{grid-template-columns:minmax(0,1fr) 62px 62px 30px}
  .nwm-gr.pc,.nwm-gh.pc{grid-template-columns:18px minmax(0,1fr) 62px 62px 30px}
  .nwm-gx{width:30px}
  .nwm-modes{max-width:none}
}
/* страница часов: три идеи в ряд */
.nwm-ideas{grid-template-columns:repeat(3,minmax(0,1fr))}
.nwm-ideas h3{margin-top:0}
@media (max-width:860px){.nwm-ideas{grid-template-columns:1fr}}
/* числа целей без стрелок (в узкой колонке они закрывали «1500») */
.nwm-in[type="number"]{-moz-appearance:textfield;appearance:textfield}
.nwm-in[type="number"]::-webkit-inner-spin-button,.nwm-in[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* вид (Goals / One bar / Year …) — колонкой с тем же шагом, что у трекера (.nwm-cfg) */
.nwm-pane{display:flex;flex-direction:column;gap:16px;min-width:0}
.nwm-pre{padding-top:2px}
/* тема — во всю строку, но не шире трёх кнопок («Like Notion» в половине колонки не помещался) */
.nwm-th .nwm-seg{max-width:380px}
/* ── календарь (23.10.2026, /notion-widgets/calendar/): свои даты строками — дата, подпись, «каждый год», удалить;
   на телефоне подпись — второй строкой во всю ширину ── */
.nwm-dl{display:flex;flex-direction:column;gap:8px}
.nwm-dl:empty{display:none}
.nwm-dr{display:grid;grid-template-columns:150px minmax(0,1fr) auto 34px;gap:6px;align-items:center}
.nwm-dr .nwm-in{height:38px;padding:0 10px;font-size:14.5px}
.nwm-drep{height:34px;padding:0 10px;border:0;border-radius:8px;background:none;box-shadow:inset 0 0 0 1px var(--line2);color:var(--mute);font:500 12.5px var(--font);white-space:nowrap;cursor:pointer}
.nwm-drep:hover{color:var(--ink)}
.nwm-drep[aria-pressed="true"]{color:var(--ink);background:rgba(139,92,246,.18);box-shadow:inset 0 0 0 1px rgba(167,139,250,.5)}
@media (max-width:560px){
  .nwm-dr{grid-template-columns:minmax(0,1fr) auto 30px;row-gap:6px}
  .nwm-dr .nwm-in[type="text"]{grid-column:1/-1;grid-row:2}
  .nwm-dl .nwm-dr+.nwm-dr{padding-top:8px;border-top:1px solid var(--line)}
}