/* 互动实验室共用：页头、课程任务卡、工具面板、A/B 两版对比。
   与课件同一套方法：固定一处，只改一处，做两版，比较后说一句。 */

.lab-head { padding: var(--s4) var(--s4) var(--s3); border-bottom: var(--line-strong); }
.lab-head .kicker { font-size: .8rem; letter-spacing: .14em; }
.lab-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.3; margin-top: .5rem; }
.lab-head .lead { margin-top: .7rem; color: var(--ink-2); max-width: min(40em, 100%); }
.lab-method { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.1rem; padding: 0; list-style: none; }
.lab-method li { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; padding: .3rem .7rem .3rem .35rem; border: var(--line-hair); background: var(--paper-raise); }
.lab-method b { display: inline-grid; place-items: center; width: 1.4rem; height: 1.4rem; background: var(--ink); color: var(--paper); font: 700 .75rem var(--sans); }

/* 课程练习选择 */
.lab-tasks { display: flex; gap: .4rem; flex-wrap: wrap; padding: var(--s3) var(--s4) 0; }
.lab-tasks button { border: var(--line-thin); background: transparent; color: var(--ink); font: 600 .9rem var(--sans); padding: .55rem .9rem; min-height: 2.75rem; cursor: pointer;
  transition: background var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), transform var(--t-1) var(--ease-out); }
