/* payments — view-specific rules. Shared primitives live in style.css.
 *
 * Screen 10, Payment Rails. A ledger of five rails set down on a document plate, and
 * below it the menu those rails actually produce in WhatsApp.
 *
 * Everything is scoped under #view-payments so nothing here can reach another agent's
 * screen. No radius, no shadow except the one registration offset on the plate, no
 * hard-coded colour — every value comes from a token in style.css.
 *
 * Marking Orange is spent nowhere on this screen. There is no primary action and no
 * eligibility verdict here, so every alarm sets in Marking Ink, which is legal at any
 * size. See DESIGN.md, the Marking Paint Rule.
 */

/* --------------------------------------------------------------------------
   The header. Two truths, at a size that can be read in the sun.
   -------------------------------------------------------------------------- */

#view-payments h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 118;
  letter-spacing: -0.03em;
  margin-bottom: var(--md);
}

/* The intro is not supporting text. It states what the switches below actually do, so
   it takes ink and reading size rather than the muted small treatment. */
#view-payments > p.muted {
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.55;
  max-width: 74ch;
  margin-bottom: var(--lg);
}
#view-payments .pm-truth {
  font-weight: 650;
  font-variation-settings: 'wdth' 100;
}

/* --------------------------------------------------------------------------
   The document plate
   -------------------------------------------------------------------------- */

/* The one permitted depth device: a hard 3px ink offset at zero blur, reading as a
   sheet set down on the page. The right margin holds the offset inside the viewport at
   320px, where a clipped shadow would otherwise push the body sideways. */
#view-payments .pm-plate {
  position: relative;
  background: var(--paper-lit);
  border: 1px solid var(--rule);
  box-shadow: 3px 3px 0 0 var(--ink);
  margin: 0 3px var(--lg) 0;
}

/* Printer's furniture: registration corners, hairline, in ink. */
#view-payments .pm-plate::before,
#view-payments .pm-plate::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
}
#view-payments .pm-plate::before {
  top: 0;
  left: 0;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
#view-payments .pm-plate::after {
  bottom: 0;
  right: 0;
  border-bottom: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}

#view-payments .pm-scroller {
  border-top: 0;
  margin-bottom: 0;
  scrollbar-width: thin;
}
/* A hard ink edge on the side that still has table behind it. No gradient, no fade —
   this system has neither, and the foot line says the same thing in words. */
#view-payments .pm-scroller[data-pm-more='yes'] { border-right: 2px solid var(--ink); }
#view-payments .pm-scroller[data-pm-back='yes'] { border-left: 2px solid var(--ink); }
#view-payments .pm-scroller:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* The folio along the foot of the plate. */
#view-payments .pm-foot {
  margin: 0;
  padding: var(--sm) var(--md);
  border-top: 1px solid var(--rule);
  background: var(--paper-sunk);
  font-size: 0.8125rem;
  color: var(--ink-secondary);
  max-width: none;
}

/* --------------------------------------------------------------------------
   The ledger
   -------------------------------------------------------------------------- */

#payments-table { min-width: 940px; }

#payments-table thead tr { background: var(--paper-sunk); }
#payments-table th {
  padding: 14px var(--md);
  color: var(--ink);
  font-weight: 600;
  border-bottom: 1px solid var(--ink);
  white-space: normal;
  vertical-align: bottom;
}

#payments-table td {
  padding: var(--md);
  font-size: 0.8125rem;
  vertical-align: top;
}
#payments-table tbody tr:hover { background: var(--paper-sunk); }
#payments-table tbody tr:focus-within { background: var(--paper-sunk); }

/* A row whose rail is published but unusable. The left bar comes from .alarm-row in
   style.css; the ground steps up so the bar is not the only carrier. */
#payments-table tbody tr.alarm-row { background: var(--paper); }
#payments-table tbody tr.alarm-row:hover { background: var(--paper-sunk); }

/* Rail: the trading name in Archivo, the system key in mono, exactly as written. */
#view-payments .pm-rail { min-width: 9rem; }
#view-payments .pm-rail strong {
  display: block;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 650;
  font-variation-settings: 'wdth' 100;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
#view-payments .pm-key {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--ink-secondary);
}

/* Group is an identifier the contractor sees as a menu heading — mono, and shown
   exactly as stored. The uppercase rendering belongs to the preview below, not to the
   field being edited. */
#view-payments .pm-group {
  font-family: var(--mono);
  font-size: 0.75rem;
  width: 12ch;
  min-width: 8ch;
  background: var(--paper-lit);
}

/* The note is prose a contractor reads. Archivo, never mono. */
#view-payments .pm-note {
  font-family: var(--display);
  font-size: 0.875rem;
  width: 26ch;
  min-width: 14ch;
  background: var(--paper-lit);
}

#view-payments .pm-cell-credentials,
#view-payments .pm-cell-callbacks { min-width: 9rem; }
#view-payments .pm-cell-credentials .alarm { display: inline-block; }

#view-payments .pm-cell-changed { min-width: 8.5rem; white-space: nowrap; }
#view-payments .pm-actor {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  white-space: normal;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   The switch
   -------------------------------------------------------------------------- */

#view-payments .pm-cell-menu { min-width: 13rem; }
#view-payments .pm-cell-menu label.inline { align-items: flex-start; }

/* A statutory form's box, marked with a printed X rather than a platform checkmark. */
#payments-table input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  border: 1px solid var(--ink);
  background: var(--paper-lit);
  cursor: pointer;
}
#payments-table input[type='checkbox']:checked::after {
  content: 'X';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
}
/* Disabled never reads as dimmed — it reads as a ruled, unfillable box with a printed
   reason beside it. */
