/* /train — only what vision.css does not already provide. */

/* Transfer learning, in one band */
.idea { padding: clamp(32px, 5vw, 64px) var(--gutter); display: grid; gap: 24px; }
.idea-title { font-size: clamp(1.75rem, 2.4vw + 0.8rem, 3rem); }
.idea .steps { margin: 0; }
.idea .prose { margin: 0; }

/* The room: camera on the left, classes on the right */
.room { padding: clamp(40px, 6vw, 96px) var(--gutter); }
.room-head { display: grid; gap: 12px; margin-bottom: var(--gap); max-width: 70ch; }
.room-head .prose { margin: 0; }
.room-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
@media (max-width: 1000px) { .room-grid { grid-template-columns: 1fr; } }

.room-bench .controls .btn { flex: 1 1 auto; }
/* The 14 MB download, as a bar you can watch rather than a number you must read. */
.loadbar { display: block; height: 6px; margin: 0 16px; background: var(--black-3); }
.loadbar-fill { display: block; height: 100%; width: 0; background: var(--signal); transition: width 120ms linear; }
.live { display: grid; gap: 2px; padding: 0 0 2px; }
.live-head { display: block; padding: 12px 16px 6px; color: var(--gray); }
.live-head .micro { text-transform: none; letter-spacing: 0; }
.live-say { color: var(--naples); }
.bench-note { margin: 0; padding: 4px 16px 16px; color: var(--gray); }

