/* Responsive layout layer for public pages. */

.mobile-sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--ink);
  padding: 0 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.mobile-sidebar-toggle:hover,
.mobile-sidebar-toggle:focus-visible {
  border-color: var(--accent);
  color: var(--accent-dark);
  outline: none;
}

.mobile-sidebar-toggle-icon {
  font-size: 17px;
  line-height: 1;
}

.topbar-mobile-tools {
  display: none;
  align-items: center;
  gap: 6px;
}

.topbar-admin-link,
.topbar-write-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--ink);
  padding: 0 9px;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.topbar-write-link {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.topbar-admin-link:hover,
.topbar-admin-link:focus-visible,
.topbar-write-link:hover,
.topbar-write-link:focus-visible {
  border-color: var(--accent-dark);
  outline: none;
}

@media (max-width: 1180px) {
  .content {
    padding-right: clamp(18px, 4vw, 42px);
    padding-left: clamp(18px, 4vw, 42px);
  }

  .site-topbar {
    margin-right: clamp(-42px, -4vw, -18px);
    margin-left: clamp(-42px, -4vw, -18px);
  }

  .site-topbar-inner {
    padding-right: clamp(18px, 4vw, 42px);
    padding-left: clamp(18px, 4vw, 42px);
  }

  .dashboard-heading,
  .admin-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .dashboard-hero-metrics {
    justify-content: flex-start;
    width: 100%;
  }

  .admin-console {
    grid-template-columns: 260px minmax(0, 1fr);
  }

  .admin-main {
    padding-right: 24px;
    padding-left: 24px;
  }
}

@media (max-width: 860px) {
  .mobile-sidebar-toggle {
    display: inline-flex;
  }

  .topbar-mobile-tools {
    display: inline-flex;
  }

  .site-topbar-inner {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .topbar-actions {
    gap: 6px;
  }

  .topbar-start {
    display: none;
  }

  .soft-sidebar {
    z-index: 70;
  }

  .mobile-scrim {
    z-index: 60;
  }

  .content {
    padding-bottom: 44px;
  }

  .doc-layout-page,
  .doc-layout,
  .note-layout,
  .article-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .doc-toc,
  .doc-feedback,
  .doc-sidebar,
  .right-panel {
    max-width: none;
  }

  .doc-toc,
  .doc-feedback {
    position: static !important;
    width: 100%;
  }

  .tv-layout,
  .tv-page-layout,
  .tv-main-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .tv-right-rail,
  .tv-side-rail {
    display: none;
  }

  .dashboard-stats,
  .admin-metrics,
  .admin-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-heading {
    padding: 18px;
  }

  .dashboard-hero-metrics span {
    min-width: 0;
    flex: 1 1 140px;
  }

  .account-grid,
  .admin-field-grid,
  .admin-page-editors,
  .admin-dashboard-grid,
  .pd-two-col {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .admin-console {
    display: block;
  }

  .admin-sidebar {
    position: static;
    width: 100%;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-sidebar .admin-tab-list {
    display: flex;
    overflow-x: auto;
    padding-bottom: 2px;
  }

  .admin-sidebar .admin-tab-list label {
    flex: 0 0 auto;
  }

  .admin-main {
    padding-right: 18px;
    padding-left: 18px;
  }
}

@media (max-width: 640px) {
  .site-topbar-inner {
    min-height: 56px;
    gap: 7px;
    padding-right: 14px;
    padding-left: 14px;
  }

  .site-topbar {
    margin-right: -14px;
    margin-left: -14px;
  }

  .content {
    padding: 14px 14px 36px;
  }

  .mobile-sidebar-toggle {
    min-height: 34px;
    padding: 0 8px;
  }

  .mobile-sidebar-toggle-label {
    display: none;
  }

  .topbar-account,
  .topbar-theme {
    height: 34px;
  }

  .topbar-theme .theme-button {
    width: 27px;
    height: 27px;
  }

  .soft-sidebar {
    width: min(320px, calc(100vw - 34px));
    padding: 14px;
  }

  .dashboard-heading,
  .dashboard-panel,
  .stat-card,
  .pd-panel,
  .admin-tab-panel,
  .admin-data-card,
  .install-box,
  .policy-page {
    border-radius: 12px;
  }

  .dashboard-heading h1,
  .admin-hero h1,
  .policy-page h1 {
    font-size: clamp(30px, 10vw, 44px);
  }

  .dashboard-hero-metrics,
  .actions,
  .editor-actions,
  .admin-topbar,
  .admin-section-head {
    align-items: stretch;
    flex-direction: column;
  }

  .dashboard-hero-metrics span,
  .actions > *,
  .editor-actions > *,
  .admin-topbar > *,
  .admin-section-head > * {
    width: 100%;
  }

  .button,
  .topbar-account,
  .topbar-theme,
  .translate-control {
    width: 100%;
  }

  .topbar-account,
  .topbar-theme {
    width: auto;
  }

  .dashboard-stats,
  .admin-metrics,
  .admin-dashboard-stats {
    grid-template-columns: minmax(0, 1fr);
  }

  .dashboard-hero-metrics span {
    flex-basis: auto;
  }

  .admin-visit-chart div {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .admin-visit-chart i,
  .admin-visit-chart b {
    grid-column: 2;
  }

  .admin-visit-chart em {
    grid-column: 2;
  }

  .admin-table-list a,
  .admin-search-stack a {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .admin-table-list a > b {
    display: none;
  }

  .site-footer-shell,
  .site-footer-bottom {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px;
  }

  .site-footer-bottom {
    align-items: flex-start !important;
  }

  .pd-chart-tools,
  .pd-panel-head,
  .pd-card-head {
    align-items: flex-start !important;
    flex-direction: column;
  }

  .pd-chart-tools > *,
  .pd-tabs {
    max-width: 100%;
    overflow-x: auto;
  }

  .pd-line-chart {
    min-width: 520px;
  }

  .table-wrap,
  .data-table-wrap,
  .markdown-table-wrap {
    max-width: 100%;
    overflow-x: auto;
  }

  .policy-page {
    padding: 30px 4px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .soft-sidebar,
  .right-panel {
    transition: none;
  }
}