/* Инструмент «Obsidian graph online» (/tools/obsidian-graph/, 28.10.2026) — поверх tools.css (pageCss2).
   Блок инструмента шире колонки текста: граф нужен крупным. Токены — ds.css (дизайн-система «Командный центр»). */
.tp>section.og-app{max-width:1180px;margin-top:6px}
.og-app{position:relative}
/* после загрузки граф прокручивается в окно целиком — не под шапку сайта */
.og-view{scroll-margin-top:80px}
.og-app code,.og-keys code{font:500 .86em var(--mono);padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.07);color:#E9E3FF}

/* выбор папки */
.og-start{padding:14px}
.og-drop{display:flex;flex-direction:column;align-items:center;gap:12px;padding:46px 22px 38px;border-radius:14px;text-align:center;
  background:radial-gradient(60% 90% at 50% 0%,rgba(124,58,237,.16),transparent 70%);box-shadow:inset 0 0 0 1.5px rgba(167,139,250,.28);transition:box-shadow .2s,background .2s}
.og-drag .og-drop{box-shadow:inset 0 0 0 2px var(--v2),0 0 0 6px rgba(139,92,246,.14);background:radial-gradient(70% 100% at 50% 0%,rgba(124,58,237,.3),transparent 75%)}
.og-dic{width:60px;height:60px;display:flex;align-items:center;justify-content:center;border-radius:16px;color:var(--v3);
  background:linear-gradient(180deg,rgba(139,92,246,.24),rgba(34,211,238,.08));box-shadow:inset 0 0 0 1px rgba(167,139,250,.38)}
.og-dic svg{width:30px;height:30px}
.og-drop h2{margin:6px 0 0;font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.03em}
.og-drop>p{margin:0;max-width:520px;color:var(--mute);font-size:15.5px}
.og-btns{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:10px}
.og-btns .ic{width:18px;height:18px}
.og-alt{font-size:14px!important}.og-alt .btn-t{font-size:14px;height:auto;padding:0;vertical-align:baseline}
.og-priv{display:flex;align-items:flex-start;justify-content:center;gap:9px;margin:14px 8px 4px;font-size:13.5px;line-height:1.5;color:var(--mute)}
.og-priv svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--ok)}

