/* Phone and tablet layout for learner and guest pages below desktop width:
 * a compact app bar, a floating bottom dock, a bottom-sheet menu and denser
 * cards, so each screen shows more of the page. Loads last on every page.
 * Shell rules start with ":root body" so they follow mobile-app.css even
 * where it targets a page; content rules leave the admin workspace alone. */
@media (max-width: 1023px) {
 :root body {
  --dock-height: 64px;
  --dock-gap: 10px;
  --mobile-header-height: 56px;
  --mobile-nav-height: calc(var(--dock-height) + var(--dock-gap) + 6px);
  --radius-surface: 18px;
  --member-gutter: 16px;
  --member-shadow: 0 1px 2px oklch(29% .05 266 / .04), 0 4px 14px oklch(29% .05 266 / .05);
 }

 /* App bar */
 :root body .member-header {
  gap: 8px;
  min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
  padding: calc(6px + env(safe-area-inset-top)) max(var(--member-gutter), env(safe-area-inset-right)) 6px max(var(--member-gutter), env(safe-area-inset-left));
  background: color-mix(in oklch, var(--color-surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
 }
 :root body .member-header .brand-logo { width: 112px; height: 36px; }
 :root body .member-header-actions { gap: 8px; margin-left: auto; }
 :root body .member-header-actions select {
  width: auto; max-width: 118px; min-height: 40px; padding: 6px 28px 6px 12px;
  border: 0; border-radius: var(--radius-pill); background-color: var(--color-paper-2);
  font-size: 12px; font-weight: 500; color: var(--color-ink);
 }
 :root body .member-profile {
  width: 40px; height: 40px; min-width: 40px; min-height: 40px;
  background: var(--color-accent); color: var(--color-accent-ink); font-size: 15px;
 }
 :root body .member-profile span { font-weight: 600; }

 :root body .app-layout > main {
  padding: var(--member-gutter) max(var(--member-gutter), env(safe-area-inset-right)) calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + 24px) max(var(--member-gutter), env(safe-area-inset-left));
 }

 /* Bottom dock: floats above the page, the current section sits in a pill. */
 :root body :is(.member-bottom, .bottom-nav) {
  inset: auto max(12px, env(safe-area-inset-right)) calc(var(--dock-gap) + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
  max-width: 520px; height: var(--dock-height); min-height: var(--dock-height); margin-inline: auto; padding: 6px;
  border: var(--rule-width) solid var(--color-rule); border-radius: 22px;
  background: color-mix(in oklch, var(--color-surface) 86%, transparent);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  backdrop-filter: saturate(1.6) blur(18px);
  box-shadow: 0 12px 32px -10px oklch(29% .05 266 / .24), 0 2px 6px oklch(29% .05 266 / .06);
 }
 :root body .member-bottom.admin-bottom { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 :root body :is(.member-bottom, .bottom-nav) :is(a, button) {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-width: 0; min-height: 0; height: 100%; margin: 0; padding: 0 2px;
  border: 0; border-radius: 16px; background: var(--color-transparent); color: var(--color-muted);
  font: 500 10px/1.2 var(--font-body); letter-spacing: 0; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out);
 }
 :root body :is(.member-bottom, .bottom-nav) :is(a, button)::before { content: none; }
 :root body :is(.member-bottom, .bottom-nav) span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
 :root body :is(.member-bottom, .bottom-nav) svg { width: 22px; height: 22px; stroke-width: 1.8; }
 :root body :is(.member-bottom, .bottom-nav) :is([aria-current=page], [data-current-menu=true], [aria-expanded=true]) {
  background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; letter-spacing: -.01em;
 }
 :root body :is(.member-bottom, .bottom-nav) :is([aria-current=page], [data-current-menu=true], [aria-expanded=true]) svg { stroke-width: 2.2; }
 :root body :is(.member-bottom, .bottom-nav) :is(a, button):active { transform: scale(.94); background: var(--color-paper-2); }

 /* Menu: bottom sheet with the account on top and destinations as tiles. */
 :root body .mobile-drawer {
  max-width: 560px;
  padding: 10px max(20px, env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  border-radius: 24px 24px 0 0;
 }
 :root body .mobile-drawer::before { margin-bottom: 10px; }
 :root body .mobile-drawer .drawer-head { margin-bottom: 12px; }
 :root body .mobile-drawer .drawer-head h2 { font-size: 17px; }
 .drawer-user {
  display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding: 12px 14px;
  border-radius: 16px; background: var(--color-paper-2); color: var(--color-ink);
 }
 .drawer-avatar {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; font-size: 17px;
 }
 .drawer-user-copy { display: grid; flex: 1; min-width: 0; }
 .drawer-user-copy strong { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .drawer-user-copy small { font-size: 12px; color: var(--color-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .drawer-user > svg { width: 18px; height: 18px; flex: none; color: var(--color-muted); }
 body:not([data-page=admin]) .mobile-drawer nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
 body:not([data-page=admin]) .mobile-drawer .nav-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-width: 0; min-height: 84px; padding: 12px 6px;
  border: var(--rule-width) solid var(--color-rule); border-radius: 16px; background: var(--color-paper);
  color: var(--color-ink); font-size: 12px; line-height: 1.25; text-align: center; white-space: normal; overflow-wrap: anywhere;
 }
 body:not([data-page=admin]) .mobile-drawer .nav-link svg { width: 22px; height: 22px; color: var(--color-accent); }
 body:not([data-page=admin]) .mobile-drawer .nav-link[aria-current=page] {
  border-color: var(--color-transparent); background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600;
 }
 :root body .mobile-drawer > form { margin-top: 16px; padding-top: 0; border-top: 0; }
 :root body .mobile-drawer .drawer-logout {
  width: 100%; min-height: 48px; border: var(--rule-width) solid var(--color-rule); border-radius: 14px;
  color: var(--color-error); font-size: 14px; font-weight: 500;
 }

 /* Page headings: title first, intro under it, no duplicate links that the
  * dock already provides. */
 body:not([data-page=admin]) main :is(.sin-page-bar, .dashboard-heading, .page-heading) { gap: 12px; margin-bottom: 16px; }
 body:not([data-page=admin]) main :is(.sin-page-bar, .dashboard-heading, .page-heading) h1 { font-size: 24px; line-height: 1.25; letter-spacing: -.02em; }
 body:not([data-page=admin]) main :is(.sin-page-bar, .dashboard-heading, .page-heading) p { font-size: 13px; line-height: 1.5; margin-top: 4px; }
 body:not([data-page=admin]) .dashboard-heading > div { display: flex; flex-direction: column; }
 body:not([data-page=admin]) .dashboard-heading > div > p { order: 1; }
 body:not([data-page=admin]) :is(.dashboard-heading, .dash-greeting) > .dashboard-text-link { display: none; }
 body[data-page=section] .sin-page-bar > div > p { display: none; }
 body:not([data-page=admin]) .sin-search { min-height: 48px; padding: 2px 6px 2px 14px; border: var(--rule-width) solid var(--color-rule); }
 body:not([data-page=admin]) .notice { padding: 12px 14px; margin-bottom: 12px; font-size: 12.5px; }
 body:not([data-page=admin]) main :is(.empty, .study-empty, .dashboard-empty, .chart-no-data) { padding: 24px 16px; }
 body:not([data-page=admin]) .learning-note { font-size: 11.5px; line-height: 1.5; }
 body:not([data-page=admin]) .selection-hint { font-size: 11.5px; margin-bottom: 10px; }

 /* Package picker and content switch */
 body:not([data-page=admin]) .package-tabs {
  gap: 8px; margin: 0 calc(-1 * var(--member-gutter)) 12px; padding: 2px var(--member-gutter);
  background: none; border-radius: 0; scroll-snap-type: x proximity; scrollbar-width: none;
 }
 body:not([data-page=admin]) .package-tabs::-webkit-scrollbar { display: none; }
 body:not([data-page=admin]) .section-tab {
  max-width: 240px; min-height: 40px; padding: 8px 14px; scroll-snap-align: start;
  border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-pill); background: var(--color-surface); font-size: 13px;
 }
 body:not([data-page=admin]) .section-tab span { overflow: hidden; text-overflow: ellipsis; }
 body:not([data-page=admin]) .section-tab svg { width: 14px; height: 14px; flex: none; }
 body:not([data-page=admin]) .section-tab.is-selected { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); font-weight: 600; }
 body:not([data-page=admin]) .sin-content-switch {
  display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px;
  margin: 12px 0 16px; padding: 4px; border-radius: 14px; background: var(--color-paper-3);
 }
 body:not([data-page=admin]) .sin-content-switch .chip {
  min-width: 0; min-height: 40px; padding: 6px 4px; gap: 6px; border-radius: 10px;
  background: var(--color-transparent); color: var(--color-muted); font-size: 12.5px;
 }
 body:not([data-page=admin]) .sin-content-switch .chip svg { width: 15px; height: 15px; flex: none; }
 body:not([data-page=admin]) .sin-content-switch .chip.active { background: var(--color-surface); color: var(--color-accent); font-weight: 600; box-shadow: var(--member-shadow); }

 /* Lesson, package and practice rows */
 body:not([data-page=admin]) .lesson-list { gap: 10px; }
 body:not([data-page=admin]) .lesson-row { grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 10px 12px; padding: 14px; border-radius: 16px; }
 body:not([data-page=admin]) .lesson-row > :is(.lesson-symbol, .lesson-thumbnail) { align-self: start; width: 48px; height: 48px; border-radius: 14px; font-size: 22px; }
 body:not([data-page=admin]) .lesson-row .lesson-symbol svg { width: 20px; height: 20px; color: var(--color-muted); }
 body:not([data-page=admin]) .lesson-row :is(.symbol-long, .symbol-combination) { font-size: 14px; }
 body:not([data-page=admin]) .lesson-row h2 { margin-top: 4px; font-size: 15px; line-height: 1.35; }
 body:not([data-page=admin]) .lesson-row-copy > .badge:first-child + h2 { margin-top: 6px; }
 body:not([data-page=admin]) .lesson-row p { display: -webkit-box; margin-block: 4px; overflow: hidden; font-size: 12px; line-height: 1.5; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 body:not([data-page=admin]) .lesson-row-copy small { font-size: 11px; color: var(--color-muted); }
 body:not([data-page=admin]) .lesson-row > .row-open {
  grid-column: 3; justify-self: end; width: 40px; height: 40px; min-width: 40px; min-height: 40px; padding: 0;
  border: 0; border-radius: 50%; background: var(--color-paper-2); color: var(--color-ink);
 }
 body:not([data-page=admin]) .lesson-row > .row-open span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 body:not([data-page=admin]) .lesson-row > .row-open svg { width: 18px; height: 18px; }
 body:not([data-page=admin]) .lesson-row > :is(form, .btn:not(.row-open)) { grid-column: 2 / -1; justify-self: start; }
 body:not([data-page=admin]) .lesson-row > .btn:not(.row-open), body:not([data-page=admin]) .lesson-row > form .btn { min-height: 40px; padding: 8px 16px; font-size: 12.5px; }
 body:not([data-page=admin]) .package-quiz { flex-wrap: nowrap; gap: 12px; margin-bottom: 10px; padding: 14px 16px; border-radius: 16px; }
 body:not([data-page=admin]) .package-quiz .lesson-thumbnail { width: 48px; height: 48px; border-radius: 14px; }
 body:not([data-page=admin]) .package-quiz h3 { font-size: 15px; line-height: 1.35; }
 body:not([data-page=admin]) .package-quiz-copy { min-width: 0; }
 body:not([data-page=admin]) .package-quiz .btn { min-height: 40px; padding: 8px 14px; font-size: 12.5px; }

 /* Lesson page */
 body:not([data-page=admin]) .breadcrumb { flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; overflow: hidden; }
 body:not([data-page=admin]) .breadcrumb a { flex: none; }
 body:not([data-page=admin]) .breadcrumb a:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 body:not([data-page=admin]) .lesson-body { padding: 16px; border-radius: 16px; }
 body:not([data-page=admin]) .lesson-actions { display: grid; gap: 8px; margin: 16px 0; }
 body:not([data-page=admin]) .lesson-actions .btn { width: 100%; }
 body:not([data-page=admin]) .character-grid { gap: 10px; }

 /* Plans */
 body:not([data-page=admin]) .plan-list { gap: 12px; }
 body:not([data-page=admin]) .plan { gap: 12px; padding: 18px; }
 body:not([data-page=admin]) .plan h2 { font-size: 17px; }
 body:not([data-page=admin]) .plan .price { padding: 12px 0; font-size: 26px; }
 body:not([data-page=admin]) .plan .btn { width: 100%; }

 /* Quiz result */

 /* Dashboard: the next step leads, then streak and time, then the rest. */
 body[data-page=account] .dashboard-content { display: flex; flex-direction: column; gap: 12px; }
 body[data-page=account] .dashboard-content > * { margin: 0; }
 body[data-page=account] .dash-greeting { order: 0; margin-bottom: 4px; }
 body[data-page=account] .dash-next { order: 1; }
 body[data-page=account] .dash-highlights { order: 2; }
 body[data-page=account] .sin-metrics { order: 3; }
 body[data-page=account] .dashboard-learning { order: 4; }
 body[data-page=account] .dashboard-history { order: 5; }
 body[data-page=account] .sin-chart-panel { order: 6; }
 body[data-page=account] .dash-highlights { gap: 12px; }
 body[data-page=account] .dash-card { gap: 14px; padding: 16px; }
 body[data-page=account] .dash-card-head h2 { font-size: 14px; font-weight: 600; }
 body[data-page=account] .dash-badge { min-height: 26px; padding: 3px 10px; font-size: 11px; }
 body[data-page=account] .dash-big { font-size: 36px; }
 body[data-page=account] .dash-flame { width: 52px; height: 52px; border-radius: 16px; }
 body[data-page=account] .dash-flame svg { width: 28px; height: 28px; }
 body[data-page=account] .dash-week-mark { max-width: 40px; border-radius: 12px; }
 body[data-page=account] .dash-week-bars { height: 52px; }
 body[data-page=account] .dash-time-stats div { padding: 10px 12px; border-radius: 12px; }
 body[data-page=account] .dash-note { padding-top: 10px; font-size: 11.5px; }
 body[data-page=account] .sin-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
 body[data-page=account] .sin-metric { display: flex; flex-direction: column; padding: 14px; }
 body[data-page=account] .sin-metric h2 { font-size: 12px; color: var(--color-muted); }
 body[data-page=account] .sin-number { margin-block: 6px 10px; font-size: 26px; }
 body[data-page=account] .dash-goal-body { gap: 10px; margin: 6px 0 10px; }
 body[data-page=account] .dash-ring { width: 44px; height: 44px; }
 body[data-page=account] .sin-metric-foot { gap: 8px; margin-top: auto; padding-top: 10px; font-size: 11px; }
 body[data-page=account] :is(.sin-chart-panel, .dashboard-learning, .dashboard-history) { padding: 16px; }
 body[data-page=account] .dashboard-section-heading { margin-bottom: 12px; }
 body[data-page=account] .dashboard-section-heading h2 { font-size: 16px; }
 body[data-page=account] .sin-panel-head { flex-direction: column; align-items: stretch; gap: 12px; margin-bottom: 16px; }
 body[data-page=account] .sin-panel-head h2 { font-size: 16px; }
 body[data-page=account] .analytics-range { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; padding: 4px; border-radius: 12px; background: var(--color-paper-2); }
 body[data-page=account] .analytics-range a { justify-content: center; min-height: 36px; padding: 4px; border: 0; border-radius: 9px; font-size: 12px; }
 body[data-page=account] .analytics-range a[aria-current] { background: var(--color-surface); color: var(--color-ink); font-weight: 500; box-shadow: var(--member-shadow); }
 body[data-page=account] .learning-chart-grid { gap: 20px; }
 body[data-page=account] .learning-chart figcaption { margin-bottom: 10px; }
 body[data-page=account] .learning-chart h3 { font-size: 14px; font-weight: 600; }
 body[data-page=account] :is(.activity-chart, .accuracy-chart, .chart-frame) { height: 120px; }
 body[data-page=account] .time-chart { height: 96px; }
 body[data-page=account] .chart-frame { min-width: 0; }
 body[data-page=account] .accuracy-chart { flex: 1 1 0; width: auto; min-width: 0; }
 body[data-page=account] .chart-axis { margin-block: 8px; }
 body[data-page=account] .dashboard-package-tools { gap: 8px; margin-bottom: 8px; }
 body[data-page=account] .sin-learn-table thead { display: none; }
 body[data-page=account] :is(.sin-learn-table, .sin-learn-table tbody) { display: block; }
 body[data-page=account] .sin-learn-table tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 12px; padding: 14px 0; border-bottom: var(--rule-width) solid var(--color-rule); }
 body[data-page=account] .sin-learn-table tbody tr:hover { background: none; }
 body[data-page=account] .sin-learn-table td { display: block; padding: 0; border: 0; }
 body[data-page=account] :is(.sin-learn-title, .sin-learn-actions) { grid-column: 1 / -1; }
 body[data-page=account] .sin-cell-label { display: block; margin-bottom: 4px; font-size: 10.5px; color: var(--color-muted); }
 body[data-page=account] .sin-learn-table .sin-table-name { gap: 10px; }
 body[data-page=account] .sin-learn-table .study-package-title { white-space: normal; overflow-wrap: anywhere; }
 body[data-page=account] .sin-learn-table tbody tr:last-child { border-bottom: 0; padding-bottom: 4px; }
 body[data-page=account] .sin-learn-table td { font-size: 15px; font-variant-numeric: tabular-nums; }
 body[data-page=account] .sin-learn-table h3 { font-size: 14.5px; line-height: 1.35; }
 body[data-page=account] .sin-learn-actions .package-actions { flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
 body[data-page=account] .package-actions a:not(.dashboard-package-link) {
  min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink); font-size: 12px;
 }
 body[data-page=account] .package-actions .dashboard-package-link { margin-left: auto; }
 body[data-page=account] .dashboard-result { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; padding: 12px 0; }
 body[data-page=account] .dashboard-result:last-child { border-bottom: 0; padding-bottom: 0; }
 body[data-page=account] .dashboard-result h3 { font-size: 14px; line-height: 1.35; }
 body[data-page=account] .dashboard-result p { margin-top: 2px; font-size: 11.5px; color: var(--color-muted); }
 body[data-page=account] .dashboard-result-score { display: grid; justify-items: end; }
 body[data-page=account] .dashboard-result-score strong { font-size: 15px; white-space: nowrap; font-variant-numeric: tabular-nums; }
 body[data-page=account] .dashboard-result-score small { font-size: 11px; color: var(--color-muted); }

 /* History: compact filters and one grouped list instead of separate cards. */
 body[data-page=history] .history-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; margin: 12px 0; padding: 12px; border-radius: 16px; }
 body[data-page=history] .history-filters label { display: grid; gap: 4px; min-width: 0; margin: 0; font-size: 12px; color: var(--color-muted); }
 body[data-page=history] .history-filters select { width: 100%; min-width: 0; }
 body[data-page=history] .history-filters > .btn { grid-column: 1 / -1; width: 100%; min-height: 44px; }
 body[data-page=history] .learning-timeline { gap: 0; margin-top: 8px; padding: 2px 0; border-radius: var(--radius-surface); background: var(--color-surface); overflow: hidden; }
 body[data-page=history] .learning-event { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; border-radius: 0; background: none; border-bottom: var(--rule-width) solid var(--color-rule); }
 body[data-page=history] .learning-event:last-child { border-bottom: 0; }
 body[data-page=history] .learning-event > svg { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--color-accent-soft); color: var(--color-accent); }
 body[data-page=history] .learning-event small { font-size: 11px; color: var(--color-muted); }
 body[data-page=history] .learning-event h2 { margin-top: 2px; font-size: 14.5px; line-height: 1.35; }
 body[data-page=history] .learning-event p { font-size: 12px; color: var(--color-muted); }
 body[data-page=history] .learning-event .dashboard-package-link { width: 40px; height: 40px; background: var(--color-paper-2); }
 body[data-page=history] .learning-event > small { max-width: 72px; text-align: right; }
 body[data-page=history] .learning-timeline > .dashboard-empty { border-radius: 0; }
 body[data-page=history] .history-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; font-size: 13px; }

 /* Profile */
 body:not([data-page=admin]) .learning-panel { padding: 16px; }
 body:not([data-page=admin]) .learning-panel h2 { margin-bottom: 4px; padding-bottom: 12px; font-size: 16px; }
 body:not([data-page=admin]) .profile-form { gap: 6px; }
 body:not([data-page=admin]) .profile-form label { margin: 12px 0 0; font-size: 13px; font-weight: 500; }
 body:not([data-page=admin]) .profile-form small { margin-bottom: 0; font-size: 11.5px; line-height: 1.5; color: var(--color-muted); }
 body:not([data-page=admin]) .profile-form .btn { justify-self: stretch; width: 100%; margin-top: 12px; }
 body:not([data-page=admin]) .profile-form .btn + .btn { margin-top: 4px; }
}

