/* 動手玩：模擬終端機（shell）— 見 src/js/widgets/shell.js、docs/WIDGETS.md 第 11 節
 * class 一律前綴 .w-shell；顏色／圓角用 base.css 的 CSS 變數；尺寸用 em（講師模式／流體字級會整體放大）。
 * 版型切換：JS 依「元件寬 ÷ 字級」在根元素加 .w-shell-wide（≥58em：任務清單放終端機右邊）／.w-shell-narrow（<30em），不用 container query。
 * 長行只在「每一段輸出」自己的區塊內左右捲動（ps aux、ls -l 的欄位不會折行），頁面本身不會出現橫向捲軸。
 * 終端機配色仿 Ubuntu 預設（Tango）：提示字元 使用者@主機 綠、路徑 藍；ls 的目錄藍、可執行檔綠；grep 符合的字紅。 */

.w-shell { min-width: 0; }
.w-shell-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1em; min-width: 0; }

/* ---------- 標題 ---------- */
.w-shell-head { display: flex; align-items: center; gap: .65em; min-width: 0; }
.w-shell-head-icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em;
  border-radius: .7em; background: var(--c-blue-soft); font-size: 1.2em; line-height: 1;
}
.w-shell-head-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.4; }
.w-shell-head-text strong { font-size: 1.04em; overflow-wrap: anywhere; }
.w-shell-head-text small { color: var(--c-muted); font-size: .8em; font-weight: 700; overflow-wrap: anywhere; }
.w-shell-tag {
  flex: none; align-self: flex-start; padding: .05em .55em; border-radius: .45em;
  background: var(--c-orange-soft); color: var(--c-orange-dark); font-size: .8em; font-weight: 800;
}

/* ---------- 版型：窄＝任務在上、終端機在下；寬＝終端機左、任務右 ---------- */
.w-shell-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1em; align-items: start; min-width: 0; }
.w-shell-wide .w-shell-main.has-missions { grid-template-columns: minmax(0, 1fr) minmax(12em, 15em); }
.w-shell-wide .w-shell-missions { grid-column: 2; grid-row: 1; position: sticky; top: .5em; }
.w-shell-wide .w-shell-termcol { grid-column: 1; grid-row: 1; }
.w-shell-termcol { display: grid; grid-template-columns: minmax(0, 1fr); gap: .7em; min-width: 0; }

