/* Adaptive difficulty in a lesson (assets/js/adapt.js): the level meter, the chips, the step-up card, the helps row.
   Tokens from site.css, so light and dark follow the theme. Every control is 44px tall. */
/* on the lesson's meta line, right-aligned on its baseline: "20 min  5 exercises" left, the dots and the word right, no
   box, never a row of its own. The build reserves its place (tools/build_adapt.py), so nothing moves. The visible
   control is 24px; its tap area reaches 44px. Rhythm: title 8px, meta 12px, then the step bar. */
.lh-meta.has-ad { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 12px; min-height: 24px; margin: 8px 0 12px; white-space: nowrap; }
.lh-meta.has-ad .meta { min-width: 0; overflow: hidden; flex-wrap: nowrap; column-gap: 12px; }
.ad-meter { position: relative; display: inline-flex; flex: none; }
.ad-btn { position: relative; display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0; border: 0; background: none; color: var(--ink-2);
  font: 650 14px/1 var(--font); cursor: pointer; }
.ad-btn::before { content: ""; position: absolute; inset: -10px 0; }
.ad-btn:hover { color: var(--ink); }
.ad-btn:focus-visible, .ad-pop button:focus-visible, .ad-h:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 4px; border-radius: 6px; }
.ad-name { min-width: 3.9em; text-align: start; }
.ad-slot .ad-name { color: transparent; }
.ad-segs { display: inline-flex; gap: 3px; }
.ad-segs i { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--paper-3); transition: background-color .3s ease; }
:is(.ad-meter, .ad-sheet-lv)[data-lv="0"] .ad-segs i:nth-child(1),
:is(.ad-meter, .ad-sheet-lv)[data-lv="1"] .ad-segs i:nth-child(-n+2),
:is(.ad-meter, .ad-sheet-lv)[data-lv="2"] .ad-segs i { background: var(--teal); }
:is(.ad-meter, .ad-sheet-lv)[data-lv="2"] .ad-segs i:nth-child(3) { background: var(--prem); }
:is(.ad-meter, .ad-sheet-lv).is-steady .ad-segs i { background: var(--paper-3); }
:is(.ad-meter, .ad-sheet-lv).is-steady .ad-segs i:nth-child(1) { background: var(--ink-3); }
.ad-meter.is-up .ad-segs i { animation: ad-pop .55s cubic-bezier(.2, 1.4, .4, 1) both; }
.ad-meter.is-up .ad-segs i:nth-child(2) { animation-delay: .08s; }
.ad-meter.is-up .ad-segs i:nth-child(3) { animation-delay: .16s; }
.ad-meter.is-up .ad-name { animation: ad-rise .45s ease-out both; }
@keyframes ad-pop { 0% { transform: scale(1); } 40% { transform: scale(1.7); } 100% { transform: scale(1); } }
@keyframes ad-rise { 0% { transform: translateY(6px); opacity: 0; } 100% { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ad-meter.is-up .ad-segs i, .ad-meter.is-up .ad-name { animation: none; } }
.ad-pop { position: absolute; z-index: 40; top: calc(100% + 12px); right: -8px; display: grid; gap: 6px; min-width: 210px; padding: 8px;
  border: 1px solid var(--rule-2); border-radius: var(--r1); background: var(--paper-0); box-shadow: var(--pop); }
.ad-pop[hidden] { display: none; }
.ad-pop button { min-height: 44px; padding: 0 12px; border: 1px solid var(--rule-2); border-radius: 10px; background: none; color: var(--ink-2);
  text-align: start; font: 600 15px var(--font); cursor: pointer; }
.ad-pop button[aria-checked="true"] { border-color: var(--teal-text); background: var(--teal-tint); color: var(--ink); }

.ad-chip { margin-inline-start: 8px; color: var(--ink-3); font-weight: 600; }

.ad-skip { margin: 8px 0 0; }
.ad-skip a { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal-text); font-weight: 650; }
.ad-skip a:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 2px; border-radius: 6px; }

.ad-help { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 14px; }
.ad-h { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--rule-2);
  border-radius: 999px; background: var(--paper-0); color: var(--ink); font: 600 14.5px/1 var(--font); cursor: pointer; animation: ad-rise .3s ease-out both; }
.ad-h:hover { background: var(--key-2-hover); }
.ad-h:disabled { opacity: .6; cursor: progress; }
.ad-hi { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--teal-tint); position: relative; }
.ad-hi::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--teal); }
.ad-hi-worked::after { inset: 4px 5px; border-radius: 2px; }
.ad-hi-debug::after { inset: 5px 4px; border-radius: 2px 2px 6px 6px; background: var(--warn-ink); }
@media (prefers-reduced-motion: reduce) { .ad-h { animation: none; } }

.step.is-tested [data-role="status"] { color: var(--ink-3); }

/* the lesson's ⋯ sheet: the level and the three Questions choices, filled when picked */
.ad-sheet { display: grid; gap: 8px; margin: 8px 0 0; padding: 10px 0 0; }
.ad-sheet-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0; color: var(--ink); font-weight: 650; }
.ad-sheet-lv { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-2); font: 650 14px/1 var(--font); }
.ad-modes { display: grid; gap: 6px; }
.ad-modes button { min-height: 44px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--paper-2); color: var(--ink-2); text-align: start; font: 600 15px var(--font); cursor: pointer; }
.ad-modes button[aria-checked="true"] { background: var(--teal); color: var(--teal-ink); }
.ad-modes button:focus-visible { outline: 3px solid var(--teal-text); outline-offset: 2px; }