/* «Документи»: панелі кроків — макет сторінки SpilNote (меню «/», двоє пишуть, коментар, оформлення, «Повернути») */
.mpg{display:grid;gap:9px;padding:18px 22px}
.mpg .ttl{font:800 22px/1.15 var(--f-disp);letter-spacing:-.03em;margin-bottom:4px}
.mpg .ln{margin:0;font-size:14.5px;color:var(--ink2);min-height:1.5em;position:relative}
.mtop{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--ink3)}
.mtop .who{margin-left:auto;display:flex;gap:4px}
.sdot{width:9px;height:9px;border-radius:50%;background:var(--ink3);transition:background .4s}
.sdot.ok{background:var(--c-dg)}

/* 1: меню «/» */
.bmw{position:absolute;inset:44px 14px 14px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:14px}
.bm{display:grid;gap:10px;align-content:start;padding:12px;border-radius:12px;background:var(--menu);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:12.5px}
.bmtop{display:flex;gap:6px}
.bmtop i{flex:1;font-style:normal;padding:7px 8px;border-radius:8px;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--ink);text-align:center;font-weight:600}
.bmcols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 10px}
.bmg{display:grid;gap:2px;align-content:start}
.bmg b{font:500 11px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3);padding:6px 6px 3px}
.bm i{font-style:normal;padding:5px 6px;border-radius:6px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .25s,color .25s}
.bm i.hl{background:color-mix(in srgb,var(--c) 22%,transparent);color:var(--ink)}
.bmw .mpg{border-radius:12px;border:1px solid var(--line);background:var(--card-in);align-content:start;overflow:hidden}
.blkrow{display:flex;gap:8px;align-items:center;padding:7px 9px;border-radius:8px;background:var(--card);border:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.blkrow b{width:16px;height:16px;border-radius:4px;background:color-mix(in srgb,var(--c) 40%,transparent);flex:none}

/* 2: двоє пишуть */
.p-two .cursor{opacity:0}
/* 3: коментар */
.sel{background:color-mix(in srgb,var(--c-ai) 26%,transparent);border-radius:3px;transition:background .3s}
.cbub{position:absolute;right:16px;top:150px;width:min(260px,60%);opacity:0}
.cbub p{margin:6px 0 0;font-size:13.5px;color:var(--ink)}
.bellx{position:absolute;right:20px;top:12px;width:30px;height:30px;color:var(--ink2)}
.bellx svg{width:100%;height:100%}
.bellx b{position:absolute;right:-6px;top:-6px;min-width:18px;height:18px;border-radius:5px;background:var(--c-site);color:var(--ev-ink);font-size:11px;display:grid;place-items:center;transform:scale(0)}
.tgn{position:absolute;left:16px;right:16px;bottom:16px;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--menu);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:13px;opacity:0}
.tgn .tic{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:color-mix(in srgb,var(--c-db) 20%,transparent);color:var(--c-db);font:700 11px var(--f-mono)}
.tgn small{display:block;color:var(--ink3);font-size:12px}

/* 4: оформлення */
.dsg{position:absolute;inset:44px 14px 14px;display:grid;grid-template-rows:auto 1fr;gap:12px}
.dsg .cov{display:block;width:100%;height:130px;border-radius:12px}
.dsg .cname{position:absolute;left:12px;top:100px;padding:2px 8px;border-radius:6px;background:var(--glass);font-size:11.5px;color:var(--ink)}
.dsgb{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;min-height:0}
.dsgb>*{min-width:0}
.icg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;min-width:0;padding:10px;border-radius:12px;border:1px solid var(--line);background:var(--card-in);align-content:start}
.icg span{aspect-ratio:1;padding:6px;border-radius:7px;color:var(--ink2);transition:background .3s,color .3s}
.icg span.on{background:var(--c);color:var(--ev-ink)}
.icg svg{width:100%;height:100%}
.thm{display:grid;gap:8px;align-content:start}
.thm div{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:10px;border:1px solid var(--line);font-size:13px;color:var(--ink2);transition:border-color .3s,background .3s}
.thm div.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,transparent);color:var(--ink)}
.thm i{width:26px;height:18px;border-radius:5px;border:1px solid var(--line2)}

/* 5: «Повернути» */
.undo-t{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:14px;align-items:center;padding:10px 14px;border-radius:10px;background:var(--menu);border:1px solid var(--line2);box-shadow:var(--shadow);font-size:13.5px;white-space:nowrap;opacity:0}
.undo-t b{color:var(--c);cursor:default}
.vers{display:flex;gap:6px;align-items:center;padding:0 22px 14px;font:500 11px var(--f-mono);color:var(--ink3)}
.vers i{width:10px;height:10px;border-radius:3px;border:1.5px solid var(--ink3)}
.vers i.on{background:var(--c);border-color:var(--c)}
@media (max-width:640px),(pointer:coarse) and (max-width:1100px){.bmw{grid-template-columns:1fr;inset:40px 8px 8px}.bmcols{grid-template-columns:repeat(3,minmax(0,1fr))}.bm{padding:8px;gap:6px;font-size:11.5px}.bm i{padding:3px 5px}.bmg b{padding:4px 5px 2px;font-size:10px}.bmw .mpg{padding:12px 14px;min-height:120px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px} /* меню нижче — під ним видно сторінку; новий блок завжди внизу на виду */.dsgb{grid-template-columns:1fr}.thm{display:none}}