/* style.css — All visual styling for Communication Trainer */

/* ─── THEME TOKENS ────────────────────────────────────────────────────────────
   Oxide (light, default) and Ember (dark mode)
   Toggle by adding class "theme-ember" to <body>
────────────────────────────────────────────────────────────────────────────── */

:root {
  --ds-bg:          #F0EBE3;
  --ds-card:        #FFFFFF;
  --ds-card-alt:    #F8F4EE;
  --ds-border:      #D8CFBF;
  --ds-border-sub:  #EAE4DA;
  --ds-acc:         #B05A28;
  --ds-acc-text:    #FFFFFF;
  --ds-txt:         #2C1F10;
  --ds-txt2:        #8A6040;
  --ds-txt3:        #C0A880;
  --ds-nav-bg:      #F0EBE3;
  --ds-splash-bg:   #1E1008;
  --ds-splash-acc:  #F2622A;
  --ds-toggle-on:   #B05A28;
  --ds-subnav-btn:  #E0D8CA;
  --ds-subnav-act:  #B05A28;
  --ds-subnav-actT: #FFFFFF;
  --ds-search-bg:   #E4DDD2;
  --ds-divider:     #D8CFBF;
  --ds-prog-acc:    #B05A28;
  /* Calendar intensity steps (v1.26.49) — accent blended toward the card */
  --ds-cal-1:       #EFDED4;
  --ds-cal-2:       #DFBDA9;
  --ds-cal-3:       #CC9473;
  --ds-cal-4:       #B05A28;
  --ds-cal-4-txt:   #FFFFFF;
  --ds-ring-track:  #EEE6DB;   /* progress day rings (v1.29.52) */
  --ds-shadow:      rgba(44,31,16,0.10);
  --ds-topbar-btn:  #FFFFFF;
  --ds-topbar-btnT: #8A6040;
  --ds-lock-pro:    #5856d6;
  --ds-lock-comp:   #B05A28;
  --ds-pro-badge:   #5856d6;
  /* Hero/banner gradient (v1.26.35) — separate vars so dark mode can use a
     calmer, deeper ember instead of the full-saturation orange. */
  --ds-hero-a:      var(--ds-acc);
  --ds-hero-b:      #F2622A;
  /* Bottom nav height WITHOUT the safe-area inset (v1.26.68). One number in
     one place: the nav sets its own height from it, and every full-screen
     container uses it as padding-bottom, so the scroll area ends exactly at
     the nav's top line. Before this they were two independent magic numbers
     (84px vs a nav that measured about 62px), which left a dead band where
     content vanished before reaching the line. 6px top + 6px bottom padding
     + a 49px tab (22px icon, 2px gap, 10px label, 6px padding) + 1px border. */
  --ds-nav-h:       62px;
}

body.theme-ember {
  --ds-bg:          #18120A;
  --ds-card:        #211809;
  --ds-card-alt:    #1A140A;
  --ds-border:      #33240F;
  --ds-border-sub:  #2A1C0A;
  --ds-acc:         #F2622A;
  --ds-acc-text:    #FFFFFF;
  --ds-txt:         #E8D5C0;
  --ds-txt2:        #8A6A50;
  --ds-txt3:        #5A4030;
  --ds-nav-bg:      #120E07;
  --ds-splash-bg:   #0D0D0D;
  --ds-splash-acc:  #FF7800;
  /* Muted ember banner gradient for dark mode (v1.26.35) */
  --ds-hero-a:      #6E3316;
  --ds-hero-b:      #9A481E;
  --ds-toggle-on:   #F2622A;
  --ds-subnav-btn:  #2A1C0A;
  --ds-subnav-act:  var(--ds-acc);
  --ds-subnav-actT: #FFFFFF;
  --ds-search-bg:   #2A1C0A;
  --ds-divider:     #2A1C0A;
  --ds-prog-acc:    #F2622A;
  --ds-cal-1:       #552A11;
  --ds-cal-2:       #7F3918;
  --ds-cal-3:       #B34C20;
  --ds-cal-4:       #F2622A;
  --ds-cal-4-txt:   #18120A;
  --ds-ring-track:  #33240F;
  --ds-shadow:      rgba(0,0,0,0.35);
  --ds-topbar-btn:  #2A1C0A;
  --ds-topbar-btnT: #8A6A50;
  --ds-lock-pro:    #7860e0;
  --ds-lock-comp:   #F2622A;
  --ds-pro-badge:   #7860e0;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { height: 100%; overflow: hidden; overscroll-behavior: none; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--ds-bg);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* ─── SCREEN TRANSITIONS ─────────────────────────────────────────────────── */

.slide-in-right {
  animation: slideInRight 0.32s cubic-bezier(0.4,0,0.2,1) forwards;
}

.slide-out-right {
  animation: slideOutRight 0.32s cubic-bezier(0.4,0,0.2,1) forwards;
}

.slide-in-bottom {
  animation: slideInBottom 0.32s cubic-bezier(0.4,0,0.2,1) forwards;
}

.slide-out-bottom {
  animation: slideOutBottom 0.32s cubic-bezier(0.4,0,0.2,1) forwards;
}

@keyframes slideInRight {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

@keyframes slideOutRight {
  from { transform: translateX(0); }
  to   { transform: translateX(100%); }
}

@keyframes slideInBottom {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes slideOutBottom {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

.home-screen, .mode-screen, .app {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
}

.home-screen {
  width: 100%;
  max-width: 420px;
  /* v1.26.68 — was height:100% + min-height:-webkit-fill-available.
     -webkit-fill-available resolves to the LARGE viewport on iOS Safari (URL
     bar collapsed), so with the URL bar showing the screen was forced taller
     than the visible area — which is what produced the few pixels of drag and
     the scrollbar on locked parts of every screen. 100dvh is the supported
     replacement (iOS 15.4+); the 100vh line above it is the old fallback. */
  height: 100vh;
  height: 100dvh;
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  padding: 0 20px;
  overflow-y: auto;
}

.home-topbar {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0 0;
}

.home-topbar .topbar-btn {
  font-size: 22px;
  color: rgba(60, 25, 5, 0.85);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
/* Uppgift 7 — home topbar SVG slightly larger */
.home-topbar .topbar-btn svg { width: 26px; height: 26px; }

.home-header { padding: 56px 0 8px; text-align: center; }
.home-title { font-size: 26px; font-weight: 800; color: var(--ds-txt); letter-spacing: -0.3px; }
.home-subtitle { font-size: 14px; color: var(--ds-txt2); margin-top: 6px; }

.home-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-txt2);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 32px 0 12px;
}

.collection-card {
  background: var(--ds-card);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px var(--ds-shadow);
  border: 0.5px solid var(--ds-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.collection-card:active { transform: scale(0.98); opacity: 0.9; }
.collection-name { font-size: 17px; font-weight: 700; color: var(--ds-txt); }
.collection-meta { font-size: 13px; color: var(--ds-txt2); margin-top: 3px; }
.collection-arrow { font-size: 20px; color: var(--ds-txt3); }

/* ─── MODE SELECTION SCREEN ───────────────────────────────────────────────── */

.mode-screen {
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;   /* v1.26.68 — see .home-screen */
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.mode-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
}

/* Ensure back and next buttons have equal fixed width so center group is truly centered */
#modeBackBtn, #modeNextBtn {
  flex: 0 0 40px;
}
.mode-topbar-center {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
  justify-content: center;
}

.mode-header {
  padding: 16px 20px 24px;
  text-align: center;
}

.mode-collection-name {
  font-size: 24px;
  font-weight: 800;
  color: var(--ds-txt);
  letter-spacing: -0.3px;
}

.mode-subtitle {
  font-size: 14px;
  color: var(--ds-txt2);
  margin-top: 6px;
}

.mode-list {
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mode-card {
  background: var(--ds-card);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 10px var(--ds-shadow);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 16px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.mode-card:active { transform: scale(0.98); opacity: 0.9; }

.mode-card--soon {
  opacity: 0.45;
  cursor: default;
}
.mode-card--soon:active { transform: none; opacity: 0.45; }

.mode-icon {
  font-size: 28px;
  width: 44px;
  text-align: center;
  color: var(--ds-acc);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mode-card--soon .mode-icon { color: var(--ds-txt3); }

.mode-info { flex: 1; }
.mode-name { font-size: 17px; font-weight: 700; color: var(--ds-txt); }
.mode-desc { font-size: 13px; color: var(--ds-txt2); margin-top: 3px; }
.mode-card--soon .mode-name { color: var(--ds-txt2); }

.mode-arrow { font-size: 20px; color: var(--ds-txt3); }
.mode-card--soon .mode-arrow { visibility: hidden; }

/* ─── TRAINING SCREEN ─────────────────────────────────────────────────────── */

.app {
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;   /* v1.26.68 — see .home-screen */
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
}

.topbar-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ds-topbar-btnT);
  touch-action: manipulation;
}

/* Uppgift 6 — larger gear/close icons in topbar buttons */
.topbar-btn svg { width: 26px; height: 26px; }

/* Uppgift 1 — larger ✕ on close buttons to match gear icon size */
[id$="CloseBtn"], #closeBtn { font-size: 26px; }

.counter { font-size: 15px; font-weight: 600; color: var(--ds-txt2); letter-spacing: 0.5px; }
.divider {
  height: 2px;
  background: var(--ds-divider);
}

/* Progress bar mode — activated by .pb-enabled on body */
body.pb-enabled .divider {
  height: 4px;
  background: var(--ds-border);
  position: relative;
  cursor: pointer;
  touch-action: none;
  border-radius: 2px;
  margin: 0;
  transition: height 0.2s;
}

body.pb-enabled .divider::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: calc(var(--pb-fill, 0) * 1%);
  background: var(--ds-acc);
  border-radius: 2px;
  transition: width 0.2s ease;
}

/* Larger hit area on touch */
body.pb-enabled .divider::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  top: -10px; bottom: -10px;
}

.strategy-label {
  text-align: center;
  padding: 18px 20px 10px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ds-txt);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.strategy-label:active { opacity: 0.6; }

/* ─── CARD ────────────────────────────────────────────────────────────────── */

.card-area {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px 20px;
}

.card {
  width: 100%;
  min-height: 340px;
  background: var(--ds-card);
  border-radius: 20px;
  box-shadow: 0 4px 20px var(--ds-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 32px;
  cursor: pointer;
  position: relative;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.card-inner {
  width: 100%;
  min-height: 260px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.4s ease;
}
.card-inner.flipped { transform: rotateY(180deg); }

.card-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 8px;
}
.card-back { transform: rotateY(180deg); }

.card-text {
  font-size: 20px;
  line-height: 1.55;
  color: var(--ds-txt);
  text-align: center;
  font-weight: 400;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.card-back .card-text { color: var(--ds-txt2); font-size: 18px; }

/* The back of a Sequences scenario card is a numbered list of the moves, so
   its line breaks have to survive. Scoped to these two elements ON PURPOSE:
   .card-text collapses newlines everywhere else, and 56 cards elsewhere in the
   library contain one — lifting the rule to .card-text would restyle all of
   them in one go, which is a separate decision. Nothing else reaches these two
   ids: a step's back is a single spoken line (0 of 2059 sequence texts contain
   a line break). v1.27.17. */
#flowBackText, #hfFlowBackText { white-space: pre-line; }

/* v1.27.18 — the pack / programme note field inside a settings panel. Styled
   from the tag input rather than the card note panel, because it sits in a
   settings sheet and should read as part of it. */
.scope-note-area {
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ds-txt);
  background: var(--ds-bg2, transparent);
  border: 1.5px solid var(--ds-border);
  border-radius: 10px;
  resize: vertical;
  min-height: 92px;
}
.scope-note-area:focus { outline: none; border-color: var(--ds-acc); }

/* ─── INFO OVERLAY ────────────────────────────────────────────────────────── */

.card-info {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--ds-card);
  border-radius: 20px;
  padding: 36px 28px 20px 28px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 10;
}
.card-info.visible { display: block; }

.card-info-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  background: var(--ds-card-alt);
  color: var(--ds-txt2);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

/* ── NATIVE TOP SPACING (v1.27.10) ─────────────────────────────────────────
   In a browser the page sits inside browser chrome and the top of the layout
   has room above it. In the Capacitor build the web view is full screen, so
   the same layout starts higher up and the top row reads as cramped.

   The extra room is therefore applied ONLY in the native build. app-core.js
   puts `ds-native` on <html> when Capacitor is present; nothing changes in
   the browser, which is why the web app has always looked right.

   ONE NUMBER TUNES IT: --ds-native-top. Raise or lower it and every top row
   moves together. It is added on top of whatever the element already had.

   If the status bar ever OVERLAPS the content rather than merely crowding it,
   this is the wrong fix and the real one is env(safe-area-inset-top) — the
   bottom inset is already handled that way further down this file.

   v1.30.06 — that is what happened, so the real fix is now in place (block
   below). The extra room stays available but is set to 0: on top of the safe
   area it pushed the training topbar too far down. */
:root { --ds-native-top: 0px; }

/* ── SAFE AREA IN THE NATIVE BUILD (v1.30.06) ──────────────────────────────
   The iOS app used Capacitor's contentInset "automatic": iOS pushed the whole
   web page down inside an invisible scroll view. That push was unreliable — the
   app STARTED with the page under the status bar and only dropped into place
   after something like the keyboard nudged it. On an iPhone with a Dynamic
   Island that put the back arrows and Skip under the clock, untappable.

   capacitor.config.json now says contentInset "never" (the web view is the
   whole screen, nothing moves it), and the app keeps clear of the status bar
   and the home indicator itself, here. env() gives the real numbers for each
   phone: about 20 at the top on an iPhone SE, about 59 on an iPhone 16.

   Moved: every full-screen CONTENT layer. Not moved: the splash, dim
   backdrops behind sheets and dialogs, the bottom nav (which already pads
   itself with env(safe-area-inset-bottom)), and bottom sheets.
   Screens that sit above the bottom nav already add the bottom inset to
   their padding, so only their top moves; screens without the nav also stop
   above the home indicator. height:auto lets top/bottom decide the size
   instead of 100dvh, which would otherwise run off the bottom.
   Only under .ds-native — the browser is untouched. */
.ds-native .home-screen,
.ds-native .dashboard-screen,
.ds-native .progress-screen,
.ds-native .upgrade-screen,
.ds-native .extended-screen {
  top: env(safe-area-inset-top);
  height: auto;
}
.ds-native .mode-screen,
.ds-native .app,
.ds-native .settings-screen,
.ds-native #onboardingScreen,
.ds-native #packIntroScreen {
  top: env(safe-area-inset-top);
  bottom: env(safe-area-inset-bottom);
  height: auto;
}
/* the checkpoint screen sets inset:0 inline, hence !important */
.ds-native #checkpointScreen {
  top: env(safe-area-inset-top) !important;
  bottom: env(safe-area-inset-bottom) !important;
}

.ds-native .topbar      { padding-top: calc(16px + var(--ds-native-top)); }
.ds-native .lib-banner  { padding-top: calc(18px + var(--ds-native-top)); }
.ds-native .dash-hero   { padding-top: calc(34px + var(--ds-native-top)); }

/* ── GUIDES (v1.27.08) ─────────────────────────────────────────────────────
   The in-app walkthroughs. They reuse the pack-intro screen and its .ob-*
   classes wholesale; everything here is the illustration layer on top.

   The pictures are DRAWN, not screenshotted. An inline SVG follows the theme
   variables, never goes stale when the interface moves, weighs nothing, and
   needs no device to produce. A screenshot fails all four. */
.gd-art {
  display: block;
  width: 100%;
  max-width: 250px;
  margin: 2px auto 12px;
  overflow: visible;
}
.gd-art .gd-card   { fill: var(--ds-card); stroke: var(--ds-border); stroke-width: 1.5; }
.gd-art .gd-panel  { fill: var(--ds-card-alt); stroke: var(--ds-border-sub); stroke-width: 1.5; }
.gd-art .gd-line   { fill: var(--ds-txt3); opacity: .55; }
.gd-art .gd-line--strong { fill: var(--ds-txt2); opacity: .8; }
.gd-art .gd-arrow  { stroke: var(--ds-acc); stroke-width: 2.2; fill: none;
                     stroke-linecap: round; stroke-linejoin: round; }
.gd-art .gd-ring   { stroke: var(--ds-acc); stroke-width: 1.6; fill: none; opacity: .55; }
.gd-art .gd-dot    { fill: var(--ds-acc); }
.gd-art .gd-icon   { stroke: var(--ds-txt2); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; }   /* v1.29.93 — the gear */
/* v1.29.97 — pictures for the Voices, Progress and Settings guides */
.gd-art .gd-ok        { stroke: #3c8a4a; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.gd-art .gd-badge     { fill: var(--ds-acc); opacity: .9; }
.gd-art .gd-badge-tx  { fill: #fff; font-size: 9px; font-weight: 700; font-family: inherit; }
.gd-art .gd-track     { stroke: var(--ds-border); fill: none; }
.gd-art .gd-fill      { stroke: var(--ds-acc); fill: none; stroke-linecap: round; }
.gd-art .gd-track-bar { fill: var(--ds-border); }
.gd-art .gd-fill-bar  { fill: var(--ds-acc); }
.gd-art .gd-tog-on    { fill: var(--ds-acc); }
.gd-art .gd-tog-off   { fill: var(--ds-txt3); opacity: .45; }   /* v1.29.98 — visible in dark mode too */
.gd-art .gd-knob      { fill: #fff; }
.gd-art .gd-hero      { fill: var(--ds-acc); opacity: .85; }
.gd-art .gd-icon--light { stroke: rgba(60, 25, 5, 0.85); }
.gd-art .gd-line--light { fill: #fff; opacity: .8; }
.gd-art .gd-label  { fill: var(--ds-txt2); font-size: 9px; font-weight: 700;
                     font-family: inherit; letter-spacing: .02em; }
.gd-art .gd-muted  { fill: var(--ds-txt3); font-size: 8.5px; font-family: inherit; }

/* caption under a picture */
.gd-cap {
  text-align: center;
  font-size: 12.5px;
  color: var(--ds-txt3);
  margin: -6px 0 14px;
}

/* the two rows added to every training settings panel */
.gd-settings-head {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-txt2);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 14px 0 2px;
}
.gd-btn {
  font-size: 13px;
  color: var(--ds-acc);
  background: var(--ds-card-alt);
  border: 1px solid var(--ds-border-sub);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
}

/* ── PER-CARD NOTES (v1.27.03) ─────────────────────────────────────────────
   Same panel geometry as .card-info so the two feel like one mechanism: it
   covers the card, it closes with the same cross, and it stops the card's
   swipe gestures. The difference is that this one is writable. */
.card-note {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--ds-card);
  border-radius: 20px;
  padding: 36px 24px 18px 24px;
  z-index: 11;
  flex-direction: column;
}
.card-note.visible { display: flex; }

.card-note-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-txt);
  margin-bottom: 10px;
  flex: 0 0 auto;
}

.card-note-area {
  flex: 1 1 auto;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  background: transparent;
  color: var(--ds-txt);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  padding: 0;
  -webkit-appearance: none;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.card-note-area::placeholder { color: var(--ds-txt2); opacity: .6; }

/* THE NOTE MARK (v1.27.04)
   No extra glyph: the separator that is already sitting between the two
   navigation groups does the job. A card with a note simply makes it heavier.
   Nothing appears or disappears, so the line never changes width.
   Deliberately NOT an accent colour — the hint line is the quietest thing on
   the screen and the mark has to stay inside that register. */
.hint-sep {
  font-weight: 400;
  color: inherit;
  transition: font-weight .15s ease, color .15s ease;
}
.hint.has-note .hint-sep {
  font-weight: 800;
  color: var(--ds-txt2);
}

/* Hints turned off. `visibility: hidden` used to be used here, which also
   made the line untappable and killed the three-tap that opens a note. The
   text is made transparent instead: the box, and its taps, stay.

   v1.27.05 — WRITTEN AS `.hint.hint--muted`, not `.hint--muted`. The base
   `.hint` rule sets a colour and is declared LATER in this file, so at equal
   specificity it won and the muted rule did nothing at all. Doubling the
   class is what makes it stick; do not simplify it back. */
.hint.hint--muted { color: transparent; }
.hint.hint--muted .hint-sep { color: transparent; }
/* …except that a card carrying a note still shows one very quiet dot. */
.hint.hint--muted.has-note .hint-sep {
  color: var(--ds-txt3);
  font-weight: 400;
  opacity: .55;
}

.card-info-text {
  font-size: 15px;
  line-height: 1.7;
  color: var(--ds-txt);
  white-space: pre-wrap;
}

/* ─── HINT & BOTTOM NAV ───────────────────────────────────────────────────── */

.hint {
  text-align: center;
  font-size: 12px;
  color: var(--ds-txt3);
  padding: 0 20px 8px;
  line-height: 1.8;
  -webkit-user-select: none;
  user-select: none;
}

.bottombar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 32px 28px;
}

.nav-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--ds-topbar-btn);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: var(--ds-topbar-btnT);
  box-shadow: 0 1px 4px var(--ds-shadow);
  touch-action: manipulation;
}

