/* Theme, part 8: sizing after Rocket Money, wrapping text, motion, Ask report, timeline and cards, Insights, the phone Ledger list, the answer shape. Loaded in order by index.html; later parts override earlier ones. */
/* ---- sizing after Rocket Money (Dean, 2026-10-16) ------------------------------------------------------------------------
   Measured on its phone screens at the same width: names and amounts 18px, the line under them 16px, rows about 80px, amounts
   in the text face. Phones get that on the summary screens and in the Ledger list; touch tablets get a larger Ledger table. The
   desktop table stays dense. */
@media (max-width: 700px) {
  .sx-row { min-height: 72px; padding: .85rem 1.25rem; }
  .sx-row-label { font-size: 1.125rem; }
  .sx-row-sub { font-size: 1rem; }
  .sx-row-value { font-size: 1.125rem; }
  .sx-label h2 { font-size: .875rem; }
  .sx-hero-label { font-size: 1.0625rem; }
  .sx-cat-sub, .sx-total { font-size: 1.0625rem; }
  .tx-summary { font-size: .9375rem; }
  :is(#txns, .group-table) tr[data-id] { min-height: 76px; padding: .7rem 1.1rem; row-gap: .2rem; column-gap: 1rem; }
  :is(#txns, .group-table) .merchant { font-size: 1.125rem; font-weight: 500; }
  :is(#txns, .group-table) .meta-m { font-size: .9375rem; }
  :is(#txns, .group-table) .col-amount { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; letter-spacing: 0; }
  :is(#txns, .group-table) tr.pending .merchant { font-style: normal; }
  :is(#txns, .group-table) .badges .badge { font-size: .8125rem; }
  .tx-groups summary > .muted, .tx-groups summary > .num.pos { font-size: .9375rem; }
}
@media (pointer: coarse) and (min-width: 701px) {
  :root { --table-font: 1rem; --row-pad-y: .45rem; --row-pad-x: .75rem; }
  td .num, td.num { font-size: .95rem; }
}

/* A reader (worker/src/roles.js): no edit controls, and one line saying why. */
.reader-note { display: none; }
body.reader .reader-note { display: block; margin: .5rem 0 0; padding: .5rem .75rem; border-radius: var(--radius-md); background: var(--surface-sunken); border: 1px solid var(--line); color: var(--muted); font-size: .9rem; }
body.reader [data-write] { display: none !important; }

/* ---- text that wraps instead of being cut (Dean, 2026-10-22: "Almost everything is getting truncated"). Names and the line
   under them take up to two lines, a long unbroken bank string may break anywhere, and only a third line is cut; the
   row's title attribute and the tap-to-explain sheet hold the whole text. */
.sx-row-label, .sx-row-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; line-height: 1.3; }
.sx-row-value { white-space: nowrap; }
@media (max-width: 760px) {
  .tile-label, .tile-sub { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
  :is(#txns, .group-table) .merchant { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
}

/* Home's cards keep their own height: Spend vs income no longer stretches to the category card beside it. */
#dashboard .grid2 { align-items: start; }

/* A list inside a narrow card (the review card three across): the name gets the row's width on one line, without the
   avatar and chevron, so a bank string is never split mid-word; the row's title holds the whole name. */
.sx-hero-chart > .sx-rows { container-type: inline-size; }
@container (max-width: 26rem) {
  .sx-hero-chart .sx-row { gap: .6rem; }
  .sx-hero-chart .sx-row .sx-avatar, .sx-hero-chart .sx-row .sx-chev { display: none; }
  .sx-hero-chart .sx-row-label { display: block; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
}

/* ---- tap to explain: a figure, what it is and what it means (app/ui.js showExplain) ---- */
.sx-pickable { cursor: pointer; }
.sx-explain-back { position: fixed; inset: 0; z-index: 90; background: color-mix(in srgb, #000 38%, transparent); }
.sx-explain { position: fixed; z-index: 91; left: 0; right: 0; bottom: 0; max-height: 80vh; overflow-y: auto; padding: 1.4rem 1.5rem calc(1.2rem + var(--safe-bottom, 0px)); background: var(--surface-overlay); color: var(--text-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-card); }
@media (min-width: 761px) { .sx-explain { left: 50%; right: auto; bottom: auto; top: 50%; width: min(28rem, calc(100vw - 2rem)); translate: -50% -50%; border-radius: var(--radius-xl); } } /* translate, not transform: the open and close animations move it with transform */
.sx-explain-title { margin: 0; color: var(--text-secondary); font-size: 1rem; }
.sx-explain-value { margin: .2rem 0 .6rem; font-weight: 600; font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.sx-explain-value.neg { color: var(--neg-text); } .sx-explain-value.pos { color: var(--pos-text); }
.sx-explain-text { margin: .55rem 0 0; font-size: 1rem; line-height: 1.45; overflow-wrap: anywhere; }
.sx-explain-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.sx-explain-actions button { min-height: 44px; flex: 1 1 8rem; }

/* ---- motion, second pass (2026-10-23): sheets leave as they came, nothing sticks after a tap, refreshes do not flash ---- */
/* tap-to-explain opens like the other sheets: up from the bottom on phones, scaled in at the middle on wide screens */
.sx-explain-back { animation: ns-fade-in var(--duration-fast) linear backwards; }
.sx-explain { box-shadow: var(--shadow-xl); animation: ns-sheet-up var(--duration-slow) var(--ease-out) backwards; overscroll-behavior: contain; }
@media (min-width: 761px) { .sx-explain { animation-name: ns-scale-in; animation-duration: var(--duration-base); } }

/* closing (dom.js leave): the sheet drops away and its backdrop fades, then it is hidden or removed */
@keyframes ns-sheet-down { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(36px); } }
@keyframes ns-scale-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(.97); } }
.leaving { pointer-events: none; }
.drawer.leaving, .ask-sheet.leaving, .fsheet.leaving:not([hidden]), .sheet.leaving, .sx-explain.leaving, #extras-panel.as-sheet.leaving > .card,
.picker-pop.as-sheet.leaving .picker-panel, .icon-pop.sheet-mode.leaving { animation: ns-sheet-down var(--duration-exit) var(--ease-exit) forwards; }
.drawer-backdrop.leaving, .sheet-backdrop.leaving, .sx-explain-back.leaving, .picker-pop.as-sheet.leaving, #extras-panel.as-sheet.leaving:not([hidden]) { animation: ns-fade-out var(--duration-exit) linear forwards; }
.picker-pop.leaving:not(.as-sheet) .picker-panel, .icon-pop.leaving:not(.sheet-mode) { animation: ns-scale-out var(--duration-fast) var(--ease-exit) forwards; }
@media (min-width: 761px) { .sx-explain.leaving { animation: ns-scale-out var(--duration-fast) var(--ease-exit) forwards; } }

/* rows that open a panel: the chevron turns and the panel eases in */
.sx-chev { transition: transform var(--duration-base) var(--ease-out); }
.sx-panel { animation: ns-fade-in-up var(--duration-base) var(--ease-out) backwards; }

/* touch: a press shows at once (hover rules apply only where there is hover), and no browser tap flash on top of it */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  :where(button:not(.link, .primary, .ask-fab, :disabled)):active { background: var(--surface-hover); }
  button.primary:active:not(:disabled), .ask-fab:active { background: var(--clay-600); }
  .sx-pairs button:active:not(.on), .sx-mbars button:active, button.sx-cal-day:active, .sx-seg button:active:not(.on), .sx-outline:active,
  .sx-expand:active, .sx-back:active, .sx-hero-body:active, label.sx-row:active, .sheet .sheet-list button:active, .tile-button:active { background: var(--surface-hover); }
}

/* waiting on an answer: a tapped Ledger row while its details load, a Spending period while its figures load */
tr[data-id] td { transition: opacity var(--duration-base) var(--ease-out); }
tr[data-id][aria-busy="true"] td { opacity: .55; }
#spending-body[aria-busy="true"] :is(.sx-pairs, .sx-rows, .sx-card, .sx-total) { opacity: .55; transition: opacity var(--duration-base) var(--ease-out); }

/* a refresh (an Ask change, a new period) redraws the detail cards in place; only the first drawing slides them in */
#dashboard-body.drawn :is(.card, .tiles > .tile) { animation: none; }
@media (prefers-reduced-motion: reduce) { .sx-chev, tr[data-id] td { transition: none; } }

/* iOS Safari zooms the page on focus of a field under 16px; the phone root is 14px, so fields keep 16px there */
@supports (-webkit-touch-callout: none) {
  @media (max-width: 700px), (pointer: coarse) and (max-height: 500px) { input, textarea, select { font-size: max(1rem, 16px) !important; } }
}

/* ---- Ask: a result drawn from its data (app/ask_report.js, from the SKIMS Catalog's answer block, 2026-10-24) ---- */
.ask-report { margin: .25rem 0 .75rem; }
.ask-report-title { margin: 0 0 .5rem; font: 600 1rem/1.35 var(--font-sans); color: var(--text-primary); }
.ask-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .5rem; margin: 0 0 .75rem; }
.ask-tile { margin: 0; display: flex; }
.ask-tile > .ask-tile-btn, .ask-tile:not(:has(> button)) { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: .15rem; min-width: 0; padding: .6rem .75rem; text-align: left; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-card); color: var(--text-primary); font-weight: 400; }
.ask-tile-v { font: 600 1.25rem/1.2 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); overflow-wrap: anywhere; }
.ask-tile-l { font-size: .8rem; color: var(--text-muted); }
.ask-tile-sep { display: none; } /* kept in the text: figure links find a headline by "Label:" */
@media (hover: hover) { .ask-tile-btn:hover { background: var(--surface-hover); border-color: var(--border-default); } }
.ask-tile-btn:active { transform: scale(.98); }
.ask-tile.fig-source > *, p.ask-tile.fig-source { background: var(--surface-accent-soft); }
.ask-facts { margin: 0 0 .75rem; padding-left: 1.1rem; font-size: .92rem; color: var(--text-secondary); }
.ask-facts li + li { margin-top: .2rem; }
.ask-table-wrap { margin: .5rem 0; }
.ask-table-bar { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; }
.ask-filter { flex: 1 1 auto; max-width: 18rem; display: flex; align-items: center; gap: .4rem; padding: 0 .6rem; background: var(--surface-sunken); border: 1px solid var(--border-control); border-radius: var(--radius-sm); color: var(--text-muted); }
.ask-filter:focus-within { border-color: var(--text-accent); box-shadow: var(--ring); }
.ask-filter .icon { flex: none; width: 1rem; height: 1rem; }
.ask-filter .ask-filter-in, :root .ask-filter .ask-filter-in { flex: 1; min-width: 0; padding: .3rem 0; border: 0; background: transparent; box-shadow: none; }
.ask-copy { flex: none; }
.ask-table.md-table { width: fit-content; max-width: 100%; max-height: 26rem; overflow: auto; margin: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); }
.ask-table table { border-collapse: separate; border-spacing: 0; font-size: .875rem; }
.ask-table caption { caption-side: bottom; padding: .35rem .75rem; text-align: left; font-size: .78rem; color: var(--text-muted); }
.ask-table th { position: sticky; top: 0; z-index: 1; padding: 0; background: var(--surface-sunken); border-bottom: 1px solid var(--border-default); }
.ask-table td { padding: .3rem .75rem; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
.ask-table tbody tr:last-child td { border-bottom: 0; }
.ask-sort { display: flex; align-items: center; gap: .25rem; width: 100%; min-height: 0; padding: .45rem .75rem; border: 0; border-radius: 0; background: transparent; color: var(--text-muted); font: 600 .6875rem/1.3 var(--font-sans); letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; justify-content: flex-start; }
th.num .ask-sort { justify-content: flex-end; }
.ask-sort .icon { width: .8rem; height: .8rem; opacity: 0; transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out); }
th[aria-sort] .ask-sort { color: var(--text-primary); }
th[aria-sort] .ask-sort .icon { opacity: 1; }
th[aria-sort="descending"] .ask-sort .icon { transform: rotate(180deg); }
@media (hover: hover) { .ask-sort:hover { background: var(--surface-hover); } .ask-sort:hover .icon { opacity: .5; } th[aria-sort] .ask-sort:hover .icon { opacity: 1; } .ask-table tbody tr:hover td { background: var(--surface-hover); } }
.ask-table td.ask-long { max-width: 22rem; }
.ask-table td.ask-long, .ask-table td.ask-long .ask-row-open { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ask-table button.ask-row-open { min-height: 0; text-align: left; color: var(--text-primary); font-weight: inherit; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); }
.ask-note { margin: .4rem 0; }
.ask-query { margin: .5rem 0 0; font-size: .85rem; }
.ask-query > summary { display: inline-flex; align-items: center; gap: .35rem; min-height: 0; color: var(--text-accent); cursor: pointer; list-style: none; }
.ask-query > summary::-webkit-details-marker { display: none; }
.ask-query > summary .icon { width: 1rem; height: 1rem; }
.ask-query pre { margin: .4rem 0; padding: .6rem .75rem; max-height: 16rem; overflow: auto; background: var(--surface-sunken); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); font-size: .78rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .ask-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ask-table.md-table { width: 100%; max-height: none; padding: 0 .75rem; }
  .ask-table table.stack caption { display: block; padding: .4rem 0 0; order: 9; }
  .ask-sort { min-height: var(--touch-min); }
  .ask-query > summary { min-height: var(--touch-min); }
}

/* ---- Ask: the turn's timeline (app/ask_phases.js; the SKIMS Catalog's step clocks, 2026-10-24) ---- */
.steps-log.timeline ol { list-style: none; margin: .35rem 0 .15rem; padding: 0; display: grid; gap: .3rem; }
.steps-log.timeline li { display: grid; grid-template-columns: .9rem minmax(0, 1fr) auto; align-items: baseline; column-gap: .5rem; }
.steps-log.timeline .step-mark { width: .5rem; height: .5rem; margin-left: .15rem; border-radius: 50%; background: var(--pos-text); align-self: center; }
.steps-log.timeline li.running .step-mark { background: var(--text-accent); animation: ns-pulse 1.2s var(--ease-soft) infinite; }
.steps-log.timeline .step-text { min-width: 0; display: flex; flex-direction: column; }
.steps-log.timeline .step-sub { overflow-wrap: anywhere; }
.steps-log.timeline .step-ms { font: 500 .75rem/1.3 var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-muted); white-space: nowrap; }
.steps-log.timeline li.running .step-ms { color: var(--text-accent); }
@keyframes ns-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.75); } }
@media (prefers-reduced-motion: reduce) { .steps-log.timeline li.running .step-mark { animation: none; } }

