/* ----------------------------------------------------------------------------
   The lesson editor page.

   Loads styles.css first for the shared tokens (--accent, --panel, the theme
   switch), then only what this page adds. It is a second page of one app, not
   a second app, so nothing here redefines a colour or a font that already has
   a name in the main stylesheet.

   LAYOUT: the page fills the window exactly once and never scrolls. Editing a
   lesson means looking at a frame, reading the caption you just wrote and
   glancing at the step list - all three at the same time. A page that scrolls
   makes at least one of them leave the screen while you work on another, and
   the one that leaves is always the preview.

   So: header and meta band are fixed height, and everything below is one
   three-column row that takes the rest. Steps on the left, preview in the
   middle, the controls for the selected step on the right - the controls used
   to sit UNDER the video, which is exactly what made the page long.

   Below 1100px there is no honest way to fit three columns, so it falls back
   to the stacked layout and lets the page scroll.
---------------------------------------------------------------------------- */

.lessons-body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
}

.lessons-head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.lessons-brand h1 {
  margin: 0;
  font-size: 17px;
}

/* The strapline is the first thing to go when the window is short: it is read
   once, and the preview is read all day. */
.lessons-brand p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.lessons-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.lesson-picker {
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-sunken);
  color: var(--ink);
  font-size: 12px;
  max-width: 280px;
}

.lessons-saved {
  min-width: 56px;
  color: var(--muted);
  font-size: 11px;
}

.lessons-main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 18px 14px;
}

/* One row, no wrapping. These four fields are set once when a lesson is first
   tidied up and rarely touched again, so they get the least space on the page
   rather than a band of their own. */
.lesson-meta {
  flex: none;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.lesson-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1 1 140px;
  min-width: 0;
}

.lesson-field-narrow {
  flex: 0 0 130px;
}

.lesson-field > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.lesson-field input,
.lesson-field select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 12px;
}

/* Provenance, not a field - it sits at the end of the row rather than forcing
   a second line of its own. */
.lesson-stamp {
  flex: 0 1 auto;
  align-self: flex-end;
  padding-bottom: 6px;
  color: var(--muted);
  font-size: 10px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lesson-stamp.is-warn,
.lesson-hint.is-warn {
  color: var(--danger);
  font-weight: 600;
}

/* Steps | preview | controls. min-height: 0 on the row and on every column is
   what lets the middle one be bounded by the window instead of by the video's
   natural size - without it a 1080p frame sets the row height and the page
   grows a scrollbar again. */
.lesson-work {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 14px;
}

.lesson-steps {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
}

.lesson-steps-head {
  flex: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 9px 11px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
}

.lesson-count {
  color: var(--muted);
  font-size: 10px;
}

/* The list is the one thing on the page allowed its own scrollbar: a lesson
   can have twenty steps and they cannot all be on screen, but the preview and
   the controls beside it must not move when you reach step twelve. */
.lesson-step-list {
  flex: 1;
  min-height: 0;
  list-style: none;
  margin: 0;
  padding: 5px;
  overflow-y: auto;
}

.lesson-step {
  display: flex;
  align-items: stretch;
  border-radius: 7px;
  overflow: hidden;
  cursor: grab;
}

.lesson-step + .lesson-step {
  margin-top: 3px;
}

.lesson-step.is-selected {
  background: var(--accent-quiet);
}

/* The role's colour appears here as a stripe rather than as coloured text: the
   same treatment the Scene list gives object kinds, so the two lists read the
   same way. */
.lesson-step-stripe {
  width: 5px;
  flex: none;
}

.lesson-step-main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  flex: 1;
  min-width: 0;
  padding: 7px 9px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lesson-step-title {
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.lesson-step-meta {
  color: var(--muted);
  font-size: 10px;
}

.lesson-step-badge {
  align-self: flex-start;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--panel-sunken);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.lesson-step-remove {
  padding: 0 8px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
}

.lesson-step-remove:hover {
  color: var(--danger);
}

.lesson-playall {
  flex: none;
  margin: 0 5px 5px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel-sunken);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

/* Preview. The frame is centred in whatever space is left and letterboxed
   rather than cropped or stretched - a lesson about where a button is cannot
   afford a preview that shows a different framing than the export will. */
.lesson-preview {
  display: flex;
  min-height: 0;
}

.lesson-stage-wrap {
  flex: 1;
  min-height: 0;
  border-radius: 10px;
  overflow: hidden;
  background: #0b131c;
}

.lesson-stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Letterboxed, never cropped or stretched. A lesson about where a button is
   cannot afford a preview framed differently from the export. */
.lesson-video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* Centred rather than `inset: 0`. The stage fills the column including the
   black bars, so an inset overlay would let captions be drawn onto the
   letterboxing instead of onto the frame. Its pixel size is set from the
   video's own client box in player.js, so the two always coincide. */
.lesson-chrome {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* The controls column. Scrolls on its own only if the window is genuinely too
   short for it, which keeps the page itself fixed. */
.lesson-controls {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}

/* Label above the field, not beside it: in a 300px column a 74px label column
   left the caption box too narrow to see two lines of what you were typing. */
.lesson-control-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.lesson-control-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}

.lesson-control-row input[type="text"],
.lesson-control-row textarea {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  resize: vertical;
}

.lesson-highlight-tools button,
.lesson-trim button {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  cursor: pointer;
}

/* Role buttons explain themselves. Each carries its own role colour and prints
   what the role is for, so the row is readable without hovering anything.
   Three of the five are the same Clinical Blue - step, action and result
   genuinely render identically - so the hint under each label is doing real
   work rather than decorating. The colours arrive as --role-colour and
   --role-tint, set from template.js: this stylesheet never names one.

   Two columns rather than five across: five two-line buttons in a 300px
   column would each be 55px wide, which is narrower than the word "Caution". */
.lesson-roles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

/* A 3px line was not enough to read at a glance. Every button now carries a
   washed panel of its own colour behind it and a filled square swatch, so the
   five are told apart by area rather than by a hairline. */
.lesson-role {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  gap: 0 7px;
  align-items: center;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--role-colour);
  border-radius: 8px;
  background: linear-gradient(var(--role-tint), var(--role-tint)), var(--panel);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.12s ease, border-color 0.12s ease, background-color 0.12s ease;
}

.lesson-role-swatch {
  grid-row: 1 / span 2;
  width: 11px;
  height: 11px;
  min-height: 0;
  border-radius: 3px;
  background: var(--role-colour);
}

.lesson-role-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--role-colour);
}

