@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');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:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');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;}

/* Same monochrome identity as northquant.ca, but this is an application, not a
   brochure: controls are large because the person filling it in is often on a
   phone, outdoors, between jobs. Nothing here is smaller than 16px, which also
   stops iOS zooming the page on focus. */
:root{
  --ink:#000; --body:#2b2b2b; --mute:#6e6e6e; --faint:#a8a8a8;
  --line:#e2e2e2; --paper:#fff; --wash:#f6f6f6; --reverse:#0a0a0a;
  --bad:#b00020; --good:#0a6b3d;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--body);
  background:var(--paper);-webkit-font-smoothing:antialiased}
h1,h2,h3{color:var(--ink);letter-spacing:-0.025em;line-height:1.15;font-weight:650}
a{color:var(--ink)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
img,svg{display:block;max-width:100%}
[hidden]{display:none !important}

.skip{position:absolute;left:-9999px;background:var(--ink);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:0;top:0}

/* ── Shell ─────────────────────────────────────────────────────────── */
.bar{background:var(--reverse);color:#fff;position:sticky;top:0;z-index:60}
.bar-in{max-width:820px;margin:0 auto;padding:14px 22px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.mark{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;
  font-weight:650;font-size:.98rem;letter-spacing:-0.022em}
.bar .who{font-size:.86rem;color:#9aa1ab;display:flex;align-items:center;gap:14px}
.bar .who button{background:none;border:0;color:#fff;font:inherit;font-size:.86rem;
  text-decoration:underline;cursor:pointer;padding:4px}
@media(max-width:520px){.bar .who span{display:none}}

main{max-width:820px;margin:0 auto;padding:40px 22px 96px}
.narrow{max-width:460px}

/* ── Type ──────────────────────────────────────────────────────────── */
.eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--mute)}
h1{font-size:clamp(1.7rem,4.5vw,2.3rem);margin-top:10px}
h2{font-size:1.3rem;margin-top:6px}
.lede{color:var(--mute);margin-top:14px}
.hint{font-size:.92rem;color:var(--mute);margin-top:8px}
.why{background:var(--wash);border-left:3px solid var(--ink);padding:16px 18px;
  margin-top:22px;font-size:.95rem;color:var(--body)}
.why b{color:var(--ink)}

/* ── Forms ─────────────────────────────────────────────────────────── */
.field{margin-top:22px}
.field > label{display:block;font-weight:600;color:var(--ink);margin-bottom:7px}
.field .sub{font-size:.9rem;color:var(--mute);margin:-3px 0 8px}
input[type=text],input[type=email],input[type=password],input[type=tel],
input[type=url],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:17px;color:var(--ink);background:var(--paper);
  border:1px solid #bdbdbd;padding:14px 14px;border-radius:0;appearance:none}
select{background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),
  linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 22px) 24px,calc(100% - 15px) 24px;
  background-size:7px 7px,7px 7px;background-repeat:no-repeat;padding-right:44px}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:2px solid var(--ink);outline-offset:1px}
input[readonly]{background:var(--wash);color:var(--mute)}
textarea{min-height:110px;resize:vertical}

.btn{display:inline-block;font:inherit;font-weight:600;font-size:17px;
  padding:15px 28px;border:1px solid var(--ink);background:var(--ink);color:#fff;
  cursor:pointer;text-decoration:none;text-align:center}
.btn:hover{background:var(--paper);color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--quiet{background:none;border:0;color:var(--mute);text-decoration:underline;
  padding:10px 2px;font-size:.95rem;cursor:pointer}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--ink);color:#fff}
.actions{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.actions .spacer{flex:1}
.full{width:100%}

.msg{margin-top:18px;padding:14px 16px;border:1px solid var(--line);font-size:.95rem}
.msg--bad{border-color:var(--bad);color:var(--bad)}
.msg--good{border-color:var(--good);color:var(--good)}

/* ── Tick boxes: the whole row is the target ───────────────────────── */
.ticks{margin-top:14px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media(max-width:620px){.ticks{grid-template-columns:1fr}}
.tick{display:flex;align-items:flex-start;gap:12px;border:1px solid var(--line);
  padding:15px 16px;cursor:pointer;background:var(--paper);min-height:58px}
.tick:hover{border-color:#9a9a9a}
.tick input{appearance:none;width:22px;height:22px;flex:none;margin-top:1px;
  border:1.5px solid #8a8a8a;background:var(--paper);cursor:pointer}
.tick input:checked{background:var(--ink);border-color:var(--ink);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' stroke='%23fff' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:16px;background-position:center;background-repeat:no-repeat}
.tick input[type=radio]{border-radius:50%}
.tick input[type=radio]:checked{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3.4' fill='%23fff'/%3E%3C/svg%3E")}
.tick:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tick span{color:var(--ink);font-size:16.5px;line-height:1.35}
.tick .note{display:block;color:var(--mute);font-size:.86rem;margin-top:3px}
.ticks--wide{grid-template-columns:1fr}

/* ── Progress ──────────────────────────────────────────────────────── */
.progress{border-bottom:1px solid var(--line);background:var(--paper);
  position:sticky;top:53px;z-index:50}
.progress-in{max-width:820px;margin:0 auto;padding:14px 22px}
.progress .meta{display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.rail{margin-top:9px;height:3px;background:var(--line)}
.rail i{display:block;height:100%;background:var(--ink);transition:width .25s ease}
.saved{color:var(--good);font-family:var(--mono);font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase}

/* ── Review ────────────────────────────────────────────────────────── */
.review{margin-top:26px;border-top:1px solid var(--line)}
.review .row{display:grid;grid-template-columns:190px 1fr;gap:24px;padding:15px 0;
  border-bottom:1px solid var(--line)}
.review .row dt{color:var(--mute);font-size:.92rem}
.review .row dd{color:var(--ink)}
@media(max-width:620px){.review .row{grid-template-columns:1fr;gap:3px}}

/* ── Repeating job cards ───────────────────────────────────────────── */
.card{border:1px solid var(--line);padding:20px;margin-top:16px}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.card-head h3{font-size:1rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
@media(max-width:620px){.grid2{grid-template-columns:1fr}}

/* ── Files ─────────────────────────────────────────────────────────── */
.drop{margin-top:18px;border:2px dashed #bdbdbd;padding:34px 22px;text-align:center;
  background:var(--wash);cursor:pointer}
.drop.over{border-color:var(--ink);background:#efefef}
.drop b{display:block;color:var(--ink);font-size:1.05rem}
.files{margin-top:18px;border-top:1px solid var(--line)}
.file{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line)}
.file .name{flex:1;color:var(--ink);word-break:break-word}
.file .size{color:var(--faint);font-family:var(--mono);font-size:.75rem;white-space:nowrap}
.file button{background:none;border:0;color:var(--mute);text-decoration:underline;
  cursor:pointer;font:inherit;font-size:.9rem}

/* Widths live here rather than in JS: style-src 'self' blocks inline style
   writes, and a progress bar with seven states is stylesheet work anyway. */
.rail i{width:0}
.rail i[data-step="1"]{width:14%}
.rail i[data-step="2"]{width:28%}
.rail i[data-step="3"]{width:43%}
.rail i[data-step="4"]{width:57%}
.rail i[data-step="5"]{width:71%}
.rail i[data-step="6"]{width:86%}
.rail i[data-step="7"]{width:100%}

.inline-row{display:flex;gap:10px;flex-wrap:wrap}
.inline-row .grow{flex:1;min-width:200px}
.hint--foot{margin-top:34px}