/* Browser layout layered over the desktop application's shared visual language. */
body { min-width: 0; }
.drawer-open { overflow: hidden; }
.hero-card, .charm-card { cursor: pointer; }
.filter-groups, .filter-row, .chip-scroll { min-width: 0; }

@media (max-width: 1099px) {
  .sidebar { position: sticky; inset: 0 auto auto; width: 100%; flex-direction: row; align-items: center; overflow-x: auto; }
  .brand-mark { height: 72px; flex: none; padding: 0 18px; border-right: 1px solid var(--line); border-bottom: 0; }
  .side-nav { display: flex; flex: 1; gap: 5px; padding: 8px 12px; }
  .nav-item { width: auto; flex: none; white-space: nowrap; }
  .sidebar-footer { display: none; }
  .app-shell { display: block; }
  .main-content { width: 100%; margin-left: 0; padding: 36px 28px 70px; }
  .header-metrics { display: flex; }
}

@media (max-width: 760px) {
  .sidebar { display: block; }
  .brand-mark { height: 52px; padding: 0 16px; border-right: 0; border-bottom: 1px solid var(--line); font-size: 15px; }
  .brand-rune { width: 32px; height: 32px; border-radius: 10px; }
  .side-nav { overflow-x: auto; padding: 7px 10px; }
  .nav-item { gap: 7px; padding: 8px 10px; font-size: 12px; }
  .nav-icon { width: 16px; font-size: 15px; }
  .main-content { padding: 30px 18px 60px; }
  .page-header { display: block; margin-bottom: 22px; }
  h1 { font-size: clamp(32px, 8vw, 44px); }
  .header-metrics { margin-top: 22px; }
  .filter-panel { padding: 14px; }
  .filter-topline { grid-template-columns: 1fr; gap: 8px; }
  .filter-groups { display: block; }
  .filter-row { display: block; width: 100%; }
  .filter-label { display: block; margin: 0 0 5px; }
  .chip-scroll { width: 100%; margin-bottom: 5px; }
  .round-filter { display: block; }
  .round-filter-heading { margin-bottom: 9px; }
  .round-controls { flex-wrap: wrap; }
  .result-toolbar { align-items: flex-start; gap: 8px; }
  .active-summary { max-width: 66%; text-align: right; white-space: normal; }
  .hero-grid, .charm-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
  .notes-grid { grid-template-columns: 1fr; margin-top: 24px; }
  .note-card { min-height: 0; }
  .note-card h2 { margin-top: 20px; }
  .quiet-view { padding-top: 10px; }
  .archive-empty { padding: 24px; }
  .detail-drawer { width: 100%; min-width: 0; max-width: none; }
  .detail-hero { display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .detail-cover { height: 270px; }
  .detail-scroll { overflow: visible; padding: 28px 18px 60px; }
  .charm-detail-hero { min-height: 0; gap: 16px; padding: 62px 22px 30px; }
  .charm-detail-rune { width: 76px; height: 76px; border-radius: 22px; }
  .charm-detail-rune::before { inset: 7px; border-radius: 16px; }
  .charm-detail-rune span { font-size: 30px; }
  .charm-detail-title h2 { font-size: 29px; }
  .charm-detail-scroll { padding: 28px 18px 60px; }
}

@media (max-width: 430px) {
  .main-content { padding-right: 13px; padding-left: 13px; }
  .header-metrics { gap: 7px; }
  .metric-card { min-width: 0; flex: 1; padding: 10px; }
  .metric-card.compact { min-width: 0; }
  .charm-card { min-height: 270px; }
  .charm-detail-hero { align-items: flex-start; flex-direction: column; }
  .charm-detail-rune { width: 66px; height: 66px; }
  .charm-detail-info { grid-template-columns: 1fr; }
  .source-link-secondary { margin-left: 0; }
}