/* Markdown-specific editing, preview and history styles. Shared UI: editor-ui.css. */
* { box-sizing: border-box; }
  .shortcut-help{position:relative;z-index:20;}
  .shortcut-help-button{white-space:nowrap;}
  .shortcut-popover{
    position:absolute;right:0;top:calc(100% + 9px);width:min(350px,calc(100vw - 20px));
    padding:15px;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:10px;
    box-shadow:0 14px 36px rgba(0,0,0,.45);color:var(--text);
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-4px);
    transition:opacity .15s ease,transform .15s ease,visibility .15s ease;
  }
  .shortcut-help:hover .shortcut-popover,.shortcut-help:focus-within .shortcut-popover{
    opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  }
  .shortcut-popover::before{
    content:"";position:absolute;right:22px;top:-6px;width:10px;height:10px;
    background:var(--bg-elevated);border-left:1px solid var(--border-strong);border-top:1px solid var(--border-strong);transform:rotate(45deg);
  }
  .shortcut-popover-title{font-size:13px;font-weight:700;margin-bottom:11px;}
  .shortcut-list{display:grid;gap:10px;margin:0;max-height:min(60vh,500px);overflow:auto;overscroll-behavior:contain;}
  .shortcut-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;}
  .shortcut-name{font-size:12.5px;font-weight:600;}
  .shortcut-keys{font:11px var(--mono);color:var(--blue);white-space:nowrap;}
  .shortcut-description{grid-column:1/-1;color:var(--text-dim);font-size:11.5px;line-height:1.4;}

  /* ---------- Workspace ---------- */
  .workspace{
    flex:1 1 auto;
    display:flex;
    min-height:0;
    position:relative;
  }
  .pane{
    display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--bg-panel);
  }
  .pane-editor{flex:0 0 50%;}
  .pane-preview{flex:1 1 auto;}
  .pane-header{
    flex:0 0 auto;height:38px;display:flex;align-items:center;justify-content:space-between;
    padding:0 14px;background:var(--bg-panel-header);border-bottom:1px solid var(--border);
  }
  .pane-title{
    font-size:11.5px;font-weight:700;letter-spacing:.09em;color:var(--text-dim);
  }
  .pane-stats{font-size:11.5px;color:var(--text-mute);font-family:var(--mono);}
  .pane-body{flex:1 1 auto;min-height:0;overflow:hidden;position:relative;}

  /* ---------- Divider ---------- */
  .divider{
    flex:0 0 6px;background:var(--border);cursor:col-resize;position:relative;z-index:5;
  }
  .divider:hover,.divider.dragging{background:var(--blue);}
  .divider-grip{
    position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:3px;height:26px;border-radius:2px;background:var(--text-mute);
    pointer-events:none;
  }

  /* ---------- CodeMirror overrides ---------- */
  .CodeMirror{
    height:100%;background:var(--bg-panel);color:var(--text);
    font-family:var(--mono);font-size:14px;line-height:1.65;padding:14px 16px;
  }
  .CodeMirror-gutters{display:none;}
  .CodeMirror-cursor{border-left:2px solid var(--text);}
  .CodeMirror-selected{background:var(--selection)!important;}
  .CodeMirror-line{padding:0 !important;}
  .cm-md-syntax{color:var(--blue)!important;}
  .CodeMirror-placeholder{color:var(--text-mute)!important;}
  .CodeMirror ::selection{background:var(--selection);}

  .preview-body{height:100%;overflow:auto;padding:26px 30px 60px;}

  /* scrollbars */
  ::-webkit-scrollbar{width:10px;height:10px;}
  ::-webkit-scrollbar-track{background:transparent;}
  ::-webkit-scrollbar-thumb{background:var(--scrollbar);border-radius:6px;}
  ::-webkit-scrollbar-thumb:hover{background:var(--scrollbar-hover);}

  /* ---------- History modal ---------- */
  .modal-overlay{
    position:fixed;inset:0;background:rgba(0,0,0,.55);
    display:none;align-items:center;justify-content:center;z-index:50;
    border:0;padding:0;margin:0;width:100%;height:100%;max-width:none;max-height:none;color:inherit;
  }
  .modal-overlay[open]{display:flex;}
  .modal-overlay::backdrop{background:transparent;}
  .modal-panel{
    width:min(460px,90vw);max-height:72vh;display:flex;flex-direction:column;
    background:var(--bg-panel);border:1px solid var(--border);border-radius:12px;
    overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.45);
  }
  .modal-header{
    flex:0 0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;
    border-bottom:1px solid var(--border);font-size:13.5px;font-weight:700;color:var(--text);
  }
  .modal-close{
    appearance:none;border:none;background:transparent;color:var(--text-dim);
    font-size:20px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:6px;
  }
  .modal-close:hover{color:var(--text);background:var(--hover);}
  .modal-body{flex:1 1 auto;overflow-y:auto;padding:6px;}
  .modal-footer{
    flex:0 0 auto;padding:10px 14px;border-top:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;gap:10px;
  }
  .modal-hint{font-size:11.5px;color:var(--text-mute);}
  .history-empty{padding:26px 10px;text-align:center;color:var(--text-mute);font-size:13px;}
  .history-item{
    padding:10px 12px;border-radius:8px;cursor:pointer;
    display:flex;flex-direction:column;gap:4px;
  }
  .history-item:hover{background:var(--hover);}
  .history-item-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .history-item-time{font-size:11.5px;color:var(--text-mute); flex-shrink:0;}
  .history-item-btns{display:flex;align-items:center;gap:6px;}
  .history-item-save{
    appearance:none;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:600;
    color:var(--text-dim);background:transparent;border:1px solid var(--border);
    border-radius:999px;padding:3px 10px;transition:border-color .15s ease,color .15s ease;
  }
  .history-item-save:hover{border-color:var(--blue);color:var(--text);}
  .history-item-save.saved{border-color:var(--success);color:var(--success);}

  .history-item-delete{
    appearance:none;cursor:pointer;font-family:var(--mono);font-size:11px;font-weight:600;
    color:var(--text-dim);background:transparent;border:1px solid var(--border);
    border-radius:999px;padding:3px 10px;transition:border-color .15s ease,color .15s ease;
  }
  .history-item-delete:hover{border-color:var(--blue);color:var(--text);}
  .history-item-preview{
    border:0;padding:0;background:transparent;text-align:left;cursor:pointer;
    font-size:12.5px;color:var(--text-dim);font-family:var(--mono);
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }

  @media (max-width:760px){
    .toolbar-label{display:none;}
    .toolbar{height:auto;padding:8px 10px;}
    .toolbar-left{flex-wrap:wrap;}
    .pane-editor{flex-basis:50%!important;}
  }
