/* One compact heading and one navigation control across the main app tabs. */
.app-bottom-nav, .app-mobile-settings, .app-context-settings { display: none; }
.nav-link-icon svg { display: block; width: 22px; height: 22px; }
.app-context-toolbar { display: contents; }
.app-context-dialog { box-sizing: border-box; width: min(360px, calc(100% - 28px)); margin: auto; padding: 20px; border: 1px solid #e0e8e3; border-radius: 20px; color: #293c33; background: #fff; }
.app-context-dialog::backdrop { background: rgb(16 35 30 / 35%); }
.app-context-dialog > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.app-context-dialog h2 { margin: 0; font-size: 18px; }
.app-context-dialog > header button { flex: 0 0 44px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: #f4f7f5; color: #718178; font-size: 24px; }
.app-context-dialog .app-page-menu-actions { border: 0; margin: 12px 0 0; padding: 0; }
body.app-shell-page .goals-workspace { padding: 0 0 24px; }
body.app-shell-page .goals-tabs { position: static; display: flex; align-items: stretch; gap: 4px; width: fit-content; margin: 0 0 14px; padding: 4px; border: 1px solid #cde6e0; border-radius: 13px; background: #e8faf5; backdrop-filter: none; }
body.app-shell-page .goals-tabs button { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 16px; border: 0; border-radius: 9px; color: #66757a; background: transparent; font-size: 13px; font-weight: 750; line-height: 1.4; }
body.app-shell-page .goals-tabs button::after { content: none; }
body.app-shell-page .goals-tabs button[aria-selected="true"] { color: #15584f; background: #fff; box-shadow: 0 3px 11px color-mix(in srgb, var(--theme-accent,rgb(21 88 79)) 11%, transparent); }
.goals-total-wrap { position: relative; }
body.app-shell-page .goals-total-wrap .goals-total-card { width: 100%; }
.goals-total-wrap .goals-card-kicker { padding-right: 42px; }
body.app-shell-page .goals-budget-settings { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; color: #567468; background: transparent; cursor: pointer; }
.goals-budget-settings svg { width: 20px; height: 20px; }
.goals-budget-settings:hover { background: #eaf2ee; }
.goals-budget-settings:disabled { opacity: .4; cursor: default; }
@container kkaebu (max-width: 599px){
  body.has-mobile-navigation { --app-safe-bottom: max(8px, env(safe-area-inset-bottom, 0px)); --app-bottom-nav-height: calc(60px + var(--app-safe-bottom)); }
  body.has-mobile-navigation:not(.embedded-record-editor-page) main.page-shell { padding-bottom: calc(var(--app-bottom-nav-height) + 20px); }
  body.has-mobile-navigation.fixed-mobile-page main.page-shell,
  body.has-mobile-navigation.records-calendar-active main.page-shell { padding-bottom: calc(var(--app-bottom-nav-height) + 12px); }
  /* Hide the desktop menu before deferred navigation code runs, including page changes. */
  .app-header .nav-menu-button,
  .app-header .app-nav { display: none !important; }
  body.has-mobile-navigation .app-mobile-settings { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 10px; border: 0; border-radius: 50%; color: #76817b; background: transparent; text-decoration: none; }
  .app-mobile-settings svg { width: 22px; height: 22px; }
  .app-mobile-settings:hover { background: #f4f7f5; }
  .app-mobile-settings .nav-family-request-count { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 1px 3px; border: 2px solid #fff; border-radius: 20px; color: #fff; background: #cc626d; font-size: 9px; line-height: 12px; }
  body.has-mobile-navigation .app-bottom-nav { position: fixed; z-index: 110; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); box-sizing: border-box; height: var(--app-bottom-nav-height); padding: 6px max(8px, env(safe-area-inset-right)) var(--app-safe-bottom) max(8px, env(safe-area-inset-left)); border-top: 1px solid #e8ede9; background: #fff; }
  .app-bottom-nav > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 44px; border-radius: 10px; color: #8b9590; font-size: 10.5px; font-weight: 500; line-height: 1.2; text-decoration: none; }
  .app-bottom-nav > a[aria-current="page"] { color: #28765e; font-weight: 650; }
  .app-bottom-nav-icon { position: relative; display: block; width: 24px; height: 24px; }
  .app-bottom-nav-icon > svg { display: block; width: 24px; height: 24px; }
  .app-bottom-nav-icon .nav-review-count { position: absolute; top: -4px; left: 16px; min-width: 16px; height: 16px; padding: 1px 4px; border: 2px solid #fff; border-radius: 20px; color: #fff; background: #cc626d; font-size: 9px; line-height: 11px; }
  .app-bottom-nav a:focus-visible, .app-mobile-settings:focus-visible, .app-context-settings:focus-visible { outline: 2px solid var(--theme-accent,#739079); outline-offset: 2px; }
  body.has-mobile-navigation .quick-actions { bottom: calc(var(--app-bottom-nav-height) + 14px); }
  body.has-mobile-navigation.has-quick-actions .records-scroll-top { bottom: calc(var(--app-bottom-nav-height) + 82px); }
  body.has-mobile-navigation .goals-toast { bottom: calc(var(--app-bottom-nav-height) + 14px); }
  body.has-mobile-navigation .app-context-toolbar { display: flex; align-items: center; gap: 8px; }
  body.has-mobile-navigation .app-context-toolbar > .assets-type-tabs { flex: 1; min-width: 0; }
  body.has-mobile-navigation .app-context-settings { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 11px; border: 0; border-radius: 50%; color: #76817b; background: transparent; cursor: pointer; }
  .app-context-settings svg { width: 22px; height: 22px; }
  body.app-shell-page .goals-tabs { width: 100%; }
  body.app-shell-page .goals-tabs button { flex: 1; min-width: 0; min-height: 44px; padding: 8px; }
  body.embedded-record-editor-page :is(.app-bottom-nav, .app-mobile-settings) { display: none !important; }
}
html:has(body.app-shell-page), body.app-shell-page { background: #fff; color: #29312e; }
body.app-shell-page main.page-shell { max-width: 980px; padding-top: 20px; padding-inline: 28px; }
body.app-shell-page .app-header.app-header--simple {
  position: sticky; top: 0; z-index: 100; isolation: isolate;
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between;
  gap: 16px; min-height: 56px; margin: 0 0 16px; padding: 4px 0;
  border: 0; border-radius: 0; background: #fff; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
body.app-shell-page .app-header[hidden] { display: none !important; }
body.app-shell-page .app-header::before { display: none; }
.app-header--simple .app-header-heading { display: flex; align-items: center; gap: 9px; min-width: 0; flex: 1; }
body.app-shell-page .app-logo { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 32px; width: 32px; height: 32px; text-decoration: none; background: transparent; }
body.app-shell-page .app-logo img { display: block; width: 32px; height: 32px; object-fit: contain; }
.assets-detail-start { display: flex; align-items: center; gap: 10px; }
.assets-detail-start .connections-back { width: 36px; margin-left: 0; }
body.app-shell-page .app-header-heading h1 {
  margin: 0; color: #29312e; font-size: 24px; font-weight: 700; line-height: 1.3;
  letter-spacing: -.65px; text-align: left; overflow-wrap: anywhere;
}
.app-header--simple .count-badge { padding: 3px 7px; background: #f2f5f3; color: #7c8982; font-size: 11px; font-weight: 500; }
.app-header--simple .app-header-context { color: #89958e; font-size: 12px; font-weight: 400; white-space: nowrap; }
body.app-shell-page .app-header .nav-menu-button {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 44px; flex-direction: column; gap: 4px; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 10px; color: #76817b; background: transparent; box-shadow: none; cursor: pointer;
}
body.app-shell-page .nav-menu-line { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
body.app-shell-page .nav-menu-button:hover { background: #f4f7f5; }
body.app-shell-page .nav-menu-button .nav-menu-review-count {
  position: absolute; top: -2px; right: -3px; display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 4px; border: 2px solid #fff; border-radius: 20px;
  color: #fff; background: #cc626d; box-shadow: none; font-size: 10px; font-weight: 600;
}
body.app-shell-page .nav-menu-review-count[hidden],
body.app-shell-page .nav-menu-open .nav-menu-review-count { display: none; }
body.app-shell-page .app-header.nav-menu-ready .app-nav {
  position: absolute; top: calc(100% + 4px); right: 0; left: auto;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  width: min(360px, 100%); margin: 0; padding: 10px;
  border: 1px solid #e3eae6; border-radius: 16px; background: #fff;
  box-shadow: 0 12px 36px color-mix(in srgb, var(--theme-shadow-ink,rgb(31 42 36)) 10%, transparent);
  visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-4px);
}
body.app-shell-page .app-header.nav-menu-ready.nav-menu-open .app-nav {
  visibility: visible; opacity: 1; pointer-events: auto; transform: none;
}
body.app-shell-page .app-nav .nav-link {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 60px; padding: 8px 4px; border-radius: 10px; color: #68756e;
  background: transparent; box-shadow: none; font-size: 12px; font-weight: 500;
}
body.app-shell-page .app-nav .nav-link.active { color: #28765e; background: #f0f6f3; font-weight: 650; }
body.app-shell-page .app-nav .nav-link:hover { background: #f5f8f6; }
body.app-shell-page .app-nav .nav-link-icon { font-size: 17px; }
.app-page-menu-actions { display: grid; grid-column: 1 / -1; gap: 0; margin-top: 6px; padding-top: 6px; border-top: 1px solid #edf1ee; }
body.app-shell-page .app-page-menu-action {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; border: 0; border-radius: 8px;
  color: #53635a; background: transparent; text-align: left; font: inherit; font-size: 13px; cursor: pointer;
}
body.app-shell-page .app-page-menu-action:hover { background: #f4f7f5; }
body.app-shell-page .app-page-menu-action:disabled { opacity: .4; cursor: default; }
body.app-shell-page :is(.nav-menu-button, .app-nav a, .app-page-menu-action):focus-visible { outline: 2px solid var(--theme-accent,#739079); outline-offset: 2px; }
body.app-shell-page .card { box-shadow: none; }
body.app-shell-page .settings-menu-list { padding-inline: 0; border: 0; border-radius: 18px; background: #fff; }
body.app-shell-page .records-toolbar { width: 100%; margin: 0 0 12px; padding: 0; }
body.app-shell-page .records-toolbar .records-section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0; }
body.app-shell-page .records-toolbar .records-heading-title { gap: 6px; }
body.app-shell-page .records-toolbar h2 { margin: 0; color: #68756e; font-size: 14px; font-weight: 500; line-height: 1.5; letter-spacing: -.25px; }
body.app-shell-page .records-toolbar .entry-type-toggle { width: 32px; min-width: 32px; height: 36px; min-height: 36px; padding: 4px; border: 0; background: transparent; box-shadow: none; }
@container kkaebu (min-width: 600px){
  body:not(.embedded-record-editor-page) main.page-shell:has(> .commerce-footer--site) {
    display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: max(20px, env(safe-area-inset-bottom));
  }
  body:not(.embedded-record-editor-page) main.page-shell:has(> .commerce-footer--site) > :not(.commerce-footer--site) { flex-shrink: 0; }
  body:not(.embedded-record-editor-page) main.page-shell > .commerce-footer--site {
    margin-top: auto; padding-top: 16px; flex-shrink: 0;
  }
}
@container kkaebu (max-width: 599px){
  body.app-shell-page main.page-shell { padding-top: 14px; padding-inline: max(20px, env(safe-area-inset-left)); }
  body.app-shell-page .app-header.app-header--simple { min-height: 52px; margin-bottom: 12px; }
  body.app-shell-page .app-header-heading h1 { font-size: 22px; }
}
@container kkaebu (max-width: 359px){
  body.app-shell-page main.page-shell { padding-inline: max(16px, env(safe-area-inset-left)); }
}

/* The menu opens settings; each page keeps its own tools alongside it. */
body:is(.has-settings-toggle,.app-shell-page) .app-logo { display:inline-flex; flex:0 0 36px; width:36px; height:36px; margin-right:6px; }
body.app-shell-page .app-logo img { width:36px; height:36px; }
body.has-settings-toggle .app-header > .app-nav { display:none !important; }
body.has-settings-toggle :is(.app-settings-toggle,.app-page-settings) {
  position:relative; display:inline-flex; flex:0 0 44px; align-items:center; justify-content:center;
  width:44px; height:44px; min-height:44px; padding:10px; border:0; border-radius:10px;
  color:var(--theme-muted,#68756e); background:transparent; box-shadow:none; text-decoration:none; cursor:pointer;
}
body.has-settings-toggle :is(.app-settings-toggle,.app-page-settings) svg { width:22px; height:22px; }
body.has-settings-toggle :is(.app-settings-toggle,.app-page-settings):hover { background:var(--theme-raised,#f0f6f3); }
body.has-settings-toggle .app-page-settings.has-selection { background:var(--theme-accent-soft,#e8f4ed); color:var(--theme-accent,#23766a); }
body.has-settings-toggle :is(.app-settings-toggle,.app-page-settings):focus-visible { outline:2px solid var(--theme-accent,#28765e); outline-offset:2px; }
body.has-settings-toggle .app-settings-toggle .nav-family-request-count { position:absolute; top:0; right:0; }
body.has-settings-toggle .app-header { gap:4px; }
body.has-settings-toggle .app-header-heading { margin-right:auto; }
body.has-settings-toggle .app-settings-navigation { display:none; }
@container kkaebu (min-width:600px){
  body.has-settings-toggle .app-settings-navigation { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:4px; margin:0 0 20px; padding:6px; background:var(--theme-panel,#fff); border:1px solid var(--theme-line,#e3eae6); border-radius:14px; }
}
body.has-mobile-navigation.has-settings-toggle :is(.nav-review-count,.nav-family-request-count,.nav-menu-review-count,.count-badge) {
  display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box;
  min-width:18px; height:18px; min-height:18px; padding:0 4px; line-height:1; text-align:center; font-variant-numeric:tabular-nums; white-space:nowrap;
}
body :is(.nav-review-count,.nav-family-request-count,.nav-menu-review-count)[hidden] { display:none !important; }
body.has-mobile-navigation.has-settings-toggle .app-header-heading .count-badge { height:24px; min-height:24px; padding:0 8px; align-self:center; line-height:1; }
.count-badge-value { display:block; transform:translateY(-.5px); }
body.has-mobile-navigation.has-settings-toggle :is(.nav-review-count,.nav-family-request-count,.nav-menu-review-count) { height:20px; min-height:20px; min-width:20px; padding:0 3px; }
.nav-count-svg { display:block; flex:none; overflow:visible; }
.nav-count-svg text { fill:currentColor; font:700 10px Arial,sans-serif; }
.app-header-heading h1 .theme-head-decoration { display:inline-block; width:22px; height:22px; margin-left:7px; vertical-align:-2px; object-fit:contain; }
body.app-shell-page .records-toolbar .records-heading-title { display:none; }
.records-kind-tabs { display:inline-flex; gap:3px; padding:4px; border:1px solid var(--theme-line,#dce6df); border-radius:12px; background:var(--theme-raised,#f0f5f2); }
.records-kind-tabs { flex:none; }
.records-kind-tabs button { min-height:36px; padding:6px 16px; border:0; border-radius:8px; background:transparent; color:var(--theme-muted,#66756d); font:inherit; font-size:13px; white-space:nowrap; cursor:pointer; }
.records-kind-tabs button[aria-pressed="true"] { background:var(--theme-panel,#fff); color:var(--theme-accent,#23766a); font-weight:650; }
#records-list > .records-search-panel { width:calc(100% - 24px); margin:12px; height:40px; grid-template-columns:15px minmax(0,1fr); }
#records-list > .records-search-panel[hidden] { display:none; }
#records-list > .records-search-panel input { height:36px; }

/* An opaque header spans the page gutters while the content scrolls beneath it. */
body.app-shell-page main.page-shell { --app-header-gutter: 28px; }
body.app-shell-page .app-header.app-header--simple::before {
  content: ""; display: block; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: calc(0px - var(--app-header-gutter)); right: calc(0px - var(--app-header-gutter));
  background: var(--theme-panel, #fff); pointer-events: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
@container kkaebu (max-width: 599px){
  body.app-shell-page main.page-shell { --app-header-gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right)); }
}
@container kkaebu (max-width: 359px){
  body.app-shell-page main.page-shell { --app-header-gutter: max(16px, env(safe-area-inset-left), env(safe-area-inset-right)); }
}

/* Subpixel separators stay subtle even in the more colourful themes. */
body.app-shell-page #records-table tbody td {
  border-bottom: 0;
  box-shadow: inset 0 -.5px 0 color-mix(in srgb, var(--theme-line, #edf0f5) 70%, transparent);
}
body.app-shell-page #records-table tbody tr:last-child td { box-shadow: none; }
body.app-shell-page #records-table td.records-message {
  height:120px; padding:16px; text-align:center !important; vertical-align:middle;
  color:var(--theme-muted,#6f7c90); white-space:normal;
}
body.settings-index-page .commerce-footer--site { border-top: 0; }

html.settings-overlay-open { overflow:hidden; scrollbar-gutter:stable; }
body .app-settings-overlay { position:fixed; inset:0; width:100%; max-width:none; height:100dvh; max-height:none; margin:0; padding:0; border:0; border-radius:0; overflow:hidden; background:var(--theme-canvas,#fff); box-shadow:none; }
.app-settings-overlay::backdrop { background:var(--theme-canvas,#fff); }
.app-settings-frame { display:block; width:100%; height:100%; border:0; opacity:0; background:var(--theme-canvas,#fff); }
.app-settings-frame.is-ready { opacity:1; }
.app-settings-loading { position:absolute; inset:0; overflow:auto; padding:24px 20px 90px; box-sizing:border-box; background:var(--theme-canvas,#fff); color:var(--theme-ink,#29312e); }
.app-settings-loading[hidden] { display:none; }
.app-settings-loading-inner { width:100%; max-width:440px; margin:0 auto; }
.app-settings-loading-header { display:flex; align-items:center; gap:10px; min-height:44px; }
.app-settings-loading-header h2 { margin:0; font-size:20px; font-weight:700; }
.app-settings-loading-header button { display:grid; place-items:center; flex:none; width:36px; height:36px; margin-left:auto; padding:8px; border:0; border-radius:50%; color:var(--theme-muted,#6e8174); background:var(--theme-raised,#f0f5f2); cursor:pointer; }
.app-settings-loading-header svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; }
.app-settings-loading-status { display:flex; align-items:center; gap:9px; margin:25px 0 28px; color:var(--theme-muted,#6e8174); font-size:12px; line-height:1.7; }
.app-settings-loading-spinner { width:12px; height:12px; border:2px solid var(--theme-line,#dce6df); border-top-color:var(--theme-accent,#24745e); border-radius:50%; animation:settings-loading-turn 1s linear infinite; }
.app-settings-skeleton { display:grid; gap:24px; }
.app-settings-skeleton-group { display:grid; gap:1px; overflow:hidden; border:1px solid var(--theme-line,#e1e9e4); border-radius:14px; background:var(--theme-line,#e1e9e4); }
.app-settings-skeleton-group i { display:block; width:64px; height:9px; margin:15px; border-radius:4px; background:var(--theme-muted,#6e8174); opacity:.15; }
.app-settings-skeleton-group span { display:block; height:52px; background:var(--theme-panel,#fff); }
.app-settings-skeleton-group span::before { content:''; display:block; width:42%; height:9px; margin:21px 16px; border-radius:4px; background:var(--theme-muted,#6e8174); opacity:.12; }
.app-settings-loading-fallback { display:inline-flex; gap:8px; margin-top:25px; color:var(--theme-muted,#6e8174); font-size:11px; line-height:1.7; text-decoration:none; }
.app-settings-loading-fallback:hover { color:var(--theme-accent,#24745e); text-decoration:underline; }
@keyframes settings-loading-turn { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .app-settings-loading-spinner { animation:none; } }
body.embedded-settings-page :is(.app-bottom-nav,.app-settings-navigation,.quick-actions) { display:none !important; }
body.embedded-settings-page main.page-shell { padding-bottom:20px; }

.records-list-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; background:var(--theme-raised,#f3f6fa); }
.records-list-controls .app-control { width:120px; }
:root body .records-list-controls .app-control-trigger { width:120px; min-height:36px; height:36px; padding:0 28px 0 10px; border:1px solid var(--theme-line,#d4dedb); border-radius:8px; color:var(--theme-accent,#15584f); background:var(--theme-accent-soft,#e8faf5); font-size:12px; font-weight:650; }
body.app-shell-page #records-table { table-layout:fixed; }
body.app-shell-page #records-table .records-date-heading { width:68px; }
body.app-shell-page #records-table #records-cost-heading { width:120px; }
body.app-shell-page #records-table .records-details { max-width:none; }
body.app-shell-page #records-table thead tr:first-child { height:0; }
body.app-shell-page #records-table thead tr:first-child > th { height:0; padding-block:0; border:0; font-size:0; line-height:0; }
@container kkaebu (max-width:599px){
  .records-kind-tabs button { padding-inline:10px; }
  body.app-shell-page .records-toolbar .records-view-toggle { margin-left:auto; flex:none; }
  .app-bottom-nav > a > span:last-child { white-space:nowrap; }
  body.app-shell-page #records-table .records-date-heading { width:54px; }
  body.app-shell-page #records-table #records-cost-heading { width:88px; }
  body.app-shell-page #records-table th, body.app-shell-page #records-table td { padding-inline:10px; }
}
@container kkaebu (max-width:359px){
  .records-kind-tabs button { padding-inline:7px; font-size:12px; }
  body.app-shell-page .records-toolbar .records-view-toggle button { padding-inline:8px; font-size:12px; }
}