/* ledger — view-specific rules. Shared primitives live in style.css.
 *
 * Screen 09, Ledger operations. Two posting forms whose only job is to make
 * irreversibility legible before someone commits, so the screen is built as one
 * document plate rather than as two panels: a single ruled sheet, divided down the
 * middle by a hairline, carrying the one depth device this system permits — the print
 * registration offset, hard and with zero blur. One plate, once. See DESIGN.md.
 *
 * Every colour here is a token. Every corner is square. Every state that is carried by
 * a rule or a colour also prints its word.
 */

/* --------------------------------------------------------------------------
   The page
   -------------------------------------------------------------------------- */

#view-ledger {
  max-width: 1180px;
}

/* The screen's own structural statement, set at display weight and width as the
   approved design has it. */
#view-ledger > h2 {
  font-size: clamp(1.75rem, 4.4vw, 2.875rem);
  font-weight: 700;
  font-variation-settings: 'wdth' 118;
  letter-spacing: -0.035em;
  line-height: 0.95;
  text-transform: uppercase;
  margin-bottom: var(--md);
}

/* p.warn is already the ruled band this design asks for — paper-sunk ground, a 2px ink
   rule at the left, ink text. It only needs the room the design gives it. */
#view-ledger > p.warn {
  margin-bottom: var(--lg);
  font-size: 1rem;
  line-height: 1.5;
}

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

#view-ledger .split-forms {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: var(--lg);
  margin-bottom: var(--lg);
  background: var(--paper-lit);
  /* Hairline edge, so the ink registration marks at the corners are legible against it
     rather than disappearing into a border of the same colour. */
  border: 1px solid var(--rule);
  /* The one permitted depth device: print registration, hard, zero blur. Once. */
  box-shadow: 3px 3px 0 0 var(--ink);
}

/* Printer's furniture: a 10px corner mark — two 1px ticks meeting at a right angle — at
   each of the four corners. This module owns no markup inside the plate, so the four
   marks are cut out of a single sheet of flat ink rather than being four elements: the
   pseudo-element is filled with `--ink` and masked by four inline SVG corner shapes.
   The colour is the token, the mask only says where the ink lands. No gradient is
   involved, and nothing here fades. */
#view-ledger .split-forms::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
}

@supports (mask-image: none) or (-webkit-mask-image: none) {
  #view-ledger .split-forms::before {
    background-color: var(--ink);
    -webkit-mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0h10v1H1v9H0z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0h10v10H9V1H0z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0h1v9h9v1H0z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M9 0h1v10H0V9h9z'/%3E%3C/svg%3E");
    mask-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0h10v1H1v9H0z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0h10v10H9V1H0z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M0 0h1v9h9v1H0z'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M9 0h1v10H0V9h9z'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 10px 10px;
    mask-size: 10px 10px;
    -webkit-mask-position: left top, right top, left bottom, right bottom;
    mask-position: left top, right top, left bottom, right bottom;
  }
}

/* The two forms are sheets on the plate, not sheets of their own. */
#view-ledger .split-forms > .card {
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}

/* Stacked below the divide, the hairline runs across instead of down. Honest at 320px:
   one column, no minimum track width, nothing pushed off the right edge. */
#view-ledger .split-forms > .card + .card {
  margin-top: var(--lg);
  padding-top: var(--lg);
  border-top: 1px solid var(--rule);
}

@media (min-width: 900px) {
  #view-ledger .split-forms {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #view-ledger .split-forms > .card:first-child {
    padding-right: var(--lg);
  }
  #view-ledger .split-forms > .card + .card {
    margin-top: 0;
    padding-top: 0;
    padding-left: var(--lg);
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
}

@media (max-width: 560px) {
  #view-ledger .split-forms {
    padding: var(--md);
  }
}

/* --------------------------------------------------------------------------
   Headings and controls on the plate
   -------------------------------------------------------------------------- */

#view-ledger .split-forms h3 {
  margin: 0 0 var(--md);
  padding-bottom: var(--sm);
  font-size: 1.375rem;
  font-weight: 650;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.02em;
  border-bottom: 2px solid var(--ink);
}

#view-ledger .split-forms > .card > p.muted {
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 46ch;
}

/* On the lit sheet a paper-ground field reads as a well. The design rules the field
   instead and leaves the sheet showing through. */
#view-ledger .split-forms input,
#view-ledger .split-forms select,
#view-ledger .split-forms textarea {
  background: transparent;
  padding: 10px;
}

/* A uid is a value that is cited and legally identified, so it sets in mono like the
   company id and the amount. The memo is prose and stays in Archivo. */
#view-ledger .split-forms input[name='secondApproverUid'] {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* style.css strips the native select arrow so no UA paints a rounded control. Draw the
   caret back as two hairlines — a printed mark, not an icon font. */
#view-ledger .split-forms label:has(> select) {
  position: relative;
}
#view-ledger .split-forms label:has(> select)::after {
  content: '';
  position: absolute;
  right: 13px;
  bottom: 17px;
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  transform: rotate(45deg);
  pointer-events: none;
}

/* One primary action per sheet, full width, ink on Marking Orange — the accessible
   pairing and the authentic one. Two on the screen, which is the whole orange budget. */
#view-ledger .split-forms button.primary {
  width: 100%;
  margin-top: var(--sm);
  padding: 16px 28px;
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   The second approver requirement
   -------------------------------------------------------------------------- */

/* The word `required`, set as a ruled mono chip beside the label rather than as a
   colour on the label text. Marking Ink, because this is well below 24px. */