/* чтение */
.og-busy{padding:34px 28px 36px}
.og-busy-l{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0 0 12px;font-weight:600}
.og-bar{height:6px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.og-bar i{display:block;height:100%;width:3%;border-radius:inherit;background:var(--grad);transition:width .25s ease}

.og-error{margin:0 0 12px;padding:12px 16px;border-radius:12px;font-size:14.5px;line-height:1.5;color:#FECACA;background:rgba(248,113,113,.08);box-shadow:inset 0 0 0 1px rgba(248,113,113,.32)}

/* панель над графом */
.og-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px}
.og-search{position:relative;flex:1 1 280px;max-width:440px}
.og-search .field{height:40px}
.og-search input::-webkit-search-cancel-button{filter:invert(.6)}
.og-results{position:absolute;z-index:6;top:46px;left:0;right:0;max-height:330px;overflow:auto;padding:6px;border-radius:12px;background:var(--p2);box-shadow:0 0 0 1px var(--line2),0 24px 50px -20px #000}
.og-seg{display:inline-flex;padding:3px;border-radius:999px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line)}
.og-seg button{height:32px;min-width:44px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--mute);font:600 13px var(--font);cursor:pointer}
.og-seg button:hover{color:var(--ink)}
.og-seg button.on{color:#fff;background:rgba(139,92,246,.24);box-shadow:inset 0 0 0 1px rgba(167,139,250,.5)}
.og-ib{width:38px;padding:0;justify-content:center}.og-ib svg,.og-open svg{width:17px;height:17px}
.og-open{margin-left:auto}
.og-demo-tag{display:none}.og-demo .og-demo-tag{display:inline-flex}
.og-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.og-filters .chip{height:30px;padding:0 12px;font-size:13px}
.og-filters .chip em{font:500 11px var(--mono);font-style:normal;color:var(--mute)}
.og-filters .chip:disabled{opacity:.4;cursor:default}

/* граф и панель заметки */
.og-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:12px}
.og-stage{position:relative;height:clamp(460px,72vh,760px);border-radius:var(--r3);overflow:hidden;
  background:radial-gradient(70% 80% at 50% 45%,rgba(124,58,237,.12),transparent 72%),#09080F;box-shadow:inset 0 0 0 1px var(--line)}
.og-canvas{position:absolute;inset:0}
.og-canvas canvas{display:block}
.og-labels{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.og-l{position:absolute;left:0;top:0;padding:0 5px;border-radius:5px;white-space:nowrap;font:500 12px/17px var(--font);color:#D9D4EA;
  text-shadow:0 0 3px #09080F,0 0 3px #09080F,0 0 7px #09080F;will-change:transform}
.og-l-hub{color:#F4F2FA;font-weight:600}
.og-l-tag{color:#A7F3D0}
.og-l-miss{color:#8E8AA0;font-style:italic}
.og-l-sel{z-index:2;color:#fff;font-weight:700;background:rgba(124,58,237,.7);text-shadow:none}
.og-l-hov{z-index:3;color:#fff;background:rgba(23,20,31,.92);box-shadow:0 0 0 1px var(--line2);text-shadow:none}
.og-tip{position:absolute;left:0;top:0;z-index:5;max-width:280px;padding:8px 11px;border-radius:10px;pointer-events:none;font-size:13px;line-height:1.4;
  background:rgba(17,15,25,.95);box-shadow:0 0 0 1px var(--line2),0 14px 30px -14px #000}
.og-tip b{display:block;color:#fff;font-weight:600;word-break:break-word}.og-tip span{color:var(--mute);font-size:12px}
.og-dropover{position:absolute;inset:10px;z-index:7;display:none;align-items:center;justify-content:center;border-radius:14px;
  background:rgba(9,8,15,.78);box-shadow:inset 0 0 0 2px var(--v2);font-weight:600;color:var(--ink)}
.og-drag .og-dropover{display:flex}

.og-info{height:clamp(460px,72vh,760px);overflow:auto;padding:16px 14px 18px;border-radius:var(--r3);background:linear-gradient(180deg,var(--p2),var(--p1));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px var(--line);overscroll-behavior:contain}
.og-ihead{display:flex;align-items:center;justify-content:space-between;gap:10px}
.og-kind{display:inline-flex;padding:3px 9px;border-radius:7px;font:500 11px var(--mono);background:rgba(139,92,246,.14);color:#D9CFFF}
.og-kind-1{background:rgba(52,211,153,.12);color:#A7F3D0}.og-kind-2{background:rgba(184,169,143,.14);color:#E7DCC6}.og-kind-3{background:rgba(255,255,255,.06);color:var(--mute)}
.og-x{width:30px;height:30px;border:0;border-radius:8px;background:rgba(255,255,255,.05);color:var(--mute);font-size:20px;line-height:1;cursor:pointer}
.og-x:hover{color:var(--ink);background:rgba(255,255,255,.09)}
.og-title{margin:10px 0 2px;font-size:20px;line-height:1.25;letter-spacing:-.02em;word-break:break-word}
.og-path{margin:0;font:400 12px var(--mono);color:var(--mute);word-break:break-all}
.og-acts{margin:12px 0 2px}.og-acts .chip{height:30px;font-size:13px}
.og-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
.og-tag{padding:3px 9px;border:0;border-radius:7px;font:500 12px var(--mono);background:rgba(52,211,153,.12);color:#A7F3D0;cursor:pointer}
.og-tag:hover{background:rgba(52,211,153,.2)}
.og-sec{margin-top:16px}
.og-sec h3{display:flex;justify-content:space-between;gap:8px;margin:0 0 6px;font:500 11.5px var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--v2)}
.og-sec h3 em{font-style:normal;color:var(--mute)}
.og-item{display:flex;align-items:baseline;gap:8px;width:100%;padding:6px 8px;border:0;border-radius:8px;background:none;color:var(--ink2);font:400 14px/1.35 var(--font);text-align:left;cursor:pointer}
.og-item:hover,.og-item.on{background:rgba(255,255,255,.06);color:#fff}
.og-item i{flex:none;width:8px;height:8px;border-radius:50%;transform:translateY(-1px)}
.og-item-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.og-item-d{flex:none;max-width:42%;margin-left:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 11px var(--mono);color:var(--mute2)}
.og-none{margin:4px 8px;font-size:13px;color:var(--mute2)}
.og-note{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--mute)}
.og-kick{margin:0;font:500 12px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--v2)}
.og-hint{margin:8px 0 0;font-size:13.5px;line-height:1.5;color:var(--mute)}
.og-lrow{display:flex;align-items:center;gap:8px;margin:5px 2px;font-size:13.5px;color:var(--ink2)}
.og-lrow i{flex:none;width:9px;height:9px;border-radius:50%}
.og-lrow span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.og-lrow em{margin-left:auto;font:400 11px var(--mono);font-style:normal;color:var(--mute)}

/* числа хранилища и мост к Notion */
.og-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:12px}
.og-stats{display:flex;flex-wrap:wrap;gap:6px 18px}
.og-stat{display:inline-flex;align-items:baseline;gap:6px;font-size:13px;color:var(--mute)}
.og-stat b{font:600 15px var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
.og-warn{font-size:12.5px;color:var(--am)}
.og-bridge{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0;font-size:14px;color:var(--mute)}
.og-bridge .ic{width:16px;height:16px}

/* кнопка «Feedback» (feedback-widget.njk, справа внизу поверх страницы): после загрузки хранилища граф прокручивается в окно
   целиком, и строка под ним (числа и «Open your Notion as a graph») встаёт к нижнему краю экрана — на 1440×900 кнопка с
   подписью закрывала конец «Open your Notion as a graph» (28.10.2026). Как на статьях (article.css): на компьютере до 1479px —
   круглый значок без подписи; где поле справа уже значка (до 1304px), у строки отступ справа под него */
@media (min-width:961px) and (max-width:1479px){
  .fbw-btn{width:42px;padding:0;justify-content:center}.fbw-lbl{display:none}
  .og-foot{padding-right:clamp(0px,calc(62px - (100vw - 1180px) / 2),38px)}
}

/* нижняя карточка сайта на телефоне («Map my Notion», sticky-cta.njk) — спрятана, пока граф на экране (класс og-stage-on
   ставит obsidian-graph-tool.js): она закрывала низ графа и заголовок панели заметки после нажатия на точку; под графом своя
   кнопка Notion, ниже графа карточка снова появляется (ревью 28.10.2026) */
@media (max-width:760px){
  body.og-stage-on .scta.on{transform:translateY(140%);visibility:hidden}
  body.og-stage-on.scta-on .fbw{bottom:calc(20px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:640px){body.og-stage-on.scta-on .fbw{bottom:calc(12px + env(safe-area-inset-bottom,0px))}}

/* весь экран */
.og-view:fullscreen{display:flex;flex-direction:column;padding:14px;background:var(--bg);overflow:hidden}
.og-view:fullscreen .og-main{flex:1;min-height:0}
.og-view:fullscreen .og-stage,.og-view:fullscreen .og-info{height:auto}
.og-view:-webkit-full-screen{display:flex;flex-direction:column;width:100%;height:100%;padding:14px;background:var(--bg)}
.og-view:-webkit-full-screen .og-main{flex:1;min-height:0}
.og-view:-webkit-full-screen .og-stage,.og-view:-webkit-full-screen .og-info{height:auto}

/* что показывает граф — легенда в тексте */
.og-keys{list-style:none;margin:16px 0 18px;padding:0;display:grid;gap:10px}
.og-keys li{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.6;color:var(--ink2)}
.og-keys li>i{flex:none;width:12px;height:12px;margin-top:7px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.og-keys li>i.og-key-line{width:16px;height:2px;margin-top:12px;border-radius:2px;background:rgba(199,184,255,.7);box-shadow:none}
.og-keys li>i.og-key-ring{background:none;box-shadow:inset 0 0 0 1.5px #D7D2E8}
.og-keys strong{color:var(--ink);font-weight:600}

@media (max-width:960px){
  .og-main{grid-template-columns:minmax(0,1fr)}
  .og-stage{height:clamp(380px,64vh,620px)}
  .og-info{height:auto;max-height:none;overflow:visible}
  .og-open{margin-left:0}
}
@media (max-width:600px){
  .og-start{padding:8px}
  .og-drop{padding:34px 14px 28px}
  .og-drop h2{font-size:21px}
  .og-btns .btn{width:100%}
  .og-search{flex-basis:100%;max-width:none}
  .og-tools .og-open{flex:1 1 auto;justify-content:center}
  .og-bridge{width:100%}
  /* длинные подписи кнопок в переводах («Ouvrez votre espace de travail Notion sous forme de graphe») — в две строки, а не за
     край экрана: у .btn подпись в одну строку и высота задана (ревью 28.10.2026; страж — tests/obsidian-graph.mjs, 8 языков) */
  .og-bridge .btn,.og-page .tp-cta .btn{height:auto;min-height:38px;max-width:100%;padding-top:9px;padding-bottom:9px;white-space:normal;line-height:1.25;text-align:center;text-wrap:balance}
  .og-page .tp-cta .btn{min-height:46px;padding-top:11px;padding-bottom:11px}   /* как .nwp-early-f .btn в tools.css */
  /* сравнение «граф Obsidian или эта страница» — все три колонки на экране телефона: колонка «This page» (ради неё таблица)
     уходила за край, и её было видно только прокруткой вбок (ревью 28.10.2026). Колонки фиксированной ширины — CJK-строки не
     сжимаются до 1–2 знаков (правило .tbl в ds.css); длинные немецкие слова переносятся с дефисом */
  .og-page .tbl{table-layout:fixed;font-size:13.5px}
  .og-page .tbl :is(td,th){min-width:0;padding:10px 8px;hyphens:auto;overflow-wrap:break-word}
  .og-page .tbl :is(td,th):first-child{width:27%}
  .og-page .tbl th{letter-spacing:0;white-space:normal}
}
@media (prefers-reduced-motion:reduce){.og-bar i{transition:none}}