/* 動手玩：位元開關（bits）— 見 src/js/widgets/bits.js
 * class 一律前綴 .w-bits；顏色／圓角用 base.css 的 CSS 變數；尺寸用 em／rem（講師模式／流體字級會整體放大）。
 * 版型切換：JS 依「元件寬 ÷ 字級」在根元素加 .w-bits-narrow（<26em）／.w-bits-mid（26～40em）／.w-bits-wide（≥40em）
 * ／.w-bits-tiny（<20em），不用 container query。模式 class：.w-bits-b4／.w-bits-b8／.w-bits-b16／.w-bits-color。 */

.w-bits { min-width: 0; }
.w-bits-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .85em; min-width: 0; }
.w-bits-wrap > .w-bits-done-slot:empty { display: none; }

/* ---------- 任務 ---------- */
.w-bits-tasks { min-width: 0; }
.w-bits-tasks-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .3em .8em; margin: 0 0 .5em; }
.w-bits-tasks-title { font-size: .82em; font-weight: 800; letter-spacing: .04em; color: var(--c-muted); }
.w-bits-progress {
  padding: .1em .75em; border-radius: 999px; background: var(--c-surface-2); color: var(--c-muted);
  font-size: .8em; font-weight: 800; white-space: nowrap;
}
.w-bits-finished .w-bits-progress { background: var(--c-primary-soft); color: var(--c-primary-dark); }
.w-bits-task-list { display: flex; flex-wrap: wrap; gap: .45em; margin: 0; padding: 0; list-style: none; }
.w-bits-task {
  display: inline-flex; align-items: center; gap: .45em; min-width: 0; max-width: 100%; padding: .25em .85em .25em .3em;
  border: .125rem solid var(--c-line); border-radius: 999px; background: var(--c-surface-2); color: var(--c-muted);
  font-size: .88em; font-weight: 700; line-height: 1.45;
}
.w-bits-task-text { min-width: 0; overflow-wrap: anywhere; }
.w-bits-task-dot {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.65em; height: 1.65em;
  border: .125rem solid var(--c-line-strong); border-radius: 50%; background: var(--c-surface); font-size: .85em; font-weight: 800; line-height: 1;
}
.w-bits-task.is-current { border-color: var(--c-blue); background: var(--c-blue-soft); color: var(--c-blue-dark); }
.w-bits-task.is-current .w-bits-task-dot { border-color: var(--c-blue); color: var(--c-blue-dark); }
.w-bits-task.is-done { border-color: var(--c-primary-soft); background: var(--c-primary-soft); color: var(--c-primary-dark); }
.w-bits-task.is-done .w-bits-task-dot { border-color: var(--c-primary); background: var(--c-primary); color: #fff; }
.w-bits-task.is-pop .w-bits-task-dot { animation: w-bits-flip .4s var(--ease); }
/* 窄版：一項一列（膠囊換行會很怪，改成圓角卡） */
.w-bits-narrow .w-bits-task-list { flex-direction: column; align-items: stretch; gap: .35em; }
.w-bits-narrow .w-bits-task { border-radius: .85em; }

/* ---------- 開關面板 ---------- */
.w-bits-board {
  --bit-max: 3.9em; --bit-gap: .4em; --nib-gap: .95em; --nibs: 2;
  min-width: 0; padding: .7em .8em .65em; border: .125rem solid var(--c-line); border-radius: var(--radius);
  background: radial-gradient(120% 100% at 50% 0%, #fffdf4 0%, var(--c-surface-2) 100%);
}
.w-bits-b4 .w-bits-board { --bit-max: 4.6em; --nibs: 1; }
.w-bits-wide .w-bits-board { --bit-max: 4.3em; }
.w-bits-wide.w-bits-b4 .w-bits-board { --bit-max: 4.9em; }
.w-bits-legend { margin: 0 0 .7em; color: var(--c-muted); font-size: .8em; font-weight: 700; line-height: 1.5; text-align: center; }
.w-bits-legend-on { padding: 0 .35em; border-radius: .35em; background: var(--c-gold); color: #5a4100; }
.w-bits-legend-off { padding: 0 .35em; border-radius: .35em; background: #e9ecef; color: var(--c-muted); }
/* 每排（含標題）跟開關一樣寬、置中：色彩模式的數值才會貼在開關右上方，不會跑到面板最右邊 */
.w-bits-line {
  min-width: 0; margin: 0 auto;
  max-width: calc(var(--nibs) * (4 * var(--bit-max) + 3 * var(--bit-gap)) + (var(--nibs) - 1) * var(--nib-gap));
}
.w-bits-line + .w-bits-line { margin-top: .75em; padding-top: .7em; border-top: .125rem dashed var(--c-line); }
.w-bits-line-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: .3em .55em; margin: 0 0 .5em;
  font-size: .85em; font-weight: 800; line-height: 1.35;
}
.w-bits-row-cap { color: var(--c-text); }
.w-bits-row-sub { color: var(--c-muted); font-size: .9em; font-weight: 700; }
.w-bits-row { display: flex; justify-content: center; gap: var(--nib-gap); min-width: 0; }
.w-bits-nib { flex: 1 1 0; min-width: 0; max-width: calc(4 * var(--bit-max) + 3 * var(--bit-gap)); }
.w-bits-keys { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bit-gap); }

/* 每個開關：上面是位值名牌，下面是會亮的燈窗（開＝亮＝1、關＝暗＝0） */
.w-bits-bit {
  --on: var(--c-gold); --on-edge: var(--c-gold-dark); --on-ink: #5a4100; --glow: rgba(255, 197, 61, .6);
  appearance: none; -webkit-appearance: none; position: relative;
  display: flex; flex-direction: column; align-items: stretch; gap: .25em; width: 100%; min-width: 0; margin: 0;
  padding: .3em .25em .3em; border: .125rem solid var(--c-line-strong); border-radius: .8em; background: var(--c-surface);
  color: var(--c-muted); font: inherit; line-height: 1.15; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 .25em 0 var(--c-line-strong);
  transition: transform .08s, box-shadow .15s, border-color .15s;
}
.w-bits-place {
  display: block; min-width: 0; overflow: hidden; color: var(--c-muted); font-size: .74em; font-weight: 800;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em; text-align: center; white-space: nowrap;
}
.w-bits-place.is-long { font-size: .66em; }
.w-bits-place.is-xlong { font-size: .6em; letter-spacing: -.03em; }
.w-bits-wide .w-bits-place.is-long, .w-bits-wide .w-bits-place.is-xlong { font-size: .7em; letter-spacing: -.01em; }
.w-bits-lamp {
  display: flex; align-items: center; justify-content: center; min-height: 2.05em; border-radius: .55em;
  background: #e9ecef; transition: background-color .15s, box-shadow .15s;
}
.w-bits-digit { display: block; color: var(--c-muted); font-family: var(--mono); font-size: 1.5em; font-weight: 800; line-height: 1.1; }
/* 只在有滑鼠的裝置提示 hover：手機點完 hover 會黏住，關掉的開關會看起來像還亮著 */
@media (hover: hover) { .w-bits-bit:hover { border-color: var(--on-edge); } }
.w-bits-bit:active { transform: translateY(.25em); box-shadow: 0 0 0 var(--c-line-strong); }
.w-bits-bit.is-on { border-color: var(--on-edge); box-shadow: 0 .25em 0 var(--on-edge); }
.w-bits-bit.is-on:active { box-shadow: 0 0 0 var(--on-edge); }
.w-bits-bit.is-on .w-bits-place { color: var(--c-text); }
.w-bits-bit.is-on .w-bits-lamp { background: var(--on); box-shadow: 0 0 .9em .15em var(--glow), inset 0 -.18em 0 rgba(0, 0, 0, .08); }
.w-bits-bit.is-on .w-bits-digit { color: var(--on-ink); }
.w-bits-wide .w-bits-lamp { min-height: 2.35em; }
.w-bits-wide .w-bits-digit { font-size: 1.7em; }
.w-bits-bit.is-pop .w-bits-digit { animation: w-bits-flip .32s var(--ease); }
@keyframes w-bits-flip { 0% { transform: scale(.5); } 60% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* 滿版的框（出題、完成橫幅）只放大到原尺寸，不回彈超出，免得窄螢幕瞬間溢出 */
@keyframes w-bits-pop { from { transform: scale(.94); opacity: .3; } to { transform: none; opacity: 1; } }

/* 每 4 個位元下方的括號：直接標出它對應哪一個 hex 字 */
.w-bits-nib { --nib: #c3b0f7; --nib-ink: var(--c-purple-dark); --nib-soft: var(--c-purple-soft); }
.w-bits-nib.is-b { --nib: #96d0f0; --nib-ink: var(--c-blue-dark); --nib-soft: var(--c-blue-soft); }
.w-bits-brace { display: flex; align-items: flex-start; gap: .3em; margin: .6em .2em 0; }
.w-bits-brace::before, .w-bits-brace::after {
  content: ''; flex: 1 1 0; min-width: .3em; height: .68em; border: .14em solid var(--nib); border-top: 0;
}
.w-bits-brace::before { border-right: 0; border-bottom-left-radius: .45em; }
.w-bits-brace::after { border-left: 0; border-bottom-right-radius: .45em; }
.w-bits-nib-hex {
  flex: none; min-width: 1.75em; padding: 0 .4em; border-radius: .5em; background: var(--nib-soft); color: var(--nib-ink);
  font-family: var(--mono); font-size: .88em; font-weight: 800; line-height: 1.55; text-align: center;
}

/* ---------- 色彩模式：三排 R／G／B ---------- */
.w-bits-line--r { --ch: var(--c-red); --ch-dark: var(--c-red-dark); --ch-soft: var(--c-red-soft); --ch-line: #f5a8a8; --ch-glow: rgba(239, 68, 68, .45); --ch-on: #ef4444; }
.w-bits-line--g { --ch: var(--c-primary); --ch-dark: var(--c-primary-dark); --ch-soft: var(--c-primary-soft); --ch-line: #8fdcb7; --ch-glow: rgba(34, 181, 115, .45); --ch-on: #1e9e63; }
.w-bits-line--b { --ch: var(--c-blue); --ch-dark: var(--c-blue-dark); --ch-soft: var(--c-blue-soft); --ch-line: #96d0f0; --ch-glow: rgba(31, 157, 224, .45); --ch-on: #1a8fd0; }
.w-bits-color .w-bits-bit { --on: var(--ch-on); --on-edge: var(--ch-dark); --on-ink: #fff; --glow: var(--ch-glow); }
.w-bits-color .w-bits-nib { --nib: var(--ch-line); --nib-ink: var(--ch-dark); --nib-soft: var(--ch-soft); }
.w-bits-ch-badge {
  flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.8em; height: 1.8em; border-radius: 50%;
  background: var(--ch); color: #fff; font-weight: 800; line-height: 1;
}
.w-bits-ch-name { color: var(--ch-dark); }
.w-bits-ch-val { display: inline-flex; align-items: center; gap: .35em; margin-left: auto; font-family: var(--mono); }
.w-bits-ch-dec { min-width: 2.6em; padding: 0 .45em; border: .125rem solid var(--c-line); border-radius: .45em; background: var(--c-surface); color: var(--c-text); text-align: right; }
.w-bits-ch-hex { padding: .1em .5em; border-radius: .45em; background: var(--ch-soft); color: var(--ch-dark); }

/* ---------- 輔助按鈕＋隨機出題 ---------- */
.w-bits-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5em .6em; min-width: 0; }
.w-bits-quiz {
  display: inline-flex; align-items: center; gap: .45em; min-width: 0; max-width: 100%; padding: .25em .85em;
  border: .125rem dashed var(--c-line-strong); border-radius: 999px; color: var(--c-muted);
  font-size: .86em; font-weight: 700; line-height: 1.45;
}
.w-bits-quiz-text { min-width: 0; overflow-wrap: anywhere; }
.w-bits-quiz.is-active { border-color: var(--c-blue); background: var(--c-blue-soft); color: var(--c-blue-dark); font-size: .95em; }
.w-bits-quiz.is-solved { border-style: solid; border-color: var(--c-primary); background: var(--c-primary-soft); color: var(--c-primary-dark); }
.w-bits-quiz strong { font-family: var(--mono); font-size: 1.12em; }
.w-bits-quiz-icon { flex: none; line-height: 1; }
.w-bits-quiz-ans { white-space: nowrap; }
.w-bits-quiz.is-pop { animation: w-bits-pop .4s var(--ease); }
.w-bits-narrow .w-bits-quiz { flex-basis: 100%; justify-content: center; border-radius: .85em; text-align: center; }

/* ---------- 算式 ---------- */
.w-bits-formula, .w-bits-formula-line {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: .25em .6em; min-width: 0; margin: 0; line-height: 1.6;
}
.w-bits-formula { padding: .5em .85em; border-radius: var(--radius-sm); background: var(--c-surface-2); }
.w-bits-formula--color { display: grid; gap: .3em; }
.w-bits-formula-label {
  flex: none; padding: .05em .55em; border-radius: .45em; background: var(--c-surface); color: var(--c-muted);
  font-size: .76em; font-weight: 800; letter-spacing: .03em;
}
.w-bits-formula-line--r .w-bits-formula-label { color: var(--c-red-dark); }
.w-bits-formula-line--g .w-bits-formula-label { color: var(--c-primary-dark); }
.w-bits-formula-line--b .w-bits-formula-label { color: var(--c-blue-dark); }
.w-bits-sum { min-width: 0; font-family: var(--mono); font-weight: 700; overflow-wrap: anywhere; }
.w-bits-term { padding: 0 .2em; border-radius: .3em; background: var(--c-gold-soft); color: #7a5600; }
.w-bits-total { color: var(--c-primary-dark); font-size: 1.08em; }

/* ---------- 數值區 ----------
 * 窄版：一列一項（標籤左、數值右）；中寬：2 欄卡片；寬版：一排並列（欄寬由 JS 給 --w-bits-cols） */
.w-bits-out { display: grid; grid-template-columns: minmax(0, 1fr); gap: .45em; min-width: 0; }
.w-bits-card {
  --acc: var(--c-line-strong);
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: .3em .8em; min-width: 0;
  padding: .45em .8em .45em 1em; overflow: hidden; border: .125rem solid var(--c-line); border-radius: var(--radius-sm); background: var(--c-surface);
}
.w-bits-card::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: .3em; background: var(--acc); }
.w-bits-card--dec { --acc: var(--c-primary); }
.w-bits-card--bin { --acc: #9aa1a8; }
.w-bits-card--hex { --acc: var(--c-purple); }
.w-bits-card--char { --acc: var(--c-orange); }
.w-bits-card-label { flex: none; color: var(--c-muted); font-size: .8em; font-weight: 800; letter-spacing: .03em; }
.w-bits-card-body { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; text-align: right; }
.w-bits-val { font-family: var(--mono); font-size: 1.2em; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.w-bits-card-note, .w-bits-char-sub { color: var(--c-muted); font-size: .72em; font-weight: 700; line-height: 1.4; }
.w-bits-char-sub:empty { display: none; }
.w-bits-dec { color: var(--c-primary-dark); }
.w-bits-bin { color: var(--c-text); }
.w-bits-grp { display: inline-block; white-space: nowrap; }
.w-bits-grp.is-a, .w-bits-hx.is-a { color: var(--c-purple-dark); }
.w-bits-grp.is-b, .w-bits-hx.is-b { color: var(--c-blue-dark); }
.w-bits-hx.is-r { color: var(--c-red-dark); }
.w-bits-hx.is-g { color: var(--c-primary-dark); }
.w-bits-hex-pre { color: var(--c-muted); }
.w-bits-char { color: var(--c-orange-dark); }
.w-bits-mid .w-bits-out { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; }
.w-bits-mid.w-bits-b16 .w-bits-card--bin { grid-column: 1 / -1; }
.w-bits-wide .w-bits-out { grid-template-columns: var(--w-bits-cols, repeat(4, minmax(0, 1fr))); }
.w-bits-mid .w-bits-card, .w-bits-wide .w-bits-card {
  flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .15em; padding: .55em .85em .65em 1.05em;
}
.w-bits-mid .w-bits-card-body, .w-bits-wide .w-bits-card-body { align-items: flex-start; text-align: left; }
.w-bits-mid .w-bits-val, .w-bits-wide .w-bits-val { font-size: 1.45em; }
.w-bits-wide .w-bits-dec, .w-bits-wide .w-bits-char { font-size: 1.7em; }
/* 看不到的字（控制字元、空白、非 ASCII）用說明文字，字小一點 */
.w-bits .w-bits-char.is-ctrl, .w-bits .w-bits-char.is-space, .w-bits .w-bits-char.is-none {
  color: var(--c-muted); font-family: var(--font); font-size: 1em; line-height: 1.5;
}

/* 色彩模式：色塊＋色碼＋文字說明 */
.w-bits-out--color { gap: .7em; }
.w-bits-swatch {
  display: flex; align-items: flex-end; min-height: 5.25em; padding: .55em .8em; border: .125rem solid var(--c-line-strong);
  border-radius: var(--radius); background: #000; color: #fff; transition: background-color .2s;
}
.w-bits-swatch.is-dark-text { color: var(--c-text); }
.w-bits-swatch-text { font-family: var(--mono); font-size: 1.1em; font-weight: 800; }
.w-bits-color-info { display: grid; align-content: center; gap: .3em; min-width: 0; }
.w-bits-color-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15em .7em; min-width: 0; }
.w-bits-color-row .w-bits-card-label { min-width: 3.6em; }
.w-bits-out--color .w-bits-hex { font-size: 1.5em; }
.w-bits-out--color .w-bits-dec { font-size: 1.1em; }
.w-bits-color-desc { margin: .15em 0 0; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.w-bits-mid .w-bits-out--color, .w-bits-wide .w-bits-out--color { grid-template-columns: minmax(8em, 13em) minmax(0, 1fr); align-items: stretch; }

/* ---------- 進度訊息、完成、小知識 ---------- */
.w-bits-status {
  margin: 0; padding: .5em .85em; border-radius: var(--radius-sm); background: var(--c-blue-soft); color: var(--c-blue-dark);
  font-size: .9em; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere;
}
.w-bits-status.is-ok { background: var(--c-primary-soft); color: var(--c-primary-dark); }
/* 完成後畫面上改由完成橫幅說明，這行只留給螢幕報讀（同 .sr-only） */
.w-bits-status.is-done { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.w-bits-status:empty { display: none; }
.w-bits-done {
  display: flex; align-items: flex-start; gap: .8em; padding: .85em 1em; border: .125rem solid var(--c-gold);
  border-radius: var(--radius); background: var(--c-gold-soft); color: #7a5600;
}
.w-bits-done-icon { flex: none; width: 2.6em; height: 2.6em; }
.w-bits-done-text { display: flex; flex-direction: column; gap: .2em; min-width: 0; line-height: 1.55; }
.w-bits-done-title { font-size: 1.08em; }
.w-bits-done-sub { font-size: .9em; font-weight: 700; overflow-wrap: anywhere; }
.w-bits-done-md { color: var(--c-text); font-size: .95em; overflow-wrap: anywhere; }
.w-bits-done-md p { margin: .3em 0 0; }
.w-bits-done-more { margin-top: .15em; font-size: .85em; font-weight: 700; }
.w-bits-done.is-pop { animation: w-bits-pop .5s var(--ease); }
/* 標籤和內文排在同一段：窄螢幕換行時內文從最左邊接下去，不會擠成一條窄欄 */
.w-bits-tip {
  margin: 0; padding: .55em .85em; border-left: .3em solid var(--c-gold); border-radius: .35em var(--radius-sm) var(--radius-sm) .35em;
  background: var(--c-gold-soft); font-size: .92em; line-height: 1.6; overflow-wrap: break-word;
}
.w-bits-tip-label { margin-right: .6em; color: #8a6200; font-weight: 800; white-space: nowrap; }
.w-bits-tip code { white-space: nowrap; }

/* ---------- 窄版（手機） ---------- */
.w-bits-narrow .w-bits-board { --bit-gap: .2em; --nib-gap: .4em; padding: .6em .4em .5em; }
.w-bits-narrow .w-bits-bit { padding: .25em .1em; border-radius: .65em; }
.w-bits-narrow .w-bits-lamp { min-height: 1.8em; border-radius: .45em; }
.w-bits-narrow .w-bits-digit { font-size: 1.3em; }
.w-bits-tiny .w-bits-place { font-size: .66em; letter-spacing: -.02em; }
/* 16 位元在手機上：每個位元組拆成 2 排 × 4 個（一排就是一個 hex 字），位值才放得下 */
.w-bits-narrow.w-bits-b16 .w-bits-board { --bit-gap: .3em; --nibs: 1; }
.w-bits-narrow.w-bits-b16 .w-bits-row { flex-direction: column; align-items: center; gap: .55em; }
.w-bits-narrow.w-bits-b16 .w-bits-nib { flex: none; width: 100%; }
.w-bits-narrow.w-bits-b16 .w-bits-place { font-size: .74em; letter-spacing: -.01em; }
.w-bits-narrow .w-bits-formula { padding: .45em .65em; }

@media (prefers-reduced-motion: reduce) {
  .w-bits-bit, .w-bits-lamp, .w-bits-swatch { transition: none; }
  .w-bits-bit:active { transform: none; }
  .w-bits-bit.is-pop .w-bits-digit, .w-bits-task.is-pop .w-bits-task-dot, .w-bits-quiz.is-pop, .w-bits-done.is-pop { animation: none; }
}