.navbar-training-strip {
  position: fixed;
  z-index: 1029;
  top: 86px;
  right: 0;
  left: 0;
  width: 100%;
  border-block: 1px solid var(--bs-border-color, var(--line, #303945));
  background: color-mix(in srgb, var(--bs-primary, var(--blue, #4969f5)) 4%, var(--bs-body-bg, var(--canvas, #0d141a)));
}
.navbar-training-strip.is-dashboard { position: sticky; top: 86px; }

/* Native WKWebViews remove the website navbar and already begin beneath the
   app's own header. Attach the helper strip to that web-view edge instead of
   retaining the website navbar offset. The stronger body selector also wins
   over the native chrome-removal script's generic zero-padding rule. */
html[data-muzieka-native="true"] .navbar-training-strip { top: 0; }
html[data-muzieka-native="true"] body.has-navbar-training-strip {
  padding-top: 24px !important;
}

body.has-navbar-training-strip { padding-top: 110px !important; }

.navbar-training-strip__inner,
.navbar-training-strip .setup-quest.is-navbar-dock,
.navbar-training-strip .song-room-learning.is-navbar-dock {
  position: relative;
  width: min(1450px, calc(100% - 40px));
  margin: 0 auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* setup-quests.css is injected with deferred Songwriter content and loads
   after this file. Its completed-card treatment must not add card chrome or
   vertical margin back into the thin navbar strip. */
.navbar-training-strip .setup-quest.is-navbar-dock.is-sequential.is-compact.is-minimal-complete {
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-head {
  grid-template-columns: minmax(0, 1fr) 16px;
  gap: 6px;
  min-height: 22px;
  padding: 1px 0;
}

/* The completed songwriter variant is loaded after this stylesheet and has a
   taller compact header. Keep navbar-docked quests on the same 22px rhythm. */
.navbar-training-strip .setup-quest.is-navbar-dock.is-sequential.is-minimal-complete .setup-quest-head {
  grid-template-columns: minmax(0, 1fr) 16px;
  gap: 6px;
  min-height: 22px;
  padding: 1px 0;
}

.navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-mark { display: none; }
.navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-heading {
  display: grid;
  grid-template-columns: auto minmax(120px, .55fr) minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.navbar-training-strip .setup-quest.is-navbar-dock.is-sequential.is-minimal-complete .setup-quest-heading {
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr);
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow: visible;
}
.navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-kicker { font-size: 7px; white-space: nowrap; }
.navbar-training-strip .setup-quest.is-navbar-dock.is-sequential.is-minimal-complete .setup-quest-kicker {
  color: var(--sq-accent);
  font-size: 7px;
}
.navbar-training-strip .setup-quest.is-navbar-dock h2 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar-training-strip .setup-quest.is-navbar-dock.is-sequential.is-minimal-complete h2 {
  margin: 0;
  color: inherit;
  font-size: 11px;
  line-height: 1;
}
.navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-progress { height: 2px; }
.navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-chevron { width: 16px; height: 16px; font-size: 8px; }
.navbar-training-strip .setup-quest.is-navbar-dock.is-sequential.is-minimal-complete .setup-quest-chevron {
  grid-column: 2;
  width: 16px;
  height: 16px;
  font-size: 8px;
}

.navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-body,
.navbar-training-strip .song-room-learning.is-navbar-dock .song-room-learning__rail,
.navbar-training-strip__drawer {
  position: absolute;
  z-index: 1070;
  top: calc(100% + 4px);
  left: 50%;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  padding: 11px clamp(10px, 3vw, 48px);
  transform: translateX(-50%);
  border-block: 1px solid var(--bs-border-color, var(--line, #303945));
  border-inline: 0;
  border-radius: 0;
  background: var(--bs-body-bg, var(--canvas, #0d141a));
  box-shadow: 0 18px 48px rgba(0, 0, 0, .3);
}
.navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-steps { padding: 0 0 4px; }

/* Songwriter setup uses the same compact card language as the Dashboard
   mastery drawer. The shared drawer rule above owns identical end gutters. */
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step {
  min-height: 88px;
  border: 1px solid #3149a9;
  border-radius: 12px;
  background: #101722;
}
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step.is-complete {
  border-color: #218b63;
}
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step.is-guide {
  border-style: solid;
}
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step > div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step > div::before {
  content: "Songwriter";
  overflow: hidden;
  color: #5268ff;
  font-size: 8px;
  font-weight: 950;
  letter-spacing: .11em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step.is-guide > div::before {
  content: "Songwriter guide";
}
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step strong {
  margin-top: 2px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step p {
  margin-top: 2px;
}
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-step-open {
  justify-self: end;
}
.navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step.is-complete .setup-step-open {
  color: #4ed69b;
}

html[data-bs-theme="light"] .navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step {
  border-color: #9aabff;
  color: #171b24;
  background: #f7f9ff;
}
html[data-bs-theme="light"] .navbar-training-strip [data-setup-quest][data-quest-key="songwriter"].is-navbar-dock .setup-quest-step.is-complete {
  border-color: #3ac58c;
  background: #f2fcf8;
}

.navbar-training-strip .song-room-learning.is-navbar-dock { margin-top: 0; }
.navbar-training-strip .song-room-learning.is-navbar-dock .song-room-learning__header {
  min-height: 22px;
  padding: 1px 0;
}
.navbar-training-strip .song-room-learning.is-navbar-dock .song-room-learning__eyebrow { font-size: 7px; }
.navbar-training-strip .song-room-learning.is-navbar-dock .song-room-learning__heading h2 { font-size: 11px; line-height: 1; }
.navbar-training-strip .song-room-learning.is-navbar-dock .song-room-learning__toggle { width: 16px; height: 16px; font-size: 8px; }
.navbar-training-strip .song-room-learning.is-navbar-dock .song-room-learning__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 270px;
  gap: 8px;
  overflow-x: auto;
}
.navbar-training-strip .song-room-learning.is-navbar-dock .song-room-learning__rail[hidden],
.navbar-training-strip__drawer[hidden] { display: none; }

.navbar-training-strip__toggle {
  display: grid;
  grid-template-columns: auto minmax(120px, .55fr) minmax(120px, 1fr) 16px;
  gap: 8px;
  align-items: center;
  width: 100%;
  min-height: 22px;
  padding: 1px 0;
  border: 0;
  color: var(--bs-body-color, var(--ink, #f5f7fb));
  background: transparent;
  text-align: left;
}
.navbar-training-strip__kicker { color: var(--bs-primary, var(--blue, #4969f5)); font-size: 7px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; }
.navbar-training-strip__title { overflow: hidden; font-size: 11px; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap; }
.navbar-training-strip__progress { height: 2px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); }
.navbar-training-strip__progress > span { display: block; height: 100%; background: linear-gradient(90deg, #5268ff, #8a7cff); }
.navbar-training-strip__chevron { display: grid; width: 16px; height: 16px; place-items: center; color: var(--bs-secondary-color, var(--muted, #9aa1ad)); font-size: 8px; transition: transform .18s ease; }
.navbar-training-strip__toggle[aria-expanded="true"] .navbar-training-strip__chevron { transform: rotate(180deg); }
.navbar-training-strip__rail { display: grid; grid-auto-flow: column; grid-auto-columns: 270px; gap: 8px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
.navbar-training-strip__rail .mastery-lesson {
  display: grid;
  width: 270px;
  min-height: 88px;
  grid-template-columns: 23px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 10px 11px;
  border-width: 1px;
  border-radius: 12px;
}
.navbar-training-strip__rail .mastery-lesson-check {
  grid-column: 1;
  grid-row: 1;
  width: 23px;
  height: 23px;
}
.navbar-training-strip__rail .mastery-lesson-copy {
  display: flex;
  min-width: 0;
  min-height: 66px;
  grid-column: 2;
  flex-direction: column;
}
.navbar-training-strip__rail .mastery-lesson-track {
  overflow: hidden;
  font-size: 8px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar-training-strip__rail .mastery-lesson strong {
  display: block;
  margin-top: 2px;
  overflow: hidden;
  font-size: 12px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.navbar-training-strip__rail .mastery-lesson p {
  display: -webkit-box;
  margin: 2px 0 0;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.navbar-training-strip__rail .mastery-lesson-action {
  margin-top: auto;
  padding-top: 8px;
  font-size: 10px;
  white-space: nowrap;
}

html[data-bs-theme="dark"] .navbar-training-strip { background: #0f1a24; }

@media (max-width: 767px) {
  body.has-navbar-training-strip { padding-top: 94px !important; }
  .navbar-training-strip { top: 72px; }
  .navbar-training-strip__inner,
  .navbar-training-strip .setup-quest.is-navbar-dock,
  .navbar-training-strip .song-room-learning.is-navbar-dock { width: calc(100% - 28px); }
  .navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-heading { grid-template-columns: minmax(0, 1fr) minmax(75px, .45fr); }
  .navbar-training-strip .setup-quest.is-navbar-dock .setup-quest-kicker { display: none; }
  .navbar-training-strip__toggle { grid-template-columns: minmax(0, 1fr) minmax(75px, .45fr) 16px; }
  .navbar-training-strip__kicker { display: none; }
  .navbar-training-strip__rail,
  .navbar-training-strip .song-room-learning.is-navbar-dock .song-room-learning__rail { grid-auto-columns: min(235px, 78vw); }
  .navbar-training-strip__rail .mastery-lesson { width: min(235px, 78vw); }

  /* Keep the native override last as well as more specific. This prevents the
     phone breakpoint from restoring the website navbar's 72px reservation. */
  html[data-muzieka-native="true"] .navbar-training-strip { top: 0; }
  html[data-muzieka-native="true"] body.has-navbar-training-strip {
    padding-top: 24px !important;
  }
}