/* ============================================================================================================
   Summary layout (Dean, 2026-10-14: "get us closer to" Rocket Money, in the NSEA palette). Home, Spending, Recurring and the
   transaction sheet: big rounded cards, a large sans figure, grouped rows (icon, label, value, chevron), uppercase section
   labels, period pills, budget rings. Built by app/ui.js. Dense tables keep their own rules above.
   ============================================================================================================ */
.sx-card { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-card), var(--inset-top); margin-top: 1rem; overflow: hidden; }
.sx-card > .sx-rows { border-radius: 0; border: 0; box-shadow: none; margin: 0; }
.sx-pad { padding: 1.25rem 1.4rem; }
.sx-label { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 1.9rem .35rem .7rem; }
.sx-label h2 { margin: 0; font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-primary); }
.sx-label button.link { font-size: .85rem; }
.sx-title { font-family: var(--font-sans); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.01em; margin: 0 0 .35rem; }
.sx-note { color: var(--text-secondary); font-size: 1rem; line-height: 1.45; margin: 0; }

/* rows */
.sx-rows { background: var(--surface-raised); border: 1px solid var(--border-subtle); border-radius: var(--radius-xl); box-shadow: var(--shadow-card), var(--inset-top); overflow: hidden; margin-top: 1rem; }
.sx-row-wrap + .sx-row-wrap { border-top: 1px solid var(--border-default); }
.sx-row { display: flex; align-items: center; gap: 1rem; width: 100%; min-height: 60px; padding: .8rem 1.3rem; margin: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; color: var(--text-primary); font: inherit; text-align: left; cursor: default; }
button.sx-row, label.sx-row { cursor: pointer; }
@media (hover: hover) { button.sx-row:hover:not(:disabled), label.sx-row:hover { background: var(--surface-hover); border: 0; } }
button.sx-row:active:not(:disabled) { transform: none; background: var(--surface-hover); }
.sx-row-icon { display: inline-flex; color: var(--text-secondary); flex: none; }
.sx-row-icon .icon { width: 1.5rem; height: 1.5rem; stroke-width: 1.7; }
.sx-row-text { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 auto; min-width: 0; }
.sx-row-label { font-size: 1.05rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-row-sub { font-size: .88rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sx-row-value { flex: none; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-row-value.pos { color: var(--pos-text); } .sx-row-value.neg { color: var(--neg-text); } .sx-row-value.muted { color: var(--text-muted); font-weight: 500; }
.sx-chev { display: inline-flex; color: var(--text-secondary); flex: none; margin-right: -.25rem; }
.sx-chev .icon { width: 1.2rem; height: 1.2rem; }
button.sx-row[aria-expanded="true"] .sx-chev { transform: rotate(180deg); }
.sx-panel { padding: .25rem 1.3rem 1.1rem 3.8rem; }
.sx-panel > :first-child { margin-top: 0; }

/* the switch */
input[type=checkbox].sx-switch { appearance: none; -webkit-appearance: none; flex: none; width: 3.1rem; height: 1.8rem; min-height: 0; margin: 0; padding: 0; border-radius: var(--radius-pill); background: var(--surface-hover); border: 1px solid var(--border-control); position: relative; cursor: pointer; transition: background var(--duration-fast) var(--ease-out); }
input[type=checkbox].sx-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--cream-50); box-shadow: var(--shadow-xs); transition: transform var(--duration-base) var(--ease-out); }
input[type=checkbox].sx-switch:checked { background: var(--clay-500); border-color: var(--clay-500); }
input[type=checkbox].sx-switch:checked::after { transform: translateX(1.3rem); }
.sx-switch:disabled { opacity: .6; }

/* name avatars, from the categorical palette */
.sx-avatar { flex: none; display: inline-grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; font-weight: 700; font-size: 1.05rem; color: #fff; background: var(--s1); }
.sx-avatar.s2 { background: var(--s2); } .sx-avatar.s3 { background: var(--s3); } .sx-avatar.s4 { background: var(--s4); } .sx-avatar.s5 { background: var(--s5); }
.sx-avatar.s6 { background: var(--s6); } .sx-avatar.s7 { background: var(--s7); } .sx-avatar.s8 { background: var(--s8); }

/* the big-figure card */
.sx-hero { margin-top: 0; display: flex; flex-direction: column; }
.sx-hero-body { display: block; width: 100%; padding: 1.4rem 1.5rem .6rem; background: transparent; border: 0; border-radius: 0; box-shadow: none; text-align: left; color: inherit; font: inherit; }
@media (hover: hover) { button.sx-hero-body:hover:not(:disabled) { background: transparent; border: 0; } }
.sx-hero-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sx-hero-label { margin: 0; color: var(--text-secondary); font-size: 1rem; }
.sx-hero-value { margin: .2rem 0 0; font-family: var(--font-sans); font-weight: 600; font-size: clamp(2.3rem, 8.5vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; font-variant-numeric: tabular-nums lining-nums; }
.sx-hero-value.neg { color: var(--neg-text); } .sx-hero-value.pos { color: var(--pos-text); }
.sx-hero-aside { display: flex; align-items: center; gap: .6rem; max-width: 11rem; color: var(--text-secondary); font-size: .95rem; line-height: 1.3; margin-top: .4rem; }
.sx-hero-aside-icon { display: inline-flex; flex: none; }
.sx-hero-aside-icon .icon { width: 1.9rem; height: 1.9rem; stroke-width: 1.6; }
.sx-hero-aside.bad .sx-hero-aside-icon { color: var(--warn-text); } .sx-hero-aside.good .sx-hero-aside-icon { color: var(--pos-text); }
.sx-hero-chart { padding: 0 1.5rem .9rem; flex: 1 1 auto; display: flex; flex-direction: column; }
.sx-hero-chart > svg, .sx-hero-chart > .sx-pairs { flex: 1 0 auto; } /* the cards share the tallest one's height: the chart takes the spare room, not an empty block */
.sx-hero-chart svg { display: block; width: 100%; height: 150px; overflow: visible; }
.sx-hero > .sx-rows { margin: auto 0 0; border-top: 1px solid var(--border-default); }

/* the pace chart (drawn as SVG by dashboard.js) */
.sx-pace .before { fill: color-mix(in srgb, var(--s7) 34%, transparent); stroke: none; }
.sx-pace .now { fill: none; stroke: var(--clay-400); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sx-pace .dot { fill: var(--cream-50); stroke: var(--clay-400); stroke-width: 3; }
.sx-pace .budget { stroke: var(--text-muted); stroke-width: 1.5; stroke-dasharray: 6 6; }
.sx-pace .axis { stroke: var(--border-strong); stroke-width: 1; }
.sx-pace text { fill: var(--text-secondary); font: 600 11px var(--font-sans); letter-spacing: .12em; }

/* the carousel: one card per screen width on phones, three across on wide screens */
.sx-carousel-wrap { margin-top: .9rem; }
.sx-carousel { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; align-items: stretch; } /* three or four across */
.sx-dots { display: none; }
@media (max-width: 900px) {
  .sx-carousel { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; gap: .75rem; margin: 0 calc(-1 * var(--page-x)); padding: 0 var(--page-x); scroll-padding: 0 var(--page-x); }
  .sx-carousel::-webkit-scrollbar { display: none; }
  .sx-carousel > * { flex: 0 0 calc(100% - .25rem); scroll-snap-align: center; }
  .sx-dots { display: flex; justify-content: center; gap: .6rem; margin: 1rem 0 .25rem; }
  .sx-dots span { width: .55rem; height: .55rem; border-radius: 50%; background: var(--border-strong); transition: background var(--duration-fast) var(--ease-out); }
  .sx-dots span.on { background: var(--text-primary); }
}

/* period pills */
.sx-seg { display: flex; justify-content: center; gap: .45rem; flex-wrap: nowrap; margin: .5rem 0 1rem; }
.sx-seg button { min-height: 44px; padding: .4rem clamp(.8rem, 3.5vw, 1.25rem); border-radius: var(--radius-pill); background: var(--surface-raised); border: 1px solid var(--border-subtle); color: var(--text-primary); font-weight: 500; font-size: 1rem; box-shadow: none; }
.sx-seg button.on { background: var(--text-primary); color: var(--surface-base); border-color: var(--text-primary); }
@media (hover: hover) { .sx-seg button:hover:not(:disabled):not(.on) { background: var(--surface-hover); } }

/* budget rings */
.sx-ringset { display: grid; grid-template-columns: repeat(3, 3.6rem); gap: .7rem; flex: none; }
.sx-ring { position: relative; display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; padding: 0; min-height: 0; border: 0; background: transparent; box-shadow: none; border-radius: 50%; color: var(--text-secondary); }
@media (hover: hover) { button.sx-ring:hover:not(:disabled) { background: transparent; border: 0; } }
.sx-ring-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sx-ring-svg .track { fill: none; stroke: var(--border-default); stroke-width: 4; }
.sx-ring-svg .fill { fill: none; stroke: var(--s1); stroke-width: 4; stroke-linecap: round; }
.sx-ring.ok .fill { stroke: var(--pos-text); } .sx-ring.warn .fill { stroke: var(--warn-text); } .sx-ring.over .fill { stroke: var(--neg-text); }
.sx-ring-icon .icon { width: 1.35rem; height: 1.35rem; }
.sx-ring-badge { position: absolute; top: -.2rem; right: -.2rem; width: 1.25rem; height: 1.25rem; border-radius: 50%; display: grid; place-items: center; font-size: .78rem; font-weight: 800; color: #fff; background: var(--warning); border: 2px solid var(--surface-raised); }
.sx-ring-badge.ok { background: var(--success); } .sx-ring-badge.over { background: var(--danger); }
.sx-ring-badge .icon { width: .75rem; height: .75rem; stroke-width: 3.5; }

/* a plain progress bar */
.sx-bar { height: .55rem; border-radius: var(--radius-pill); background: var(--border-default); overflow: hidden; margin-top: .8rem; }
.sx-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--s1); }
.sx-bar.over > span { background: var(--neg-text); }

/* screens' own titles on phones (Spending, Recurring), centered like the reference */
.sx-screen-title { text-align: center; font-family: var(--font-sans); font-weight: 600; font-size: 1.4rem; margin: .4rem 0 .2rem; }
@media (min-width: 701px) { .sx-screen-title { text-align: left; } }

@media (prefers-reduced-motion: reduce) { .sx-switch, .sx-switch::after, .sx-dots span { transition: none; } }

/* Spending: the period strip (an income bar and a spend bar per period), its legend, the budget card */
/* Income and spend bar pairs (app/ui.js pairBars): the Spending strip ('strip'), the Home income card ('mini') and the
   dashboard's Spend vs income ('wide'). Each bar is a slot as tall as the plot; its fill stands on the zero line (--zero, from
   the bottom) and is --h long, or hangs from it for a spend below zero (.below), with the line drawn when one does. */
.sx-pairs { display: flex; }
.sx-pairs button { flex-direction: column; justify-content: flex-end; align-items: center; min-height: 0; box-shadow: none; color: var(--text-primary); }
.sx-pairs button:active:not(:disabled) { transform: none; }
.sx-pairs .bars { --zero: 0%; position: relative; display: flex; justify-content: center; } /* --zero and --h are set per element by pairBars */
.sx-pairs .bars > span { --h: 0%; position: relative; height: 100%; }
.sx-pairs .bars > span::before { content: ""; position: absolute; left: 0; right: 0; bottom: var(--zero); height: var(--h); border-radius: .45rem .45rem .15rem .15rem; }
.sx-pairs .bars > span.below::before { bottom: auto; top: calc(100% - var(--zero)); border-radius: .15rem .15rem .45rem .45rem; }
.sx-pairs.has-neg .bars::after { content: ""; position: absolute; left: -.25rem; right: -.25rem; bottom: var(--zero); border-top: 1px solid var(--border-strong); }
.sx-pairs .inc::before, .sx-legend .inc::before { background: var(--s7); }
.sx-pairs .sp::before, .sx-legend .sp::before { background: repeating-linear-gradient(45deg, var(--text-muted) 0 2px, transparent 2px 4px); }
.sx-pairs .lbl { white-space: nowrap; }
.sx-pairs.strip { gap: .6rem; overflow-x: auto; scrollbar-width: none; padding: .2rem var(--page-x) .3rem; margin: 0 calc(-1 * var(--page-x)); }
.sx-pairs.strip::-webkit-scrollbar { display: none; }
.sx-pairs.strip button { flex: 0 0 4.6rem; height: 7.4rem; gap: .35rem; padding: .6rem .4rem .5rem; border-radius: var(--radius-md); border: 1.5px solid var(--border-default); background: transparent; font-weight: 500; }
.sx-pairs.strip button.on { border: 2.5px solid var(--text-primary); }
@media (hover: hover) { .sx-pairs.strip button:hover:not(:disabled):not(.on) { background: var(--surface-hover); border-color: var(--border-strong); } }
.sx-pairs.strip .bars { gap: .25rem; height: 4.2rem; }
.sx-pairs.strip .bars > span { width: .9rem; }
.sx-pairs.strip .lbl { font-size: .95rem; }
/* the strip and its years scroll together; the years row spans each year's periods (--n of them, set per span) */
.sx-strip-scroll { overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--page-x)); padding: 0 var(--page-x); }
.sx-strip-scroll::-webkit-scrollbar { display: none; }
@media (hover: hover) and (pointer: fine) { .sx-strip-scroll, .sx-mbars { scrollbar-width: thin; cursor: grab; } .sx-strip-scroll.dragging, .sx-mbars.dragging { cursor: grabbing; user-select: none; } }
.sx-strip-scroll > .sx-pairs.strip { overflow: visible; margin: 0; padding: .2rem 0 .3rem; width: max-content; }
.sx-years { display: flex; gap: .6rem; width: max-content; padding-bottom: .35rem; }
.sx-years span { --n: 1; flex: 0 0 calc(var(--n) * 4.6rem + (var(--n) - 1) * .6rem); border-top: 1.5px solid var(--border-strong); padding: .3rem 0 0 .15rem; font-size: .85rem; font-weight: 600; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.sx-years b { position: sticky; left: .15rem; font-weight: inherit; } /* a long year's label stays in view while its line is */
.sx-pairs.mini, .sx-pairs.wide { align-items: stretch; }
.sx-pairs.mini button, .sx-pairs.wide button { padding: 0; margin: 0; height: 100%; background: transparent; border: 0; border-radius: var(--radius-sm); font: inherit; }
@media (hover: hover) { .sx-pairs.mini button:hover:not(:disabled), .sx-pairs.wide button:hover:not(:disabled) { background: var(--surface-hover); } }
.sx-pairs.mini .bars, .sx-pairs.wide .bars { flex: 1 1 auto; gap: .2rem; width: 100%; }
.sx-pairs.mini .lbl, .sx-pairs.wide .lbl { font-size: .78rem; color: var(--text-secondary); }
.sx-pairs.mini { justify-content: space-between; gap: .4rem; height: 118px; padding-top: .4rem; }
.sx-pairs.mini button { flex: 1 1 0; gap: .3rem; }
.sx-pairs.mini .bars > span { width: min(.8rem, 40%); }
.sx-pairs.wide { gap: .25rem; height: 15rem; overflow-x: auto; scrollbar-width: thin; padding: .4rem .35rem .2rem; }
.sx-pairs.wide button { flex: 1 0 auto; min-width: 2.4rem; gap: .35rem; padding-top: .3rem; } /* never narrower than its label */
.sx-pairs.wide .bars > span { width: min(1.1rem, 38%); }
@media (max-width: 700px) { .sx-pairs.wide { height: 12.5rem; } }
.sx-pairs-wrap + .muted.small { margin: .4rem 0 0; }
.sx-legend { display: flex; justify-content: center; gap: 1.6rem; margin: .7rem 0 0; color: var(--text-primary); font-size: .95rem; }
.sx-legend span { display: inline-flex; align-items: center; gap: .5rem; }
.sx-legend span::before { content: ""; width: .8rem; height: .8rem; border-radius: 50%; }
.sx-budget { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.2rem 1.4rem 1.4rem; border-top: 1px solid var(--border-default); }
.sx-budget-left { flex: 1 1 auto; min-width: 0; }
.sx-budget-left .sx-hero-value { font-size: clamp(1.9rem, 7vw, 2.4rem); }
.sx-catlist .sx-rows { margin: 0; box-shadow: none; border-radius: var(--radius-md); }
.sx-catlist .sx-row { min-height: 52px; padding: .6rem 1rem; }
.sx-panel:has(.sx-catlist) { padding: .1rem .8rem .9rem; }
@media (max-width: 380px) { .sx-ringset { grid-template-columns: repeat(3, 3rem); gap: .5rem; } .sx-ring { width: 3rem; height: 3rem; } }

/* Recurring: the "Coming up" card (two weeks, Sunday first) and the safe-to-spend card */
.sx-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.sx-expand { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; border: 0; background: transparent; box-shadow: none; color: var(--text-primary); margin: -.5rem -.6rem 0 0; }
.sx-cal { margin-top: 1.1rem; border: 1.5px solid var(--border-default); border-radius: var(--radius-lg); padding: .6rem .4rem .7rem; }
.sx-cal-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; }
.sx-cal-head span { font-size: .9rem; color: var(--text-secondary); padding: .25rem 0 .5rem; }
.sx-cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; width: 2.9rem; height: 3.3rem; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--text-primary); font-weight: 600; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.sx-cal-day.past { color: var(--text-muted); font-weight: 500; }
.sx-cal-day.today .num { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--clay-500); color: var(--text-on-accent); }
.sx-cal-day[aria-pressed="true"]:not(.today) .num { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) { button.sx-cal-day:hover:not(:disabled) { background: var(--surface-hover); border: 0; } }
.sx-cal-day .dots { display: flex; gap: 3px; height: 6px; }
.sx-cal-day .dots span { width: 6px; height: 6px; border-radius: 50%; background: var(--s1); }
.sx-cal-day .pay { position: absolute; top: .05rem; right: -.15rem; width: 1.15rem; height: 1.15rem; border-radius: 50%; display: grid; place-items: center; font-size: .72rem; font-weight: 800; background: var(--success); color: #fff; }
.sx-cal-detail .sx-rows { margin: 0; border: 0; border-top: 1px solid var(--border-default); border-radius: 0; box-shadow: none; }
.sx-cal-none { margin: 0; padding: .9rem 1.4rem 1.1rem; border-top: 1px solid var(--border-default); }
.sx-cal-nav { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .1rem .35rem .55rem; }
.sx-cal-title { display: flex; flex-direction: column; align-items: center; gap: .05rem; text-align: center; }
.sx-cal-title strong { font-size: 1.02rem; }
.sx-cal-month .sx-cal-row + .sx-cal-row:not(.sx-cal-head) { margin-top: .1rem; }
.sx-cal-day.out { color: color-mix(in srgb, var(--text-muted) 50%, transparent); font-weight: 400; cursor: default; } /* the months around it: decorative, hidden from screen readers */
.sx-cal-day .dots span.paid { background: transparent; box-shadow: inset 0 0 0 2px var(--text-secondary); } /* already charged: an open dot */
/* the month view reads like a calendar, not a table of figures: the sans face, larger, past days in secondary text, bigger dots */
.sx-cal-month .sx-cal-day .num { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 600; letter-spacing: 0; text-align: center; }
.sx-cal-month .sx-cal-day.past { color: var(--text-secondary); }
.sx-cal-month .sx-cal-day.out { color: color-mix(in srgb, var(--text-muted) 55%, transparent); }
.sx-cal-month .sx-cal-day.out .num { font-weight: 500; }
.sx-cal-month .sx-cal-day .dots { gap: 4px; height: 7px; }
.sx-cal-month .sx-cal-day .dots span { width: 7px; height: 7px; }
.sx-cal-month .sx-cal-head span { font-size: .85rem; font-weight: 600; }
.sx-cal-dayhead { margin: 0; padding: .9rem 1.4rem .2rem; font-size: .8rem; font-weight: 600; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-secondary); border-top: 1px solid var(--border-default); }
.sx-cal-dayhead + .sx-rows, .sx-cal-dayhead + .sx-cal-none { border-top: 0; }
@media (min-width: 900px) {
  .sx-cal-split { display: grid; grid-template-columns: minmax(0, 31rem) minmax(0, 1fr); align-items: stretch; }
  .sx-cal-split > .sx-cal-detail { border-left: 1px solid var(--border-default); padding-top: .6rem; }
  .sx-cal-split > .sx-cal-detail :is(.sx-cal-dayhead, .sx-rows, .sx-cal-none) { border-top: 0; }
}
.sx-safe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sx-safe .sx-hero-value { font-size: clamp(1.7rem, 6vw, 2.1rem); flex: none; }
#recurring-seg .sx-seg { margin-top: .2rem; }
#recurring-full { margin-top: 1rem; }

