/* ==========================================================================
   L3 — THEME  ·  "PAPER"
   White, black, one grey, one accent. Loaded last, so it re-colours the
   application without touching the stylesheets that lay it out.

     background  #FFFFFF
     accent      #EEC1A0
     text        #000000
     secondary   #A9A9A9

   The greys between (#F7F7F7 … #6B6B6B) are steps between white and black,
   and the peach tints are steps between white and the accent. Nothing else
   is introduced, with one deliberate exception: a red for failure. In an
   accounts payable system a rejection, a failed sync or a validation error
   must not look like everything else on the page, so `--red` stays - muted,
   and used nowhere but genuine failure.

   Type is Inter, with JetBrains Mono for figures. Both are served by Verity
   itself (assets/fonts), so the product looks the same on every machine and
   works with no internet at all. Both are licensed under the SIL Open Font
   License 1.1.
   ========================================================================== */

@font-face{
  font-family:"InterVF";
  src:url("/assets/fonts/inter-latin.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"InterVF";
  src:url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JetBrainsMonoVF";
  src:url("/assets/fonts/mono-latin.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap;
}

/* The tokens themselves live in verity.css, so there is one palette and the
   design tests measure the same values the product uses. What follows is the
   handful of rules that were written for a dark masthead and a green brand. */

/* ---------- Type ---------------------------------------------------------
   A little larger and a little looser than before: the same tables, easier
   to read for an hour at a time. */
body{font-size:13.5px;line-height:1.55;letter-spacing:-.002em}
h1,h2,h3{letter-spacing:-.02em}
.ph h1,.page-h h1{font-weight:640;font-size:21px;letter-spacing:-.025em}
.ph p,.page-h .sub{font-size:12.5px;color:var(--ink-3)}
.card-h h3{font-size:11px;font-weight:650;letter-spacing:.08em;color:var(--ink-3)}
table.t{font-size:12.5px}
table.t th{
  font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  background:var(--surface);border-bottom:1px solid var(--line-2);font-weight:650;
}
table.t td{border-bottom:1px solid var(--line)}
.stat-v{font-size:23px;letter-spacing:-.04em}
.mono,.money,.stat-v{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------- The masthead, now white -------------------------------------- */
.topbar{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.brand{border-right:1px solid var(--line)}
.brand:hover{color:var(--ink)}
.brand-mark{background:var(--accent);color:#000}
.brand-name{color:var(--ink)}
.brand-sub{color:var(--ink-4)}
.gtab{color:var(--ink-3);font-weight:560}
.gtab:hover{color:var(--ink);background:var(--surface-2)}
.gtab.on{color:var(--ink);background:transparent;font-weight:650}
.gtab.on::after{background:var(--ink);height:2px}
.gtab .gn{background:var(--accent);color:#000;border:0}
.iconbtn{background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2)}
.iconbtn:hover{background:var(--surface-2);color:var(--ink)}
.who{background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}
.who:hover{background:var(--surface-2)}
.who-r{color:var(--ink-3)}
.av{background:var(--accent);color:#000}
.search{background:var(--surface-2);border:1px solid var(--line-2);color:var(--ink)}
.search::placeholder{color:var(--ink-4)}
.search:focus{background:var(--surface);border-color:var(--ink);color:var(--ink)}
.search-ico,.kbd{color:var(--ink-4)}
.kbd{border:1px solid var(--line-2)}
.env{background:var(--accent-soft);border:1px solid var(--accent);color:var(--amb)}

/* Sections: the row under the masthead. */
.sectionnav{background:var(--surface);border-bottom:1px solid var(--line)}
.tab{color:var(--ink-3)}
.tab:hover{color:var(--ink);background:var(--surface-2)}
.tab.on{color:var(--ink);border-bottom-color:var(--ink);font-weight:650}
.slink.on{color:var(--ink);border-bottom-color:var(--ink)}
.nav-ink{background:var(--ink)}

/* ---------- Buttons -------------------------------------------------------
   One filled button on a screen: the accent. Everything else is a hairline. */
.btn{background:var(--surface);border:1px solid var(--line-2);color:var(--ink);font-weight:560;border-radius:var(--r)}
.btn:hover:not(:disabled){background:var(--surface-2);border-color:var(--line-3)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:#000;font-weight:640}
.btn.pri:hover:not(:disabled){background:var(--accent-2);border-color:var(--accent-2)}
.btn.danger{background:var(--surface);border-color:var(--red-line);color:var(--red)}
.btn.danger:hover:not(:disabled){background:var(--red-soft);border-color:var(--red);filter:none}
.btn.ghost:hover{background:var(--surface-2);border-color:var(--line)}
.btn:focus-visible{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.btn:not(.pri):not(.danger).v-busy::after{border-color:var(--ink) var(--ink) var(--ink) transparent}
.btn.pri.v-busy::after{border-color:#000 #000 #000 transparent}

/* ---------- Cards, tiles, tables ----------------------------------------- */
.card{border:1px solid var(--line);border-radius:var(--r2);box-shadow:none}
.card-h{background:var(--surface);border-bottom:1px solid var(--line)}
.stat{border:1px solid var(--line);border-left:2px solid var(--line-2);border-radius:var(--r)}
.stat:hover{border-left-color:var(--accent);background:var(--surface)}
.stat-l{color:var(--ink-3);letter-spacing:.08em}
table.t tbody tr:hover{background:var(--accent-soft)}
table.t tbody tr.sel{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--ink)}
table.t tbody tr:focus-visible{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--ink)}
.kv{border-bottom:1px solid var(--line)}

/* ---------- Status ------------------------------------------------------- */
.b{border-radius:3px;font-weight:650;letter-spacing:.02em}
.b-ok{background:var(--surface);color:#000;border-color:#000}
.b-warn{background:var(--accent-soft);color:var(--amb);border-color:var(--accent)}
.b-neutral{background:var(--surface-2);color:var(--ink-3);border-color:var(--line-2)}
.b-info{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-2)}
.b-bad{background:var(--red-soft);color:var(--red);border-color:var(--red-line)}
.pipe-s.done{background:var(--surface);color:#000;border-color:#000}
.pipe-s.now{background:var(--accent-soft);color:var(--amb);border-color:var(--accent)}

/* ---------- Forms -------------------------------------------------------- */
.inp,select.inp,textarea.inp{border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface)}
.inp:focus{border-color:var(--ink);box-shadow:0 0 0 3px var(--accent-soft)}
.inp.err{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.inp[readonly]{background:var(--surface-2)}
.upload{border:1px dashed var(--line-2);background:var(--surface-2)}
.upload:hover{border-color:var(--accent);background:var(--accent-soft)}
.autoap.on{border-color:var(--accent);background:var(--accent-soft);color:var(--amb)}
.autoap.on .autoap-sw{background:var(--accent);border-color:var(--accent-2)}

/* ---------- Notices, drawers, menus -------------------------------------- */
.msg.info,.note.info{background:var(--surface-2);border-color:var(--line-2);border-left-color:var(--ink-4);color:var(--ink-2)}
.msg.ok,.note.ok{background:var(--surface-2);border-color:var(--line-2);border-left-color:#000;color:var(--ink)}
.msg.warn,.note.warn{background:var(--accent-soft);border-color:var(--accent);border-left-color:var(--accent-2);color:var(--amb)}
.msg.bad,.note.bad{background:var(--red-soft);border-color:var(--red-line);border-left-color:var(--red);color:var(--red)}
.drawer,.modal{border-color:var(--line-2)}
.drawer-h,.modal-h,.drawer-f,.modal-f{background:var(--surface);border-color:var(--line)}
.veil{background:rgba(0,0,0,.38)}
.pop{border-color:var(--line-2)}
.menu-item:hover{background:var(--accent-soft)}
.notif:hover{background:var(--surface-2)}
.notif.unread{border-left-color:var(--accent);background:var(--accent-soft)}

/* A notice is the one place a dark surface is useful: it has to be seen over
   whatever is behind it. */
.toast{background:#000;color:#FFFFFF;border-left:3px solid var(--accent)}
.toast.err{border-left-color:#E8837A}
.toast.warn{border-left-color:var(--accent)}
.toast.info{border-left-color:#FFFFFF}
.toast-i{background:var(--accent);color:#000}
.toast.err .toast-i{background:#E8837A;color:#000}
.toast.warn .toast-i{background:var(--accent);color:#000}
.toast.info .toast-i{background:#FFFFFF;color:#000}

/* ---------- Progress, meters, charts ------------------------------------- */
.bar{background:var(--surface-3)}
.bar i{background:var(--ink)}
.meter{background:var(--line)}
.meter i{background:var(--accent-2)}
.ch-grid{stroke:var(--line)}
.ch-axisline{stroke:var(--line-2)}
.ch-axis,.ch-lab{fill:var(--ink-4)}
.ch-hb-t{background:var(--surface-3)}
.ch-swatch{background:var(--ink)}
.ai{border-color:var(--line-2);border-left-color:var(--ink);background:var(--surface-2)}
.ai-t,.ai-k,.ai-conf{color:var(--ink-3)}
.ai-reason{background:var(--surface)}

/* ---------- The sign-in page ---------------------------------------------
   The one dark surface left in the product, and the only place the accent is
   allowed to carry a word - on black it measures 11:1. */
.auth-aside{background:#000;color:#FFFFFF}
.auth-h em{color:var(--accent);font-style:normal}
.auth-lede{color:#D4D4D4}
.auth-point{color:#CFCFCF}
.auth-point svg,.auth-check{color:var(--accent)}
.auth-point strong{color:#FFFFFF}
.auth-foot{color:#8F8F8F}
.auth-brand{color:#FFFFFF}
.auth-brand .mark{background:var(--accent);color:#000;border-color:var(--accent)}
.auth-brand .sub{color:var(--accent)}
.auth-brand-mobile .mark{border-color:var(--line-2);color:var(--ink)}
.auth-brand-mobile .name{color:var(--ink)}
.auth-submit{background:var(--accent);color:#000;font-weight:640}
.auth-submit:hover:not(:disabled){background:var(--accent-2)}
.auth-spin{border-color:rgba(0,0,0,.35);border-top-color:#000}
.auth-alert.bad{background:var(--red-soft);border-color:var(--red-line);color:var(--red)}
.auth-alert.warn{background:var(--accent-soft);border-color:var(--accent);color:var(--amb)}
.auth-alert.ok{background:var(--surface-2);border-color:var(--line-2);color:var(--ink)}
.auth-link{color:var(--ink)}
.login-chrome{background:var(--surface);border-bottom:1px solid var(--line)}

/* ---------- The public forms --------------------------------------------- */
.pf-head{background:var(--surface);border-bottom:1px solid var(--line);color:var(--ink)}
.pf-mark{background:var(--accent);color:#000}
.pf-name{color:var(--ink)}
.pf-sub{color:var(--ink-4)}
.pf-body{background:var(--surface-2)}
.pf-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:none}
.pf-company{background:var(--accent-soft);border-color:var(--accent);color:var(--amb)}
.pf-req{color:var(--red)}
.pf-set legend{color:var(--ink-3);letter-spacing:.08em}