/* 10-20 lead placement lab: two-dimensional vertex view.
   Uses the shared tokens from base.css; electrode and feedback colours are
   defined once below so light and dark themes stay in step. */

.lead-lab {
  --ll-head: #f6f1f5;
  --ll-head-line: #6b5d77;
  --ll-guide: #b58fb0;
  --ll-socket: #ffffff;
  --ll-socket-line: #b9aac6;
  --ll-electrode: var(--action-bg, #a32b78);
  --ll-electrode-ink: #ffffff;
  --ll-ref: #56607a;
  --ll-correct: #1f7a4d;
  --ll-wrong: #c2410c;
  --ll-chain: #d9a441;
}
body.dark .lead-lab {
  --ll-head: #493b63;
  --ll-head-line: #cbbbe0;
  --ll-guide: #b98fcf;
  --ll-socket: #33264d;
  --ll-socket-line: #8e7aa8;
  --ll-ref: #8d97b3;
  --ll-correct: #5fd39a;
  --ll-wrong: #fb9b5c;
  --ll-chain: #f0c274;
}

.lead-lab .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---- Mode tabs ------------------------------------------------------------ */
.lead-lab .lab-mode-switcher {
  display: inline-flex;
  gap: 4px;
  margin: .5rem 0 1rem max(0px, calc((100% - var(--lesson-measure, 39rem)) / 2));
  padding: 4px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-2);
}
.lead-lab .lab-mode {
  min-width: 5.5rem;
  min-height: 40px;
  padding: .45rem 1rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-color);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.lead-lab .lab-mode[aria-selected="true"] { background: var(--action-bg); color: var(--action-ink); }
.lead-lab .lab-mode:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }

/* ---- Layout --------------------------------------------------------------- */
.lead-lab .lead-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(17rem, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.lead-lab .lab-workspace,
.lead-lab .lab-panel {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md, 16px);
  background: var(--surface-1);
}
.lead-lab .head-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  min-height: 34px;
  margin-bottom: .5rem;
}
.lead-lab .lab-toggle { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 600; color: var(--text-color); cursor: pointer; }
.lead-lab .lab-toggle input { width: 18px; height: 18px; accent-color: var(--action-bg); }
.lead-lab .lab-toggle:has(input:disabled) { opacity: .5; cursor: default; }
.lead-lab .lab-current {
  margin-left: auto;
  padding: .3rem .75rem;
  border-radius: 999px;
  background: var(--fx-tint-strong, #f5e2ef);
  color: var(--accent-color);
  font-size: .875rem;
  font-weight: 700;
}
.lead-lab .lab-current[hidden] { display: none; }

#lead-lab-svg {
  display: block;
  width: 100%;
  max-width: 480px;
  height: auto;
  max-height: calc(100vh - 250px);
  min-height: 300px;
  margin: 0 auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
#lead-lab-svg:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 4px; border-radius: 12px; }
.lead-lab .lab-status { min-height: 3em; margin: .5rem 0 0; color: var(--text-secondary); font-size: .9375rem; line-height: 1.5; }

/* ---- Head drawing ----------------------------------------------------------- */
#lead-lab-svg .head-outline { fill: var(--ll-head); stroke: var(--ll-head-line); stroke-width: 2.5; }
#lead-lab-svg :is(.head-nose, .head-ear) { fill: var(--ll-head); stroke: var(--ll-head-line); stroke-width: 2.5; stroke-linejoin: round; }
#lead-lab-svg .head-side { font: 600 12px system-ui, sans-serif; fill: var(--text-secondary); }

#lead-lab-svg .layer-guides { opacity: 0; transition: opacity .2s; pointer-events: none; }
#lead-lab-svg.show-guides .layer-guides { opacity: 1; }
#lead-lab-svg .guide-ring { fill: none; stroke: var(--ll-guide); stroke-width: 1.5; stroke-dasharray: 5 5; }
#lead-lab-svg .guide-arc { fill: none; stroke: var(--ll-guide); stroke-width: 1.2; stroke-dasharray: 3 5; }
#lead-lab-svg .guide-line { stroke: var(--ll-guide); stroke-width: 1.5; }
#lead-lab-svg .guide-tick { stroke: var(--ll-guide); stroke-width: 2; }
#lead-lab-svg .guide-point { fill: var(--ll-guide); }
#lead-lab-svg :is(.guide-pct, .guide-name) { font: 700 11px system-ui, sans-serif; fill: var(--accent-color); paint-order: stroke; stroke: var(--ll-head); stroke-width: 3px; }

#lead-lab-svg .landmark-mark { fill: var(--ll-head-line); }
#lead-lab-svg .landmark-label { font: 700 12px system-ui, sans-serif; fill: var(--text-color); }

#lead-lab-svg .chain-line { fill: none; stroke: var(--ll-chain); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; opacity: .55; }

/* Sites: an empty socket, a placed electrode, or a labelled site in Learn. */
#lead-lab-svg .site { cursor: pointer; }
#lead-lab-svg .site-halo { fill: transparent; }
#lead-lab-svg .site-dot { fill: var(--ll-socket); stroke: var(--ll-socket-line); stroke-width: 1.5; stroke-dasharray: 4 3; transition: fill .15s; }
#lead-lab-svg .site-label { font: 700 12px system-ui, sans-serif; fill: var(--ll-electrode-ink); pointer-events: none; opacity: 0; }
#lead-lab-svg:not(.show-sites) .site.is-empty:not(.is-asked, .is-hint) { opacity: 0; }
#lead-lab-svg .site.is-labelled .site-dot { fill: var(--ll-electrode); stroke: var(--ll-electrode); stroke-dasharray: none; }
#lead-lab-svg .site.is-labelled .site-label { opacity: 1; }
#lead-lab-svg .site.is-reference.is-labelled .site-dot { fill: var(--ll-ref); stroke: var(--ll-ref); }
#lead-lab-svg .site.is-selected .site-halo,
#lead-lab-svg .site.is-grouped .site-halo { fill: none; stroke: var(--ll-chain); stroke-width: 4; }
#lead-lab-svg .site.is-dimmed { opacity: .35; }
#lead-lab-svg .site.is-hint .site-dot { stroke: var(--ll-chain); stroke-width: 4; stroke-dasharray: none; animation: ll-pulse 1s ease-in-out 3; }
#lead-lab-svg .site.is-asked .site-dot { fill: var(--ll-chain); stroke: var(--ll-chain); stroke-dasharray: none; }
#lead-lab-svg .site.is-asked .site-label { opacity: 1; fill: #33264d; }
#lead-lab-svg .site.is-answer .site-dot { fill: var(--ll-correct); stroke: var(--ll-correct); stroke-dasharray: none; }
#lead-lab-svg .site.is-wrong .site-dot { fill: var(--ll-wrong); stroke: var(--ll-wrong); stroke-dasharray: none; }
#lead-lab-svg .mark path { stroke: var(--ll-wrong); stroke-width: 3.5; stroke-linecap: round; }
#lead-lab-svg .layer-cursor { opacity: 0; pointer-events: none; }
#lead-lab-svg .layer-cursor.is-visible { opacity: 1; }
#lead-lab-svg .cursor-ring { fill: none; stroke: var(--accent-color); stroke-width: 2; }
#lead-lab-svg .cursor-cross { stroke: var(--accent-color); stroke-width: 2; }
@keyframes ll-pulse { 50% { stroke-width: 8; } }
@media (prefers-reduced-motion: reduce) {
  #lead-lab-svg .site.is-hint .site-dot { animation: none; }
  #lead-lab-svg .layer-guides { transition: none; }
}

/* ---- Side panel ---------------------------------------------------------------- */
.lead-lab .lab-panel { display: grid; gap: .85rem; align-content: start; }
.lead-lab .lab-mode-panel { display: grid; gap: .75rem; }
.lead-lab .lab-mode-panel[hidden] { display: none; }
.lead-lab .lab-panel-title { margin: 0; font-size: 1.125rem; line-height: 1.35; color: var(--text-color); }
.lead-lab .lab-panel :is(p, dd, dt, label) { margin: 0; font-size: .9375rem; line-height: 1.55; }
.lead-lab .lab-panel-lead { color: var(--text-secondary); }

.lead-lab .electrode-progress { display: grid; gap: .3rem; font-size: .875rem; font-weight: 600; color: var(--text-secondary); }
.lead-lab .electrode-progress progress { width: 100%; height: 8px; accent-color: var(--action-bg); }
.lead-lab .electrode-palette { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr)); gap: .4rem; }
.lead-lab .electrode-chip {
  min-height: 40px;
  padding: .3rem .2rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--surface-1);
  color: var(--text-color);
  font: 700 .875rem/1 system-ui, sans-serif;
  cursor: grab;
  touch-action: none;
}
.lead-lab .electrode-chip:hover:not(:disabled) { border-color: var(--accent-color); }
.lead-lab .electrode-chip[aria-pressed="true"] { border-color: var(--action-bg); background: var(--action-bg); color: var(--action-ink); }
.lead-lab .electrode-chip.is-placed { border-style: dashed; background: transparent; color: var(--text-secondary); opacity: .55; cursor: default; }
.lead-lab .electrode-chip:focus-visible { outline: 3px solid var(--accent-color); outline-offset: 2px; }
.electrode-ghost {
  position: fixed;
  left: -24px;
  top: -24px;
  z-index: 3000;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--action-bg, #a32b78);
  color: #fff;
  font: 700 14px system-ui, sans-serif;
  box-shadow: 0 6px 18px #0004;
  pointer-events: none;
}