/* ---- Ask: an empty conversation's cards (app/ask_cards.js; the SKIMS Catalog's welcome, 2026-10-24) ---- */
.ask-welcome { display: grid; gap: .9rem; }
.ask-welcome .ask-hint { margin: 0; }
.ask-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .75rem; }
.ask-card { text-align: left; display: flex; flex-direction: column; gap: .35rem; padding: .85rem .9rem .6rem; background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.ask-card-title { display: flex; align-items: center; gap: .5rem; margin: 0; font: 600 .95rem/1.3 var(--font-sans); color: var(--text-primary); }
.ask-card-title .icon { flex: none; width: 1.75rem; height: 1.75rem; padding: .35rem; border-radius: var(--radius-sm); background: var(--surface-accent-soft); color: var(--text-accent); box-sizing: border-box; }
.ask-card-line { margin: 0 0 .15rem; }
.ask-card-examples { list-style: none; margin: 0; padding: 0; display: grid; }
.ask-card-examples li + li { border-top: 1px solid var(--border-subtle); }
.ask-example { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; min-height: 40px; padding: .35rem .1rem; border: 0; border-radius: 0; background: transparent; color: var(--text-primary); font-weight: 500; text-align: left; }
.ask-example .icon { flex: none; width: 1rem; height: 1rem; color: var(--text-muted); transition: transform var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out); }
@media (hover: hover) { .ask-example:hover { background: transparent; color: var(--text-accent); } .ask-example:hover .icon { color: var(--text-accent); transform: translate(2px, -2px); } }
.ask-example:active { color: var(--text-accent); }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .ask-cards { grid-template-columns: 1fr; }
  .ask-example { min-height: var(--touch-min); }
}
.ask-wayout { display: flex; flex-wrap: wrap; gap: .5rem; margin: .5rem 0 0; }

