/**
 * sales — Sales Operations, WhatsApp subscriptions.
 *
 * Shared primitives live in style.css and are reused rather than restated: `.card`,
 * `.scroller`, `.stage-board`, `.flag`, `.pill`, `.absent`, `.result`, `.view-error`,
 * `.loading`. What is here is the part of the approved design that has no primitive —
 * the three registers set down as document plates, the gate mark on the stage board,
 * and the narrow-screen behaviour of a screen made mostly of wide tables.
 *
 * Rules held throughout: zero radius, no shadow except the registration offset on a
 * plate, Marking Orange never below 24px, mono for measured values only, and no colour
 * that is not accompanied by a word. Every value is a token from style.css.
 */

/* --------------------------------------------------------------------------
   Section headings

   Scoped to direct children so the two form sheets keep `.card h3` untouched.
   -------------------------------------------------------------------------- */

#view-sales > h3 {
  margin-top: var(--xl);
  margin-bottom: var(--sm);
  font-size: 1.375rem;
  font-variation-settings: 'wdth' 112;
  letter-spacing: -0.02em;
}

#view-sales > h3 + p.muted {
  max-width: 62ch;
  margin-bottom: var(--md);
}

/* --------------------------------------------------------------------------
   The stage board

   Six derived counts on one printed band. The last stage takes the blue field from
   style.css because it is the one that pays; nothing here re-states that.
   -------------------------------------------------------------------------- */

#view-sales .stage-board {
  background: var(--paper-lit);
  margin-bottom: var(--sm);
}

#view-sales .stage {
  padding: var(--md) var(--sm) var(--sm);
}

#view-sales .stage .n {
  font-size: 2rem;
  line-height: 1;
}

#view-sales .stage .label {
  font-size: 0.625rem;
  letter-spacing: 0.1em;
}

/* The certificate is the gate. It is marked with a rule and with the word, never with
   hue alone — and in Marking Ink, because this mark sets well below 24px. */
#view-sales .stage.sl-gate {
  border-left: 2px solid var(--ink);
}

#view-sales .sl-gate-mark {
  display: inline-block;
  margin-top: var(--sm);
  padding: 1px 4px;
  border: 1px solid var(--mark-ink);
  color: var(--mark-ink);
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}

#view-sales .sl-board-note {
  margin: 0 0 var(--lg);
  max-width: 62ch;
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

/* --------------------------------------------------------------------------
   Document plates

   The registration offset is the single permitted depth device: hard, zero blur, on a
   plate. DESIGN.md forbids it on buttons, cards and bubbles, so the two form sheets
   below stay flat and only these three registers lift.
   -------------------------------------------------------------------------- */

#view-sales .sl-plate {
  position: relative;
  background: var(--paper-lit);
  border: 1px solid var(--rule);
  box-shadow: 3px 3px 0 0 var(--ink);
  /* Room for the offset, so a 320px page never scrolls sideways because of it. */
  margin: 0 3px var(--lg) 0;
}

#view-sales .sl-plate > .scroller {
  margin: 0;
  border-top: 0;
}

/* Printer's furniture: registration marks at the four corners of the sheet. */
#view-sales .sl-corners {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#view-sales .sl-plate::before,
#view-sales .sl-plate::after,
#view-sales .sl-corners::before,
#view-sales .sl-corners::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 0 solid var(--ink);
  pointer-events: none;
}

#view-sales .sl-plate::before { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
#view-sales .sl-plate::after { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
#view-sales .sl-corners::before { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
#view-sales .sl-corners::after { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }

/* The head band is the sunk tone with an emphasis rule under it. */
#view-sales .sl-plate thead {
  background: var(--paper-sunk);
}

#view-sales .sl-plate th {
  padding: var(--sm) var(--md);
  border-bottom: 2px solid var(--ink);
}

#view-sales .sl-plate td {
  padding: var(--sm) var(--md);
  vertical-align: middle;
}

#view-sales .sl-plate tbody tr:last-child > td {
  border-bottom: 0;
}

#view-sales .sl-plate td.num,
#view-sales .sl-plate th.num {
  padding-right: var(--md);
}

/* A scrollable region is a tab stop while it overflows, so it needs a visible ring. */
#view-sales .sl-plate > .scroller:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* The affordance is printed, not faded: this system has no gradients to fade with. */
#view-sales .sl-continues {
  display: none;
  align-items: center;
  gap: var(--sm);
  margin: 0;
  padding: var(--xs) var(--md) var(--sm);
  border-top: 1px solid var(--rule);
  color: var(--ink-secondary);
}

#view-sales .sl-plate[data-sl-overflow='true'] .sl-continues {
  display: flex;
}

#view-sales .sl-continues-word {
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

#view-sales .sl-arrow {
  flex: none;
}

/* Row actions are printed marks: mono, caps, square, ruled. */
#view-sales .sl-plate td button:not(.link) {
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 8px;
  white-space: nowrap;
}

/* app.js marks an empty-run trial with `warn` on the row, and style.css turns `.warn`
   text Marking Ink. A whole row of orange is unreadable in outdoor sun and spends the
   signal on something the flag already says. The row keeps the edge rule and the word,
   and gives the ink back. */
