/* MathLab dashboard course cards (11 Nov 2026). Goes with ml-dash.1.js. Same look in Dark and Light:
   colors come from each theme's own variables. Rename to .2 when it changes. */
.ma-course.mld-card > a > h3 { color: var(--green, #45DCCB); }
.ma-course.mld-soon h3 { color: var(--muted, #95A6C0); }
.ma-course.mld-card p { margin: 10px 0 0; }
.ma-course.mld-card > details { margin-top: 12px; }
.ma-course.mld-card .ma-chapter > summary { line-height: 1.5; }
.mld-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.ma-course.mld-card .mld-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 44px; box-sizing: border-box;
  padding: 9px 16px; border: 1.5px solid var(--green, #45DCCB); border-radius: 10px;
  color: var(--green, #45DCCB); background: transparent; text-decoration: none; font-weight: 600; font-size: 15px; line-height: 1.3;
}
.ma-course.mld-card .mld-btn small { font-weight: 500; font-size: 13px; color: var(--muted, #95A6C0); }
.ma-course.mld-card .mld-btn:hover { background: color-mix(in srgb, var(--green, #45DCCB) 12%, transparent); }
.ma-course.mld-card .mld-btn:focus-visible { outline: 3px solid var(--green, #45DCCB); outline-offset: 2px; }
.mld-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mld-level { margin-top: 12px; }
.mld-level > a { font-weight: 600; text-decoration: none; }
.mld-level progress { margin-top: 6px; }
.mld-level p { margin-top: 6px !important; }
.ma-course.mld-card .mld-lv2 { color: var(--ml-amber, #E9B949); }
.ma-course.mld-card .mld-lv3, .ma-course.mld-card .mld-lv4 { color: var(--green, #45DCCB); font-weight: 600; }
@media (max-width: 600px) { .mld-actions .mld-btn { flex: 1 1 100%; } }

/* Dark theme (11 Nov 2026, reported by Mr. Ahmed): mathlab-dark.5.css gives every .ma-button dark text for the
   lime button, so outline (secondary) buttons such as "Profile & password" showed dark text on the dark page.
   Outline buttons keep the page's light text. Light theme unchanged. */
html:not([data-ml-theme="chalk"]):not([data-theme="light"]) body .ma-button.secondary:not(#ml-x) { color: var(--ink, #EAF0F8) !important; -webkit-text-fill-color: currentColor; }