/* Theme, part 3: Balances, Ask steps and proposals, the transaction sheet, Ask from every screen. Loaded in order by index.html; later parts override earlier ones. */
/* ---- Balances tab ------------------------------------------------------------------------------------------------ */
.bal-controls { display: grid; gap: .75rem; }
.bal-table td.est, .bal-table td.partial { font-style: italic; }
.bal-table td.est { color: var(--text-secondary); }
.bal-table td.strong { font-weight: 600; }
.bal-table .sticky-col { position: sticky; left: 0; z-index: 1; background: var(--surface-raised); text-align: left; white-space: nowrap; font-weight: 600; }
@media (hover: hover) { .bal-table tbody tr:hover .sticky-col { background: var(--surface-hover); } }
.bal-table th.num { white-space: normal; min-width: 7.5rem; }
/* touch: every control in the Balances tab is at least 44px tall */
@media (max-width: 700px), (pointer: coarse) {
  .bal-controls ui-picker, .bal-controls input[type=month], .bal-controls .inline, #balances-body details > summary { min-height: 44px; }
  #balances-body .chart .link, .bal-controls label.inline { display: inline-flex; align-items: center; }
  .bal-controls input[type=checkbox] { width: 22px; height: 22px; }
  #balances-body .chart .link { min-height: 44px; }
  #balances-body td ui-picker { height: auto; min-height: 44px; }
}
.bal-controls { margin-bottom: .75rem; }

/* ---- Ask: steps, proposals (manual mode), follow-up questions --------------------------------------------------------- */
.steps-log { margin: 0 0 .75rem; font-size: .9rem; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); padding: .4rem .7rem; background: var(--surface-sunken); }
.steps-log summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; display: flex; align-items: center; gap: .4rem; }
.steps-log ol { margin: .5rem 0 .2rem; padding-left: 1.2rem; display: grid; gap: .25rem; }
.step-sum { color: var(--text-primary); }
.proposal { margin: .75rem 0; padding: .9rem 1rem; border: 1px solid var(--border-accent); border-radius: var(--radius-md); background: color-mix(in srgb, var(--clay-500) 8%, var(--surface-raised)); display: grid; gap: .6rem; animation: ns-scale-in var(--duration-base) var(--ease-out) backwards; }
.proposal.applied { border-color: var(--pos-text); background: color-mix(in srgb, var(--pos-text) 10%, transparent); }
.proposal.cancelled { border-color: var(--border-default); background: var(--surface-sunken); }
.proposal-head { display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap; }
.proposal-head .badge { margin-left: 0; }
.proposal-merchants { display: grid; gap: .15rem; }
.proposal-merchants .radio { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; }
.proposal-actions { display: flex; gap: .6rem; flex-wrap: wrap; }
.proposal table.compact td { padding: .25rem .5rem; font-size: .88rem; }
.question-card { margin: .75rem 0; padding: .8rem 1rem; border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-raised); }
.question-text { margin: 0 0 .5rem; font-weight: 600; }
.question-card .chips { justify-content: flex-start; margin-top: .25rem; }

