/* =========================================================================
   Kodyfier — Code Lab
   The practical workspace. Same tokens as the rest of the platform; the only
   new idea here is a two-column "read on the left, write on the right" layout
   that collapses to a tabbed single column on a phone.
   ========================================================================= */

/* ------------------------------------------------------------- set landing */

.lab-intro__title {
  margin-top: 16px;
  font-size: clamp(32px, 5vw, 42px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.lab-intro__lede {
  max-width: 62ch;
  margin-top: 14px;
  color: var(--ink-3);
  font-size: 15.5px;
  line-height: 1.6;
}

.lab-sets {
  display: grid;
  padding: 0;
  gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr));
  list-style: none;
}

.set-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: 14px;
  transition: border-color 0.15s ease;
}

.set-card:hover {
  border-color: var(--line-strong);
}

.set-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.set-card__title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.set-card__desc {
  color: var(--ink-3);
  font-size: 13.5px;
  line-height: 1.62;
}

.set-card__meta {
  display: flex;
  flex-direction: column;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  gap: 6px;
  margin-top: auto;
  color: var(--ink-4);
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.set-card__row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
}

.set-card__meta strong {
  color: var(--ink-2);
  font-weight: 500;
}

.set-card .btn {
  align-self: flex-start;
}

/* ------------------------------------------------------------------ topbar */

.lab-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 12px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.lab-topbar__title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Ghost control — never filled, so Submit stays the only solid button on
   screen. Below 860px the label drops to "Back", below 560px to the arrow
   alone; the full label stays in the accessibility tree throughout. */
.lab-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.lab-back:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.lab-back__icon {
  flex: 0 0 auto;
}

.lab-back__short {
  display: none;
}

.lab-topbar__divider {
  width: 1px;
  height: 18px;
  margin-inline: -6px;
  background: var(--line-strong);
}

.lab-topbar__spacer {
  flex: 1;
}

