/* =========================================================
   影子探究实验 · styles.css
   Design Tokens + 组件样式 + 响应式
   ========================================================= */

:root {
  /* Color */
  --brand-blue:      #2563EB;
  --brand-blue-deep: #1D4ED8;
  --brand-amber:     #F59E0B;
  --brand-amber-deep:#D97706;
  --success-green:   #10B981;
  --success-green-deep:#059669;
  --bg-page:         linear-gradient(180deg,#F8FAFC 0%,#EFF6FF 100%);
  --surface:         #FFFFFF;
  --surface-2:       #F1F5F9;
  --ink-900:         #0F172A;
  --ink-700:         #334155;
  --ink-500:         #64748B;
  --line:            #E2E8F0;

  /* Radius */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* Spacing */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;

  /* Shadow */
  --shadow-card: 0 6px 18px rgba(15,23,42,.06);
  --shadow-soft: 0 8px 24px rgba(15,23,42,.08);
  --shadow-focus: 0 0 0 3px rgba(37,99,235,.18);

  /* Font */
  --font-sans: "Microsoft YaHei","PingFang SC","Noto Sans SC",system-ui,-apple-system,sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--ink-900);
  background: var(--bg-page);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
}

h1,h2,h3 { margin: 0; color: var(--ink-900); }
p { margin: var(--sp-2) 0; }
small { color: var(--ink-500); }

/* ============ Header ============ */
header {
  text-align: center;
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
}
header h1 {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: .5px;
}
header .sub {
  margin-top: var(--sp-2);
  color: var(--ink-500);
  font-size: 15px;
}

/* ============ Step Nav ============ */
.step-nav {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.step-nav ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 320px;
}
.step-nav li {
  flex: 1;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--ink-500);
}
.step-nav li .dot {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--ink-500);
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  z-index: 2;
  transition: all .25s ease;
}
.step-nav li small {
  margin-left: 8px;
  font-size: 13px;
  white-space: nowrap;
  color: var(--ink-500);
}
/* 连接线 */
.step-nav li::after {
  content: "";
  height: 2px;
  flex: 1;
  background: var(--line);
  margin: 0 4px;
}
.step-nav li:last-child::after { display: none; }

/* active */
.step-nav li.active .dot {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(37,99,235,.15);
}
.step-nav li.active small { color: var(--brand-blue); font-weight: 600; }
/* done */
.step-nav li.done .dot {
  background: var(--success-green);
  border-color: var(--success-green);
  color: #fff;
}
.step-nav li.done::after {
  background: var(--success-green);
}
.step-nav li.done small { color: var(--success-green-deep); }

/* Nav buttons */
.nav-btns { display: flex; gap: var(--sp-2); }

/* ============ Buttons ============ */
.btn-primary, .btn-ghost {
  border: none;
  padding: 10px 20px;
  border-radius: var(--r-pill);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s ease;
  white-space: nowrap;
}
.btn-primary {
  background: var(--brand-blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,.25);
}
.btn-primary:hover:not(:disabled) {
  background: var(--brand-blue-deep);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(37,99,235,.35);
}
.btn-primary:disabled, .btn-ghost:disabled {
  opacity: .4;
  cursor: not-allowed;
  transform: none !important;
}
.btn-ghost {
  background: #fff;
  color: var(--brand-blue);
  border: 1.5px solid var(--brand-blue);
}
.btn-ghost:hover:not(:disabled) {
  background: #EFF6FF;
}
.big-btn { padding: 14px 22px; font-size: 15px; margin-top: 8px; }

/* ============ Main Layout ============ */
.layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-6);
  display: grid;
  grid-template-columns: minmax(420px, 1.2fr) 1fr;
  gap: var(--sp-5);
  align-items: start;
}

/* ============ Canvas Area ============ */
.canvas-area {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-card);
  position: sticky;
  top: var(--sp-4);
}
.scene-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: var(--sp-3);
}
.chip {
  flex: 1;
  padding: 9px 12px;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-700);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all .2s;
}
.chip:hover { background: #fff; }
.chip-active {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
  box-shadow: 0 4px 12px rgba(37,99,235,.2);
}
canvas#stage {
  display: block;
  width: 100%;
  height: auto;
  background: linear-gradient(180deg, #FBFDFF 0%, #F0F7FF 100%);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
}
.canvas-hint {
  text-align: center;
  color: var(--ink-500);
  font-size: 13px;
  margin: var(--sp-3) 0 0;
}

/* ============ Side Panels ============ */
.side { display: flex; flex-direction: column; gap: var(--sp-4); }
.step-panel {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-card);
  animation: fadeIn .35s ease;
}
.step-panel.hidden { display: none; }

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.card-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-900);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px dashed var(--line);
}

/* Accent cards */
.card {
  border-radius: var(--r-md);
  padding: var(--sp-5);
}
.card-accent-blue {
  background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1.5px solid #BFDBFE;
  text-align: center;
}
.card-accent-blue .big-q { font-size: 52px; margin-bottom: 4px; }
.card-accent-blue h2 {
  font-size: 24px;
  color: var(--brand-blue-deep);
  margin-bottom: var(--sp-3);
}
.card-accent-blue .think-line {
  color: var(--ink-700);
  font-weight: 600;
  margin-bottom: var(--sp-2);
}
.typewriter {
  background: rgba(255,255,255,.55);
  padding: var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--ink-700);
  font-style: italic;
  min-height: 44px;
}

