/* invites — view-specific rules. Shared primitives live in style.css.
 *
 * Two things happen on this screen, and they are not the same thing:
 *
 *   1. Issuing. Two forms on one plate. A console invitation grants a permission scope
 *      inside this console for seven days; a contractor invitation sends a WhatsApp deep
 *      link and never produces a web sign-in. The plate keeps them side by side because
 *      they are both issuance, and the hairline between them keeps them distinct.
 *   2. The register. Every invitation issued, with its status printed as a word.
 *
 * Both are set down as document plates: a paper-lit sheet, a 2px ink rule, and the one
 * depth device this system permits — a hard 3px registration offset with zero blur.
 * Everything is scoped to `#view-invites`, because thirteen other views share this
 * stylesheet's cascade and none of them asked for any of this.
 */

/* --------------------------------------------------------------------------
   The plates
   -------------------------------------------------------------------------- */

#view-invites .split-forms,
#view-invites .inv-plate {
  position: relative;
  background: var(--paper-lit);
  border: 2px solid var(--ink);
  /* The registration offset. Hard, zero blur, ink. The only shadow in the system. */
  box-shadow: 3px 3px 0 0 var(--ink);
  margin-bottom: var(--xl);
}

/* Printer's furniture: trim corners on the sheet. Decoration only — the plate reads
   correctly before any script runs, and the lower pair simply does not appear if the
   module never loads. */
#view-invites .split-forms::before,
#view-invites .split-forms::after,
#view-invites .inv-plate::before,
#view-invites .inv-plate::after,
#view-invites .inv-marks::before,
#view-invites .inv-marks::after {
  content: '';
  position: absolute;
  width: 9px;
  height: 9px;
  pointer-events: none;
}
#view-invites .split-forms::before,
#view-invites .inv-plate::before,
#view-invites .inv-marks::before {
  top: 6px;
  left: 6px;
  border-top: 1px solid var(--ink);
  border-left: 1px solid var(--ink);
}
#view-invites .split-forms::after,
#view-invites .inv-plate::after,
#view-invites .inv-marks::after {
  top: 6px;
  right: 6px;
  border-top: 1px solid var(--ink);
  border-right: 1px solid var(--ink);
}
#view-invites .inv-marks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
#view-invites .inv-marks::before {
  top: auto;
  bottom: 6px;
  border-top: 0;
  border-bottom: 1px solid var(--ink);
}
#view-invites .inv-marks::after {
  top: auto;
  bottom: 6px;
  border-top: 0;
  border-bottom: 1px solid var(--ink);
}

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

/* One column until there is room for two. `auto-fit` with a 320px minimum overflows a
   320px phone by the difference, which is the whole viewport's worth of trouble. */
#view-invites .split-forms {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

@media (min-width: 900px) {
  #view-invites .split-forms { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* The two forms are panels on one plate, not two floating cards. */
#view-invites .split-forms > .card {
  background: transparent;
  border: 0;
  margin: 0;
  padding: var(--lg);
  min-width: 0;
}
#view-invites .split-forms > .card + .card { border-top: 1px solid var(--rule); }

@media (min-width: 900px) {
  #view-invites .split-forms > .card + .card {
    border-top: 0;
    border-left: 1px solid var(--rule);
  }
}

/* The record's own word for what this form issues, so the panel and the register's
   Kind column speak the same vocabulary. */
#view-invites .inv-kicker {
  display: block;
  font-family: var(--mono);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-bottom: var(--sm);
}

#view-invites .split-forms > .card > h3 {
  margin: 0 0 var(--md);
  font-size: 1.375rem;
  font-variation-settings: 'wdth' 112;
}

/* The standing explanation of what this form does. Prose, ruled at the left the way a
   marginal note is ruled in print. */
#view-invites .split-forms > .card > p.muted {
  max-width: 46ch;
  margin: 0 0 var(--md);
  padding: 2px 0 2px var(--md);
  border-left: 2px solid var(--ink);
  font-size: 0.9375rem;
  color: var(--ink-secondary);
}

/* The window, as a measured value. */
#view-invites .inv-term {
  display: block;
  margin: 0 0 var(--lg);
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-secondary);
}
#view-invites .inv-term strong {
  font-weight: 600;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Fields
   -------------------------------------------------------------------------- */

#view-invites .split-forms input,
#view-invites .split-forms select,
#view-invites .split-forms textarea {
  padding: 12px;
  background: var(--paper);
}

/* Mono is for measured values. An address, a role key and a token are cited things; a
   person's name, a company's name and a note to a colleague are prose. */
