/* The Oneness brand system, per the Home v46 standard.
   Two colours only: Cream #f9f1de and Brown #2f241c, plus the fixed alpha
   tokens. Neue Faktum Extended throughout — headings Light 300, body Regular
   400, labels and buttons SemiBold 600 uppercase with wide letter-spacing.
   Square corners; no third colour anywhere. */
@font-face{font-family:"Neue Faktum Extended";src:url("/static/fonts/NeueFaktumExtended-Light.woff2") format("woff2");
  font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Faktum Extended";src:url("/static/fonts/NeueFaktumExtended-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Faktum Extended";src:url("/static/fonts/NeueFaktumExtended-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Neue Faktum Extended";src:url("/static/fonts/NeueFaktumExtended-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}

:root{
  --cream:#f9f1de; --brown:#2f241c;
  --brown-soft:rgba(47,36,28,.68); --brown-mute:rgba(47,36,28,.50);
  --rule:rgba(47,36,28,.16); --rule-soft:rgba(47,36,28,.10);
  --rule-on-dark:rgba(249,241,222,.22); --cream-on-dark:rgba(249,241,222,.72);
  --fill-soft:rgba(47,36,28,.06);

  /* the names the templates already use, mapped onto the brand */
  --paper:var(--cream); --panel:var(--cream);
  --ink:var(--brown); --ink-2:var(--brown-soft); --muted:var(--brown-mute);
  --rule-2:var(--rule-soft);
  --accent:var(--brown); --accent-soft:var(--fill-soft);
  --warn:var(--brown); --warn-soft:var(--fill-soft);
  --bad:var(--brown); --bad-soft:var(--fill-soft);
  --good:var(--brown); --good-soft:var(--fill-soft);
  --display:"Neue Faktum Extended","Helvetica Neue",Arial,sans-serif;
  --text:"Neue Faktum Extended","Helvetica Neue",Arial,sans-serif;
  --shadow:none;
}
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{margin:0;background:var(--cream);color:var(--brown);
  font:400 16px/1.65 var(--text);font-variant-numeric:tabular-nums}

.wrap{display:flex;min-height:100vh}

nav{width:224px;flex:none;border-right:1px solid var(--rule);padding:28px 0 40px;
  background:var(--cream);position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:0 20px 8px;text-decoration:none;
  color:var(--brown)}
.brand .mark{width:30px;height:30px;flex:none;color:var(--brown)}
.brand .mark svg{width:100%;height:100%;display:block}
.brand img{width:auto;height:34px;max-width:156px;object-fit:contain;display:block}
.brand .bt{font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;line-height:1.2}
.brand img + .bt{display:none}
.brand small{display:block;font-weight:400;font-size:11px;letter-spacing:.04em;
  text-transform:none;color:var(--brown-mute);margin-top:5px}
nav b{display:block;padding:22px 22px 7px;font-size:11px;font-weight:600;
  letter-spacing:.28em;text-transform:uppercase;color:var(--brown-mute)}
nav a{display:block;padding:7px 22px;color:var(--brown-soft);text-decoration:none;
  font-size:15px;border-left:2px solid transparent}
nav a:hover{background:var(--fill-soft);color:var(--brown)}
nav a.on{border-left-color:var(--brown);color:var(--brown);font-weight:600;
  background:var(--fill-soft)}

main{flex:1;padding:36px 44px 88px;max-width:1240px}
h1{font-family:var(--display);font-weight:300;font-size:32px;line-height:1.2;
  margin:0 0 6px;letter-spacing:.01em}
h2{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.18em;
  text-transform:uppercase;margin:38px 0 12px}
h3{font-family:var(--display);font-weight:600;font-size:16px;margin:24px 0 9px;
  color:var(--brown)}
.sub{color:var(--brown-soft);margin:0 0 26px;font-size:16px;max-width:76ch;line-height:1.7}

table{width:100%;border-collapse:separate;border-spacing:0;margin:10px 0 24px;
  background:var(--cream);border:1px solid var(--rule)}
th{text-align:left;font-family:var(--display);font-size:12px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brown-mute);
  padding:11px 14px;border-bottom:1px solid var(--rule)}
td{padding:11px 14px;border-bottom:1px solid var(--rule-soft);vertical-align:top;
  font-size:15px}
tr:last-child td{border-bottom:0}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--fill-soft)}
.k{font-size:13.5px;color:var(--brown-mute)}

a{color:var(--brown);text-decoration:underline;text-decoration-color:var(--rule);
  text-underline-offset:3px}
a:hover{text-decoration-color:var(--brown)}
nav a, .btn, .toc a{text-decoration:none}

/* Status: fill versus outline, never a third colour. The word carries the
   meaning — which also serves colourblind readers properly. */
.tag{display:inline-block;padding:2px 10px;font-family:var(--display);font-size:12px;
  font-weight:600;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;
  border:1px solid var(--rule);background:transparent;color:var(--brown-soft)}
.tag.paid,.tag.sent,.tag.signed,.tag.approved{background:var(--brown);color:var(--cream);
  border-color:var(--brown)}
.tag.due{border-color:var(--brown);color:var(--brown);font-weight:600}
.tag.pending,.tag.draft,.tag.scheduled{color:var(--brown-mute)}
.tag.clawed_back,.tag.failed,.tag.void,.tag.canceled,.tag.cancelled,.tag.no_agreement,
.tag.needs_rate,.tag.declined,.tag.expired{background:var(--fill-soft);
  border-color:var(--brown);color:var(--brown);text-decoration:line-through;
  text-decoration-thickness:1px}

.cards{display:flex;gap:14px;flex-wrap:wrap;margin:18px 0 8px}
.card{border:1px solid var(--rule);background:var(--cream);padding:17px 19px;min-width:156px}
.card .v{font-family:var(--display);font-weight:300;font-size:30px;letter-spacing:.01em}
.card .k{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brown-mute);margin-top:6px}

