/* Sillet's application layer. Shared marketing styles stay in styles.css. */
body[data-route='app'] {
  --hint: var(--sub);
  --ui-divider: color-mix(in oklch, var(--line) 62%, var(--surface));
  --ui-radius: 12px;
  --ui-control: 9px;
}
body[data-theme='light'] { color-scheme: light; }
body[data-theme='dark'] { color-scheme: dark; }

#app { display: none !important; background: var(--bg); }
body[data-route='app'] #app {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: 'header' 'content' 'navigation';
}
.topbar {
  grid-area: header;
  padding: max(8px, var(--safe-t)) max(16px, var(--safe-r)) 12px max(16px, var(--safe-l));
  border-color: var(--ui-divider);
  background: var(--surface);
  box-shadow: none;
}
.topbar-row1 { min-height: 44px; padding: 0 0 8px; }
.topbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 20px;
  letter-spacing: -.035em;
}
.app-brand-mark { flex-shrink: 0; }
.topbar-user { gap: 4px; }
.u-av, .sync-control { width: 40px; height: 40px; border-color: transparent; border-radius: 50%; }
.u-av { background: var(--surface-2); font-family: var(--sans); font-size: 12px; }
.sync-control { background: transparent; }
.sync-popover { right: 0; border-radius: var(--ui-radius); }
.balance-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.balance-kicker { margin: 0; font-size: 11px; font-weight: 500; }
.balance-amount { grid-column: 2; grid-row: 1 / 3; font-size: 30px; letter-spacing: -.035em; }
.balance-amount .currency { margin-left: 4px; font-size: 12px; }
.balance-meta { gap: 8px; margin: 0; }
.balance-meta-item { min-height: 18px; font-size: 10px; }
.balance-meta-item + .balance-meta-item { border: 0; padding: 0; }
.balance-meta-item strong { font-size: 10px; }
.balance-drain { grid-column: 1 / -1; height: 3px; margin-top: 6px; border-radius: 4px; }

.tab-nav {
  grid-area: navigation;
  gap: 4px;
  padding: 6px max(8px, var(--safe-r)) max(8px, var(--safe-b)) max(8px, var(--safe-l));
  border-top: 1px solid var(--ui-divider);
  background: var(--surface);
}
.tab-btn { gap: 4px; min-height: 52px; border-radius: 10px; font-size: 10px; }
.tab-btn svg { width: 20px; height: 20px; opacity: 1; }
.tab-btn.active { box-shadow: none; background: var(--brand-dim); color: var(--brand); }
.tab-btn.active:hover { background: var(--brand-soft); color: var(--brand); }
.tab-btn:active { background: var(--surface-3); }
.app-body {
  grid-area: content;
  min-width: 0;
  padding: 24px max(16px, var(--safe-r)) 16px max(16px, var(--safe-l));
  scrollbar-width: auto;
  scrollbar-gutter: stable;
}
.app-body::-webkit-scrollbar { width: auto; height: auto; }
.app-body:focus { outline: none; }
.tab-page, .tab-page.active { padding-bottom: 16px; }
.invest-wrap, .stats-wrap, .settings-wrap, .habits-wrap { padding: 0; }
.page-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 24px;
}
.page-heading h1 { color: var(--ink); font-size: 26px; font-weight: 600; line-height: 1.2; letter-spacing: -.03em; text-wrap: balance; }
.page-heading p { margin-top: 6px; color: var(--sub); font-size: 13px; line-height: 1.5; text-wrap: pretty; }
#app .btn, #app .section-action-btn, .modal .btn { min-height: 40px; border-radius: 9px; }
body[data-route='app'] .btn-gold { background: var(--brand); color: var(--surface); box-shadow: none; }
body[data-route='app'] .btn-gold:hover { background: var(--brand-2); color: var(--surface); }
body[data-route='app'] :is(.fi, .setting-inline-input, .setting-select, .habit-title-input) { border-radius: 9px; }
body[data-route='app'] ::placeholder { color: var(--sub); }