.card-accent-amber {
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
  border: 1.5px solid #FDE68A;
}
.card-accent-amber h3 {
  color: #92400E;
  margin-bottom: var(--sp-3);
  font-size: 17px;
}

/* Step 1 street desc */
.street-desc p { font-size: 15px; }
.street-desc .hl {
  background: #FEF3C7;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border-left: 4px solid var(--brand-amber);
}
.ab-list {
  list-style: none;
  padding: var(--sp-3) 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ab-list li {
  background: var(--surface-2);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 14px;
}
.tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: 12px;
  font-weight: 600;
}
.tag-night { background: #1E293B; color: #F8FAFC; }
.tag-model { background: var(--brand-blue); color: #fff; }

/* guess list */
.guess-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.guess-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  font-size: 14px;
}
.guess-item.ok {
  background: #ECFDF5;
  border: 1.5px solid #A7F3D0;
}
.ok-check {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--success-green);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.guess-item.try {
  background: #F5F3FF;
  border: 1.5px solid #DDD6FE;
}
.try-ques {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: #8B5CF6;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.dim { color: var(--ink-500); }
.small { font-size: 13px; }

/* Controls / Sliders */
.hint-text {
  background: #EFF6FF;
  color: var(--brand-blue-deep);
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font-size: 14px;
}
.controls {
  margin-top: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.slider-row label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink-700);
}
.slider-row label b { color: var(--brand-blue); font-size: 16px; }
.slider {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--sp-3);
}
.slider output {
  min-width: 76px;
  text-align: center;
  padding: 4px 10px;
  background: var(--brand-blue);
  color: #fff;
  border-radius: var(--r-pill);
  font-weight: 700;
  font-size: 13px;
}
.slider input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-blue) var(--fill,33%), #CBD5E1 var(--fill,33%), #CBD5E1 100%);
  border-radius: 999px;
  outline: none;
  cursor: pointer;
}
.slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-amber);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(217,119,6,.45);
  cursor: pointer;
  transition: transform .15s ease;
}
.slider input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.12); }
.slider input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--brand-amber);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(217,119,6,.45);
  cursor: pointer;
}

/* Metrics */
.metrics {
  margin-top: var(--sp-5);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.metric {
  background: linear-gradient(180deg, #EFF6FF 0%, #DBEAFE 100%);
  border: 1.5px solid #BFDBFE;
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-2);
  text-align: center;
}
.metric-angle {
  background: linear-gradient(180deg, #FFF7ED 0%, #FED7AA 100%);
  border-color: #FDBA74;
}
.metric-shadow {
  background: linear-gradient(180deg, #ECFDF5 0%, #A7F3D0 100%);
  border-color: #6EE7B7;
}
.metric small {
  display: block;
  font-size: 11px;
  margin-bottom: 4px;
}
.metric-num {
  display: block;
  font-size: 26px;
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.15;
}
.metric em {
  display: block;
  font-size: 11px;
  font-style: normal;
  color: var(--ink-500);
  margin-top: 2px;
}
.metric-shadow .metric-num { color: var(--success-green-deep); }
.metric-angle .metric-num { color: var(--brand-amber-deep); }

/* Formula card */
.formula-card {
  margin-top: var(--sp-4);
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line);
}
.formula-card summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--brand-blue-deep);
  list-style: none;
  user-select: none;
  padding: 4px 0;
}
.formula-card summary::-webkit-details-marker { display: none; }
.formula-card summary::before {
  content: "▶";
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  color: var(--ink-500);
  transition: transform .2s;
}
.formula-card[open] summary::before { transform: rotate(90deg); }
.formula-title { margin: var(--sp-3) 0 var(--sp-2); color: var(--ink-700); }
.formula-box {
  background: #fff;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-sm);
  font-family: "Consolas","JetBrains Mono",monospace;
  font-size: 17px;
  font-weight: 700;
  color: var(--brand-blue-deep);
  text-align: center;
  border: 1px solid var(--line);
  letter-spacing: .5px;
}

/* expand list */
.expand-list {
  list-style: none;
  padding: 0; margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.expand-list li {
  background: rgba(255,255,255,.6);
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: 14px;
}

/* extend demo */
.extend-demo {
  margin-top: var(--sp-5);
  text-align: center;
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
#walkLog {
  margin-top: var(--sp-3);
  min-height: 20px;
  font-family: "Consolas",monospace;
  color: var(--ink-700);
}

/* ============ Footer ============ */
.foot {
  max-width: 1120px;
  margin: 0 auto;
  padding: var(--sp-5);
  text-align: center;
  color: var(--ink-500);
  font-size: 13px;
  border-top: 1px solid var(--line);
}

/* ============ Responsive ============ */
@media (max-width: 940px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .canvas-area {
    position: static;
  }
  header h1 { font-size: 24px; }
  .step-nav li small { display: none; }
  .metrics { grid-template-columns: repeat(3, 1fr); }
  .metric-num { font-size: 22px; }
}
@media (max-width: 520px) {
  .metrics { grid-template-columns: 1fr 1fr; }
  .metric-shadow { grid-column: span 2; }
  .step-nav { padding: 0 var(--sp-3) var(--sp-4); }
  .step-nav ol { min-width: 0; }
  header { padding: var(--sp-5) var(--sp-3) var(--sp-3); }
  .layout { padding: 0 var(--sp-3) var(--sp-5); }
  .step-nav li .dot { width: 28px; height: 28px; font-size: 12px; }
}