@media (max-width: 359px) {
 body:not([data-page=admin]) { --member-gutter: 12px; }
 body:not([data-page=admin]) .member-header .brand-logo { width: 96px; height: 32px; }
 body:not([data-page=admin]) .member-header-actions select { max-width: 108px; padding: 6px 22px 6px 10px; font-size: 11px; }
 body:not([data-page=admin]) .member-bottom :is(a, button) { font-size: 9.5px; }
 body[data-page=account] .sin-metrics { gap: 8px; }
 body[data-page=history] .history-filters { grid-template-columns: minmax(0, 1fr); }
 body[data-page=history] .learning-event { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; padding: 12px; }
 body[data-page=history] .learning-event > svg { width: 32px; height: 32px; padding: 7px; border-radius: 10px; }
 body[data-page=account] .sin-metric { padding: 12px; }
 body:not([data-page=admin]) .mobile-drawer .nav-link { min-height: 76px; font-size: 11px; }
}

/* Tablets: the dock keeps its width, cards get two columns where it helps. */
@media (min-width: 640px) and (max-width: 1023px) {
 body:not([data-page=admin]) { --member-gutter: 24px; }
 body[data-page=account] .dash-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
 body:not([data-page=admin]) .lesson-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
 body:not([data-page=admin]) .member-bottom :is(a, button) { transition: none; }
 body:not([data-page=admin]) .member-bottom :is(a, button):active { transform: none; }
}

