/* the fee report, /clockwork/report/. layout only: colours, type and every component come from clockwork.css (see DESIGN.md). */

/* the head: the verdict in words, one pill, and the one action for states that stop early */
.rp-head { padding-top: 56px; padding-bottom: 28px; }
.rp-head h1 { margin-top: 14px; overflow-wrap: anywhere; }
.rp-tokmeta { margin-top: 10px; overflow-wrap: anywhere; }
.rp-head .lede { margin-top: 16px; }
.rp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.rp-acts { margin-top: 20px; }
.rp-ask { margin-top: 22px; max-width: 760px; }
.rp-ask-err, .rp-ask-help { margin-top: 10px; max-width: 760px; }
.rp-stop { margin-top: 22px; max-width: 760px; }
.rp-another { margin-top: 14px; }

/* numbers in tabular mono, per the report's brief: tile figures use Plex Mono here, not Unbounded */
.rp .stat .big { font-family: var(--mono); font-weight: 600; font-variant-numeric: tabular-nums; }
.rp-stats { margin-top: 0; }
.rp-claim { margin-top: 14px; }

.rp-sec { padding-top: 44px; }
.rp-sec .section__head { margin-bottom: 14px; }
.rp-kv { margin-top: 12px; }
.rp-kv > div > b { font-weight: 500; overflow-wrap: anywhere; }
.rp-cardnote { margin-top: 12px; }
.rp-eq { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* presets: the bar is made of spans, because a button holds phrasing content only */
.rp-presets { margin-bottom: 14px; }
.preset .bar > span { min-width: 2px; }
.rp-f90 { flex: 90 1 0; } .rp-f45 { flex: 45 1 0; } .rp-f225 { flex: 22.5 1 0; } .rp-f10 { flex: 10 1 0; }
/* a pair clockwork-press 0.4.3 does not serve: one callout where the presets would be */
.rp-unserved { margin-top: 0; max-width: 92ch; }

/* the table: leg names stay put while the preset columns scroll on a phone */
.rp-tbl .tbl { min-width: 640px; }
.rp-tbl tbody th { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--paper); font-weight: 500; border-bottom: 0; border-top: 1px solid var(--line-soft); vertical-align: top; }
.rp-tbl tbody tr:first-child th { border-top: 0; }
.rp-tbl tbody tr:first-child > * { font-weight: 600; }
.rp-tbl th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); }
.rp-tbl i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.rp-tbl [data-col].is-on { background: var(--em-tint); }
.rp-tbl thead th[data-col].is-on { color: var(--em); }
.rp-usd { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--label); }
.rp-off { color: var(--label); font-weight: 400; }
.rp-scrollhint { display: none; margin: 0 0 8px; }
.rp-notes { display: grid; gap: 6px; margin-top: 12px; }
.rp-notes .price { margin: 0; max-width: 92ch; }
.rp-setup { margin-top: 18px; }
.rp-setup h3 { margin: 0 0 6px; }
.rp-setup .sub { max-width: 62ch; }

@media (max-width: 760px) {
  .rp-head { padding-top: 36px; padding-bottom: 22px; }
  .rp-sec { padding-top: 36px; }
  .rp-setup .btn, .rp-acts .btn { width: 100%; }
}
/* the table needs 640px; below that it scrolls, so say so */
@media (max-width: 690px) {
  .rp-scrollhint { display: block; }
}
@media (max-width: 560px) {
  .rp-kv > div { flex-direction: column; gap: 2px; }
  .rp-kv > div > b { text-align: left; }
}