/* 動手玩：找出可疑之處（spot）— 見 src/js/widgets/spot.js
 * class 一律前綴 .w-spot；顏色／圓角用 base.css 的 CSS 變數；尺寸用 em（講師模式／流體字級會整體放大）。
 * 版型切換：JS 依「元件寬 ÷ 字級」在根元素加 .w-spot-wide（≥40em）／.w-spot-narrow（<26em）／
 * .w-spot-arch-h（架構圖區塊夠寬才由左到右），不用 container query。 */

.w-spot { min-width: 0; }
.w-spot-wrap { min-width: 0; }
.w-spot-wrap > * + * { margin-top: .85em; }
.w-spot-wrap > .w-spot-done-slot:empty { margin-top: 0; }

/* ---------- 目標＋進度 ---------- */
.w-spot-bar { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6em; }
.w-spot-wide .w-spot-bar { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .6em 1.2em; }
.w-spot-goal { display: flex; align-items: center; gap: .65em; min-width: 0; }
.w-spot-goal-icon {
  flex: none; display: flex; align-items: center; justify-content: center; width: 2.1em; height: 2.1em;
  border-radius: .7em; background: var(--c-red-soft); font-size: 1.2em; line-height: 1;
}
.w-spot-goal-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.4; }
.w-spot-goal-text strong { font-size: 1.04em; overflow-wrap: anywhere; }
.w-spot-goal-text small { color: var(--c-muted); font-size: .8em; font-weight: 700; }
.w-spot-progress { display: flex; flex-wrap: wrap; align-items: center; gap: .35em .6em; min-width: 0; }
.w-spot-wide .w-spot-progress { justify-content: flex-end; max-width: 22em; }
.w-spot-pill {
  display: inline-flex; align-items: center; gap: .5em; padding: .25em .85em; border: 2px solid var(--c-line); border-radius: 999px;
  background: var(--c-surface-2); color: var(--c-muted); font-size: .85em; font-weight: 800; white-space: nowrap;
}
.w-spot-pill.is-done { border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-dark); }
.w-spot-dots { display: inline-flex; flex-wrap: wrap; gap: .28em; }
.w-spot-dots i { display: block; width: .62em; height: .62em; border-radius: 50%; background: var(--c-line-strong); transition: background .2s, transform .2s; }
.w-spot-dots i.is-on { background: var(--c-red); transform: scale(1.15); }
.w-spot-dots i.is-answer { background: transparent; box-shadow: inset 0 0 0 .14em var(--c-red); }
.w-spot-miss { color: var(--c-orange-dark); font-size: .8em; font-weight: 800; }
.w-spot-miss[hidden] { display: none; }
.w-spot-status { flex-basis: 100%; min-width: 0; color: var(--c-muted); font-size: .82em; font-weight: 700; line-height: 1.45; }
.w-spot-wide .w-spot-status { text-align: right; }
.w-spot-status:empty { display: none; }

