/* Виджеты IVGraph для встраивания в Notion (блок /embed). Вид — как у самого Notion: его шрифт, цвета, тени.
   Тема: ?theme=light|dark, иначе — как в системе (Notion по умолчанию тоже следует системе). Фон прозрачный,
   чтобы виджет сливался со страницей; ?bg=1 — свой фон (для страниц, где Notion подкладывает серую рамку). */
:root{
  --nw-font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI Variable Display","Segoe UI",Helvetica,"Apple Color Emoji",Arial,sans-serif;
  --nw-bg:#fff;--nw-ink:#37352F;--nw-ink2:#787774;--nw-ink3:#9B9A97;--nw-line:rgba(55,53,47,.09);--nw-hover:rgba(55,53,47,.06);
  --nw-pop:#fff;--nw-shadow:rgba(15,15,15,.05) 0 0 0 1px,rgba(15,15,15,.1) 0 3px 6px,rgba(15,15,15,.2) 0 9px 24px;
  --nw-gray:#787774;--nw-brown:#9F6B53;--nw-orange:#D9730D;--nw-yellow:#CB912F;--nw-green:#448361;--nw-blue:#337EA9;
  --nw-purple:#9065B0;--nw-pink:#C14C8A;--nw-red:#D44C47;
  --nw-blue-bg:#E7F3F8;--nw-green-bg:#EDF3EC;--nw-gray-bg:#F1F1EF;--nw-orange-bg:#FBECDD;--nw-purple-bg:#F6F3F9;
  --nw-h0:rgba(55,53,47,.06);--nw-h1:#D3E8D6;--nw-h2:#A5D0AE;--nw-h3:#6BAF80;--nw-h4:#448361;
  --nw-bar:rgba(55,53,47,.09);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --nw-bg:#191919;--nw-ink:rgba(255,255,255,.81);--nw-ink2:rgba(255,255,255,.46);--nw-ink3:rgba(255,255,255,.28);
  --nw-line:rgba(255,255,255,.094);--nw-hover:rgba(255,255,255,.055);--nw-pop:#252525;
  --nw-shadow:rgba(15,15,15,.1) 0 0 0 1px,rgba(15,15,15,.2) 0 3px 6px,rgba(15,15,15,.4) 0 9px 24px;
  --nw-gray:#9B9B9B;--nw-brown:#BA856F;--nw-orange:#C77D48;--nw-yellow:#CA9849;--nw-green:#529E72;--nw-blue:#379AD3;
  --nw-purple:#9D68D3;--nw-pink:#D15796;--nw-red:#DF5452;
  --nw-blue-bg:#143A4E;--nw-green-bg:#242B26;--nw-gray-bg:#2F2F2F;--nw-orange-bg:#36291F;--nw-purple-bg:#2A2430;
  --nw-h0:rgba(255,255,255,.06);--nw-h1:#22382A;--nw-h2:#2D5A3D;--nw-h3:#3F8257;--nw-h4:#5DB37D;
  --nw-bar:rgba(255,255,255,.09);color-scheme:dark;
}}
:root[data-theme="dark"]{
  --nw-bg:#191919;--nw-ink:rgba(255,255,255,.81);--nw-ink2:rgba(255,255,255,.46);--nw-ink3:rgba(255,255,255,.28);
  --nw-line:rgba(255,255,255,.094);--nw-hover:rgba(255,255,255,.055);--nw-pop:#252525;
  --nw-shadow:rgba(15,15,15,.1) 0 0 0 1px,rgba(15,15,15,.2) 0 3px 6px,rgba(15,15,15,.4) 0 9px 24px;
  --nw-gray:#9B9B9B;--nw-brown:#BA856F;--nw-orange:#C77D48;--nw-yellow:#CA9849;--nw-green:#529E72;--nw-blue:#379AD3;
  --nw-purple:#9D68D3;--nw-pink:#D15796;--nw-red:#DF5452;
  --nw-blue-bg:#143A4E;--nw-green-bg:#242B26;--nw-gray-bg:#2F2F2F;--nw-orange-bg:#36291F;--nw-purple-bg:#2A2430;
  --nw-h0:rgba(255,255,255,.06);--nw-h1:#22382A;--nw-h2:#2D5A3D;--nw-h3:#3F8257;--nw-h4:#5DB37D;
  --nw-bar:rgba(255,255,255,.09);color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:transparent}