/* The ledger leads with actions, followed immediately by today's statement. */
.ledger-page-heading { align-items: flex-end; }
.ledger-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; }
.ledger-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 10px 12px;
  border: 1px solid var(--ui-divider);
  border-radius: var(--ui-control);
  background: var(--surface);
}
.ledger-action strong { color: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; }
.ledger-action svg { flex-shrink: 0; }
.ledger-action.primary { border-color: var(--brand); background: var(--brand); color: var(--surface); }
.ledger-action:hover { transform: none; background: var(--surface-2); }
.ledger-action.primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.ledger-action:active { transform: translateY(1px); }
.ledger-statement { margin: 0; }
.ledger-column-head { display: none; }
.txn-column-labels { display: none; }
.txn-summary { margin-bottom: 24px; border-color: var(--ui-divider); border-radius: var(--ui-radius); }
.txn-metric { gap: 4px; padding: 12px; }
.txn-metric-label { color: var(--sub); font-family: var(--sans); font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; }
.txn-metric-value { font-size: 19px; }
.txn-metric-sub { font-family: var(--sans); font-size: 11px; }
.txn-list--bank-register { --statement-pad: 14px; --statement-row: 64px; --statement-radius: 12px; --statement-border: var(--ui-divider); }
.txn-list--bank-register .txn-day-block { margin: 0 0 12px; }
.txn-list--bank-register .txn-day-header { gap: 6px; padding: 14px 16px; background: var(--surface); }
.txn-list--bank-register .txn-day-title { font-family: var(--sans); font-size: 14px; font-weight: 600; }
.txn-list--bank-register .txn-day-date { font-family: var(--sans); font-size: 11px; }
.txn-list--bank-register .txn-day-summary span { font-family: var(--sans); font-size: 11px; font-weight: 400; }
.txn-day-allocation { padding: 12px 16px; background: var(--surface-2); }
.txn-day-allocation-head { margin-bottom: 10px; }
.txn-day-allocation-head strong { font-size: 12px; }
.txn-day-allocation-head span { color: var(--sub); font-size: 11px; }
.txn-day-allocation-item { min-height: 22px; }
.txn-day-allocation-pct { font-weight: 600; }
.txn-list--bank-register .txn-icon { width: 32px !important; height: 32px !important; border-radius: 9px !important; font-family: var(--sans); font-size: 11px !important; }
.txn-list--bank-register .txn-name { font-size: 14px; font-weight: 500; }
.category-leaf { font-weight: 600; }
.txn-list--bank-register .txn-meta { margin-top: 4px; font-family: var(--sans); font-size: 11px; }
.txn-list--bank-register .txn-ledger-history { margin-top: 28px; }
.txn-ledger-section-head h2 { color: var(--ink); font-size: 16px; font-weight: 600; }
.txn-list--bank-register .txn-ledger-section-head { padding: 0 0 10px; }
.txn-list--bank-register .txn-ledger-section-head small { color: var(--sub); font-family: var(--sans); font-size: 11px; font-weight: 400; text-transform: none; }
.txn-list--bank-register details.txn-day-block { margin: 0 0 8px; }
.txn-list--bank-register details > .txn-day-header { position: relative; padding-right: 40px; list-style: none; cursor: pointer; border-bottom: 0; }
.txn-list--bank-register details > .txn-day-header::-webkit-details-marker { display: none; }
.txn-list--bank-register details > .txn-day-header::after { content: ''; position: absolute; right: 18px; top: calc(50% - 4px); width: 7px; height: 7px; border-right: 1.5px solid var(--sub); border-bottom: 1.5px solid var(--sub); transform: rotate(-45deg); transition: transform .18s ease-out; }
.txn-list--bank-register details[open] > .txn-day-header::after { transform: rotate(45deg); }
.txn-list--bank-register details[open] > .txn-day-header { border-bottom: 1px solid var(--ui-divider); }
.txn-list--bank-register details > .txn-day-header:hover { background: var(--surface-2); }
summary:focus-visible { outline: 3px solid var(--brand-ring); outline-offset: -3px; }
.timer-banner { margin: 0 0 16px; border-color: var(--brand-ring); border-radius: var(--ui-radius); }
.timer-banner-dot { background: var(--brand); box-shadow: 0 0 0 4px var(--brand-dim); }

