/* Type and target sizes are set for readers in their seventies and eighties:
   20px base, 1.6 line-height, 56px+ tap targets, high contrast, visible focus. */
:root{
  --ink:#15202b; --muted:#4a5766; --line:#c9d2dc; --bg:#eef1f5; --card:#fff;
  --blue:#12467e; --blue-dk:#0d3560; --gold:#b07d2b; --err:#a11;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:20px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  padding:0 0 4rem;
}
.wrap{max-width:40rem;margin:0 auto;padding:1.25rem}
header{padding:1rem 0 .5rem}
.kicker{margin:0;color:var(--gold);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem}
h1{font-size:1.9rem;line-height:1.2;margin:.3rem 0 .8rem;color:var(--blue)}
.lede{margin:.6rem 0;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.25rem;margin:1.1rem 0}
h2{font-size:1.2rem;margin:0 0 .9rem;display:flex;align-items:center;gap:.6rem;color:var(--blue)}
.num{background:var(--blue);color:#fff;width:1.9rem;height:1.9rem;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:1rem;flex:0 0 auto}
label{display:block;font-weight:600;margin:.9rem 0 .35rem}
input[type=text],input[type=email],input[type=tel],textarea{
  width:100%;font:inherit;padding:.85rem;border:2px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);min-height:56px}
