/* Wide screens use a work area with a persistent section rail. */
.drive-health {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 9px 14px; margin-bottom: 12px;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--surf); color: var(--muted); font-size: 12.5px;
}
.drive-health .btn-link { min-height: 28px; white-space: nowrap; font-size: 12.5px; }
.drive-health-error { border-color: var(--red); color: var(--red); }
@media (min-width: 821px) {
  main { max-width: none; }
  main > .sec.on { min-height: calc(100dvh - var(--nav-h) - var(--safe-top) - 76px); }
  #mobile-more, #mobile-more-menu, .things-mobile-switcher,
  #tracker-filter-toggle, #account-tools-toggle { display: none; }
  #tracker-extra-filters { display: contents; }
  #account-tools { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  #account-tools > .card { min-width: 0; margin-bottom: 0; }
  #financial-ratios-card, #update-balances-card { grid-column: 1 / -1; }
  #sec-accounts.on { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 0 16px; }
  #sec-accounts > :not(#bills-card):not(#goals-card) { grid-column: 1 / -1; }
  #bills-card { grid-column: 1; }
  #goals-card { grid-column: 2; }
  #account-tools { margin-top: 4px; }
  #tracker-transactions-card { min-height: 360px; }
  #sec-tracker.on { display: flex; flex-direction: column; }
  #sec-tracker > .section-title { order: 0; }
  #sec-tracker > .section-sub { order: 1; }
  #tracker-filter-card { order: 2; }
  #tracker-transactions-card { order: 3; }
  #tracker-budget-card { order: 4; }
  #analysis-grid { order: 5; }
  #tracker-trends-card { order: 6; }
  #recurring-card { order: 7; }
  #things-list-view { width: 100%; min-width: 0; }
  .things-section-nav { display: flex; flex-direction: row; flex-wrap: wrap; position: static; margin-bottom: 20px; }
  .things-sec-link { justify-content: center; width: auto; }
  .things-sec-link.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); font-weight: 650; }
  #things-list-view > [id^="things-sec-"] { width: 100%; min-width: 0; }
  #things-item-grid > .empty-state { grid-column: 1 / -1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: clamp(300px, calc(100dvh - 320px), 640px); }
}

@media (min-width: 1000px) {
  #sec-tracker.on { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 0 16px; }
  #sec-tracker > .section-title, #sec-tracker > .section-sub, #tracker-filter-card { grid-column: 1 / -1; }
  #tracker-transactions-card { grid-column: 1; grid-row: 4 / span 3; }
  #analysis-grid { grid-column: 2; grid-row: 4; grid-template-columns: minmax(0, 1fr); }
  #analysis-grid > .card { min-width: 0; }
  #tracker-budget-card { grid-column: 2; grid-row: 5; }
  #tracker-trends-card { grid-column: 2; grid-row: 6; }
  #recurring-card { grid-column: 1 / -1; grid-row: 7; }
}

@media (min-width: 1180px) {
  :root { --desktop-rail: 214px; }
  #nav {
    width: var(--desktop-rail); right: auto; bottom: 0; height: 100dvh;
    padding: 28px 14px 88px; flex-direction: column; align-items: stretch;
    gap: 0; border-bottom: 0; border-right: 1px solid var(--border);
    background: var(--surf); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .nav-brand { padding: 0 10px; font-size: 17px; }
  #nav [role="tablist"] { display: flex; flex-direction: column; overflow: visible; flex: 0 0 auto; gap: 5px; margin-top: 32px; }
  #nav [role="tab"] { justify-content: flex-start; height: 45px; padding: 0 13px; width: 100%; }
  #nav [role="tab"][aria-selected="true"] { color: var(--accent-text); background: var(--accent-soft); }
  #theme-toggle, #lock-btn { position: absolute; bottom: 22px; }
  #theme-toggle { left: 24px; }
  #lock-btn { right: 24px; }
  main { margin: 0 0 0 var(--desktop-rail); max-width: none; padding: 32px clamp(24px, 3vw, 52px) 64px; }
  main > .sec.on { min-height: calc(100dvh - 96px); }
}

.wl-config-heading { font-size: 14px; font-weight: 700; margin: 16px 0 10px; }
.wl-config-section { border-top: 1px solid var(--hair); margin-top: 15px; padding-top: 7px; }
.wl-config-section > summary { cursor: pointer; min-height: 44px; font-weight: 600; color: var(--text); }
.wl-config-section > .wl-config-grid { margin: 10px 0 14px; }
[hidden] { display: none !important; }