/* ─── SETTINGS ────────────────────────────────────────────────────────────── */

.settings-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 100;
  justify-content: center;
  align-items: flex-end;
}
.settings-overlay.open { display: flex; }

.settings-panel {
  background: var(--ds-card);
  width: 100%;
  max-width: 420px;
  border-radius: 20px 20px 0 0;
  padding: 24px 24px 100px;
  max-height: 80vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.settings-title { font-size: 17px; font-weight: 700; color: var(--ds-txt); margin-bottom: 20px; }

.settings-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-border-sub);
}
.settings-row:last-of-type { border-bottom: none; }
.settings-row label { font-size: 15px; color: var(--ds-txt); }

/* v1.29.47 — fold-out explanations and the Grid navigation row */
.settings-row--help > label:first-child {
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  /* v1.29.60 — the whole empty stretch up to the control folds the text out,
     not just the words. A 14px gap before the control keeps the two apart. */
  flex: 1 1 auto; min-width: 0; align-self: stretch;
  margin: -12px 14px -12px 0; padding: 12px 0;
}
/* v1.29.59 — no chevron after the names (Rikard: too much on screen). Tapping the name still folds the explanation out. */
.settings-row.is-open { border-bottom: none; padding-bottom: 6px; }
.settings-help {
  font-size: 13px; line-height: 1.45; color: var(--ds-txt2);
  padding: 0 64px 12px 0; border-bottom: 1px solid var(--ds-border-sub);
}
.settings-sub { display: block; font-size: 12px; color: var(--ds-txt2); margin-top: 2px; }
.settings-pro-pill {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 8px;
  font-size: 11px; font-weight: 700; color: #fff; background: var(--ds-pro-badge); vertical-align: 2px;
}
.settings-pro-pill[hidden] { display: none; }
.settings-row--locked .toggle { opacity: 0.4; }

.settings-version { margin-top: 16px; font-size: 12px; color: var(--ds-txt3); text-align: center; }

.toggle { position: relative; width: 48px; height: 28px; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 28px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle-slider::before {
  content: '';
  position: absolute;
  width: 22px; height: 22px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.toggle input:checked + .toggle-slider { background: var(--ds-toggle-on); }
.toggle input:checked + .toggle-slider::before { transform: translateX(20px); }

.settings-close {
  margin-top: 20px;
  width: 100%;
  padding: 14px;
  background: var(--ds-card-alt);
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-txt);
  cursor: pointer;
  touch-action: manipulation;
}

/* ─── SWIPE ANIMATIONS ────────────────────────────────────────────────────── */

.card.swipe-left  { animation: swipeLeft  0.22s ease forwards; }
.card.swipe-right { animation: swipeRight 0.22s ease forwards; }
.card.swipe-up    { animation: swipeUp    0.20s ease forwards; }
.card.swipe-down  { animation: swipeDown  0.20s ease forwards; }

@keyframes swipeLeft  { to { transform: translateX(-60px) scale(0.95); opacity: 0; } }
@keyframes swipeRight { to { transform: translateX(60px)  scale(0.95); opacity: 0; } }
@keyframes swipeUp    { to { transform: translateY(-40px) scale(0.95); opacity: 0; } }
@keyframes swipeDown  { to { transform: translateY(40px)  scale(0.95); opacity: 0; } }

/* ─── MULTIPLE STEPS SCREEN ──────────────────────────────────────────────────── */

.ms-strategy-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 6px;
  gap: 8px;
}

.ms-nav-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--ds-topbar-btn);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: var(--ds-topbar-btnT);
  box-shadow: 0 1px 4px var(--ds-shadow);
  touch-action: manipulation;
  flex-shrink: 0;
}

.ms-strategy-info {
  flex: 1;
  text-align: center;
  overflow: hidden;
}

.ms-strategy-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-txt);
  -webkit-user-select: none;
  user-select: none;
}

.ms-situation {
  font-size: 13px;
  color: var(--ds-txt2);
  margin-top: 3px;
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
}

.ms-back-text {
  font-size: 17px !important;
}

#msInputCounter {
  font-size: 13px;
  font-weight: 600;
  color: #888;
  background: #fff;
  border: none;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
  border-radius: 20px;
  padding: 6px 12px;
  cursor: default;
  touch-action: none;
}

.mem-back-text {
  font-size: 15px !important;
  line-height: 1.65 !important;
  text-align: left !important;
}

/* ─── GUIDED CARD LAYOUT ──────────────────────────────────────────────────── */

.guided-front-content {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  justify-content: space-between;
}

.guided-step-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.guided-step-label {
  font-size: 12px;
  color: #aaa;
  -webkit-user-select: none;
  user-select: none;
}

.guided-next-btn {
  font-size: 12px;
  color: var(--ds-acc);
  background: none;
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  padding: 4px 12px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.guided-next-btn:active { opacity: 0.6; }

/* ─── HANDSFREE TRANSPORT ROW ─────────────────────────────────────────────── */

.hf-hint-row {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 12px 72px;
  gap: 10px;
}

.hf-transport-group {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
}

/* Left skip btn: centered in left third */
.hf-transport-group .hf-skip-btn:first-child { justify-self: center; }
/* Right skip btn: centered in right third */
.hf-transport-group .hf-skip-btn:last-child  { justify-self: center; }

.hf-transport-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--ds-topbar-btn);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-acc);
  box-shadow: 0 1px 4px var(--ds-shadow);
  touch-action: manipulation;
  flex-shrink: 0;
  transition: opacity 0.2s;
}
.hf-transport-btn:active { transform: scale(0.93); }

/* Uppgift 9 — play/pause button slightly larger */
.hf-play-btn {
  width: 48px;
  height: 48px;
  box-shadow: 0 2px 6px var(--ds-shadow);
}

/* Outer skip buttons (prev/next group) slightly smaller/subtler */
.hf-skip-btn {
  width: 36px;
  height: 36px;
  color: var(--ds-txt2);
  box-shadow: none;
  background: none;
}

/* ─── SETTINGS EXTRAS ────────────────────────────────────────────────────── */

.settings-section-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-txt2);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 16px 0 4px;
}

.settings-select {
  font-size: 14px;
  color: var(--ds-txt);
  border: 1px solid var(--ds-border);
  border-radius: 8px;
  padding: 4px 8px;
  background: var(--ds-card-alt);
  outline: none;
}

.settings-row--danger label:first-child {
  color: #888;
  font-size: 14px;
}

/* ─── FEEDBACK BAR ───────────────────────────────────────────────────────── */

.fb-bar {
  display: none;
  justify-content: space-around;
  align-items: center;
  /* v1.26.97 — the real fix, after three rounds of adding padding that barely
     moved anything. The bar is positioned against .card-face, which fills
     .card-inner — and .card has 40px of its own padding below that. So
     bottom: 0 was never the bottom of the CARD, it was 40px above it, and no
     amount of padding inside the bar could reach past that. A negative bottom
     pushes the bar down into the card's own padding, which is empty space:
     v1.26.97 used -34px, which landed a touch too low; -24px leaves the
     circles roughly 16px above the visible bottom edge.
     The other half of the problem was the bar itself. It spans the full width
     and used to be tall, so a swipe or a flip that started anywhere near it
     hit the bar instead of the card. pointer-events: none hands those touches
     back to the card; only the circles themselves take a tap. */
  padding: 0 12px;
  width: 100%;
  position: absolute;
  bottom: -24px;
  left: 0;
  pointer-events: none;
}

.feedback-mode .fb-bar {
  display: flex;
}

.fb-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  padding: 0;
  pointer-events: auto;   /* the bar itself is transparent to touches */
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
}

.fb-btn:active { transform: scale(0.88); }

/* Colour per value: 1=red 2=orange 3=yellow 4=green */
.fb-btn[data-val="1"] { background: #e53935; opacity: 0.22; }
.fb-btn[data-val="2"] { background: #fb8c00; opacity: 0.22; }
.fb-btn[data-val="3"] { background: #fdd835; opacity: 0.22; }
.fb-btn[data-val="4"] { background: #43a047; opacity: 0.22; }

/* Selected state */
.fb-btn[data-val="1"].fb-selected { opacity: 1; }
.fb-btn[data-val="2"].fb-selected { opacity: 1; }
.fb-btn[data-val="3"].fb-selected { opacity: 1; }
.fb-btn[data-val="4"].fb-selected { opacity: 1; }

/* Dimmed (others when one is selected) */
.fb-btn.fb-dimmed { opacity: 0.12; }

/* ─── BETA SECTION ───────────────────────────────────────────────────────── */

.mode-beta-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  margin: 4px 0 0;
  cursor: pointer;
  border-radius: 12px;
  user-select: none;
}

.mode-beta-toggle:active {
  background: var(--ds-card-alt);
}

.mode-beta-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ds-txt3);
}

.mode-beta-arrow {
  font-size: 18px;
  color: var(--ds-txt3);
  transition: transform 0.25s ease;
}

.mode-beta-arrow.open {
  transform: rotate(90deg);
}

.mode-beta-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.mode-beta-list.open {
  max-height: 300px;
}

/* ─── BOTTOM NAVIGATION BAR ──────────────────────────────────────────────── */

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  height: calc(var(--ds-nav-h) + env(safe-area-inset-bottom));
  display: flex;
  background: var(--ds-nav-bg);
  border-top: 1px solid var(--ds-border);
  padding: 6px 0 calc(6px + env(safe-area-inset-bottom));
  z-index: 600;
}

.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: none;
  border: none;
  padding: 6px 0;
  cursor: pointer;
  color: var(--ds-txt3);
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.nav-tab-icon { font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; }
.nav-tab-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2px; }

.nav-tab.active { color: var(--ds-txt); }