#view-invites .split-forms input[type='email'],
#view-invites .split-forms select {
  font-family: var(--mono);
  font-size: 0.8125rem;
}
#view-invites .split-forms textarea {
  min-height: 84px;
  line-height: 1.5;
}

/* style.css strips the native select arrow so the control can be square. Draw one —
   a shape, not an icon font. */
#view-invites .split-forms label:has(> select) { position: relative; }
#view-invites .split-forms label > select { padding-right: 30px; }
#view-invites .split-forms label:has(> select)::after {
  content: '';
  position: absolute;
  right: 12px;
  bottom: 20px;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--ink);
  pointer-events: none;
}

/* The primary action fills its panel. Marking Orange, ink type — this screen spends
   exactly two of its six permitted instances, one per form. */
#view-invites .split-forms button.primary {
  display: block;
  width: 100%;
  margin-top: var(--md);
}

/* --------------------------------------------------------------------------
   What a role reaches, at the point of choosing it
   --------------------------------------------------------------------------
   The four roles are permission scopes, not labels. A select shows one option at a
   time, so the scope of the chosen one is printed under it — this is the control that
   decides who can see contractors' data. */

#view-invites .inv-scope {
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ink);
  padding: var(--md);
  margin: 0 0 var(--md);
}
#view-invites .inv-scope p { margin: 0 0 var(--sm); max-width: 46ch; }
#view-invites .inv-scope p:last-child { margin-bottom: 0; }

#view-invites .inv-scope-key {
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
#view-invites .inv-label {
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-secondary);
  margin-right: var(--sm);
}
#view-invites .inv-scope-line { font-size: 0.9375rem; }
#view-invites .inv-scope-line .inv-mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
}
#view-invites .inv-scope-foot {
  font-size: 0.8125rem;
  color: var(--ink-secondary);
  border-top: 1px solid var(--rule);
  padding-top: var(--sm);
}

/* --------------------------------------------------------------------------
   Where a contractor invitation actually lands
   --------------------------------------------------------------------------
   The contractor never signs in here. The sequence is printed so the screen cannot be
   read as offering them a web account. */

#view-invites .inv-steps {
  list-style: none;
  counter-reset: inv-step;
  margin: 0 0 var(--md);
  padding: 0;
  border-top: 1px solid var(--rule);
}
#view-invites .inv-steps li {
  counter-increment: inv-step;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: var(--sm);
  padding: var(--sm) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
}
#view-invites .inv-steps li::before {
  content: counter(inv-step);
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-secondary);
  padding-top: 2px;
}
#view-invites .inv-nonweb {
  margin: 0 0 var(--md);
  font-size: 0.9375rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   A control that cannot act says why
   -------------------------------------------------------------------------- */

#view-invites .inv-why {
  display: block;
  margin: var(--xs) 0 0;
  font-family: var(--display);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-secondary);
  max-width: 34ch;
}
#view-invites .inv-why .inv-mono {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink);
}
#view-invites .inv-denied {
  margin: 0 0 var(--md);
  padding: var(--sm) 0 var(--sm) var(--md);
  border-left: 2px solid var(--mark-ink);
  font-size: 0.9375rem;
  color: var(--ink);
  max-width: 46ch;
}
#view-invites .inv-denied .inv-mono {
  font-family: var(--mono);
  font-size: 0.8125rem;
}

/* --------------------------------------------------------------------------
   The result region. It is the screen's only aria-live region; nothing here adds
   another one, and a link that failed to send has to wrap on a 320px phone.
   -------------------------------------------------------------------------- */

#view-invites #invite-result:not(:empty) {
  background: var(--paper-lit);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--ink);
  padding: var(--md);
  margin-bottom: var(--lg);
  max-width: 78ch;
}
#view-invites #invite-result.error,
#view-invites #invite-result.warn { border-left-color: var(--mark-ink); }
#view-invites #invite-result code {
  display: block;
  margin-top: var(--sm);
  padding: var(--sm);
  background: var(--paper-sunk);
  border: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   The register
   -------------------------------------------------------------------------- */

#view-invites .toolbar {
  border-bottom: 2px solid var(--ink);
  padding-bottom: var(--md);
}
#view-invites .toolbar-title {
  font-size: 1.375rem;
  font-variation-settings: 'wdth' 112;
}
#view-invites #invite-refresh {
  display: inline-flex;
  align-items: center;
  gap: var(--sm);
}
#view-invites .inv-icon { flex: none; }

#view-invites .inv-plate { margin-bottom: var(--lg); }
#view-invites .inv-plate .scroller {
  margin: 0;
  border-top: 0;
  /* Room for the trim corners at the head of the plate. */
  padding-top: 18px;
}

