/* Små skärmar. Laddas efter komponenternas stilar så att reglerna här vinner. */
/* ---------- Små skärmar ---------- */
/* Toppfältet i ett moment: när platsen tar slut försvinner först märket och menyns ord. Knapparna behåller sina 44 px. */
@media (max-width: 1100px) {
  .topbar--moment .brand-text { display: none; }
}
@media (max-width: 960px) {
  .topbar--moment .brand { display: none; }
  .topnav { margin-left: 0; }
  .topnav-link { justify-content: center; width: 44px; padding: 0; }
  .topnav-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stat { padding: 6px 4px; font-size: 16px; }
}
/* Liggande telefon: lite höjd, så lektionens ram ska ta så liten plats som möjligt. */
@media (max-height: 480px) {
  .lesson-top { padding-top: max(6px, env(safe-area-inset-top)); padding-bottom: 2px; }
  .foot-inner, .foot-inner.is-feedback { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); }
  .foot-hint { display: none; }
  .btn { min-height: 44px; }
}
/* På pekskärmar finns inga siffertangenter att visa, och rutan i flera rätt blir en ren kryssruta. */
@media (hover: none) {
  .tile-key--hint { display: none; }
  .tile-key:not(:has(.icon)) { color: transparent; }
}
@media (max-width: 640px) {
  .topbar-inner { gap: 8px; }
  .brand-text small { display: none; }
  /* Kursknappen visar var du är, så märket behövs inte i ett moment på mobilen. */
  .topbar--moment .brand { display: none; }
  .topbar--moment .topbar-stats { gap: 2px; }
  .topbar .pomo:not(.is-running) .pomo-time { display: none; }
  .pomo { min-width: 44px; justify-content: center; }
  /* Panelen är bredare än platsen till vänster om knappen, så den hänger i fältet i stället. */
  .topbar-inner { position: relative; }
  .topbar .pomo-wrap { position: static; }
  .topbar .pomo-panel { right: max(16px, env(safe-area-inset-right)); max-width: calc(100vw - 32px); }
  .mobile-status { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
  .mobile-status > :only-child { grid-column: 1 / -1; }
  .mobile-status .card { padding: 12px; }
  .mobile-status .card-head { align-items: flex-start; gap: 6px; }
  .mobile-status .card-head .icon { width: 20px; height: 20px; }
  .mobile-status .card h2 { font-size: 14px; line-height: 1.2; }
  .mobile-status .card p { display: none; }
  .mobile-status .meter-row { flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .mobile-status .meter-row .meter { flex: 1 1 100%; height: 10px; }
  .mobile-status .meter-row span:last-child { font-size: 13px; }
  .lesson-top { padding-top: max(14px, env(safe-area-inset-top)); }
  .lesson-close { width: 44px; height: 44px; }
  .path { --amp: 38px; }
  .unit-banner { padding: 14px 12px 14px 16px; }
  .unit-banner h2 { font-size: 19px; }
  .guide-btn { min-height: 44px; padding: 0 10px; }
  .guide-btn span { display: none; }
  /* På mobilen blir avsnitten en rad att svepa i, så att namnen får plats. */
  .levels { grid-auto-columns: minmax(196px, 68%); grid-auto-flow: column; grid-template-columns: none; gap: 10px; margin: 0 -16px; padding: 0 16px 6px; overflow-x: auto; scroll-padding-inline: 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .levels::-webkit-scrollbar { display: none; }
  .level { scroll-snap-align: start; }
  .unit-lecture { display: none; }
  .level-summary { font-size: 14px; }
  .tile { gap: 10px; padding: 11px 12px; font-size: 16px; }
  .tile-key { width: 26px; height: 26px; font-size: 13px; }
  .match .tile { min-height: 58px; padding: 10px; font-size: 14px; }
  .match .tile-key { display: none; }
  .foot-inner { flex-direction: column; align-items: stretch; gap: 14px; padding-top: 16px; }
  .foot-inner.is-feedback { align-items: stretch; }
  .foot-actions { justify-content: space-between; }
  .foot-actions .btn, .foot-main { flex: 1; min-width: 0; }
  .foot-actions .foot-skip { flex: none; padding: 0 18px; }
  .topnav { display: none; }
  .bottom-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 35; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); border-top: 2px solid var(--line); background: var(--bg); }
  .bottom-nav:has(> :nth-child(5)) { gap: 2px; padding-right: 4px; padding-left: 4px; }
  .bottom-nav:has(> :nth-child(5)) .bottom-link { padding-right: 0; padding-left: 0; font-size: 11px; letter-spacing: 0; }
  .fab { display: none !important; }
  .home, .overview { padding-bottom: 120px; }
  .pomo { padding: 0 8px; font-size: 14px; }
  .pomo .icon { width: 22px; height: 22px; }
  .lesson-top { gap: 6px; }
  .lesson-top .pomo .icon { display: none; }
  .volume-btn { width: 44px; }
  .volume-slider { width: 96px; }
  .verdict-icon { display: none; }
  .verdict h2 { font-size: 21px; }
  .complete h1 { font-size: 27px; }
  .stat-tile dd { font-size: 18px; }
  .concept-row { grid-template-columns: 1fr; gap: 4px; }
}
/* Telefonen. Kursknappen, XP och Om blir alltid kvar; sist ger streak plats. Står efter 640 px så att de här vinner. */
@media (max-width: 460px) {
  .topbar--moment .course-chip > .icon, .topbar--moment .pomo.is-running .icon { display: none; }
  .topbar--moment .course-chip { padding-right: 10px; }
}
@media (max-width: 412px) {
  .topbar-inner { gap: 4px; padding-right: 12px; padding-left: 12px; }
  .topbar--moment .course-chip-badge { display: none; }
  .topbar--moment .course-chip { padding-left: 10px; }
  .stat { gap: 4px; }
  .stat .icon { width: 22px; height: 22px; }
}
@media (max-width: 355px) {
  .topbar-inner { padding-right: 8px; padding-left: 10px; }
  .topbar--moment .stat--streak { display: none; }
  .brand { gap: 6px; }
  .brand-text strong { font-size: 19px; }
}