.nav-tab.nav-tab--upgrade { color: var(--ds-acc); }
.nav-tab.nav-tab--upgrade.active { color: var(--ds-acc); }

/* Top-level screens need bottom padding so content clears the nav bar.
   v1.26.68 — derived from --ds-nav-h instead of a hardcoded 84px, so the
   scrollable area ends exactly where the nav's top border is. */
.home-screen,
.dashboard-screen,
.progress-screen,
.upgrade-screen {
  padding-bottom: calc(var(--ds-nav-h) + env(safe-area-inset-bottom));
}

/* ─── DASHBOARD / PROGRESS / UPGRADE SCREENS ─────────────────────────────── */

.dashboard-screen,
.progress-screen,
.upgrade-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;   /* v1.26.68 — see .home-screen */
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
  overflow-y: auto;
}

.placeholder-block {
  margin-top: 72px;
  text-align: center;
}

.placeholder-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ds-txt);
  margin-bottom: 8px;
}

.placeholder-text {
  font-size: 14px;
  color: var(--ds-txt2);
  line-height: 1.5;
  max-width: 280px;
  margin: 0 auto;
}

/* ─── HOME SETTINGS SCREEN (full-screen, slides in from the right) ───────── */

.settings-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;   /* v1.26.68 — see .home-screen */
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  /* v1.27.20 — the SCREEN no longer scrolls; its body does. The back arrow is
     the only way out of this screen, and with developer settings switched on
     the page is long enough that scrolling carried the arrow off the top and
     left no way back except the Done button at the far bottom. */
  overflow: hidden;
  z-index: 700;
}

/* v1.27.20 — the fixed nav bar. flex-shrink:0 keeps it at its natural height
   while the body below takes the rest, and the background matters: without it
   the rows scrolling past underneath show through a transparent bar. */
.settings-screen-topbar {
  display: flex;
  align-items: center;
  padding: 16px 20px 8px;
  flex: 0 0 auto;
  background: var(--ds-bg);
  position: relative;
  z-index: 2;
}

/* v1.27.21 — the heading now sits INSIDE .settings-screen-body, which already
   carries the 20px side padding, so this only spaces it vertically. Its old
   `padding: 8px 20px 20px` would have indented it 40px from the rows below. */
.settings-screen-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--ds-txt);
  padding: 8px 0 20px;
}

/* v1.27.20 — this is what scrolls now; v1.27.21 — and the "Settings" heading
   scrolls with it, because it lives in here. The fixed part above is the arrow
   row alone. min-height:0 is the flexbox part that is easy to forget — without
   it a flex child refuses to shrink below its content, and the page scrolls
   again as if nothing had been done. */
.settings-screen-body {
  padding: 0 20px 40px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── SUB-COUNTER (input counter, opt-in) ───────────────────────────── */

.counter-group {
  display: flex;
  align-items: center;
}

.sub-counter,
.counter-sep {
  display: none;
  color: #aaa;
}

.sub-counter {
  margin-right: 6px;
}

.counter-sep {
  margin-right: 6px;
  font-weight: 700;
}

/* ─── DASHBOARD SEARCH ───────────────────────────────────────────────────── */

.dashboard-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dashboard-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 20px 100px;
}

.dashboard-scroll #dashSearchView {
  padding: 0;
}

.dash-topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 0 0;
  justify-content: flex-start !important;
}

.dash-search-bar {
  flex: 1;
  /* v1.26.85 — without this the bar cannot shrink below its own content, so
     the clear × appearing made the whole bar wider and shoved the Cancel
     button into the edge of the screen. With min-width 0 the × takes its
     room from the input instead, and nothing outside the bar moves. */
  min-width: 0;
  display: flex;
  align-items: center;
  background: var(--ds-search-bg);
  border-radius: 24px;
  padding: 0 14px;
  height: 40px;
  gap: 6px;
  border: 0.5px solid var(--ds-border);
}

.dash-search-icon {
  font-size: 15px;
  color: #999;
  flex-shrink: 0;
  line-height: 1;
}

.dash-search-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 16px;
  color: var(--ds-txt);
  outline: none;
  padding: 0;
  min-width: 0;
}

.dash-search-input::placeholder { color: var(--ds-txt3); }

.dash-search-clear {
  flex-shrink: 0;
  background: #bbb;
  border: none;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 11px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.dash-cancel-btn {
  flex-shrink: 0;
  font-size: 15px !important;
  font-weight: 600;
  color: rgba(60, 25, 5, 0.85) !important;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 2px;
  white-space: nowrap;
}

.dash-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-txt2);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 24px 0 10px;
}

.dash-recent-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--ds-border-sub);
  cursor: pointer;
  color: var(--ds-txt);
  font-size: 15px;
}

.dash-recent-item:last-child { border-bottom: none; }

.dash-recent-icon {
  font-size: 14px;
  color: #bbb;
  flex-shrink: 0;
}

.dash-noresults {
  text-align: center;
  color: #aaa;
  font-size: 15px;
  padding: 40px 0;
}



/* ── LIBRARY BANNER (orange header, replaces white topbar) ──────────────── */
.lib-banner {
  background: linear-gradient(135deg, var(--ds-hero-a), var(--ds-hero-b));
  padding: 18px 20px 16px;
  margin: 0 -20px 0;          /* break out of home-screen padding */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.lib-banner-title {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
}
.lib-banner-btn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.22);
  border: none;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.lib-banner-btn:active { background: rgba(255,255,255,0.35); }

/* ── HOME WELCOME BANNER ────────────────────────────────────────────────── */
.dash-welcome-banner {
  background: linear-gradient(135deg, var(--ds-hero-a), var(--ds-hero-b));
  border-radius: 18px;
  padding: 28px 22px 26px;
  margin: 4px 0 18px;
  position: relative;
  overflow: hidden;
}
.dash-welcome-banner::after {
  content: '';
  position: absolute;
  right: -20px; top: -20px;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
}
.dash-welcome-text {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
}
.dash-welcome-sub {
  font-size: 14px;
  color: rgba(255,255,255,0.85);
}

/* ── FOLDERS: suggested folder locked behind Pro (v1.30.10) — grey like a
   locked pack; the sort row reuses .fav-sort-row / .fav-sort-btn below. */
.fol-card--locked { opacity: 0.45; cursor: default; }
.fol-card--locked:active { transform: none; opacity: 0.45; }

/* ── FAVORITES SORT ROW ─────────────────────────────────────────────────── */
.fav-sort-row {
  display: flex;
  gap: 6px;
  padding: 0 0 12px;
  overflow-x: auto;
  scrollbar-width: none;
}
.fav-sort-row::-webkit-scrollbar { display: none; }
.fav-sort-btn {
  padding: 5px 13px;
  border-radius: 20px;
  border: 1px solid var(--ds-border);
  background: var(--ds-card);
  color: var(--ds-txt2);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.fav-sort-btn.active {
  background: var(--ds-acc);
  border-color: var(--ds-acc);
  color: #fff;
  font-weight: 600;
}

/* ── FOLDER CARD — white card style ─────────────────────────────────────── */
.folder-card {
  background: var(--ds-card);
  border-radius: 16px;
  border: 1px solid var(--ds-border);
  margin-bottom: 10px;
  overflow: hidden;
}
.folder-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.folder-card-header:active { background: var(--ds-bg); }
.folder-card-info { flex: 1; min-width: 0; }
.folder-card-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-txt);
}
.folder-card-count {
  font-size: 12px;
  color: var(--ds-txt2);
  margin-top: 2px;
}
.folder-card-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.folder-edit-btn {
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--ds-bg);
  border: 1px solid var(--ds-border);
  color: var(--ds-txt2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.folder-edit-btn:active { background: var(--ds-border); }
.folder-chevron {
  font-size: 20px;
  color: var(--ds-txt3);
}
.folder-body { border-top: 1px solid var(--ds-border); padding: 8px 12px 12px; }
.folder-pack-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: var(--ds-bg);
  border-radius: 10px;
  margin-bottom: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.folder-pack-card:last-of-type { margin-bottom: 0; }
.folder-pack-card:active { opacity: 0.8; }

.library-topbar { justify-content: space-between !important; align-items: center; }

.library-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ds-txt);
  letter-spacing: -0.3px;
  flex: 1;
  text-align: left;
}

.library-subnav {
  display: flex;
  flex-direction: row;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  gap: 4px;
  padding: 12px 20px 14px;
  margin: 0 -20px;
}

.library-subnav::-webkit-scrollbar { display: none; }

.library-subnav-btn {
  flex-shrink: 0;
  background: var(--ds-subnav-btn);
  border: none;
  border-radius: 22px;
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-txt2);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.library-subnav-btn.active {
  background: var(--ds-subnav-act);
  color: var(--ds-subnav-actT);
}

.library-subnav-btn:not(.active):active {
  background: #e8e8e8;
  color: #1c1c1e;
}

.library-tab-content {
  flex: 1;
  overflow-y: auto;
  min-height: 0; /* critical for flex children to scroll correctly */
}

.library-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  gap: 12px;
}

.library-placeholder-icon {
  font-size: 40px;
  color: var(--ds-txt3);
  line-height: 1;
}

.library-placeholder-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-txt2);
}

.library-placeholder-text {
  font-size: 14px;
  color: var(--ds-txt3);
  max-width: 240px;
  line-height: 1.5;
}

/* ─── SPLASH SCREEN ─────────────────────────────────────────────────────────────── */

#splashScreen {
  position: fixed;
  inset: 0;
  background: var(--ds-splash-bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 9999;
  transition: opacity 0.5s ease;
}

#splashScreen.hidden {
  opacity: 0;
  pointer-events: none;
}

#splashLogo {
  width: 96px;
  height: 96px;
  background: #1a1a1a;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 64px;
  font-weight: 800;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ds-splash-acc);
  letter-spacing: -2px;
  line-height: 1;
}

#splashName {
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ─── PIN BUTTON ────────────────────────────────────────────────────────────────── */

.pin-icon {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: #ccc;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 0.15s;
}

/* Hide scrollbars on scrollable screens */
.dashboard-scroll,
.home-screen,
.mode-screen,
.mode-list,
.library-tab-content,
.progress-scroll,
/* v1.26.69 — these three scroll themselves rather than through an inner
   container, and were simply missing from this list. That is why the black
   scrollbar only ever appeared on Upgrade, Extended and Settings, and why the
   content there looked slightly narrow: a classic scrollbar takes real layout
   width, so it was eating a strip off the right-hand side. */
.upgrade-screen,
.upgrade-scroll,
.extended-screen,
.settings-screen {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.dashboard-scroll::-webkit-scrollbar,
.home-screen::-webkit-scrollbar,
.mode-screen::-webkit-scrollbar,
.mode-list::-webkit-scrollbar,
.library-tab-content::-webkit-scrollbar,
.progress-scroll::-webkit-scrollbar,
.upgrade-screen::-webkit-scrollbar,
.upgrade-scroll::-webkit-scrollbar,
.extended-screen::-webkit-scrollbar,
.settings-screen::-webkit-scrollbar { display: none; }

.pin-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  border-radius: 8px;
  font-size: 18px;
  opacity: 0.3;
  transition: opacity 0.15s;
}

.pin-btn.pinned {
  opacity: 1;
}

/* Mode screen topbar: back on left, pin on right */
.mode-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 8px;
}

.mode-pin-btn {
  font-size: 22px;
  color: var(--ds-txt3);
  opacity: 1;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ds-border);
  border-radius: 50%;
}

/* Uppgift 8 — center pin btn when gear is hidden */
.mode-pin-centered { margin: 0 auto; }

/* v1.27.18 — the gear with no feedback mode on.
   It used to be display:none, which also removed the only place to press.
   The pack note lives behind three taps HERE, so the button has to stay
   pressable while showing nothing: the icon goes, the hit area stays and
   grows a little, because a target you cannot see needs to be easy to find.
   Layout is unchanged either way — .mode-topbar-center is flex:1 and holds
   the middle whether or not anything is drawn in it. */
.mode-gear--silent > svg,
.prog-gear--silent > i,
.prog-gear--silent > svg { visibility: hidden; }

/* The silent-gear STATE rules are not here — they are at the very end of this
   file. See the note there; it is about source order, and moving them back up
   brings the white square back. */
.mode-gear--silent,
.prog-gear--silent {
  min-width: 56px;
  min-height: 44px;
}

.mode-pin-btn.pinned {
  color: var(--ds-acc);
  border-color: var(--ds-acc);
}

/* ─── MODE SCREEN: HANDSFREE FLIP TOGGLE ───────────────────────────────── */
.mode-hf-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 20px;
  margin: 0 auto 4px;
  border: 1.5px solid var(--ds-border);
  border-radius: 20px;
  cursor: pointer;
  background: var(--ds-card);
  -webkit-tap-highlight-color: transparent;
  transition: background 0.18s, border-color 0.18s;
  width: fit-content;
  user-select: none;
}

.mode-hf-toggle.active {
  background: var(--ds-txt);
  border-color: var(--ds-txt);
}

.mode-hf-toggle-icon {
  font-size: 15px;
  line-height: 1;
}

.mode-hf-toggle-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-txt2);
  white-space: nowrap;
  transition: color 0.18s;
}

.mode-hf-toggle.active .mode-hf-toggle-label,
.mode-hf-toggle.active .mode-hf-toggle-icon {
  color: var(--ds-card);
}

.mode-flip-card {
  position: relative;
}

.mode-flip-inner {
  position: relative;
}

.mode-flip-front,
.mode-flip-back {
  width: 100%;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.mode-flip-back {
  display: none;
  opacity: 0;
  transform: scale(0.97);
  pointer-events: none;
}

/* Flipped state */
.mode-flip-inner.flipped .mode-flip-front {
  display: none;
}

.mode-flip-inner.flipped .mode-flip-back {
  display: flex;
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}

/* No-transition class for instant reset */
.mode-flip-inner.no-transition .mode-flip-front,
.mode-flip-inner.no-transition .mode-flip-back {
  transition: none;
}

/* ─── PROGRESS SCREEN ────────────────────────────────────────────────────────── */

.progress-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100%; max-width: 420px; margin: 0 auto;
  background: var(--ds-bg);
  display: flex; flex-direction: column; overflow: hidden;
}

.progress-scroll {
  flex: 1; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 18px 20px 100px;   /* v1.29.54: a little air under the banner */
}

.prog-section {
  background: var(--ds-card); border-radius: 16px;
  padding: 18px 16px; margin-bottom: 12px;
}

.prog-section-label {
  font-size: 12px; font-weight: 700; color: var(--ds-txt2);
  letter-spacing: 0.7px; text-transform: uppercase; margin-bottom: 14px;
}

.prog-streak-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.prog-streak-fire { font-size: 36px; line-height: 1; }
.prog-streak-num { font-size: 40px; font-weight: 800; color: var(--ds-txt); line-height: 1; }
.prog-streak-sub { font-size: 12px; color: var(--ds-txt2); margin-top: 2px; }
.prog-streak-best { margin-left: auto; text-align: center; }
.prog-streak-best-num { font-size: 24px; font-weight: 700; color: var(--ds-txt2); }

