/* A restrained refinement of the deployed UI. No grid or navigation changes. */
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ui-card-shadow: 0 2px 6px rgb(12 23 42 / 3%); }
body.ui-polish .card { box-shadow: var(--ui-card-shadow); }
body.ui-polish :is(.kpi b,.totals b,.kv dd,.mrow,.money-box) { font-variant-numeric: tabular-nums; }
body.ui-polish :is(h1,h2,h3) { text-wrap: balance; }
body.ui-polish :is(button,summary,a,input,select):focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
body.ui-polish :is(input,textarea) { caret-color: var(--accent); }
body.ui-polish ::selection { background: color-mix(in srgb,var(--accent) 20%,transparent); color: var(--ink); }
body.ui-polish :is(button,.chip,nav.side a,.kpi) { transition: opacity 140ms ease, transform 140ms var(--ease-out); }
body.ui-polish[data-ui-input="pointer"] :is(button,.chip):not(:disabled):active { transform: scale(.98); }
@media (hover:hover) and (pointer:fine) {
 body.ui-polish :is(.row,.pay-group>summary):hover { background: color-mix(in srgb,var(--accent) 3%,var(--card)); }
 body.ui-polish nav.side a:not(.on):hover { background: color-mix(in srgb,var(--accent) 6%,var(--nav)); color: var(--ink); }
 body.ui-polish :is(button,.chip):not(:disabled):hover { opacity: .88; }
}
/* Existing, accessible details/summary popovers, opened by click or keyboard. */
body.ui-polish .nb::details-content {
 opacity:0; content-visibility:hidden;
 transition: opacity 160ms var(--ease-out), content-visibility 160ms allow-discrete;
}
body.ui-polish .nb[open]::details-content { opacity:1; content-visibility:visible; }
body.ui-polish .nb-pop {
 box-shadow: 0 8px 24px rgb(12 23 42 / 12%); border-radius:12px;
 line-height:1.55; isolation:isolate;
}
body.ui-polish .nb-pop p { margin:0 0 8px; }
body.ui-polish .nb-pop p:last-child { margin-bottom:0; }
body.ui-polish .ui-info>.nb-b { color:var(--muted); border-color:var(--line); font-style:normal; font-weight:500; }
body.ui-polish .ui-info[open]>.nb-b { color:var(--accent); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 8%,var(--card)); }
body.ui-polish header.top .ui-info { margin-left:3px; }
body.ui-polish header.top .ui-info>.nb-b { width:22px; height:22px; font-size:13px; }
body.ui-polish .ui-help-title { display:inline; }
body.ui-polish .modal { opacity:1; transform:none; transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out); }
@starting-style {
 body.ui-polish[data-ui-input="pointer"] .modal { opacity:0; transform:translateY(6px) scale(.99); }
}
/* System reduced motion always has priority over the user preference. */
@media(prefers-reduced-motion:reduce) {
 body.ui-polish :is(button,.chip,nav.side a,.kpi,.modal) { transform:none!important; transition-property:opacity; transition-duration:80ms; }
 body.ui-polish .nb::details-content { transition-duration:80ms; }
 body.ui-polish :is(nav.side,.nav-backdrop) { transition-duration:0s; }
}
body[data-motion="off"] :is(button,.chip,nav.side a,.kpi,.modal,nav.side,.nav-backdrop) { transform:none!important; transition-duration:0s!important; animation:none!important; }
body[data-motion="off"] .nb::details-content { transition-duration:0s!important; }
body.ui-polish [data-ui-counter] { font-variant-numeric:tabular-nums; }
/* Keep a number and its unit together; give compact detail panels enough room. */
body.ui-polish :is(.kpi > b,.total > b) { white-space:nowrap; }
body.ui-polish .md-detail .totals {
 grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
}
/* The report keeps whole amounts instead of splitting a large NMCK in half. */
body.ui-polish .tv-strip { flex-wrap:wrap; }
body.ui-polish .tv-cell { min-width:min-content; }
body.ui-polish :is(.tv-n,.tv-l) { white-space:nowrap; }
@media(max-width:700px) {
 body.ui-polish header.top { gap:8px; }
 body.ui-polish #section-title { flex-shrink:0; white-space:nowrap; }
 body.ui-polish header.top .ui-source { flex-shrink:0; }
 body.ui-polish #theme-btn { width:auto;flex:0 1 auto;min-width:0; }
 body.ui-polish .md-list > .controls > .search { flex-basis:100%; }
 body.ui-polish .md-list > .controls > .muted.small { flex-basis:100%;margin-top:4px; }
}
body.ui-polish .ui-source-partial>.nb-b { color:var(--yellow);border-color:color-mix(in srgb,var(--yellow) 60%,var(--line)); }
/* Keep monthly bars aligned, with horizontal scrolling contained in the chart. */
body.ui-polish .vbars {
 display:flex; align-items:flex-end; gap:6px; margin:10px 0 4px;
 width:100%; min-width:0; overflow-x:auto; overflow-y:hidden;
 overscroll-behavior-inline:contain; scrollbar-width:thin;
 padding:4px 2px 8px; box-sizing:border-box;
}
body.ui-polish .vbar { flex:1 1 0; min-width:38px; text-align:center; }
body.ui-polish .vbar-k {
 white-space:nowrap; overflow-wrap:normal; word-break:normal;
}
body.ui-polish .vbar-v {
 display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
 min-height:2.5em; max-width:100%; white-space:normal; overflow-wrap:normal;
 word-break:normal; line-height:1.15;
}
/* Analytics amounts share a line when the screen and column have room. */
@media (min-width:701px) {
 body.ui-polish .vbar-v:has(> span) {
  flex-direction:row; flex-wrap:wrap; column-gap:.25em; align-content:flex-end; justify-content:center;
 }
 body.ui-polish .vbar-v > span { flex-shrink:0; white-space:nowrap; }
}
body.ui-polish .vbar-track { height:90px; align-self:end; }
/* Reveal only after the viewport observer arms a whole content block. */
body.ui-polish.ui-motion-active #section-body [data-ui-reveal-pending] {
 opacity: 0; transform: translateY(12px);
}
body.ui-polish #section-body [data-ui-revealed] {
 opacity: 1; transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
 body.ui-polish.ui-motion-active #section-body [data-ui-reveal-pending],
 body.ui-polish #section-body [data-ui-revealed] { opacity: 1; transform: none; }
}
body[data-motion="off"] #section-body [data-ui-reveal-pending],
body[data-motion="off"] #section-body [data-ui-revealed] { opacity: 1; transform: none; }