/* Narrow desktops: the package column keeps room for its title next to the
 * sidebar, and the score label sits under the score. */
@media (min-width: 1024px) {
 body[data-page=account] .sin-learn-table .sin-learn-title { width: 36%; min-width: 180px; }
 body[data-page=account] .sin-learn-table .study-package-title { overflow-wrap: break-word; }
 body[data-page=account] .dashboard-result-score small { display: block; }
}

/* Guest pages share the learner app bar, dock and menu sheet. The footer is
 * desktop only: on phones the dock and menu already carry its links. */
@media (max-width: 1023px) {
 :root body .topbar {
  min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
  padding: calc(6px + env(safe-area-inset-top)) max(var(--member-gutter), env(safe-area-inset-right)) 6px max(var(--member-gutter), env(safe-area-inset-left));
  background: color-mix(in oklch, var(--color-surface) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  backdrop-filter: saturate(1.5) blur(16px);
 }
 :root body .topbar-inner { min-height: 44px; gap: 8px; }
 :root body .topbar .brand-logo { width: 112px; height: 36px; }
 :root body .header-actions { gap: 8px; margin-left: auto; }
 :root body .header-actions select {
  width: auto; max-width: 118px; min-height: 40px; padding: 6px 28px 6px 12px;
  border: 0; border-radius: var(--radius-pill); background-color: var(--color-paper-2);
  font-size: 12px; font-weight: 500; color: var(--color-ink);
 }
 :root body .header-actions .avatar { width: 40px; height: 40px; min-width: 40px; min-height: 40px; background: var(--color-accent); color: var(--color-accent-ink); font-weight: 600; }
 :root body .footer { display: none; }
 :root body .mobile-drawer .nav-divider { display: none; }
 :root body .mobile-drawer .drawer-auth { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 16px; padding-top: 0; border-top: 0; }
 :root body .mobile-drawer .drawer-auth .btn { min-height: 48px; border-radius: 14px; }

 /* Search suggestions stay on one line and scroll sideways. */
 :root body .dictionary-examples { min-width: 0; max-width: 100%; flex-wrap: nowrap; gap: 6px; padding-bottom: 2px; overflow-x: auto; scrollbar-width: none; }
 :root body .dictionary-examples::-webkit-scrollbar { display: none; }
 :root body .dictionary-examples > * { flex: none; }
 :root body .dictionary-examples a { min-height: 40px; padding: 6px 12px; }

 /* Home */
 body[data-page=home] .public-home { --public-section-gap: 16px; }
 body[data-page=home] .public-home .home-hero { padding: 24px; border-radius: var(--radius-surface); }
 body[data-page=home] .home-section-head { margin: 0 2px 10px; }
 body[data-page=home] .home-section-head h2 { font-size: 17px; font-weight: 600; }
 body[data-page=home] :is(.public-study, .sin-kana-lab) { border-radius: var(--radius-surface); }
 body[data-page=home] .home-package { min-height: 60px; border-radius: 16px; }

 /* Dictionary */
 body[data-page=dictionary] .dict-hero { gap: 14px; padding: 20px 18px; border-radius: var(--radius-surface); }
 body[data-page=dictionary] .dict-hero h1 { font-size: 26px; line-height: 1.15; }
 body[data-page=dictionary] .dict-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
 body[data-page=dictionary] .dict-chips::-webkit-scrollbar { display: none; }
 body[data-page=dictionary] .dict-chips > * { flex: none; }
 body[data-page=dictionary] .dict-hero > * { min-width: 0; }
 body[data-page=dictionary] .dict-facets { min-width: 0; margin-inline: calc(-1 * var(--member-gutter)); padding-inline: var(--member-gutter); flex-wrap: nowrap; }
 body[data-page=dictionary] .dict-facets::-webkit-scrollbar { display: none; }
 body[data-page=dictionary] .dict-facets > * { flex: none; }
 body[data-page=dictionary] .dict-section-head h2 { font-size: 18px; }
}

/* Phones: Mochi sits under the search and meets the card edge. */
@media (max-width: 767px) {
 body[data-page=home] .public-home .home-hero { padding: 20px 18px 0; }
}

/* Guest shell: the sign-in pill takes the avatar's place in the app bar,
 * locked menu tiles show their lock in the corner and the sign-in dialog
 * opens as a bottom sheet like the menu. */
@media (max-width: 1023px) {
 :root body .member-login {
  min-height: 40px; padding: 6px 14px; border-radius: var(--radius-pill);
  background: var(--color-accent); color: var(--color-accent-ink); font-size: 13px; font-weight: 600;
 }
 :root body .member-login:hover { background: var(--color-accent-hover); }
 body:not([data-page=admin]) .mobile-drawer .nav-gated { position: relative; }
 body:not([data-page=admin]) .mobile-drawer .nav-link .nav-gate { position: absolute; top: 10px; right: 10px; width: 14px; height: 14px; margin: 0; color: var(--color-muted); }
 /* Guests have no Progres kamu, so their dock has five places. */
 :root body .member-bottom.guest-bottom { grid-template-columns: repeat(5, minmax(0, 1fr)); }
 :root body .login-gate {
  width: 100%; max-width: 560px; max-height: 92dvh; margin: auto auto 0;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0;
 }
 :root body .login-gate-head { padding: 16px 20px 12px; }
 :root body :is(.login-gate-form, .login-gate-foot) { padding-inline: 20px; }
 :root body :is(.login-gate-form, .auth-card .auth-fields) .btn { min-height: 48px; border-radius: 14px; }
}
@media (max-width: 479px) {
 :root body .member-login { width: 40px; min-width: 40px; padding: 0; justify-content: center; border-radius: 50%; }
 :root body .member-login span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Menu sheet: slides up on open and back down before it closes
 * (navigation.js waits for it). Reduced motion turns both off in sinao.css. */
@keyframes nr-sheet-in { from { transform: translateY(100%); } }
@keyframes nr-sheet-out { to { transform: translateY(100%); } }
@keyframes nr-backdrop-in { from { opacity: 0; } }
@keyframes nr-backdrop-out { to { opacity: 0; } }
@media (max-width: 1023px) {
 :root body .mobile-drawer[open] { animation: nr-sheet-in var(--dur-short) var(--ease-out); }
 :root body .mobile-drawer[open]::backdrop { animation: nr-backdrop-in var(--dur-short) var(--ease-out); }
 :root body .mobile-drawer[data-closing] { animation: nr-sheet-out 180ms var(--ease-in-out) forwards; }
 :root body .mobile-drawer[data-closing]::backdrop { animation: nr-backdrop-out 180ms var(--ease-in-out) forwards; }
}