/* Presentation adapters for legacy screens; no financial state is written here. */
body.compact-shell {
  font-size: var(--ui-text-sm);
  line-height: 1.5;
}
body.compact-shell .main {
  padding-bottom: 140px !important;
}
body.compact-shell .main > .top {
  margin-bottom: var(--ui-space-5) !important;
}
body.compact-shell #title {
  font-size: var(--ui-text-xl);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
body.compact-shell :is(.btn, .more-menu-row, .settings-tab) {
  min-height: 44px;
  border-radius: var(--ui-radius-md);
  transition:
    background-color var(--ui-duration) var(--ui-ease),
    border-color var(--ui-duration) var(--ui-ease);
}
body.compact-shell
  :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--b, var(--ui-accent));
  outline-offset: 3px;
}
body.compact-shell
  :is(input:not([type="checkbox"]):not([type="radio"]), select) {
  min-height: 44px;
  font-size: var(--ui-text-md);
}
body.compact-shell
  :is(
    .clean-row-amount,
    .clean-balance-value,
    .clean-totals b,
    .clean-account-balances strong,
    .goal-amount,
    .amt
  ) {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.015em;
}
body.compact-shell
  :is(.clean-row-amount, .clean-account-balances strong, .amt) {
  text-align: right;
}
body.compact-shell #defaultDashboard {
  gap: var(--ui-space-5);
}
body.compact-shell .clean-card {
  padding: var(--ui-space-5);
  border-radius: var(--ui-radius-lg);
}
body.compact-shell .clean-card-head h2 {
  font-size: var(--ui-text-md);
  font-weight: 650;
}
body.compact-shell .clean-row-amount:not(.positive) {
  color: var(--ui-expense);
}
body.compact-shell .clean-row-amount.positive {
  color: var(--ui-income);
}
body.compact-shell .clean-legend > div {
  gap: var(--ui-space-3);
  flex-wrap: wrap;
}
body.compact-shell .clean-legend b {
  font-variant-numeric: tabular-nums;
  text-align: right;
}
body.compact-shell .clean-legend b small {
  font-weight: 400;
  color: var(--muted);
}
body.compact-shell #compactProfile {
  width: 44px;
  height: 44px;
}
#profileMenu {
  position: fixed;
  right: var(--ui-space-4);
  top: 70px;
  z-index: 90;
  display: grid;
  gap: var(--ui-space-2);
  width: 240px;
  max-width: calc(100vw - 32px);
  padding: var(--ui-space-4);
  background: var(--p, var(--ui-surface));
  color: var(--ink, var(--ui-text));
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow);
}
#profileMenu .email-badge {
  justify-self: start;
  margin-bottom: var(--ui-space-2);
}
#profileMenu button {
  text-align: left;
}
#accountSettingsContent {
  padding: var(--ui-space-5) 0;
  max-width: 640px;
}
#accountSettingsContent .account-danger {
  padding: var(--ui-space-5);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg);
}
#accountSettingsContent .danger {
  background: var(--ui-expense);
  color: var(--ui-surface);
  border: 0;
}
#accountSettingsTitle {
  margin: 0;
  font-size: var(--ui-text-lg);
}
body.compact-shell #guideCoach {
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 0 var(--ui-space-5);
  padding: var(--ui-space-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--b);
  border-radius: var(--ui-radius-md);
  box-shadow: none;
  z-index: auto;
}
body.compact-shell #guideCoach header button {
  min-width: 44px;
  min-height: 44px;
}
body.compact-shell #guideCoach.minimized {
  min-width: 0;
}
body.compact-shell:has(.modal.on) #guideCoach,
body.compact-shell:has(dialog[open]) #guideCoach,
body.compact-shell:has(.host-modal) #guideCoach {
  display: none !important;
}
body.compact-shell #quickStartCard {
  max-width: 1160px;
  margin: 0 auto var(--ui-space-5);
  padding: var(--ui-space-5);
  border: 1px solid var(--line);
  border-radius: var(--ui-radius-lg);
  box-shadow: none;
  background: var(--p);
  color: var(--ink);
}
#quickStartCard p {
  max-width: 60ch;
  color: var(--muted);
}
#firstStepAction {
  margin-top: var(--ui-space-3);
}
body.compact-shell .toast {
  bottom: 160px !important;
  max-width: min(460px, calc(100vw - 32px));
  pointer-events: none;
}
#desktopGoalsPanel {
  background: var(--p);
  color: var(--ink);
  border-right: 1px solid var(--line);
  padding: var(--ui-space-5) var(--ui-space-4);
}
#desktopGoalsPanel[hidden] {
  display: none !important;
}
#desktopGoalsPanel > header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--ui-space-3);
  margin-bottom: var(--ui-space-5);
}
#desktopGoalsPanel h2 {
  font-size: var(--ui-text-lg);
  margin: 0;
}
#desktopGoalsPanel nav {
  display: grid;
  gap: var(--ui-space-2);
}
#desktopGoalsPanel [data-goal-filter] {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--ink);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--ui-space-3) var(--ui-space-4);
  min-height: 48px;
}
#desktopGoalsPanel [data-goal-filter].active {
  background: color-mix(in srgb, var(--b) 12%, var(--p));
  border-color: var(--b);
  font-weight: 700;
}
#desktopGoalsPanel p {
  font-size: var(--ui-text-sm);
  color: var(--muted);
}
@media (min-width: 1101px) {
  #desktopGoalsPanel {
    position: fixed;
    inset: 62px auto 0 96px;
    width: 280px;
    overflow: auto;
    z-index: 54;
  }
  body.compact-shell.desktop-goals-open .main {
    margin-left: 376px !important;
  }
  body.desktop-goals-open #goals > .goal-tabs {
    display: none;
  }
  body.compact-shell #pocketDesktopQuickAdd {
    z-index: 66;
  }
}
@media (max-width: 1100px) {
  #desktopGoalsPanel {
    display: none !important;
  }
}
@media (max-width: 680px) {
  body.compact-shell .clean-card {
    padding: var(--ui-space-4);
  }
  #profileMenu {
    top: 62px;
  }
  body.compact-shell #quickStartCard {
    padding: var(--ui-space-4);
  }
  body.compact-shell .clean-balance-value {
    font-size: clamp(28px, 8vw, 40px);
  }
  .goal-tabs {
    display: flex;
    gap: var(--ui-space-2);
    overflow-x: auto;
    padding-bottom: var(--ui-space-2);
  }
  .goal-tabs .btn {
    flex: none;
  }
  body.compact-shell .main {
    padding-bottom: 120px !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.compact-shell *,
  body.compact-shell *::before,
  body.compact-shell *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}
/* Show either the optional welcome card or the active guided step, never both. */
body.compact-shell:has(#guideCoach) #quickStartCard{display:none!important}
body.compact-shell #guideCoach .guide-skip{min-height:44px;padding:8px 12px}
body.compact-shell #guideCoach .guide-coach-actions{gap:var(--ui-space-2)}
body.compact-shell:has(#guideCoach) #overview>#quickStartCard:not([hidden]){display:none!important}
/* Reserve the bottom action zone for Quick Add, including tablet floating controls. */
body.compact-shell #dailyUndo{bottom:calc(168px + env(safe-area-inset-bottom));max-width:min(520px,calc(100vw - 32px));flex-wrap:wrap}