/* The customer portal (Phase 3). Registry-ledger design, ADR-0011: the
   variables, type and buttons come from style.css; this file only lays
   out what the portal adds. */

.portal { max-width: 72rem; }
.portal h1 { font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.4rem); line-height: 1.1; margin: 0 0 0.6rem; }
.portal h2 { font-family: var(--serif); font-weight: 600; font-size: 1.3rem;
  margin: 1.8rem 0 0.6rem; }
.portal h3 { font-family: var(--serif); font-weight: 600; font-size: 1.05rem;
  margin: 1.2rem 0 0.4rem; }

.portal-login { max-width: 38rem; }
.pt-form label { display: block; font: 600 0.78rem var(--mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft);
  margin: 0.9rem 0 0.3rem; }
.pt-form input, .pt-form select, .pt-form textarea {
  font: inherit; padding: 0.5rem 0.6rem; border: 1px solid var(--rule);
  border-radius: 3px; background: var(--sheet); color: var(--ink);
  min-width: 0; }
.pt-form textarea { width: 100%; font-family: var(--mono); font-size: 0.85rem; }
.portal .pt-table select, .portal input[type=search], .portal .pt-drop input,
.portal .pt-row > select {
  font: inherit; padding: 0.35rem 0.5rem; border: 1px solid var(--rule);
  border-radius: 3px; background: var(--sheet); color: var(--ink); }
.portal input[type=search] { flex: 1 1 16rem; }
.pt-cell { display: inline-block; vertical-align: top; }
.pt-form .pt-cell .pt-note, .pt-form label .pt-note { font: 600 0.7rem var(--mono);
  text-transform: uppercase; letter-spacing: 0.05em; }
.pt-row { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.pt-row > input[type=email], .pt-row > input[type=text], .pt-row > input[type=search] { flex: 1 1 16rem; }
.pt-note { color: var(--ink-soft); font-size: 0.92rem; max-width: 44rem; }
.pt-status { min-height: 1.3em; font-weight: 600; }
.pt-status.ok, .pt-ok { color: var(--cleared); }
.pt-status.err, .pt-err { color: var(--stamp); }
.pt-warn { color: var(--caution); }

.pt-tabs { display: flex; flex-wrap: wrap; gap: 0.2rem 1.1rem;
  border-bottom: 1px solid var(--rule); padding-bottom: 0.5rem;
  margin: 0 0 1.4rem; font: 600 0.8rem var(--mono); letter-spacing: 0.04em;
  text-transform: uppercase; }
.pt-tabs a { color: var(--ink-soft); text-decoration: none; }
.pt-tabs a.on { color: var(--stamp); }
.pt-tabs .pt-who { margin-left: auto; text-transform: none; font-weight: 400;
  color: var(--muted); }
.pt-tabs button { font: inherit; background: none; border: 0; padding: 0;
  color: var(--link); cursor: pointer; text-transform: uppercase; }

.pt-grid { display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pt-card { background: var(--sheet); border: 1px solid var(--rule);
  border-radius: 4px; padding: 1rem 1.1rem; }
.pt-card h3 { margin-top: 0; }
.pt-next { border-left: 4px solid var(--stamp); }
.pt-next.ok { border-left-color: var(--cleared); }
.pt-stats { display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.pt-stat { display: block; background: var(--paper-deep); border-radius: 3px;
  padding: 0.6rem 0.7rem; text-decoration: none; color: var(--ink); }
.pt-stat b { display: block; font: 600 1.5rem var(--serif); }
.pt-stat span { font: 500 0.72rem var(--mono); text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--ink-soft); }
.pt-meter { height: 0.5rem; background: var(--rule-soft); border-radius: 3px;
  overflow: hidden; margin: 0.4rem 0; }
.pt-meter i { display: block; height: 100%; background: var(--cleared); }
.pt-meter i.over { background: var(--caution); }

.pt-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pt-table th { text-align: left; font: 600 0.7rem var(--mono);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule); padding: 0.4rem 0.5rem; }
.pt-table td { border-bottom: 1px solid var(--rule-soft); padding: 0.45rem 0.5rem;
  vertical-align: top; }
.pt-table tr.pt-click { cursor: pointer; }
.pt-table tr.pt-click:hover td { background: var(--paper-deep); }
.pt-wrap { overflow-x: auto; }

.pt-chip { display: inline-block; font: 600 0.68rem var(--mono);
  text-transform: uppercase; letter-spacing: 0.05em; padding: 0.12rem 0.4rem;
  border-radius: 3px; background: var(--paper-deep); color: var(--ink-soft);
  white-space: nowrap; }
.pt-chip.ready, .pt-chip.accepted, .pt-chip.valid { background: var(--cleared-soft); color: var(--cleared); }
.pt-chip.draft, .pt-chip.needs_action, .pt-chip.accepted_with_changes { background: var(--caution-soft); color: var(--caution); }
.pt-chip.rejected, .pt-chip.invalid { background: var(--stamp-soft); color: var(--stamp); }
.pt-chip.delivered { background: #e3eaf4; color: var(--link); }
.pt-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0; }
.pt-filters a { text-decoration: none; }
.pt-filters a.on .pt-chip { outline: 2px solid var(--ink); }

.pt-steps { display: flex; gap: 1rem; flex-wrap: wrap; font: 600 0.74rem var(--mono);
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted);
  margin: 0 0 1rem; }
.pt-steps .on { color: var(--stamp); }
.pt-drop { border: 2px dashed var(--rule); border-radius: 4px; padding: 1.6rem;
  text-align: center; background: var(--sheet); }
.pt-drop.over { border-color: var(--stamp); }
.pt-finding { font-size: 0.85rem; margin: 0.2rem 0; }
.pt-finding b { color: var(--stamp); }
.pt-msg { font-family: var(--mono); font-size: 0.82rem; white-space: pre-wrap; }
.pt-field-err { display: block; color: var(--stamp); font: 400 0.8rem var(--sans);
  text-transform: none; letter-spacing: 0; }
.pt-party { border: 1px solid var(--rule-soft); border-radius: 3px;
  padding: 0.6rem; margin: 0.5rem 0; }
.pt-party .pt-row input { width: 9rem; }
.pt-party .pt-row input.wide { width: 14rem; }
.pt-party .pt-row input.num { width: 5rem; }
.pt-totals { font: 500 0.8rem var(--mono); }
.pt-key { font-family: var(--mono); background: var(--paper-deep); padding: 0.5rem;
  word-break: break-all; border-radius: 3px; }
.pt-danger { border-color: var(--stamp-soft); }
.pt-danger .go-btn { background: var(--stamp); }

@media (max-width: 640px) {
  .pt-tabs .pt-who { margin-left: 0; width: 100%; }
}
.pt-form label.pt-inline { display: inline; font: inherit; text-transform: none;
  letter-spacing: 0; color: var(--ink); margin: 0; }
.portal > .pt-card { margin-bottom: 1rem; }
/* A button that reads as a link, inline in a sentence ("Change columns"). */
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--link);
  text-decoration: underline; cursor: pointer; }