/* ---- Find patterns on Spending (app/insights.js; SNAG's Insights, 2026-10-24) ---- */
#spending-insights { margin-top: 1.25rem; }
#spending-insights > .sx-card { padding: 1rem 1.1rem 1.1rem; }
#spending-insights .ins-intro { margin-top: 0; }
#spending-insights[hidden] { display: none; }
.ins-intro { margin: 0 0 .75rem; }
.ins-controls { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .9rem; }
.ins-working { display: flex; align-items: center; gap: .55rem; margin: .25rem 0; color: var(--text-secondary); }
.ins-working .ins-clock { margin-left: auto; color: var(--text-accent); }
.ins-dot { width: .55rem; height: .55rem; border-radius: 50%; background: var(--text-accent); animation: ns-pulse 1.2s var(--ease-soft) infinite; }
@media (prefers-reduced-motion: reduce) { .ins-dot { animation: none; } }
.ins-summary { margin: .25rem 0 .75rem; font-size: 1rem; line-height: 1.5; }
.ins-findings { display: grid; gap: .75rem; margin: .5rem 0; }
.ins-finding { padding: .8rem .9rem; border: 1px solid var(--border-subtle); border-left: 3px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-base); }
.ins-finding.sev-high { border-left-color: var(--neg-text); }
.ins-finding.sev-medium { border-left-color: var(--warn-text); }
.ins-finding.sev-low { border-left-color: var(--pos-text); }
.ins-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .6rem; }
.ins-title { margin: 0; font: 600 1rem/1.35 var(--font-sans); }
.ins-sev { flex: none; padding: .05rem .5rem; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 600; letter-spacing: .02em; background: var(--surface-sunken); color: var(--text-secondary); }
.ins-sev.sev-high { color: var(--neg-text); background: color-mix(in srgb, var(--neg-text) 12%, transparent); }
.ins-sev.sev-medium { color: var(--warn-text); background: color-mix(in srgb, var(--warn-text) 12%, transparent); }
.ins-sev.sev-low { color: var(--pos-text); background: color-mix(in srgb, var(--pos-text) 12%, transparent); }
.ins-bullets { margin: .45rem 0; padding-left: 1.1rem; font-size: .92rem; }
.ins-bullets li + li { margin-top: .2rem; }
.ins-bars { display: grid; gap: .25rem; margin: .5rem 0; }
.ins-bar { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; font-size: .8rem; }
.ins-bar-m { color: var(--text-muted); }
.ins-bar-track { height: .5rem; border-radius: var(--radius-pill); background: var(--surface-sunken); overflow: hidden; }
.ins-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--text-accent); }
.ins-cited { margin: .5rem 0 0; }
.ins-cited > p { margin: 0 0 .3rem; }
.ins-rows { display: grid; gap: .1rem; }
.ins-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: .6rem; width: 100%; min-height: 36px; padding: .25rem .4rem; border: 0; border-radius: var(--radius-xs); background: transparent; color: var(--text-primary); font-weight: 500; text-align: left; }
.ins-row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-row-meta { font-size: .78rem; font-weight: 400; }
@media (hover: hover) { .ins-row:hover { background: var(--surface-hover); } }
.ins-more { justify-self: start; margin: .2rem .4rem; }
.ins-next { margin: .55rem 0 0; font-size: .9rem; }
.ins-gaps h3 { margin: .75rem 0 .3rem; font-size: .9rem; }
.ins-gaps ul { margin: 0; padding-left: 1.1rem; font-size: .9rem; color: var(--text-secondary); }
.ins-foot { margin: .75rem 0 0; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .ins-row { min-height: var(--touch-min); grid-template-columns: minmax(0, 1fr) auto; }
  .ins-row-meta { grid-row: 2; }
  .ins-controls > .primary { flex: 1 1 100%; }
}
.ins-bars { max-width: 34rem; }
.ins-rows { max-width: 40rem; }
.ins-gaps h3 { font-family: var(--font-sans); font-weight: 600; }