/* Progress calendar (v1.26.49) — replaces the old 14-dot strip */
.prog-cal-head { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; }
.prog-cal-nav {
  border: none; background: none; color: var(--ds-txt2); font-family: inherit;
  font-size: 22px; line-height: 1; padding: 2px 10px; border-radius: 8px;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.prog-cal-nav:disabled { opacity: 0.28; cursor: default; }
.prog-cal-title {
  flex: 1; border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--ds-txt);
  padding: 4px 6px; border-radius: 8px; text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.prog-cal-toggle {
  display: flex; gap: 2px; padding: 2px; margin-bottom: 12px;
  background: var(--ds-subnav-btn); border-radius: 8px;
}
.prog-cal-view {
  flex: 1; border: none; background: none; border-radius: 6px; font-family: inherit;
  padding: 5px 8px; font-size: 12px; font-weight: 600; color: var(--ds-txt2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}
.prog-cal-view.active { background: var(--ds-card); color: var(--ds-txt); box-shadow: 0 1px 3px var(--ds-shadow); }
.prog-cal-grid { display: grid; grid-template-columns: 24px repeat(7, 1fr); gap: 4px; }
.prog-cal-dow { font-size: 10px; font-weight: 700; color: var(--ds-txt3); text-align: center; padding-bottom: 2px; }
.prog-cal-wk {
  border: none; background: none; padding: 0; cursor: pointer; font-family: inherit;
  font-size: 10px; font-weight: 700; color: var(--ds-txt3);
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.prog-cal-day {
  border: none; padding: 0; aspect-ratio: 1 / 1; border-radius: 7px; font-family: inherit;
  font-size: 11px; font-weight: 600; color: var(--ds-txt2); background: var(--ds-border-sub);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.prog-cal-day.l1 { background: var(--ds-cal-1); color: var(--ds-txt); }
.prog-cal-day.l2 { background: var(--ds-cal-2); color: var(--ds-txt); }
.prog-cal-day.l3 { background: var(--ds-cal-3); color: var(--ds-txt); }
.prog-cal-day.l4 { background: var(--ds-cal-4); color: var(--ds-cal-4-txt); }
.prog-cal-day.out { opacity: 0.3; }
.prog-cal-day.future { opacity: 0.35; cursor: default; }
.prog-cal-day.today { outline: 2px solid var(--ds-prog-acc); outline-offset: 1px; }
.prog-cal-legend {
  display: flex; align-items: center; justify-content: flex-end; gap: 4px;
  margin-top: 12px; font-size: 10px; color: var(--ds-txt3);
}
.prog-cal-key { width: 11px; height: 11px; border-radius: 3px; background: var(--ds-border-sub); }
.prog-cal-key.l1 { background: var(--ds-cal-1); }
.prog-cal-key.l2 { background: var(--ds-cal-2); }
.prog-cal-key.l3 { background: var(--ds-cal-3); }
.prog-cal-key.l4 { background: var(--ds-cal-4); }

/* Week view as a bar chart (v1.26.66) — minutes trained per day. The switch
   only appears in the week view; renderCalendar() hides it elsewhere. */
.prog-cal-modes {
  display: flex; gap: 2px; padding: 2px; margin: 0 0 12px auto; width: fit-content;
  background: var(--ds-subnav-btn); border-radius: 8px;
}
.prog-cal-mode {
  border: none; background: none; border-radius: 6px; font-family: inherit;
  padding: 4px 12px; font-size: 11px; font-weight: 600; color: var(--ds-txt2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}
.prog-cal-mode.active { background: var(--ds-card); color: var(--ds-txt); box-shadow: 0 1px 3px var(--ds-shadow); }
.prog-cal-grid--bars { grid-template-columns: 28px repeat(7, 1fr); gap: 5px; align-items: end; }
.prog-cal-baraxis {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 96px; margin: 16px 0 16px;
  font-size: 9px; font-weight: 600; color: var(--ds-txt3);
  text-align: right; padding-right: 3px; line-height: 1;
}
.prog-cal-barcol {
  border: none; background: none; padding: 0; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  -webkit-tap-highlight-color: transparent;
}
.prog-cal-barval { font-size: 10px; font-weight: 700; color: var(--ds-txt3); height: 12px; line-height: 12px; }
.prog-cal-bartrack {
  width: 68%; height: 96px; border-radius: 6px; background: var(--ds-border-sub);
  display: flex; align-items: flex-end; overflow: hidden;
}
.prog-cal-bar { width: 100%; background: var(--ds-cal-4); border-radius: 6px; min-height: 3px; }
.prog-cal-barday { font-size: 10px; font-weight: 700; color: var(--ds-txt3); }
.prog-cal-barcol.today .prog-cal-barday { color: var(--ds-prog-acc); }
.prog-cal-barcol.today .prog-cal-bartrack { outline: 2px solid var(--ds-prog-acc); outline-offset: 1px; }
.prog-cal-barcol.future { opacity: 0.35; cursor: default; }
.prog-detail-sum { font-size: 13px; color: var(--ds-txt2); margin-bottom: 8px; }
.prog-detail-row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid var(--ds-border-sub);
  font-size: 14px; font-weight: 600; color: var(--ds-txt);
}
.prog-detail-val { color: var(--ds-txt2); font-weight: 500; white-space: nowrap; }
.prog-detail-empty { font-size: 14px; color: var(--ds-txt2); padding: 8px 0; }

.prog-goal-row { display: flex; align-items: center; gap: 20px; }
.prog-goal-ring-wrap { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.prog-goal-ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.prog-ring-bg { fill: none; stroke: var(--ds-border); stroke-width: 7; }
.prog-ring-fill {
  fill: none; stroke: var(--ds-prog-acc); stroke-width: 7; stroke-linecap: round;
  transition: stroke-dashoffset 0.4s ease;
}
.prog-ring-label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--ds-txt);
}
.prog-goal-main { font-size: 18px; font-weight: 700; color: var(--ds-txt); }
.prog-goal-sub { font-size: 13px; color: var(--ds-txt2); margin-top: 3px; }

.prog-bar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.prog-bar-header .prog-section-label { margin-bottom: 0; }
.prog-period-toggle { display: flex; background: #f0f0f5; border-radius: 8px; padding: 2px; gap: 2px; }
.prog-period-btn {
  border: none; background: none; border-radius: 6px;
  padding: 4px 12px; font-size: 13px; font-weight: 600; color: var(--ds-txt2);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, color 0.15s;
}
.prog-period-btn.active { background: var(--ds-card); color: var(--ds-txt); box-shadow: 0 1px 3px var(--ds-shadow); }

.prog-bars { display: flex; flex-direction: column; gap: 10px; }
.prog-bar-row { display: flex; align-items: center; gap: 10px; }
.prog-bar-name {
  font-size: 13px; font-weight: 600; color: var(--ds-txt2);
  width: 110px; flex-shrink: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prog-bar-track { flex: 1; height: 8px; background: var(--ds-border); border-radius: 4px; overflow: hidden; }
.prog-bar-fill { height: 100%; background: var(--ds-prog-acc); border-radius: 4px; transition: width 0.4s ease; }
.prog-bar-val { font-size: 12px; color: var(--ds-txt3); width: 36px; text-align: right; flex-shrink: 0; }
.prog-no-data { font-size: 14px; color: #bbb; text-align: center; padding: 16px 0; }

.prog-totals { display: flex; justify-content: space-around; }
.prog-total-item { text-align: center; }
.prog-total-num { font-size: 28px; font-weight: 800; color: var(--ds-txt); }
.prog-total-label { font-size: 11px; color: var(--ds-txt2); margin-top: 2px; }

.prog-indent { padding-left: 16px; }
.settings-radio-label { display: flex; align-items: center; gap: 8px; font-size: 15px; color: #1c1c1e; cursor: pointer; }
.prog-num-input {
  width: 52px; border: 1px solid #ddd; border-radius: 8px;
  padding: 4px 6px; font-size: 14px; text-align: center; color: #1c1c1e;
}
.prog-select {
  border: 1px solid #ddd; border-radius: 8px;
  padding: 6px 10px; font-size: 14px; color: #1c1c1e;
  background: #fff; cursor: pointer;
}
.prog-reset-btn {
  background: none; border: none; color: #e53935;
  font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 4px 0; -webkit-tap-highlight-color: transparent;
}

/* ─── TOPICS ──────────────────────────────────────────────────────────────────── */

/* ── TOPICS — compact accordion card ── */
.topic-accordion {
  background: var(--ds-card);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--ds-border);
}

.topic-group {
  border-bottom: 1px solid var(--ds-border);
}
.topic-group:last-child { border-bottom: none; }

.topic-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 16px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: background 0.12s;
}
.topic-header:active { background: var(--ds-card-alt); }
.topic-group--empty .topic-header { opacity: 0.5; cursor: default; }
.topic-header.open { background: rgba(176,90,40,0.13); }

.topic-title {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-txt);
}
.topic-header.open .topic-title { color: var(--ds-acc); }

.topic-count {
  font-size: 12px;
  color: var(--ds-acc);
  font-weight: 600;
  white-space: nowrap;
}
.topic-count--empty { color: var(--ds-txt3); font-weight: 400; }

.topic-chevron {
  font-size: 16px;
  color: var(--ds-txt3);
  transition: transform 0.2s ease;
  line-height: 1;
}
.topic-chevron--empty { opacity: 0.3; }
.topic-header.open .topic-chevron { transform: rotate(90deg); color: var(--ds-acc); }

.topic-packs {
  display: none;
  padding: 6px 12px 10px;
  background: var(--ds-bg);
  border-top: 1px solid var(--ds-border);
}
.topic-packs.open { display: block; }

/* ─── ACCESS LEVELS & LOCKED PACKS ────────────────────────────────────────── */

.collection-card--locked {
  opacity: 0.45;
  cursor: default;
}

.collection-card--locked:active {
  transform: none;
  opacity: 0.45;
}

.collection-card--locked .collection-arrow { display: none; }

.pack-lock-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  background: var(--ds-txt3);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
}

.pack-lock-badge--pro   { background: var(--ds-lock-pro); }
.pack-lock-badge--complete { background: var(--ds-lock-comp); }

/* ─── INPUT BUNDLES ─────────────────────────────────────────────────────────── */

.bundle-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-txt2);
  letter-spacing: 0.7px;
  text-transform: uppercase;
  padding: 16px 0 8px;
  border-top: 1px solid var(--ds-border-sub);
  margin-top: 8px;
}

.bundle-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #f5f5f5;
  gap: 10px;
}

.bundle-row:last-child { border-bottom: none; }

.bundle-info {
  flex: 1;
  cursor: pointer;
}

.bundle-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-txt);
}

.bundle-desc-preview {
  font-size: 12px;
  color: var(--ds-txt2);
  margin-top: 2px;
}

.bundle-expand {
  background: none;
  border: none;
  font-size: 14px;
  color: #aaa;
  cursor: pointer;
  padding: 4px;
  flex-shrink: 0;
}

.bundle-detail {
  display: none;
  font-size: 13px;
  color: var(--ds-txt2);
  line-height: 1.5;
  padding: 6px 0 10px;
  border-bottom: 1px solid var(--ds-border-sub);
}

.bundle-detail.open { display: block; }

/* ─── DASHBOARD HOME SCREEN ───────────────────────────────────────────────────── */

/* Continue card — filled accent background */
.dash-continue-card {
  background: var(--ds-card);
  border-radius: 16px;
  padding: 18px 20px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 12px var(--ds-shadow);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  border: 1.5px solid var(--ds-acc);
}
.dash-continue-card:active { opacity: 0.88; transform: scale(0.98); }
/* v1.29.38 — older recent packs under Continue: same card, no accent border,
   so the latest pack still stands out. */
.dash-continue-card--recent { border-color: var(--ds-border); }
.dash-continue-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dash-continue-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--ds-txt);
  margin-bottom: 3px;
}
.dash-continue-meta {
  font-size: 13px;
  color: var(--ds-txt2);
}
.dash-continue-arrow {
  font-size: 22px;
  color: var(--ds-txt3);
  flex-shrink: 0;
}
.dash-continue-progress {
  height: 3px;
  background: var(--ds-border);
  border-radius: 2px;
}
.dash-continue-progress-fill {
  height: 3px;
  background: var(--ds-acc);
  border-radius: 2px;
  transition: width 0.3s ease;
}

/* Favorites grid — two per row */
/* Uppgift 11 — horizontal carousel, up to 8 favs, 2 visible at a time */
#dashFavList {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
  padding-bottom: 4px;
  scrollbar-width: none;
}
#dashFavList::-webkit-scrollbar { display: none; }
.dash-fav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 4px;
}
.dash-fav-card {
  background: var(--ds-card);
  border-radius: 14px;
  padding: 14px 12px;
  box-shadow: 0 2px 8px var(--ds-shadow);
  border: 0.5px solid var(--ds-border);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 calc(50% - 5px);
  scroll-snap-align: start;
}
.dash-fav-card:active { opacity: 0.88; transform: scale(0.97); }
.dash-fav-icon {
  font-size: 22px;
  color: var(--ds-acc);
  line-height: 1;
}
.dash-fav-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-txt);
  line-height: 1.3;
}

/* ─── UPGRADE SCREEN ────────────────────────────────────────────────────── */

.upgrade-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* v1.26.70 — the screen itself already reserves the nav height, so the old
     100px here was a second clearance on top of it. */
  padding: 0 20px 24px;
}

.upgrade-hero {
  padding: 32px 0 24px;
  text-align: center;
}

.upgrade-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ds-txt);
  letter-spacing: -0.3px;
}

.upgrade-hero-sub {
  font-size: 14px;
  color: var(--ds-txt2);
  margin-top: 6px;
}

.upgrade-price-card {
  background: var(--ds-card);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px var(--ds-shadow);
  text-align: center;
}

.upgrade-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin-bottom: 16px;
}

.upgrade-price {
  font-size: 36px;
  font-weight: 800;
  color: var(--ds-txt);
  letter-spacing: -0.5px;
}

.upgrade-price-note {
  font-size: 13px;
  color: var(--ds-txt2);
}

.upgrade-cta-btn {
  width: 100%;
  padding: 15px;
  background: var(--ds-acc);
  color: var(--ds-acc-text);
  border: none;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 0.15s;
}

.upgrade-cta-btn:active { opacity: 0.85; }

.upgrade-cta-sub {
  font-size: 12px;
  color: var(--ds-txt3);
  margin-top: 10px;
}

/* Trial-first plan card (v1.26.62). The free week is the offer; the two paid
   plans sit underneath as information rather than competing buttons. */
.upgrade-trial { margin-bottom: 16px; }
.upgrade-trial-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--ds-txt);
  letter-spacing: -0.3px;
}
.upgrade-trial-sub {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ds-txt2);
  margin-top: 6px;
}
/* v1.29.80 — side by side while both prices fit, otherwise stacked. A long
   App Store price (another currency) used to push the cards out of the
   white frame. flex-basis 0 keeps them equal width; min-width max-content
   makes the second card wrap instead of overflowing. */
.upgrade-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}
.upgrade-plan {
  flex: 1 1 0;
  min-width: max-content;
  box-sizing: border-box;
  background: var(--ds-border-sub);
  border-radius: 12px;
  padding: 12px 14px;
}
.upgrade-plan-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-txt2);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.upgrade-plan-price {
  white-space: nowrap;
  font-size: 22px;
  font-weight: 800;
  color: var(--ds-txt);
  margin: 4px 0 2px;
  letter-spacing: -0.3px;
}
.upgrade-plan-note {
  font-size: 11px;
  color: var(--ds-txt3);
}
.upgrade-plan-foot {
  font-size: 12px;
  color: var(--ds-txt3);
  margin-top: 12px;
}

.upgrade-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-txt2);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.upgrade-feature-card {
  background: var(--ds-card);
  border-radius: 16px;
  padding: 4px 16px;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px var(--ds-shadow);
}

