/* Mobile library navigation, using the existing light/dark colour tokens. */
.mobile-account-services,.mobile-creation-search,.mobile-creation-filter,.mobile-account-unread,.creation-column-switch { display:none; }
@media(max-width:600px) {
  body > .appbar {
    display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:56px 44px;
    gap:0; width:100%; max-width:none; margin:0; padding:0 20px;
    min-height:100px; border:0; border-radius:0; background:var(--bg); box-shadow:none;
    position:relative; top:0;
  }
  body > .appbar .brand { grid-area:1 / 1; min-width:0; }
  body > .appbar .brand-wordmark { width:88px; height:30px; }
  body > .appbar .appbar-actions { grid-area:1 / 2; gap:8px; margin:0; min-width:0; }
  body > .appbar .primary-nav { grid-area:2 / 1 / 3 / 3; justify-content:center; width:100%; margin:0; gap:24px; }
  body > .appbar .primary-nav-item { position:relative; min-height:44px; padding:0 8px; border-radius:0; }
  body > .appbar .primary-nav-item.active::after { content:""; display:block; position:absolute; bottom:2px; left:calc(50% - 14px); width:28px; height:2px; border-radius:2px; background:var(--text); transform:none; }
  body > .appbar #notificationBtn { display:none; }
  body > .appbar > .appbar-actions > #themeToggle { display:none; }
  body > .appbar:has(#accountBtn.is-guest) > .appbar-actions > #themeToggle { display:inline-flex; }
  body > .appbar #notificationWrap:not(.hidden) { display:contents; }
  body > .appbar #pointsBtn { min-height:44px; padding:0 6px; gap:6px; }
  body > .appbar #pointsTopNum { max-width:88px; overflow:hidden; text-overflow:ellipsis; }
  body > .appbar #accountBtn { position:relative; overflow:visible; clip-path:none; }
  .mobile-account-services { display:block; }
  .mobile-account-services .account-menu-item { gap:12px; min-height:44px; }
  .mobile-account-services .ri-icon { flex:none; width:20px; height:20px; }
  #accountBtn .mobile-account-unread:not([hidden]) { display:block; position:absolute; z-index:1; right:0; top:0; width:8px; height:8px; clip:auto; border:2px solid var(--bg); border-radius:50%; background:var(--danger); }
  body > .appbar .notification-popover,body > .appbar .points-popover,body > .appbar .account-menu { position:fixed; top:60px; left:auto; right:16px; width:min(360px,calc(100vw - 32px)); max-height:calc(100dvh - 80px); overflow-y:auto; box-sizing:border-box; }
  #mainContent.page:has(> #creationsView:not(.hidden)) { width:100%; }
  #creationsView { --creations-gutter:20px; padding:16px var(--creations-gutter) 40px; }
  #creationsView .creations-toolbar { display:block; padding:0; }
  #creationsView .creations-toolbar-actions { display:flex; flex-wrap:wrap; width:100%; gap:8px; }
  #creationsView .creation-new { min-height:44px; padding:0 14px; font-size:14px; margin-right:auto; }
  #creationsView .mobile-creation-search { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; border:1px solid var(--border-strong); border-radius:14px; background:var(--card); color:var(--muted-strong); cursor:pointer; }
  .mobile-creation-search span { display:none; }
  #creationsView .creations-search { display:none; }
  #creationsView .search-open .creations-search { display:flex; order:4; flex:0 0 100%; width:100%; min-height:44px; box-sizing:border-box; }
  .mobile-creation-filter { display:block; position:relative; flex:none; }
  .mobile-creation-filter > summary { display:flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 12px; border:1px solid var(--border-strong); border-radius:14px; background:var(--card); color:var(--text); font-size:14px; box-sizing:border-box; list-style:none; cursor:pointer; }
  .mobile-creation-filter > summary::-webkit-details-marker { display:none; }
  .mobile-creation-filter > summary .ri-icon { width:16px; height:16px; }
  .mobile-creation-filter > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
  .mobile-filter-panel { position:absolute; z-index:30; right:0; top:calc(100% + 8px); width:min(300px,calc(100vw - 40px)); max-height:calc(100dvh - 190px); overflow:auto; padding:8px; box-sizing:border-box; border:1px solid var(--border-strong); border-radius:16px; background:var(--card); }
  .mobile-filter-panel .creation-filters { display:grid; gap:4px; }
  .mobile-filter-panel .creation-filters button { width:100%; text-align:left; }
  .mobile-filter-panel .creation-save-help { margin-top:8px; border-top:1px solid var(--border); }
  .mobile-filter-panel .creation-save-help summary { justify-content:flex-start; padding-inline:12px; }
  .mobile-filter-panel .creation-save-help > div { position:static; width:100%; max-height:none; padding:12px; border:0; border-radius:0; box-shadow:none; }
  #creationsView .creations-meta { min-height:44px; margin:8px 0 12px; }
  .creation-column-switch { display:inline-flex; flex:none; padding:2px; border:1px solid var(--border); border-radius:12px; background:var(--field); }
  .creation-column-switch button { min-width:48px; min-height:44px; padding:0 10px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--muted-strong); font:inherit; cursor:pointer; }
  .creation-column-switch button[aria-pressed="true"] { background:var(--card); border-color:var(--border-strong); color:var(--text); font-weight:600; }
  #creationsView .creations-grid { grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; gap:24px 12px; }
  #creationsView[data-columns="1"] .creations-grid { grid-template-columns:minmax(0,1fr); }
  #creationsView .creation-expiry { align-items:flex-start; overflow-wrap:anywhere; }
  #creationsView .creation-expiry .ri-icon { margin-top:2px; }
  #creationsView .creation-cover-shell { border-radius:14px; }
  #creationsView .creation-title { font-size:15px; }
  @media(max-width:350px) {
    body > .appbar { padding-inline:16px; }
    #creationsView { --creations-gutter:16px; }
    #creationsView .creation-new { padding-inline:10px; gap:4px; font-size:13px; }
    .mobile-creation-filter > summary { padding-inline:8px; gap:4px; font-size:13px; }
  }
}