/* reports — view-specific rules. Shared primitives live in style.css. */

/**
 * Reports is three statements about money and one about the matcher:
 *
 *   1. the weekly evaluation, printed as a document plate,
 *   2. the shadow threshold diff, printed as a table,
 *   3. reconciliation, which must be able to say plainly that these do not balance,
 *   4. quarantined payments, which are listed rather than counted because each one is
 *      real money that nobody has yet decided about.
 *
 * The registration offset (`box-shadow: 3px 3px 0 0 var(--ink)`) is the system's one
 * permitted depth device and it is spent exactly once here, on the evaluation sheet.
 * The quarantine documents take a 1px ink rule and corner furniture instead — the
 * offset means "this sheet is lifted off the plate", and a run of twenty lifted sheets
 * means nothing at all.
 *
 * Marking Orange appears only as the ground of the credit button, which is the single
 * primary action of its own document. Every other signal on this screen — a breached
 * target, a negative cash balance, an aged intent — takes Marking Ink, because all of
 * them set below 24px.
 */

/* --------------------------------------------------------------------------
   Block rhythm. More space above a heading than below it.
   -------------------------------------------------------------------------- */

#view-reports > h3 {
  font-size: 1.25rem;
  font-variation-settings: 'wdth' 110;
  letter-spacing: -0.02em;
  margin-top: var(--xl);
  margin-bottom: var(--md);
  padding-top: var(--md);
  border-top: 2px solid var(--ink);
}

/* The quarantine standing note is load-bearing prose about unattributed money, not
   supporting chrome. It reads at full ink. */
#view-reports > p.muted {
  color: var(--ink);
  font-size: 1rem;
  max-width: 68ch;
}

#view-reports .scroller {
  margin-bottom: var(--md);
}

/* Measured columns right-align under their own heading. */
#view-reports th.num {
  text-align: right;
  padding-right: var(--md);
}

#view-reports .rp-none-line,
#view-reports .rp-empty-note {
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  max-width: 68ch;
}

/* An unread value never prints as a number. */
#view-reports .rp-val {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
#view-reports .rp-key {
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
#view-reports .rp-prose {
  font-family: var(--display);
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   1. The evaluation plate
   -------------------------------------------------------------------------- */

#view-reports .rp-week {
  font-size: 1.25rem;
  font-variation-settings: 'wdth' 110;
  letter-spacing: -0.02em;
  margin: var(--lg) 0 var(--md);
}
#view-reports .rp-week .rp-date {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* The one registration offset on this screen. Hard, zero blur, a sheet on a plate. */
#view-reports .rp-plate {
  position: relative;
  background: var(--paper-lit);
  border: 1px solid var(--ink);
  box-shadow: 3px 3px 0 0 var(--ink);
  padding: 0;
  margin: 0 3px var(--xl) 0;
}

/* Printer's furniture: trim brackets at the head of the sheet. Drawn in rules, not
   in an icon font. */
#view-reports .rp-plate::before,
#view-reports .rp-plate::after {
  content: '';
  position: absolute;
  top: 4px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--ink);
  pointer-events: none;
}
#view-reports .rp-plate::before {
  left: 4px;
  border-left: 1px solid var(--ink);
}
#view-reports .rp-plate::after {
  right: 4px;
  border-right: 1px solid var(--ink);
}

#view-reports .rp-verdict {
  padding: var(--md);
  border-bottom: 1px solid var(--rule);
}
#view-reports .rp-verdict-word {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 var(--sm);
  color: var(--ink);
}
#view-reports .rp-verdict[data-state='breached'] {
  border-left: 2px solid var(--mark-ink);
}
#view-reports .rp-verdict[data-state='breached'] .rp-verdict-word {
  color: var(--mark-ink);
}
#view-reports .rp-verdict > p {
  margin: 0;
  font-size: 1rem;
  max-width: 68ch;
}
#view-reports .rp-verdict > ul.drift {
  margin: 0;
}
#view-reports .rp-verdict > ul.drift li:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

/* Seven measured values, four across. Labels are label-caps; values are mono. */
#view-reports .rp-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md);
  margin: 0;
  padding: var(--md);
}
#view-reports .rp-metric {
  min-width: 0;
}
#view-reports .rp-metric dt {
  padding-top: 0;
  margin-bottom: var(--xs);
}
#view-reports .rp-metric dd {
  font-size: 1rem;
  overflow-wrap: anywhere;
}

/* The audit sample sits under a 2px emphasis rule, as the design prints it. */
#view-reports .rp-plate > h4 {
  margin: 0;
  padding: var(--md) var(--md) var(--sm);
  border-top: 2px solid var(--ink);
  font-size: 1rem;
  font-variation-settings: 'wdth' 106;
}
#view-reports .rp-sample {
  margin: 0;
  padding: 0 var(--md) var(--md);
}
#view-reports .rp-sample li:last-child {
  border-bottom: 0;
}
#view-reports .rp-sample-reason {
  font-family: var(--display);
  font-size: 0.9375rem;
}
#view-reports .rp-sample .rp-none {
  border-left-color: var(--ink);
  color: var(--ink-secondary);
}