/* the transaction sheet, summary layout: date bar, centered name and amount, category pill, rows that open their editors */
.sheet-date { margin: 0; flex: 1 1 auto; text-align: center; font-weight: 600; font-size: 1.1rem; padding-left: 2.75rem; }
.sx-txhero { text-align: center; padding-top: 1.4rem; padding-bottom: .4rem; }
.sx-txname { margin: 0; font-family: var(--font-sans); font-size: 1.15rem; font-weight: 600; overflow-wrap: anywhere; }
.sx-txhero .drawer-amount { font-family: var(--font-sans); font-weight: 600; font-size: clamp(2.4rem, 9vw, 3rem); letter-spacing: -0.025em; margin: .35rem 0 .2rem; }
.sx-txhero .drawer-amount.pos { color: var(--pos-text); }
.sx-txflow { margin: 0 0 .3rem; color: var(--pos-text); font-size: .9rem; font-weight: 600; }
.sx-txdesc-label { margin: .7rem 0 0; font-weight: 700; font-size: .92rem; }
.sx-txhero .sheet-desc { margin-top: .15rem; font-size: 1rem; }
.sx-txhero .sheet-chips { justify-content: center; margin-top: .5rem; }
.sx-txhero .sheet-chips:empty { display: none; }
.sx-catwrap { display: flex; justify-content: center; margin-top: 1.1rem; }
ui-picker.sx-catpill { width: auto; min-width: 11rem; min-height: 48px; padding: .45rem 2.4rem .45rem 1.3rem; border-radius: var(--radius-pill); border: 1.5px solid var(--clay-400); background-color: transparent; font-weight: 600; font-size: 1.05rem; max-width: min(22rem, 100%); }
.sx-always { margin: .8rem auto 0; max-width: 30rem; text-align: left; }
.sx-always summary { display: block; list-style: none; text-align: center; color: var(--text-accent); cursor: pointer; font-size: .92rem; }
.sx-always[open] { display: grid; gap: .55rem; }
.sx-always .radio { display: flex; gap: .6rem; align-items: flex-start; font-size: .95rem; }
.sx-always button.primary { justify-self: start; }
.sx-txbody { grid-template-columns: minmax(0, 1fr); max-width: 40rem; margin: 0 auto; gap: 0; }
.sx-txbody > .sx-rows:first-child { margin-top: .6rem; }
ui-picker.sx-rowpick { flex: none; width: auto; min-height: 40px; border: 0; background-color: transparent; font-weight: 600; font-size: 1rem; padding-right: 1.9rem; max-width: 62%; }
.drawer .sx-panel { display: grid; gap: .6rem; }
.drawer .sx-panel > div { display: grid; gap: .6rem; min-width: 0; }
.drawer .sx-panel input[type=text], .drawer .sx-panel ui-picker, .drawer .sx-panel textarea { width: 100%; margin: 0; min-height: 44px; font-size: 1rem; }
.drawer .sx-panel .radio { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .98rem; line-height: 1.45; }
.drawer .sx-panel button.primary { justify-self: start; min-height: 44px; margin: 0; }
.drawer .sx-panel p { margin: 0; }
.sx-txmore { padding: 1.6rem .2rem 0; display: grid; gap: 1rem; }
.sx-outline { width: 100%; min-height: 54px; border-radius: var(--radius-pill); border: 1.5px solid var(--text-primary); background: transparent; box-shadow: none; color: var(--text-primary); font-weight: 600; font-size: 1.05rem; }
@media (hover: hover) { .sx-outline:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--text-primary); } }
.sx-history ul.history { margin: 0; }
.sx-txfoot { margin: .4rem 0 0; display: grid; gap: .15rem; }
.sx-txfoot dt { font-weight: 700; margin-top: .8rem; }
.sx-txfoot dt:first-child { margin-top: 0; }
.sx-txfoot dd { margin: 0; color: var(--text-secondary); overflow-wrap: anywhere; }

