/* Reports (owner, 29 October 2026; js/views/reports.js): the list, the builder and a report's result. Colours are the app's
   tokens (app.css), so light and dark both follow; the chart is the dashboard's (js/charts.js). On a phone every part stacks,
   and a wide table scrolls inside its own box, never the page. */

.rp-starters { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 10px; }
.rp-starter { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink); text-decoration: none; min-height: 44px; }
.rp-starter:hover { background: var(--sunk); text-decoration: none; border-color: var(--accent); }
.rp-list td { vertical-align: top; }

.rp-build { margin-bottom: 16px; }
.rp-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 18px 24px; }
.rp-step { min-width: 0; }
.rp-step > .lbl, .rp-step > label.lbl { margin-top: 2px; }
.rp-step select, .rp-step input[type=text], .rp-step input[type=date] { max-width: 100%; }
.rp-step .row { margin-top: 6px; }
.rp-cols { list-style: none; margin: 4px 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.rp-col { display: inline-flex; align-items: center; gap: 2px; padding: 2px 4px 2px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--sunk); font-size: 13px; max-width: 100%; }
.rp-col > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-col .btn { padding: 2px 6px; min-width: 28px; }
.rp-filters { display: flex; flex-direction: column; gap: 8px; margin: 6px 0; }
.rp-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--sunk); }
.rp-f-l { font-weight: 600; font-size: 13px; }
.rp-f-v { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; max-width: 100%; }
.rp-f-v input[type=text] { width: 12em; max-width: 100%; }
.rp-f-v .money-wrap input { width: 9em; }
.rp-day { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.rp-pick { position: relative; }
.rp-pick > summary { cursor: pointer; padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); list-style: none; max-width: 22em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rp-pick > summary::-webkit-details-marker { display: none; }
.rp-opts { margin-top: 6px; max-height: 240px; overflow-y: auto; padding: 6px 8px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
  display: flex; flex-direction: column; gap: 2px; min-width: min(100%, 240px); }
.rp-opts label { min-height: 28px; }
.rp-group + .rp-group { margin-top: 6px; }
/* A total is one line, its field then how it is added up (review, 29 October 2026: each chooser sat above its field's name). */
.rp-totals { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 8px; }
.rp-total { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--line-2); border-radius: var(--r-sm); background: var(--sunk); }
.rp-total .rp-t-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.rp-total select { flex: 0 0 auto; width: auto; }
.rs-why { font-size: 12px; }

.rp-out { transition: opacity .15s; }
.rp-out.rp-running { opacity: .6; }
.rp-out > .panel + .panel { margin-top: 16px; }
.rp-note { margin: 0 0 12px; padding: 8px 12px; border-radius: var(--r-sm); background: var(--info-soft); color: var(--info); font-size: 13px; }
.rp-note.warn { background: var(--warn-soft); color: var(--warn); }
.rp-chart { max-width: 760px; }
.rp-grand { margin: 0; padding: 8px 16px; border-bottom: 1px solid var(--line-2); }
.rp-pager { margin-left: auto; }
.rp-unsaved { color: var(--warn); font-weight: 600; }
/* A heading is a button (sorts by it): it looks like the heading it is. */
.rp-th { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 2px; }
.rp-th:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.rp-rows td, .rp-sum td { white-space: nowrap; }
.rp-rows td:first-child a { font-weight: 600; }
.rs-to { border: 0; padding: 0; margin: 0; }
.rs-to label { min-height: 32px; }

/* On a touch screen a column's ← → ✕ are a finger's size (review, 29 October 2026). */
@media (pointer: coarse) {
  .rp-col .btn, .rp-total .btn, .rp-filter > .btn { min-width: 44px; min-height: 44px; }
}
@media (max-width: 640px) {
  .rp-steps { grid-template-columns: 1fr; }
  /* A grouped report's summary fits a phone: its words wrap, so its counts and totals stay on screen (review, 29 October 2026). */
  .rp-sum th, .rp-sum td { white-space: normal; overflow-wrap: anywhere; padding-left: 6px; padding-right: 6px; }
  .rp-sum th { font-size: 10px; letter-spacing: 0; }
  .rp-sum td { font-size: 13px; }
  .rp-sum td.num { white-space: nowrap; overflow-wrap: normal; }
  .rp-pick > summary { max-width: 100%; }
  .page-head .actions .btn { flex: 1 1 auto; }
}