/**
 * company — the inspector.
 *
 * One screen, one question: why a given contractor was, or was not, told about a given
 * tender. The gate trace is the centre of it, so the trace is the only thing on this
 * screen that gets the document plate — a 2px ink head rule and the registration offset,
 * the one depth device this system permits.
 *
 * Shared primitives live in style.css and are not redefined here. `.card` is already a
 * ruled sheet; `.field-grid`, `.scroller`, `.flag`, `.result`, `.loading`, `.absent` and
 * the table rules all come from there. What follows is only what `views/company.js`
 * emits and style.css does not already dress.
 *
 * Marking Orange budget for this screen, six elements at most:
 *
 *   --mark (24px and above)  1. the Find button's ground (style.css)
 *                            2. the deciding gate's verdict word
 *   --mark-ink (below 24px)  3. the deciding gate's name
 *                            4. the leader tying that gate to its row
 *                            5. `ceiling unverified`, when the row is unverified
 *                            6. `expired`, when a document has lapsed
 *
 * Every gate outcome prints its word — PASSED, FAILED, FAILED — TERMINAL,
 * FAILED — NEAR MISS, NOT RECORDED. Colour never carries an outcome on its own, and
 * nothing here is expressed with opacity.
 *
 * PPRA terms print exactly as the law writes them: `01/01`, a bare `E`, `citizen100`.
 * Nothing in this file uppercases, expands or otherwise prettifies a stored value, and
 * nothing marks a code as missing — the PPRA numbering has real gaps and a gap is not
 * an error.
 */

/* --------------------------------------------------------------------------
   The toolbar. A disabled control says why, in text, where a phone can see it.
   -------------------------------------------------------------------------- */

#view-company .toolbar { align-items: center; }
#view-company #company-search { flex: 1 1 220px; min-width: 0; }
#view-company #company-find,
#view-company #company-rematch { flex: 0 0 auto; }

/* app.js puts the refusal in `title`, which is a tooltip and therefore invisible on the
   phone this console is read from. company.js repeats it as text; it takes its own line
   under the controls so it is never mistaken for a field label. */
.co-rematch-note {
  flex: 1 0 100%;
  margin: var(--xs) 0 0;
  font-size: 0.8125rem;
  color: var(--ink-secondary);
  max-width: none;
  text-align: right;
}

/* --------------------------------------------------------------------------
   Search results. A company name is prose, not a measured value.
   -------------------------------------------------------------------------- */

#company-matches tbody td:first-child {
  font-family: var(--display);
  font-size: 0.875rem;
}
#company-matches .card { margin-bottom: var(--lg); }

/* --------------------------------------------------------------------------
   The sheets. Printer's furniture: a registration corner at head and foot.
   -------------------------------------------------------------------------- */

.co-identity,
.co-registrations,
.co-documents,
.co-wallet,
.co-trace {
  position: relative;
}

.co-identity::before, .co-identity::after,
.co-registrations::before, .co-registrations::after,
.co-documents::before, .co-documents::after,
.co-wallet::before, .co-wallet::after,
.co-trace::before, .co-trace::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  border: 0 solid var(--ink);
  pointer-events: none;
}
.co-identity::before, .co-registrations::before, .co-documents::before,
.co-wallet::before, .co-trace::before {
  top: -1px;
  left: -1px;
  border-width: 1px 0 0 1px;
}
.co-identity::after, .co-registrations::after, .co-documents::after,
.co-wallet::after, .co-trace::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 1px 1px 0;
}

/* A sheet's heading sits over a 2px ink rule — the emphasis rule of this system. */
.co-registrations > h3,
.co-documents > h3,
.co-wallet > h3 {
  margin-bottom: var(--md);
  padding-bottom: var(--sm);
  border-bottom: 2px solid var(--ink);
}

/* --------------------------------------------------------------------------
   Identity
   -------------------------------------------------------------------------- */

.co-identity { border-top: 2px solid var(--ink); }

.co-identity > h3 {
  display: block;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.025em;
  font-variation-settings: 'wdth' 112;
  margin-bottom: var(--md);
}
.co-name {
  display: block;
  overflow-wrap: anywhere;
}

