/* ==========================================================================
   教学小部件（js/ui/widgets.js、blocks.js 用到的样式）
   ========================================================================== */

/* ---------- 矩阵里可以直接改的格子 ---------- */
.mx-c .mx-in {
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: inherit;
  text-align: center;
  font: inherit;
  letter-spacing: inherit;
  cursor: text;
  user-select: text;
  -webkit-user-select: text;
}
.mx-c .mx-in:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: var(--surface);
  color: var(--text);
}
.mx.editable .mx-c {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 35%, transparent);
}
.mx.editable .mx-c:hover {
  box-shadow: inset 0 0 0 1.5px var(--tone);
}

/* ---------- ScoreBars：一行权重画成横条 ---------- */
.sbars {
  display: grid;
  gap: 6px;
  padding-bottom: 6px;
}
.sbars-t {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-2);
}
.sbar {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 48px;
  align-items: center;
  gap: 8px;
}
.sbar-l {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
.sbar-track {
  position: relative;
  height: 16px;
  border-radius: 99px;
  background: var(--surface-2);
  overflow: hidden;
}
.sbar-fill {
  position: absolute;
  inset: 0 auto 0 0;
  min-width: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--brand), var(--brand-2));
  transition: width 0.3s ease;
}
.sbar-v {
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.sbar.is-masked .sbar-track {
  background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 4px, var(--surface-3) 4px, var(--surface-3) 8px);
}
.sbar.is-masked .sbar-v {
  color: var(--muted);
  font-size: 12px;
}

/* ---------- VectorPlot：两个箭头的点积 ---------- */
.vp {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 22px;
  align-items: start;
}
.vp-plot {
  min-width: 0;
  max-width: 100%;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
}
.vp-plot svg {
  display: block;
  max-width: 100%;
}
.chart-svg text.vp-name {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 800;
}
.vp-side {
  min-width: 0;
  display: grid;
  gap: 4px;
}
.vp-sliders {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 18px;
}
/* .field 默认有 min-width: 150px；两列并排时，320 宽的手机放不下（2×150 + 间距 > 292），
   所以在这两组滑块里取消，让两列各自缩一点 */
.vp-sliders .field,
.slab-sliders .field {
  min-width: 0;
}
.vp-side .calc {
  margin-top: 8px;
}
.vp-note {
  margin: 6px 0 0;
}
@media (max-width: 760px) {
  .vp {
    grid-template-columns: minmax(0, 1fr);
  }
  .vp-plot {
    justify-self: stretch;
  }
  .vp-plot svg {
    margin: 0 auto;
  }
}