.room-classes { display: grid; gap: 2px; min-width: 0; }
.preset { display: grid; gap: 6px; padding: 0 0 16px; }
.klasses { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.klass { display: grid; gap: 2px; padding: 12px 12px 2px; min-width: 0; }
.klass-head { display: grid; grid-template-columns: var(--target) minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.klass-glyph { display: flex; align-items: center; justify-content: center; min-height: var(--target); font-size: 1.25rem; }
.klass-name { min-width: 0; }
.klass-count { font-size: var(--micro); padding: 0 4px; white-space: nowrap; }
.klass-actions { background: transparent; }
.klass-actions .btn { flex: 1 1 auto; padding: 0 12px; }
.klass-hold { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* Thumbnail strip: scrolls inside itself, never the page */
.shots { display: flex; gap: 2px; overflow-x: auto; min-height: 52px; padding: 2px 0 10px; scrollbar-width: thin; }
.shot { position: relative; flex: none; width: 64px; height: 48px; padding: 0; border: 0; background: var(--black); cursor: pointer; }
.shot canvas { width: 100%; height: 100%; object-fit: cover; }
.shot:hover::after, .shot:focus-visible::after {
  content: "×"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--black) 70%, transparent); color: var(--white); font-family: var(--mono);
}
.shots-empty { align-self: center; color: var(--gray); }
.room-more { background: transparent; padding-top: 2px; }
.tips { margin: 12px 0 0; max-width: 60ch; }
.room-classes .note { margin: 14px 0 0; }

/* Two learners side by side */
.learners { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
@media (max-width: 900px) { .learners { grid-template-columns: 1fr; } }
.learner { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.learner h3 { margin: 0; }
.learner p { margin: 0; }
.learner .bench-caption { min-height: 0; padding-bottom: 0; }
.loo { font-size: var(--body); color: var(--naples); }
.curve-view { aspect-ratio: 16 / 10; }

/* The map */
.map-view { aspect-ratio: 16 / 9; max-height: 70vh; }
.map .bench-caption { justify-content: flex-start; }
.map [data-legend] { color: var(--white); font-family: var(--mono); white-space: pre-wrap; }
.map-caption { padding-top: 0; max-width: none; }

/* Judge */
.judge-bench .controls .btn { flex: 1 1 auto; }
.judge-out { display: grid; gap: var(--gap); }
.verdict h3 { margin: 0 0 10px; }
.judge-owner { display: block; color: var(--gray); margin-top: 4px; }
.judge-owner a { color: var(--white); }

/* The four-step checklist in the room head: it ticks itself off as you go. */
.howto { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 2px; max-width: 62ch; }
.howto li {
  display: grid; grid-template-columns: var(--target) minmax(0, 1fr); align-items: center;
  gap: 10px; padding: 7px 12px; background: var(--black); color: var(--gray);
  font-family: var(--mono); font-size: var(--micro);
}
.howto-tick {
  width: 18px; height: 18px; border: 2px solid var(--gray); display: block;
  position: relative; justify-self: center;
}
.howto li[data-done] { color: var(--white); }
.howto li[data-done] .howto-tick { border-color: var(--signal); background: var(--signal); }
.howto li[data-done] .howto-tick::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px;
  border: solid var(--black); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* Leave-one-out grade: a plain-language verdict next to the number. */
.loo-grade { margin: 0; padding: 0 16px 14px; font-family: var(--mono); font-size: var(--micro); color: var(--gray); }
.loo-grade.good { color: var(--signal); }
.loo-grade.ok { color: var(--naples); }
.loo-grade.bad { color: var(--red, var(--naples)); }

/* Shortcut-learning game */
.challenge { display: grid; gap: 14px; padding: clamp(24px, 3vw, 40px) var(--gutter); align-content: start; }
.challenge h3 { margin: 0; font-size: clamp(1.35rem, 1.4vw + 0.9rem, 2rem); }
.challenge .steps { margin: 0; }
.challenge .controls { background: transparent; }
.challenge-say { margin: 0; color: var(--naples); }
.challenge[data-active] { outline: 2px solid var(--signal); outline-offset: -2px; }

/* Racing both learners: the two verdicts on one tile. */
.tile-alt { display: block; margin-top: 4px; color: var(--gray); }
.tile-alt.agree { color: var(--white); }
.tile-alt.differs { color: var(--naples); }

/* Keep */
.keep { background: transparent; }
.keep-say { padding-left: 0; }

/* Choose, teach, test: the first screen works without reading the lesson. */
.training-start { padding: 24px var(--gutter); display: grid; gap: 16px; }
.training-start h2 { font-size: clamp(1.4rem, 2vw, 2rem); }
.training-choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; }
a.training-choice { text-decoration: none; }
.training-choice { text-align: left; background: var(--black-2); color: var(--white); border: 2px solid transparent; padding: 18px; display: grid; gap: 10px; cursor: pointer; font: inherit; min-width: 0; }
.training-choice strong { font-size: 1.15rem; }
.training-choice > span:last-child { font-size: var(--micro); color: var(--gray); }
.training-choice:hover, .training-choice[aria-pressed="true"] { border-color: var(--naples); }
.training-choice:focus-visible { outline: 3px solid var(--signal); outline-offset: 2px; }
.training-start .prose { margin: 0; }
.room-bench { scroll-margin-top: 90px; }
.room-bench .curve-view { aspect-ratio: 3 / 1; max-height: 160px; }
.demo-test { padding: 12px 16px; }
.demo-test .micro { margin: 0 0 8px; }
.training-details > summary { padding: 24px var(--gutter); cursor: pointer; font-size: 1.2rem; min-height: 48px; background: var(--black-2); }
@media (max-width: 1000px) { .training-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .training-choice { padding: 12px; } .training-choice strong { font-size: 1rem; } }

.training-curve > summary { cursor: pointer; padding: 12px 16px; color: var(--gray); min-height: 44px; }

.video-lesson { padding:20px var(--gutter) 28px; display:grid; gap:14px; }
.video-lesson h2 { font-size:clamp(1.3rem,2vw,2rem); margin:0; }
.lesson-heading { display:grid; grid-template-columns:1fr 2fr; gap:20px; }
.lesson-heading p { margin:0; }
.lesson-methods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px; }
.lesson-methods .training-choice { padding:14px; gap:5px; }
.lesson-grid { gap:16px; grid-template-columns:minmax(0,1.4fr) minmax(300px,1fr); }
.lesson-actions { padding:16px; display:grid; gap:10px; align-content:start; }
.lesson-actions h3,.lesson-actions p { margin:0; }
.lesson-actions [data-method-panel] { display:grid; gap:10px; }
.lesson-actions [hidden] { display:none; }
.lesson-actions .controls .btn { flex:1; white-space:normal; padding:8px; }
.lesson-labels { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lesson-labels label { min-width:0; font-size:var(--micro); }
.lesson-overlay { position:absolute; left:12px; bottom:12px; background:var(--black); color:var(--naples); padding:8px 12px; max-width:calc(100% - 24px); font-weight:600; }
.lesson-prediction { margin:0; min-height:48px; }
.lesson-groups { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.lesson-groups strong { display:block; font-size:var(--micro); }
.lesson-groups canvas { width:48%; height:auto; margin:2px 1%; }
.lesson-limit { color:var(--gray); }
.advanced-training > summary { background:var(--quiet); color:var(--quiet-text); }
.room { padding:24px var(--gutter); }
.idea { padding:24px var(--gutter); gap:16px; }
@media(max-width:1000px){.lesson-grid { grid-template-columns:1fr; } .lesson-heading { grid-template-columns:1fr; gap:6px; }}
@media(max-width:600px){.lesson-methods { grid-template-columns:1fr; } .lesson-methods .training-choice { grid-template-columns:1fr; padding:10px 12px; } .lesson-methods strong { font-size:1rem; } .lesson-actions { padding:12px; }}

.lesson-held-frame { display:block; width:100%; max-height:180px; object-fit:contain; background:#172127; }
.lesson-held-frame[hidden] { display:none; }
.lesson-actions > [data-lesson-help], .lesson-actions [data-method-panel] > p { font-size:var(--micro); line-height:1.5; }
.video-lesson:is(:fullscreen,.is-expanded) { padding:14px; gap:10px; overflow:auto; }
.video-lesson:is(:fullscreen,.is-expanded) > .lesson-heading { display:none; }
.video-lesson:is(:fullscreen,.is-expanded) [data-fullscreen] { position:sticky; top:0; z-index:3; float:right; }
@media(max-width:600px){.lesson-actions { gap:8px; } .lesson-labels { grid-template-columns:1fr; } .lesson-methods .training-choice > span { line-height:1.3; } }