textarea{min-height:8rem;resize:vertical}
input:focus,textarea:focus,button:focus,.bigbtn:focus-within{
  outline:4px solid #ffcf5c;outline-offset:2px;border-color:var(--blue)}
.hint{color:var(--muted);font-size:.92rem;margin:.4rem 0 0}
.opt{color:var(--muted);font-weight:400}
/* the file button: the single most important control on the page */
.bigbtn{display:flex;align-items:center;gap:1rem;background:var(--blue);color:#fff;
  border-radius:14px;padding:1.35rem 1.1rem;cursor:pointer;font-weight:700;min-height:88px}
.bigbtn:active{background:var(--blue-dk)}
.bigbtn-icon{font-size:2.4rem;line-height:1}
.bigbtn-text{font-size:1.35rem;line-height:1.25}
.bigbtn-sub{font-size:.95rem;font-weight:400;opacity:.92}
#files{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filelist{list-style:none;padding:0;margin:1rem 0 0}
.filelist li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem .8rem;
  border:1px solid var(--line);border-radius:10px;margin-bottom:.5rem;background:#f7f9fb;font-size:.95rem}
.filelist .sz{color:var(--muted);white-space:nowrap}
.check{display:flex;gap:.9rem;align-items:flex-start;font-weight:400;margin:.9rem 0;cursor:pointer}
.check input{width:32px;height:32px;flex:0 0 auto;margin:0;accent-color:var(--blue)}
.submit{width:100%;font:inherit;font-weight:700;font-size:1.3rem;color:#fff;background:var(--blue);
  border:0;border-radius:14px;padding:1.2rem;min-height:68px;cursor:pointer;margin-top:.5rem}
.submit:active{background:var(--blue-dk)}
.submit[disabled]{opacity:.6}
.err{background:#fff2f2;border:2px solid var(--err);color:#7a0f0f;border-radius:10px;
  padding:1rem;margin:1rem 0;font-weight:600}
.prog{margin-top:1.2rem}
.bar{background:#dbe2ea;border-radius:999px;height:22px;overflow:hidden}
#barfill{background:var(--blue);height:100%;width:0}
#progtext{font-weight:700;margin:.6rem 0 0}
.foot{color:var(--muted);font-size:.95rem;margin-top:2rem;text-align:center}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* home page */
.cta{display:block;text-align:center;text-decoration:none;margin:1.4rem 0 .3rem}
.centered{text-align:center}
.stat{background:#f4f7fa;border-left:5px solid var(--gold);padding:1rem 1.1rem;border-radius:8px;
  font-size:1.05rem;line-height:1.9}
ul.plain{list-style:none;padding:0;margin:.5rem 0}
ul.plain li{padding:.7rem 0;border-bottom:1px solid #eef2f6}
ul.plain li:last-child{border-bottom:0}
.card.urgent{border-left:5px solid var(--gold)}
a{color:var(--blue)}

/* ── The wizard ────────────────────────────────────────────────────────────
   Added for the three-step contribution flow. Same rules as everything above:
   nothing under 20px, nothing under a 56px target, and no meaning carried by
   colour alone (each state has a word next to it as well as a colour). */

/* Only shown once the script has run; see the <noscript> block in form.html. */
.js-only{display:none}
body.js .js-only{display:block}
body.js .nav{display:flex;gap:.8rem;margin-top:1.4rem}
body.js .steps{display:flex}
.step{display:none}
body:not(.js) .step,.step.on{display:block}

/* Progress: three dots and three words, legible at arm's length. */
.steps{list-style:none;display:flex;gap:.4rem;padding:0;margin:1.2rem 0 0;
  justify-content:space-between;counter-reset:s}
.steps li{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:.35rem;
  color:var(--muted);font-size:.85rem;text-align:center;line-height:1.25}
.steps .dot{width:2.4rem;height:2.4rem;border-radius:50%;background:#dbe2ea;color:var(--muted);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:1.05rem;
  border:2px solid transparent}
.steps li.on{color:var(--blue);font-weight:700}
.steps li.on .dot{background:var(--blue);color:#fff}
.steps li.done .dot{background:#e7efe7;color:#1c6b2b;border-color:#1c6b2b}
.steps li.done .dot::after{content:"✓"}
.steps li.done .dot{font-size:1.2rem;text-indent:-9999px}
.steps li.done .dot::after{text-indent:0;display:block}

h3.sub{font-size:1.05rem;color:var(--blue);margin:1.6rem 0 .2rem}

/* The drop zone. The whole panel is the target, not a thin dashed strip - a shaky
   hand should not have to be accurate to use this. */
.drop{border:3px dashed var(--line);border-radius:14px;background:#f7f9fb;
  padding:1.4rem 1.1rem;text-align:center;transition:background .15s,border-color .15s}
.drop.over{border-color:var(--blue);background:#e8f0f9}
.drop-art{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:.5rem}
.drop-art .pic{font-size:2.6rem;line-height:1}
.drop-art .pdf{font-size:.85rem;font-weight:700;color:#a11;border:2px solid #a11;
  border-radius:6px;padding:.15rem .4rem;letter-spacing:.04em}
.drop-lead{margin:.2rem 0 .1rem;font-size:1.2rem;font-weight:700;color:var(--ink)}
.drop-or{margin:.3rem 0 .7rem;color:var(--muted)}
.drop .bigbtn{text-align:left}
.drop-kinds{margin-top:.9rem}
/* Dragging is a desktop idea; on a touch screen it is noise. */
@media (hover:none){.drop-lead,.drop-or{display:none}.drop{border-style:solid;padding-top:1rem}}

/* One row per file: thumbnail, name, state, size, remove. */
.filelist li.fileitem{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.9rem;
  text-align:left;padding:.7rem;background:#fff}
/* basis 0, not auto: with the row allowed to wrap (for the full-width warning), a long
   filename would otherwise push the remove button onto a line of its own. */
.fileitem .meta{flex:1 1 0;min-width:0}
.fileitem .fname{font-weight:600;word-break:break-word}
.fileitem .fstate{font-size:.9rem;color:var(--muted);margin-top:.15rem}
.fileitem.ok .fstate{color:#1c6b2b;font-weight:700}
.fileitem.bad .fstate{color:var(--err);font-weight:700}
.fileitem.ok{border-color:#9ec7a6}
.fileitem.bad{border-color:var(--err);background:#fff7f7}
.fileitem.lowres{border-color:var(--gold);background:#fffdf6}
.fileitem .sz{color:var(--muted);font-size:.85rem;margin-top:.1rem}
.fileitem .warn{flex:1 0 100%;margin:.2rem 0 0;padding:.7rem .8rem;background:#fff6e2;
  border-left:4px solid var(--gold);border-radius:6px;font-size:.95rem;color:#6b4c12}
.fileitem .retry{display:block;margin-top:.6rem;font:inherit;font-size:.95rem;font-weight:700;
  background:#fff;color:var(--blue);border:2px solid var(--blue);border-radius:10px;
  padding:.6rem .9rem;min-height:48px;cursor:pointer}
.rm{flex:0 0 auto;width:48px;height:48px;border-radius:10px;border:2px solid var(--line);
  background:#fff;color:var(--muted);font-size:1.6rem;line-height:1;cursor:pointer}
.rm:hover{border-color:var(--err);color:var(--err)}

.thumb{flex:0 0 auto;width:72px;height:72px;border-radius:8px;overflow:hidden;background:#e8edf3;
  display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.doc,.thumb.noprev{font-weight:700;color:var(--muted);font-size:.9rem;letter-spacing:.04em}

/* Step 2's per-picture caption rows. */
.caprow{display:flex;gap:.9rem;align-items:flex-start;margin:.9rem 0}
.capbox{flex:1 1 auto;min-width:0}
.capname{font-size:.85rem;font-weight:400;color:var(--muted);margin:0 0 .3rem;
  word-break:break-word}
.caprow textarea{min-height:4.8rem;padding:.6rem .7rem}

/* Back is a real button, not a link: it has to be as easy to hit as Next. */
.nav .submit{flex:1 1 auto;margin-top:0}
.ghost{flex:0 0 auto;font:inherit;font-weight:700;font-size:1.1rem;color:var(--blue);
  background:#fff;border:2px solid var(--blue);border-radius:14px;padding:1.2rem 1.4rem;
  min-height:68px;cursor:pointer}
.ghost:active{background:#eaf1f9}
.sendbtn[hidden]{display:none}

/* Review queue only. */
.tag{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;padding:.2rem .5rem;border-radius:999px;vertical-align:middle}
.tag.wip{background:#fff6e2;color:#6b4c12;border:1px solid var(--gold)}
.tag.low{background:#fff6e2;color:#6b4c12;border:1px solid var(--gold)}
.tag.nobk{background:#fff2f2;color:#7a0f0f;border:1px solid var(--err)}