/* the same idiom on every screen's cards and tiles (the dense tables inside them keep their own rules) */
.card, details.card { border-radius: var(--radius-xl); padding: 1.3rem 1.4rem; }
.card > h2, .card > .card-head h2, .dash-ask-head h2 { font-family: var(--font-sans); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
details.card > summary { font-family: var(--font-sans); font-weight: 600; font-size: 1.05rem; cursor: pointer; }
.tile { border-radius: var(--radius-xl); padding: 1.05rem 1.25rem; }
.tile-value { font-family: var(--font-sans); font-weight: 600; color: var(--text-primary); letter-spacing: -0.02em; }
.tile-label { font-weight: 500; letter-spacing: 0; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .card, details.card { border-radius: var(--radius-lg); padding: 1rem 1.05rem; }
  .tile { border-radius: var(--radius-lg); }
  .sx-card, .sx-rows { border-radius: var(--radius-xl); }
  .sx-row { padding: .75rem 1.1rem; }
  .sx-panel { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* Home on phones: this month's cards first, then the period bar for the detail cards (it was the first thing on the page) */
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  #home-top { order: -3; }
  #dashboard > .bar .period { margin-top: 0; }
  #home-top > .sx-label:last-child { margin-bottom: .2rem; }
}

.sx-always summary::-webkit-details-marker { display: none; }
.sx-budget-left .sx-hero-label { white-space: nowrap; }
@media (max-width: 420px) { .sx-ringset { grid-template-columns: repeat(3, 3.1rem); gap: .55rem; } .sx-ringset .sx-ring { width: 3.1rem; height: 3.1rem; } .sx-budget { padding-inline: 1.1rem; gap: .9rem; } }
.drawer .sheet-head .sx-close { width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; border: 0; background: transparent; box-shadow: none; }
.drawer .sheet-head .sx-close .icon { width: 1.6rem; height: 1.6rem; }
.sheet-date { padding-left: 44px; }
/* ---- Ask: History (app/ask.js toggleHistory), a list under the Ask heading ---- */
.ask-history { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line, rgba(127,127,127,.25)); border-radius: 12px; max-height: 50vh; overflow: auto; }
.ask-history-list { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ask-history-item { display: flex; align-items: center; gap: 6px; }
.ask-history-item.current .ask-history-title { font-weight: 600; }
.ask-history-item input { flex: 1; min-width: 0; }
.ask-history-open { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 6px 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ask-history-title { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Ask: the offer to save a default (app/ask.js renderAnswer) ---- */
.ask-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; padding: 8px 10px; border: 1px dashed var(--line, rgba(127,127,127,.35)); border-radius: 10px; }


/* second pass, after the live walkthrough (2026-10-14): a tighter hero, Home's date title on phones, Net worth and Accounts,
   underlined Upcoming/All tabs, recurring rows with actions, the sheet's category-tinted band, the More sheet as a grid */
.sx-phone-only { display: none; }
@media (max-width: 700px), (pointer: coarse) and (max-height: 500px) {
  .sx-phone-only { display: block; }
  .sx-hero-body { padding: 1.15rem 1.25rem .4rem; }
  .sx-hero-label { font-size: .92rem; }
  .sx-hero-value { font-size: clamp(2rem, 8vw, 2.5rem); }
  .sx-hero-aside { font-size: .85rem; max-width: 9.5rem; gap: .45rem; }
  .sx-hero-aside-icon .icon { width: 1.6rem; height: 1.6rem; }
  .sx-hero-chart { padding: 0 1.25rem .6rem; }
  .sx-hero-chart svg { height: 118px; }
  .sx-hero .sx-row { min-height: 54px; }
}
.sx-foot { text-align: center; font-size: .9rem; margin: .7rem 0 0; }
.sx-panel > .sx-rows { margin: 0; box-shadow: none; border-radius: var(--radius-md); }
.sx-panel:has(> .sx-rows) { padding: .1rem .8rem .9rem; }
.sx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; }
.sx-actions > p { flex: 1 1 100%; }
.sx-actions button { min-height: 44px; }

/* Upcoming / All as an underlined tab bar */
.sx-seg.sx-tabs { gap: 0; margin: .3rem calc(-1 * var(--page-x)) 1rem; border-bottom: 1px solid var(--border-default); }
.sx-seg.sx-tabs button { flex: 1 1 0; border: 0; border-radius: 0; background: transparent; padding: .7rem 1rem .8rem; font-size: 1.05rem; color: var(--text-secondary); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.sx-seg.sx-tabs button.on { background: transparent; color: var(--text-primary); border-bottom-color: var(--text-primary); font-weight: 600; }
@media (hover: hover) { .sx-seg.sx-tabs button:hover:not(:disabled):not(.on) { background: var(--surface-hover); } }
@media (min-width: 701px) { .sx-seg.sx-tabs { margin-inline: 0; justify-content: flex-start; } .sx-seg.sx-tabs button { flex: 0 0 auto; min-width: 9rem; } }

/* the sheet's top band in the category's color; the first group of rows overlaps its lower edge */
.drawer { --cat: var(--clay-600); }
.sx-txhero { background: linear-gradient(color-mix(in srgb, var(--cat) 45%, var(--surface-base)), color-mix(in srgb, var(--cat) 38%, var(--surface-base))); padding-bottom: 3.4rem; }
.drawer:has(.sx-txhero) .sheet-head { background: color-mix(in srgb, var(--cat) 48%, var(--surface-base)); }
.sx-txbody { position: relative; margin-top: -2.4rem; }
.sx-txbody > .sx-rows:first-child { margin-top: 0; }
.sx-txhero ui-picker.sx-catpill { border-color: color-mix(in srgb, var(--cat) 60%, var(--text-primary)); background-color: color-mix(in srgb, var(--surface-base) 30%, transparent); }

/* the More sheet: a grid of tiles */
.sheet .sheet-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.sheet .sheet-list button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .55rem; min-height: 5.6rem; padding: .8rem .6rem; border-radius: var(--radius-lg); background: var(--surface-raised); border: 1px solid var(--border-subtle); box-shadow: none; font-weight: 500; font-size: 1rem; text-align: center; color: var(--text-primary); }
.sheet .sheet-list button .icon { width: 1.6rem; height: 1.6rem; stroke-width: 1.7; }
.sheet > h2 { font-family: var(--font-sans); font-weight: 600; font-size: 1.2rem; }
@media (min-width: 901px) { .sx-hero-head { flex-direction: column; gap: .35rem; } .sx-hero-aside { max-width: none; margin-top: 0; } .sx-hero-aside-icon .icon { width: 1.4rem; height: 1.4rem; } } /* desktop: the change sits under the figure, the cards are narrow */

/* third pass: six months of income and spend on the income card, the largest uncategorized rows on the review card, the import
   line, and skeletons while a summary screen loads */
.sx-hero-chart > .sx-rows { margin: 0; box-shadow: none; border-radius: var(--radius-md); }
.sx-hero-chart > .sx-rows .sx-row { min-height: 50px; padding: .5rem .8rem; }
.sx-hero-chart > .sx-rows .sx-avatar { width: 2.1rem; height: 2.1rem; font-size: .9rem; }
.sx-hero-note { margin: auto 0; padding-top: .6rem; text-align: center; color: var(--text-muted); font-size: .9rem; } /* under the review card's rows, centered in the room left */
.sx-stale { color: var(--warn-text); }
.sx-foot .icon { width: 1em; height: 1em; vertical-align: -0.15em; }

.sx-skel { border-radius: var(--radius-xl); background: linear-gradient(90deg, var(--surface-raised) 0%, var(--surface-hover) 50%, var(--surface-raised) 100%); background-size: 200% 100%; animation: sx-shimmer 1.4s linear infinite; margin-top: 1rem; }
.sx-skel.hero { height: 19rem; margin-top: .9rem; }
.sx-skel.rows { height: 12rem; }
.sx-skel.strip { height: 7.4rem; border-radius: var(--radius-md); }
.sx-skel.pills { height: 2.75rem; width: min(24rem, 100%); margin-inline: auto; border-radius: var(--radius-pill); }
@keyframes sx-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .sx-skel { animation: none; } }
.sx-catlist > .sx-rows + .sx-rows { margin-top: .6rem; }
.sx-budget.alone { border-top: 0; }
.sx-budget.alone .sx-ringset { grid-template-columns: repeat(auto-fill, 3.6rem); width: min(26rem, 55%); justify-content: end; }
#budget-tiles > .sx-card:first-child { margin-top: .4rem; }
@media (max-width: 520px) { .sx-budget.alone { flex-direction: column; align-items: stretch; } .sx-budget.alone .sx-ringset { width: 100%; justify-content: start; } }

/* ---- Ask: error card by cause, figure links (app/ask/errors.js, app/ask/figlinks.js) ---- */
.ask-error { margin-top: .5rem; padding: .55rem .75rem; border-left: 3px solid var(--neg); background: var(--surface-sunken); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.ask-error p { margin: .15rem 0; }
.ask-error-title { font-weight: 600; color: var(--neg-text); }
.ask-error .ask-retry { font-variant-numeric: tabular-nums; }
.ask-error-more summary { cursor: pointer; color: var(--text-muted); font-size: .85em; margin-top: .25rem; }
.ask-error-more pre { margin: .35rem 0; white-space: pre-wrap; word-break: break-word; font-family: var(--font-mono); }
button.fig { display: inline; font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; min-height: 0; cursor: pointer; text-decoration: underline dotted var(--text-accent); text-underline-offset: .2em; text-decoration-thickness: 1.5px; border-radius: 2px; }
@media (hover: hover) { button.fig:hover { color: var(--text-accent); } }
button.fig:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.md-table tr.fig-source td, p.fig-source { background: var(--surface-accent-soft); }
.md-table tr.fig-flash td { animation: fig-flash 1.6s ease-out; }
@keyframes fig-flash { from { background: var(--surface-accent); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .md-table tr.fig-flash td { animation: none; background: var(--surface-accent-soft); } }

/* Spending, one category (spending.js openCategory): the category as a tag on top, a bar per month with its figure, the
   month's transactions and their total. After Rocket Money's category screen. */
.sx-tags { display: flex; align-items: center; gap: .5rem; margin: .2rem 0 .4rem; flex-wrap: wrap; }
.sx-back { flex: none; width: 44px; height: 44px; min-height: 44px; padding: 0; display: inline-grid; place-items: center; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: var(--text-primary); margin-left: -.6rem; }
.sx-back .icon { width: 1.5rem; height: 1.5rem; }
.sx-tag { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; padding: 0 .7rem 0 .85rem; border-radius: var(--radius-pill); background: var(--surface-accent-soft); border: 1px solid color-mix(in srgb, var(--text-accent) 35%, transparent); color: var(--text-accent); font-weight: 600; font-size: 1rem; box-shadow: none; }
@media (hover: hover) { .sx-tag:hover:not(:disabled) { background: var(--surface-accent-soft); border-color: var(--text-accent); } }
.sx-tag .icon { width: 1.1rem; height: 1.1rem; }
.sx-tags-end { margin-left: auto; font-size: .95rem; }
.sx-cat-sub { text-align: center; margin: 0 0 .6rem; color: var(--text-secondary); font-size: 1rem; }
@media (min-width: 701px) { .sx-cat-sub { text-align: left; } }
.sx-mbars { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--page-x)); padding: .4rem var(--page-x) .6rem; min-height: 13.5rem; }
.sx-mbars::-webkit-scrollbar { display: none; }
.sx-mbars button { flex: 0 0 4.9rem; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: .35rem; padding: 0; min-height: 0; height: 12.6rem; border: 0; border-radius: var(--radius-md); background: transparent; box-shadow: none; color: var(--text-primary); }
@media (hover: hover) { .sx-mbars button:hover:not(:disabled) { background: var(--surface-hover); border: 0; } }
.sx-mbars .fig { font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; min-height: 1.3em; }
.sx-mbars .col { display: flex; align-items: flex-end; justify-content: center; width: 100%; height: 8rem; }
.sx-mbars .bar { display: block; width: 2.9rem; border-radius: .5rem .5rem .15rem .15rem; background: var(--s1); opacity: .55; }
.sx-mbars button.on .bar { opacity: 1; }
.sx-mbars .lbl { font-size: 1rem; color: var(--text-secondary); white-space: nowrap; padding: .3rem .8rem; border-radius: var(--radius-pill); }
.sx-mbars button.on .lbl { background: var(--text-primary); color: var(--surface-raised); font-weight: 600; }
.sx-label .sx-seg { margin: 0; gap: .3rem; }
.sx-label .sx-seg button { min-height: 36px; padding: .2rem .9rem; font-size: .95rem; }
.sx-total { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1rem 0 0; padding: 1.1rem 1.3rem; border-top: 1px solid var(--border-default); font-size: 1.1rem; color: var(--text-secondary); }
.sx-total strong { color: var(--text-primary); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sx-more { margin: .4rem 1.3rem 0; }
.sx-empty { padding: 1.2rem .4rem; }