/* Overrides for the real multi-page app (no "browser window" prototype
   frame — each screen is now a real full-viewport page). */

body {
  margin: 0;
}

/* The design handoff's .modal-backdrop was `position: absolute` because it
   lived inside the fixed 1360x900 prototype frame. Real pages need it fixed
   to the viewport. */
.modal-backdrop {
  position: fixed !important;
}

.ob-step-bar {
  transition: background 0.2s ease;
}

/* Simple fade-in for page loads, matching the design handoff's page-
   transition intent (opacity + translateY) without a router to hook into.
   Apple-style pass: slightly softer curve + subtle scale-in, closer to
   iOS/macOS's default view-transition feel. */
#page-root {
  animation: page-in 0.36s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes page-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Spring pop-in for modal panels (school facts / profile popup etc.) —
   referenced from styles.css's .modal-backdrop.open .modal rule. */
@keyframes modal-pop {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Recording pulse dot (screen 06) */
.rec-dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  border-radius: 50%;
  display: inline-block;
  animation: pulse 1.5s infinite;
}

/* Waveform bars animate while "recording" */
.waveform-bar {
  width: 3px;
  border-radius: 2px;
  background: var(--amber);
  transition: height 0.12s ease;
}

/* Screen 12 trial-feedback popup: the design handoff only defined .star /
   .dim-chip nested under .feedback-mini's smaller mini-widget variant; this
   popup uses the bare classes at full size, so give them their own rules. */
.star {
  transition: color 0.15s, transform 0.1s;
}
.star:hover {
  transform: scale(1.15);
}
.dim-chip {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: white;
  border: 1px solid var(--line-strong);
  cursor: pointer;
  color: var(--ink-soft);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dim-chip.on {
  background: var(--ink);
  color: white;
  border-color: var(--ink);
}

/* ===========================================================================
   Mobile responsiveness (added per user request 2026-08-06). The design
   handoff was authored as a fixed-width desktop prototype, so this is a
   fresh responsive pass on top of it — not something carried over from the
   handoff. Breakpoint: 768px (tablet/phone). Desktop layout is unaffected
   above that width.
   =========================================================================== */
@media (max-width: 768px) {
  .content {
    padding: 20px 16px;
  }

  /* Top nav: shrink brand text, collapse links into a hamburger dropdown
     (item 4, 2026-08-11) instead of squeezing them all into the bar. */
  .appnav {
    padding: 0 16px;
    gap: 10px;
  }
  .brand {
    font-size: 14px;
  }
  .nav-hamburger {
    display: flex;
  }
  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    gap: 2px;
    padding: 8px;
    display: none;
  }
  .nav-links.mobile-open {
    display: flex;
  }
  .nav-link {
    padding: 12px 14px;
    font-size: 14px;
    border-radius: 10px;
  }
  .streak span:last-child {
    display: none; /* keep the flame + number, drop "天" label to save space */
  }

  /* ---- Landing page (Splash) mobile collapse ---- */
  .landing-nav {
    padding: 0 16px;
    gap: 12px;
  }
  .landing-nav-links {
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: white;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    flex: none;
    gap: 2px;
    padding: 8px;
    display: none;
    z-index: 50;
  }
  .landing-nav-links.mobile-open {
    display: flex;
  }
  .landing-nav-login {
    display: none;
  }
  .landing-nav-login-mobile {
    display: block;
    border-top: 1px solid var(--line);
    margin-top: 4px;
    padding-top: 12px;
  }
  .nav-right .btn.btn-primary.btn-sm {
    padding: 8px 14px;
    font-size: 13px;
  }
  .landing-hero {
    padding: 40px 16px 48px;
  }
  .landing-hero h1 {
    font-size: 30px !important;
  }
  .landing-stats {
    padding: 18px 20px;
    gap: 18px;
  }
  .landing-stat-label {
    white-space: normal;
  }
  .landing-section {
    padding: 40px 16px;
  }
  .landing-steps {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .landing-features {
    grid-template-columns: 1fr 1fr !important;
    gap: 12px;
  }

  /* Dashboard: stack hero stat ring under the text, single column layout */
  .dash-grid {
    grid-template-columns: 1fr !important;
  }
  .dash-hero {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px !important;
  }
  .dash-hero > div:first-child {
    text-align: center;
  }
  .dash-hero .row.gap-8 {
    justify-content: center;
  }
  .continue-cards-grid {
    grid-template-columns: 1fr !important;
  }

  /* Onboarding: 6 grade chips -> 3 columns so text doesn't clip */
  .grade-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Splash: stack the two track cards */
  .track-grid {
    grid-template-columns: 1fr !important;
  }

  /* Schools grid: single column on phones */
  .school-grid {
    grid-template-columns: 1fr !important;
  }
  #school-search {
    width: 100% !important;
  }
  .content > div[style*="justify-content:space-between"] {
    flex-direction: column;
    align-items: stretch !important;
    gap: 12px;
  }

  /* School detail: stack hero + facts columns */
  .school-hero {
    flex-direction: column;
    text-align: center;
  }
  .school-detail-grid {
    grid-template-columns: 1fr !important;
  }
  .style-facts-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Training: compact nav progress bar already flexes; shrink rec panel */
  .training-content {
    padding-top: 16px !important;
  }
  #rec-panel {
    padding: 16px !important;
  }
  #waveform {
    min-width: 70px !important;
  }

  /* Feedback: stack annotated answer + score column */
  .feedback-content {
    padding: 16px !important;
  }
  .feedback-grid {
    grid-template-columns: 1fr !important;
  }

  /* Modal: full-width sheet instead of centered card */
  .modal {
    max-width: 100%;
    padding: 24px 20px;
  }

  /* Pagination: allow number buttons to wrap on narrow screens */
  #school-pagination {
    flex-wrap: wrap;
  }

  /* Membership: 4 plan columns -> 1 column; checkout: 2 columns -> 1 */
  .membership-grid {
    grid-template-columns: 1fr !important;
  }
  .faq-grid {
    grid-template-columns: 1fr !important;
  }
  .checkout-grid {
    grid-template-columns: 1fr !important;
  }
  .parent-stats-grid {
    grid-template-columns: 1fr 1fr !important;
  }
  .parent-side-grid {
    grid-template-columns: 1fr !important;
  }
  .si-grid {
    grid-template-columns: 1fr !important;
  }
  .feedback-si-grid {
    grid-template-columns: 1fr !important;
  }

  /* Practice picker: 按题型 cards -> single column on phones/tablets */
  #practice-category-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 26px; }
  .style-facts-grid {
    grid-template-columns: 1fr !important;
  }
  .landing-features {
    grid-template-columns: 1fr !important;
  }
  .landing-nav .btn span,
  .nav-right .btn.btn-primary.btn-sm {
    font-size: 12px;
    padding: 8px 10px;
  }
}