#payments-table input[type='checkbox']:disabled {
  border-color: var(--rule);
  background: var(--paper-sunk);
  cursor: not-allowed;
}
#payments-table input[type='checkbox']:disabled:checked::after { color: var(--ink-secondary); }

#view-payments .pm-word {
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
}
#view-payments .pm-word--alarm { color: var(--mark-ink); font-weight: 700; }

#view-payments .pm-offmenu-flag { margin-left: var(--sm); vertical-align: 1px; }
#view-payments .pm-broken {
  display: inline-block;
  margin: var(--sm) 0 0;
  white-space: normal;
  font-weight: 500;
}

/* In flight. A round trip from a yard is not instant, so the row says so. */
#view-payments .pm-pending {
  display: inline-block;
  margin-left: var(--sm);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
#view-payments .pm-pending::after {
  content: '';
  animation: dots 1.2s steps(4, end) infinite;
}
#view-payments tr[data-pm-pending='yes'] > td { border-left-color: var(--ink); }

/* --------------------------------------------------------------------------
   Why. No control on this screen refuses silently.
   -------------------------------------------------------------------------- */

#view-payments .pm-why {
  margin: var(--sm) 0 0;
  max-width: 34ch;
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-secondary);
}
#view-payments .pm-cell-menu .pm-why { border-left: 2px solid var(--rule); padding-left: var(--sm); }
#view-payments tr[data-pm-menu='withheld'] .pm-cell-menu .pm-why {
  border-left-color: var(--mark-ink);
  color: var(--mark-ink);
}

#view-payments .pm-denied .pm-why { max-width: 62ch; margin-top: var(--md); color: var(--ink); }

/* --------------------------------------------------------------------------
   Placeholder rows. An empty table is a sentence, not a blank rule.
   -------------------------------------------------------------------------- */

#view-payments .pm-placeholder td {
  font-family: var(--display);
  font-size: 0.9375rem;
  padding: var(--lg) var(--md);
  max-width: 62ch;
  color: var(--ink-secondary);
}
#view-payments .pm-placeholder--failed td,
#view-payments .pm-placeholder--empty td { color: var(--ink); }
#view-payments .pm-placeholder--failed td { border-left: 2px solid var(--mark-ink); }

/* --------------------------------------------------------------------------
   What contractors see now
   -------------------------------------------------------------------------- */

/* The section is not a sheet — the two panels inside it are. */
#view-payments > .pm-previews {
  background: transparent;
  border: 0;
  padding: 0;
  margin-bottom: var(--lg);
}
#view-payments > .pm-previews > h3 {
  margin-top: 0;
  margin-bottom: var(--md);
  font-size: clamp(1.125rem, 2.2vw, 1.5rem);
  font-variation-settings: 'wdth' 112;
}

#payments-preview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--lg);
  align-items: start;
}

#payments-preview .wa-preview { max-width: none; }
#view-payments .pm-group-head {
  padding-bottom: var(--xs);
  border-bottom: 1px solid var(--rule);
}
#view-payments .wa-preview .reasons { margin-bottom: 0; }
#view-payments .wa-preview .reasons li {
  border-left: 0;
  padding: var(--sm) 0;
}
#view-payments .wa-preview .reasons li:last-child { border-bottom: 0; }

#view-payments .pm-menu-label {
  display: block;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 650;
  font-variation-settings: 'wdth' 100;
  line-height: 1.3;
}
#view-payments .pm-menu-note {
  display: block;
  margin-top: 2px;
  font-family: var(--display);
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-secondary);
}

#view-payments .pm-generated {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sm);
  margin: var(--md) 0 0;
  padding-top: var(--sm);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  max-width: none;
}
#view-payments .pm-generated-label { text-transform: uppercase; }
#view-payments .pm-generated-at { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   The second panel: where the table and the menu disagree
   -------------------------------------------------------------------------- */

#view-payments .pm-aside {
  display: block;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  padding: var(--md);
}
#view-payments .pm-aside--alarm { border-top-color: var(--mark-ink); }
#view-payments .pm-aside--whole { grid-column: 1 / -1; }

#view-payments .pm-mark { display: block; color: var(--mark-ink); margin-bottom: var(--sm); }

#view-payments .pm-aside-head {
  margin: 0 0 var(--sm);
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
#view-payments .pm-aside--alarm .pm-aside-head { color: var(--mark-ink); }

#view-payments .pm-aside-line {
  margin: 0;
  font-family: var(--display);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 46ch;
}
#view-payments .pm-aside--alarm .pm-aside-line,
#view-payments .pm-aside--alarm p.alarm {
  border-left: 2px solid var(--mark-ink);
  padding-left: var(--md);
  color: var(--mark-ink);
  font-weight: 400;
}

#view-payments .pm-withheld { list-style: none; margin: 0 0 var(--md); padding: 0; }
#view-payments .pm-withheld li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sm);
  padding: var(--sm) 0;
  border-bottom: 1px solid var(--rule);
}
#view-payments .pm-withheld li .pm-menu-label { display: inline; }
#view-payments .pm-withheld .flag { margin-left: 0; }

/* --------------------------------------------------------------------------
   Narrow. Reviewers and finance both work from phones; 320px is a normal case.
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  #view-payments > p.muted { font-size: 1rem; margin-bottom: var(--md); }
  #view-payments .pm-plate { margin-bottom: var(--md); }
  #payments-table th { padding: 12px var(--sm); }
  #payments-table td { padding: 12px var(--sm); }
  #view-payments .pm-why { max-width: 28ch; }
  #payments-preview { gap: var(--md); }
  #view-payments .pm-aside--whole { grid-column: auto; }
}