.editor-notice { flex:0 0 auto; padding:5px 14px; color:var(--text-dim); font-size:12px; background:var(--bg-panel); }
.editor-notice.save-failed { color:var(--preview-link,var(--blue)); font-weight:600; }
#mdConflict { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
#mdConflict[hidden],#findPanel[hidden],#mdOutline[hidden] { display:none; }
#findPanel { flex-wrap:wrap; font-size:12px; }
#findPanel input[type="text"] { width:150px; padding:5px 8px; }
#mdOutline { width:210px; flex:0 0 210px; overflow:auto; border-right:1px solid var(--border); background:var(--bg-panel); }
.outline-entry { display:block; width:100%; text-align:left; padding:8px 12px; color:var(--text); border:0; background:transparent; font:12px/1.5 var(--sans); overflow-wrap:anywhere; cursor:pointer; }
.outline-entry:hover { background:var(--blue-soft); }
.md-search-match { background:var(--blue-soft); outline:1px solid var(--blue); }
@media(max-width:760px){#mdOutline { position:absolute; z-index:15; top:0; bottom:0; max-width:70vw; box-shadow:5px 0 15px rgba(0,0,0,.25); }}

/* File flow and editing controls occupy separate rows; each group keeps its label. */
#mdToolbar { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0; }
#mdToolbar .md-toolbar-row { display:flex; align-items:center; flex-wrap:wrap; gap:10px 18px; padding:9px 14px; min-width:0; }
#mdToolbar .md-toolbar-editing { border-top:1px solid var(--border); background:var(--bg-panel-header); }
#mdToolbar .md-tool-group { display:flex; align-items:center; flex-wrap:wrap; gap:6px; min-width:0; padding-left:14px; border-left:1px solid var(--border); }
#mdToolbar .md-toolbar-editing .md-tool-group:first-child { padding-left:0; border-left:0; }
#mdToolbar .toolbar-label { display:inline; margin-right:4px; font-size:11px; font-weight:600; }
#mdToolbar .md-toolbar-utilities { margin-left:auto; border-left:0; padding-left:0; }
#mdToolbar .btn-pill { font-family:var(--sans); }
@media(max-width:760px) {
  #mdToolbar .md-toolbar-row { padding:8px 10px; gap:8px 12px; }
  #mdToolbar .md-tool-group { padding-left:0; border-left:0; }
  #mdToolbar .md-toolbar-files .tool-title { width:100%; }
  #mdToolbar .md-toolbar-utilities { margin-left:0; }
  #mdToolbar :is(.btn-pill,.btn-ghost,.seg-btn) { padding:5px 9px; font-size:12px; }
}

.html-import-dialog { width:min(1120px,94vw); max-height:90dvh; box-sizing:border-box; overflow:auto; padding:22px; color:var(--text); background:var(--bg-panel); border:1px solid var(--border-strong); border-radius:12px; }
.html-import-dialog::backdrop { background:rgba(0,0,0,.65); }
.html-import-dialog h2 { margin:0; font-size:20px; }
.html-import-dialog h3 { font-size:13px; margin:12px 0 8px; }
.html-import-dialog p { color:var(--text-dim); font-size:12px; line-height:1.5; }
.html-import-heading,.html-import-settings,.html-import-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:14px; }
.html-import-settings>div { display:grid; gap:6px; }
.html-import-dialog label,.html-import-settings span { font-size:12px; }
.html-import-dialog textarea { display:block; width:100%; box-sizing:border-box; padding:10px; font:12px/1.6 var(--mono); background:var(--bg-input); color:var(--text); border:1px solid var(--border-strong); border-radius:6px; resize:vertical; margin:6px 0 12px; }
#htmlImportSource { min-height:120px; } #htmlImportOutput { min-height:180px; }
.html-import-previews,.html-import-review { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; }
.html-import-previews iframe { width:100%; height:270px; box-sizing:border-box; border:1px solid var(--border); border-radius:8px; background:white; }
#htmlImportIssues { max-height:200px; overflow:auto; display:grid; gap:6px; }
.html-import-issue { text-align:left; white-space:pre-wrap; padding:9px; border:1px solid var(--border); border-radius:6px; background:var(--bg-input); color:var(--text); font:12px/1.5 var(--sans); cursor:pointer; }
.html-import-issue:hover { border-color:var(--blue); }
#htmlImportSelection { display:flex; flex-wrap:wrap; gap:8px; align-items:center; align-content:start; }
#htmlImportSelection[hidden],#htmlImportPaste[hidden],#htmlImportUpload[hidden] { display:none; }
#htmlImportSelectedLabel,#htmlImportSelection h3 { width:100%; }
#htmlImportMapping,#htmlImportLanguage { background:var(--bg-input); color:var(--text); border:1px solid var(--border-strong); border-radius:5px; padding:6px; max-width:100%; }
#htmlImportStatus { flex:1; font-size:12px; color:var(--text-dim); }
.html-import-footer { position:sticky; bottom:-22px; margin:0 -22px -22px; padding:14px 22px; border-top:1px solid var(--border); background:var(--bg-panel); }
@media(max-width:760px){ .html-import-previews,.html-import-review { grid-template-columns:1fr; } .html-import-dialog { padding:16px; } .html-import-footer { position:static; margin:0; padding:12px 0 0; } }