body.nw{font:14px/1.5 var(--nw-font);color:var(--nw-ink);-webkit-font-smoothing:antialiased;overflow:hidden}
body.nw.nw-bg{background:var(--nw-bg)}
.nw-w{display:flex;flex-direction:column;height:100%;padding:12px 14px 10px;gap:10px;min-width:0}
.nw-hd{display:flex;align-items:baseline;gap:10px;min-width:0}
.nw-t{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-sub{color:var(--nw-ink2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-sp{flex:1}
.nw-ft{display:flex;align-items:center;gap:12px;color:var(--nw-ink2);font-size:12px;min-width:0}
.nw-lg{display:flex;gap:12px;flex-wrap:wrap;min-width:0}
.nw-lg i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.nw-badge{color:var(--nw-ink3);text-decoration:none;white-space:nowrap;border-radius:4px;padding:1px 4px;margin-right:-4px}
.nw-badge:hover{background:var(--nw-hover);color:var(--nw-ink2)}
.nw-tip{position:fixed;z-index:9;pointer-events:none;background:var(--nw-pop);box-shadow:var(--nw-shadow);border-radius:6px;
  padding:6px 9px;font-size:12.5px;line-height:1.4;max-width:240px;opacity:0;transition:opacity .08s}
.nw-tip.on{opacity:1}
.nw-tip b{font-weight:600}
.nw-tip span{color:var(--nw-ink2)}
.nw-chips{display:flex;gap:6px;flex-wrap:wrap}
.nw-chip{font:inherit;font-size:12.5px;border:0;border-radius:4px;padding:1px 7px;cursor:pointer;color:var(--nw-ink2);background:transparent}
.nw-chip:hover{background:var(--nw-hover)}
.nw-chip[aria-pressed="true"]{background:var(--nw-green-bg);color:var(--nw-green)}
/* граф */
.nw-cv{flex:1;min-height:0;position:relative;border-radius:4px}
.nw-cv canvas{position:absolute;inset:0;width:100%;height:100%;cursor:grab;touch-action:none}
.nw-cv canvas.drag{cursor:grabbing}
/* тепловая карта */
.nw-hm{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.nw-hm svg{width:100%;height:auto;display:block;overflow:visible}
.nw-hm text{fill:var(--nw-ink3);font:10.5px var(--nw-font)}
.nw-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:var(--nw-ink2)}
.nw-stats b{color:var(--nw-ink);font-weight:600;font-size:14px;margin-right:4px}
/* прогресс */
.nw-pg{flex:1;min-height:0;display:flex;gap:14px}
.nw-goals{flex:1;min-width:0;display:flex;flex-direction:column}
/* полоски всех целей начинаются с одной вертикали: у полоски, «сделано/всего» и процента — свои колонки постоянной ширины */
.nw-row{display:grid;grid-template-columns:22px minmax(0,1fr) minmax(80px,24%) 64px 36px;align-items:center;gap:10px;padding:6px 4px;border-radius:4px;border-bottom:1px solid var(--nw-line)}
.nw-row:last-child{border-bottom:0}
.nw-row:hover{background:var(--nw-hover)}
.nw-row .e{font-size:15px;text-align:center}
.nw-row .n{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nw-row .c,.nw-row .pc{color:var(--nw-ink2);font-size:12px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.nw-row .pc{color:var(--nw-ink3)}
.nw-row .e.dot::before{content:"";display:block;width:6px;height:6px;margin:auto;border-radius:50%;background:var(--acc,var(--nw-blue))}
.nw-bar{height:6px;border-radius:3px;background:var(--nw-bar);overflow:hidden}
.nw-bar i{display:block;height:100%;border-radius:3px;background:var(--nw-blue)}
.nw-bar i.done{background:var(--nw-green)}
.nw-cd{width:180px;flex:none;border-radius:6px;background:var(--nw-gray-bg);padding:12px 14px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.nw-cd .k{font-size:12px;color:var(--nw-ink2)}
.nw-cd .big{font-size:34px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.nw-cd .u{font-size:12.5px;color:var(--nw-ink2);font-variant-numeric:tabular-nums}
/* узкий виджет (Notion на телефоне, колонка в две части): отсчёт — строкой над списком, без лишних подписей; ничего
   не налезает на подвал, лишнее прячется, а не перекрывается */
.nw-w{overflow:hidden}
.nw-pg,.nw-goals{overflow:hidden}
.nw-goals{position:relative}
@media (max-width:520px){
  .nw-w{padding:10px 10px 8px}
  .nw-hd .nw-sub{display:none}
  .nw-pg{flex-direction:column;gap:8px}
  .nw-cd{order:-1;width:auto;flex:none;flex-direction:row;align-items:baseline;justify-content:flex-start;gap:8px;padding:7px 10px;border-radius:5px}
  .nw-cd .k{font-size:12.5px}
  .nw-cd .big{font-size:18px;letter-spacing:0}
  .nw-cd .u{display:none}
  .nw-row{grid-template-columns:22px minmax(0,1fr) 64px 60px;padding:5px 2px;gap:6px}
  .nw-row .c{font-size:11.5px}
  .nw-row .pc{display:none}
  .nw-ft .nw-note{display:none}
  .nw-stats{gap:12px}
  .nw-stats span:nth-child(n+3){display:none}
}
/* цвет виджета из палитры Notion (?accent=…): столбики прогресса и клетки тепловой карты; уровни — смесь цвета с фоном */
:root[data-accent]{--nw-h1:color-mix(in srgb,var(--acc) 26%,transparent);--nw-h2:color-mix(in srgb,var(--acc) 48%,transparent);--nw-h3:color-mix(in srgb,var(--acc) 74%,transparent);--nw-h4:var(--acc)}
:root[data-accent="gray"]{--acc:var(--nw-gray)}:root[data-accent="brown"]{--acc:var(--nw-brown)}:root[data-accent="orange"]{--acc:var(--nw-orange)}
:root[data-accent="yellow"]{--acc:var(--nw-yellow)}:root[data-accent="green"]{--acc:var(--nw-green)}:root[data-accent="blue"]{--acc:var(--nw-blue)}
:root[data-accent="purple"]{--acc:var(--nw-purple)}:root[data-accent="pink"]{--acc:var(--nw-pink)}:root[data-accent="red"]{--acc:var(--nw-red)}
:root[data-accent] .nw-bar i{background:var(--acc)}
:root[data-accent] .nw-chip[aria-pressed="true"]{background:color-mix(in srgb,var(--acc) 16%,transparent);color:var(--acc)}
/* обратный отсчёт: крупные числа в клетках, как блоки Notion */
.nw-cdw{justify-content:space-between}
.nw-cells{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:10px}
.nw-cell{flex:1;max-width:120px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 6px 10px;border-radius:6px;background:var(--nw-gray-bg)}
.nw-cell.wide{max-width:260px}
.nw-cell b{font-size:34px;line-height:1.05;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--acc,var(--nw-ink))}
.nw-cell span{font-size:12px;color:var(--nw-ink2)}
@media (max-width:420px){.nw-cell b{font-size:24px}.nw-cells{gap:6px}.nw-hd #cdate{display:none}}