/* No evaluation has run. A sentence, never a grid of zeroes. */
#view-reports .rp-empty {
  background: var(--paper-sunk);
  border-left: 2px solid var(--ink);
  padding: var(--md);
  margin: var(--lg) 0 var(--sm);
  max-width: none;
  color: var(--ink);
  font-size: 1rem;
}

/* --------------------------------------------------------------------------
   2. Shadow threshold diff
   -------------------------------------------------------------------------- */

#view-reports .rp-shadow {
  border: 1px solid var(--rule);
  background: var(--paper-lit);
  margin-bottom: var(--xl);
}
#view-reports .rp-shadow > p.muted {
  color: var(--ink);
  font-size: 0.9375rem;
}
#view-reports .rp-shadow th.num,
#view-reports .rp-shadow td.num {
  text-align: right;
  padding-right: var(--md);
}
#view-reports .rp-profile {
  overflow-wrap: anywhere;
}

/* A table that runs past the screen says so, and takes keyboard focus so it can be
   scrolled without a mouse. Never a silent truncation. */
#view-reports .scroller.rp-overflows {
  border-right: 1px solid var(--ink);
}
#view-reports .rp-scroll-note {
  margin: 0 0 var(--lg);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
#view-reports .scroller:not(.rp-overflows) + .rp-scroll-note {
  display: none;
}

/* --------------------------------------------------------------------------
   3. Reconciliation
   -------------------------------------------------------------------------- */

#view-reports .rp-recon {
  border: 1px solid var(--rule);
  background: var(--paper-lit);
  margin-bottom: var(--lg);
}
#view-reports .rp-recon .scroller {
  border-top: 2px solid var(--ink);
  max-width: 640px;
}
#view-reports .rp-account {
  font-family: var(--mono);
  font-size: 0.75rem;
  overflow-wrap: anywhere;
}
#view-reports .rp-recon tfoot th {
  background: var(--paper-sunk);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  color: var(--ink);
  font-weight: 700;
  padding: 9px var(--md) 9px var(--sm);
}
#view-reports .rp-recon tfoot td {
  background: var(--paper-sunk);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-weight: 700;
}
#view-reports .rp-recon-note {
  margin: 0 0 var(--md);
  font-size: 0.875rem;
  color: var(--ink-secondary);
  max-width: 68ch;
}

/* Balanced or out of balance, in a word and in Pula. Not in a colour. */
#view-reports .rp-balance {
  background: var(--paper-sunk);
  border-left: 2px solid var(--ink);
  padding: var(--md);
  margin: 0 0 var(--md);
  max-width: none;
}
#view-reports .rp-balance[data-state='out'] {
  border-left-color: var(--mark-ink);
}
#view-reports .rp-balance-word {
  display: block;
  margin: 0 0 var(--sm);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}
#view-reports .rp-balance[data-state='out'] .rp-balance-word {
  color: var(--mark-ink);
}
#view-reports .rp-balance p {
  margin: 0 0 var(--sm);
  font-size: 0.9375rem;
  max-width: 68ch;
}
#view-reports .rp-balance p:last-child {
  margin-bottom: 0;
}
#view-reports .rp-diff {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--mark-ink);
}

#view-reports .rp-aged {
  margin: 0;
  padding: var(--sm) 0 var(--sm) var(--md);
  border-left: 2px solid var(--rule);
  font-size: 0.9375rem;
  max-width: 68ch;
}
#view-reports .rp-aged[data-state='aged'] {
  border-left-color: var(--mark-ink);
  color: var(--mark-ink);
}
#view-reports .rp-aged[data-state='aged'] .rp-val {
  color: var(--mark-ink);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   4. Quarantined payments
   -------------------------------------------------------------------------- */

#view-reports .rp-q-empty {
  background: var(--paper-sunk);
  border-left: 2px solid var(--ink);
  padding: var(--md);
  margin: 0 0 var(--lg);
  max-width: none;
  font-size: 1rem;
  color: var(--ink);
}

/* One unattributed payment, as one document. Ink-ruled, with a corner mark — but no
   registration offset: the offset is spent on the evaluation sheet. */
#view-reports .rp-q {
  position: relative;
  background: var(--paper-lit);
  border: 1px solid var(--ink);
  padding: 0;
  margin-bottom: var(--lg);
}
#view-reports .rp-q::after {
  content: '';
  position: absolute;
  top: 4px;
  right: 4px;
  width: 7px;
  height: 7px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
  pointer-events: none;
}