#view-sales #sales-trials tbody tr.warn > td {
  color: var(--ink);
}

/* A register that is loading, empty or unloaded says so in a sentence. */
#view-sales .sl-notice > td {
  padding: var(--md);
  border-bottom: 0;
}

#view-sales .sl-none {
  font-family: var(--display);
  font-size: 0.875rem;
  color: var(--ink-secondary);
}

/* --------------------------------------------------------------------------
   The two forms

   One decision each: what was done about a company, and whether to spend free days on
   a trial. Both stay flat ruled sheets — DESIGN.md keeps the offset off cards.
   -------------------------------------------------------------------------- */

/* `minmax(320px, 1fr)` on a 288px content column forces the grid wider than the page.
   Capping the minimum at the available width keeps the pair inside a 320px screen. */
#view-sales .split-forms {
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  margin-bottom: var(--lg);
}

#view-sales .split-forms > .card {
  margin-bottom: 0;
  padding: var(--md) var(--md) var(--md);
}

#view-sales .split-forms > .card > h3 {
  margin: 0 0 var(--md);
  padding-bottom: var(--sm);
  border-bottom: 1px solid var(--ink);
}

#view-sales .split-forms > .card > p.muted.small {
  max-width: 56ch;
}

#view-sales .sl-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 0 var(--md);
}

/* The allowance is the number that decides the extension, so it reads as a readout:
   a sunk inset with an ink edge, prose in Archivo and every measured value in mono. */
#view-sales #extend-allowance {
  max-width: none;
  margin: 0 0 var(--md);
  padding: var(--sm) var(--md);
  background: var(--paper-sunk);
  border-left: 2px solid var(--ink);
}

#view-sales .sl-val {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

#view-sales #activity-history {
  margin-top: var(--lg);
  padding-top: var(--md);
  border-top: 1px solid var(--rule);
}

#view-sales #activity-history h4 {
  margin: 0 0 var(--sm);
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}

#view-sales #activity-history table {
  font-size: 0.8125rem;
}

#view-sales #activity-history td {
  padding-right: var(--md);
}

/* --------------------------------------------------------------------------
   Refusal. No control refuses silently.
   -------------------------------------------------------------------------- */

#view-sales .view-error.sl-denied {
  border-left-color: var(--mark-ink);
}

#view-sales .sl-denied-note {
  margin: 0 0 var(--sm);
  max-width: 66ch;
}

#view-sales .sl-closed-note {
  margin: var(--sm) 0 var(--md);
  max-width: 56ch;
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

/* --------------------------------------------------------------------------
   Narrow. Reviewers and sales work from phones in the field, so 320px is normal.
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  #view-sales > h3 { margin-top: var(--lg); }
  #view-sales .stage-board { margin-bottom: var(--sm); }
  /* Stages stack below 900px, so the gate rule turns with them. */
  #view-sales .stage.sl-gate { border-left: 0; border-top: 2px solid var(--ink); }
}

@media (max-width: 560px) {
  #view-sales > h3 { font-size: 1.1875rem; }
  #view-sales .stage .n { font-size: 1.75rem; }
  /* The registration offset does not scale. DESIGN.md specifies it as a constant
     3px, not as a starting value, so it stays 3px here and the plate keeps the 3px
     right margin the base rule already gives it to sit inside a 320px page. */
  #view-sales .sl-plate th,
  #view-sales .sl-plate td { padding-left: var(--sm); padding-right: var(--sm); }
  #view-sales .sl-plate td.num,
  #view-sales .sl-plate th.num { padding-right: var(--sm); }
  #view-sales .split-forms > .card { padding: var(--md) var(--sm); }
}

/* ---------------------------------------------------------------------------
   The trial-extension cap.

   app.js prints the allowance as a sentence. These are the same figures set down
   as quantities, plus the consequence of the number in the days field — including
   the refusal, said while the number is still being chosen rather than after the
   operator has also written a reason.
   --------------------------------------------------------------------------- */

#view-sales .sl-cap {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hair);
  margin: var(--sm) 0;
  background: var(--rule);
  border: 1px solid var(--rule);
}
#view-sales .sl-figure {
  flex: 1 1 7rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--xs) var(--sm);
  background: var(--paper-lit);
}
#view-sales .sl-figure-label {
  font-family: var(--mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
#view-sales .sl-figure-value {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

#view-sales .sl-consequence {
  margin: var(--xs) 0 var(--sm);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 60ch;
}
#view-sales .sl-consequence-ok { color: var(--ink); }

/* A refused number is not a warning to read past. It gets the left rule and the
   word, and the save beside it is disabled while it stands. */
#view-sales .sl-consequence-refused {
  color: var(--ink);
  border-left: 2px solid var(--mark-ink);
  padding-left: var(--sm);
}
#view-sales .sl-refused-word {
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--mark-ink);
  margin-right: var(--xs);
}

@media (max-width: 40rem) {
  #view-sales .sl-figure { flex: 1 1 100%; }
}