/* edit-kit · правка страницы прямо в браузере.
   Приклеивается к любому статическому сайту двумя строками:
     <link rel="stylesheet" href="edit-kit.css">
     <script src="edit-kit.js" defer></script>
   Ничего не знает про конкретную страницу: разделы находит сам по main > section[id]. */

.ek-bar,.ek-tools{position:fixed;right:16px;z-index:1200;display:flex;gap:8px;align-items:center;
  background:#fff;border:1px solid #111;padding:8px 10px;font:11px/1.4 'JetBrains Mono',ui-monospace,monospace;color:#111}
.ek-bar{bottom:16px}
.ek-tools{bottom:62px;display:none;flex-wrap:wrap;max-width:min(620px,calc(100vw - 32px));font-size:10px}
body.editing .ek-tools{display:flex}
.ek-bar button,.ek-tools button{font:inherit;border:1px solid #d9d9d9;background:#fff;color:#111;padding:6px 11px;cursor:pointer;letter-spacing:.03em}
.ek-bar button:hover,.ek-tools button:hover{border-color:#111}
.ek-bar button.primary{background:#111;color:#fff;border-color:#111}
.ek-tools button[aria-pressed=true]{background:#111;color:#fff;border-color:#111}
.ek-tools .pub{border-color:#d92027;color:#d92027}
.ek-tools .pub:hover{background:#d92027;color:#fff}
.ek-sep{width:1px;height:18px;background:#e6e6e6}
.ek-status{color:#8f8d87;max-width:230px}
.ek-status.is-error{color:#c02020}
.ek-hint{color:#a8a6a0;flex:1 1 140px;min-width:100px}

/* вход снизу страницы */
.ek-entry{display:block;text-align:center;font:10px/1.6 'JetBrains Mono',ui-monospace,monospace;color:#a8a6a0;
  border-top:1px solid #ececec;padding:26px 0 30px;letter-spacing:.05em;cursor:pointer}
.ek-entry b{font-weight:400;color:#66655f;border-bottom:1px dashed #d9d9d9}
.ek-entry:hover b{color:#d92027;border-color:#d92027}
body.editing .ek-entry{color:#d92027}

/* разделы: плавающее окно поверх страницы, разметку не двигает */
.ek-map-open{position:fixed;right:16px;top:50%;transform:translateY(-50%);z-index:1190;writing-mode:vertical-rl;
  background:#fff;border:1px solid #d9d9d9;padding:12px 7px;font:9px/1 'JetBrains Mono',ui-monospace,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:#66655f;cursor:pointer;transition:color .2s,border-color .2s}
.ek-map-open:hover{color:#111;border-color:#111}
nav.ek-map{display:block}
.ek-map{position:fixed;right:16px;top:50%;transform:translateY(-50%) translateX(12px);z-index:1195;width:216px;
  background:rgba(255,255,255,.97);border:1px solid #111;backdrop-filter:blur(8px);
  font:11px/1.4 'JetBrains Mono',ui-monospace,monospace;opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease}
.ek-map.is-open{opacity:1;transform:translateY(-50%) translateX(0);pointer-events:auto}
.ek-map-head{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:8px 10px;border-bottom:1px solid #ececec}
.ek-map-title{font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:#66655f}
.ek-map-close{border:0;background:none;font-size:14px;color:#a8a6a0;cursor:pointer;line-height:1}
.ek-map,.ek-map *{box-sizing:border-box}
.ek-map-list{list-style:none;margin:0;padding:4px 0 6px;width:100%;max-height:min(60vh,520px);overflow-y:auto;overflow-x:hidden}
.ek-map-item{display:grid;grid-template-columns:1fr;min-width:0;width:100%}
.ek-map-link{display:grid;grid-template-columns:20px minmax(0,1fr);gap:6px;align-items:center;width:100%;padding:7px 10px;color:#66655f;text-decoration:none}
.ek-map-link:hover,.ek-map-item.is-current .ek-map-link{color:#111;background:#f5f5f5}
.ek-map-index{font-size:8px;color:#bbb9b3}
.ek-map-label{font-size:9.5px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ek-map-handle{display:none;align-items:center;justify-content:center;width:18px;border:0;background:none;color:#bbb9b3;cursor:grab;font-size:11px;touch-action:none}
body.editing .ek-map-item{grid-template-columns:18px minmax(0,1fr)}
body.editing .ek-map-handle{display:flex}
body.editing .ek-map-item.is-dragging{opacity:.4}
body.editing .ek-map-item.is-drop-before,body.editing .ek-map-item.is-drop-after{background:#f2fbe0}

/* правка текста */
body.editing [data-editable]{outline:1px dashed #b5b5b5;outline-offset:3px;cursor:text;pointer-events:auto!important;white-space:pre-wrap;min-width:.5em;min-height:1em}
body.editing [data-editable]:hover,body.editing [data-editable]:focus{outline-color:#111;background:#fffdf0}
body.editing summary[data-editable]{display:block;position:relative;padding-right:24px}

/* оверлеи инструмента */
html.ek-outlines main>section{outline:1px dashed #cfcfcf;outline-offset:6px;position:relative}
html.ek-outlines main>section::before{content:attr(id);position:absolute;top:-22px;left:0;font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#d92027;background:#fff;padding:0 5px}
html.ek-sizes [data-ek-size]{position:relative}
html.ek-sizes [data-ek-size]::after{content:attr(data-ek-size);position:absolute;right:0;top:0;font:8px/1 'JetBrains Mono',monospace;
  color:#d92027;background:#fff;border:1px solid #f1d5d6;padding:2px 4px;z-index:5}

/* окна: пароль и заливка */
.ek-sheet{position:fixed;right:16px;bottom:16px;width:min(420px,calc(100vw - 32px));max-height:74vh;overflow:auto;z-index:1300;
  background:#fff;border:1px solid #111;padding:18px 20px 20px;font:11px/1.75 'JetBrains Mono',ui-monospace,monospace;
  box-shadow:0 12px 44px rgba(0,0,0,.1)}
.ek-sheet[hidden]{display:none}
.ek-sheet h4{margin:0 0 10px;font-size:12px;font-weight:400;letter-spacing:-.02em}
.ek-sheet p{margin:0;color:#66655f}
.ek-sheet .x{position:absolute;right:12px;top:9px;font-size:16px;color:#a8a6a0;border:0;background:none;cursor:pointer}
.ek-sheet label{display:block;font-size:9px;color:#66655f;margin:14px 0 5px;letter-spacing:.06em}
.ek-sheet input{width:100%;font:inherit;border:1px solid #d9d9d9;padding:8px}
.ek-sheet .row{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.ek-sheet .go{border:1px solid #111;background:#111;color:#fff;padding:8px 14px;font:inherit;cursor:pointer}
.ek-sheet .ghost{border:1px solid #d9d9d9;background:#fff;padding:8px 12px;font:inherit;cursor:pointer}
.ek-sheet pre{white-space:pre-wrap;font-size:9.5px;color:#66655f;background:#fafafa;border:1px solid #f0f0f0;padding:8px;margin-top:12px;max-height:190px;overflow:auto}

/* инструмент прячется везде, кроме локального хоста и ?edit=1 */
html.ek-off .ek-bar,html.ek-off .ek-tools,html.ek-off .ek-entry,html.ek-off .ek-map,html.ek-off .ek-map-open{display:none!important}

@media(max-width:859px){
  .ek-map-open{top:auto;bottom:70px;transform:none;writing-mode:horizontal-tb;letter-spacing:.1em;padding:7px 10px}
  .ek-map{top:auto;bottom:112px;left:16px;right:16px;width:auto;transform:translateY(8px)}
  .ek-map.is-open{transform:translateY(0)}
  .ek-bar{left:12px;right:12px;bottom:12px;flex-wrap:wrap}
  .ek-tools{left:12px;right:12px;bottom:66px}
  .ek-status,.ek-hint{max-width:none;flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.ek-map{transition:none}}