.lesson-role-hint {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.25;
}

.lesson-role:hover {
  border-color: var(--role-colour);
}

/* Selected is the role at full strength - solid fill, white text, a ring. It
   has to survive being seen out of the corner of an eye while the author is
   looking at the preview, so a tint alone does not carry it. */
.lesson-role.active {
  border-color: var(--role-colour);
  background: var(--role-colour);
  box-shadow: 0 0 0 2px var(--role-tint);
}

.lesson-role.active .lesson-role-label,
.lesson-role.active .lesson-role-hint {
  color: #ffffff;
}

.lesson-role.active .lesson-role-hint {
  opacity: 0.85;
}

.lesson-role.active .lesson-role-swatch {
  background: rgba(255, 255, 255, 0.9);
}

/* The four highlight shapes. Each button draws the shape it makes, because
   "Spotlight" is the name of the thing and not what it does to the frame. */
.lesson-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
}

.lesson-shape {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
  cursor: pointer;
}

.lesson-shape-glyph {
  width: 20px;
  height: 14px;
  flex: none;
  color: var(--muted);
}

.lesson-shape:hover {
  border-color: var(--role-colour, var(--hover-border));
}

/* Set on this step. */
.lesson-shape.active {
  border-color: var(--role-colour, var(--accent));
  background: var(--role-tint, var(--accent-quiet));
}

.lesson-shape.active .lesson-shape-glyph {
  color: var(--role-colour, var(--accent));
}

/* Armed and waiting for a drag - a different state from "this step has one",
   and the one the author needs to notice, so it gets the moving border. */
.lesson-shape.is-arming {
  border-color: var(--role-colour, var(--accent));
  border-style: dashed;
  font-weight: 600;
}

@media (prefers-reduced-motion: no-preference) {
  .lesson-shape.is-arming {
    animation: shape-arming 1.4s ease-in-out infinite;
  }
}

@keyframes shape-arming {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.6; }
}

.lesson-highlight-tools,
.lesson-trim {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.lesson-trim label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}

.lesson-trim input {
  width: 62px;
  padding: 5px 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 11px;
}

.lesson-hint {
  color: var(--muted);
  font-size: 10px;
}

/* Narrow windows: three columns stop being honest well before they stop
   fitting, so this drops to the stacked layout and gives the page its scroll
   back rather than shrinking the preview to a thumbnail. */
@media (max-width: 1100px) {
  .lessons-body {
    height: auto;
    min-height: 100vh;
    overflow: auto;
  }

  .lesson-work {
    grid-template-columns: minmax(0, 1fr);
  }

  .lesson-step-list {
    max-height: 40vh;
  }

  .lesson-stage-wrap {
    max-height: 60vh;
  }

  .lesson-controls {
    overflow: visible;
  }
}

.lessons-empty {
  max-width: 520px;
  margin: 14vh auto;
  padding: 0 24px;
  text-align: center;
}

.lessons-empty h2 {
  margin: 0 0 8px;
  font-size: 17px;
}

.lessons-empty p {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

button:disabled,
input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.link-button-danger {
  color: var(--danger);
}

.link-button-danger:hover {
  border-color: var(--danger);
}

/* --- Publishing ---------------------------------------------------------- */

.lesson-status {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--success-bg);
  color: var(--success-ink);
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}

.link-button-go {
  border-color: var(--accent);
  background: var(--accent-quiet);
  color: var(--accent-ink);
}

.link-button-go:hover {
  border-color: var(--accent);
  background: var(--accent-quiet);
}

/* The publish report is a dialog rather than a toast because its content is
   the work to do next - a toast naming step 7 is gone before you have found
   step 7. */
.lesson-report {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(11, 19, 28, 0.45);
}

.lesson-report-card {
  width: min(560px, 100%);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-radius: 12px;
  background: var(--panel);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.lesson-report-card h2 {
  margin: 0 0 10px;
  font-size: 16px;
}

.lesson-report-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 12px;
  line-height: 1.55;
}

.lesson-report-body p {
  margin: 0 0 6px;
}

/* The first line is the summary; the rest are the individual problems, which
   read better as a list than as a wall of sentences. */
.lesson-report-body.is-bad p:first-child,
.lesson-report-body.is-good p:first-child {
  font-weight: 600;
  margin-bottom: 8px;
}

.lesson-report-body.is-bad p + p {
  padding-left: 14px;
  border-left: 3px solid var(--danger);
  margin-bottom: 5px;
}

.lesson-report-body.is-good p + p {
  color: var(--muted);
}

.lesson-report-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 14px;
}