#view-reports .rp-q > h4 {
  margin: 0;
  padding: var(--md) var(--lg) var(--xs) var(--md);
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}
#view-reports .rp-q-state {
  margin-left: var(--sm);
  vertical-align: 2px;
}
#view-reports .rp-q-when {
  margin: 0;
  padding: 0 var(--md) var(--md);
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-secondary);
  max-width: none;
}
#view-reports .rp-q-when .rp-key {
  margin-right: var(--xs);
}
#view-reports .rp-q-when .rp-val,
#view-reports .rp-q-when .rp-prose {
  margin-right: var(--md);
  color: var(--ink);
  overflow-wrap: anywhere;
}

#view-reports .rp-q > details {
  margin: 0;
  padding: var(--md);
  border-bottom: 1px solid var(--rule);
}
#view-reports .rp-q > details > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
}
#view-reports .rp-q > details > summary::-webkit-details-marker {
  display: none;
}
#view-reports .rp-q > details > summary::before {
  content: '+';
  display: inline-block;
  width: 14px;
  height: 14px;
  line-height: 12px;
  text-align: center;
  border: 1px solid currentColor;
  font-family: var(--mono);
  font-size: 0.625rem;
}
#view-reports .rp-q > details[open] > summary::before {
  content: '\2212'; /* minus sign, not a hyphen */
}
#view-reports .rp-q > details pre {
  margin: var(--sm) 0 0;
  max-width: none;
}

/* The three fields. app.js ships them with placeholders and no visible labels; a
   placeholder disappears the moment someone types, so each field is given the label
   the design prints above it. */
#view-reports .rp-q-fields {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) 132px minmax(0, 1.6fr);
  gap: var(--md);
  margin: 0;
  padding: var(--md);
}
#view-reports .rp-field {
  min-width: 0;
}
#view-reports .rp-field label {
  margin-bottom: var(--xs);
  font-size: 0.625rem;
}
#view-reports .rp-q-fields input {
  width: 100%;
  flex: none;
  margin-top: 0;
}

/* The amount carries its unit inside its own frame, so a Pula figure is never a bare
   number. The frame takes the focus ring on behalf of the input it holds. */
#view-reports .rp-unit-box {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--rule);
  background: var(--paper);
}
#view-reports .rp-unit-box:focus-within {
  border-color: var(--ink);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
#view-reports .rp-unit {
  display: flex;
  align-items: center;
  padding: 0 var(--xs) 0 10px;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}
#view-reports .rp-unit-box input {
  border: 0;
  background: transparent;
  padding-left: 0;
}
#view-reports .rp-unit-box input:focus-visible {
  outline: none;
}

/* Two consequential actions. Neither is a bare button: each prints what it will do. */
#view-reports .rp-q-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--md);
  align-items: start;
  margin: 0;
  padding: var(--md);
  border-top: 1px solid var(--rule);
}
#view-reports .rp-act {
  min-width: 0;
}
#view-reports .rp-act button {
  width: 100%;
  padding: 15px 20px;
  font-size: 0.9375rem;
}
#view-reports .rp-q-what {
  margin: var(--sm) 0 0;
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-secondary);
  max-width: 46ch;
}
#view-reports .rp-q-deny {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--sm) 0 0 var(--md);
  border-left: 2px solid var(--rule);
  font-family: var(--display);
  font-size: 0.875rem;
  color: var(--ink-secondary);
  max-width: 68ch;
}

/* Credited moves money; dismissed does not. app.js's own sentence carries the word, so
   the region adds only the consequence it does not state. */
#view-reports #quarantine-result[data-disposition]::after {
  content: 'money moved';
  display: block;
  margin-top: var(--xs);
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
#view-reports #quarantine-result[data-disposition='dismissed']::after {
  content: 'no money moved';
}

/* --------------------------------------------------------------------------
   Refusals. Loading, failure, and a permission that a retry cannot change.
   -------------------------------------------------------------------------- */

#view-reports .rp-loading {
  margin: var(--md) 0 var(--xl);
}

#view-reports .rp-denied-note {
  margin: 0 0 var(--sm);
  font-size: 0.9375rem;
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   Narrow. Reviewers and finance operators work from phones in the field.
   -------------------------------------------------------------------------- */

@media (min-width: 720px) {
  #view-reports .rp-metrics {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  #view-reports .rp-q-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  #view-reports .rp-q-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  #view-reports .rp-q-what {
    max-width: none;
  }
}

/* At 320px a two-across metric grid clips its own labels, so it steps to one. */
@media (max-width: 400px) {
  #view-reports .rp-metrics {
    grid-template-columns: minmax(0, 1fr);
  }
  #view-reports .rp-q > h4 {
    padding-right: var(--md);
  }
  #view-reports .rp-q::after {
    display: none;
  }
}