/* ---- Ledger list on phones, after Rocket Money's (Dean, 2026-10-27): a date header over each day with what it spent, the
   category's icon in a circle, the name over one quiet line of words, the amount centred on the right. The pills stay on the
   desktop table; on phones the states that change a row's counting are words on line 2 and the rest are in its details. */
.tx-ico, #txns tr.day-head { display: none; }
@media (max-width: 900px), (pointer: coarse) and (max-height: 500px) {
  :is(#txns, .group-table) tr[data-id] { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "ico name amount" "ico meta amount"; }
  :is(#txns, .group-table) .tx-ico { grid-area: ico; display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--surface-accent-soft); color: var(--text-accent); }
  :is(#txns, .group-table) .tx-ico .cat-icon { width: 1.25rem; height: 1.25rem; color: inherit; }
  :is(#txns, .group-table) .tx-ico.none { background: color-mix(in srgb, var(--warn-text) 14%, transparent); color: var(--warn-text); }
  :is(#txns, .group-table) tr.ignored .tx-ico { background: var(--surface-sunken); color: var(--text-muted); }
  :is(#txns, .group-table) .badges { display: none; }
  :is(#txns, .group-table) :is(.meta-m, .meta-cat) { font-weight: 400; color: var(--text-secondary); }
  :is(#txns, .group-table) .meta-cat.none { color: var(--warn-text); }
  /* spend in the text color, money in green, a transfer (between the person's own accounts) neither */
  :is(#txns, .group-table) .col-amount { align-self: center; color: var(--text-primary); }
  :is(#txns, .group-table) tr:not(.xfer) .col-amount.pos { color: var(--pos-text); }
  .select-mode :is(#txns, .group-table) tr[data-id] { grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-areas: "sel name amount" "sel meta amount"; }
  .select-mode :is(#txns, .group-table) .tx-ico { display: none; }
  #txns tbody tr.day-head { display: block; }
  #txns tbody tr.day-head td { display: flex; justify-content: space-between; align-items: baseline; gap: .75rem; padding: .5rem 1.1rem; text-align: left; background: var(--surface-sunken); border-bottom: 1px solid var(--border-subtle); font-size: .8125rem; color: var(--text-secondary); }
  #txns tbody tr.day-head .day-name { font-weight: 600; color: var(--text-primary); }
  #txns tbody tr.day-head .day-total { white-space: nowrap; font-variant-numeric: tabular-nums; }
}
@media (max-width: 700px) {
  :is(#txns, .group-table) tr[data-id] { min-height: 72px; column-gap: .85rem; }
  #txns tbody tr.day-head td { font-size: .875rem; }
}

/* ---- the assistant's answer (worker/src/answer_shape.js): its first sentence leads, the facts behind it are a tight list */
.ask-said > p:first-child { font-size: 1.0625rem; font-weight: 500; line-height: 1.45; color: var(--text-primary); margin: .25rem 0 .4rem; }
.ask-said > ul { margin: .25rem 0 .25rem; padding-left: 1.15rem; }
.ask-said > ul > li { margin: .2rem 0; line-height: 1.45; }
.ask-said > ul > li::marker { color: var(--text-muted); }

/* Ask's chart tooltips (app/askchart.js builds them as elements; the container's colors come from the chart's theme) */
.ask-tip-title { font-weight: 600; margin-bottom: .2rem; }
.ask-tip-row { display: flex; justify-content: space-between; gap: .75rem; font-variant-numeric: tabular-nums; }
.ask-tip-name { color: var(--text-secondary); }
.ask-tip-value { font-weight: 600; }

/* ---- Loans on Balances (app/loans.js): each loan's transactions and its edit form open in a row under it ---- */
.loan-actions { white-space: nowrap; }
.loan-actions .link + .link, .loan-actions [data-write] .link { margin-left: .7rem; }
tr.loan-panel > td { background: var(--surface-sunken); padding: .8rem 1rem 1rem; white-space: normal; }
.loan-rows details { margin-top: .7rem; }
.loan-rows .rule-form, .loan-edit .rule-form { margin-top: .7rem; }
.loan-rows td.muted.small { white-space: nowrap; }
.loan-table { width: 100%; min-width: 38rem; table-layout: fixed; }
.loan-table td:nth-child(1), .loan-table th:nth-child(1) { width: 8.5rem; }
.loan-table td:nth-child(3), .loan-table th:nth-child(3) { width: 8rem; }
.loan-table td:nth-child(4), .loan-table th:nth-child(4) { width: 11rem; }
.loan-table td:nth-child(5), .loan-table th:nth-child(5) { width: 9rem; }
.loan-table td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; } /* names wrap, never cut (Dean, 2026-10-22) */
.loan-rows .rule-form input[type="search"] { flex: 1 1 16rem; }

/* ---- "Why?" on the transaction sheet (app/transactions_sheet.js, worker/src/explain.js) ---- */
.sx-catwrap { align-items: center; gap: .9rem; flex-wrap: wrap; }
.sx-why-link { font-weight: 600; }
.sx-why { margin: .9rem auto 0; max-width: 34rem; padding: .8rem 1rem; border-radius: var(--radius-md); background: var(--surface-sunken); text-align: left; }
.sx-why-list { margin: 0; display: grid; gap: .45rem; font-size: .95rem; line-height: 1.4; }

/* ---- the review queue on the transaction sheet (app/transactions_sheet.js) and the list's "new" badge ---- */
.sx-review-bar { display: flex; align-items: center; justify-content: center; gap: .9rem; flex-wrap: wrap; padding: .6rem 1rem; border-bottom: 1px solid var(--border-default); }
.badge.new { background: color-mix(in srgb, var(--accent, #2a78d6) 14%, transparent); color: var(--text-primary); }

/* ---- a toast with one action (Undo; app/dom.js toast) ---- */
.toast.has-action { gap: .7rem; }
.toast-action { margin-left: auto; padding: .25rem .7rem; border: 0; border-radius: var(--radius-pill); background: transparent; color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) { .toast-action:hover { background: color-mix(in srgb, currentColor 12%, transparent); } }

/* ---- a suggested category on the transaction sheet (worker/src/suggest.js) ---- */
.sx-suggest { margin: .9rem auto 0; max-width: 34rem; padding: .8rem 1rem; border-radius: var(--radius-md); background: var(--surface-sunken); display: grid; gap: .6rem; justify-items: center; text-align: center; }
.sx-suggest p { margin: 0; }
.sx-suggest .badge { margin: 0 .4rem; }
.badge.conf-high { background: color-mix(in srgb, var(--success, #1a7f37) 18%, transparent); }
.sx-suggest-use { width: auto; min-height: 44px; padding: 0 1.4rem; }

/* ---- several proposed changes on one Ask card (app/ask_render.js batchCard) ---- */
.proposal-batch { margin: .5rem 0; display: grid; gap: .45rem; }
.proposal-batch li.done { color: var(--text-secondary); }
.proposal-batch p { margin: .15rem 0 0 1.7rem; }

/* ---- comments and suggested categories on the transaction sheet (app/talk.js) ---- */
.sx-talk { display: grid; gap: .55rem; }
.sx-talk h3 { margin: .4rem 0 0; font-size: 1rem; }
.sx-talk textarea { width: 100%; }
.talk-comments, .talk-suggestions { display: grid; gap: .6rem; margin: 0; }
.talk-comments p { margin: 0; }
.talk-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.talk-suggestions li { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

/* ---- the merchant page in the transaction sheet (app/merchant.js) ---- */
.sx-merchant-link { font-size: .9rem; }
.mp-bars { display: flex; align-items: flex-end; gap: .35rem; height: 7rem; margin: 1rem auto 0; max-width: 34rem; padding: 0 .4rem; }
.mp-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: .25rem; min-width: 0; }
.mp-bar { --h: 0%; display: block; width: 100%; max-width: 1.8rem; height: max(var(--h), 2px); border-radius: 4px 4px 0 0; background: color-mix(in srgb, var(--text-primary) 55%, transparent); }
.mp-m { font-size: .72rem; color: var(--text-secondary); }
.mp-list { display: grid; gap: .2rem; margin: 0; }
.mp-row { display: grid; grid-template-columns: 7.5rem 1fr auto; gap: .6rem; width: 100%; text-align: left; padding: .45rem 0; text-decoration: none; color: var(--text-primary); }
.mp-tools input { flex: 1 1 12rem; }

/* ---- the first visit's welcome (app/welcome.js) ---- */
.welcome { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 1rem; background: color-mix(in srgb, #000 45%, transparent); }
.welcome-panel { width: min(54rem, 100%); max-height: calc(100dvh - 2rem); overflow: auto; display: grid; gap: 1rem; justify-items: center; padding: 1.4rem; }
.welcome-panel h2 { margin: 0; text-align: center; }
.welcome-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; width: 100%; }
.welcome-card { display: grid; gap: .4rem; align-content: start; padding: 1rem; border-radius: var(--radius-md); background: var(--surface-sunken); }
.welcome-card h3 { margin: 0; font-size: 1.02rem; }
.welcome-card p { margin: 0; }
.welcome-panel .primary { min-width: 10rem; min-height: 48px; }
@media (max-width: 700px) { .welcome-cards { grid-template-columns: 1fr; } }