/* Verity - public forms (supplier registration). Built on the tokens in verity.css. */
.pf-body{background:var(--bg);color:var(--ink);font-family:var(--sans);margin:0;min-height:100vh}
.pf-head{background:var(--nav);color:var(--nav-ink);height:52px;display:flex;align-items:center;padding:0 20px}
.pf-brand{display:flex;align-items:baseline;gap:8px}
.pf-mark{width:22px;height:22px;border-radius:2px;background:var(--nav-accent);color:#06281c;display:inline-grid;place-items:center;font-weight:800;font-size:12px;align-self:center}
.pf-name{font-weight:640;font-size:15px}
.pf-sub{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--nav-ink-3)}
.pf-main{max-width:760px;margin:28px auto 60px;padding:0 16px}
.pf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:26px 28px}
.pf-title{font-size:21px;margin:0 0 8px;letter-spacing:-.005em}
.pf-lede{color:var(--ink-2);font-size:13.5px;line-height:1.55;margin:0 0 18px}
.pf-company{background:var(--ind-soft);border:1px solid var(--ind-line);color:var(--ind);border-radius:var(--r);padding:9px 12px;font-size:13px;font-weight:600;margin:0 0 16px}
.pf-set{border:0;border-top:1px solid var(--line);margin:0;padding:16px 0 6px}
.pf-set legend{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);padding:0 8px 0 0}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;margin-top:6px}
.pf-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.pf-wide{grid-column:1 / -1}
.pf-field label{font-size:12px;font-weight:600;color:var(--ink-2)}
.pf-field .inp{width:100%;box-sizing:border-box}
.pf-field .inp[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 2px var(--red-soft)}
.pf-req{color:var(--red)}
.pf-err{font-size:11.5px;color:var(--red)}
.pf-note{font-size:12px;color:var(--ink-3);line-height:1.5;margin:2px 0 8px}
.pf-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px;margin-top:12px}
.pf-small{font-size:11.5px;color:var(--ink-3)}
.pf-ref{font-size:14px;margin:6px 0 0}
.pf-ref strong{font-family:var(--mono);background:var(--surface-2);border:1px solid var(--line);padding:2px 8px;border-radius:var(--r)}
.pf-trap{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
#pf-alert{margin:0 0 14px}
@media (max-width:620px){
  .pf-card{padding:18px 16px}
  .pf-grid{grid-template-columns:1fr}
  .pf-sub{display:none}
}

/* ---------- The page an approver reaches from their email ---------- */
.ap-summary{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;margin:0 0 18px;background:var(--surface)}
.ap-amount{font-size:26px;font-weight:700;letter-spacing:-0.02em;color:var(--ink);margin-bottom:10px}
.ap-row{display:flex;gap:12px;padding:4px 0;font-size:13px;flex-wrap:wrap}
.ap-label{min-width:120px;color:var(--ink-3);text-transform:uppercase;font-size:11px;letter-spacing:.08em;padding-top:2px}
.ap-value{font-weight:600;color:var(--ink)}
.ap-h2{font-size:12px;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);margin:18px 0 8px}
.ap-table{width:100%;border-collapse:collapse;font-size:13px}
.ap-table td{padding:7px 8px;border-bottom:1px solid var(--line)}
.ap-table .ap-amt{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.ap-table .ap-qty{text-align:right;color:var(--ink-3);width:60px}
.ap-table tfoot td{border-bottom:none;color:var(--ink-3)}
.ap-table tfoot .ap-total td{font-weight:700;color:var(--ink);border-top:1px solid var(--line)}
.ap-filelist{list-style:none;margin:0;padding:0}
.ap-filelist li{display:flex;gap:8px;align-items:baseline;padding:6px 0;border-bottom:1px solid var(--line);font-size:13px}
.ap-filelist span{color:var(--ink-3);font-size:11.5px}
.ap-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.ap-suggested{outline:2px solid var(--ind);outline-offset:2px}

/* Notices on the public forms (a missing field, a refused submission). The
   in-app notice styles live in app.css, which these pages do not load, so the
   form's own alert box is styled here. */
.pf-main .msg{border:1px solid;border-left-width:3px;border-radius:var(--r);padding:10px 12px;font-size:13px;line-height:1.5;margin:0 0 16px}
.pf-main .msg.bad{background:var(--red-soft);border-color:var(--red-line);border-left-color:var(--red);color:#8A1A13}
.pf-main .msg.warn{background:var(--amb-soft);border-color:var(--amb-line);border-left-color:var(--amb);color:#6F4400}
.pf-main .msg.ok{background:var(--grn-soft);border-color:var(--grn-line);border-left-color:var(--grn);color:#084C38}