/* Hallmark · pre-emit critique: P5 H5 E4 S5 R5 V4
 * genre: modern-minimal · macrostructure: mobile app shell · tone: calm
 * anchor hue: existing indigo · design-system: docs/design.md · designed-as-app */
@media (max-width: 1023px) {
 html { scroll-padding-top: calc(var(--mobile-header-height) + env(safe-area-inset-top) + var(--space-md)); scroll-padding-bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom)); }
 body, body[data-member=true] { padding: 0; background: var(--color-paper); }
 body .topbar, body .member-header {
  position: sticky; top: 0; z-index: var(--z-header); margin: 0;
  min-height: calc(var(--mobile-header-height) + env(safe-area-inset-top));
  padding: calc(var(--space-sm) + env(safe-area-inset-top)) max(var(--space-md), env(safe-area-inset-right)) var(--space-sm) max(var(--space-md), env(safe-area-inset-left));
  border-radius: 0; border-bottom: var(--rule-width) solid var(--color-rule); background: var(--color-surface);
 }
 .topbar-inner { min-height: var(--mobile-touch-size); gap: var(--space-sm); }
 body .topbar .menu-toggle, body .member-header .sin-nav-toggle { display: none; }
 body .brand-logo { width: 136px; height: 44px; }
 body .header-actions, body .member-header-actions { gap: var(--space-sm); }
 body .header-actions select, body .member-header-actions select { min-height: var(--mobile-touch-size); width: 88px; font-size: 12px; padding: var(--space-sm) var(--space-xs); }
 body .avatar, body .member-profile { min-width: var(--mobile-touch-size); min-height: var(--mobile-touch-size); }
 body .app-layout { border-radius: 0; min-height: calc(100dvh - var(--mobile-header-height)); }
 body main, body .member-layout main, body[data-page=home] main, body[data-page=dictionary] main {
  padding: var(--space-lg) max(var(--space-md), env(safe-area-inset-right)) calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + var(--space-lg)) max(var(--space-md), env(safe-area-inset-left));
 }
 body .bottom-nav, body .member-bottom, body[data-page=home] .bottom-nav, body[data-page=dictionary] .bottom-nav, body[data-page=auth] .bottom-nav {
  position: fixed; inset: auto 0 0; z-index: var(--z-navigation); display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px;
  min-height: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom));
  padding: var(--space-sm) max(var(--space-sm), env(safe-area-inset-right)) calc(var(--space-sm) + env(safe-area-inset-bottom)) max(var(--space-sm), env(safe-area-inset-left));
  background: var(--color-surface); border-top: var(--rule-width) solid var(--color-rule); border-radius: 0; box-shadow: none;
 }
 body .admin-bottom { grid-template-columns: repeat(4, minmax(0, 1fr)); }
 body :is(.bottom-nav, .member-bottom) :is(a, button) {
  position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-xs);
  min-width: 0; min-height: 64px; margin: 0; padding: var(--space-xs) 0;
  border: 0; border-radius: var(--radius-control); background: var(--color-transparent); color: var(--color-muted);
  font-family: var(--font-body); font-size: 10px; line-height: 1.4; font-weight: 500; white-space: nowrap; text-decoration: none;
 }
 body :is(.bottom-nav, .member-bottom) svg { width: 24px; height: 24px; position: relative; z-index: 1; }
 body :is(.bottom-nav, .member-bottom) :is(a, button) > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
 body :is(.bottom-nav, .member-bottom) :is(a, button)::before {
  content: ''; position: absolute; top: var(--space-sm); width: min(48px, 100%); height: 32px; border-radius: var(--radius-pill); background: var(--color-transparent);
 }
 body :is(.bottom-nav, .member-bottom) :is([aria-current=page], [data-current-menu=true], [aria-expanded=true]) { color: var(--color-accent); font-weight: 700; }
 body :is(.bottom-nav, .member-bottom) :is([aria-current=page], [data-current-menu=true], [aria-expanded=true])::before { background: var(--color-accent-soft); }
 body :is(.bottom-nav, .member-bottom) :is(a, button):active { transform: none; background: var(--color-paper-2); }
 body :is(.bottom-nav, .member-bottom) :is(a, button):focus-visible { outline-offset: -3px; }
 body .mobile-drawer {
  inset: auto 0 0; margin: 0 auto; width: 100%; max-width: 640px; height: auto; max-height: calc(100dvh - var(--space-lg) - env(safe-area-inset-top));
  padding: var(--space-md) max(var(--space-lg), env(safe-area-inset-right)) calc(var(--space-lg) + env(safe-area-inset-bottom)) max(var(--space-lg), env(safe-area-inset-left));
  border: 0; border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--color-surface); overscroll-behavior: contain;
 }
 body .mobile-drawer::before { content: ''; display: block; width: 40px; height: 4px; margin: 0 auto var(--space-md); border-radius: var(--radius-pill); background: var(--color-rule); }
 body .mobile-drawer::backdrop { background: var(--color-overlay); }
 .mobile-drawer .drawer-head { margin-bottom: var(--space-md); }
 .mobile-drawer .menu-toggle, .mobile-drawer .text-button { min-width: var(--mobile-touch-size); min-height: var(--mobile-touch-size); }
 body .mobile-drawer .nav-link { min-height: var(--mobile-touch-size); padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }
 body .mobile-drawer .nav-link[aria-current=page] { color: var(--color-accent); background: var(--color-accent-soft); }
 body .mobile-drawer .nav-divider { border-top: var(--rule-width) solid var(--color-rule); margin: var(--space-xs) 0; }
 body .mobile-drawer > form { border-top: var(--rule-width) solid var(--color-rule); margin-top: var(--space-md); padding-top: var(--space-sm); }
 body .audio-status { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + var(--space-sm)); left: var(--space-md); right: var(--space-md); }
 body .selection-speech { bottom: calc(var(--mobile-nav-height) + env(safe-area-inset-bottom) + var(--space-sm)); }
 body[data-mobile-keyboard=true] :is(.bottom-nav, .member-bottom) { display: none; }
 body[data-learning-active=true] :is(.audio-status, .selection-speech) { bottom: max(var(--space-md), env(safe-area-inset-bottom)); }
 @media (pointer: coarse) {
  main :is(.btn, .chip, .icon-button, .section-tab, .text-link, .dashboard-text-link) { min-height: var(--mobile-touch-size); }
  main :is(.icon-button, .dashboard-package-link) { min-width: var(--mobile-touch-size); min-height: var(--mobile-touch-size); }
  main :is(input:not([type=checkbox]):not([type=radio]), select) { min-height: var(--mobile-touch-size); font-size: 16px; }
 }
}

