/* 動手玩：SQL 練習（sql）— 見 src/js/widgets/sql.js、docs/WIDGETS.md 第 10 節
 * class 一律前綴 .w-sql；顏色／圓角用 base.css 的 CSS 變數；尺寸用 em（講師模式／流體字級會整體放大）。
 * 版型切換：JS 依「元件寬 ÷ 字級」在根元素加 .w-sql-wide（≥46em：任務與資料表左右並排）／.w-sql-narrow（<28em，手機），
 * 不用 container query。大表格與長 SQL 只在元件內捲動（.w-sql-tscroll、textarea），頁面不會出現橫向捲軸。 */

.w-sql { min-width: 0; }
.w-sql-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15em; min-width: 0; }
.w-sql-wrap > *, .w-sql-tasks, .w-sql-tables, .w-sql-editsec, .w-sql-out { min-width: 0; }
.w-sql-h { margin: 0; color: var(--c-text); font-size: .95em; font-weight: 800; line-height: 1.45; }
.w-sql-sec-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .2em .8em; min-width: 0; margin: 0 0 .5em;
}
.w-sql-sec-sub, .w-sql-kbd { color: var(--c-muted); font-size: .78em; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }

/* ---------- 標題 ---------- */
.w-sql-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5em .65em; min-width: 0; }
.w-sql-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-sql-head-text { display: flex; flex: 1 1 12em; flex-direction: column; min-width: 0; line-height: 1.4; }
.w-sql-head-text strong { font-size: 1.04em; overflow-wrap: anywhere; }
.w-sql-head-text small { color: var(--c-muted); font-size: .8em; font-weight: 700; overflow-wrap: anywhere; }
.w-sql-badges { display: flex; flex-wrap: wrap; align-items: center; gap: .35em; }
.w-sql-tag, .w-sql-ro, .w-sql-tx {
  flex: none; padding: .05em .55em; border-radius: .45em; font-size: .8em; font-weight: 800; line-height: 1.6; white-space: nowrap;
}
.w-sql-tag { background: var(--c-orange-soft); color: var(--c-orange-dark); }
.w-sql-ro { background: var(--c-surface-2); color: var(--c-muted); }
.w-sql-tx { display: inline-flex; gap: .3em; background: var(--c-purple-soft); color: var(--c-purple-dark); }
.w-sql-tx[hidden] { display: none; }