.lab-tasks button small { display: block; font-weight: 500; font-size: .72rem; color: var(--muted); letter-spacing: .04em; }
.lab-tasks button:hover { background: var(--paper-raise); }
.lab-tasks button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.lab-tasks button[aria-pressed="true"] small { color: #c9c5bb; }

.lab-wrap { max-width: var(--max-page); margin: 0 auto; padding: var(--s3) var(--s3) var(--s5); display: grid; grid-template-columns: 17.5rem minmax(0, 1fr); gap: var(--s4); align-items: start; }
.panel > section, .panel > .task-card { margin-bottom: var(--s2); }
.panel > section { border: var(--line-thin); padding: 1rem 1.1rem; background: var(--paper); }
.panel h2 { font-size: .78rem; letter-spacing: .22em; color: var(--muted); font-weight: 700; margin-bottom: .8rem; }
.tool-row, .act-row, .color-row { display: flex; gap: .45rem; flex-wrap: wrap; }
.tool-btn, .act-btn { background: none; border: 2px solid var(--ink); color: var(--ink); font: 700 .9rem var(--sans); padding: .5rem .7rem; min-height: 2.75rem; cursor: pointer; flex: 1 1 auto;
  transition: background var(--t-2) var(--ease-out), color var(--t-2) var(--ease-out), transform var(--t-1) var(--ease-out); }
.tool-btn { flex: 1 1 calc(50% - .45rem); }
.tool-btn:hover, .act-btn:hover { background: var(--yellow); }
.tool-btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.tool-btn:disabled, .act-btn:disabled { opacity: .35; cursor: not-allowed; background: none; }
.act-btn.primary { background: var(--ink); color: var(--paper); }
.act-btn.primary:hover { background: var(--red); border-color: var(--red); }
.panel label { font-size: .85rem; font-weight: 700; display: block; }
.panel input[type="range"] { width: 100%; accent-color: var(--red); }
.panel .note { font-size: .82rem; color: var(--muted); margin-top: .6rem; line-height: 1.7; }
.field { margin-top: .75rem; }
.field:first-child { margin-top: 0; }
.field .row { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.field output { font: 600 .82rem var(--sans); color: var(--muted); }
.check-row { display: flex; align-items: center; gap: .55rem; margin-top: .7rem; font-size: .9rem; }
.check-row label { display: inline; font-weight: 600; }

/* 任务卡：用课件原话写清固定什么、可以改什么 */
.task-card { border: var(--line-strong); background: var(--paper-raise); padding: 1.1rem 1.15rem 1rem; }
.task-card .tc-k { font-size: .75rem; letter-spacing: .18em; color: var(--red); font-weight: 700; }
.task-card h3 { margin-top: .35rem; font-size: 1.12rem; line-height: 1.45; }
.task-card .tc-why { margin-top: .4rem; font-size: .9rem; color: var(--ink-2); line-height: 1.75; }
.task-card ol { margin: .6rem 0 0 1.2em; font-size: .88rem; line-height: 1.7; }
.task-card ol li { margin-top: .25rem; }
.task-card ol b { margin-right: .3rem; }
.task-card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .3rem .7rem; margin-top: .75rem; padding-top: .7rem; border-top: var(--line-hair); font-size: .85rem; line-height: 1.65; }
.task-card dt { font-weight: 700; color: var(--red); white-space: nowrap; }
.task-card dd { color: var(--ink-2); }
.task-card .tc-src { margin-top: .6rem; font-size: .75rem; color: var(--muted); }

.stage-col { min-width: 0; }
.stage-frame { border: var(--line-strong); background: #fff; max-width: 42rem; position: relative; }
.hint { margin-top: .8rem; font-size: .85rem; color: var(--muted); }
.draft-status { margin-top: .4rem; font-size: .8rem; color: var(--muted); }

/* A/B 两版对比 */
.ab { margin-top: var(--s3); border: var(--line-thin); background: var(--paper-raise); max-width: 42rem; }
.ab-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; padding: .8rem 1rem; border-bottom: var(--line-hair); }
.ab-head h2 { font-size: .95rem; }
.ab-head p { font-size: .8rem; color: var(--muted); }
.ab-slots { display: grid; grid-template-columns: repeat(var(--n, 2), minmax(0, 1fr)); gap: .8rem; padding: 1rem; }
.ab-slot { display: flex; flex-direction: column; gap: .45rem; }
.ab-slot .ab-name { font: 700 .85rem var(--sans); display: flex; justify-content: space-between; gap: .4rem; }
.ab-slot .ab-name span { color: var(--muted); font-weight: 500; font-size: .75rem; }
.ab-thumb { position: relative; border: 1px dashed var(--hairline); background: var(--paper); min-height: 6.5rem; display: grid; place-items: center; overflow: hidden; }
.ab-thumb img { width: 100%; height: auto; display: block; }
.ab-thumb .empty { font-size: .78rem; color: var(--muted); padding: .6rem; text-align: center; }
.ab-thumb.filled { border-style: solid; border-color: var(--ink); }
.ab-slot .act-row .act-btn { font-size: .82rem; padding: .35rem .5rem; min-height: 2.5rem; border-width: 1px; }
.ab-note { padding: 0 1rem 1rem; }
.ab-note label { font: 700 .85rem var(--sans); display: block; }
.ab-note textarea { width: 100%; min-height: 4.2rem; margin-top: .4rem; padding: .6rem .7rem; border: var(--line-hair); background: var(--paper); font: .92rem/1.7 var(--sans); resize: vertical; }
.ab-note .ab-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; align-items: center; }
.ab-note .ab-actions span { font-size: .8rem; color: var(--muted); }
.ab-flash { animation: abflash var(--t-3) var(--ease-out); }
@keyframes abflash { from { box-shadow: 0 0 0 3px var(--red); } to { box-shadow: 0 0 0 0 transparent; } }

/* 导出预览（微信等无法自动下载时长按保存） */
.export-sheet { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; z-index: 300; background: rgba(17,17,17,.92); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; gap: 1rem; }
.export-sheet img { max-height: 72vh; max-width: 100%; background: #fff; }
.export-sheet p { color: #f7f5f0; font-size: .9rem; text-align: center; }
.export-sheet button { border: 2px solid #f7f5f0; background: none; color: #f7f5f0; padding: .6rem 2rem; font-weight: 700; letter-spacing: .2em; cursor: pointer; }

@media (max-width: 900px) {
  .lab-wrap { grid-template-columns: minmax(0, 1fr); }
  /* 手机：任务卡在前，画布紧跟，工具在画布下面 */
  .lab-wrap > .panel { display: contents; }
  .lab-wrap > .panel > .task-card, .lab-wrap > .panel > .prompt-card { order: 0; margin-bottom: 0; }
  .lab-wrap > .stage-col, .lab-wrap > .page-col { order: 1; }
  .lab-wrap > .panel > section { order: 2; margin-bottom: 0; }
  .lab-head { padding: var(--s3); }
  .lab-tasks { padding: var(--s2) var(--s3) 0; }
  .ab-slots { gap: .5rem; padding: .8rem; }
}