/* chart data tables scroll sideways inside their card on phones (they are the accessible version of the chart) */
.chart .table-scroll { max-width: 100%; }
.chart-table th { text-align: left; }
.chart-table th:not(:first-child), .chart-table td.num { text-align: right; }
th.num .sorthead { display: flex; justify-content: flex-end; width: 100%; }
.proposal .badge.warn { color: var(--warn-text); }
.proposal.applied .badge { color: var(--pos-text); background: color-mix(in srgb, var(--pos-text) 8%, var(--surface-raised)); border-color: color-mix(in srgb, var(--pos-text) 45%, transparent); }
.proposal .muted { color: var(--text-secondary); }
/* number boxes wide enough to show their placeholder ("Monthly $", "Amount", "Balance $") */
.rule-form input[type=number], .amount-input { width: 8.5rem; }
.place-field { display: grid; gap: .4rem; min-width: 0; }
.place-field input { width: 100%; }
.place-field .place-hint { margin: 0; }
.place-field .place-hint:empty, .place-field .place-chips:empty { display: none; }
.place-chips { justify-content: flex-start; margin: 0; }
.place-chips .chip { max-width: 100%; min-height: 36px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rule-form + .place-field, .place-field + .rule-form { margin-top: .5rem; }
.budget-add .amount-input { width: 9rem; }
td .amount-input { width: 6.5rem; }
.card > table + .rule-form, .card > .table-scroll + .rule-form, .card > .table-scroll + form { margin-top: .9rem; }

/* QA round 3 (safe-area: main content, header, tab bar and sheet each add the side insets themselves) */
main { padding-left: max(1.25rem, env(safe-area-inset-left, 0px)); padding-right: max(1.25rem, env(safe-area-inset-right, 0px)); }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) { main { padding-left: max(.85rem, env(safe-area-inset-left, 0px)); padding-right: max(.85rem, env(safe-area-inset-right, 0px)); } }
.badge.warn { color: color-mix(in srgb, var(--warn-text) 78%, var(--text-primary)); }
.proposal .badge.warn, .proposal.applied .badge { color: color-mix(in srgb, var(--warn-text) 78%, var(--text-primary)); }
.proposal.applied .badge { color: color-mix(in srgb, var(--pos-text) 80%, var(--text-primary)); }
.bal-table th.sticky-col { background: var(--surface-sunken); }
@media (hover: hover) { .bal-table tbody tr:hover .sticky-col { background: color-mix(in srgb, var(--surface-hover) 55%, var(--surface-raised)); } }
#q { min-width: 17rem; }
.tabbar { left: max(.75rem, env(safe-area-inset-left, 0px)); right: max(.75rem, env(safe-area-inset-right, 0px)); } /* the floating bar clears a notch in landscape */
.sheet { padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
header { padding-left: max(1.25rem, env(safe-area-inset-left, 0px)); padding-right: max(1.25rem, env(safe-area-inset-right, 0px)); }
.retry-box { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* ---- transaction details: a slide-up sheet (rounded top, one card per job) -------------------------------------- */
@keyframes ns-sheet-up { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }
.drawer-backdrop { position: fixed; inset: 0; z-index: 39; background: rgba(15, 17, 11, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: ns-fade-in var(--duration-fast) linear backwards; }
.drawer { position: fixed; top: auto; right: 0; bottom: 0; left: 0; margin: 0 auto; width: min(58rem, 100%); max-height: min(92vh, 64rem); max-height: min(92dvh, 64rem); padding: 0; overflow-y: auto; overscroll-behavior: contain; z-index: 40;
  background: var(--surface-base); border: 1px solid var(--border-default); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-xl); animation: ns-sheet-up var(--duration-slow) var(--ease-out) backwards; }
.sheet-close { display: inline-flex; align-items: center; gap: .4rem; min-height: var(--touch-min); padding: 0 1rem; font-weight: 600; font-size: 1rem; flex: none; }
.drawer-amount { margin: .1rem 0 .4rem; font-family: var(--font-display); font-size: 2.6rem; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: lining-nums tabular-nums; }
.sheet-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.sheet-chips .badge { margin: 0; font-size: .85rem; padding: .25rem .7rem; }
.sheet-desc { margin: .6rem 0 0; color: var(--text-secondary); font-size: .95rem; overflow-wrap: anywhere; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1.1rem 1.5rem calc(2rem + var(--safe-bottom)); align-items: start; }
.dcard { display: grid; gap: .65rem; align-content: start; min-width: 0; padding: 1.15rem 1.25rem; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--inset-top); }
.dcard.wide { grid-column: 1 / -1; }
.drawer .dcard h3 { display: flex; align-items: center; gap: .5rem; margin: 0; font: 600 1.1rem/1.3 var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-primary); }
.drawer .dcard h3 .icon { color: var(--text-accent); }
.drawer .dcard p { margin: 0; }
.drawer .dcard input[type=text], .drawer .dcard ui-picker, .drawer .dcard textarea { width: 100%; margin: 0; min-height: 44px; font-size: 1rem; }
.drawer .dcard ui-picker { max-width: none; }
.filter-panel ui-picker { max-width: 18rem; } /* desktop filter row: a long account name does not stretch its filter */
.drawer .dcard .radio { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: 1rem; line-height: 1.45; color: var(--text-primary); }
.drawer .dcard .radio input { flex: none; margin-top: .15rem; }
.drawer .dcard button.primary { justify-self: start; min-height: 44px; margin: 0; }
.drawer .dcard button, .drawer .dcard .link { font-size: 1rem; }
.drawer .history { margin: 0; padding-left: 1.1rem; font-size: .95rem; display: grid; gap: .3rem; }
.drawer summary { font-size: 1rem; font-weight: 600; }
@media (max-width: 760px) {
  .drawer { width: 100%; max-height: 94vh; max-height: 94dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .drawer-amount { font-size: 2.2rem; }
  .sheet-grid { grid-template-columns: minmax(0, 1fr); padding: .9rem 1rem calc(2rem + var(--safe-bottom)); gap: .8rem; }
}
.drawer .dcard .link { justify-self: start; }
.drawer .dcard .muted.small, .drawer .dcard > p:not(.muted) { text-align: left; }
.drawer .dcard > p { text-align: left; }

/* ---- Ask from every screen: floating button + slide-up sheet --------------------------------------------------------- */
.ask-fab { position: fixed; right: max(1.25rem, env(safe-area-inset-right, 0px)); bottom: calc(1.25rem + var(--safe-bottom)); z-index: 30; display: inline-flex; align-items: center; gap: .5rem; min-height: 52px; padding: 0 1.3rem; border-radius: var(--radius-pill); border: 1px solid transparent; background: var(--clay-500); color: var(--text-on-accent); font-weight: 700; font-size: 1.02rem; box-shadow: var(--glow-accent), var(--shadow-lg); transition: background var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out); }
@media (hover: hover) { .ask-fab:hover:not(:disabled) { background: var(--clay-400); border-color: transparent; } }
.ask-fab[hidden] { display: none; }
.ask-fab.tucked:not(:focus-visible) { transform: translateY(calc(100% + 2rem)); opacity: 0; pointer-events: none; } /* askdock.js: hidden while scrolling down */
.ask-backdrop { z-index: 44; }
.ask-sheet { position: fixed; left: 0; right: 0; bottom: 0; margin: 0 auto; width: 90vw; height: 100vh; height: 100dvh; /* the Ask popup: 90% of the window wide, its full height (Dean, 2026-10-04) */ z-index: 45; display: flex; flex-direction: column; background: var(--surface-base); border: 1px solid var(--border-default); border-bottom: 0; border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-xl); animation: ns-sheet-up var(--duration-slow) var(--ease-out) backwards; }
.ask-sheet[hidden], .ask-backdrop[hidden] { display: none; }
.ask-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .9rem 1.25rem .8rem; border-bottom: 1px solid var(--border-default); flex: none; }
.ask-sheet-title { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.ask-sheet-title h2 { margin: 0; font-size: 1.5rem; }
.ask-sheet-title .badge { margin: 0; font-size: .85rem; padding: .25rem .7rem; white-space: nowrap; }
.ask-sheet-actions { display: flex; align-items: center; gap: .5rem; }
.ask-sheet-actions .link { min-height: var(--touch-min); display: inline-flex; align-items: center; font-size: 1rem; }
.ask-sheet-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: .75rem 1.25rem calc(1rem + var(--safe-bottom)); }
.ask-sheet-body #ask-app { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ask-sheet-body .transcript { flex: 1 1 auto; max-height: none; min-height: 0; overflow-y: auto; }
.ask-sheet-body .ask-form { flex: none; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .ask-fab { display: none; }
  .ask-sheet { width: 100%; height: 92vh; height: 92dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
  .ask-sheet-head { padding: .75rem 1rem; }
  .ask-sheet-body { padding: .6rem 1rem calc(.8rem + var(--safe-bottom)); }
}