/* Learn — the guided first-run tutorial overlay.
 *
 * Rides the studio's own tokens (--card, --ink, --accent …) so the lesson
 * inherits both themes automatically instead of shipping a second palette.
 *
 * The scrim is deliberately NOT a modal: `.lrn-root` is pointer-events:none and
 * only the card takes clicks, so every control in the editor stays usable while
 * a step is open. The dim is a soft ring around the spotlit control rather than
 * a full-screen blackout — a first-timer still needs to see the rest of the app
 * to build a mental model of where things live.
 */

.lrn-root {
  position: fixed;
  inset: 0;
  z-index: 60;                 /* over the dock & islands, under modals (100+) */
  pointer-events: none;
}
.lrn-root[hidden] { display: none; }

/* While a dialog is open the card has to outrank it. The lettering and export
   steps describe what to do INSIDE that dialog, and at the default z-index the
   modal (100) covered the very instructions for using it. JS keeps the card off
   the modal's own rect, so raising it here steals nothing. */
.lrn-root.over-modal { z-index: 120; }

/* ------------------------------------------------------------- spotlight */
/* An SVG mask, not a box-shadow ring: a step usually needs two bright areas, the
   control AND the canvas you use it on. Holes are punched per lit region. */
.lrn-scrim {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
.lrn-scrim[hidden] { display: none; }

/* Strong enough to read as shadow. The lit holes are now the control and the
   artwork rather than the whole stage, so the dim covers most of the window and
   the eye goes where the step wants it. */
.lrn-dim { fill: rgba(var(--track-rgb, 12 14 24), 0.5); }

.lrn-ring {
  fill: none;
  stroke: rgba(var(--ink-rgb, 26 31 54), 0.28);
  stroke-width: 2;
}
/* the control the step is actually pointing at */
.lrn-ring.primary {
  stroke: var(--accent, #4f3bf6);
  stroke-width: 3;
}

/* ------------------------------------------------------------------ card */
.lrn-card {
  position: fixed;
  width: 352px;
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  pointer-events: auto;
  background: var(--card, #fff);
  color: var(--ink, #1a1f36);
  border: 1px solid var(--card-line, rgba(26, 31, 54, 0.14));
  border-radius: 14px;
  box-shadow: var(--shadow-pop, 0 18px 50px rgba(0, 0, 0, 0.22));
  padding: 14px 15px 12px;
  font-size: 13px;
  line-height: 1.5;
}
.lrn-card.center {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%);
  width: 420px;
}
.lrn-card.ok { border-color: var(--ok, #2f9e63); }

/* ------------------------------------------------------------------ head */
.lrn-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
}
.lrn-step {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3, #6b7280);
  white-space: nowrap;
}
.lrn-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  flex: 1;
}
.lrn-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(var(--ink-rgb, 26 31 54), 0.2);
  cursor: pointer;
  transition: background var(--dur-1, 0.12s) ease, transform var(--dur-1, 0.12s) ease;
}
.lrn-dots button:hover { transform: scale(1.35); }
.lrn-dots button.done { background: rgba(var(--ink-rgb, 26 31 54), 0.42); }
.lrn-dots button.on {
  background: var(--accent, #4f3bf6);
  transform: scale(1.35);
}
.lrn-x {
  flex: none;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--ink-3, #6b7280);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}
.lrn-x:hover {
  background: rgba(var(--ink-rgb, 26 31 54), 0.09);
  color: var(--ink, #1a1f36);
}

/* ------------------------------------------------------------------ body */
.lrn-title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lrn-body p { margin: 0 0 8px; }
.lrn-body p:last-child { margin-bottom: 0; }
.lrn-body b { font-weight: 700; }
.lrn-h {
  font-weight: 700;
  margin-top: 11px !important;
}
.lrn-list {
  margin: 0 0 9px;
  padding-left: 17px;
}
.lrn-list li { margin-bottom: 4px; }
.lrn-note {
  color: var(--ink-3, #6b7280);
  font-size: 12px;
  border-left: 2px solid rgba(var(--ink-rgb, 26 31 54), 0.16);
  padding-left: 8px;
}
.lrn-body kbd {
  display: inline-block;
  min-width: 17px;
  padding: 1px 5px;
  border: 1px solid var(--field-line, rgba(26, 31, 54, 0.2));
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--field, rgba(26, 31, 54, 0.05));
  font: 600 11.5px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  text-align: center;
}
.lrn-art {
  margin: 0 0 9px;
  padding: 9px;
  border-radius: 10px;
  background: rgba(var(--ink-rgb, 26 31 54), 0.045);
  text-align: center;
}
.lrn-art img {
  width: 132px;
  height: 132px;
  max-width: 100%;
  display: inline-block;
}

/* ------------------------------------------------------------------- cta */
.lrn-cta:not(:empty) { margin: 2px 0 10px; }
.lrn-ctabtn {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-radius: 9px;
  background: var(--btn-hi-bg, #4f3bf6);
  color: var(--btn-hi-ink, #fff);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.lrn-ctabtn:hover { filter: brightness(1.07); }
.lrn-ctabtn:disabled { opacity: 0.6; cursor: default; }

/* ------------------------------------------------------------------ foot */
.lrn-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--card-line, rgba(26, 31, 54, 0.12));
}
.lrn-grow { flex: 1; }
.lrn-foot button {
  padding: 7px 14px;
  border-radius: 9px;
  border: 1px solid transparent;
  background: var(--btn-hi-bg, #4f3bf6);
  color: var(--btn-hi-ink, #fff);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
.lrn-foot button:hover { filter: brightness(1.07); }
.lrn-foot .lrn-back,
.lrn-foot button.ghost {
  background: transparent;
  color: var(--ink-2, #4b5163);
  border-color: var(--field-line, rgba(26, 31, 54, 0.2));
}
.lrn-foot .lrn-back:hover,
.lrn-foot button.ghost:hover {
  background: rgba(var(--ink-rgb, 26 31 54), 0.06);
  filter: none;
}
.lrn-foot .lrn-back:disabled { opacity: 0.4; cursor: default; }

/* "waiting for you" — the signal that the lesson wants an action, not a read */
.lrn-wait {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3, #6b7280);
}
.lrn-wait[hidden] { display: none; }
.lrn-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #4f3bf6);
  animation: lrn-pulse 1.5s ease-in-out infinite;
}
.lrn-wait.ok { color: var(--ok, #2f9e63); }
.lrn-wait.ok .lrn-pulse { background: var(--ok, #2f9e63); animation: none; }

@keyframes lrn-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}

/* --------------------------------------------------------------- launcher */
.lrn-launch.on {
  background: var(--btn-hi-bg, #4f3bf6);
  color: var(--btn-hi-ink, #fff);
}

/* ------------------------------------------------------------ dark theme */
:root[data-theme="dark"] .lrn-card {
  background: var(--menu-bg, #191c2b);
}
:root[data-theme="dark"] .lrn-dim { fill: rgba(0, 0, 0, 0.62); }
:root[data-theme="dark"] .lrn-ring { stroke: rgba(255, 255, 255, 0.26); }
:root[data-theme="dark"] .lrn-ring.primary { stroke: var(--accent, #6c5cff); }

/* ---------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lrn-pulse { animation: none; }
  .lrn-dots button { transition: none; }
}

/* --------------------------------------------------------------- narrow */
@media (max-width: 720px) {
  .lrn-card, .lrn-card.center { width: calc(100vw - 16px); }
}