/* Shared sections are grouped lists and toolbars, with one level of framing. */
.week-summary-grid { gap: 0; overflow: hidden; margin-bottom: 20px; border: 1px solid var(--ui-divider); border-radius: var(--ui-radius); background: var(--surface); }
.week-summary-card { padding: 14px; border: 0; border-radius: 0; background: transparent; }
.week-summary-card + .week-summary-card { border-left: 1px solid var(--ui-divider); }
.week-summary-card small { font-size: 11px; white-space: normal; }
.week-planner { gap: 0; padding-bottom: 0; border: 1px solid var(--ui-divider); border-radius: var(--ui-radius); background: var(--surface); scrollbar-width: auto; }
.week-planner::-webkit-scrollbar { display: block; }
.week-day-col { border: 0; border-right: 1px solid var(--ui-divider); border-radius: 0; background: transparent; }
.week-day-col:last-child { border-right: 0; }
.week-day-col.today { background: var(--brand-dim); }
.week-day-head { padding: 14px 10px; border-color: var(--ui-divider); }
.week-day-head strong { font-family: var(--sans); }
.week-day-blocks { min-height: 220px; gap: 8px; }
.week-block { min-height: 58px; border-color: transparent; border-radius: 7px; }
.week-empty { min-height: 40px; border: 0; background: transparent; font-weight: 500; }
.template-panel { margin-top: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.template-panel-head { margin-bottom: 12px; }
.weekly-plan-kicker, .sec-hdr-l, .stat-section-title, .hm-title, .donut-title { color: var(--ink); font-size: 14px; font-weight: 600; }
.template-panel-copy { margin-top: 4px; }
.subject-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.subj-btn { display: grid; grid-template-columns: 8px minmax(0, 1fr); align-items: center; gap: 3px 8px; min-height: 60px; padding: 10px 14px; border-radius: 9px; box-shadow: none; }
.subj-btn-dot { grid-row: 1 / 3; width: 6px; height: 6px; margin: 0; border-radius: 50%; }
.subj-btn-name { font-size: 13px; }
.subj-btn-today { margin: 0; font-family: var(--sans); font-size: 11px; }
.subj-add-btn { min-height: 60px; padding: 10px 16px; border: 0; border-radius: 9px; background: transparent; box-shadow: none; font-size: 12px; }
.subj-btn:hover, .subj-add-btn:hover { transform: none; }
.timer-big { max-width: 500px; margin: 0 auto; padding: 24px; border-color: var(--ui-divider); border-radius: var(--ui-radius); box-shadow: none; }
.timer-big-time { font-size: 40px; letter-spacing: -.035em; }
.timer-big-ms { display: none; }
.timer-big-cost { color: var(--sub); font-size: 13px; }
.timer-start-btn { min-height: 44px; border-radius: 9px; color: var(--surface); font-size: 14px; }
.stat-strip { border-color: var(--ui-divider); border-radius: var(--ui-radius); }
.stat-strip-label, .stat-strip-sub { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.stat-strip-item { padding: 16px; }
.stat-strip-value { font-size: 22px; }
.investment-summary { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 0 20px; border: 0; background: transparent; box-shadow: none; }
.investment-summary .stat-section-title { margin: 0; padding: 0; border: 0; }
.investment-balance { min-width: 0; padding: 0; border-radius: 0; background: transparent; color: var(--ink); text-align: right; }
.investment-balance > span { font-size: 30px; }
.hm-outer, .donut-outer { border-color: var(--ui-divider); border-radius: var(--ui-radius); box-shadow: none; }
.acct-table { border-color: var(--ui-divider); border-radius: var(--ui-radius); }
.stat-section, .stat-disclosure { margin-top: 28px; }
.habits-head-actions { flex-wrap: wrap; max-width: 100%; }
.habits-month-nav { grid-template-columns: 40px minmax(104px, auto) 40px; gap: 0; border: 1px solid var(--ui-divider); border-radius: 9px; background: var(--surface); }
.habit-icon-btn { width: 40px; height: 40px; border: 0; background: transparent; }
.habit-edit-toggle { width: 40px; height: 40px; border-color: var(--ui-divider); border-radius: 9px; }
.habits-sheet-frame { border-color: var(--ui-divider); border-radius: var(--ui-radius); box-shadow: none; }
.habits-month-label { border: 0; background: transparent; font-family: var(--sans); }
.habits-sheet { min-width: 100%; }
.habit-corner, .habit-head { min-height: 76px; }
.habit-head-title, .habit-head.editing .habit-head-title { min-height: 0; }
.habit-head-title span { position: static; width: auto; max-width: none; transform: none; white-space: normal; overflow-wrap: anywhere; text-align: center; font-size: 12px; font-weight: 600; line-height: 1.4; }
.habit-head.editing { min-height: 120px; grid-template-rows: 1fr auto; padding-top: 28px; }
.app-empty-state { padding: 40px 24px; border: 1px solid var(--ui-divider); border-radius: var(--ui-radius); background: var(--surface); }
.app-empty-state[hidden] { display: none; }
.app-empty-state h2 { color: var(--ink); font-size: 18px; font-weight: 600; }
.app-empty-state p { max-width: 42ch; margin: 10px 0 20px; color: var(--sub); font-size: 14px; line-height: 1.6; }
.settings-wrap { max-width: 780px; }
.settings-section { margin: 0 0 28px; }
.settings-section-title { padding: 0 0 10px; color: var(--ink); font-size: 14px; font-weight: 600; }
.setting-row { gap: 16px; min-height: 72px; margin: 0; padding: 16px; border: 1px solid var(--ui-divider); border-top: 0; border-radius: 0; box-shadow: none; }
.settings-section-title + .setting-row { border-top: 1px solid var(--ui-divider); border-radius: 12px 12px 0 0; }
.settings-section > .setting-row:last-child { border-radius: 0 0 12px 12px; }
.settings-section-title + .setting-row:last-child { border-radius: 12px; }
.setting-row > div:first-child { min-width: 0; }
.setting-row-label { overflow-wrap: anywhere; font-weight: 500; }
.setting-row-sub { max-width: 52ch; line-height: 1.5; }
.setting-inline-actions { flex-wrap: wrap; }
.setting-inline-input { max-width: 100%; }
.settings-footnote { color: var(--sub); line-height: 1.6; }
.modal:not(.onboarding-modal) { border-radius: 20px 20px 0 0; }
.modal-title { font-size: 20px; font-weight: 600; }
.modal .fi { min-height: 44px; }
.app-page-skeleton { align-items: stretch; justify-content: flex-start; gap: 16px; padding: 0; }
.app-page-skeleton > div { height: 64px; border-radius: 10px; background: var(--surface-3); animation: app-loading 1.2s ease-in-out infinite alternate; }
.app-page-skeleton > div:first-child { width: 40%; height: 32px; margin-bottom: 16px; }
.app-page-skeleton > span { color: var(--sub); text-align: left; font-size: 12px; }
@keyframes app-loading { to { opacity: .5; } }

@media (max-width: 599px) {
  .ledger-actions { width: 100%; }
  .ledger-action { flex: 1; padding: 10px 8px; }
  .txn-posted { display: none; }
  .txn-row { grid-template-columns: 32px minmax(0, 1fr) 64px 32px; gap: 8px; }
  .txn-del { width: 32px; min-height: 40px; }
  .txn-list--bank-register .txn-row { padding: 12px; }
  .txn-list--bank-register .txn-amount { font-size: 12px; }
  .txn-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .txn-metric { padding: 12px 8px; }
  .txn-metric-value { font-size: 17px; }
  .txn-metric-sub { white-space: normal; }
  .stat-strip-item { padding: 12px 10px; }
  .stat-strip-value { font-size: 17px; white-space: nowrap; }
  .stat-strip-label { font-size: 11px; }
  .investment-balance > span { font-size: 24px; }
  .setting-row:has(.setting-inline-actions) { align-items: flex-start; flex-direction: column; gap: 12px; }
  .setting-row-sub { font-size: 12px; }
  .habits-head-actions { width: 100%; justify-content: space-between; }
}

@media (pointer: coarse) {
  .u-av, .sync-control, #app .btn, .ledger-action, .habit-icon-btn, .habit-edit-toggle, .modal .btn { min-height: 44px; }
  .u-av, .sync-control, .habit-icon-btn, .habit-edit-toggle { min-width: 44px; }
  .habits-month-nav { grid-template-columns: 44px minmax(104px, auto) 44px; }
}

@media (min-width: 760px) {
  .app-body { padding: 28px 32px; }
  .page-heading { margin-bottom: 28px; }
  .page-heading h1 { font-size: 28px; }
  .txn-list--bank-register .txn-day-header { flex-direction: row; align-items: center; justify-content: space-between; }
  .txn-list--bank-register .txn-day-summary { justify-content: flex-end; }
  .ledger-action { padding-right: 14px; padding-left: 14px; }
}

@media (min-width: 980px) {
  body[data-route='app'] #app {
    grid-template-columns: 232px minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas: 'header content' 'navigation content';
    background: var(--surface);
  }
  .topbar { height: auto; overflow: visible; padding: 20px 16px 0; border-right: 1px solid var(--ui-divider); border-bottom: 0; background: var(--bg); }
  .topbar-row1 { padding-bottom: 24px; }
  .topbar-brand { gap: 6px; font-size: 20px; }
  .app-brand-mark { width: 28px; height: 28px; }
  .topbar-user { gap: 0; }
  .u-av, .sync-control { width: 32px; height: 32px; }
  .balance-hero { display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 16px 4px 24px; border-bottom: 1px solid var(--ui-divider); }
  .balance-kicker { font-size: 11px; }
  .balance-amount { margin-top: 10px; font-size: 38px; }
  .balance-amount .currency { margin-left: 6px; font-size: 13px; }
  .balance-meta { display: flex; gap: 8px; margin-top: 12px; }
  .balance-meta-item { justify-content: flex-start; font-size: 10px; }
  .balance-drain { height: 4px; margin-top: 14px; }
  .tab-nav { justify-content: flex-start; min-height: 0; overflow-y: auto; gap: 4px; padding: 20px 12px; border-top: 0; border-right: 1px solid var(--ui-divider); background: var(--bg); }
  .tab-btn { flex: 0 0 auto; min-height: 44px; padding: 0 12px; gap: 12px; font-size: 13px; }
  .tab-btn svg { width: 18px; height: 18px; }
  .app-body { padding: 36px; }
  .tab-page.active, #tab-account.active { max-width: 1100px; margin: 0 auto; padding-bottom: 24px; }
  .invest-wrap, .stats-wrap, .habits-wrap { max-width: none; }
  .settings-wrap { max-width: 780px; margin: 0; }
  .txn-row, .txn-column-labels { grid-template-columns: 60px 32px minmax(120px, 1fr) 68px 74px 64px 36px 24px; gap: 10px; }
  .txn-column-labels { display: grid; padding: 10px 16px; border-bottom: 1px solid var(--ui-divider); color: var(--sub); font-size: 10px; }
  .txn-column-labels > span:nth-child(n+4) { text-align: right; font-family: var(--sans); font-size: 10px; }
  .txn-list--bank-register .txn-row { padding: 14px 16px; }
  .txn-list--bank-register .txn-posted { font-size: 11px; }
  .txn-summary { margin-bottom: 28px; }
  .txn-metric { padding: 16px 20px; }
  .txn-metric-value { font-size: 22px; }
  .week-planner { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .week-day-col { min-width: 0; }
  .stats-ledger-grid { grid-template-columns: minmax(0, 1.25fr) minmax(240px, .75fr); }
  .modal:not(.onboarding-modal) { border-radius: 16px; }
  .modal:not(.onboarding-modal) .modal-handle { display: none; }
}

@media (min-width: 980px) and (max-width: 1159px) {
  .txn-duration, .txn-balance { display: none; }
  .txn-row, .txn-column-labels { grid-template-columns: 60px 32px minmax(0, 1fr) 74px 36px 24px; }
  .stats-ledger-grid { grid-template-columns: minmax(0, 1fr); }
}

body[data-density='compact'] .txn-list--bank-register .txn-row { min-height: 48px; padding-top: 8px; padding-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
  .app-page-skeleton > div { animation: none; }
  .txn-list--bank-register details > .txn-day-header::after { transition: none; }
}