/* ═══════════════════════════════════════════════════════════
   Unified vocabulary-course dashboard
   ───────────────────────────────────────────────────────────
   Shared by Vocab Snap, Word Power, Idiom Insight and Phrasal
   Verb Mastery so all four read identically. One fixed order:

     1. progress bar + lessons complete
     2. items learned
     3. mistakes to review
     4. items that need practice
     5. continue learning
     6. all lessons
     7. index
     8. certificate

   The whole stack is sized to fit a phone screen without
   scrolling, so rows are single-line and deliberately short.
   ═══════════════════════════════════════════════════════════ */

.vd-dash {
  /* width:100% matters when the parent is itself a flex column
     (Vocab Snap's .screen is). Without it the auto side margins
     shrink-wrap the stack and the rows come out narrower than in
     the other three courses. */
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  padding: 14px 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* ── 1. Progress ───────────────────────────────────────── */
.vd-progress {
  background: var(--vd-surface, #14141b);
  border: 1px solid var(--vd-border, #272733);
  border-radius: 13px;
  padding: 13px 15px 14px;
}
.vd-progress-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.vd-progress-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--vd-text, #f4f4f6);
  letter-spacing: -.01em;
}
.vd-progress-pct {
  font-size: .86rem;
  font-weight: 700;
  color: var(--vd-accent, #fbbf24);
  font-variant-numeric: tabular-nums;
}
.vd-bar {
  height: 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .09);
  overflow: hidden;
}
.vd-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
  transition: width .45s cubic-bezier(.4, 0, .2, 1);
}

/* ── 2-8. Action rows ──────────────────────────────────── */
.vd-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.vd-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  border: 1px solid var(--vd-border, #272733);
  border-radius: 12px;
  background: var(--vd-surface, #14141b);
  color: var(--vd-text, #f4f4f6);
  font-family: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: transform .14s ease, border-color .14s ease,
              background .14s ease, box-shadow .14s ease;
}
.vd-btn:hover {
  transform: translateX(2px);
  border-color: rgba(251, 191, 36, .42);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}
.vd-btn:active { transform: translateX(0) scale(.995); }

.vd-btn-icon {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-size: 1.08rem;
  line-height: 1;
  background: rgba(255, 255, 255, .06);
}
.vd-btn-label { flex: 1 1 auto; min-width: 0; }
.vd-btn-go {
  flex: 0 0 auto;
  font-size: .92rem;
  opacity: .4;
  transition: transform .14s ease, opacity .14s ease;
}
.vd-btn:hover .vd-btn-go { opacity: .85; transform: translateX(3px); }

/* Row colours. Muted when the count is zero so the dashboard
   does not shout about work the learner does not have. */
.vd-btn.learned   { border-color: rgba(74, 222, 128, .3); }
.vd-btn.learned .vd-btn-icon   { background: rgba(74, 222, 128, .14); color: #4ade80; }
.vd-btn.mistakes  { border-color: rgba(248, 113, 113, .34); }
.vd-btn.mistakes .vd-btn-icon  { background: rgba(248, 113, 113, .14); color: #f87171; }
.vd-btn.practice  { border-color: rgba(251, 191, 36, .32); }
.vd-btn.practice .vd-btn-icon  { background: rgba(251, 191, 36, .14); color: #fbbf24; }
.vd-btn.continue  {
  border-color: rgba(251, 191, 36, .55);
  background: linear-gradient(135deg, rgba(251, 191, 36, .14), var(--vd-surface, #14141b));
}
.vd-btn.continue .vd-btn-icon  { background: rgba(251, 191, 36, .2); color: #fbbf24; }
.vd-btn.cert .vd-btn-icon      { background: rgba(251, 191, 36, .12); }

.vd-btn.is-empty { opacity: .58; }
.vd-btn.is-empty:hover { opacity: 1; }

/* ── Screen header shared by the lessons / sub screens ─── */
.vd-screen-head {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  background: var(--vd-bg, #0b0b0f);
  border-bottom: 1px solid var(--vd-border, #272733);
}
.vd-back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 10px;
  border: 1px solid var(--vd-border, #272733);
  border-radius: 9px;
  background: var(--vd-surface, #14141b);
  color: var(--vd-muted, #a1a1aa);
  font-family: inherit;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .14s, border-color .14s, background .14s;
}
.vd-back:hover {
  color: var(--vd-accent, #fbbf24);
  border-color: rgba(251, 191, 36, .5);
  background: rgba(251, 191, 36, .08);
}
.vd-screen-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
  color: var(--vd-text, #f4f4f6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Keeps the title optically centred against the back button. */
.vd-screen-spacer { flex: 0 0 88px; }

@media (max-width: 560px) {
  .vd-dash { padding: 11px 12px 18px; gap: 8px; }
  .vd-list { gap: 7px; }
  .vd-btn { min-height: 48px; font-size: .97rem; padding: 9px 12px; gap: 10px; }
  .vd-btn-icon { flex-basis: 30px; width: 30px; height: 30px; font-size: 1rem; }
  .vd-progress { padding: 11px 13px 12px; }
  .vd-progress-label { font-size: .94rem; }
  .vd-screen-spacer { flex-basis: 44px; }
  .vd-screen-title { font-size: 1.02rem; }
}

/* Very short screens: shave the rows further rather than scroll. */
@media (max-height: 700px) {
  .vd-dash { gap: 7px; padding-top: 10px; }
  .vd-list { gap: 6px; }
  .vd-btn { min-height: 46px; }
  .vd-btn-icon { width: 30px; height: 30px; flex-basis: 30px; }
  .vd-progress { padding: 10px 13px 11px; }
  .vd-progress-top { margin-bottom: 7px; }
}

/* Light theme support (Vocab Snap / Word Power expose one). */
[data-theme="light"] .vd-btn,
[data-theme="light"] .vd-progress {
  --vd-surface: #ffffff;
  --vd-border: rgba(0, 0, 0, .1);
  --vd-text: #18181b;
}
[data-theme="light"] .vd-bar { background: rgba(0, 0, 0, .08); }
[data-theme="light"] .vd-btn-icon { background: rgba(0, 0, 0, .05); }