/* Layout repairs shared by every width: spacing these components were
 * missing, which showed most on narrow screens. */
.editor > small { display: block; margin-block: var(--space-sm) var(--space-md); }
:is(.dashboard-empty, .empty, .study-empty) > .btn { margin-top: var(--space-lg); }
.auth-page-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-lg); margin-top: var(--space-lg); }
.auth-page-footer a { display: inline-flex; align-items: center; gap: var(--space-sm); min-height: var(--mobile-touch-size); font-size: 12px; color: var(--color-muted); }
.auth-page-footer svg { width: 16px; height: 16px; }
.auth-page-footer > span { font: 400 11px var(--font-japanese); letter-spacing: .08em; color: var(--color-muted); }
body[data-page=admin] main :is(h1, .section-head h2, .sin-record-panel th:first-child)::first-letter { text-transform: uppercase; }
.admin-records > article > div { min-width: 0; max-width: 100%; }
.admin-records code { overflow-wrap: anywhere; word-break: break-all; }

/* Admin record lists: below tablet width each row becomes a card. The title
 * keeps the full width, the status sits under it, and actions wrap instead
 * of being clipped at the panel edge. */
@media (max-width: 767px) {
 :is(.sin-record-panel, .sin-admin-overview) :is(table, tbody) { display: block; }
 :is(.sin-record-panel, .sin-admin-overview) thead { display: none; }
 :is(.sin-record-panel, .sin-admin-overview) tbody tr { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); padding: var(--space-md) 0; border-bottom: var(--rule-width) solid var(--color-rule); }
 :is(.sin-record-panel, .sin-admin-overview) tbody tr:last-child { border-bottom: 0; }
 :is(.sin-record-panel, .sin-admin-overview) td { display: block; padding: 0; border: 0; }
 :is(.sin-record-panel, .sin-admin-overview) td:is(:first-child, :last-child) { flex: 1 1 100%; }
 .sin-admin-overview td:nth-child(3) { font-size: 12px; color: var(--color-muted); }
 .sin-record-title { font-size: 15px; line-height: 1.45; overflow-wrap: break-word; }
 .sin-table-name { min-width: 0; }
 .sin-table-name small { max-width: none; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
 .sin-table-actions { flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); white-space: normal; font-size: 13px; }
 .sin-table-actions > :is(a:not(.btn, .icon-button), .text-button) { display: inline-flex; align-items: center; min-height: 40px; }
 .sin-admin-overview .sin-panel-head { flex-wrap: wrap; gap: var(--space-md); }
 body[data-page=admin] .section-head { flex-wrap: wrap; gap: var(--space-md); }
}

