/* Moneta V8.1 — Height-aware, zoom-safe shell and content safeguards.
   Loaded after existing themes; fixes apply by AVAILABLE SPACE, not device model. */
@media (min-width: 960px) {
  .sidebar {
    height: 100dvh;
    min-height: 0;
    box-sizing: border-box;
    padding: clamp(12px, 2.3vh, 26px) 14px clamp(12px, 2vh, 20px);
    overflow: hidden;
    isolation: isolate;
  }
  .sidebar .brand {
    flex: 0 0 auto;
    padding: 0 9px clamp(14px, 3vh, 35px);
  }
  .sidebar .nav-caption {
    flex: 0 0 auto;
    margin-bottom: 9px;
    padding-inline: 12px;
  }
  /* Only the navigation scrolls when the visible window is too short.
     Its items never shrink into unreadable, clipped rows. */
  .sidebar .main-nav {
    min-height: 0;
    flex: 0 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
    scroll-padding-block: 6px;
    padding: 2px 2px 4px;
    gap: 4px;
  }
  .sidebar .main-nav .nav-item {
    flex: 0 0 auto;
    min-height: 43px;
    height: 43px;
    padding-inline: 12px;
    overflow-wrap: anywhere;
  }
  .sidebar .sidebar-spacer { flex: 1 1 0; min-height: 0; }
  .sidebar .sidebar-bottom { flex: 0 0 auto; min-width: 0; }
  .sidebar .tip-card { margin: 11px 2px 7px; padding: 13px 13px; }
  .sidebar .tip-icon { margin-bottom: 8px; }
  .sidebar .local-status { padding: 8px 9px 0; font-size: 10.5px; line-height: 1.4; }
}
/* Decorative motivation never competes with navigation or reaches below the fold.
   Hide it based on vertical space, including browser zoom and split-window use. */
@media (min-width: 960px) and (max-height: 960px) {
  .sidebar .tip-card { display: none; }
  .sidebar .brand { padding-bottom: clamp(11px, 2.5vh, 25px); }
  .sidebar .main-nav .nav-item { min-height: 42px; height: 42px; }
  .sidebar .local-status { padding-top: 9px; }
}
@media (min-width: 960px) and (max-height: 600px) {
  .sidebar { padding-block: 10px; }
  .sidebar .brand { padding-bottom: 10px; }
  .sidebar .nav-caption { margin-bottom: 5px; }
  .sidebar .main-nav { gap: 2px; }
  .sidebar .main-nav .nav-item { height: 39px; min-height: 39px; }
  .sidebar .local-status { padding-top: 5px; }
}
@media (min-width: 960px) and (max-height: 420px) {
  .sidebar .brand { padding-bottom: 5px; }
  .sidebar .nav-caption { margin-bottom: 3px; }
  .sidebar .local-status { font-size: 10px; padding-top: 3px; }
}
/* Prevent numbers/text inside clipped colored cards from disappearing under zoom,
   reduced content width and very large INR balances. */
.stat-card { height: auto; }
.stat-card .stat-number {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
}
.stat-card .stat-head, .stat-card .stat-desc { min-width: 0; overflow-wrap: anywhere; }
.account-card .account-value, .small-stat strong, .budget-summary strong {
  overflow-wrap: anywhere;
}
/* Any visually hidden phone/keyboard navigation must not hide the page's end. */
@media (max-width: 959px) {
  .sidebar .main-nav { overflow: visible; }
  .main-layout main {
    padding-bottom: max(calc(110px + env(safe-area-inset-bottom, 0px)), 22px);
  }
}
/* Modals remain scrollable at short heights, with buttons still reachable. */
.modal-overlay { min-height: 0; }
.modal-overlay .modal {
  max-height: min(90dvh, 830px);
  overscroll-behavior-y: contain;
  overflow-y: auto;
}
@media (max-height: 540px) {
  .modal-overlay { align-items: flex-start; overflow-y: auto; }
  .modal-overlay .modal { max-height: calc(100dvh - 24px); }
}
/* Labels near graphs and cards should wrap instead of getting cut off. */
.surface-head, .section-intro, .page-heading { min-width: 0; }
.surface-head h3, .section-intro h2, .page-heading h2 { overflow-wrap: anywhere; }
@media (prefers-reduced-motion: reduce) {
  .sidebar .main-nav { scroll-behavior: auto; }
}
/* Avoid a 3+1 orphan summary card row on laptop/tablet widths.
   Columns respond to real workspace width after the sidebar is subtracted. */
@container moneta-canvas (min-width: 500px) and (max-width: 1029px) {
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) and (max-width: 1100px) {
  .sidebar .brand-sub { font-size: 8px; letter-spacing: .9px; white-space: nowrap; }
}