.upgrade-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--ds-border-sub);
}

.upgrade-feature-row--last {
  border-bottom: none;
}

.upgrade-feature-icon {
  font-size: 22px;
  color: var(--ds-acc);
  width: 28px;
  flex-shrink: 0;
  padding-top: 1px;
}

.upgrade-feature-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-txt);
  margin-bottom: 2px;
}

.upgrade-feature-desc {
  font-size: 13px;
  color: var(--ds-txt2);
  line-height: 1.45;
}

.upgrade-compare-card {
  background: var(--ds-card);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px var(--ds-shadow);
}

.upgrade-compare-header {
  display: flex;
  background: var(--ds-card-alt);
  padding: 10px 16px;
  border-bottom: 1px solid var(--ds-border-sub);
}

.upgrade-compare-col-label {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  color: var(--ds-txt2);
  text-align: center;
  letter-spacing: 0.05em;
}

.upgrade-compare-col-label:first-child {
  flex: 2;
  text-align: left;
}

.upgrade-compare-col-label--pro {
  color: var(--ds-acc);
}

.upgrade-compare-row {
  display: flex;
  align-items: center;
  padding: 11px 16px;
  border-bottom: 1px solid var(--ds-border-sub);
}

.upgrade-compare-row--last {
  border-bottom: none;
}

.upgrade-compare-item {
  flex: 2;
  font-size: 13px;
  color: var(--ds-txt);
}

.upgrade-compare-check {
  flex: 1;
  text-align: center;
  font-size: 16px;
  color: var(--ds-txt3);
}

.upgrade-compare-check--pro {
  color: var(--ds-acc);
}

.upgrade-compare-check--no {
  color: var(--ds-border);
}

.upgrade-footer {
  font-size: 12px;
  color: var(--ds-txt3);
  text-align: center;
  padding-bottom: 8px;
}

/* ─── EXTENDED STORE SCREEN ──────────────────────────────────────────────── */

.extended-screen {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 420px;
  height: 100vh;
  height: 100dvh;   /* v1.26.68 — see .home-screen */
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: calc(var(--ds-nav-h) + env(safe-area-inset-bottom));
  overflow-y: auto;
}

.extended-scroll {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-top: 8px;
}

.extended-hero {
  text-align: center;
  padding: 28px 0 20px;
}

.extended-hero-icon {
  font-size: 46px;
  color: var(--ds-acc);
  margin-bottom: 10px;
  line-height: 1;
}

.extended-hero-title {
  font-size: 26px;
  font-weight: 800;
  color: var(--ds-txt);
  margin-bottom: 4px;
}

.extended-hero-sub {
  font-size: 14px;
  color: var(--ds-txt2);
  line-height: 1.4;
}

.extended-section-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--ds-txt3);
  margin: 24px 0 10px;
}

.ext-store-card {
  background: var(--ds-card);
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.ext-store-card-top {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.ext-store-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--ds-acc);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 20px;
  color: #fff;
}

.ext-store-info {
  flex: 1;
  min-width: 0;
}

.ext-store-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-txt);
  margin-bottom: 2px;
}

.ext-store-pack-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ds-acc);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.ext-store-desc {
  font-size: 13px;
  color: var(--ds-txt2);
  line-height: 1.45;
}

.ext-store-card-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.ext-store-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--ds-txt);
}

.ext-store-btn {
  background: var(--ds-acc);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.ext-store-btn:active { opacity: 0.8; }

/* v1.27.47 — butiken browsar men säljer inte förrän IAP_LIVE är true.
   Knappen står kvar på sin plats så kortet inte byter form den dagen den
   börjar fungera; den ser bara inaktiv ut och går inte att trycka på. */
.ext-store-btn.is-soon,
.ext-lifetime-btn.is-soon,
#extInfoBuy.is-soon {
  background: var(--ds-subnav-btn);
  color: var(--ds-txt2);
  cursor: default;
  font-weight: 600;
}
.ext-store-btn.is-soon:active,
.ext-lifetime-btn.is-soon:active,
#extInfoBuy.is-soon:active { opacity: 1; }

.ext-store-owned {
  font-size: 13px;
  font-weight: 600;
  color: var(--ds-acc);
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
}

.extended-footer {
  font-size: 12px;
  color: var(--ds-txt3);
  text-align: center;
  padding: 16px 0 8px;
}

.nav-tab.nav-tab--extended { color: var(--ds-acc); }
.nav-tab.nav-tab--extended.active { color: var(--ds-acc); }

/* ── TAG SYSTEM ──────────────────────────────────────────────────────────── */