/* ---------- 模擬視窗（共用） ---------- */
.w-spot-win {
  min-width: 0; border: 2px solid var(--c-line-strong); border-radius: var(--radius); background: var(--c-surface);
  overflow: hidden; box-shadow: 0 .2em 0 var(--c-line);
}
.w-spot-titlebar {
  display: flex; align-items: center; gap: .5em; min-width: 0; padding: .45em .85em; border-bottom: 2px solid var(--c-line);
  background: var(--c-surface-2); color: var(--c-muted); font-size: .82em; font-weight: 800; line-height: 1.4;
}
.w-spot-titlebar-icon { flex: none; font-size: 1.1em; line-height: 1; }
.w-spot-titlebar-title { flex: 1 1 auto; min-width: 0; overflow: hidden; color: var(--c-text); text-overflow: ellipsis; white-space: nowrap; }
.w-spot-titlebar-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w-spot-tag { flex: none; padding: .05em .55em; border-radius: .45em; background: var(--c-orange-soft); color: var(--c-orange-dark); font-size: .9em; }
.w-spot-lights { flex: none; display: inline-flex; gap: .35em; }
.w-spot-lights i { display: block; width: .72em; height: .72em; border-radius: 50%; background: #ff5f57; }
.w-spot-lights i:nth-child(2) { background: #febc2e; }
.w-spot-lights i:nth-child(3) { background: #28c840; }

.w-spot-avatar {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.3em; height: 2.3em; border-radius: 50%;
  background: var(--c-orange); color: #fff; font-size: .95em; font-weight: 800; line-height: 1;
}
.w-spot-avatar.is-blank { visibility: hidden; }
.w-spot-who { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.w-spot-who strong { overflow-wrap: anywhere; }
.w-spot-who span { color: var(--c-muted); font-size: .8em; font-weight: 700; overflow-wrap: anywhere; }

/* 每一行都是 <button>，但外觀要像訊息／信件／程式碼，不像一排按鈕 */
.w-spot-line {
  appearance: none; -webkit-appearance: none; position: relative; display: block; max-width: 100%; margin: 0; padding: .3em .55em;
  border: 2px solid transparent; border-radius: .6em; background: transparent; color: inherit; font: inherit; line-height: 1.7;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.w-spot-line:focus-visible { outline: .1875rem solid var(--c-blue); outline-offset: .125rem; }
.w-spot-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.w-spot-flag { display: none; }
.w-spot-row.is-flag .w-spot-flag {
  display: block; position: absolute; top: -.55em; right: -.35em; font-size: .95em; line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}
/* 紅色螢光筆 */
.w-spot-row.is-flag .w-spot-line { border-color: var(--c-red); }
.w-spot-row.is-flag .w-spot-txt {
  padding: 0 .1em; background: linear-gradient(transparent 48%, rgba(239, 68, 68, .32) 48%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.w-spot-row.is-answer .w-spot-line { border-style: dashed; }

/* 平面型（信件／文件／AI 輸入框）：滑過去像螢光筆預覽 */
.w-spot-flat .w-spot-line { width: 100%; }
.w-spot-flat .w-spot-line:hover { background: rgba(255, 197, 61, .2); }
.w-spot-flat .w-spot-row.is-flag .w-spot-line { background: #fff6f6; }
.w-spot-flat .w-spot-row + .w-spot-row { margin-top: .15em; }
.w-spot-row.is-mono .w-spot-line { font-family: var(--mono); font-size: .86em; }
.w-spot-row.is-heading .w-spot-line { font-size: 1.15em; font-weight: 800; }
/* 模擬「白色小字」：刻意淡，被找到後恢復正常顏色 */
.w-spot-row.is-faint .w-spot-line { color: #8a9298; font-size: .82em; }
.w-spot-row.is-faint.is-flag .w-spot-line { color: var(--c-text); }

/* 為什麼可疑／這句沒問題 */
.w-spot-why { max-width: 100%; margin-top: .35em; animation: w-spot-in .28s var(--ease); }
.w-spot-why-box {
  padding: .5em .8em; border-left: .3em solid var(--c-red); border-radius: .55em; background: var(--c-red-soft); color: var(--c-red-dark);
  font-size: .88em; font-weight: 700; line-height: 1.6; overflow-wrap: anywhere; white-space: normal;
}
.w-spot-why-box strong { margin-right: .25em; }
.w-spot-why-box code { background: rgba(255, 255, 255, .7); border-color: rgba(196, 43, 43, .2); color: inherit; }
.w-spot-why-tag {
  display: inline-block; margin-right: .45em; padding: 0 .45em; border-radius: .4em; background: var(--c-red); color: #fff;
  font-size: .82em; font-weight: 800; vertical-align: .05em;
}
.w-spot-hint { max-width: 100%; margin-top: .3em; animation: w-spot-in .22s var(--ease); }
.w-spot-hint-pill {
  display: inline-flex; align-items: center; gap: .35em; padding: .15em .75em; border: 2px solid var(--c-line); border-radius: 999px;
  background: var(--c-surface); color: var(--c-muted); font-size: .8em; font-weight: 800; white-space: normal;
}
.w-spot-flat .w-spot-why, .w-spot-flat .w-spot-hint { padding-left: .55em; }
@keyframes w-spot-in { from { opacity: 0; transform: translateY(-.3em); } to { opacity: 1; transform: none; } }

/* 點到正常的行：輕輕抖一下 */
.w-spot-line.is-shake { animation: w-spot-shake .42s ease; }
@keyframes w-spot-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-.28em); }
  40% { transform: translateX(.24em); }
  60% { transform: translateX(-.16em); }
  80% { transform: translateX(.08em); }
}

/* ---------- chat：LINE 類對話 ---------- */
.w-spot-chat-head { display: flex; align-items: center; gap: .6em; padding: .55em .9em; border-bottom: 2px solid var(--c-line); background: var(--c-surface); }
.w-spot-back { flex: none; color: var(--c-muted); font-size: 1.5em; font-weight: 800; line-height: 1; }
.w-spot--chat .w-spot-body { display: flex; flex-direction: column; gap: .55em; padding: .95em .8em 1.05em; background: #cfdcec; }
.w-spot--chat .w-spot-row { display: flex; align-items: flex-start; gap: .5em; min-width: 0; }
.w-spot--chat .w-spot-row.is-me { justify-content: flex-end; }
.w-spot-stack { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; max-width: 82%; }
.w-spot-wide .w-spot-stack { max-width: 68%; }
.w-spot-row.is-me .w-spot-stack { align-items: flex-end; }
.w-spot--chat .w-spot-line {
  padding: .5em .85em; border-radius: 1.15em; border-top-left-radius: .35em; background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .08); line-height: 1.6;
}
.w-spot--chat .is-me .w-spot-line { border-radius: 1.15em; border-top-right-radius: .35em; background: #b9eb9e; }
.w-spot--chat .w-spot-line:hover { border-color: var(--c-gold); }
.w-spot--chat .w-spot-row.is-flag .w-spot-line { border-color: var(--c-red); background: #fff6f6; }

/* ---------- email：信件卡片 ---------- */
.w-spot-mail-head { padding: .85em 1em .75em; border-bottom: 2px solid var(--c-line); }
.w-spot-mail-subject { margin-bottom: .55em; font-size: 1.1em; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.w-spot-mail-from { display: flex; align-items: center; gap: .6em; min-width: 0; }
.w-spot--email .w-spot-avatar { background: var(--c-blue); }
.w-spot--email .w-spot-body { padding: .65em .55em .95em; }

/* ---------- doc：白紙文件 ---------- */
.w-spot--doc .w-spot-body { padding: .9em; background: #e9ebe6; }
.w-spot-paper {
  max-width: 46em; margin: 0 auto; padding: 1.1em .7em 1.3em; border-radius: .3em; background: #fff;
  box-shadow: 0 .1em .55em rgba(0, 0, 0, .13);
}
.w-spot-wide .w-spot-paper { padding: 2em 2.4em 2.4em; }

/* ---------- prompt：貼給 AI 的輸入框 ---------- */
.w-spot--prompt .w-spot-body { padding: .9em; background: linear-gradient(180deg, var(--c-purple-soft), var(--c-surface) 75%); }
.w-spot-composer {
  border: 2px solid var(--c-line-strong); border-radius: 1.2em; background: #fff; box-shadow: 0 .25em .9em rgba(60, 40, 120, .08);
}
.w-spot-composer-lines { padding: .65em .5em .3em; }
.w-spot-composer-foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45em; padding: .4em .6em .6em .8em;
  color: var(--c-muted); font-size: .8em; font-weight: 800;
}
.w-spot-composer-tool { display: inline-flex; align-items: center; padding: .1em .65em; border: 2px solid var(--c-line); border-radius: 999px; white-space: nowrap; }
.w-spot-send {
  margin-left: auto; display: inline-flex; align-items: center; padding: .3em 1em; border-radius: 999px;
  background: var(--c-text); color: #fff; white-space: nowrap; opacity: .85;
}

/* ---------- code：深色程式碼區（行號、等寬字、長行在區塊內水平捲動） ---------- */
.w-spot-win.w-spot--code { border-color: #2a3140; background: var(--c-code-bg); box-shadow: 0 .2em 0 #c9cdd4; }
.w-spot--code .w-spot-titlebar { border-bottom-color: #2a3140; background: #151922; color: #9aa4b5; }
.w-spot--code .w-spot-titlebar-title { color: var(--c-code-text); font-family: var(--mono); font-weight: 700; }
.w-spot--code .w-spot-body { background: var(--c-code-bg); color: var(--c-code-text); }
.w-spot-scroll { max-width: 100%; overflow-x: auto; overflow-y: hidden; padding: .55em 0 .7em; overscroll-behavior-x: contain; }
.w-spot-inner { width: max-content; min-width: 100%; }
.w-spot--code .w-spot-line {
  display: flex; width: 100%; max-width: none; padding: 0 1.2em 0 0; border: 0; border-left: .22em solid transparent; border-radius: 0;
  font-family: var(--mono); font-size: .84em; line-height: 1.8;
}
.w-spot-wide .w-spot--code .w-spot-line { font-size: .88em; }
.w-spot--code .w-spot-line:focus-visible { outline-offset: -.19rem; }
.w-spot-ln {
  position: sticky; left: 0; z-index: 1; flex: none; min-width: 3.3em; padding: 0 .9em 0 .5em;
  background: var(--c-code-bg); color: #6f7a8c; text-align: right; user-select: none;
}
.w-spot--code .w-spot-txt { flex: none; white-space: pre; overflow-wrap: normal; }
.w-spot--code .w-spot-line:hover, .w-spot--code .w-spot-line:hover .w-spot-ln { background: #2a303d; }
.w-spot--code .is-comment .w-spot-txt { color: #8d98ab; }
.w-spot--code .w-spot-row.is-flag .w-spot-line, .w-spot--code .w-spot-row.is-flag .w-spot-ln { background: #552c35; }
.w-spot--code .w-spot-row.is-flag .w-spot-line { border-left-color: var(--c-red); }
.w-spot--code .w-spot-row.is-flag .w-spot-ln { color: #ffb4b4; }
.w-spot--code .w-spot-row.is-flag .w-spot-txt { padding: 0; background: none; color: #fff; }
.w-spot--code .w-spot-row.is-answer .w-spot-line { border-left-style: dashed; }
/* 說明框跟著「看得到的寬度」走：sticky＋JS 量好的寬度，橫向捲到哪裡都完整可讀，也不會撐寬捲動區 */
.w-spot--code .w-spot-why, .w-spot--code .w-spot-hint {
  position: sticky; left: 0; width: var(--w-spot-vis, 20em); max-width: none; padding: .1em .7em .45em;
}

/* ---------- arch：簡化架構圖（外 → 內） ---------- */
.w-spot--arch .w-spot-body {
  padding: .8em .8em 1em; background-color: #fbfcfa;
  background-image: radial-gradient(var(--c-line-strong) 1px, transparent 1.2px); background-size: 1.25em 1.25em;
}
.w-spot-axis {
  display: flex; align-items: center; gap: .6em; margin: 0 0 .75em; color: var(--c-muted); font-size: .78em; font-weight: 800; white-space: nowrap;
}
.w-spot-axis-line {
  flex: 1 1 auto; position: relative; min-width: 1.5em; height: .2em; border-radius: 999px;
  background: linear-gradient(90deg, var(--c-blue), var(--c-purple));
}
.w-spot-axis-line::after {
  content: ""; position: absolute; right: -.1em; top: 50%; border: .42em solid transparent; border-left: .6em solid var(--c-purple);
  border-right: 0; transform: translateY(-50%);
}
.w-spot-zones { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.w-spot-arch-h .w-spot-zones { flex-direction: row; }
.w-spot-zone {
  --z: var(--c-blue); --z-soft: var(--c-blue-soft);
  flex: 1 1 0; min-width: 0; padding: .6em; border: 2px solid var(--z); border-radius: var(--radius);
  background: var(--z-soft);
}
.w-spot-zone--0 { --z: #8fb8d6; --z-soft: #eef5fa; border-style: dashed; }
.w-spot-zone--1 { --z: #f2b46b; --z-soft: var(--c-orange-soft); }
.w-spot-zone--2 { --z: #b9a2f2; --z-soft: var(--c-purple-soft); }
.w-spot-zone--3 { --z: #86d3ad; --z-soft: var(--c-primary-soft); }
.w-spot-zone--4 { --z: #e3c46a; --z-soft: var(--c-gold-soft); }
.w-spot-zone-head { display: flex; align-items: center; gap: .4em; margin: 0 0 .5em; font-size: .82em; font-weight: 800; line-height: 1.35; }
.w-spot-zone-icon { flex: none; font-size: 1.15em; line-height: 1; }
.w-spot-zone-name { min-width: 0; overflow-wrap: anywhere; }
/* 上下排時，區塊裡的卡片橫向排、放不下就換行；左右排時一張一列 */
.w-spot-zone-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12em), 1fr)); align-items: start; gap: .5em; }
.w-spot-arch-h .w-spot-zone-cards { grid-template-columns: minmax(0, 1fr); }
.w-spot--arch .w-spot-row { min-width: 0; }
.w-spot--arch .w-spot-line {
  display: flex; flex-direction: column; align-items: flex-start; gap: .15em; width: 100%; padding: .5em .65em;
  border-color: var(--c-line-strong); border-radius: .75em; background: #fff; line-height: 1.45; box-shadow: 0 .15em 0 var(--c-line);
}
.w-spot--arch .w-spot-line:hover { border-color: var(--c-gold); }
.w-spot--arch .w-spot-row.is-flag .w-spot-line { border-color: var(--c-red); background: #fff6f6; }
.w-spot--arch .w-spot-txt { font-weight: 800; }
.w-spot-ep { display: flex; flex-wrap: wrap; align-items: center; gap: .3em .45em; min-width: 0; max-width: 100%; }
.w-spot-path { font-family: var(--mono); font-size: .9em; }
.w-spot--arch .w-spot-txt.w-spot-path { word-break: normal; overflow-wrap: break-word; }
/* 由左到右排時，說明集中放在整張圖下方 */
.w-spot-notes { display: grid; gap: .5em; margin-top: .8em; }
.w-spot-notes:empty { display: none; }
.w-spot-notes .w-spot-why, .w-spot-zone-notes .w-spot-why { margin-top: 0; }
.w-spot-zone-notes { display: grid; gap: .5em; margin-top: .5em; }
.w-spot-zone-notes:empty { display: none; }
.w-spot-method {
  flex: none; padding: .05em .45em; border-radius: .4em; background: var(--c-muted); color: #fff;
  font-family: var(--mono); font-size: .72em; font-weight: 800; letter-spacing: .03em; line-height: 1.5;
}
.w-spot-method--get { background: var(--c-blue-dark); }
.w-spot-method--post { background: var(--c-primary-dark); }
.w-spot-method--put, .w-spot-method--patch { background: var(--c-orange-dark); }
.w-spot-method--delete { background: var(--c-red-dark); }
.w-spot-sub { color: var(--c-muted); font-size: .78em; font-weight: 700; overflow-wrap: anywhere; }
.w-spot-arrow {
  flex: none; display: flex; align-items: center; justify-content: center; height: 1.8em; color: var(--c-muted);
  font-size: 1.05em; font-weight: 800; line-height: 1;
}
.w-spot-arrow span { display: inline-block; transform: rotate(90deg); }
.w-spot-arch-h .w-spot-arrow { width: 1.6em; height: auto; }
.w-spot-arch-h .w-spot-arrow span { transform: none; }

/* ---------- 動作＋總結 ---------- */
.w-spot-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.w-spot-wide .w-spot-actions { justify-content: flex-end; }
.w-spot-done {
  position: relative; display: flex; align-items: flex-start; gap: .8em; padding: .85em 1em; border: 2px solid var(--c-gold);
  border-radius: var(--radius); background: var(--c-gold-soft); color: #7a5600;
}
.w-spot-done:focus { outline: none; }
.w-spot-done:focus-visible { outline: .1875rem solid var(--c-blue); outline-offset: .125rem; }
.w-spot-done.is-answer { border-color: var(--c-blue); background: var(--c-blue-soft); color: var(--c-blue-dark); }
.w-spot-done-icon { flex: none; width: 2.6em; height: 2.6em; }
.w-spot-done-emoji { flex: none; font-size: 1.9em; line-height: 1.2; }
.w-spot-done-text { display: flex; flex-direction: column; gap: .2em; min-width: 0; line-height: 1.55; }
.w-spot-done-title { font-size: 1.08em; }
.w-spot-done-sub { font-size: .9em; font-weight: 700; }
.w-spot-done-md { color: var(--c-text); font-size: .95em; overflow-wrap: anywhere; }
.w-spot-done-md p, .w-spot-done-md ul, .w-spot-done-md ol, .w-spot-done-md blockquote { margin: .35em 0 0; }
.w-spot-done-md ul, .w-spot-done-md ol { padding-left: 1.3em; }
.w-spot-done.is-pop { animation: w-spot-pop .5s var(--ease); }
@keyframes w-spot-pop { 0% { transform: scale(.94); opacity: .2; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- 窄版（手機） ---------- */
.w-spot-narrow .w-spot-titlebar { padding: .4em .65em; }
.w-spot-narrow .w-spot-stack { max-width: 84%; }
.w-spot-narrow .w-spot--chat .w-spot-body { padding: .75em .5em .85em; }
.w-spot-narrow .w-spot-avatar { width: 2em; height: 2em; font-size: .85em; }
.w-spot-narrow .w-spot--doc .w-spot-body,
.w-spot-narrow .w-spot--prompt .w-spot-body,
.w-spot-narrow .w-spot--arch .w-spot-body { padding: .55em; }
.w-spot-narrow .w-spot-ln { min-width: 2.6em; padding: 0 .6em 0 .3em; }
.w-spot-narrow .w-spot-axis { font-size: .72em; }

@media (prefers-reduced-motion: reduce) {
  .w-spot-line.is-shake, .w-spot-why, .w-spot-hint, .w-spot-done.is-pop { animation: none; }
  .w-spot-dots i { transition: none; }
}