/*
 * edit.css — 編輯器版面
 *
 * 左邊解說、右邊程式，右邊再上下分成「寫程式」和「看結果」。
 * 之所以把執行畫面放在程式正下方，是因為學生改一行就要馬上看到差別，
 * 視線移動越短，因果關係越清楚。
 */

:root {
   /* 顏色都通過 WCAG AA（對比 >= 4.5:1）。
    * 原本的 --字更淡 #5a6070 在最亮的背景上只有 2.4:1，
    * 行號、摘要那些其實是內容的文字看不清楚，所以整組往上調。 */
   --底: #12131a;
   --面: #1a1c26;
   --面亮: #22252f;
   --線: #2f3444;
   --字: #e2e5ec;      /* 對比 12.9 : 1 */
   --字淡: #a8b0c4;    /* 對比  7.3 : 1 */
   --字更淡: #868ea3;  /* 對比  4.7 : 1 */
   --主色: #ffb454;
   --綠: #7ddc7d;
   --紅: #ff6b6b;
   --藍: #6bb8ff;
   --紫: #c39aff;
   --圓角: 8px;
   --字體: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans", sans-serif;
   --等寬: "JetBrains Mono", "Cascadia Code", Consolas, "Noto Sans Mono CJK TC", monospace;
}

* { box-sizing: border-box; }

html, body {
   margin: 0; padding: 0;
   height: 100%; overflow: hidden;
   background: var(--底); color: var(--字);
   font-family: var(--字體);
   font-size: 14px;
   -webkit-font-smoothing: antialiased;
   color-scheme: dark;
}

/* 鍵盤使用者要看得到自己在哪裡。
 * 用 :focus-visible 而不是 :focus，滑鼠點一下才不會也跳出框。 */
:focus-visible {
   outline: 3px solid var(--主色);
   outline-offset: 2px;
   border-radius: 4px;
}

/* 只給螢幕閱讀器聽的文字：看不到，但讀得到，也還在無障礙樹上 */
.僅螢幕閱讀器 {
   position: absolute !important;
   width: 1px; height: 1px;
   margin: -1px; padding: 0;
   overflow: hidden;
   clip: rect(0 0 0 0);
   clip-path: inset(50%);
   white-space: nowrap;
   border: 0;
}

/* 尊重「減少動態效果」的系統設定 */
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
   }
}

/* 高對比模式：把邊界畫清楚 */
@media (prefers-contrast: more) {
   :root { --線: #5a6480; --字淡: #c3cadb; --字更淡: #a8b0c4; }
}

/* ─────────────────────────────────────────────────────────
   最外層：上工具列 + 下主體
   ───────────────────────────────────────────────────────── */
#外框 { display: flex; flex-direction: column; height: 100%; }

#工具列 {
   display: flex; align-items: center; gap: .5rem;
   padding: .45rem .75rem;
   background: var(--面); border-bottom: 1px solid var(--線);
   flex: 0 0 auto;
}
#標題 {
   font-weight: 700; font-size: .95rem; letter-spacing: .02em;
   color: var(--主色); margin-right: .5rem; white-space: nowrap;
   text-decoration: none;
}
#標題:hover { text-decoration: underline; }
#標題 small { color: var(--字淡); font-weight: 400; margin-left: .35rem; }

/* 下拉選單前面的小標，讓它有可見的標籤而不是只靠 title */
#工具列 .欄 {
   font-size: .78rem; color: var(--字淡);
   margin-left: .3rem; white-space: nowrap;
}