#view-ledger #credit-approver-label .req {
  display: inline-block;
  margin-left: var(--sm);
  padding: 2px 5px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--mark-ink);
  color: var(--mark-ink);
}

/* A required field must not look optional. The rule at the field's left edge is the
   same device the warning band uses, so it reads as the same kind of statement. */
#view-ledger #credit-approver-label[data-lg-required='true'] input {
  border-left: 2px solid var(--mark-ink);
}

/* The confirm field, when the two amounts disagree. */
#view-ledger label[data-lg-mismatch='true'] input {
  border-left: 2px solid var(--mark-ink);
}

/* --------------------------------------------------------------------------
   Notes this module writes: the echo, the requirement, the mismatch
   -------------------------------------------------------------------------- */

/* Tucked under the field it belongs to — labels carry a 16px foot, and a note that
   floats halfway to the next field belongs to neither. */
#view-ledger .lg-echo,
#view-ledger .lg-note,
#view-ledger .lg-after {
  margin: -12px 0 var(--md);
  max-width: none;
}

#view-ledger .lg-echo {
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

#view-ledger .lg-note {
  padding: var(--sm) var(--md);
  background: var(--paper-sunk);
  border-left: 2px solid var(--mark-ink);
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* Settled: the requirement is met, or the two amounts agree. Ink, not orange — nothing
   is wrong, and orange means a gate. The sentence still says which it is. */
#view-ledger .lg-note.lg-note-settled {
  background: transparent;
  border-left-color: var(--ink);
}

/* A mono key in front of a plain sentence: the label is a mark, the sentence is prose. */
#view-ledger .lg-key {
  display: inline-block;
  margin-right: var(--sm);
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

/* Pula amounts, thebe integers, uids: measured values, so mono, always with the unit. */
#view-ledger .lg-amt,
#view-ledger .lg-uid {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
#view-ledger p.warn .lg-amt {
  font-size: 0.875rem;
}

/* An unread value prints its word. It is never blank and never a guess. */
#view-ledger .lg-absent {
  font-style: italic;
  color: var(--ink-secondary);
}

/* --------------------------------------------------------------------------
   In flight
   -------------------------------------------------------------------------- */

#view-ledger .lg-status {
  display: block;
  margin: 0 0 var(--sm);
  padding: var(--sm) var(--md);
  background: var(--paper-sunk);
  border-left: 2px solid var(--ink);
  font-size: 0.875rem;
  line-height: 1.4;
  max-width: none;
}
#view-ledger .lg-status-text {
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Results
   -------------------------------------------------------------------------- */

/* app.js sets `ok` or `error`; the word is printed here so the rule colour is never
   doing the work on its own. Same device as the drift list in style.css. */
#view-ledger .result {
  padding: var(--sm) var(--md);
  border-left-width: 2px;
  background: var(--paper);
}
#view-ledger .result::before {
  display: block;
  margin-bottom: 2px;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
#view-ledger .result.ok::before {
  content: 'posted';
  color: var(--ink);
}
#view-ledger .result.error::before {
  content: 'refused';
  color: var(--mark-ink);
}
#view-ledger .result.warn::before {
  content: 'warning';
  color: var(--mark-ink);
}

/* What the operator has to know once the entry exists, printed at the moment it is
   load-bearing rather than only in the band at the top of the screen. */
#view-ledger .lg-after {
  margin-top: calc(var(--sm) * -1);
  padding-left: var(--md);
  border-left: 2px solid var(--rule);
  font-size: 0.875rem;
  color: var(--ink-secondary);
}
#view-ledger .lg-after-refused {
  border-left-color: var(--mark-ink);
}

/* --------------------------------------------------------------------------
   Permission
   -------------------------------------------------------------------------- */

/* Reachable only by a deep link under a role app.js does not offer this tab to, but a
   control that will refuse must say so before it is used, not after. */
#view-ledger .lg-permission {
  margin-bottom: var(--lg);
  padding: var(--md);
  background: var(--paper-sunk);
  border-left: 2px solid var(--mark-ink);
}
#view-ledger .lg-permission p {
  margin: 0;
}

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

@media (max-width: 420px) {
  #view-ledger .lg-echo,
  #view-ledger .lg-note,
  #view-ledger .lg-after {
    margin-top: -10px;
  }
  #view-ledger .split-forms button.primary {
    padding: 16px 12px;
  }
}

/* --------------------------------------------------------------------------
   The wallet the money is going to
   
   Both postings are addressed by the contractor's own WhatsApp number. Two things sit
   under that field and they say different things, so they must not look alike: the echo
   this module writes is the number *as it will be sent*, and the line app.js writes is
   the name of the company that number belongs to. The second is the one an operator
   reads back down a phone line, so it carries the weight.
   -------------------------------------------------------------------------- */

#view-ledger .lg-holder {
  margin: -12px 0 var(--md);
  max-width: none;
  min-height: 1.2em;
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

/* Found: this is whose wallet it lands in. Ink and a rule, because it is the fact the
   whole posting turns on — not a hint. */
#view-ledger .lg-holder.lg-holder-found {
  padding-left: var(--md);
  border-left: 2px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
}

/* Nobody holds that number. Marked, because pressing the button now is a refusal
   waiting to happen and the operator should read the number again first. */
#view-ledger .lg-holder.lg-holder-bad {
  padding-left: var(--md);
  border-left: 2px solid var(--mark-ink);
  color: var(--ink);
}

#view-ledger .lg-echo.lg-echo-bad {
  color: var(--ink);
}