/* QPal dashboard main subject area: expose the existing orange upper surface.
   Presentation only. Keep the dashboard card's layout box and all controls,
   but remove the enclosing card paint so the orange surface is no longer hidden. */

body.qpal-persistent-dashboard-shell:not(.qpal-session-active) .app-workspace > .game-container {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* The mode controls remain distinct touch targets while visually belonging to
   the orange area instead of recreating another large opaque card. */
body.qpal-persistent-dashboard-shell:not(.qpal-session-active) .game-container .mode-btn {
  background: color-mix(in srgb, var(--surface) 88%, transparent) !important;
  border-color: color-mix(in srgb, #ffffff 34%, var(--border-subtle)) !important;
  box-shadow: var(--inner-highlight) !important;
}

body.qpal-persistent-dashboard-shell:not(.qpal-session-active) .game-container :is(
  .mode-btn.active-study,
  .mode-btn.active-exam,
  .mode-btn.active-flashcards
) {
  background: color-mix(in srgb, var(--surface) 96%, transparent) !important;
  color: var(--accent) !important;
  border-color: color-mix(in srgb, #ffffff 58%, var(--accent-border)) !important;
}

body.qpal-persistent-dashboard-shell:not(.qpal-session-active) .game-container :is(
  .mode-btn.active-study,
  .mode-btn.active-exam,
  .mode-btn.active-flashcards
) * {
  color: var(--accent) !important;
}

/* The set tabs are now directly on orange, so use a consistent high-contrast
   label/underline treatment in both QPal themes. */
body.qpal-persistent-dashboard-shell:not(.qpal-session-active) .game-container .matrix-tabs-container {
  border-bottom-color: rgba(255, 255, 255, 0.34) !important;
}

body.qpal-persistent-dashboard-shell:not(.qpal-session-active) .game-container .matrix-tab {
  color: rgba(255, 255, 255, 0.76) !important;
}

body.qpal-persistent-dashboard-shell:not(.qpal-session-active) .game-container .matrix-tab.active {
  color: #ffffff !important;
}

body.qpal-persistent-dashboard-shell:not(.qpal-session-active) .game-container .matrix-tab.active::after {
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Subject rows and the empty state remain functional content surfaces, but are
   slightly translucent so the orange area still reads as the parent surface. */
body.qpal-persistent-dashboard-shell:not(.qpal-session-active) .game-container :is(
  .subj-card,
  .empty-state
) {
  background: color-mix(in srgb, var(--surface-muted) 90%, transparent) !important;
}