/* In-app pack settings overlay */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; min-height: 28px; }
.tag-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--ds-acc); color: #fff; border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; }
.tag-chip-del { background: none; border: none; color: #fff; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 0 0 2px; opacity: 0.7; }
.tag-chip-del:hover { opacity: 1; }
.tag-empty { font-size: 12px; color: var(--ds-txt3); }
.tag-input-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.tag-input { flex: 1; border: 1px solid var(--ds-border); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--ds-bg); color: var(--ds-txt); outline: none; }
.tag-input:focus { border-color: var(--ds-acc); }
.tag-add-btn { background: var(--ds-acc); color: #fff; border: none; border-radius: 8px; width: 32px; height: 32px; font-size: 20px; line-height: 1; cursor: pointer; flex-shrink: 0; }

/* Program detail topbar */
.program-detail-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
/* v1.26.85 — the program gear only opens the "add tags" sheet, which is an
   authoring tool. It follows tag mode, exactly like the other authoring UI:
   app-system.js puts .tag-mode on <body> when the toggle is on, and a normal
   user has no way to turn it on, so they never see the gear. */
/* v1.27.18 — this button is now ALWAYS in the document.
   It used to be display:none with `body.tag-mode` as the only way to show it,
   which meant that outside tag mode there was nothing on the programme screen
   to press. The programme note lives behind three taps on exactly this spot,
   so the button has to stay pressable; whether its icon is DRAWN is decided in
   app-ui.js by adding .prog-gear--silent. Putting display:none back here
   removes the note with no visible sign that anything changed. */
/* v1.27.19 — sized from .topbar-btn so the gear is the same object here as on
   the mode screen and the training screens.
   v1.27.20 — and the same COLOUR. It was --ds-txt3, the faintest text colour
   in the palette, which is why it kept reading as smaller and weaker than the
   gear on the mode screen. The icons were never different sizes: all 16 gears
   in index.html are the same 22×22 SVG, this one included. */
.program-settings-btn {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: none; border: none; border-radius: 10px;
  color: var(--ds-topbar-btnT); cursor: pointer; padding: 0;
  touch-action: manipulation;
}
.program-settings-btn > svg { display: block; }
.program-settings-btn:hover { color: var(--ds-txt); background: var(--ds-card); }

/* Editor tag section (inside pack editor header) */
.editor-tag-section { padding: 8px 0 4px; border-top: 1px solid var(--ds-border); margin-top: 8px; }
.editor-tag-label { font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--ds-txt3); margin-bottom: 6px; }
.editor-tag-list { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 6px; min-height: 24px; }
.editor-tag-chip { display: inline-flex; align-items: center; gap: 3px; background: var(--acc); color: #fff; border-radius: 12px; padding: 2px 8px; font-size: 11px; font-weight: 600; }
.editor-tag-chip--more { background: var(--txt3); }
.editor-tag-del { background: none; border: none; color: #fff; cursor: pointer; font-size: 13px; padding: 0; opacity: 0.7; }
.editor-tag-del:hover { opacity: 1; }
.editor-tag-input-row { display: flex; gap: 6px; align-items: center; }
.editor-tag-input { flex: 1; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; font-size: 12px; background: var(--bg); color: var(--txt); outline: none; }
.editor-tag-input:focus { border-color: var(--acc); }
.editor-tag-add-btn { background: var(--acc); color: #fff; border: none; border-radius: 6px; width: 26px; height: 26px; font-size: 18px; line-height: 1; cursor: pointer; }

/* Pack row tags in editor columns */
.pack-row-main { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.pack-row-tags { display: flex; flex-wrap: wrap; gap: 3px; }

/* ── MODE TOPBAR CENTER GROUP ─────────────────────────────────────────────── */
.mode-topbar-center {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ── PROGRAMS ────────────────────────────────────────────────────────────── */
.programs-list { display: flex; flex-direction: column; gap: 14px; }
.program-card {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--ds-card); border: 1px solid var(--ds-border);
  border-radius: 14px; padding: 18px; cursor: pointer;
  transition: border-color .15s;
}
.program-card:hover { border-color: var(--ds-acc); }
.program-card-icon {
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--ds-acc); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; flex-shrink: 0;
}
/* v1.26.85 — the badge moved to the right of the title, which is where every
   other Pro badge in the app sits. The old left-hand column is gone. */
.program-card-titlerow {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 4px;
}
.program-card-badge { flex-shrink: 0; }
.program-card-body { flex: 1; min-width: 0; }
.program-card-title { font-size: 16px; font-weight: 700; }
.program-card-desc  { font-size: 13px; color: var(--ds-txt2); margin-bottom: 12px; line-height: 1.5; }
.program-progress-bar-wrap {
  height: 6px; background: var(--ds-border); border-radius: 99px; overflow: hidden; margin-bottom: 6px;
}
.program-progress-bar { height: 100%; background: var(--ds-acc); border-radius: 99px; transition: width .4s; }
.program-progress-label { font-size: 12px; color: var(--ds-txt3); }

/* Program detail */
.program-detail { padding-bottom: 40px; }
/* v1.27.18 — a step up from 19px. It is the only way out of a programme and
   was reading as smaller than the screen title it sits above. */
.program-back-btn {
  background: none; border: none; color: var(--ds-acc); font-size: 22px;
  font-weight: 600; cursor: pointer; padding: 0 0 16px 0;
  display: flex; align-items: center; gap: 8px;
}
.cp-result-back-btn {
  margin-top: 10px; width: 100%; padding: 12px; border-radius: 12px;
  background: none; border: 2px solid var(--ds-acc); color: var(--ds-acc);
  font-size: 16px; font-weight: 600; cursor: pointer;
}
.program-detail-title { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.program-detail-desc  { font-size: 14px; color: var(--ds-txt2); margin-bottom: 24px; line-height: 1.6; }
.prog-section { margin-bottom: 24px; }
.prog-section-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ds-txt3); margin-bottom: 10px;
}
.prog-section--locked .prog-section-label { opacity: .5; }
.prog-pack-card { margin-bottom: 8px; cursor: pointer; }
.prog-card--locked { opacity: .45; cursor: default; }
.prog-lock-icon { font-size: 18px; color: var(--ds-txt3); padding-right: 4px; }
.prog-checkpoint-card {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #2C1F10 0%, #4a3520 100%);
  border: 1px solid #6b4c2a; border-radius: 14px;
  padding: 16px 18px; margin-top: 8px; cursor: pointer;
  transition: opacity .15s;
}
.prog-checkpoint-card.prog-card--locked { opacity: .4; cursor: default; }
.prog-checkpoint-icon { font-size: 24px; color: #F0A860; flex-shrink: 0; }
.prog-checkpoint-body { flex: 1; }
.prog-checkpoint-title { font-size: 15px; font-weight: 700; color: #fff; }
.prog-checkpoint-meta  { font-size: 12px; color: #C0A880; margin-top: 2px; }
.prog-checkpoint-card .collection-arrow { color: #C0A880; font-size: 22px; }

/* ── CHECKPOINT QUIZ ─────────────────────────────────────────────────────── */
.cp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; background: var(--ds-card);
  border-bottom: 1px solid var(--ds-border); flex-shrink: 0;
}
.cp-title    { font-size: 15px; font-weight: 700; flex: 1; }
.cp-progress { font-size: 13px; color: var(--ds-txt3); margin: 0 12px; }
.cp-timer    { font-size: 15px; font-weight: 700; min-width: 40px; text-align: right; }
.cp-body     { flex: 1; overflow-y: auto; padding: 24px 20px; max-width: 640px; margin: 0 auto; width: 100%; }
.cp-question { font-size: 18px; font-weight: 600; line-height: 1.5; margin-bottom: 24px; }
.cp-options  { display: flex; flex-direction: column; gap: 12px; }
.cp-option {
  padding: 16px 18px; border: 2px solid var(--ds-border); border-radius: 12px;
  background: var(--ds-card); font-size: 15px; text-align: left;
  cursor: pointer; transition: border-color .15s; line-height: 1.4;
}
.cp-option:hover        { border-color: var(--ds-acc); }
.cp-option--correct     { border-color: #4CAF50; background: #E8F5E9; }
.cp-option--wrong       { border-color: #C0392B; background: #FDEDEC; }
.cp-result              { text-align: center; padding: 40px 20px; }
.cp-result-score        { font-size: 56px; font-weight: 800; line-height: 1; margin-bottom: 8px; }
.cp-result-pct          { font-size: 24px; font-weight: 700; color: var(--ds-txt3); margin-bottom: 16px; }
.cp-result-label        { font-size: 20px; font-weight: 700; margin-bottom: 10px; }
.cp-result-hint         { font-size: 14px; color: var(--ds-txt2); margin-bottom: 32px; line-height: 1.6; }

/* Primary action inside the small overlays (v1.26.72). The Pro screen, the
   rating gate and the next-pack suggestion all used the neutral settings
   button, which made them look like system dialogs rather than part of the
   app. Same accent and weight as .upgrade-cta-btn, so the marked button reads
   the same everywhere. */
.settings-close--primary {
  background: var(--ds-acc);
  color: var(--ds-acc-text);
  font-weight: 700;
  transition: opacity 0.15s;
}
.settings-close--primary:active { opacity: 0.85; }

/* "Also mentioned in" divider in search results (v1.26.73) */
.search-weak-heading { margin-top: 20px; }

/* Pro-gruppens rubrik i biblioteket (v1.26.71) — samma stil som "Available
   free packs", men med luft ovanför så att den läser som en ny sektion och
   inte som en bildtext till kortet ovanför. */
#libProHeading { margin-top: 22px; }

/* Rating gate (v1.26.66) */
.rating-icon { text-align: center; font-size: 30px; color: var(--ds-acc); margin-bottom: 6px; }
.rating-lead { font-size: 14px; color: var(--ds-txt2); text-align: center; line-height: 1.6; margin: 6px 0 16px; }
.rating-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  font-family: inherit; font-size: 15px; line-height: 1.5; color: var(--ds-txt);
  background: var(--ds-card); border: 1px solid var(--ds-border-sub);
  border-radius: 10px; padding: 10px 12px; margin-bottom: 14px;
}
.rating-textarea:focus { outline: none; border-color: var(--ds-prog-acc); }

/* Pro nudge (v1.26.66) */
.pronudge-crown { text-align: center; font-size: 30px; color: var(--ds-acc); margin-bottom: 6px; }
.pronudge-lead  { font-size: 14px; color: var(--ds-txt2); text-align: center; line-height: 1.6; margin: 6px 0 14px; }
.pronudge-list  { margin: 0 0 14px; padding-left: 20px; }
.pronudge-list li { font-size: 14px; color: var(--ds-txt); line-height: 1.6; margin-bottom: 6px; }
.pronudge-trial { font-size: 13px; font-weight: 700; color: var(--ds-txt2); text-align: center; margin: 0 0 14px; }
.pronudge-later {
  display: block; width: 100%; margin-top: 8px; padding: 10px;
  border: none; background: none; font-family: inherit;
  font-size: 14px; font-weight: 600; color: var(--ds-txt3);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}

/* What's new list (v1.26.66) */
.whatsnew-body  { max-height: 60vh; overflow-y: auto; padding-right: 2px; }
.whatsnew-entry { padding: 14px 0; border-bottom: 1px solid var(--ds-border-sub); }
.whatsnew-entry:first-child { padding-top: 4px; }
.whatsnew-entry:last-child  { border-bottom: none; }
.whatsnew-title { font-size: 15px; font-weight: 700; color: var(--ds-txt); }
/* v1.26.97 — marks a developer-only entry in the developer list */
.whatsnew-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--ds-card-alt);
  border: 1px solid var(--ds-border-sub);
  color: var(--ds-txt3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.whatsnew-meta  { font-size: 11px; font-weight: 600; color: var(--ds-txt3); margin-top: 2px; letter-spacing: 0.02em; }
.whatsnew-list  { margin: 8px 0 0; padding-left: 18px; }
.whatsnew-list li { font-size: 14px; color: var(--ds-txt2); line-height: 1.6; margin-bottom: 6px; }
.whatsnew-list li:last-child { margin-bottom: 0; }
.whatsnew-list strong { color: var(--ds-txt); font-weight: 700; }

/* What a passed checkpoint opened up (v1.26.66) */
.cp-unlock {
  text-align: left; margin: 18px auto 30px; max-width: 380px;
  background: var(--ds-card); border: 1px solid var(--ds-border-sub);
  border-radius: 14px; padding: 4px 16px;
}
.cp-unlock-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--ds-border-sub);
}
.cp-unlock-row:last-child { border-bottom: none; }
.cp-unlock-row .ti { font-size: 20px; color: var(--ds-prog-acc); line-height: 1.2; }
.cp-unlock-body   { flex: 1; min-width: 0; }
.cp-unlock-head   { font-size: 14px; font-weight: 700; color: var(--ds-txt); }
.cp-unlock-packs  { font-size: 14px; color: var(--ds-txt2); margin-top: 3px; line-height: 1.5; }
.cp-unlock-note   { font-size: 12px; color: var(--ds-txt3); margin-top: 4px; line-height: 1.5; }
.cp-result-btn {
  background: var(--ds-acc); color: #fff; border: none; border-radius: 99px;
  padding: 16px 40px; font-size: 16px; font-weight: 700; cursor: pointer;
}

/* ── FOLDERS ─────────────────────────────────────────────────────────────── */
.folders-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.folders-title { font-size: 18px; font-weight: 700; }
.btn-add-folder {
  background: var(--ds-acc); color: #fff; border: none;
  border-radius: 20px; padding: 12px 22px; font-size: 16px; font-weight: 600; cursor: pointer;
}
.folders-empty { color: var(--ds-txt3); font-size: 16px; padding: 40px 0; text-align: center; }
.folder-item { margin-bottom: 14px; }
.folder-header-row {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--ds-card); border: 1px solid var(--ds-border);
  border-radius: 12px; padding: 16px 18px;
}
.folder-toggle-btn {
  display: flex; align-items: center; gap: 14px;
  background: none; border: none; cursor: pointer; flex: 1; text-align: left; min-height: 44px;
}
.folder-chevron { font-size: 13px; color: var(--ds-txt3); width: 16px; display: inline-block; }
.folder-name { font-size: 17px; font-weight: 600; }
.folder-count { font-size: 15px; color: var(--ds-txt3); margin-left: 4px; }
.folder-actions { display: flex; gap: 10px; flex-shrink: 0; }
.folder-btn {
  width: 44px; height: 44px; border: 1px solid var(--ds-border);
  border-radius: 8px; background: none; cursor: pointer; font-size: 20px;
  color: var(--ds-txt2); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.folder-btn.danger:hover { border-color: #C0392B; color: #C0392B; }
.folder-body {
  padding: 12px 0 6px 16px; border-left: 3px solid var(--ds-border);
  margin-left: 18px; margin-top: 6px;
}
.folder-empty-msg { font-size: 15px; color: var(--ds-txt3); padding: 12px 0; }
.folder-pack-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.folder-pack-card { flex: 1; margin-bottom: 0 !important; }
.folder-remove-pack {
  width: 44px; height: 44px; flex-shrink: 0;
  border: 1px solid var(--ds-border); border-radius: 8px;
  background: none; cursor: pointer; font-size: 20px; color: var(--ds-txt3);
  display: flex; align-items: center; justify-content: center;
}
.folder-remove-pack:hover { border-color: #C0392B; color: #C0392B; }
.folder-add-pack-btn {
  margin-top: 10px; background: none; border: 1px dashed var(--ds-border);
  border-radius: 10px; padding: 14px 18px; font-size: 16px; color: var(--ds-txt3);
  cursor: pointer; width: 100%;
}
.folder-add-pack-btn:hover { border-color: var(--ds-acc); color: var(--ds-acc); }

/* ── ACCESS LEVEL SUGGEST BARS ───────────────────────────────────── */
.al-bar {
  display: none;
  justify-content: space-around;
  align-items: center;
  padding: 0 8px 14px;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  gap: 10px;
}
body.al-suggest-mode .al-bar  { display: flex; }
body.al-suggest-mode .fb-bar  { display: none !important; }
body.feedback-mode    .al-bar { display: none !important; }

.al-btn {
  flex: 1;
  height: 38px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  opacity: 0.25;
  transition: opacity 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.al-btn:active              { transform: scale(0.92); }
.al-btn[data-val="1"]       { background: #388E3C; }
.al-btn[data-val="2"]       { background: #1565C0; }
.al-btn[data-val="3"]       { background: #6A1B9A; }
.al-btn.al-selected         { opacity: 1; }
.al-btn.al-dimmed           { opacity: 0.12; }

/* Pack-level bar in settings overlay */
.al-bar--pack {
  position: static;
  display: flex;
  gap: 12px;
  padding: 14px 0;
  width: 100%;
}
.al-bar--pack .al-btn {
  flex: 1;
  height: 52px;
  font-size: 16px;
  border-radius: 14px;
  opacity: 0.25;
}
.al-bar--pack .al-btn.al-selected { opacity: 1; }
.al-bar--pack .al-btn.al-dimmed   { opacity: 0.1; }

/* Mode topbar center group */
.mode-topbar-center {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ── PACK-LEVEL FEEDBACK BAR IN SETTINGS ─────────────────────────────────── */
.fb-bar--pack {
  position: static;
  display: flex;
  justify-content: space-around;
  padding: 12px 0;
  width: 100%;
}
.fb-bar--pack .fb-btn {
  width: 52px;
  height: 52px;
}

/* ── DASHBOARD HERO BANNER (v1.26.11) ───────────────────────────── */
.dash-hero {
  background: linear-gradient(135deg, var(--ds-hero-a), var(--ds-hero-b));
  padding: 34px 20px 22px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.dash-hero::after {
  content: '';
  position: absolute;
  right: -30px; top: -30px;
  width: 150px; height: 150px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}
.dash-hero .dash-welcome-text {
  font-size: 30px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.4px;
  margin-bottom: 4px;
  position: relative;
  z-index: 1;
}

/* Uppgift 6 — logo next to welcome title */
.dash-welcome-row {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
}
.dash-welcome-row .dash-welcome-text { margin-bottom: 0; }
.dash-welcome-logo {
  width: 74px;
  height: 74px;
  border-radius: 16px;
  opacity: 0.42;
  flex-shrink: 0;
  margin-left: auto;
  margin-right: 20px;
  margin-top: 8px;
  align-self: flex-end;
}
.dash-hero .dash-welcome-sub {
  font-size: 15px;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}
.dash-hero .dash-topbar {
  padding: 0;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.dash-hero .dash-search-bar {
  border: none;
  height: 44px;
  border-radius: 14px;
  background: var(--ds-card, #fff);
}
.dash-hero .topbar-btn {
  color: #fff;
}

/* Uppgift — white bg square on home gear (matching lib-banner-btn style) */
/* v1.26.82 — tier banner at the top of a program: either "Pro only, but do
   look" or "free this far". Sits between the description and Part 1. */
.prog-tier-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
  background: var(--ds-topbar-btn);
  color: var(--ds-txt2);
}
.prog-tier-banner i { flex-shrink: 0; font-size: 16px; }

#homeSettingsBtn {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(255,255,255,0.22);
  color: rgba(60, 25, 5, 0.85);
  flex-shrink: 0;
}

/* v1.26.79 — in search mode the gear is replaced by the WORD "Cancel", which
   is wider than the 34px square, so the white plate stopped short of the text.
   Width becomes auto with side padding; .dash-search-bar is flex:1 and gives
   up exactly the extra width by itself, so the field shrinks instead of the
   row overflowing. The class is added/removed by enterSearch/exitSearch in
   app-ui.js. */
#homeSettingsBtn.is-cancel {
  width: auto;
  min-width: 34px;
  padding: 0 12px;
}

/* ── PROGRESS BANNER (v1.26.11) ────────────────────────────────── */
.prog-banner {
  margin: 0;
}

/* Uppgift 5 — dark gear icon on Progress banner (keep white circle background) */
#progressSettingsBtn { color: rgba(60, 25, 5, 0.85); }

.prog-intro {
  font-size: 14px;
  color: var(--ds-txt2);
  margin: 14px 20px 16px;
  line-height: 1.45;
}

/* ── FULL-BLEED FIXES (v1.26.12) ────────────────────────────── */
/* Screen-level horizontal padding removed: scroll containers own their 20px,
   so banners reach the edges and content is not double-inset. */
.dashboard-screen,
.progress-screen {
  padding-left: 0;
  padding-right: 0;
}

/* ── UNIFORM BANNER HEIGHT (v1.26.12) ────────────────────────── */
/* Match the taller Folders/Favorites banner (34px plus-button row)
   so Packs/Topics/Programs/Progress banners are the same height. */
.lib-banner {
  min-height: 68px;
  box-sizing: border-box;
}
/* v1.29.86 — the iPhone app adds --ds-native-top to the banner's padding, so
   68px was no longer enough for a banner WITH a button (Folders, Favorites,
   Voices): those grew 10px taller than Packs, Topics and Programs and the
   edge jumped between tabs. The minimum grows by the same amount. */
.ds-native .lib-banner { min-height: calc(68px + var(--ds-native-top)); }


/* ── FOLDERS v2 (v1.26.16) — banner-driven folder screen ─────────────── */
/* Banner back/edit buttons (shared lib-banner, shown only inside a folder) */
.lib-banner-back { margin-right: 12px; font-size: 20px; flex-shrink: 0; }
.lib-banner-edit {
  width: auto;
  padding: 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.lib-banner-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Folder list (variant A) */
.fol-card {
  background: var(--ds-card);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
  box-shadow: 0 2px 10px var(--ds-shadow);
  border: 0.5px solid var(--ds-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.25s ease;
}
.fol-card:active { opacity: 0.85; }
/* Uppgift 15 — swipe hint */
.fol-swipe-hint {
  text-align: center;
  font-size: 12px;
  color: var(--ds-txt3);
  margin: 4px 0 16px;
}
.fol-card-icon { font-size: 20px; color: var(--ds-acc); flex-shrink: 0; display: flex; }
.fol-card-name {
  flex: 1;
  min-width: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fol-card-count { font-size: 13px; color: var(--ds-txt2); flex-shrink: 0; }
.fol-card-chevron { font-size: 18px; color: var(--ds-txt3); flex-shrink: 0; }

/* Dashed "New folder" button */
.fol-new-btn {
  border: 1.5px dashed var(--ds-border);
  border-radius: 16px;
  padding: 16px 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  color: var(--ds-acc);
  font-size: 15px;
  font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}
.fol-new-btn:active { background: var(--ds-card-alt); }
.fol-new-plus { font-size: 20px; line-height: 1; }

/* Folder empty-state (inside list view) */
.fol-empty { text-align: center; padding: 36px 20px 20px; }
.fol-empty-icon { font-size: 40px; margin-bottom: 10px; }
.fol-empty-title { font-size: 17px; font-weight: 700; color: var(--ds-txt); margin-bottom: 6px; }
.fol-empty-text { font-size: 14px; color: var(--ds-txt2); line-height: 1.5; margin-bottom: 18px; }

/* Open folder — view mode hint when empty */
.fol-view-empty { font-size: 14px; color: var(--ds-txt2); text-align: center; padding: 32px 20px; line-height: 1.5; }

/* Uppgift 1a — padding between folder banner and first pack card */
#libTabFolders .fol-pack-card:first-child { margin-top: 14px; }
#libTabFolders .fol-section-label:first-child { padding-top: 14px; }

/* Edit mode */
.fol-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-txt2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 14px 2px 8px;
}
.fol-edit-row {
  background: var(--ds-card);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 8px;
  border: 0.5px solid var(--ds-border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.fol-row-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fol-row-btn {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.fol-row-rem { background: #FBE9E2; color: #D04A18; }
.fol-row-rem:active { background: #F5D5C8; }
.fol-row-add { background: #FDF1E8; color: var(--ds-acc); }
.fol-row-add:active { background: #F5E2D0; }
.fol-edit-msg { font-size: 13px; color: var(--ds-txt2); padding: 4px 2px 8px; }

/* Manage buttons at bottom of edit mode */
.fol-manage-row { display: flex; gap: 10px; margin-top: 18px; }
.fol-manage-btn {
  flex: 1;
  padding: 12px;
  border-radius: 12px;
  border: 1.5px solid var(--ds-border);
  background: transparent;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-txt2);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fol-manage-btn:active { background: var(--ds-card-alt); }
.fol-manage-btn.fol-danger { color: #D04A18; border-color: #E8B8A0; }

/* Bottom sheet modal (create / rename / delete) */
.fol-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 400;
  display: flex;
  align-items: flex-end;
}
.fol-sheet {
  background: var(--ds-bg);
  border-radius: 18px 18px 0 0;
  padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px));
  width: 100%;
}
.fol-sheet-title { font-size: 17px; font-weight: 800; color: var(--ds-txt); margin-bottom: 14px; }
.fol-sheet-text { font-size: 14px; color: var(--ds-txt2); line-height: 1.5; margin-bottom: 14px; }
.fol-sheet-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 16px;
  font-family: inherit;
  color: var(--ds-txt);
  margin-bottom: 14px;
  outline: none;
}
.fol-sheet-input:focus { border-color: var(--ds-acc); }
.fol-sheet-btn {
  width: 100%;
  border: none;
  border-radius: 12px;
  padding: 14px;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.fol-sheet-btn.fol-primary {
  background: linear-gradient(135deg, var(--ds-hero-a), var(--ds-hero-b));
  color: #fff;
  margin-bottom: 10px;
}
.fol-sheet-btn.fol-primary:active { opacity: 0.9; }
.fol-sheet-btn.fol-danger-btn {
  background: #D04A18;
  color: #fff;
  margin-bottom: 10px;
}
.fol-sheet-btn.fol-cancel { background: transparent; color: var(--ds-txt2); padding: 10px; }


/* ── EXTENDED STORE v2 (v1.26.21) — search, code redemption, kits ─────── */
.ext-lifetime-card {
  background: linear-gradient(135deg, #2C1A08, #5A2E10);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 0 0 18px;
  color: #fff;
}
.ext-lifetime-title { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.ext-lifetime-title i { color: #F2A25C; }
.ext-lifetime-desc { font-size: 13px; line-height: 1.5; opacity: 0.85; margin: 6px 0 12px; }
.ext-lifetime-bottom { display: flex; align-items: center; justify-content: space-between; }
/* Once Lifetime Pro is owned the price disappears, leaving the actions as the
   only child — and space-between then pushes them flush left. Keeping them
   right-aligned regardless means the row looks the same before and after the
   purchase, and matches how a bought pack or program renders. (v1.26.62) */
.ext-lifetime-bottom .ext-store-actions { margin-left: auto; }
.ext-lifetime-price { font-size: 18px; font-weight: 800; color: #F2A25C; white-space: nowrap; }
/* v1.29.80 — price with Info under it on the left, the buy button on the
   right, so the button has room for "Get Lifetime Pro" on one line. */
.ext-lifetime-bottom { gap: 12px; }
.ext-lifetime-left { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.ext-lifetime-bottom > .ext-lifetime-btn { margin-left: auto; padding: 12px 20px; }
.ext-lifetime-btn {
  background: linear-gradient(135deg, var(--ds-hero-a), var(--ds-hero-b));
  color: #fff; border: none; border-radius: 10px;
  padding: 10px 20px; font-size: 14px; font-weight: 700;
  font-family: inherit; cursor: pointer;
}
.ext-lifetime-owned { font-size: 14px; font-weight: 700; color: #7BC47F; display: flex; align-items: center; gap: 6px; }

.ext-search-wrap { margin: 0 0 16px; }
.ext-search-input {
  width: 100%;
  box-sizing: border-box;
  background: var(--ds-card);
  border: 1px solid var(--ds-border);
  border-radius: 24px;
  padding: 12px 18px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ds-txt);
  outline: none;
}
.ext-search-input:focus { border-color: var(--ds-acc); }
.ext-search-empty { font-size: 14px; color: var(--ds-txt2); text-align: center; padding: 18px 0; }
.ext-code-msg {
  font-size: 13px; font-weight: 600; color: #2E7D32;
  background: #E8F5E9; border-radius: 10px;
  padding: 10px 14px; margin: 0 0 14px; text-align: center;
}

.ext-load-more {
  display: block;
  width: 100%;
  background: transparent;
  border: 1.5px dashed var(--ds-border);
  border-radius: 12px;
  padding: 11px;
  margin: 2px 0 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-acc);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.ext-load-more:active { background: var(--ds-card-alt); }

.ext-store-includes { font-size: 12px; color: var(--ds-txt2); margin-top: 4px; line-height: 1.4; }


/* ── GUIDE TEXT (v1.26.22) — framing line above card text ───────────── */
.card-guide {
  text-align: center;
  font-size: 13.5px;
  font-weight: 600;
  font-style: italic;
  color: var(--ds-txt2);
  letter-spacing: 0.01em;
  margin-top: 10px;
  margin-bottom: 10px;
  line-height: 1.4;
}


/* ── FOLDER ROW DRAG + PULL-PIN (v1.26.23) ─────────────────────── */
.fol-edit-row.fol-row-in {
  transition: transform 0.15s ease;
  touch-action: pan-y;
  /* Long-press must never select text or trigger the iOS callout */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.fol-row-dragging {
  transition: none !important;
  position: relative;
  z-index: 5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  opacity: 0.96;
}

/* .mode-pin-toast removed in v1.29.99 with the pull-to-pin gesture */

/* ── TAB INFO TEXT (v1.26.26) — short helper line under each banner ───── */
.tab-info {
  font-size: 13px;
  color: var(--ds-txt2);
  margin: 2px 0 14px;
  line-height: 1.45;
}

/* Uppgift 8 — extra top margin for tab-info when immediately below a folder banner */
/* v1.30.15 (Rikard 2026-11-01) — the same air above the first line on every
   Library tab (Packs, Topics, Programs, Folders, Favorites, Voices), not only
   Folders, where it had shown since v1.30.10 put the heading first. */
#libTabFolders .tab-info:first-child,
.library-tab-content > .tab-info:first-child { margin-top: 14px; }
/* Featured folders for a free user: the Pro group's heading, like #libProHeading */
.fol-pro-heading { margin-top: 22px; }

/* ─── DASHBOARD STREAK CHIP (v1.26.35) ─────────────────────────────────
   Shows the current daily-goal streak from the Progress system on the home
   hero. Hidden when progress tracking is off or the streak is 0. */
.dash-streak-card {
  background: var(--ds-card);
  border-radius: 16px;
  box-shadow: 0 2px 10px var(--ds-shadow);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.dash-streak-flame { font-size: 28px; line-height: 1; }
.dash-streak-count { font-size: 17px; font-weight: 800; color: var(--ds-txt); }
.dash-streak-sub   { font-size: 13px; color: var(--ds-txt3); margin-top: 2px; }

/* ─── ABOUT & PRIVACY (v1.26.36) ───────────────────────────────────────
   Simple readable text panel reusing the settings overlay pattern. */
/* The overlay must stack ABOVE the full-screen settings panel (z-index 700),
   since it is opened from inside it — the shared .settings-overlay class only
   has z-index 100 (v1.26.38 fix). */
#aboutOverlay { z-index: 800; }

/* Same rule, same reason (v1.26.66): these four are all reachable from inside
   the full-screen settings panel — What's new from its own row, and the other
   three from the developer preview buttons. At the shared z-index 100 they
   open BEHIND the settings screen and look like a dead button. Anything new
   that can be opened from Settings needs this line too. */
#whatsNewOverlay,
#proNudgeOverlay,
#recoOverlay,
#ratingOverlay { z-index: 800; }

/* Next-pack suggestion (v1.26.66) */
.reco-icon   { text-align: center; font-size: 30px; color: var(--ds-acc); margin-bottom: 6px; }
.reco-reason { font-size: 14px; color: var(--ds-txt2); text-align: center; line-height: 1.6; margin: 6px 0 14px; }
.reco-pack {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--ds-card); border: 1px solid var(--ds-border-sub);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.reco-pack-name { font-size: 16px; font-weight: 700; color: var(--ds-txt); }
.reco-pack-tag {
  font-size: 10px; font-weight: 800; letter-spacing: 0.04em;
  color: var(--ds-acc); border: 1px solid var(--ds-acc);
  border-radius: 5px; padding: 2px 5px;
}
.reco-never {
  display: block; width: 100%; margin-top: 2px; padding: 8px;
  border: none; background: none; font-family: inherit;
  font-size: 13px; color: var(--ds-txt3); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.about-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-txt2);
  margin: 0 0 12px;
}
.about-body p strong { color: var(--ds-txt); }
.about-body .about-meta {
  font-size: 12px;
  color: var(--ds-txt3);
}

/* ─── EXTENDED: INFO BUTTON + INFO OVERLAY (v1.26.39) ───────────────────────
   Every purchasable item gets an Info button beside Add that opens a selling
   detail panel. Overlay stacks above tab screens and bottom nav. */
.ext-store-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ext-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1.5px solid var(--ds-border, #d8cfc4);
  color: var(--ds-txt2);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.ext-info-btn:active { opacity: 0.7; }
.ext-info-btn--light {
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

#extInfoOverlay { z-index: 800; }
.ext-info-panel {
  max-height: 82vh;
  overflow-y: auto;
}
.ext-info-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
.ext-info-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--ds-txt);
}
.ext-info-body p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ds-txt2);
  margin: 0 0 12px;
}
.ext-info-includes {
  border-top: 1px solid var(--ds-border, #e5ddd2);
  padding-top: 12px;
  margin-bottom: 12px;
}
.ext-info-includes-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ds-txt3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}
.ext-info-include-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--ds-txt);
  padding: 4px 0;
}
.ext-info-bottom {
  border-top: 1px solid var(--ds-border, #e5ddd2);
  padding-top: 14px;
  margin-bottom: 4px;
}

/* ─── TABLET / IPAD LAYOUT (v1.26.31) ─────────────────────────────────────────
   On phones nothing changes (the query never matches). On iPad the app shell
   widens from the phone column to a roomier centered column, Quizlet-style:
   bigger card, larger card text, same navigation. All screens share the same
   shell width so layered transitions still line up perfectly. */

@media (min-width: 700px) and (min-height: 500px) {
  :root { --ds-shell-w: 680px; }

  .home-screen, .mode-screen, .app,
  .dashboard-screen, .progress-screen, .upgrade-screen,
  .settings-screen, .extended-screen,
  .bottom-nav, .settings-panel {
    max-width: var(--ds-shell-w);
  }

  /* Training card: taller and roomier, like Quizlet's tablet flashcards */
  .card { min-height: 420px; padding: 48px 48px; }
  /* the card's bottom padding grows to 48px here, so the bar follows it down */
  .fb-bar { bottom: -32px; }
  .card-area { padding: 16px 32px 28px; }
  .card-text { font-size: 25px; }
  .card-back .card-text { font-size: 22px; }
  .strategy-label { font-size: 19px; }

  /* Slightly larger transport controls in handsfree */
  .hf-transport-btn svg { width: 26px; height: 26px; }
}

/* Larger iPads in landscape get a touch more width */
@media (min-width: 1024px) and (min-height: 500px) {
  :root { --ds-shell-w: 760px; }
}

/* ─── ONBOARDING (v1.26.33) ─────────────────────────────────────────────
   First-run intro. Sits under the splash (z 9999) so it is revealed as the
   splash fades. Uses the app's own palette vars for light/dark themes. */

#onboardingScreen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 18px 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 700px) and (min-height: 500px) {
  #onboardingScreen { max-width: var(--ds-shell-w); }
}

.ob-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 32px;
}
.ob-dots { display: flex; gap: 6px; }
.ob-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ds-border, #d8cfc4);
  transition: background 0.25s ease, transform 0.25s ease;
}
.ob-dot--active { background: var(--ds-acc, #F2622A); transform: scale(1.25); }
.ob-skip {
  border: none; background: none; cursor: pointer;
  font-size: 14px; color: var(--ds-txt3);
  padding: 6px 4px;
}

.ob-step {
  flex: 1;
  /* v1.26.77 — a page with many lines (the First Strategies overview lists
     six strategies) used to push the Continue button off the screen, so the
     only way on was Skip. min-height:0 lets the step shrink inside the fixed
     flex column, overflow-y makes the extra content reachable, and `safe
     center` keeps short pages centred while switching to top-aligned as soon
     as the content is taller than the space — plain `center` would put the
     first lines above the scrollable area, out of reach. */
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-content: safe center;
  text-align: center;
  gap: 14px;
  animation: obFadeIn 0.35s ease;
}
.ob-step::-webkit-scrollbar { display: none; }
.ob-top, .ob-bottom { flex-shrink: 0; }
@keyframes obFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ob-logo {
  width: 72px; height: 72px;
  margin: 0 auto 4px;
  border-radius: 20px;
  background: var(--ds-splash-bg, #1E1008);
  color: var(--ds-splash-acc, #F2622A);
  font-size: 40px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.ob-title { font-size: 24px; font-weight: 800; color: var(--ds-txt); margin: 0; }
.ob-text  { font-size: 16px; line-height: 1.5; color: var(--ds-txt2); margin: 0; }
.ob-text--dim { font-size: 14px; color: var(--ds-txt3); }

.ob-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.ob-options--chips {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.ob-option {
  border: 1.5px solid var(--ds-border, #d8cfc4);
  background: var(--ds-card, #fff);
  color: var(--ds-txt);
  border-radius: 14px;
  padding: 13px 16px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.ob-option:active { transform: scale(0.98); }
.ob-options--chips .ob-option { padding: 9px 14px; font-size: 14px; border-radius: 20px; }
.ob-option--selected {
  border-color: var(--ds-acc, #F2622A);
  background: var(--ds-acc-soft, rgba(242, 98, 42, 0.10));
}
/* Bold only on full-width (vertical) options — on wrapping chips a weight
   change alters the chip width and reflows the whole row. */
.ob-options:not(.ob-options--chips) .ob-option--selected { font-weight: 600; }

.ob-how { display: flex; flex-direction: column; gap: 14px; text-align: left; margin: 4px 0; }
.ob-how-row { display: flex; gap: 12px; align-items: flex-start; }
.ob-how-row p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ds-txt2); }
.ob-how-num {
  flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ds-acc, #F2622A); color: #fff;
  font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

.ob-bottom { padding-top: 12px; }
.ob-next {
  width: 100%;
  border: none;
  border-radius: 16px;
  background: var(--ds-acc, #F2622A);
  color: #fff;
  font-size: 16px; font-weight: 700;
  padding: 15px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
}
.ob-next:active { transform: scale(0.99); }
.ob-next:disabled { opacity: 0.4; cursor: default; }

#onboardingScreen.ob-leaving {
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

/* ─── PACK INTRO (v1.26.44) ────────────────────────────────────────────
   Per-pack informational intro shown the first 3 times a pack is opened
   (and replayable by tapping the pack name on the mode screen). Reuses the
   onboarding ob-* components; sits above the mode screen, below the splash. */
#packIntroScreen {
  position: fixed;
  inset: 0;
  z-index: 8500;
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 18px 24px calc(24px + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 700px) and (min-height: 500px) {
  #packIntroScreen { max-width: var(--ds-shell-w); }
}
#packIntroScreen.ob-leaving {
  transition: opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

/* ─── EXTENDED STORE: keep owned actions right-aligned (v1.26.44) ────────────
   .ext-store-card-bottom uses space-between; once an item is bought the price
   disappears, leaving .ext-store-actions as the only child — which
   space-between then parks on the LEFT. Push it back to the right so
   Info + Added sit exactly where Info + Add sat before the purchase. */
.ext-store-card-bottom > .ext-store-actions:only-child { margin-left: auto; }

/* ─── SILENT GEARS — KEEP THIS LAST IN THE FILE ──────────────────────────────
   (v1.27.20)

   THE WHITE SQUARE, twice. `.program-settings-btn:hover` sets
   `background: var(--ds-card)`. That selector and `.prog-gear--silent:hover`
   have the SAME specificity — one class plus one pseudo-class each — so
   specificity cannot break the tie and SOURCE ORDER decides. The silent rules
   were written a thousand lines earlier in the file, so the hover rule won,
   and a tap left the hover state stuck: a pale square exactly where the icon
   is not drawn.

   This is the third time this file has produced the same class of bug (see
   `.hint--muted` vs `.hint`). The lesson stands: a rule that must win is
   asserted on COMPUTED STYLE in tools/test-notes.js, not read off the source.

   Every interactive state is pinned, and the highlight the browser paints on
   its own goes with them. A button drawn as nothing must stay nothing while it
   is being pressed. */
.mode-gear--silent,  .mode-gear--silent:hover,  .mode-gear--silent:focus,  .mode-gear--silent:active,  .mode-gear--silent:focus-visible,
.prog-gear--silent,  .prog-gear--silent:hover,  .prog-gear--silent:focus,  .prog-gear--silent:active,  .prog-gear--silent:focus-visible {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: transparent !important;
  -webkit-tap-highlight-color: transparent;
  cursor: default;
}

/* ─── PORTRAIT ONLY ON PHONES (v1.27.53) ────────────────────────────────────
   Rikard, 2026-08-28: with rotation unlocked on the iPhone, turning the phone
   sideways gave a wide, short Deckstack the layout was never drawn for — and
   turning it back left the page slightly scrollable with scrollbars down the
   right edge. Both are the same fault: `.app` is `height: 100dvh` inside a
   `overflow: hidden` body, so a landscape pass leaves a stale height behind.

   There is no API fix on iOS. Safari honours neither the manifest's
   `orientation` member nor `screen.orientation.lock()`, so the lock is done in
   the layout instead: hide `.app` completely while the phone is sideways.
   Nothing is laid out at the wrong size, so nothing stale survives the way
   back, and the notice below is all that shows.

   THE QUERY IS DELIBERATELY NARROW. It needs landscape AND a viewport under
   500px tall. Phones in landscape are 320–430px tall; the shortest iPad is
   744px. So this never fires on an iPad, which keeps both orientations until
   Rikard has tested one. Raising 500px would catch iPads too — don't, without
   testing there first. */

#rotateNotice { display: none; }

@media (orientation: landscape) and (max-height: 500px) {
  .app,
  #onboardingScreen,
  #packIntroScreen,
  #splashScreen { display: none !important; }

  #rotateNotice {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--ds-bg);
    color: var(--ds-txt);
    text-align: center;
  }
  .rn-inner { max-width: 340px; }
  .rn-icon  { width: 40px; height: 40px; color: var(--ds-txt2); margin-bottom: 16px; }
  .rn-title { font-size: 19px; font-weight: 600; margin-bottom: 8px; }
  .rn-text  { font-size: 15px; line-height: 1.5; color: var(--ds-txt2); }
  /* v1.27.60 \u2014 the honest footnote. The pixel-pinning in app-core.js
     clears the stale viewport height on most devices but not on all, and a
     restart always does. Saying so is better than leaving someone with a
     screen that drags a few pixels and no idea why. */
  .rn-note  { font-size: 12.5px; line-height: 1.5; color: var(--ds-txt3, var(--ds-txt2));
              opacity: 0.8; margin-top: 14px; }
}

/* ─── VIEWPORT PINNED AFTER A ROTATION (v1.27.59) ────────────────────────────
   See dsRotationReset() in app-core.js. Every box below is `height: 100dvh`
   further up; once the phone has been rotated, iOS can keep serving the
   landscape value and the whole screen becomes draggable. From the first
   rotation onwards these six take a measured pixel height instead.

   The class is only ever added by that function, so a device that is never
   rotated never sees these rules and keeps the plain `dvh` behaviour. */
html.ds-vh-pinned .app,
html.ds-vh-pinned .home-screen,
html.ds-vh-pinned .mode-screen,
html.ds-vh-pinned .upgrade-screen,
html.ds-vh-pinned .settings-screen,
html.ds-vh-pinned .extended-screen {
  height: var(--ds-vh, 100dvh) !important;
  max-height: var(--ds-vh, 100dvh) !important;
}

/* ─── MODE TILES INSIDE THE GUIDE (v1.27.60) ─────────────────────────────────
   The mode guide explains the six choices on the mode screen, so it shows them
   the way the mode screen does: a tile, the same Tabler icon, the name. Values
   are borrowed from .mode-card and .mode-icon and then scaled down — a guide
   page has to fit three tiles and a heading without scrolling, so the padding
   and the icon are smaller here. Not a shared class: the mode screen's cards
   are tappable and these are not, and one rule serving both would tie a
   decorative element to a live control. */
.gd-modes { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* v1.29.93 (Rikard) — more air between "The training modes" and the tiles,
   so the title reads as a heading rather than a label stuck to the first tile. */
.ob-step .gd-modes { margin-top: 12px; }

.gd-mode {
  background: var(--ds-card);
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px var(--ds-shadow);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  text-align: left;
}
.gd-mode-ic {
  font-size: 22px;
  width: 32px;
  flex-shrink: 0;
  color: var(--ds-acc);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 2px;
}
.gd-mode-tx { flex: 1; min-width: 0; }
.gd-mode-tx strong {
  display: block;
  font-size: 15px;
  color: var(--ds-txt);
  margin-bottom: 3px;
}
.gd-mode-tx span {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ds-txt2);
}

/* ─── LEGAL LINKS (v1.29.42) ─── filled from LEGAL_LINKS in app-system.js */
.legal-links {
  font-size: 12px;
  color: var(--ds-txt3);
  text-align: center;
  margin: 14px 0 4px;
}
.legal-links a { color: var(--ds-acc); text-decoration: none; }
.legal-links a:active { opacity: .7; }
.legal-links--store { margin: 4px 0 16px; }
.legal-links[hidden] { display: none; }
.ob-disclaimer { margin-top: 18px; font-size: 12px; }

/* ─── PROGRESS — "Goal first" layout (v1.29.52) ──────────────────────────────
   Every day is a ring that fills toward the daily goal: the big ring is today,
   the small rings are this week, and the calendar is made of the same rings.
   A filled disc is a goal day. Rendered by renderProgress() in app-ui.js. */
.pg-card {
  background: var(--ds-card); border-radius: 18px;
  padding: 18px; margin-bottom: 14px;
}
.pg-dim { color: var(--ds-txt2); font-weight: 500; }
.pg-ring-track { fill: none; stroke: var(--ds-ring-track); }
.pg-ring-fill  { fill: none; stroke: var(--ds-prog-acc); stroke-linecap: round; transition: stroke-dashoffset .5s ease; }

/* Today */
.pg-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 22px; }
.pg-hero-ring { position: relative; width: 168px; height: 168px; }
.pg-hero-ring svg { width: 168px; height: 168px; display: block; }
.pg-hero-center {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
}
.pg-hero-num { font-size: 40px; font-weight: 800; line-height: 1; color: var(--ds-txt); }
.pg-hero-of { font-size: 20px; font-weight: 600; color: var(--ds-txt2); }
.pg-hero-lbl { font-size: 13px; color: var(--ds-txt2); margin-top: 4px; }
.pg-hero-msg { font-size: 15px; font-weight: 600; color: var(--ds-txt); text-align: center; }
.pg-weekrings {
  width: 100%; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
  border-top: 1px solid var(--ds-border-sub); padding-top: 6px;
}
.pg-wr {
  border: none; background: none; padding: 8px 0 2px; font-family: inherit; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  -webkit-tap-highlight-color: transparent;
}
.pg-wr-day { font-size: 12px; font-weight: 700; color: var(--ds-txt2); }
.pg-wr.today .pg-wr-day { color: var(--ds-prog-acc); }
.pg-wr-min { font-size: 12px; color: var(--ds-txt2); }
.pg-wr.future { cursor: default; opacity: .45; }

/* A day ring — used in the week row and the calendar */
.pg-ring { position: relative; display: block; }
.pg-ring svg { width: 100%; height: 100%; display: block; }
.pg-ring .pg-disc { fill: none; }
.pg-ring.met .pg-disc { fill: var(--ds-prog-acc); }
.pg-ring.met .pg-ring-track { stroke: var(--ds-prog-acc); }
.pg-ring-check {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--ds-cal-4-txt); font-size: 16px;
}
.pg-wr .pg-ring { width: 38px; height: 38px; }

/* This week */
.pg-week { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.pg-week-head { display: flex; justify-content: space-between; align-items: baseline; }
.pg-week-title { font-size: 15px; font-weight: 700; color: var(--ds-txt); }
.pg-week-val { font-size: 15px; font-weight: 700; color: var(--ds-txt); }
.pg-bar { height: 10px; border-radius: 5px; background: var(--ds-ring-track); overflow: hidden; }
.pg-bar-fill { height: 100%; width: 0; border-radius: 5px; background: var(--ds-prog-acc); transition: width .5s ease; }
.pg-week-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  font-size: 13px; color: var(--ds-txt2); flex-wrap: wrap;
}
.pg-streak { display: inline-flex; align-items: center; gap: 4px; color: var(--ds-txt); }
.pg-streak .ti { font-size: 17px; color: var(--ds-prog-acc); }
.pg-week-days { font-size: 13px; color: var(--ds-txt2); }
.pg-week-days strong { color: var(--ds-txt); }

/* Calendar of rings */
.pg-cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.pg-cal-grid .prog-cal-dow { font-size: 11px; color: var(--ds-txt2); }
.pg-day {
  position: relative; border: none; background: none; padding: 0; font-family: inherit;
  cursor: pointer; aspect-ratio: 1 / 1; max-height: 46px; width: 100%;
  display: flex; align-items: center; justify-content: center; border-radius: 12px;
  -webkit-tap-highlight-color: transparent;
}
.pg-day .pg-ring { width: 92%; height: 92%; max-width: 42px; max-height: 42px; }
.pg-day-num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: var(--ds-txt);
}
.pg-day.met .pg-day-num { color: var(--ds-cal-4-txt); }
.pg-day.future { cursor: default; }
.pg-day.future .pg-ring-track { stroke: transparent; }
.pg-day.future .pg-day-num { color: var(--ds-txt3); }
.pg-day.out { opacity: .4; }
.pg-day.today { box-shadow: inset 0 0 0 2px var(--ds-prog-acc); }
.pg-cal-sum { margin-top: 12px; font-size: 13px; color: var(--ds-txt2); text-align: center; }
.pg-cal-sum strong { color: var(--ds-txt); }

/* Where your time went */
.pg-time-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pg-time-title { font-size: 15px; font-weight: 700; color: var(--ds-txt); }
.pg-time-period { font-size: 13px; margin: -2px 0 6px; }
.pg-seg { display: flex; background: var(--ds-subnav-btn); border-radius: 10px; padding: 3px; }
.pg-seg-btn {
  border: none; background: none; font-family: inherit; cursor: pointer; border-radius: 8px;
  height: 30px; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--ds-txt2);
  -webkit-tap-highlight-color: transparent;
}
.pg-seg-btn.active { background: var(--ds-card); color: var(--ds-txt); font-weight: 700; box-shadow: 0 1px 3px var(--ds-shadow); }
.pg-row--topic {
  border: none; background: none; padding: 0; font-family: inherit; text-align: left;
  cursor: pointer; width: 100%; -webkit-tap-highlight-color: transparent;
}
.pg-subrows { display: none; flex-direction: column; gap: 9px; margin: 10px 0 2px 14px; padding-left: 12px; border-left: 2px solid var(--ds-ring-track); }
.pg-topic.open .pg-subrows { display: flex; }
.pg-subrow { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.pg-subrow .pg-row-name { font-size: 13px; font-weight: 500; }
.pg-subrow .pg-row-val { font-size: 13px; }
.pg-subrow .pg-row-track, .pg-subrow .pg-row-fill { height: 4px; }
.pg-tabs { display: flex; gap: 18px; border-bottom: 1px solid var(--ds-border-sub); margin-bottom: 12px; }
.pg-tab {
  border: none; background: none; padding: 8px 0; font-family: inherit; cursor: pointer;
  font-size: 14px; font-weight: 600; color: var(--ds-txt2); min-height: 36px;
  -webkit-tap-highlight-color: transparent;
}
.pg-tab.active { color: var(--ds-txt); font-weight: 700; box-shadow: inset 0 -2px 0 var(--ds-prog-acc); }
.pg-rows { display: flex; flex-direction: column; gap: 12px; }
.pg-row { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; }
.pg-row-name { font-size: 14px; font-weight: 600; color: var(--ds-txt); }
.pg-row-val { font-size: 14px; font-weight: 700; color: var(--ds-txt); white-space: nowrap; }
.pg-row-val span { font-weight: 500; color: var(--ds-txt2); }
.pg-row-track { grid-column: 1 / 3; height: 6px; border-radius: 3px; background: var(--ds-ring-track); }
.pg-row-fill { height: 6px; border-radius: 3px; background: var(--ds-prog-acc); }
.pg-row-sub { grid-column: 1 / 3; font-size: 12px; color: var(--ds-txt2); margin-top: -2px; }

/* All time */
.pg-totals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.pg-total-num { font-size: 24px; font-weight: 800; color: var(--ds-txt); }
.pg-total-lbl { font-size: 12px; color: var(--ds-txt2); }

/* ── Studio voices: download panel in handsfree settings (beta, v1.29.83) ── */
.studio-panel { margin: 2px 0 10px; padding: 10px 12px; border-radius: 12px; background: var(--ds-border-sub); }
.studio-panel-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--ds-txt2); margin-bottom: 6px; }
.studio-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; }
.studio-name { font-size: 14px; font-weight: 600; color: var(--ds-txt); }
.studio-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.studio-state { font-size: 13px; color: var(--ds-txt2); }
.studio-ok { color: #3c8a4a; }
.studio-btn { font: inherit; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 8px; border: 0; background: var(--ds-hero-a); color: #fff; cursor: pointer; }
.studio-btn[disabled] { opacity: .7; }
.studio-btn--quiet { background: transparent; color: var(--ds-txt2); border: 1px solid var(--ds-border); font-weight: 600; }
.studio-cell { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ds-txt2); margin-top: 8px; }
.studio-panel-note { font-size: 12px; color: var(--ds-txt3); margin-top: 6px; line-height: 1.4; }

/* ── Library → Voices (beta, v1.29.85) ── */
/* v1.30.09 (Rikard 2026-11-01) — a Voices row is the same size as a pack card on
   Packs/Folders/Favorites: same padding, corners, shadow, name size, and the
   topic · Grid line under the name. Was padding 14/16, radius 14, name 16px. */
.voices-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left;
  background: var(--ds-card); border: 0.5px solid var(--ds-border); border-radius: 16px; padding: 20px; margin-bottom: 12px;
  box-shadow: 0 2px 10px var(--ds-shadow);
  font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.voices-row-main { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.voices-row-name { font-size: 17px; font-weight: 700; color: var(--ds-txt); }
.voices-row-meta { font-size: 13px; color: var(--ds-txt2); margin-top: 3px; }
.voices-row-sub { font-size: 13px; color: var(--ds-txt3); }
.voices-row-side { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
/* v1.30.00 — locked like a pack on the Packs tab: grey, no arrow */
.voices-row--locked { opacity: 0.45; cursor: default; }
.voices-row--locked:active { transform: none; opacity: 0.45; }
.voices-foot { margin-top: 18px; }
.voices-status { font-size: 13px; color: var(--ds-txt2); }
.voices-ok { color: #3c8a4a; }
.voices-chev { font-size: 20px; color: var(--ds-txt3); }
.voices-note { font-size: 13px; color: var(--ds-txt3); line-height: 1.5; margin: 10px 2px; }
.voices-retry { font: inherit; font-weight: 700; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--ds-border); background: var(--ds-card); color: var(--ds-txt); }
.voices-sheet .studio-row { border-bottom: 1px solid var(--ds-border); padding: 10px 0; }
.voices-sheet-gap { margin-top: 14px; }
.voices-setting { padding: 10px 0; }
#libBannerGearBtn { color: rgba(60, 25, 5, 0.85); }   /* as #homeSettingsBtn and #progressSettingsBtn */
.voices-icon { font-size: 24px; color: var(--ds-txt3); }
#voicesSheetBackdrop { z-index: 700; }   /* above the bottom nav (600) */
#voicesSettingsOverlay { z-index: 700; }  /* v1.29.97 — a settings panel, above the bottom nav */
.voices-settings .voices-all-btn { background: var(--ds-card-alt); color: var(--ds-txt); }
/* v1.30.02 — Open in Handsfree, the same light button as Download all */
.voices-sheet .voices-open-btn { background: var(--ds-card-alt); color: var(--ds-txt); margin-bottom: 10px; }
/* v1.30.03 — a program pack before its test: the button is there, but greyed */
.voices-sheet .voices-open-btn--locked { opacity: 0.45; }
.voices-icon.voices-ok { color: #3c8a4a; }
.voices-icon.voices-update { color: #D45B03; }   /* v1.29.89 — a newer recording on the server */