/* ---------- ShapeLab / ShapeBox：形状实验台 ---------- */
.slab {
  display: grid;
  gap: 14px;
}
.slab > .lab-bar {
  margin-bottom: 0;
}
.slab-sliders {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px 18px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.slab-eq {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  padding: 20px 14px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
}
.slab-piece {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.slab-name {
  font-weight: 800;
  color: var(--text-2);
}
.slab-dim {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-2);
  white-space: nowrap;
}
.slab-dim .inner {
  padding: 0 6px;
  border-radius: 6px;
  font-weight: 800;
}
.slab-dim .inner.ok {
  background: var(--good-soft);
  color: var(--good);
}
.slab-dim .inner.bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.slab-op {
  font-size: 28px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1;
  user-select: none;
}
.sbox {
  --tone-bg: color-mix(in srgb, var(--text-2) 40%, transparent);
  display: grid;
  grid-template-columns: repeat(var(--c), minmax(0, 1fr));
  grid-template-rows: repeat(var(--r), minmax(0, 1fr));
  gap: 2px;
  width: calc(var(--c) * 17px);
  height: calc(var(--r) * 17px);
  padding: 3px;
  border-radius: 6px;
  border-left: 2px solid var(--tone-bg);
  border-right: 2px solid var(--tone-bg);
}
.sbox i {
  border-radius: 3px;
  background: var(--tone-bg);
}
.sbox.tone-q {
  --tone-bg: color-mix(in srgb, var(--q) 70%, transparent);
}
.sbox.tone-k {
  --tone-bg: color-mix(in srgb, var(--k) 75%, transparent);
}
.sbox.tone-v {
  --tone-bg: color-mix(in srgb, var(--v) 70%, transparent);
}
.slab-no {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border: 2px dashed var(--bad);
  border-radius: 14px;
  color: var(--bad);
}
.slab-no svg {
  width: 30px;
  height: 30px;
}
.slab-verdict {
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  font-size: 15px;
}
.slab-verdict.ok {
  background: var(--good-soft);
}
.slab-verdict.bad {
  background: var(--bad-soft);
}
.slab-verdict.ok b:first-child {
  color: var(--good);
}
.slab-verdict.bad b:first-child {
  color: var(--bad);
}
.slab-verdict svg {
  width: 17px;
  height: 17px;
  margin-right: 4px;
  vertical-align: -3px;
}
.slab-swap,
.slab-note {
  margin: 0;
}
.slab-note {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  font-size: 14.5px;
}
@media (max-width: 760px) {
  .slab-sliders {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 520px) {
  .slab-eq {
    gap: 8px 10px;
    padding: 16px 8px;
  }
  .slab-op {
    font-size: 22px;
  }
}

/* ---------- RowMix：行视角 ---------- */
.rowmix > .mx-eq {
  margin-bottom: 4px;
}
.rm-vec {
  display: inline-flex;
  gap: 2px;
  padding: 0 6px;
  border-radius: 7px;
  background: var(--surface);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.rm-vec i {
  min-width: 2.3em;
  font-style: normal;
  text-align: center;
}
.rm-w {
  min-width: 3.2em;
  text-align: center;
}
.rm-from {
  display: inline-flex;
  align-items: center;
  min-width: 3.2em;
  justify-content: center;
  font-family: var(--font-sans);
}
.rm-line.is-zero {
  opacity: 0.4;
}
/* “= 结果行”粘在一起：窄屏折行时整段落到下一行，而不是把等号孤零零留在行尾 */
.rm-out {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rm-sum {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border-strong);
}
.rm-sum .rm-vec {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-ink);
  font-weight: 800;
}

/* ---------- 其他 ---------- */
.playground > .lab-bar {
  margin-bottom: 14px;
}
.headsplit > .lab-bar {
  margin-bottom: 14px;
}
.headsplit-note {
  margin: 12px 0 0;
}
.gradcheck > .lab-bar {
  margin-bottom: 14px;
}
.sderive > .lab-bar {
  margin-bottom: 14px;
}

/* ---------- ShapeFlow：矩阵 → 运算 → 矩阵 ---------- */
.sflow-wrap {
  padding: 14px 16px 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  overflow-x: auto;
}
.sflow {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: max-content;
  padding: 4px 2px 10px;
}
.sflow-node {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 64px;
  padding: 8px 12px;
  border-radius: 12px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface-2);
}
.sflow-name {
  font-weight: 800;
}
.sflow-shape {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
}
.sflow-node.tone-q {
  border-color: var(--q);
}
.sflow-node.tone-k {
  border-color: var(--k);
}
.sflow-node.tone-v {
  border-color: var(--v);
}
.sflow-node.tone-brand {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.sflow-op {
  display: grid;
  justify-items: center;
  gap: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  white-space: nowrap;
}
.sflow-op svg {
  width: 18px;
  height: 18px;
}
.sflow-wrap > .small {
  padding-top: 2px;
}

/* ---------- ShapeDerive：只靠形状猜公式 ---------- */
.sd-list {
  display: grid;
  gap: 8px;
}
.sd-row {
  display: grid;
  grid-template-columns: minmax(96px, auto) minmax(120px, auto) minmax(0, 1fr);
  align-items: center;
  gap: 4px 16px;
  padding: 8px 16px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.sd-row.is-hit {
  border-color: var(--good);
  background: var(--good-soft);
}
.sd-expr {
  font-size: 1.05em;
}
.sd-calc {
  color: var(--text-2);
}
.sd-verdict {
  font-size: 14px;
  color: var(--bad);
}
.sd-row.is-hit .sd-verdict {
  color: var(--good);
  font-weight: 700;
}
.sd-verdict svg {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: -3px;
}
@media (max-width: 640px) {
  .sd-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 8px 14px;
  }
}

/* ---------- 点积那一章的“对应相乘”格子 ---------- */
.dg {
  display: grid;
  grid-template-columns: 64px repeat(var(--n), minmax(0, 1fr)) 56px;
  gap: 4px;
  align-items: center;
}
.dg-h {
  text-align: center;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.dg-l {
  display: flex;
  justify-content: flex-end;
  padding-right: 4px;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-2);
  white-space: nowrap;
}
.dg-c {
  text-align: center;
  padding: 2px 0;
  border-radius: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
}
.dg-c.is-prod {
  background: var(--brand-soft);
  border-color: transparent;
  color: var(--brand-ink);
  font-weight: 700;
}
.dg-c.is-sum {
  background: var(--brand);
  border-color: transparent;
  color: #fff;
  font-weight: 800;
}
@media (max-width: 520px) {
  .dg {
    grid-template-columns: 54px repeat(var(--n), minmax(0, 1fr)) 44px;
    gap: 3px;
  }
  .dg-h {
    font-size: 11px;
  }
}