/* Account and email tables: below desktop width each record is a bordered
 * card with labelled fields, so no column hides behind horizontal scroll. */
@media (max-width: 1023px) {
 .user-directory { padding: var(--space-md); }
 :is(.user-table-scroll, .email-table-wrap) { overflow: visible; border: 0; border-radius: 0; }
 :is(.user-table, .email-table-wrap table), .user-table[data-member-table], .admin-account-table, .email-table-wrap .email-history { display: block; min-width: 0; }
 :is(.user-table, .email-table-wrap table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
 :is(.user-table, .email-table-wrap table) tbody { display: grid; gap: var(--space-md); }
 :is(.user-table, .email-table-wrap table) tbody tr { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md); border: var(--rule-width) solid var(--color-rule); border-radius: var(--radius-control); background: var(--color-surface); }
 :is(.user-table, .email-table-wrap table) tbody :is(th, td) { display: block; width: auto; min-width: 0; max-width: none; padding: 0; border: 0; overflow-wrap: anywhere; }
 :is(.user-table, .email-table-wrap table) tbody th { padding-bottom: var(--space-sm); border-bottom: var(--rule-width) solid var(--color-rule); font-size: 15px; }
 :is(.user-table, .email-table-wrap table) td[data-label]::before { content: attr(data-label); display: block; margin-bottom: 2px; font-size: 11px; font-weight: 500; letter-spacing: .02em; color: var(--color-muted); }
 :is(.user-table, .email-table-wrap table) td[data-label]:empty { display: none; }
 .user-table .user-table-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--space-lg); padding-top: var(--space-sm); border-top: var(--rule-width) dashed var(--color-rule); }
 .user-table .user-table-actions::before { flex: 1 1 100%; }
 .user-table .user-table-actions > :is(details[open], form) { flex: 1 1 100%; }
 .user-table-membership { min-width: 0; }
 .user-table-membership textarea { width: 100%; }
 .user-ban-reason, .user-table-activation small { max-width: none; }
 .user-table-hint { display: none; }
}

/* Home hero between large phones and tablets: keep Mochi and its speech
 * bubble together instead of stretching them across the card. */
@media (min-width: 480px) and (max-width: 767px) {
 .public-home .home-hero .home-mochi { justify-self: center; width: 340px; }
}

@media (max-width: 767px) {
 .dk-primary-reading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-sm); }
 .dk-primary-reading > span:first-child { flex: 1 1 100%; }
}