/*
 * Markdown 編輯器版面與元件樣式 — 馬卡龍藍 × 銀灰白
 * 共用色票與字型來自 theme.css(先載入);本檔僅放本應用專屬版面與元件。
 * 版面:頂列 + 左右雙欄(左=編輯區,右=即時預覽);單位一律 rem / % / vh / fr(無 px)。
 */
* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--font-ui);
    font-size: var(--font-base);
    color: var(--c-text);
    background: var(--c-bg);
}

/* 雙欄分隔:編輯欄寬(由 gutter 拖曳更新)與 gutter 寬;頂列與雙欄共用同一變數,使欄界對齊分隔線 */
:root {
    --mde-edit-w: 50%;
    --mde-gutter-w: 0.4rem;
}

/* ---------------- 頂列(左區:品牌 + code/GUI 切換貼齊分隔線 | 右區:動作;欄界對齊下方雙欄) ---------------- */
.mde-topbar {
    flex: 0 0 auto;
    display: grid;
    /* 欄結構與下方雙欄一致:左區(編輯側)| gutter 空位 | 右區(預覽側)→ 左區右緣恰為分隔線 */
    grid-template-columns: var(--mde-edit-w, 50%) var(--mde-gutter-w) 1fr;
    align-items: center;
    height: var(--size-topbar);
    background: var(--c-surface);
    border-bottom: var(--hair) solid var(--c-line-2);
    box-shadow: var(--shadow-card);
}
/* 左區:品牌靠左、切換靠右(space-between);內距內縮以免貼邊/貼分隔線 */
.mde-topbar-left {
    grid-column: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-width: 0;
    padding: 0 0.7rem 0 1.2rem;
}
.mde-brand {
    min-width: 0;                          /* 允許窄螢幕收縮 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 800;
    font-size: 1.1rem;
    letter-spacing: 0.03em;
    color: var(--c-blue-ink);
}
/* 右區:動作靠右(置於第 3 欄,跳過中間 gutter 空位) */
.mde-actions {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-right: 1.2rem;
}

/* ---------------- 雙欄主體(中間 gutter 可拖曳調整欄寬) ---------------- */
.mde-split {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: var(--mde-edit-w, 50%) var(--mde-gutter-w) 1fr;
    grid-template-rows: minmax(0, 1fr);   /* 鎖定列高 = 容器高,讓兩欄各自內部捲動而非整體溢出 */
}
.mde-pane {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
/* 分隔線 = 可拖曳手把(取代原 border-right);::before 擴大命中範圍便於抓取 */
.mde-gutter {
    grid-column: 2;
    position: relative;
    background: var(--c-line-2);
    cursor: col-resize;
    touch-action: none;                    /* 觸控拖曳不誤觸捲動 */
}
.mde-gutter::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -0.3rem;
    right: -0.3rem;
}
.mde-gutter:hover,
.mde-gutter.is-dragging { background: var(--c-blue); }
.mde-gutter:focus-visible {
    outline: 0.15rem solid var(--c-blue);
    outline-offset: 0.1rem;
}

.mde-pane-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--size-editbar);           /* 與左欄工具列同高 → 兩欄內文頂端齊平 */
    box-sizing: border-box;
    padding: 0 1rem;
    background: var(--c-bg-soft);
    border-bottom: var(--hair) solid var(--c-line);
}
.mde-pane-title {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    color: var(--c-text-3);
}

/* 左欄:Toast UI Editor 宿主(填滿欄高,內部自捲動) */
.mde-editor { flex: 1 1 auto; min-height: 0; background: var(--c-surface); }
/* 讓編輯器外框與欄面齊平(欄已自帶邊框);移除 lib 內建預覽分頁(預覽改由右欄獨立負責) */
.mde-editor .toastui-editor-defaultUI { border: none; height: 100%; }
.toastui-editor-md-tab-container { display: none !important; }
/* lib 工具列即為編輯欄的「標頭」:高度 / 底線 / 底色與右欄標頭一致(以 rem 表述,隨字級同步縮放) */
.mde-editor .toastui-editor-toolbar { height: var(--size-editbar); }
.mde-editor .toastui-editor-defaultUI-toolbar {
    height: 100%;
    box-sizing: border-box;
    background: var(--c-bg-soft);
    border-bottom: var(--hair) solid var(--c-line);
    border-radius: 0;
}