.鈕 {
   display: inline-flex; align-items: center; gap: .3rem;
   /* 工具列很擠，但點擊區至少要有 32px 高，觸控才按得準 */
   min-height: 2rem;
   padding: .34rem .7rem;
   background: var(--面亮); color: var(--字);
   border: 1px solid var(--線); border-radius: var(--圓角);
   font-family: inherit; font-size: .85rem; cursor: pointer;
   white-space: nowrap; transition: background .12s, border-color .12s;
}
.鈕:hover { background: #2b2f3c; border-color: #3a4055; }
.鈕:active { transform: translateY(1px); }
.鈕.主要 { background: var(--主色); color: #1a1206; border-color: var(--主色); font-weight: 600; }
.鈕.主要:hover { background: #ffc373; }
.鈕.危險:hover { border-color: var(--紅); color: var(--紅); }
.鈕[disabled] { opacity: .5; cursor: not-allowed; }
/* 切換類的按鈕：開啟時要看得出來，不能只靠 aria-pressed */
.鈕[aria-pressed="true"] {
   color: var(--主色); border-color: var(--主色); background: #2b2416;
}

#工具列 .撐開 { flex: 1; }

select.鈕 { appearance: none; padding-right: 1.6rem;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238a92a6'/></svg>");
   background-repeat: no-repeat; background-position: right .5rem center; }

/* ─────────────────────────────────────────────────────────
   主體：左解說 / 分隔 / 右程式
   ───────────────────────────────────────────────────────── */
#主體 { flex: 1; display: flex; min-height: 0; }

#左欄 {
   width: 380px; min-width: 240px; max-width: 45vw;
   display: flex; flex-direction: column;
   background: var(--面); border-right: 1px solid var(--線);
   flex: 0 0 auto; min-height: 0;
}

#右欄 { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }

/* 分隔線也能用鍵盤：Tab 選到之後用方向鍵調整。
 * touch-action: none 讓觸控裝置拖曳時不要同時捲動頁面。 */
.分隔線直, .分隔線橫 {
   flex: 0 0 auto;
   background: transparent;
   transition: background .15s;
   touch-action: none;
}
.分隔線直 { width: 6px; cursor: col-resize; }
.分隔線橫 { height: 6px; cursor: row-resize; }
.分隔線直:hover, .分隔線直.拖曳中,
.分隔線橫:hover, .分隔線橫.拖曳中 { background: var(--主色); }
.分隔線直:focus-visible, .分隔線橫:focus-visible {
   background: var(--主色); outline-offset: 0;
}

/* ─────────────────────────────────────────────────────────
   左欄：解說面板
   ───────────────────────────────────────────────────────── */
#解說頁籤 {
   display: flex; gap: 0; flex: 0 0 auto;
   border-bottom: 1px solid var(--線); background: var(--底);
}
.頁籤 {
   flex: 1; padding: .5rem .3rem; text-align: center;
   font-size: .8rem; color: var(--字淡); cursor: pointer;
   border: none; background: none; font-family: inherit;
   border-bottom: 2px solid transparent;
}
.頁籤:hover { color: var(--字); }
.頁籤[aria-selected="true"] {
   color: var(--主色); border-bottom-color: var(--主色); background: var(--面);
   font-weight: 600;
}
.頁籤 .數字 {
   display: inline-block; min-width: 1.1rem; padding: 0 .25rem;
   margin-left: .2rem; border-radius: 999px;
   background: #b3231f; color: #fff; font-size: .68rem; line-height: 1.35;
}
.頁籤 .數字[hidden] { display: none; }

.解說內容 {
   flex: 1; overflow-y: auto; padding: .85rem;
   line-height: 1.75; font-size: .875rem;
}
.解說內容[hidden] { display: none; }
.解說內容::-webkit-scrollbar { width: 9px; }
.解說內容::-webkit-scrollbar-thumb { background: #2f3444; border-radius: 5px; }
.解說內容::-webkit-scrollbar-thumb:hover { background: #3d4356; }

/* 解說裡的區塊 */
.解說區 { margin-bottom: 1.1rem; }
.解說區 > h3 {
   margin: 0 0 .45rem; font-size: .76rem; font-weight: 600;
   letter-spacing: .06em; color: var(--字更淡); text-transform: uppercase;
}
.解說空 { color: var(--字更淡); font-size: .85rem; padding: 1.2rem .4rem; text-align: center; line-height: 1.9; }

/* 逐行解說 */
.行解說 {
   display: grid; grid-template-columns: 2.2rem 1fr; gap: .5rem;
   padding: .3rem .35rem; border-radius: 6px; cursor: pointer;
   transition: background .1s;
}
.行解說:hover { background: var(--面亮); }
.行解說.目前行 { background: #2b2416; box-shadow: inset 2px 0 0 var(--主色); }
.行解說 .行號 {
   color: var(--字更淡); font-family: var(--等寬); font-size: .78rem;
   text-align: right; padding-top: .1rem;
}
.行解說 .說 { color: var(--字); }
.行解說 .說 code {
   font-family: var(--等寬); font-size: .82em;
   background: #262a36; padding: .05rem .3rem; border-radius: 4px; color: var(--主色);
}
.行解說.結構 .說 { color: var(--藍); font-weight: 600; }
.行解說.註解 .說 { color: var(--字更淡); font-style: italic; }

/* 指令說明卡 */
.指令卡 { border: 1px solid var(--線); border-radius: var(--圓角); overflow: hidden; }
.指令卡 .頭 { padding: .6rem .7rem; background: var(--面亮); border-bottom: 1px solid var(--線); }
.指令卡 .簽名 {
   font-family: var(--等寬); font-size: .9rem; color: var(--主色);
   font-weight: 600; word-break: break-all;
}
.指令卡 .分類標 {
   display: inline-block; margin-top: .3rem; padding: .1rem .45rem;
   font-size: .7rem; border-radius: 999px;
   background: #2f3444; color: var(--字淡);
}
.指令卡 .分類標.已支援 { background: #1d3a24; color: var(--綠); }
.指令卡 .分類標.未支援 { background: #3a2020; color: var(--紅); }
.指令卡 .身 { padding: .65rem .7rem; }
.指令卡 .說明 { white-space: pre-wrap; margin: 0 0 .6rem; }
.指令卡 table { width: 100%; border-collapse: collapse; font-size: .8rem; margin-bottom: .6rem; }
.指令卡 th, .指令卡 td { text-align: left; padding: .25rem .4rem; border-bottom: 1px solid var(--線); vertical-align: top; }
.指令卡 th { color: var(--字更淡); font-weight: 500; font-size: .75rem; }
.指令卡 td code { font-family: var(--等寬); color: var(--紫); }

pre.範例 {
   margin: .35rem 0 .6rem; padding: .6rem .7rem;
   background: var(--底); border: 1px solid var(--線); border-radius: 6px;
   font-family: var(--等寬); font-size: .8rem; line-height: 1.6;
   overflow-x: auto; white-space: pre; color: #c8cde0;
}
.範例列 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; }
.範例列 .標 { font-size: .78rem; color: var(--字更淡); }
.小鈕 {
   padding: .15rem .45rem; font-size: .72rem;
   background: var(--面亮); color: var(--字淡);
   border: 1px solid var(--線); border-radius: 5px; cursor: pointer; font-family: inherit;
}
.小鈕:hover { color: var(--主色); border-color: var(--主色); }

/* 訊息（錯誤與警告） */
.訊息 {
   display: flex; gap: .5rem; padding: .55rem .6rem; margin-bottom: .5rem;
   border-radius: 6px; border-left: 3px solid var(--線);
   background: var(--面亮); font-size: .84rem; line-height: 1.65;
}
.訊息 .圖 { flex: 0 0 auto; font-size: 1rem; line-height: 1.4; }
.訊息 .文 { flex: 1; white-space: pre-wrap; word-break: break-word; }
.訊息 .去 {
   display: block; margin-top: .3rem; font-size: .76rem;
   color: var(--藍); cursor: pointer; background: none; border: none; padding: 0; font-family: inherit;
}
.訊息 .去:hover { text-decoration: underline; }
.訊息.錯誤 { border-left-color: var(--紅); background: #2a1a1c; }
.訊息.警告 { border-left-color: var(--主色); background: #2a2418; }
.訊息.就緒 { border-left-color: var(--綠); background: #1a2a1e; }

/* 指令總表 */
.搜尋列 {
   width: 100%; padding: .45rem .6rem; margin-bottom: .6rem;
   background: var(--底); color: var(--字);
   border: 1px solid var(--線); border-radius: 6px;
   font-family: inherit; font-size: .85rem;
}
.搜尋列:focus { outline: none; border-color: var(--主色); }
.分類組 { margin-bottom: .8rem; }
.分類名 {
   font-size: .74rem; color: var(--字更淡); letter-spacing: .05em;
   margin-bottom: .3rem; padding-left: .2rem;
}
.指令列 {
   display: flex; align-items: baseline; gap: .4rem;
   padding: .22rem .4rem; border-radius: 5px; cursor: pointer;
}
.指令列:hover { background: var(--面亮); }
.指令列 .名 { font-family: var(--等寬); font-size: .82rem; color: var(--主色); }
.指令列 .摘 { font-size: .76rem; color: var(--字更淡); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.指令列 .點 { width: 6px; height: 6px; border-radius: 50%; background: var(--字更淡); flex: 0 0 auto; }
.指令列 .點.已支援 { background: var(--綠); }

/* ─────────────────────────────────────────────────────────
   右欄：編輯器 + 執行畫面
   ───────────────────────────────────────────────────────── */
#編輯區 { flex: 1 1 55%; min-height: 80px; position: relative; }
#編輯器 { position: absolute; inset: 0; }

#執行區 {
   flex: 1 1 45%; min-height: 80px;
   display: flex; flex-direction: column;
   background: var(--底); border-top: 1px solid var(--線);
}
#執行列 {
   display: flex; align-items: center; gap: .5rem;
   padding: .3rem .6rem; background: var(--面);
   border-bottom: 1px solid var(--線); flex: 0 0 auto;
   font-size: .78rem; color: var(--字淡);
}
#執行列 .撐開 { flex: 1; }
#狀態 { display: inline-flex; align-items: center; gap: .35rem; }
#狀態 .燈 { width: 7px; height: 7px; border-radius: 50%; background: var(--字更淡); }
#狀態.執行中 .燈 { background: var(--綠); box-shadow: 0 0 6px var(--綠); }
#狀態.出錯 .燈 { background: var(--紅); box-shadow: 0 0 6px var(--紅); }

#沙箱 { flex: 1; width: 100%; border: none; background: var(--底); }

/* 橫向版面（執行畫面移到編輯器右邊） */
#右欄.橫向 { flex-direction: row; }
#右欄.橫向 #編輯區 { flex: 1 1 55%; }
#右欄.橫向 #執行區 { flex: 1 1 45%; border-top: none; border-left: 1px solid var(--線); }
#右欄.橫向 .分隔線橫 { width: 5px; height: auto; cursor: col-resize; }

/* 窄螢幕：改成上下堆疊 */
@media (max-width: 860px) {
   #主體 { flex-direction: column; }
   #左欄 { width: auto; max-width: none; height: 40%; border-right: none; border-bottom: 1px solid var(--線); }
   .分隔線直 { width: auto; height: 5px; cursor: row-resize; }
   #標題 small { display: none; }
}

/* Monaco 的自動完成清單，讓中文看起來舒服一點 */
.monaco-editor .suggest-widget { font-family: var(--字體) !important; }
.monaco-editor .suggest-widget .monaco-list-row .label-name { font-family: var(--等寬) !important; }

/* ─────────────────────────────────────────────────────────
   診斷卡
   程式跑不動的時候，這裡要回答三件事：
   發生什麼事、為什麼、以及最重要的——怎麼修。
   ───────────────────────────────────────────────────────── */
.診斷 {
   margin-bottom: .7rem;
   border: 1px solid var(--線);
   border-left: 3px solid var(--紅);
   border-radius: var(--圓角);
   background: var(--面亮);
   overflow: hidden;
}
.診斷.警告 { border-left-color: var(--主色); }

.診斷標題 {
   display: flex; align-items: baseline; gap: .45rem;
   margin: 0; padding: .65rem .75rem .5rem;
   font-size: .92rem; font-weight: 600; line-height: 1.55;
   color: var(--字);
}
.診斷 .圖 {
   flex: 0 0 auto;
   width: 1.15rem; height: 1.15rem;
   display: inline-flex; align-items: center; justify-content: center;
   border-radius: 50%;
   background: var(--紅); color: #fff;
   font-size: .72rem; font-weight: 700;
   position: relative; top: .12rem;
}
.診斷.警告 .圖 { background: var(--主色); color: var(--主色深, #1a1206); }

.診斷原因 {
   margin: 0; padding: 0 .75rem .6rem 2.35rem;
   font-size: .84rem; line-height: 1.75;
   color: var(--字淡);
   white-space: pre-wrap;
}

/* 「怎麼修」是學生最需要的部分，給它自己的底色 */
.診斷修法 {
   margin: 0 .75rem .65rem 2.35rem;
   padding: .6rem .75rem;
   background: var(--底);
   border-radius: 7px;
}
.診斷修法 h5 {
   margin: 0 0 .4rem;
   font-size: .72rem; font-weight: 600;
   letter-spacing: .06em; color: var(--字更淡);
}
.診斷修法 ol { margin: 0; padding-left: 1.15rem; }
.診斷修法 li {
   margin-bottom: .3rem;
   font-size: .85rem; line-height: 1.7;
   color: var(--字);
}
.診斷修法 li:last-child { margin-bottom: 0; }
.診斷修法 li::marker { color: var(--主色); font-weight: 600; }
.診斷修法 pre {
   margin: .35rem 0 0;
   padding: .5rem .6rem;
   background: var(--面);
   border: 1px solid var(--線);
   border-radius: 6px;
   font-family: var(--等寬);
   font-size: .78rem; line-height: 1.65;
   overflow-x: auto;
   white-space: pre;
   color: var(--主色);
}

.診斷按鈕 {
   display: flex; flex-wrap: wrap; gap: .4rem;
   padding: 0 .75rem .7rem 2.35rem;
}
.診斷按鈕 .小鈕 { min-height: 1.9rem; }
/* 「幫我改」是最有價值的那個按鈕，讓它看得出來可以按 */
.修正鈕 {
   color: var(--主色-深, #1a1206) !important;
   background: var(--主色) !important;
   border-color: var(--主色) !important;
   font-weight: 600;
}
.修正鈕:hover { background: #ffc373 !important; }

@media (max-width: 860px) {
   .診斷原因, .診斷修法, .診斷按鈕 { margin-left: .75rem; padding-left: 0; }
   .診斷原因 { padding-left: .75rem; }
   .診斷修法 { margin-left: .75rem; }
   .診斷按鈕 { padding-left: .75rem; }
}