/* =====================================================================
   Shell extras: the phase picker in the sticky banner, guidebook rows that open their lesson, node popover score and kind tags,
   the "Keep your streak safe" card, the skip link, and the loading / failed-to-load notes.
   ===================================================================== */

/* ---------- phase picker: the banner's title opens a list of every unit ---------- */
.unit {
  scroll-margin-top: 150px; /* a jump from the picker lands the unit's divider just under the top bar and the banner */
}
.us-pick {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.us-pick > span {
  min-width: 0;
}
.us-pick svg {
  flex: none;
  width: 16px;
  height: 16px;
  transition: transform var(--dur-3) var(--ease-spring);
}
.us-pick[aria-expanded="true"] svg {
  transform: rotate(180deg);
}
.us-pick:focus-visible {
  outline-color: var(--u-on);
}
.us-menu {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 10px);
  max-height: min(60vh, 420px);
  max-height: min(60dvh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 4px 0 var(--line);
  color: var(--text);
}
.us-menu[hidden] {
  display: none;
}
.us-opt {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 2px solid transparent;
  border-radius: 12px;
  background: none;
  font: inherit;
  font-weight: 800;
  line-height: 1.3;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.us-opt.on {
  background: var(--u-soft);
  border-color: var(--u);
}
.us-opt:focus-visible {
  outline-offset: -3px;
}
@media (hover: hover) and (pointer: fine) {
  .us-opt:not(.on):hover {
    background: var(--bg-2);
  }
}
.us-opt-n {
  flex: none;
  min-width: 66px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--u-ink);
}
.us-opt-t {
  flex: 1;
  min-width: 0;
}
.us-opt-p {
  flex: none;
  font-size: 12.5px;
  font-weight: 900;
  color: var(--text-faint);
}
.us-opt-p.done {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--teal-on);
}
.us-opt-p svg {
  width: 14px;
  height: 14px;
}
/* the last phases can scroll up to the banner even on a tall window: the end of the path is never shorter than this */
.path-end {
  min-height: calc(100vh - 640px);
  min-height: calc(100dvh - 640px);
}

/* ---------- guidebook: each lesson is a link, finished ones carry a tick ---------- */
a.gb-mod {
  display: block;
  color: inherit;
  font-weight: inherit;
}
.gb-mod h3 {
  align-items: center;
}
.gb-title {
  flex: 1;
  min-width: 0;
}
.gb-tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--teal-on);
}
.gb-tick svg {
  width: 14px;
  height: 14px;
}
.gb-mod:focus-visible {
  outline-offset: -4px;
}

/* ---------- node popover: score and kind tag ---------- */
.node-pop .np-kind {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.pt-tip .np-kind {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  background: var(--u-soft);
  color: var(--u-ink);
}
.node-pop .np-score {
  margin: -4px 0 10px;
  font-weight: 800;
}
.node-pop .np-n {
  font-size: 16px;
  font-weight: 900;
}

/* ---------- "Keep your streak safe" ---------- */
.nudge-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
  align-items: center;
  margin: 0 0 14px;
  padding: 14px;
}
.nd-t {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nd-t b {
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}
.nd-t span {
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.4;
}
.nd-acts {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

/* ---------- skip link: first thing a keyboard reaches, shown only while focused ---------- */
.skip-link {
  position: fixed;
  left: 12px;
  top: 10px;
  z-index: 300;
  padding: 10px 14px;
  border: 2px solid var(--blue-ink);
  border-radius: 12px;
  background: var(--panel);
  color: var(--blue-ink);
  font-weight: 900;
  transform: translateY(-160%);
}
.skip-link:focus {
  transform: translateY(0);
}
body.in-lesson .skip-link {
  display: none;
}

/* ---------- loading a page, and a page that would not load ---------- */
.wait-note {
  position: fixed;
  top: 74px;
  left: 50%;
  z-index: 60;
  transform: translateX(-50%);
  padding: 8px 14px;
  border: 2px solid var(--line);
  border-radius: 99px;
  background: var(--panel);
  box-shadow: 0 3px 0 var(--line);
  color: var(--text-dim);
  font-size: 14px;
  font-weight: 800;
}
.wait-note[hidden] {
  display: none;
}
.boot-fail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 48px 0;
  text-align: center;
}
.boot-fail b {
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}
.boot-fail span {
  color: var(--text-dim);
  margin-bottom: 8px;
}

/* ---------- onboarding: "Already have an account? Log in" is a quiet text link under the main button ---------- */
.ob-login {
  appearance: none;
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 10px 8px;
  border: 0;
  background: none;
  color: var(--blue-ink);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: underline;
  cursor: pointer;
}