#view-invites #invites-table { min-width: 720px; }
#view-invites #invites-table th {
  padding: 12px var(--md) 12px 0;
  border-bottom: 2px solid var(--ink);
  color: var(--ink);
}
#view-invites #invites-table th:first-child,
#view-invites #invites-table td:first-child { padding-left: var(--md); }
#view-invites #invites-table th:last-child,
#view-invites #invites-table td:last-child { padding-right: var(--md); }
#view-invites #invites-table td { padding: 12px var(--md) 12px 0; }

/* A closed invitation is recessed and prints its word. It is never merely faded —
   opacity is not a state, and it is unreadable in bright light. */
#view-invites #invites-table tbody tr.inv-closed > td {
  background: var(--paper-sunk);
  color: var(--ink-secondary);
}
/* The live rows carry an ink edge, the way `.alarm-row` does in style.css. */
#view-invites #invites-table tbody tr.inv-open > td:first-child { border-left: 2px solid var(--ink); }
#view-invites #invites-table tbody tr.inv-closed > td:first-child { border-left: 2px solid var(--rule); }
#view-invites #invites-table tbody tr:hover > td { background: var(--paper); }
#view-invites #invites-table tbody tr.inv-closed:hover > td { background: var(--paper-sunk); }

/* Who: a name is prose, an address is an identifier. */
#view-invites .inv-name {
  display: block;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}
#view-invites .inv-email {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-secondary);
  margin-top: 2px;
  overflow-wrap: anywhere;
}

/* Kind: the record's own key, then what it names. */
#view-invites .inv-kind {
  display: block;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  color: var(--ink-secondary);
}
#view-invites .inv-company {
  display: block;
  font-family: var(--display);
  font-size: 0.875rem;
  color: var(--ink);
  margin-top: 2px;
}
#view-invites td .role-pill { margin-top: var(--xs); }

/* Status. Square, ruled, and always carrying its word — the register is read in
   sunlight on a phone, where hue is the first thing to go. */
#view-invites .status {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 3px 6px;
  border: 1px solid var(--rule);
  color: var(--ink-secondary);
  white-space: nowrap;
}
/* The live one is the only one set in ink. */
#view-invites .status-open {
  border-color: var(--ink);
  color: var(--ink);
}
/* A broken rule for an invitation whose link died without ever being redeemed. Form,
   not hue — and the word is printed either way. */
#view-invites .status-revoked,
#view-invites .status-withdrawn,
#view-invites .status-expired { border-style: dashed; }

/* The console's own word for the record's status, where the two differ. */
#view-invites .inv-gloss {
  display: block;
  margin-top: var(--xs);
  font-family: var(--display);
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}

#view-invites .inv-left {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-secondary);
}
#view-invites .inv-unit {
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--ink-secondary);
  margin-left: var(--xs);
}
#view-invites td .absent {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-style: italic;
  color: var(--ink-secondary);
}

#view-invites #invites-table td:last-child { white-space: normal; }
#view-invites #invites-table td:last-child button { margin: 0 var(--sm) var(--xs) 0; }

/* Empty, loading and failed rows are sentences, not blank rules. */
#view-invites .inv-note-row td {
  font-family: var(--display);
  font-size: 0.9375rem;
  color: var(--ink-secondary);
  padding: var(--lg) var(--md);
  background: transparent;
}
#view-invites .inv-note-row td .loading { display: inline-block; }

/* The plate's folio: what is on the register, and what the toggle is holding back. */
#view-invites .inv-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--xs) var(--md);
  margin: 0;
  padding: var(--sm) var(--md) 14px;
  border-top: 2px solid var(--ink);
  background: var(--paper-sunk);
  max-width: none;
}
#view-invites .inv-count {
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}
#view-invites .inv-hidden-note {
  font-family: var(--display);
  font-size: 0.8125rem;
  color: var(--ink-secondary);
}
#view-invites .inv-scroll-note {
  display: inline-flex;
  align-items: center;
  gap: var(--xs);
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--rule);
  padding: 2px 6px;
  background: var(--paper-lit);
}

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

@media (max-width: 700px) {
  #view-invites .split-forms > .card { padding: var(--md); padding-top: 22px; }
  #view-invites .split-forms,
  #view-invites .inv-plate { margin-bottom: var(--lg); }
  #view-invites .split-forms > .card > h3,
  #view-invites .toolbar-title { font-size: 1.1875rem; }
  #view-invites .toolbar { align-items: flex-start; }
  #view-invites .toolbar-title { flex: 1 0 100%; }
  #view-invites .inv-foot { padding: var(--sm) var(--md) 12px; }
  #view-invites .inv-scroll-note { margin-left: 0; }
}