/* Desktop layer for the PPKI term pages (ppki/Y1_Math/Y1_Math-term1..3).
 *
 * All three were locked inside a simulated 414px phone. Their own activity
 * screens already declare max-width: 800-860px and centre their contents, so
 * retiring the phone frame is enough to let them use the window properly.
 *
 * Shared by all three pages rather than pasted into each.
 */

/* Keyboard focus ring - none of these pages had one */
:focus-visible {
  outline: 3px solid var(--accent, #6692BF);
  outline-offset: 3px;
  border-radius: 10px;
}

@media (hover: hover) and (pointer: fine) {
  .btn-back-uniform:hover { transform: translateY(-1px); filter: brightness(1.05); }
  button:not(:disabled):hover { filter: brightness(1.04); }
}

/* ---- Retire the phone frame ---- */
@media (min-width: 768px) {
  body {
    align-items: stretch;
    justify-content: stretch;
    min-height: 100dvh;
  }

  .app-container {
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  /* Header shares the content measure instead of hugging the left edge */
  .topbar {
    max-width: none;
    margin: 0;
    padding-left: max(1.5rem, calc((100% - 900px) / 2));
    padding-right: max(1.5rem, calc((100% - 900px) / 2));
  }

  /* The activity/menu wrappers already centre themselves; just let them breathe */
  .activity-screen,
  .act-screen,
  .act-wrap {
    padding: 2rem 1.5rem 3rem;
  }

  /* Slimmer scrollbars on the scrolling screen */
  .screen {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, .22) transparent;
  }
  .screen::-webkit-scrollbar { width: 12px; }
  .screen::-webkit-scrollbar-track { background: transparent; }
  .screen::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, .2);
    border-radius: 999px;
    border: 4px solid transparent;
    background-clip: content-box;
  }
}

@media (min-width: 1440px) {
  .topbar {
    padding-left: max(1.5rem, calc((100% - 1040px) / 2));
    padding-right: max(1.5rem, calc((100% - 1040px) / 2));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}