@layer views {
  /* ── the lesson player: the whole screen. Top bar, (tabs), the lesson and the code, the buttons. ── */
  .lp {
    height: 100dvh; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; background: var(--bg);
    padding-top: env(safe-area-inset-top, 0px);
  }
  .lp-loading { display: grid; place-items: center; min-height: 50dvh; }
  .lp-top {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
    padding: 8px 12px; border-bottom: 1px solid var(--line);
  }
  .icon-btn.lg { width: 40px; height: 40px; & svg { width: 18px; height: 18px; } }
  .lp-where { display: grid; gap: 6px; min-width: 0; }
  .lp-chapter { font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lp-dots { display: flex; gap: 4px; }
  .lp-dot {
    flex: 1; max-width: 40px; height: 5px; border-radius: 3px; background: var(--track);
    &[data-done="true"] { background: color-mix(in oklch, var(--success) 70%, var(--track)); }
    &[data-here="true"] { background: var(--grad); }
  }
  .lp-ask svg { width: 14px; height: 14px; color: var(--grad-a); }

  /* tabs: phones only, and only code lessons */
  .lp-tabs { display: none; }
  .lp-main { min-height: 0; display: grid; }
  .lp-read { overflow-y: auto; overscroll-behavior: contain; padding: 22px clamp(16px, 4vw, 32px) 32px; display: grid; gap: 18px; align-content: start; }
  .lp-kind { color: var(--muted); }
  .lp-h { font-size: clamp(26px, 6vw, 34px); letter-spacing: -0.045em; line-height: 1.08; }
  .lp-read .rich { font-size: var(--fs-md); line-height: 1.65; color: var(--fg-2); max-width: 68ch;
    & strong { color: var(--fg); } }
  .task {
    display: grid; gap: 10px; padding: 18px; border-radius: var(--r-card); max-width: 72ch;
    border: 1px solid color-mix(in oklch, var(--grad-a) 35%, var(--line)); background: color-mix(in oklch, var(--grad-a) 5%, var(--surface));
    & .rich { color: var(--fg); }
  }
  .hint-box { display: grid; gap: 10px; justify-items: start; max-width: 72ch; }
  .hints { display: grid; gap: 8px; padding-left: 22px; color: var(--fg-2); font-size: var(--fs-body-sm); &:empty { display: none; } }
  .act-tocode { display: none; }

  .lp-code { min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; border-left: 1px solid var(--line); background: var(--code-bg); }
  .lp-actions {
    display: flex; align-items: center; justify-content: flex-end; gap: 10px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: var(--bg);
  }
  .lp-actions .menu { margin-right: auto; }
  .lp[data-busy] .act-submit { opacity: .5; pointer-events: none; }
  .lp[data-busy="run"] .act-run { border-color: var(--wrong); color: var(--wrong); }
  .lp[data-busy="run"] .act-run span::after { content: ' · stop'; }
  .lp:not([data-type="code"]) .lp-main { max-width: 760px; width: 100%; margin: 0 auto; }
  .lp:not([data-type="code"]) .lp-actions { justify-content: space-between; }

  /* side by side from 900px: the lesson on the left, the code on the right */
  @media (min-width: 900px) {
    .lp[data-type="code"] .lp-main { grid-template-columns: minmax(340px, 1fr) minmax(0, 1.3fr); }
    .lp[data-type="code"] .lp-tabs { display: none; }
  }
  @media (max-width: 899px) {
    .lp[data-type="code"] .lp-tabs {
      display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px 12px; border-bottom: 1px solid var(--line);
    }
    .lp-tab {
      min-height: 38px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font-weight: 700; font-size: var(--fs-sm);
      &[aria-selected="true"] { background: var(--surface-2); color: var(--fg); }
    }
    .lp[data-tab="read"] .lp-code, .lp[data-tab="code"] .lp-read { display: none; }
    .lp-code { border-left: 0; }
    .lp[data-tab="read"][data-type="code"] :is(.act-run, .act-submit) { display: none; }
    .lp[data-tab="read"][data-type="code"] .act-tocode { display: inline-flex; }
  }
  /* typing on a phone: the key bar takes the buttons' place, and the editor gets the room */
  .lp:has(.ed[data-focus]) .lp-actions { display: none; }
  @media (pointer: fine) { .lp:has(.ed[data-focus]) .lp-actions { display: flex; } }

  @media (max-width: 640px) {
    .lp-actions .pill.lg { flex: 1; padding-inline: 14px; }
    .lp-ask span { display: none; }
    .lp-ask { padding-inline: 10px; }
  }

  /* ── ⋯ menus ── */
  .menu { position: relative; }
  .menu-list {
    position: absolute; z-index: 40; bottom: calc(100% + 8px); left: 0; min-width: 200px;
    display: grid; padding: 6px; border-radius: var(--r-tile); border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow-float);
    & button { text-align: left; border: 0; background: none; color: var(--fg); padding: 11px 12px; border-radius: var(--r-item); font-weight: 600; font-size: var(--fs-body-sm);
      &:hover, &:focus-visible { background: var(--surface-2); } }
    &[hidden] { display: none; }
  }

  /* ── one question: a quiz or a predict ── */
  .q { display: grid; gap: 14px; }
  .q-stem { font-size: var(--fs-lg); font-weight: 600; color: var(--fg); }
  .opts { display: grid; gap: 8px; }
  .opt {
    display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; text-align: left;
    min-height: 52px; padding: 10px 14px; border-radius: var(--r-tile); border: 1.5px solid var(--line-2); background: var(--surface); color: var(--fg);
    transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast) var(--ease-spring);
    &:hover:not(:disabled) { border-color: color-mix(in oklch, var(--fg) 30%, var(--line-2)); }
    &[aria-checked="true"] { border-color: var(--fg); }
    &[data-state="right"] { border-color: var(--right); background: color-mix(in oklch, var(--right) 10%, var(--surface)); }
    &[data-state="wrong"] { border-color: var(--wrong); background: color-mix(in oklch, var(--wrong) 9%, var(--surface)); }
    &:disabled { cursor: default; }
  }
  .opt-key {
    display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-2);
    font-family: var(--mono); font-size: var(--fs-label); color: var(--muted);
  }
  .opt[aria-checked="true"] .opt-key { background: var(--fg); color: var(--bg); border-color: var(--fg); }
  .opt-md > p { margin: 0; }
  .q-explain { padding: 14px 16px; border-radius: var(--r-tile); background: var(--surface-2); color: var(--fg-2); font-size: var(--fs-body-sm); }
  .q-note { min-height: 1.4em; font-weight: 700; }
  .q-right { display: inline-flex; align-items: center; gap: 6px; color: var(--right); & svg { width: 16px; height: 16px; } }
  .q-wrong { color: var(--wrong); }
  .predict-label { margin-bottom: -6px; }
  .input.mono, .predict-box { font-family: var(--mono); font-size: 14px; line-height: 1.5; resize: vertical; }
  .predict-box[data-state="right"] { border-color: var(--right); }
  .predict-box[data-state="wrong"] { border-color: var(--wrong); }
  .predict-answer { display: grid; gap: 6px; }

  /* ── sheets: from the bottom on a phone, in the middle elsewhere ── */
  dialog.sheet {
    width: min(560px, calc(100vw - 32px)); max-height: min(86dvh, 760px); margin: auto; padding: 22px;
    border: 1px solid var(--line-2); border-radius: var(--r-card); background: var(--surface); color: var(--fg);
    box-shadow: var(--shadow-float); overflow-y: auto;
    &::backdrop { background: var(--scrim); }
    &[open] { animation: sheet-in var(--t) var(--ease-liquid); }
  }
  @keyframes sheet-in { from { opacity: 0; translate: 0 12px; } }
  @media (max-width: 640px) {
    dialog.sheet {
      width: 100vw; max-width: none; margin: auto 0 0; border-radius: var(--r-card) var(--r-card) 0 0; border-bottom: 0;
      padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
    }
    @keyframes sheet-in { from { translate: 0 40px; opacity: 0; } }
  }
  .sheet-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; & .pill { flex: 1 1 auto; } }
  dialog.sheet .code-view { margin-top: 14px; max-height: 50dvh; overflow: auto; }

  /* the sheet after a lesson */
  .done-sheet { text-align: center; overflow: hidden; position: relative; }
  .done-sheet .label { display: block; }
  .done-xp {
    font-size: 54px; font-weight: 800; letter-spacing: -0.06em; line-height: 1.1; margin: 4px 0 6px;
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .done-line { color: var(--fg-2); font-size: var(--fs-body-sm); margin-top: 4px; }
  .done-next { display: grid; gap: 2px; margin-top: 16px; padding: 12px; border-radius: var(--r-tile); background: var(--surface-2); }
  .done-sheet .sheet-actions { flex-direction: column; }
  .done-burst { position: absolute; left: 50%; top: 70px; width: 0; height: 0; pointer-events: none; }
  .done-burst i {
    position: absolute; width: 7px; height: 7px; border-radius: 2px; background: var(--grad-a);
    animation: burst 900ms var(--ease-liquid) both; --a: calc(var(--k) * 30deg);
  }
  .done-burst i:nth-child(even) { background: var(--grad-b); }
  @keyframes burst {
    from { transform: rotate(var(--a)) translateY(0) scale(1); opacity: 1; }
    to { transform: rotate(var(--a)) translateY(-110px) scale(.4); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .done-burst { display: none; } }
}