/* The record's own id. A measured value, so mono, and on its own line. */
.co-id {
  display: block;
  margin-top: var(--xs);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* The facts column is narrow, so the label track is narrower here than the default. */
.co-identity .field-grid { grid-template-columns: minmax(88px, 36%) minmax(0, 1fr); }

/* --------------------------------------------------------------------------
   Registrations. `01/01` and `E` print exactly as the instruments write them.
   -------------------------------------------------------------------------- */

.co-code {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.co-grade {
  color: var(--ink);
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0.04em;
}

/* The status flag is the only thing in its cell, so it sets flush and may wrap —
   the facts column is narrow and a nowrap flag would push the table into a scroll. */
.co-registrations td .flag,
.co-documents td .flag {
  margin-left: 0;
  white-space: normal;
}
.co-registrations td, .co-registrations th { padding-right: var(--sm); }

/* style.css's `.warn` utility tints a whole row. Here only the status word carries the
   signal — the type, the code and the date are facts, not warnings, and orange is
   rationed. The 2px mark-ink rule on the row stays. */
#view-company tr.warn > td { color: var(--ink); }
#view-company tr.warn > td .flag-warn { color: var(--mark-ink); }

/* --------------------------------------------------------------------------
   Documents
   -------------------------------------------------------------------------- */

.co-doc-note {
  margin: 0 0 var(--sm);
  padding-top: var(--sm);
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   Wallet. The finance-only refusal is a stated plate, not a blank.
   -------------------------------------------------------------------------- */

.co-wallet th.num { text-align: right; padding-right: var(--lg); }

.co-withheld-plate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--md);
  min-height: 176px;
  margin-bottom: var(--sm);
  padding: var(--lg) var(--md);
  background: var(--paper-sunk);
  border: 1px dashed var(--rule);
  text-align: center;
}
.co-lock {
  flex: none;
  width: 28px;
  height: 35px;
  color: var(--ink-secondary);
}
.co-withheld {
  margin: 0;
  max-width: 34ch;
  font-family: var(--display);
  font-size: 0.9375rem;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   The gate trace plate. The one sheet on this screen carrying the registration
   offset — hard, zero blur, ink. Nothing else in this console may have a shadow.
   -------------------------------------------------------------------------- */

.co-trace {
  border: 1px solid var(--ink);
  border-top-width: 2px;
  box-shadow: 3px 3px 0 0 var(--ink);
  padding: var(--md) var(--md) var(--md);
}

.co-trace > h3 {
  font-size: clamp(1.375rem, 2.8vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variation-settings: 'wdth' 118;
  margin-bottom: var(--sm);
}

/* Title, deck and rule read as one printed head. */
.co-trace > h3 + p.muted {
  margin-bottom: var(--md);
  padding-bottom: var(--md);
  border-bottom: 2px solid var(--ink);
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  max-width: none;
}

.co-source-note {
  margin: 0 0 var(--md);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   One match, one sheet
   -------------------------------------------------------------------------- */

.co-matches {
  list-style: none;
  margin: 0;
  padding: 0;
}
.co-match {
  list-style: none;
  margin: 0 0 var(--lg);
}
.co-match:last-child { margin-bottom: 0; }

.co-match-sheet > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--xs) var(--sm);
  padding: var(--sm) 0;
  border-bottom: 1px solid var(--rule);
  list-style: none;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}
.co-match-sheet > summary::-webkit-details-marker { display: none; }
.co-match-sheet[open] > summary { border-bottom-color: var(--ink); }
.co-match-sheet > summary:hover { background: var(--paper-sunk); }
.co-match-sheet > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }

/* The marker is a registration cross, not a chat chevron. It turns to an x when open. */
.co-match-marker {
  flex: 0 0 12px;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 120ms linear;
}
.co-match-sheet[open] .co-match-marker { transform: rotate(45deg); }

.co-match-title {
  flex: 1 1 12ch;
  min-width: 0;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* The stored match state, printed as the record spells it. Never sentence-cased. */
.co-state {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
  border: 1px solid var(--rule);
  padding: 2px 5px;
  white-space: nowrap;
}
.co-rel {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}
.co-rel:empty { display: none; }

/* The one-line answer, quoted the way a verdict is quoted anywhere in this system. */
.co-reason {
  margin: var(--md) 0;
  padding: var(--xs) 0 var(--xs) var(--md);
  border-left: 2px solid var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   The plate: gate outcomes set down on a sunk ground, tied to a leader spine
   -------------------------------------------------------------------------- */

.co-plate {
  --spine: 8px;
  --lead: 26px;
  margin: var(--md) 0 0;
  padding: var(--sm) var(--sm) var(--sm) 0;
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
}

.co-gates {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--lead);
}
/* The spine the leaders run to. */
.co-gates::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--spine);
  width: 1px;
  background: var(--rule);
}

.co-gate {
  position: relative;
  list-style: none;
  padding: var(--md) var(--sm) var(--md) var(--md);
  border-bottom: 1px solid var(--rule);
}
.co-gate:last-child { border-bottom: 0; }

/* Leader: a hairline out to the spine, and a node on it. */
.co-gate::before {
  content: '';
  position: absolute;
  top: calc(var(--md) + 8px);
  left: calc(var(--spine) - var(--lead));
  width: calc(var(--lead) - var(--spine));
  height: 1px;
  background: var(--ink);
}
.co-gate::after {
  content: '';
  position: absolute;
  top: calc(var(--md) + 6px);
  left: calc(var(--spine) - var(--lead) - 2px);
  width: 5px;
  height: 5px;
  background: var(--ink);
}