.mde-editor-missing {
    margin: 1rem;
    padding: 2rem;
    color: var(--c-warn);
    background: var(--c-warn-bg);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius);
    line-height: 1.9;
}

/* 右欄:即時預覽(自捲動;捲動與左欄同步) */
.mde-preview {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.8rem 2rem 4rem;
    background: var(--c-bg);
    line-height: 1.75;
}

/* ---------------- code / GUI 切換(分段式控制) ---------------- */
.mde-edit-modes {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0.15rem;
    background: var(--c-surface);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-pill);
}
.mde-edit-mode-btn {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--c-text-3);
    padding: 0.25rem 0.85rem;
    border-radius: var(--radius-pill);
    transition: background 0.15s, color 0.15s;
}
.mde-edit-mode-btn:hover { color: var(--c-blue-strong); }
.mde-edit-mode-btn.is-active {
    background: var(--c-blue-soft);
    color: var(--c-blue-strong);
    box-shadow: var(--shadow-card);
}

/* ---------------- 按鈕 ---------------- */
.mde-btn-primary {
    padding: 0.45rem 1.1rem;
    background: var(--c-blue);
    color: #fff;
    border: none;
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}
.mde-btn-primary:hover { background: var(--c-blue-strong); }

.mde-btn-ghost {
    display: inline-flex;                  /* 兼容 <a> 充當按鈕:置中對齊、去底線 */
    align-items: center;
    padding: 0.45rem 1.1rem;
    background: var(--c-surface);
    color: var(--c-text-2);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-pill);
    font-size: 0.9rem;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.mde-btn-ghost:hover { border-color: var(--c-blue); color: var(--c-blue-strong); background: var(--c-blue-soft); }

/* ---------------- 動作群組(滑入 / 聚焦才展開子項;以容器劃定範圍,純 CSS 揭露) ---------------- */
.mde-menu { position: relative; }
.mde-menu-trigger::after {   /* 小箭頭提示可展開 */
    content: "▾";
    margin-left: 0.4rem;
    font-size: 0.75em;
    color: var(--c-text-3);
}
.mde-menu-panel {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 100%;
    margin-top: 0.4rem;
    padding: 0.3rem;
    background: var(--c-surface);
    border: var(--hair) solid var(--c-line-2);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.25rem);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
}
.mde-menu-panel::before {   /* 透明橋接:覆蓋觸發鈕與面板間的空隙,避免滑過空隙時收合 */
    content: "";
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 0.5rem;
}
.mde-menu:hover > .mde-menu-panel,
.mde-menu:focus-within > .mde-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.15s ease, transform 0.15s ease;
}
.mde-menu-item {
    display: block;
    width: 100%;
    padding: 0.4rem 0.85rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 0.85rem;
    color: var(--c-text-2);
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.mde-menu-item:hover { background: var(--c-blue-soft); color: var(--c-blue-strong); }
.mde-menu-item:focus-visible {
    outline: 0.15rem solid var(--c-blue);
    outline-offset: -0.15rem;
}

/* ---------------- 鍵盤可及性 / 選取 / 捲軸(質感細節) ---------------- */
.mde-btn-primary:focus-visible,
.mde-btn-ghost:focus-visible,
.mde-edit-mode-btn:focus-visible {
    outline: 0.15rem solid var(--c-blue);
    outline-offset: 0.12rem;
}
::selection { background: var(--c-blue-soft-2); color: var(--c-blue-ink); }

.mde-preview { scrollbar-width: thin; scrollbar-color: var(--c-line-2) transparent; }
.mde-preview::-webkit-scrollbar { width: 0.6rem; height: 0.6rem; }
.mde-preview::-webkit-scrollbar-track { background: transparent; }
.mde-preview::-webkit-scrollbar-thumb { background: var(--c-line-2); border-radius: var(--radius-pill); }
.mde-preview::-webkit-scrollbar-thumb:hover { background: var(--c-text-3); }

/* ---------------- 預覽內文排版(渲染後的 Markdown) ---------------- */
.mde-preview > :first-child { margin-top: 0; }
.mde-preview h1 {
    margin: 0 0 0.8rem;
    padding-bottom: 0.4rem;
    font-family: var(--font-serif);
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.4;
    border-bottom: 0.12rem solid var(--c-line-2);
    color: var(--c-text);
}
.mde-preview h2 {
    margin: 2rem 0 0.7rem;
    padding-bottom: 0.3rem;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    border-bottom: var(--hair) solid var(--c-line);
    color: var(--c-blue-ink);
}
.mde-preview h3 {
    margin: 1.5rem 0 0.5rem;
    font-family: var(--font-serif);
    font-size: 1.16rem;
    color: var(--c-text);
}
.mde-preview h4 { margin: 1.2rem 0 0.4rem; font-size: 1.02rem; }
.mde-preview h5 { margin: 1.1rem 0 0.35rem; font-size: 0.95rem; font-weight: 700; }
.mde-preview h6 { margin: 1rem 0 0.3rem; font-size: 0.85rem; font-weight: 700; }
.mde-preview p { margin: 0.85rem 0; }
.mde-preview ul, .mde-preview ol { margin: 0.85rem 0; padding-left: 1.8rem; }
.mde-preview li { margin: 0.3rem 0; }
.mde-preview a { color: var(--c-blue-strong); }

.mde-preview img {
    max-width: 100%;
    max-height: 60vh;
    border-radius: var(--radius);
    border: var(--hair) solid var(--c-line-2);
    background: var(--c-surface);
}

.mde-preview pre {
    margin: 1.1rem 0;
    background: var(--c-code-bg);
    padding: 0.95rem 1.15rem;
    border-radius: var(--radius);
    overflow-x: auto;
    line-height: 1.6;
}
/* 區塊內程式碼文字:明確帶字型 / 字級 / 顏色(不再依賴會誤中 pre code 的 .mde-preview code 萬用選擇器) */
.mde-preview pre code {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--c-code-fg);
    background: none;
    padding: 0;
}
/* 行內程式碼:排除 pre 內(與主題 schema 的選擇器一致) */
.mde-preview :not(pre) > code {
    font-family: var(--font-mono);
    font-size: 0.88em;
    background: var(--c-surface-2);
    color: var(--c-blue-ink);
    padding: 0.1em 0.4em;
    border-radius: 0.25rem;
}