button,.btn{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;padding:9px 16px;border:1px solid var(--brown);
  background:transparent;color:var(--brown);cursor:pointer;border-radius:0;
  text-decoration:none;display:inline-block;transition:transform .12s}
button:hover,.btn:hover{transform:translateY(-2px)}
button.go,.btn.go{background:var(--brown);color:var(--cream)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--brown);outline-offset:2px}
form.inline{display:inline}
form.inline button{padding:5px 11px;font-size:11.5px;letter-spacing:.14em}

label{display:block;font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--brown-mute);margin-bottom:6px}
input,select,textarea{font:400 15px/1.5 var(--text);padding:8px 11px;
  border:1px solid var(--rule);border-radius:0;background:var(--cream);color:var(--brown)}
input:hover,select:hover{border-color:var(--brown-soft)}
input[type=checkbox]{width:auto;vertical-align:middle;margin-right:6px}
.row{display:flex;gap:16px;flex-wrap:wrap;align-items:flex-end;margin:14px 0 28px;
  padding:19px 21px;background:var(--cream);border:1px solid var(--rule)}
.setrow{border-bottom:1px solid var(--rule-soft);padding:16px 0;display:flex;gap:26px;
  align-items:center;justify-content:space-between}
.setrow:last-child{border-bottom:0}
.setrow p{margin:3px 0 0;font-size:14.5px;color:var(--brown-mute);max-width:62ch;line-height:1.55}
.setrow strong{font-weight:600;font-size:15px}

.filters{margin:0 0 12px;display:flex;gap:16px;flex-wrap:wrap}
.filters a{font-size:14px;text-decoration:none;color:var(--brown-mute)}
.filters a.on{color:var(--brown);font-weight:600;box-shadow:inset 0 -2px 0 var(--brown)}

.flash{border:1px solid var(--brown);background:var(--fill-soft);color:var(--brown);
  padding:13px 17px;margin-bottom:22px;word-break:break-word;font-size:15px}
.note{color:var(--brown-soft);font-size:15px;border-left:2px solid var(--brown);
  padding:2px 0 2px 15px;margin:16px 0;line-height:1.65;max-width:78ch}
.empty{color:var(--brown-mute);padding:22px 0;font-size:15px}
.sandbox{border:1px solid var(--rule);background:var(--fill-soft);color:var(--brown-soft);
  padding:11px 16px;margin-bottom:22px;font-size:14px}
.sandbox code{background:var(--cream);border:1px solid var(--rule-soft);padding:1px 6px;
  font-size:13px}

/* Handbook */
.doc{max-width:74ch}
.doc h2{margin-top:40px}
.doc p,.doc li{font-size:16px;line-height:1.75;color:var(--brown-soft)}
.doc li{margin-bottom:6px}
.doc code{background:var(--fill-soft);padding:1.5px 6px;font-size:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.doc pre{background:var(--fill-soft);border:1px solid var(--rule);padding:14px 16px;
  overflow-x:auto;font-size:13.5px;line-height:1.5}
.doc pre code{background:none;padding:0}
.doc blockquote{margin:18px 0;padding:2px 0 2px 16px;border-left:2px solid var(--brown);
  color:var(--brown-soft)}
.toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin:22px 0}
.toc a{display:block;padding:17px 19px;border:1px solid var(--rule);background:var(--cream)}
.toc a:hover{border-color:var(--brown)}
.toc .t{font-family:var(--display);font-size:15px;font-weight:600;color:var(--brown);
  margin-bottom:6px}
.toc .d{font-size:14px;color:var(--brown-mute);line-height:1.55}
.docnav{display:flex;justify-content:space-between;gap:16px;margin-top:46px;
  padding-top:22px;border-top:1px solid var(--rule)}

/* Start here */
.progress{display:flex;align-items:center;gap:14px;margin:6px 0 28px}
.progress .bar{flex:1;max-width:320px;height:4px;background:var(--rule)}
.progress .bar span{display:block;height:100%;background:var(--brown)}
.progress .pl{font-family:var(--display);font-size:12.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brown-mute)}
ol.steps{list-style:none;margin:0 0 36px;padding:0}
ol.steps li{display:flex;gap:16px;align-items:flex-start;padding:19px 21px;
  background:var(--cream);border:1px solid var(--rule);margin-bottom:10px}
ol.steps li.done{border-color:var(--rule-soft)}
ol.steps .mark{flex:none;width:30px;height:30px;display:grid;place-items:center;
  font-family:var(--display);font-size:13px;font-weight:600;color:var(--brown-mute);
  border:1px solid var(--rule)}
ol.steps li.done .mark{background:var(--brown);color:var(--cream);border-color:var(--brown)}
ol.steps .body{flex:1;min-width:0}
ol.steps .t{font-family:var(--display);font-size:16px;font-weight:600;margin-bottom:5px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
ol.steps li.done .t{color:var(--brown-soft)}
ol.steps p{margin:0;font-size:15px;color:var(--brown-mute);line-height:1.65;max-width:70ch}
ol.steps .act{flex:none}
@media(max-width:700px){ol.steps li{flex-wrap:wrap}ol.steps .act{width:100%;padding-left:46px}}

@media(max-width:860px){
  .wrap{flex-direction:column}
  nav{width:auto;height:auto;position:static;border-right:0;border-bottom:1px solid var(--rule);
    display:flex;flex-wrap:wrap;padding:10px;gap:2px}
  nav b{display:none} .brand{width:100%}
  nav a{border-left:0;padding:6px 12px}
  nav a.on{box-shadow:inset 0 -2px 0 var(--brown)}
  main{padding:22px 18px 60px}
}