.co-gate-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--xs) var(--sm);
  margin: 0;
  max-width: none;
}

.co-gate-n {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
}

/* The console's gate vocabulary, printed as the trace's own field names. */
.co-gate-name {
  font-family: var(--mono);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

/* Every outcome prints its word. The box distinguishes pass from fail without colour. */
.co-gate-outcome {
  margin-left: auto;
  padding: 2px 5px;
  border: 1px solid transparent;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--ink-secondary);
  white-space: nowrap;
}
.co-gate[data-outcome='pass'] .co-gate-outcome {
  border-color: var(--rule);
  color: var(--ink-secondary);
}
.co-gate[data-outcome='fail'] .co-gate-outcome {
  border-color: var(--ink);
  color: var(--ink);
  font-weight: 600;
}
.co-gate[data-outcome='unrecorded'] .co-gate-outcome {
  border-style: dashed;
  border-color: var(--rule);
  color: var(--ink-secondary);
}

/* The measured comparison, when the trace recorded one. A gate whose compared values
   the trace does not hold simply prints no line here. */
.co-gate-compare {
  margin: var(--sm) 0 0;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  max-width: none;
}

/* Prose the trace supports. A ruled inset, the way a quoted clause is set anywhere. */
.co-gate-note {
  margin: var(--sm) 0 0;
  padding: var(--sm) var(--sm);
  background: var(--paper);
  border: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 66ch;
}

/* --------------------------------------------------------------------------
   The deciding gate. This is the answer, so it lifts off the plate as a sheet
   and states its verdict at 24px — the size at which Marking Orange is legal.
   -------------------------------------------------------------------------- */

.co-gate--deciding {
  background: var(--paper-lit);
  border-left: 2px solid var(--ink);
  border-bottom-color: var(--ink);
}
/* The row's containing block moved right by its 2px rule; the leader follows it. */
.co-gate--deciding::before {
  left: calc(var(--spine) - var(--lead) - 2px);
  width: calc(var(--lead) - var(--spine) + 2px);
  background: var(--mark-ink);
}
.co-gate--deciding::after {
  top: calc(var(--md) + 5px);
  left: calc(var(--spine) - var(--lead) - 5px);
  width: 7px;
  height: 7px;
  background: var(--mark-ink);
}

.co-gate--deciding .co-gate-name { color: var(--mark-ink); }
.co-gate--deciding .co-gate-compare { color: var(--ink); }

.co-gate--deciding .co-gate-outcome {
  flex: 1 0 100%;
  margin: var(--sm) 0 0;
  padding: 0;
  border: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: 'wdth' 118;
  text-transform: none;
  color: var(--mark);
  white-space: normal;
}

/* "This gate set the outcome." is a statement, not a quoted clause. */
.co-gate-note.co-gate-decided {
  margin-top: var(--sm);
  padding: 0;
  background: transparent;
  border: 0;
  font-weight: 600;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Plate footers: every gate passed, or the trace could not be read at all.
   -------------------------------------------------------------------------- */

.co-plate-foot {
  margin: var(--md) var(--sm) var(--sm) var(--md);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  max-width: 66ch;
}
/* The unreadable trace is the whole plate, so it is set as a stated condition. */
.co-plate-foot:only-child {
  margin: 0;
  padding: var(--md);
  border-left: 2px solid var(--ink);
  font-size: 0.9375rem;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Empty and loading. An empty table says so in a sentence.
   -------------------------------------------------------------------------- */

td.co-empty {
  font-family: var(--display);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-secondary);
  padding-top: var(--md);
  padding-bottom: var(--md);
}

.co-match.co-empty-line {
  margin: 0;
  padding: var(--md);
  border: 1px solid var(--rule);
  background: var(--paper-sunk);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
}

#company-detail > .loading { padding: var(--md) 0; }

/* --------------------------------------------------------------------------
   Layout. Facts left, the trace right, where it has room to be read.
   -------------------------------------------------------------------------- */

.co-col { min-width: 0; }
.co-col > .card:last-child { margin-bottom: 0; }

@media (min-width: 1000px) {
  #company-detail:has(> .co-col) {
    display: grid;
    grid-template-columns: minmax(260px, 340px) minmax(0, 1fr);
    gap: var(--lg);
    align-items: start;
  }
  /* The trace is why anyone opened this screen, so it heads its column. */
  .co-col--plate {
    display: flex;
    flex-direction: column;
  }
  .co-col--plate > .co-trace { order: -1; }
}

@media (min-width: 1320px) {
  .co-col--plate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 var(--lg);
    align-items: start;
  }
  .co-col--plate > .co-trace {
    grid-column: 1 / -1;
    order: -1;
  }
}

