:root { --ink:#18323f; --brand:#007c78; --paper:#f5f7f6; --line:#cbd5d8; --danger:#a61b1b; } * { box-sizing:border-box; } body { margin:0; font:16px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color:var(--ink); background:var(--paper); } h1,h2,h3 { font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } header { background:var(--ink); color:white; padding:1rem 5%; display:flex; gap:1.5rem; align-items:center; flex-wrap:wrap; } header a { color:white; text-decoration:none; font-weight:700; } header nav { display:flex; gap:1rem; margin-left:auto; align-items:center; } header form { margin:0; } main { max-width:1050px; margin:2rem auto; padding:0 1rem; } form { max-width:560px; display:grid; gap:1rem; } form.inline { display:inline-block; max-width:none; margin-right:.5rem; } form.filter-bar { max-width:none; display:flex; align-items:end; gap:.75rem; margin:1.25rem 0; flex-wrap:wrap; } label { display:grid; gap:.35rem; font-weight:600; } input, select, button { font:inherit; padding:.55rem; } button,.button { background:var(--brand); color:white; border:0; padding:.6rem .9rem; text-decoration:none; cursor:pointer; } button:disabled { cursor:wait; opacity:.75; } .secondary { background:#48606a; } .flash { padding:.75rem; margin-bottom:1rem; } .danger { background:#ffe1e1; color:var(--danger); } .success { background:#d9f4ea; } .metrics { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:1rem; } .status-summary { margin:1.5rem 0; } .status-summary h2 { font-size:1rem; margin:0 0 .75rem; } .status-metrics article { min-height:130px; } article,section { background:white; border:1px solid var(--line); padding:1rem; } article strong { font-size:1.25rem; line-height:1.2; display:block; overflow-wrap:anywhere; font-variant-numeric:tabular-nums; } article span { display:block; margin-top:.2rem; font-size:.9rem; } article small { display:block; margin-top:.3rem; font-size:.9rem; font-weight:600; color:#48606a; font-variant-numeric:tabular-nums; } .reconcile-progress { margin:1rem 0; max-width:420px; font-weight:600; } .progress-track { height:.45rem; margin-top:.45rem; overflow:hidden; background:#dfe7e5; } .progress-indicator { width:35%; height:100%; background:var(--brand); animation:reconcile-loading 1.1s ease-in-out infinite; } @keyframes reconcile-loading { from { transform:translateX(-110%); } to { transform:translateX(310%); } } table { width:100%; border-collapse:collapse; background:white; } th,td { padding:.7rem; text-align:left; border-bottom:1px solid var(--line); } .heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; } @media(max-width:600px){ header nav { margin-left:0; width:100%; } table { font-size:.85rem; } article strong { font-size:1.1rem; } }