.lead-lab .lab-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.lead-lab .lab-actions button,
.lead-lab .lab-choice,
.lead-lab .lab-highlight button {
  min-height: 40px;
  padding: .45rem .9rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 10px);
  background: var(--surface-1);
  color: var(--text-color);
  font: inherit;
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
.lead-lab .lab-actions button:hover:not(:disabled),
.lead-lab .lab-choice:hover:not(:disabled),
.lead-lab .lab-highlight button:hover { border-color: var(--accent-color); }
.lead-lab .lab-actions button:disabled { opacity: .5; cursor: default; }
.lead-lab .lab-actions .lab-primary { border-color: var(--action-bg); background: var(--action-bg); color: var(--action-ink); }
.lead-lab .lab-highlight { display: flex; flex-wrap: wrap; gap: .4rem; }
.lead-lab .lab-highlight button { min-height: 34px; padding: .3rem .7rem; font-size: .8125rem; border-radius: 999px; }

.lead-lab .lab-site-jump { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.lead-lab .lab-site-jump select { flex: 1; min-height: 38px; padding: .3rem .5rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 10px); background: var(--surface-1); color: var(--text-color); font: inherit; }
.lead-lab .site-card { padding: .9rem 1rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 10px); background: var(--surface-2); }
.lead-lab .site-card h4 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .25rem; font-size: 1.05rem; }
.lead-lab .site-card-name { font-size: 1.5rem; color: var(--accent-color); }
.lead-lab .site-card-kind { color: var(--text-secondary); font-weight: 600; }
.lead-lab .site-card-logic { color: var(--text-secondary); }
.lead-lab .site-card dl { display: grid; grid-template-columns: auto 1fr; gap: .45rem .8rem; margin: .7rem 0 0; }
.lead-lab .site-card dt { font-weight: 700; color: var(--text-color); }
.lead-lab .site-card dd { margin: 0; color: var(--text-color); }

.lead-lab .lab-quiz-count { color: var(--text-secondary); font-weight: 600; font-size: .875rem; }
.lead-lab .lab-quiz-prompt { font-size: 1.125rem !important; line-height: 1.45 !important; color: var(--text-color); }
.lead-lab .lab-quiz-prompt strong { color: var(--accent-color); font-size: 1.25rem; }
.lead-lab .lab-quiz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.lead-lab .lab-quiz-choices[hidden] { display: none; }
.lead-lab .lab-choice { font-size: 1.05rem; }
.lead-lab .lab-choice.is-correct { border-color: var(--ll-correct); box-shadow: inset 0 0 0 1px var(--ll-correct); color: var(--ll-correct); }
.lead-lab .lab-choice.is-wrong { border-color: var(--ll-wrong); box-shadow: inset 0 0 0 1px var(--ll-wrong); color: var(--ll-wrong); }
.lead-lab .lab-quiz-feedback:empty { display: none; }
.lead-lab .lab-quiz-feedback { padding: .6rem .8rem; border-radius: var(--radius-sm, 10px); background: var(--surface-2); }
.lead-lab .lab-quiz-feedback.is-correct { color: var(--ll-correct); }
.lead-lab .lab-quiz-feedback.is-wrong { color: var(--text-color); }

.lead-lab .lab-results:empty { display: none; }
.lead-lab .lab-results { padding: .7rem .9rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm, 10px); background: var(--surface-2); font-size: .9375rem; line-height: 1.5; }
.lead-lab .lab-results.success { border-color: color-mix(in srgb, var(--ll-correct) 45%, var(--border-color)); background: color-mix(in srgb, var(--ll-correct) 9%, var(--surface-1)); }

.lead-lab .lab-measure-note { border-top: 1px solid var(--border-color); padding-top: .75rem; }
.lead-lab .lab-measure-note summary { cursor: pointer; font-weight: 700; color: var(--text-color); }
.lead-lab .lab-measure-note[open] summary { margin-bottom: .5rem; }
.lead-lab .lab-measure-note p + p { margin-top: .5rem; }
.lead-lab .lab-closing { margin-top: 1.25rem; color: var(--text-secondary); font-size: .9375rem !important; }

/* Phones: instructions and the electrode bin above the head, so a chosen
   electrode and its target are on screen together. */
@media (max-width: 760px) {
  .lead-lab .lead-lab-grid { grid-template-columns: 1fr; }
  .lead-lab .lab-panel { order: -1; }
  .lead-lab .lab-measure-note { order: 5; }
  .lead-lab .lab-panel { padding: .75rem; }
  /* The head uses the full card width on a phone: nested paddings left it
     about 270 px wide. */
  .lead-lab .lab-workspace { margin-inline: -1.25rem; padding: .5rem .25rem .75rem; border-width: 1px 0; border-radius: 0; }
  .lead-lab .lab-workspace .head-toolbar, .lead-lab .lab-status { padding-inline: 1rem; }
  #lead-lab-svg { max-height: none; min-height: 0; }
  .lead-lab .electrode-palette { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
  .lead-lab .electrode-chip { min-height: 38px; font-size: .8125rem; }
  .lead-lab .lab-mode-switcher { display: flex; margin-left: 0; }
  .lead-lab .lab-mode { flex: 1; min-width: 0; }
}