/* Keep long titles, Markdown and grid children inside the viewport. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { overflow-wrap: anywhere; }
main { min-width: 0; min-height: 100dvh; }
.content, .detail-layout > *, .detail-side, .editor > *, .page-heading > div { min-width: 0; }
.sidebar { overflow-y: auto; }
.sidebar nav a { min-height: 44px; }
.page-heading { flex-wrap: wrap; }
.page-heading > div { flex: 1 1 240px; }
.page-heading h1 { overflow-wrap: anywhere; }
.button, .link-button { min-height: 44px; }
input:not([type=checkbox]), textarea, select { min-height: 44px; }
.searchbar > input:first-child { min-width: 0; }
.account { gap: 10px; flex-wrap: wrap; }
.account span { min-width: 0; }
.prose table { max-width: 100%; overscroll-behavior-x: contain; }
.prose pre, pre { max-width: 100%; }
.field #id_principle_revisions label { display: flex; align-items: start; gap: 10px; padding: 10px 0; min-height: 44px; }
input[type=checkbox] { width: 20px; height: 20px; padding: 0; margin: 3px 0; flex-shrink: 0; accent-color: var(--accent); }
#id_scopes label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.pwa-install { margin-top: 18px; }
.install-button { min-height: 44px; padding: 8px 12px; background: var(--soft); color: var(--accent); border: 1px solid #d1e4d7; border-radius: 7px; font: inherit; font-size: 12px; cursor: pointer; }
.pwa-install p { margin: 8px 0 0; font-size: 12px; }
.pwa-install + .nav-label { margin-top: 28px; }
.skip-link { position: fixed; top: -100px; left: 16px; z-index: 100; padding: 10px 16px; color: white; background: var(--accent); }
.skip-link:focus { top: 10px; }

@media (min-width: 701px) and (max-width: 1100px) {
  .searchbar { flex-wrap: wrap; }
  .searchbar > input:first-child { flex: 1 1 100%; }
  .searchbar .filter { flex: 1 1 100px; }
}
@media (min-width: 701px) and (max-width: 900px) {
  .editor { grid-template-columns: 1fr; }
  .field.full, .form-actions, .editor > .errorlist { grid-column: auto; }
}
@media (max-width: 700px) {
  body { font-size: 15px; }
  .sidebar { overflow: visible; padding: calc(14px + env(safe-area-inset-top, 0px)) max(18px, env(safe-area-inset-right, 0px)) 8px max(18px, env(safe-area-inset-left, 0px)); }
  .brand { font-size: 15px; padding-right: 110px; min-height: 40px; }
  .brand-icon { flex-shrink: 0; }
  .pwa-install { position: absolute; right: max(18px, env(safe-area-inset-right, 0px)); top: calc(12px + env(safe-area-inset-top, 0px)); margin: 0; }
  .pwa-install p { position: absolute; top: 45px; right: 0; width: min(280px, calc(100vw - 36px)); z-index: 30; padding: 14px; border: 1px solid var(--line); border-radius: 8px; background: white; box-shadow: 0 6px 25px #25334318; }
  .sidebar-bottom { margin-top: 4px; gap: 10px; flex-wrap: wrap; }
  .sidebar-bottom .account { flex: 1; gap: 4px 14px; font-size: 12px; }
  .account a, .link-button { display: inline-flex; align-items: center; min-height: 44px; font-size: 12px; }
  .sidebar nav { position: fixed; inset: auto 0 0; z-index: 20; display: flex; flex-wrap: nowrap; align-items: stretch; gap: 4px; margin: 0; padding: 6px max(10px, env(safe-area-inset-right, 0px)) calc(6px + env(safe-area-inset-bottom, 0px)) max(10px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); background: #fff; box-shadow: 0 -4px 20px #25334306; }
  .sidebar nav a { flex: 1 1 0; min-width: 0; min-height: 52px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 6px 4px; margin: 0; font-size: 11px; }
  .sidebar nav a span { display: block; font-size: 21px; }
  main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  .topbar { height: 40px; }
  .content { padding: 24px max(16px, env(safe-area-inset-right, 0px)) 32px max(16px, env(safe-area-inset-left, 0px)); }
  .page-heading { margin-bottom: 22px; align-items: start; gap: 14px; }
  .page-heading > div { flex-basis: 100%; }
  .page-heading h1 { font-size: 25px; }
  .page-heading p { font-size: 13px; }
  .page-heading .button { padding: 10px 18px; font-size: 14px; }
  .stats { gap: 8px; margin-bottom: 22px; }
  .stats > div { display: flex; flex-direction: column; align-items: start; padding: 14px 10px; }
  .stats span { font-size: 11px; }
  .stats strong { font-size: 25px; }
  .stats small { font-size: 10px; }
  .tabs { gap: 18px; }
  .tabs a { min-height: 48px; display: inline-flex; align-items: center; padding: 12px 0; }
  input:not([type=checkbox]), textarea, select, .searchbar input { font-size: 16px; }
  .searchbar .filter { flex: 1 1 95px; width: auto; min-width: 0; }
  .searchbar .button { flex: 0 0 auto; }
  .record-row { padding: 20px 15px; }
  .record-title > a { font-size: 16px; }
  .record-main p { font-size: 13px; }
  .meta { font-size: 12px; }
  .row-arrow { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .editor { padding: 20px 16px; gap: 22px; }
  .field label { font-size: 14px; }
  .editor textarea { min-height: 130px; }
  .editor #id_body { min-height: 280px; }
  .form-actions .button { width: 100%; min-height: 48px; font-size: 16px; }
  .prose { font-size: 16px; }
  .facts { gap: 16px; font-size: 13px; }
  summary { font-size: 14px; min-height: 44px; padding: 6px 0; }
  summary small { font-size: 12px; }
  .pagination { gap: 14px; flex-wrap: wrap; align-items: center; }
  .pagination a { min-height: 44px; display: inline-flex; align-items: center; }
  .login-card { margin: 8px auto; }
  .login-card .button { min-height: 48px; font-size: 16px; }
  .login-card p, .narrow p { font-size: 14px; }
  footer { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 360px) {
  .brand { font-size: 13px; gap: 8px; }
  .install-button { padding: 8px; font-size: 11px; }
  .stats small { line-height: 1.5; }
  .record-mark { display: none; }
  .records-heading { gap: 8px; padding: 0 14px; }
}