/* ---------- 終端機外框 ---------- */
.w-shell-term {
  position: relative; min-width: 0; overflow: hidden; border: .125em solid #151922; border-radius: var(--radius);
  background: var(--c-code-bg); color: var(--c-code-text); box-shadow: 0 .2em 0 #c9cdd4; cursor: text;
}
.w-shell-term:focus-within { border-color: var(--c-blue); box-shadow: 0 .2em 0 #c9cdd4, 0 0 0 .2em rgba(31, 157, 224, .35); }
.w-shell-bar {
  display: flex; align-items: center; gap: .4em; min-width: 0; padding: .45em .8em;
  background: #2b3140; color: #aab2c0; font-size: .78em; font-weight: 700;
}
.w-shell-bar i { flex: none; width: .8em; height: .8em; border-radius: 50%; background: #ff5f57; }
.w-shell-bar i:nth-child(2) { background: #febc2e; }
.w-shell-bar i:nth-child(3) { margin-right: .35em; background: #28c840; }
.w-shell-bar-title { min-width: 0; overflow: hidden; font-family: var(--mono); text-overflow: ellipsis; white-space: nowrap; }

.w-shell-screen {
  position: relative; min-height: 15em; max-height: 26em; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
  padding: .65em .85em .8em; font-family: var(--mono); font-size: .85em; line-height: 1.55;
  scrollbar-width: thin; scrollbar-color: #4a5468 transparent;
}
.w-shell-wide .w-shell-screen { max-height: 30em; }
.w-shell-narrow .w-shell-screen { min-height: 13em; max-height: 22em; padding: .55em .65em .7em; font-size: .78em; }
.w-shell-screen ::selection { background: rgba(114, 159, 207, .45); }
.w-shell-meter { position: absolute; top: 0; left: 0; visibility: hidden; white-space: pre; pointer-events: none; }

/* ---------- 輸出 ---------- */
.w-shell-out, .w-shell-entry { min-width: 0; }
.w-shell-cmdline { color: #f3f5f9; white-space: pre-wrap; overflow-wrap: anywhere; }
.w-shell-uh { color: #8ae234; font-weight: 700; }
.w-shell-path { color: #729fcf; font-weight: 700; }
.w-shell-res { position: relative; min-width: 0; }
.w-shell-pre {
  margin: 0; padding: 0; color: #d7dce5; font: inherit; line-height: inherit; white-space: pre; tab-size: 8;
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #4a5468 transparent;
}
.w-shell-ln.is-err { color: #ff9b9b; }
/* 範例輸出（教材提供的固定輸出）：左邊虛線＋右上角「範例」。
 * 標籤往上貼在指令那一行的右端（指令通常很短），不會蓋到輸出內容；長行左右捲動時也看得到。 */
.w-shell-res.is-sample { margin: .2em 0; padding-left: .6em; border-left: .15em dashed rgba(255, 197, 61, .55); }
.w-shell-sample {
  position: absolute; top: -1.85em; right: 0; padding: 0 .5em; border-radius: .4em; background: #3d3622;
  color: #ffd479; font-family: var(--font); font-size: .78em; font-weight: 800; line-height: 1.7; pointer-events: none;
}
.w-shell-ctrlc { color: #e6e9ef; }

/* 上色（仿 GNU ls／grep 與 systemctl 的預設顏色） */
.w-shell-c-dir { color: #729fcf; font-weight: 700; }
.w-shell-c-exe { color: #8ae234; font-weight: 700; }
.w-shell-c-tw { background: #4e9a06; color: #10141c; }
.w-shell-c-match { color: #ff6b6b; font-weight: 700; }
.w-shell-c-fn { color: #c792ea; }
.w-shell-c-ln { color: #8ae234; }
.w-shell-c-sep { color: #34e2e2; }
.w-shell-c-ok { color: #8ae234; font-weight: 700; }
.w-shell-c-bad { color: #ff6b6b; font-weight: 700; }
.w-shell-c-dim { color: #9aa4b5; }
.w-shell-c-errline { color: #ff8585; }
.w-shell-c-warnline { color: #ffd479; }

/* 白話提示：不是終端機真的會印的東西，所以用不同的字型和底色 */
.w-shell-note {
  display: flex; align-items: flex-start; gap: .45em; margin: .3em 0 .5em; padding: .4em .65em;
  border-left: .22em solid #5fb8ec; border-radius: .35em; background: rgba(31, 157, 224, .12); color: #cfe9fb;
  font-family: var(--font); font-size: .9em; line-height: 1.55; white-space: normal; overflow-wrap: anywhere; cursor: auto;
}
.w-shell-note.is-warn { border-left-color: #ffc53d; background: rgba(255, 197, 61, .12); color: #ffe7ad; }
.w-shell-note.is-danger { border-left-color: #ff6b6b; background: rgba(239, 68, 68, .16); color: #ffd0d0; }
.w-shell-note-icon { flex: none; }
.w-shell-note-text { min-width: 0; }
.w-shell-note strong { color: #fff; }
.w-shell-note code, .w-shell-help code {
  padding: 0 .3em; border: 0; background: rgba(255, 255, 255, .1); color: inherit; font-size: .95em; overflow-wrap: anywhere;
}

/* help 的指令表 */
.w-shell-help {
  margin: .3em 0 .5em; padding: .55em .7em; border: .1em solid rgba(255, 255, 255, .12); border-radius: .5em;
  background: rgba(255, 255, 255, .04); font-family: var(--font); font-size: .9em; line-height: 1.5; white-space: normal; overflow-wrap: anywhere; cursor: auto;
}
.w-shell-help-title { margin: 0 0 .35em; color: #fff; font-weight: 800; }
/* 整張表共用欄寬（每列 display: contents），左欄是用法、右欄是說明；窄版改成上下排 */
.w-shell-help-list { display: grid; grid-template-columns: fit-content(22em) minmax(0, 1fr); gap: .2em .9em; align-items: baseline; margin: 0 0 .6em; }
.w-shell-help-row { display: contents; }
.w-shell-narrow .w-shell-help-list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.w-shell-help-row dt, .w-shell-help-row dd { min-width: 0; margin: 0; }
.w-shell-help-row code { color: #8be9a8; overflow-wrap: normal; }
.w-shell-narrow .w-shell-help-row code { overflow-wrap: anywhere; }
.w-shell-help-row dd { color: #c3cad8; }
.w-shell-narrow .w-shell-help-row dd { margin-bottom: .25em; }
.w-shell-help-lab { display: flex; flex-wrap: wrap; gap: .3em .5em; margin: 0 0 .6em; padding: 0; list-style: none; }
.w-shell-help-lab code { color: #ffd479; }
.w-shell-help-tip { margin: 0; color: #9aa4b5; }

/* ---------- 輸入列 ---------- */
.w-shell-inputline { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .55em; min-width: 0; }
.w-shell-inputline .w-shell-ps1 { flex: none; max-width: 100%; overflow-wrap: anywhere; cursor: text; }
.w-shell-input {
  flex: 1 1 9em; min-width: 6em; margin: 0; padding: 0; border: 0; border-radius: 0; outline: none;
  background: transparent; color: #f3f5f9; caret-color: #8ae234; font: inherit; line-height: inherit;
}
.w-shell-input:focus-visible { outline: none; } /* 焦點改由外框 .w-shell-term:focus-within 顯示 */

/* ---------- 「可以用的指令」提示列 ---------- */
.w-shell-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: .4em .45em; min-width: 0; }
.w-shell-suggest-label { margin-right: .15em; color: var(--c-muted); font-size: .82em; font-weight: 800; }
.w-shell-chip {
  appearance: none; display: inline-flex; align-items: center; min-width: 0; max-width: 100%; min-height: 2.25em; padding: .2em .65em;
  border: .125em solid var(--c-line-strong); border-radius: .6em; background: var(--c-surface); color: var(--c-text); cursor: pointer;
  box-shadow: 0 .15em 0 var(--c-line-strong); transition: transform .08s, box-shadow .08s, border-color .15s; -webkit-tap-highlight-color: transparent;
}
.w-shell-chip code { padding: 0; border: 0; background: none; color: var(--c-blue-dark); font-size: .85em; font-weight: 700; white-space: normal; overflow-wrap: anywhere; }
.w-shell-chip:hover { border-color: var(--c-blue); }
.w-shell-chip:active { transform: translateY(.15em); box-shadow: none; }
.w-shell-suggest-tip { flex-basis: 100%; color: var(--c-muted); font-size: .78em; font-weight: 700; }

/* ---------- 按鍵＋重來 ---------- */
.w-shell-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5em; min-width: 0; }
.w-shell-keys { display: flex; flex-wrap: wrap; gap: .45em; min-width: 0; }
.w-shell-reset { margin-left: auto; }

/* ---------- 任務清單 ---------- */
.w-shell-missions { min-width: 0; padding: .75em .85em .85em; border: .125em solid var(--c-line); border-radius: var(--radius); background: var(--c-surface); }
.w-shell-mhead { display: flex; align-items: baseline; justify-content: space-between; gap: .5em; }
.w-shell-mhead strong { font-size: .98em; }
.w-shell-mcount { color: var(--c-muted); font-size: .82em; font-weight: 800; font-variant-numeric: tabular-nums; }
.w-shell-mbar { display: block; height: .45em; margin: .45em 0 .6em; overflow: hidden; border-radius: 999px; background: var(--c-surface-2); }
.w-shell-mbar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--c-primary); transition: width .35s var(--ease); }
.w-shell-mlist { display: grid; gap: .4em; margin: 0; padding: 0; list-style: none; }
.w-shell-mission {
  display: flex; align-items: flex-start; gap: .55em; min-width: 0; padding: .45em .55em;
  border: .125em solid var(--c-line); border-radius: .75em; background: var(--c-surface); font-size: .9em; line-height: 1.5;
}
.w-shell-narrow .w-shell-mlist { gap: .3em; }
.w-shell-narrow .w-shell-mission { padding: .35em .5em; font-size: .88em; }
.w-shell-mission.is-current { border-color: var(--c-blue); background: var(--c-blue-soft); }
.w-shell-mission.is-done { border-color: #9fdcbc; background: var(--c-primary-soft); }
.w-shell-mcheck {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.6em; height: 1.6em; margin-top: .05em;
  border-radius: 50%; background: var(--c-line-strong); color: #fff; font-size: .85em; font-weight: 800; line-height: 1;
}
.w-shell-mission.is-current .w-shell-mcheck { background: var(--c-blue); }
.w-shell-mission.is-done .w-shell-mcheck { background: var(--c-primary); }
.w-shell-mbody { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.w-shell-mission.is-done .w-shell-mtext { color: var(--c-primary-dark); }
.w-shell-mtext code { font-size: .88em; }
/* 「提示」接在任務文字後面（窄欄也不會把文字擠成一長條） */
.w-shell-try {
  appearance: none; display: inline-flex; align-items: center; gap: .2em; min-height: 1.9em; margin: .1em 0 0 .3em; padding: 0 .5em;
  border: .1em solid var(--c-line-strong); border-radius: .55em; background: var(--c-surface); color: var(--c-blue-dark);
  font-size: .82em; font-weight: 800; line-height: 1.4; vertical-align: baseline; white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.w-shell-try:hover { border-color: var(--c-blue); background: var(--c-blue-soft); }
.w-shell-mission.is-pop .w-shell-mcheck { animation: w-shell-pop .4s var(--ease); }
@keyframes w-shell-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }

/* 全部完成 */
.w-shell-mdone:empty { display: none; }
.w-shell-done {
  display: flex; gap: .7em; min-width: 0; margin-top: .7em; padding: .75em .85em;
  border: .15em solid var(--c-gold); border-radius: var(--radius); background: var(--c-gold-soft); line-height: 1.5;
}
.w-shell-done-icon { flex: none; width: 2.4em; height: 2.4em; }
.w-shell-done-text { flex: 1 1 auto; min-width: 0; font-size: .9em; overflow-wrap: anywhere; }
.w-shell-done-title { display: block; font-size: 1.05em; }
.w-shell-done-md p { margin: .25em 0 0; }
.w-shell-done.is-pop { animation: w-shell-pop-in .45s var(--ease) both; }
@keyframes w-shell-pop-in { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .w-shell *, .w-shell *::before, .w-shell *::after { animation: none !important; transition: none !important; }
}