.lab-progress {
  color: var(--ink-2);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.lab-timer {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  font-family: var(--font-mono);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}

.lab-timer[data-tone='warn'] {
  border-color: var(--warn);
  background: var(--warn-soft);
  color: var(--warn);
}

.lab-timer[data-tone='danger'] {
  border-color: var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.lab-timer__label {
  color: var(--ink-3);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------------- shell */

/* The workspace fills whatever the topbar leaves, measured rather than
   guessed — the topbar wraps at some widths, so a magic offset was wrong. */
.page-lab {
  display: flex;
  flex-direction: column;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

.lab-workspace {
  display: grid;
  gap: 1px;
  min-height: 0;
  background: var(--line);
  grid-template-columns: minmax(300px, 27rem) 1fr;
  grid-template-rows: 1fr auto;
}

.page-lab .lab-workspace {
  flex: 1;
}

.lab-pane {
  display: flex;
  min-height: 0;
  flex-direction: column;
  background: var(--surface);
}

.lab-pane--statement {
  overflow-y: auto;
  padding: 22px var(--gutter) 28px;
}

.lab-pane--work {
  min-width: 0;
}

/* --------------------------------------------------------------- statement */

.problem__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.problem__title {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.problem__body {
  margin-top: 14px;
  color: var(--ink-2);
  font-size: 15.5px;
}

.problem__body p + p,
.problem__body ul + p,
.problem__body p + ul,
.problem__body p + pre {
  margin-top: 12px;
}

.problem__body ul {
  margin: 0;
  padding-left: 20px;
}

.problem__body li + li {
  margin-top: 4px;
}

.problem__body code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.problem__body pre {
  overflow-x: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
}

.problem__given {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: 13.5px;
}

.problem__given code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 600;
}

.problem__given-note {
  flex-basis: 100%;
}

.example {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.example__head {
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.example__row {
  display: grid;
  gap: 4px 14px;
  padding: 10px 14px;
  grid-template-columns: 5.5rem 1fr;
}

.example__row + .example__row {
  border-top: 1px solid var(--line);
}

.example__key {
  color: var(--ink-3);
  font-size: 12.5px;
}

.example__value {
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  /* Keep printed line breaks, but wrap a long JSON answer instead of hiding it. */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The starting page of a DOM example: label above, markup below, full width. */
.example__row--code {
  grid-template-columns: 1fr;
}

.example__markup {
  margin: 0;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: 12.5px;
  line-height: 1.55;
  /* Markup is code: scroll sideways rather than break a tag in two. */
  white-space: pre;
  overflow-wrap: normal;
}

.example__note {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 12.5px;
}

/* ------------------------------------------------------------------ editor */

/**
 * Editor over output, split down the middle by default and draggable from
 * there. The two fr values are set as custom properties so the splitter can
 * rewrite them as a ratio — px would not survive a window resize.
 *
 * `flex: 1` matters: .lab-pane is a flex column, and without it this grid
 * collapses to its content height and the editor ends up a few lines tall.
 */
.work-split {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-rows:
    minmax(5rem, var(--editor-fr, 1fr))
    auto
    auto
    minmax(4rem, var(--console-fr, 1fr));
}

.split-handle {
  position: relative;
  height: 9px;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 0;
  background: var(--surface-2);
  cursor: row-resize;
  touch-action: none;
}

.split-handle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46px;
  height: 3px;
  border-radius: var(--r-full);
  background: var(--line-strong);
  transform: translate(-50%, -50%);
}

.split-handle:hover::after,
.split-handle[data-dragging='true']::after {
  background: var(--accent);
}

.split-handle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.editor {
  display: grid;
  min-height: 0;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 14px;
  grid-template-columns: auto 1fr;
  line-height: 1.65;
}

.editor__gutter {
  overflow: hidden;
  padding: 14px 10px 14px 16px;
  border-right: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  text-align: right;
  user-select: none;
}

.editor__gutter span {
  display: block;
}

.editor__area {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

/* The two layers must agree on every metric or the caret drifts.
   The caret is placed by the textarea's font metrics while the glyphs come
   from the <pre>; any difference in advance width accumulates along the line
   and shows up as a growing gap between the text and the cursor. */
.editor__highlight,
.editor__input {
  padding: 14px 16px;
  border: 0;
  margin: 0;
  font: inherit;
  font-variant-ligatures: none;
  font-kerning: none;
  letter-spacing: normal;
  line-height: inherit;
  tab-size: 2;
  white-space: pre;
  word-wrap: normal;
}

/* Without this the <code> falls back to the UA's `monospace` family — a
   different typeface from the textarea's, which is exactly the drift above. */
.editor__highlight code {
  font: inherit;
  font-variant-ligatures: none;
  font-kerning: none;
  letter-spacing: inherit;
  white-space: inherit;
}

.editor__highlight {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.editor__input {
  position: relative;
  width: 100%;
  height: 100%;
  background: transparent;
  caret-color: var(--ink);
  color: transparent;
  outline: none;
  overflow: auto;
  resize: none;
}

.editor__input:focus-visible {
  outline: none;
}

.editor:focus-within {
  box-shadow: inset 2px 0 0 var(--accent);
}

.editor[data-readonly='true'] .editor__input {
  cursor: not-allowed;
}

/* Syntax colours for the one dark theme the app now ships. */
.tok-comment {
  color: var(--ink-4);
  font-style: italic;
}
.tok-string {
  color: #e5ce7b;
}
.tok-number,
.tok-literal {
  color: #c9a6ea;
}
.tok-keyword {
  color: #f492c0;
  font-weight: 500;
}
.tok-builtin {
  color: var(--accent);
}

/* ------------------------------------------------------------------ actions */

.work-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px var(--gutter);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.work-actions__hint {
  flex: 1;
  min-width: 8rem;
  color: var(--ink-3);
  font-size: 12.5px;
}

.work-actions kbd {
  padding: 1px 5px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 11px;
}

/* ----------------------------------------------------------------- console */

.console {
  display: flex;
  min-height: 0;
  flex-direction: column;
  background: var(--surface);
}

.console__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--line);
  color: var(--ink-3);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.console__summary {
  margin-left: auto;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
}

.console__body {
  overflow-y: auto;
  padding: 12px var(--gutter) 18px;
}

.console__empty {
  color: var(--ink-3);
  font-size: 13.5px;
}

.console__error {
  padding: 10px 12px;
  border: 1px solid var(--danger);
  border-radius: var(--r-sm);
  background: var(--danger-soft);
  color: var(--danger);
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: pre-wrap;
}

.case {
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}

.case:last-child {
  border-bottom: 0;
}

.case__head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
}

.case__mark {
  display: inline-flex;
  width: 18px;
  height: 18px;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-full);
  font-size: 11px;
  font-weight: 700;
}

.case--pass .case__mark {
  background: var(--ok-soft);
  color: var(--ok);
}

.case--fail .case__mark {
  background: var(--danger-soft);
  color: var(--danger);
}

.case__label {
  color: var(--ink);
}

.case__tag {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.case__detail {
  display: grid;
  gap: 3px 12px;
  margin-top: 7px;
  padding-left: 27px;
  grid-template-columns: 4.5rem 1fr;
}

.case__key {
  color: var(--ink-3);
  font-size: 12px;
}

.case__value {
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 12.5px;
  white-space: pre;
}

.case__hint {
  margin-top: 6px;
  padding-left: 27px;
  color: var(--warn);
  font-size: 12.5px;
}

/* ------------------------------------------------------------ problem nav */

.problem-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px var(--gutter);
  border-top: 1px solid var(--line);
  background: var(--surface);
  grid-column: 1 / -1;
  overflow-x: auto;
}

.problem-nav__list {
  display: flex;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pnav {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  white-space: nowrap;
}

.pnav:hover {
  border-color: var(--ink-3);
}

.pnav[aria-current='true'] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.pnav__dot {
  width: 8px;
  height: 8px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
}

.pnav[data-state='partial'] .pnav__dot {
  border-color: var(--warn);
  background: var(--warn);
}

.pnav[data-state='solved'] .pnav__dot {
  border-color: var(--ok);
  background: var(--ok);
}

.problem-nav__end {
  margin-left: auto;
  padding-left: 12px;
}

/* --------------------------------------------------------------- mobile */

.lab-viewswitch {
  display: none;
  gap: 6px;
  padding: 8px var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.lab-note {
  padding: 8px var(--gutter);
  background: var(--warn-soft);
  color: var(--warn);
  font-size: 13px;
  text-align: center;
}

@media (max-width: 860px) {
  /* On a phone the page scrolls normally rather than being pinned to the
     viewport — a locked-height two-pane layout is unusable at this size. */
  .page-lab {
    height: auto;
    overflow: visible;
  }

  .lab-workspace {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .lab-viewswitch {
    display: flex;
  }

  .lab-pane--statement {
    max-height: 60vh;
  }

  .work-split {
    grid-template-rows: minmax(14rem, 46vh) auto auto minmax(8rem, 30vh);
  }

  .lab-workspace[data-view='code'] .lab-pane--statement,
  .lab-workspace[data-view='problem'] .lab-pane--work {
    display: none;
  }
}

/* --------------------------------------------------------------- results */

/* The finalized Code Lab set-result design: near-black cards sitting on the
   page background, restrained figures and hairline meters. Everything here is
   scoped to the student result page, so the admin review blocks and the
   catalogue meters keep the styles they already had. */

.lab-res {
  --res-card: #0a0c0b;
  --res-line: #1a201e;
  --res-line-soft: #141917;
  --res-track: #161c1a;
  --res-meta: #7b857f;
  --res-figure: #cdd5d0;
  padding-block: clamp(36px, 5vw, 56px) clamp(56px, 8vw, 88px);
}

.lab-res .crumbs {
  --crumb-line: var(--res-line-soft);
}

.lab-res__stack {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
}

.lab-res__head {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lab-res__title {
  font-size: clamp(27px, 4vw, 34px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.lab-res__lede {
  max-width: 60ch;
  color: var(--ink-3);
  font-size: 14px;
}

/* ---- the three summary cards */

.lab-res__cards {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.lab-res-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--res-line);
  border-radius: 10px;
  background: var(--res-card);
}

.lab-res-card__label {
  color: var(--ink-3);
  font-size: 12.5px;
}

.lab-res-card__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}

.lab-res-card__value {
  font-family: var(--font-display);
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
  overflow-wrap: anywhere;
}

.lab-res-card__pct {
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.lab-res-card__note {
  color: var(--ink-4);
  font-size: 12.5px;
}

/* ---- "Problem by problem" beside "Where you stand" */

.lab-res__split {
  display: grid;
  align-items: start;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}

.lab-res-panel {
  overflow: hidden;
  border: 1px solid var(--res-line);
  border-radius: 10px;
  background: var(--res-card);
}

/* The review, when the teacher has released it, runs the full width under
   the two columns. */
.lab-res-panel--full {
  grid-column: 1 / -1;
}

.lab-res-panel__head {
  padding: 20px 22px 16px;
  font-size: 14.5px;
  font-weight: 600;
}

.lab-res-panel__body {
  padding: 2px 22px 6px;
  border-top: 1px solid var(--res-line-soft);
}

.lab-res-rows {
  padding: 0;
  margin: 0;
  list-style: none;
}

.lab-res-row {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 16px 22px 18px;
  border-top: 1px solid var(--res-line-soft);
}

.lab-res-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}

.lab-res-row__name {
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.lab-res-row__score {
  color: var(--res-figure);
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.lab-res-row__meta {
  color: var(--res-meta);
  font-size: 12px;
}

/* The band text itself is whatever the server calculated; only its colour is
   decided here. */
.lab-res-row__band {
  color: var(--ink-3);
  font-size: 12px;
}

.lab-res-row__band[data-band='Strong'] {
  color: var(--accent);
}

.lab-res-row__band[data-band='Good'] {
  color: #c9d38f;
}

/* ---- hairline meters */

.lab-res-bar {
  width: 100%;
  height: 3px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--res-track);
}

.lab-res-bar--card {
  height: 5px;
}

.lab-res-bar__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #3c4a43;
}

.lab-res-bar__fill[data-level='mid'] {
  background: #5fae86;
}

.lab-res-bar__fill[data-level='high'] {
  background: var(--accent);
}

.lab-res__foot {
  --flow: 14px;
}

.lab-res__note {
  font-size: 13px;
}

@media (max-width: 560px) {
  .lab-res-card {
    padding: 18px;
  }

  .lab-res-panel__head {
    padding: 18px 18px 14px;
  }

  .lab-res-panel__body {
    padding-inline: 18px;
  }

  .lab-res-row {
    padding: 14px 18px 16px;
  }
}

.result-problem__title {
  font-weight: 600;
}

.result-problem__topic {
  color: var(--ink-3);
  font-size: 12.5px;
}

.meter {
  width: 100%;
  height: 6px;
  overflow: hidden;
  border-radius: var(--r-full);
  background: var(--surface-sunken);
}

.meter__fill {
  height: 100%;
  border-radius: var(--r-full);
  background: var(--accent);
}

.meter__fill[data-band='Needs Revision'] {
  background: var(--danger);
}

.meter__fill[data-band='Good'] {
  background: var(--warn);
}

.review-block {
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.review-block:last-child {
  border-bottom: 0;
}

.review-block__code {
  overflow-x: auto;
  margin-top: 8px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-sunken);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  white-space: pre;
}

/* ------------------------------------------------- teacher dashboard bits */

.qa__meta {
  margin-left: auto;
  color: var(--ink-3);
  font-size: 12.5px;
}

.lab-fails {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.lab-fails__item {
  padding: 3px 10px;
  border: 1px solid var(--danger);
  border-radius: var(--r-full);
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 12px;
}

/* ---------------------------------------------------------------- solution */

/* Shown under the examples once a practice set is fully solved. Mint-edged so
   it reads as something earned, collapsed so it never crowds the statement. */
.solution {
  margin-top: 18px;
  border: 1px solid var(--accent-line);
  border-radius: var(--r-md);
  background: var(--accent-soft);
  overflow: hidden;
}

.solution__summary {
  padding: 12px 14px;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.solution__summary::-webkit-details-marker {
  display: none;
}

/* A rotating caret, so the panel reads as openable without a library icon. */
.solution__summary::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: var(--accent);
  font-size: 11px;
}

.solution[open] .solution__summary::before {
  transform: rotate(90deg);
}

.solution__summary:hover {
  color: var(--accent-hover);
}

.solution__summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.solution__note {
  padding: 0 14px;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.5;
}

.solution__code {
  padding: 12px 14px 14px;
  margin: 10px 0 0;
  overflow-x: auto;
  background: var(--surface-2);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  tab-size: 2;
  white-space: pre;
}

/* The back link sheds its label before the topbar starts wrapping. */
@media (max-width: 860px) {
  .lab-back__full {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    margin: -1px;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .lab-back__short {
    display: inline;
  }
}

@media (max-width: 560px) {
  .lab-back {
    width: 34px;
    padding: 0;
    justify-content: center;
  }

  .lab-back__short {
    display: none;
  }
}