.mde-preview table { border-collapse: collapse; width: 100%; margin: 1.1rem 0; background: var(--c-surface); }
.mde-preview th, .mde-preview td {
    border: var(--hair) solid var(--c-line);
    padding: 0.55rem 0.75rem;
    text-align: left;
    vertical-align: top;
}
.mde-preview th { background: var(--c-surface-2); font-weight: 700; white-space: nowrap; }
.mde-preview tr:nth-child(even) td { background: var(--c-bg-soft); }

.mde-preview blockquote {
    margin: 0.85rem 0;                     /* 外距對齊段落(.mde-preview p) */
    padding: 0 1.1rem;                     /* 僅留左右內距(縮排);去除上下內距 → 與一般內文等高 */
    border-left: 0.25rem solid var(--c-blue);
    background: var(--c-blue-soft);
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--c-text-2);
}
.mde-preview blockquote p { margin: 0; }
.mde-preview hr { border: none; border-top: var(--hair) dashed var(--c-line-2); margin: 2rem 0; }

/* ---------------- 窄螢幕:頂列換行(切換移至第二列)、左右改為上下堆疊 ---------------- */
@media (max-width: 48em) {
    /* 窄螢幕:無垂直分隔線,頂列改為換行 flex(左區一列、動作一列);拖曳停用 */
    .mde-topbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        height: auto;
        gap: 0.55rem 1rem;
        padding: 0.6rem 1rem;
    }
    .mde-topbar-left { flex: 1 1 100%; padding: 0; }
    .mde-actions { flex: 1 1 100%; justify-content: flex-end; padding: 0; }

    .mde-split { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
    .mde-gutter { display: none; }
    .mde-pane-editor { border-bottom: var(--hair) solid var(--c-line-2); }
}

@media (prefers-reduced-motion: reduce) {
    .mde-btn-primary, .mde-btn-ghost, .mde-edit-mode-btn { transition: none; }
}