/* ---------- 任務＋資料表（寬版左右並排） ---------- */
.w-sql-top { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15em; min-width: 0; }
.w-sql-wide .w-sql-top:not(.is-solo) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: start; }
.w-sql-progress {
  padding: .05em .65em; border-radius: 999px; background: var(--c-surface-2); color: var(--c-muted);
  font-size: .78em; font-weight: 800; white-space: nowrap;
}
.w-sql-finished .w-sql-progress { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.w-sql-task-list { display: grid; gap: .45em; margin: 0; padding: 0; list-style: none; }
.w-sql-task {
  display: flex; align-items: flex-start; gap: .6em; min-width: 0; padding: .55em .75em;
  border: .125em solid var(--c-line); border-radius: .875em; background: var(--c-surface); line-height: 1.55;
  transition: border-color .2s, background .2s;
}
.w-sql-task-n {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.75em; height: 1.75em; margin-top: .05em;
  border-radius: 50%; background: var(--c-line-strong); color: #fff; font-size: .85em; font-weight: 800; line-height: 1;
}
.w-sql-task-body { display: flex; flex-direction: column; align-items: flex-start; gap: .15em; min-width: 0; }
.w-sql-task-text { font-weight: 700; overflow-wrap: anywhere; }
.w-sql-task-text code { overflow-wrap: anywhere; }
.w-sql-task-state { padding: 0 .5em; border-radius: .4em; font-size: .75em; font-weight: 800; line-height: 1.6; }
.w-sql-task-state:empty { display: none; }
.w-sql-task.is-current { border-color: var(--c-blue); background: var(--c-blue-soft); }
.w-sql-task.is-current .w-sql-task-n { background: var(--c-blue); }
.w-sql-task.is-current .w-sql-task-state { background: var(--c-blue-dark); color: #fff; }
.w-sql-task.is-done { border-color: #9fdcbc; background: var(--c-primary-soft); }
.w-sql-task.is-done .w-sql-task-n { background: var(--c-primary); }
.w-sql-task.is-done .w-sql-task-state { background: rgba(34, 181, 115, .18); color: var(--c-primary-dark); }
.w-sql-task.is-locked { background: var(--c-surface-2); }
.w-sql-task.is-locked .w-sql-task-text { color: var(--c-muted); font-weight: 600; }

.w-sql-tabs { display: flex; flex-wrap: wrap; gap: .4em; margin-bottom: .55em; }
.w-sql-tab {
  appearance: none; display: inline-flex; align-items: baseline; gap: .45em; max-width: 100%; min-height: 2.4em; padding: .3em .8em;
  border: .125em solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-text);
  font-family: var(--mono); font-size: .85em; font-weight: 700; cursor: pointer; transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.w-sql-tab:hover { border-color: var(--c-blue); }
.w-sql-tab.is-active { border-color: var(--c-blue); background: var(--c-blue-soft); color: var(--c-blue-dark); }
.w-sql-tab-name { min-width: 0; overflow-wrap: anywhere; }
.w-sql-tab-count { color: var(--c-muted); font-family: var(--font); font-size: .85em; font-weight: 700; white-space: nowrap; }
.w-sql-tpanel { min-width: 0; padding: .7em .8em; border: .125em solid var(--c-line); border-radius: var(--radius); background: var(--c-surface-2); }
.w-sql-tpanel-head { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .7em; margin-bottom: .55em; }
.w-sql-tname { font-family: var(--mono); font-size: .95em; overflow-wrap: anywhere; }
.w-sql-tmeta { color: var(--c-muted); font-size: .78em; font-weight: 700; }
.w-sql-peek { margin-left: auto; }
.w-sql-cols { display: flex; flex-wrap: wrap; gap: .35em; margin: 0; padding: 0; list-style: none; }
.w-sql-col {
  display: inline-flex; align-items: center; gap: .35em; max-width: 100%; padding: .15em .55em;
  border: .125em solid var(--c-line); border-radius: .6em; background: var(--c-surface); font-size: .82em; line-height: 1.5;
}
.w-sql-col-name { padding: 0; border: 0; background: none; font-size: 1em; font-weight: 700; overflow-wrap: anywhere; }
.w-sql-col-type { color: var(--c-muted); font-size: .85em; font-weight: 700; white-space: nowrap; }
.w-sql-col-pk { padding: 0 .4em; border-radius: .35em; background: var(--c-gold-soft); color: #8a6200; font-size: .8em; font-weight: 800; white-space: nowrap; }
.w-sql-tdata { margin-top: .6em; }

/* ---------- SQL 編輯區（深色、等寬字、行號） ---------- */
.w-sql-editbox {
  display: flex; min-width: 0; overflow: hidden; border: .125em solid #151922; border-radius: var(--radius);
  background: var(--c-code-bg); box-shadow: 0 .2em 0 #c9cdd4;
}
.w-sql-editbox:focus-within { border-color: var(--c-blue); box-shadow: 0 .2em 0 #c9cdd4, 0 0 0 .1875rem rgba(31, 157, 224, .4); }
/* 行號和 textarea 用一樣的字級、行高與上邊距，才會一行一行對齊 */
.w-sql-gutter {
  flex: none; width: 3.1em; overflow: hidden; padding: .7em .6em .7em 0; border-right: 1px solid #2c3343; background: #151922; color: #6f7a8c;
  font-family: var(--mono); font-size: 1em; line-height: 1.6; text-align: right; user-select: none;
}
.w-sql-gutter span { display: block; }
.w-sql-gutter span.is-err { border-radius: 0 .3em .3em 0; background: rgba(239, 68, 68, .65); color: #fff; }
.w-sql-editor {
  display: block; flex: 1 1 auto; min-width: 0; margin: 0 0 0 .85em; padding: .7em .85em .7em 0; border: 0; border-radius: 0; outline: none;
  background: transparent; color: var(--c-code-text); caret-color: #ffd479; font-family: var(--mono); font-size: 1em; line-height: 1.6;
  white-space: pre; overflow: auto; resize: vertical; tab-size: 2;
}
.w-sql-editor::selection { background: rgba(124, 196, 255, .35); }
.w-sql-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .55em .6em; margin-top: .75em; }
.w-sql-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; }
.w-sql-wide .w-sql-tools { margin-left: auto; }
.w-sql-run { min-width: 7em; }
.w-sql-narrow .w-sql-run, .w-sql-narrow .w-sql-tools { flex: 1 1 100%; }
.w-sql-narrow .w-sql-tools .btn { flex: 1 1 auto; }
.w-sql-status { margin: .55em 0 0; color: var(--c-muted); font-size: .85em; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.w-sql-status:empty, .w-sql-hintslot:empty, .w-sql-confirmslot:empty { display: none; }
.w-sql-hintbox {
  display: flex; gap: .55em; margin-top: .65em; padding: .65em .9em; border: .125em solid #f3dc9a; border-radius: .875em;
  background: var(--c-gold-soft); line-height: 1.55; overflow-wrap: anywhere;
}
.w-sql-hintbox-icon { flex: none; }
.w-sql-hintbox strong { margin-right: .25em; }
.w-sql-hintbox code, .w-sql-fb code, .w-sql-confirm code { overflow-wrap: anywhere; }

/* 沒有 WHERE 的 UPDATE／DELETE：畫面上的提醒（不是 window.confirm） */
.w-sql-confirm {
  display: flex; gap: .65em; margin-top: .75em; padding: .8em 1em; border: .15em solid var(--c-red); border-radius: var(--radius);
  background: var(--c-red-soft); color: var(--c-red-dark); line-height: 1.55;
}
.w-sql-confirm-icon { flex: none; font-size: 1.3em; line-height: 1.2; }
.w-sql-confirm-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.w-sql-confirm-title { display: block; font-size: 1.04em; }
.w-sql-confirm-list { margin: .3em 0 0; padding-left: 1.2em; color: var(--c-text); font-size: .92em; }
.w-sql-confirm-list code { background: rgba(255, 255, 255, .8); }
.w-sql-confirm-note { margin: .3em 0 0; color: var(--c-text); font-size: .85em; }
.w-sql-confirm-actions { display: flex; flex-wrap: wrap; gap: .5em; margin-top: .65em; }

/* ---------- 執行結果 ---------- */
.w-sql-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: .65em; }
.w-sql-out > .w-sql-sec-head { margin: 0; }
.w-sql-feedback:empty, .w-sql-doneslot:empty, .w-sql-error:empty { display: none; }
.w-sql-fb {
  display: flex; gap: .6em; min-width: 0; padding: .7em .9em; border: .125em solid var(--c-line); border-radius: .875em;
  background: var(--c-surface); line-height: 1.55;
}
.w-sql-fb.is-ok { border-color: #9fdcbc; background: var(--c-primary-soft); }
.w-sql-fb.is-miss { border-color: #f5a3a3; background: var(--c-red-soft); }
.w-sql-fb.is-info { border-color: #a9d8f3; background: var(--c-blue-soft); }
.w-sql-fb.is-warn { border-color: #ffc98a; background: var(--c-orange-soft); }
.w-sql-fb-icon { flex: none; font-size: 1.15em; line-height: 1.35; }
.w-sql-fb-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.w-sql-fb-title { display: block; }
.w-sql-fb-text { margin: .15em 0 0; }
.w-sql-fb-list { margin: .25em 0 0; padding-left: 1.2em; }
.w-sql-fb-list li + li { margin-top: .2em; }

.w-sql-err {
  display: flex; gap: .6em; min-width: 0; padding: .7em .9em; border: .125em solid #f5a3a3; border-left-width: .35em; border-radius: .875em;
  background: var(--c-red-soft); color: var(--c-red-dark); line-height: 1.55;
}
.w-sql-err-icon { flex: none; font-size: 1.1em; line-height: 1.4; }
.w-sql-err-body { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.w-sql-err-title { display: block; }
.w-sql-err-msg { margin: .15em 0 0; color: var(--c-text); font-weight: 700; white-space: pre-wrap; }
.w-sql-err-note { margin: .3em 0 0; color: var(--c-muted); font-size: .85em; font-weight: 700; }

.w-sql-result { min-width: 0; }
.w-sql-result > * + * { margin-top: .55em; }
.w-sql-res-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2em .7em; }
.w-sql-res-count { color: var(--c-muted); font-size: .85em; font-weight: 700; }
.w-sql-res-msg {
  display: flex; gap: .45em; margin: 0; padding: .6em .85em; border: .125em solid #9fdcbc; border-radius: .875em;
  background: var(--c-primary-soft); color: var(--c-primary-dark); font-weight: 800; line-height: 1.5; overflow-wrap: anywhere;
}
.w-sql-res-msg.is-notice { border-color: #ffc98a; background: var(--c-orange-soft); color: var(--c-orange-dark); }
.w-sql-res-msg.is-muted { border: .125em dashed var(--c-line-strong); background: var(--c-surface); color: var(--c-muted); font-weight: 700; }
.w-sql-log {
  margin: 0; padding: .5em .8em .5em 2.1em; border: .125em solid var(--c-line); border-radius: .875em; background: var(--c-surface);
  font-size: .88em; line-height: 1.6;
}
.w-sql-log li { overflow-wrap: anywhere; }
.w-sql-log li.is-notice { color: var(--c-orange-dark); }
.w-sql-log-kind { margin-right: .45em; font-weight: 800; }
.w-sql-note { margin: 0; padding: .45em .8em; border-radius: .7em; font-size: .88em; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.w-sql-note.is-tx { background: var(--c-purple-soft); color: var(--c-purple-dark); }
.w-sql-note.is-warn { background: var(--c-orange-soft); color: var(--c-orange-dark); }

/* 表格：只在自己的框裡捲動（左右、上下），表頭固定 */
.w-sql-tblock { min-width: 0; }
.w-sql-tscroll {
  max-width: 100%; max-height: 24em; overflow: auto; border: .125em solid var(--c-line); border-radius: .75em; background: var(--c-surface);
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.w-sql-tdata .w-sql-tscroll { max-height: 18em; }
.w-sql-tscroll:focus-visible { outline: .1875rem solid var(--c-blue); outline-offset: .125rem; }
.w-sql-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .88em; line-height: 1.5; }
.w-sql-table th, .w-sql-table td { padding: .4em .75em; border-bottom: 1px solid var(--c-line); text-align: left; white-space: nowrap; }
.w-sql-table th {
  position: sticky; top: 0; z-index: 1; background: var(--c-surface-2); color: var(--c-text);
  font-family: var(--mono); font-size: .92em; font-weight: 800;
}
.w-sql-table tbody tr:last-child td { border-bottom: 0; }
.w-sql-table tbody tr:nth-child(even) td { background: #fafbf9; }
.w-sql-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.w-sql-table td.is-null { color: var(--c-muted); font-family: var(--mono); font-size: .85em; font-style: italic; }
.w-sql-table td.w-sql-empty { color: var(--c-muted); text-align: center; white-space: normal; }
.w-sql-more, .w-sql-swipe { margin: .35em 0 0; color: var(--c-muted); font-size: .8em; font-weight: 700; }
.w-sql-swipe[hidden] { display: none; }

/* ---------- 全部完成 ---------- */
.w-sql-done {
  display: flex; align-items: flex-start; gap: .8em; padding: .85em 1em; border: .125em solid var(--c-gold); border-radius: var(--radius);
  background: var(--c-gold-soft); color: #7a5600;
}
.w-sql-done:focus { outline: none; }
.w-sql-done:focus-visible { outline: .1875rem solid var(--c-blue); outline-offset: .125rem; }
.w-sql-done-icon { flex: none; width: 2.6em; height: 2.6em; }
.w-sql-done-text { display: flex; flex-direction: column; gap: .2em; min-width: 0; line-height: 1.55; }
.w-sql-done-title { font-size: 1.08em; }
.w-sql-done-sub { color: var(--c-text); font-size: .92em; font-weight: 700; overflow-wrap: anywhere; }
.w-sql-done-actions { margin-top: .35em; }

.w-sql-fb.is-pop, .w-sql-done.is-pop, .w-sql-confirm.is-pop { animation: w-sql-pop .35s var(--ease); }
@keyframes w-sql-pop { from { opacity: .3; transform: translateY(-.25em); } to { opacity: 1; transform: none; } }

/* ---------- 窄版（手機） ---------- */
.w-sql-narrow .w-sql-tpanel { padding: .6em; }
.w-sql-narrow .w-sql-peek { margin-left: 0; }
.w-sql-narrow .w-sql-gutter { width: 2.5em; padding-right: .45em; }
.w-sql-narrow .w-sql-editor { margin-left: .6em; padding-right: .6em; }
.w-sql-narrow .w-sql-table { font-size: .82em; }
.w-sql-narrow .w-sql-table th, .w-sql-narrow .w-sql-table td { padding: .35em .55em; }

@media (prefers-reduced-motion: reduce) {
  .w-sql-fb.is-pop, .w-sql-done.is-pop, .w-sql-confirm.is-pop { animation: none; }
  .w-sql-task, .w-sql-tab { transition: none; }
}