/* --------------------------------------------------------------------------
   Narrow. Reviewers read this from a phone in the sun, so 320px is normal.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .co-plate {
    --spine: 5px;
    --lead: 18px;
  }
  .co-gate { padding: var(--sm) var(--xs) var(--sm) var(--sm); }
  .co-gate::before { top: calc(var(--sm) + 8px); }
  .co-gate::after { top: calc(var(--sm) + 6px); }
  .co-gate--deciding::after { top: calc(var(--sm) + 5px); }
  .co-gate--deciding { padding-left: calc(var(--sm) - 2px); }

  .co-gate-outcome { margin-left: 0; }
  .co-gate--deciding .co-gate-outcome { font-size: 1.5rem; }

  .co-rematch-note { text-align: left; }
  .co-trace { padding: var(--sm); }
  .co-plate-foot { margin-left: var(--sm); }
  .co-identity .field-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   The WhatsApp number

   The one identifier the contractor themselves has, and until now the one fact this
   screen did not show. It is read-only, so it sets as a fact in the field grid rather
   than as anything pressable, and the note under it says why there is no control.
   -------------------------------------------------------------------------- */

.wa-line {
  display: block;
  margin-bottom: var(--xs);
  overflow-wrap: anywhere;
}
.wa-line .mono { font-variant-numeric: tabular-nums; }

.wa-note {
  display: block;
  margin-top: var(--xs);
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   The code finder

   Sits above the registration form and fills it in. A registration is the highest-
   leverage edit on this screen — the pair decides which tenders this contractor is ever
   shown — so the results are a list of real choices to read, not a typeahead that
   disappears.
   -------------------------------------------------------------------------- */

.code-finder {
  margin: 0 0 var(--md);
  padding: var(--md);
  background: var(--paper-sunk);
  border-left: 2px solid var(--ink);
}
.code-finder .row { gap: var(--sm); }
.code-finder .code-finder-q { flex: 1 1 auto; min-width: 0; }

.code-hits {
  list-style: none;
  margin: var(--md) 0 0;
  padding: 0;
}
.code-hits > li + li { border-top: 1px solid var(--rule); }

/* The whole row is the control. A code is picked by reading the trade text beside it,
   so the trade text has to be inside the target, not next to it. */
.code-hit {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  gap: var(--xs) var(--md);
  width: 100%;
  padding: var(--sm) var(--xs);
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
}
.code-hit:hover { background: var(--paper-lit); }

.code-hit-pair {
  grid-row: 1 / span 2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.code-hit-what { font-weight: 600; overflow-wrap: anywhere; }
.code-hit-cat { grid-column: 2; overflow-wrap: anywhere; }
.code-hit-marks { grid-column: 2; }
.code-hit-marks:empty { display: none; }

/* Picked: the pair below now holds this one. Marked so it is obvious which of a dozen
   near-identical trade lines was actually taken. */
.code-hit-picked {
  background: var(--paper-lit);
  box-shadow: inset 2px 0 0 var(--ink);
}

/* --------------------------------------------------------------------------
   A registration change

   Several codes added, corrected or removed as one change and one reason. A row ticked
   for removal is struck through where it stands, so the table still reads as what they
   hold today while showing what is about to go.
   -------------------------------------------------------------------------- */

.reg-table .reg-mark-col,
.reg-table .reg-mark-cell { width: 1%; text-align: center; }
.reg-table tr.reg-marked td:not(.reg-mark-cell) {
  color: var(--ink-secondary);
  text-decoration: line-through;
}

.code-paste { display: grid; gap: var(--xs); margin: 0 0 var(--md); }
.code-paste textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.code-staged-list {
  list-style: none;
  margin: 0 0 var(--sm);
  padding: 0;
  border-top: 1px solid var(--rule);
}
.code-staged {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sm);
  padding: var(--xs) 0;
  border-bottom: 1px solid var(--rule);
}
.code-staged-remove { grid-template-columns: minmax(64px, auto) minmax(0, 1fr) auto; }
.code-staged-pair { font-weight: 600; font-variant-numeric: tabular-nums; }
.code-staged-remove .code-staged-pair { text-decoration: line-through; }
.code-staged-what { overflow-wrap: anywhere; }

.code-stage-all { display: block; margin: 0 0 var(--sm); }
.code-expiry-label { display: grid; gap: var(--xs); max-width: 36rem; margin: var(--sm) 0; }

.code-preview { margin: var(--sm) 0; padding: var(--sm) var(--md); background: var(--paper-sunk); }
.code-preview:empty { display: none; }
.code-change-actions { gap: var(--sm); }

@media (max-width: 640px) {
  .code-staged { grid-template-columns: minmax(56px, auto) minmax(0, 1fr); }
}