/* Sirah - 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}

/* ---------- A vendor's ledger, opened from an emailed link ---------- */
.lg-main{max-width:980px}
.lg-filter{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin:0 0 12px}
.lg-filter .pf-field{min-width:150px}
.lg-filter-actions{border-top:0;padding-top:0;margin-top:0}
.lg-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r)}
.lg-table{min-width:640px}
.lg-table th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);padding:8px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.lg-table th.ap-amt{text-align:right}
.lg-table td.lg-desc{color:var(--ink-2)}
.lg-table tr.lg-opening td{color:var(--ink-3);font-style:italic}
.lg-pager{display:flex;gap:8px;align-items:center;justify-content:flex-end;margin:10px 0 0;font-size:12.5px;color:var(--ink-3)}
.lg-drop{display:flex;flex-direction:column;align-items:center;gap:8px;border:1.5px dashed var(--line-2, var(--line));border-radius:var(--r2);padding:26px 16px;text-align:center;background:var(--surface-2);cursor:pointer}
.lg-drop.lg-over{border-color:var(--ind);background:var(--ind-soft)}
.lg-chosen{font-size:13px;margin:10px 0 0}
.lg-progress{display:flex;align-items:center;gap:10px;margin:14px 0 0}
.lg-bar{flex:1;height:6px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.lg-bar span{display:block;height:100%;width:0;background:var(--ind);transition:width .2s ease}
@media (max-width:620px){
  .lg-filter .pf-field{min-width:0;flex:1 1 40%}
}

/* ---------- The vendor portal ---------- */
.pt-head{justify-content:space-between}
.pt-who{display:flex;align-items:center;gap:10px;font-size:12px;color:var(--nav-ink-2)}
.pt-main{max-width:1000px}
.pt-tabs{display:flex;gap:2px;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;border-bottom:1px solid var(--line);margin:4px 0 14px}
.pt-tab{border:0;background:none;padding:8px 10px;font-size:13px;white-space:nowrap;cursor:pointer;color:var(--ink-3);border-bottom:2px solid transparent;margin-bottom:-1px}
.pt-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--ink);font-weight:640}
.pt-scroll{overflow-x:auto}
#iv-lines input[data-k="description"]{width:100%;min-width:220px}
.pt-h3{font-size:13px;font-weight:700;margin:16px 0 6px}
.pt-credit-form{border:1px solid var(--line);border-radius:var(--r2);padding:12px 14px;margin-bottom:6px}
.pt-credit-form .fgrid{margin-top:8px}
.pt-span{grid-column:1 / -1}
.pt-credit-form summary{cursor:pointer;margin:0}
.pt-credit-form + .pt-credit-form{margin-top:10px}
.pt-tabs::-webkit-scrollbar{display:none}
/* Vendor documents: one slot per document. */
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px}
.slot{border:1px solid var(--line);border-radius:var(--r2);padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.slot-h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.slot-up{display:flex;gap:6px;align-items:center}
.slot-up .inp{flex:1;min-width:0}
/* Privacy Policy and License Agreement pages, and the links to them. */
.legal-home{text-decoration:none;color:inherit}
.legal-doc{max-width:860px;line-height:1.6}
.legal-doc h1{font-size:26px;margin:0 0 12px}
.legal-doc h2{font-size:18px;margin:28px 0 8px}
.legal-doc h3{font-size:15px;margin:20px 0 6px}
.legal-doc p,.legal-doc li{font-size:14px}
.legal-doc p{margin:0 0 10px}
.legal-doc ul{list-style:disc}
.legal-doc ol{list-style:decimal}
.legal-doc li > ul{list-style:circle}
.legal-doc li{display:list-item;margin:2px 0}
.legal-doc ul,.legal-doc ol{padding-left:24px;margin:6px 0 12px}
.legal-doc li > p{margin:2px 0}
.legal-doc li > ul,.legal-doc li > ol{margin:2px 0 4px}
.legal-doc hr{border:0;border-top:1px solid rgba(0,0,0,.1);margin:18px 0}
.legal-doc blockquote{margin:12px 0;padding:8px 14px;border-left:3px solid rgba(0,0,0,.2);background:rgba(0,0,0,.03)}
.legal-table{overflow-x:auto;margin:10px 0}
.legal-doc table{border-collapse:collapse;width:100%;font-size:13.5px}
.legal-doc th,.legal-doc td{border:1px solid rgba(0,0,0,.12);padding:6px 10px;text-align:left;vertical-align:top}
.legal-doc th{background:rgba(0,0,0,.04)}
.legal-links{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin:18px 0 8px;font-size:12.5px}
.legal-links a{color:inherit;opacity:.75}