/* Coriolis Precision — the contribution pages (overview + upload).
   Shared by contribute.html and contribute-upload.html so the header, the sheet and the sign-in
   token are identical on both and can only be changed in one place. */

@font-face{font-family:'Coriolis';src:url('/Coriolis-Regular.woff') format('woff');font-weight:400 700;font-display:swap}
:root{
  --parch:#F2EDD8; --parch2:#E8E0C4; --ink:#1C1A14; --mid:#5A5646; --rule:#D4CAA8;
  --teal:#4BA8A4; --tealD:#2A6A68; --deep:#035E72; --rust:#B22E09; --burnt:#C86708;
  --amber:#E8A020; --level:#5C8A30;
  --serif:Iowan Old Style,Palatino Linotype,Palatino,Georgia,serif;
  --mono:'Coriolis',ui-monospace,monospace;
  /* Wanted by cpnav.css, which was written against the main site's palette. */
  --line:#3a3323; --panel2:#242013;
}
*{box-sizing:border-box}
html,body{margin:0}
/* 56px of top padding clears the FIXED nav bar — the same allowance the other pages make. */
body{background:#211d15;font-family:var(--serif);color:var(--ink);padding:80px 16px 24px;
  display:flex;justify-content:center;-webkit-font-smoothing:antialiased}
.sheet{width:100%;max-width:760px;background:var(--parch);border-radius:14px;overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.5)}
.mono{font-family:var(--mono)}

/* ── header: brand left, sign-in token right ───────────────────────────────────────────────── */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 28px;background:#131008;border-bottom:1px solid #3a3323}
.brand img{height:26px;width:auto;display:block}
.token{display:flex;align-items:center;gap:9px;text-decoration:none;
  background:rgba(242,237,216,.07);border:1px solid #3a3323;border-radius:24px;padding:5px 14px 5px 5px}
.token:hover{background:rgba(242,237,216,.14)}
.token img{height:28px;width:28px;border-radius:50%;display:block}
.token span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--amber);font-weight:700}

.hero{padding:28px 40px 24px;background:#1a140c}
.sheet>.hero:first-child{border-radius:14px 14px 0 0}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--amber)}
.hero h1{font-family:var(--mono);font-weight:700;font-size:30px;line-height:1.05;margin:8px 0 0;color:var(--parch)}
.hero p{margin:10px 0 0;font-size:13.5px;color:var(--parch);opacity:.85}
.rule{height:4px;background:linear-gradient(90deg,var(--rust),var(--burnt) 45%,var(--amber))}

.body{padding:26px 40px 32px}
h2{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tealD);margin:26px 0 12px;padding-bottom:6px;border-bottom:1px solid var(--rule)}
p{font-size:14.5px;line-height:1.6;margin:0 0 12px}
p.mut{color:var(--mid);font-size:13px}
a{color:var(--tealD);font-weight:600}

/* ── the steps: label and gloss on separate lines, so the four verbs scan on their own ─────── */
ol.steps{counter-reset:s;list-style:none;padding:0;margin:0 0 18px}
ol.steps li{counter-increment:s;position:relative;padding:0 0 15px 46px;min-height:34px}
ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;
  border-radius:50%;background:var(--tealD);color:var(--parch);font-family:var(--mono);
  font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center}
ol.steps li b{display:block;font-family:var(--mono);font-size:15px;letter-spacing:.04em;color:var(--ink)}
ol.steps li span{display:block;font-size:13.5px;line-height:1.5;color:var(--mid);margin-top:2px}

/* ── in / not in ───────────────────────────────────────────────────────────────────────────── */
.split{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.split>div{flex:1 1 220px;border-radius:12px;padding:14px 18px;background:var(--parch2)}
.split h3{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin:0 0 8px}
.split .yes{border-left:4px solid var(--level)}
.split .yes h3{color:#3d5f1f}
.split .no{border-left:4px solid var(--rust)}
.split .no h3{color:var(--rust)}
.split ul{margin:0;padding-left:18px}
.split li{font-size:14px;line-height:1.55}

.cta{display:block;text-align:center;margin:24px 0 0;padding:15px 20px;border-radius:12px;
  background:var(--tealD);color:var(--parch);text-decoration:none;
  font-family:var(--mono);font-size:15px;letter-spacing:.05em;font-weight:700}
.cta:hover{background:#225856}

/* ── forms (upload page) ───────────────────────────────────────────────────────────────────── */
.panel{background:var(--parch2);border-radius:12px;padding:20px 22px;margin:0 0 16px}
label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mid);margin:0 0 5px}
input[type=text],input[type=password]{width:100%;padding:11px 12px;border:1px solid var(--ink);
  border-radius:9px;background:var(--parch);font-family:var(--serif);font-size:15px;color:var(--ink)}
input:focus{outline:2px solid var(--tealD);outline-offset:1px}
.hint{margin:5px 0 0;font-size:11.5px;color:var(--mid);font-family:var(--mono);letter-spacing:.03em}
.row{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.row>div{flex:1 1 200px}
button{font-family:var(--mono);font-size:13px;letter-spacing:.06em;font-weight:700;
  border:0;border-radius:11px;padding:11px 20px;cursor:pointer;background:var(--tealD);color:var(--parch)}
button.ghost{background:transparent;color:var(--tealD);border:1px solid var(--tealD)}
.btns{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

.msg{border-radius:10px;padding:11px 14px;margin:12px 0 0;font-size:14px;line-height:1.5}
.msg.err{background:rgba(178,46,9,.10);border-left:4px solid var(--rust)}
.msg.ok{background:rgba(92,138,48,.13);border-left:4px solid var(--level)}
.msg.info{background:rgba(42,106,104,.09);border-left:4px solid var(--tealD)}

.tally{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 18px}
.tally div{flex:1 1 120px;background:var(--parch2);border-radius:12px;padding:14px 16px;text-align:center}
.tally b{display:block;font-family:var(--mono);font-size:32px;line-height:1.05;color:var(--tealD)}
.tally span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mid)}

/* ── the category ticks ───────────────────────────────────────────────────────── */
.tick{display:flex;align-items:flex-start;gap:12px;background:var(--parch2);border-radius:11px;
  padding:13px 16px;margin:0 0 8px;cursor:pointer;border:1px solid transparent}
.tick:hover{border-color:var(--rule)}
.tick input{margin:2px 0 0;width:19px;height:19px;accent-color:var(--tealD);flex:0 0 auto}
.tick b{display:block;font-size:15.5px}
.tick i{display:block;font-style:normal;font-size:12.5px;color:var(--mid);margin-top:1px}
/* Not yet available: shown so the plan is visible, but plainly not on offer. */
.tick.off{opacity:.45;cursor:default}
.tick.off:hover{border-color:transparent}

.drop{border:2px dashed var(--tealD);border-radius:12px;padding:28px 20px;text-align:center;
  background:rgba(42,106,104,.05);cursor:pointer}
.drop.over{background:rgba(42,106,104,.16)}
.drop p{margin:0;font-size:14.5px}
.drop p+p{margin-top:6px;font-size:12.5px;color:var(--mid)}
.who{font-family:var(--mono);font-size:12px;color:var(--mid);margin:0 0 14px}
.hide{display:none}
footer{margin:26px 0 0;padding-top:14px;border-top:1px solid var(--rule);font-size:12px;color:var(--mid)}

@media (max-width:520px){
  .hero,.body{padding-left:22px;padding-right:22px}
  .top{padding:14px 18px}
  .token span{display:none}
  .token{padding:5px}
}