/* The candidate's four screens.

   Quieter than the portal on purpose. Somebody uses this three or four times
   in their life, on a phone, probably in the evening, and every decision here
   follows from that: one thing per screen, targets you can hit without
   looking, nothing that needs explaining, and no chrome that is not doing a
   job. The checkmarks are the whole interface. */
:root{
  --orange:#F0965B; --orange-600:#E2761F; --orange-tint:#FDF2E9;
  --ink:#1D1D1F; --ink-2:#6E6E73; --ink-3:#86868B;
  --bg:#FFFFFF; --bg-2:#F5F5F7; --hair:#D2D2D7;
  --green:#1B7742; --green-bg:#E7F4EC; --red:#C4231A; --red-bg:#FDECEC;
  --r:18px;
  --font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
         Helvetica, Arial, sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg-2); color:var(--ink); font-family:var(--font);
  font-size:17px; line-height:1.45; letter-spacing:-.015em;
  -webkit-font-smoothing:antialiased;
}
[hidden]{display:none!important}
button{font:inherit; color:inherit}

.screen{min-height:100vh; min-height:100dvh}
.shell{max-width:620px; margin:0 auto; padding:28px 20px 72px}
.shell.narrow{max-width:400px; padding-top:14vh}

.topbar{display:flex; align-items:center; justify-content:space-between;
  gap:12px; margin-bottom:26px}
.brand{font-size:12px; font-weight:700; letter-spacing:.11em; color:var(--orange-600)}
.crumb{font-size:.82rem; color:var(--ink-3)}
.link{background:none; border:0; padding:6px 0; font-size:.88rem; color:var(--orange-600);
  cursor:pointer}
.link:hover{text-decoration:underline}
.back{font-weight:500}

h1{margin:10px 0 6px; font-size:2rem; font-weight:600; letter-spacing:-.03em; line-height:1.15}
h2{margin:0 0 4px; font-size:1.22rem; font-weight:600; letter-spacing:-.02em}
h3{margin:0 0 3px; font-size:1rem; font-weight:600}
.lede{margin:0 0 24px; color:var(--ink-2); font-size:1rem}
.fine{margin-top:22px; color:var(--ink-3); font-size:.82rem; line-height:1.5}

/* ---------- the four ---------- */
.steps{list-style:none; margin:0; padding:0; background:var(--bg);
  border-radius:var(--r); overflow:hidden}
.steps li + li{border-top:1px solid var(--hair)}
.steprow{
  display:flex; align-items:center; gap:15px; width:100%; text-align:left;
  background:none; border:0; padding:19px 18px; cursor:pointer;
  transition:background .15s;
}
.steprow:hover{background:var(--bg-2)}
.steprow:disabled{cursor:default; opacity:.5}
.steprow:disabled:hover{background:none}
.tick{
  flex:none; width:28px; height:28px; border-radius:50%;
  border:2px solid var(--hair); position:relative; transition:all .2s;
}
.tick::after{
  content:''; position:absolute; left:8px; top:4px; width:7px; height:13px;
  border:solid #fff; border-width:0 2.5px 2.5px 0; transform:rotate(45deg) scale(.5);
  opacity:0; transition:all .2s;
}
.done .tick{background:var(--green); border-color:var(--green)}
.done .tick::after{opacity:1; transform:rotate(45deg) scale(1)}
.steptext{flex:1; min-width:0}
.steptext .t{display:block; font-size:1.02rem; font-weight:560; letter-spacing:-.015em}
.steptext .s{display:block; font-size:.84rem; color:var(--ink-3); margin-top:1px}
.done .steptext .t{color:var(--ink-2)}
.chev{flex:none; width:8px; height:8px; border-top:2px solid var(--ink-3);
  border-right:2px solid var(--ink-3); transform:rotate(45deg); opacity:.45}
.steprow:disabled .chev{opacity:.2}

/* ---------- cards and forms ---------- */
.card{background:var(--bg); border-radius:var(--r); padding:22px 20px; margin-bottom:14px}
.card > h2{margin-bottom:6px}
.card .note{margin:0 0 18px; color:var(--ink-2); font-size:.92rem}

label{display:block; margin:16px 0 6px; font-size:.84rem; font-weight:600; color:var(--ink-2)}
input[type=text],input[type=password],input[type=email],input[type=tel],
input[type=date],input[type=number],select,textarea{
  width:100%; font:inherit; font-size:1.02rem; padding:13px 14px;
  border:1px solid var(--hair); border-radius:13px; background:var(--bg); color:var(--ink);
  -webkit-appearance:none; appearance:none;
}
select{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2386868B' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; padding-right:38px}
textarea{min-height:92px; resize:vertical; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--orange);
  box-shadow:0 0 0 3px var(--orange-tint)}
.hint{margin:6px 0 0; font-size:.8rem; color:var(--ink-3); line-height:1.45}
.grid{display:grid; grid-template-columns:1fr 1fr; gap:0 16px}
.grid .full{grid-column:1 / -1}
@media (max-width:520px){ .grid{grid-template-columns:1fr} }

/* a radio set that looks like a list, not like 1998 */
.choices{display:flex; flex-direction:column; border:1px solid var(--hair);
  border-radius:13px; overflow:hidden; margin-top:6px}
.choice{display:flex; align-items:center; gap:12px; padding:14px 15px; cursor:pointer;
  font-size:.98rem; background:var(--bg)}
.choice + .choice{border-top:1px solid var(--hair)}
.choice input{position:absolute; opacity:0; pointer-events:none}
.dot{flex:none; width:21px; height:21px; border-radius:50%; border:2px solid var(--hair);
  position:relative; transition:all .15s}
.choice input:checked ~ .dot{border-color:var(--orange-600); border-width:7px}
.choice:has(input:checked){background:var(--orange-tint)}

.err{margin:14px 0 0; padding:11px 13px; border-radius:12px; background:var(--red-bg);
  color:var(--red); font-size:.88rem; line-height:1.45}
.ok{margin:14px 0 0; padding:11px 13px; border-radius:12px; background:var(--green-bg);
  color:var(--green); font-size:.88rem}

.go{
  display:block; width:100%; margin-top:22px; padding:15px 20px; border:0;
  border-radius:999px; background:var(--orange-600); color:#fff;
  font-size:1.02rem; font-weight:600; cursor:pointer; transition:opacity .15s;
}
.go:disabled{opacity:.45; cursor:not-allowed}
.go.quiet{background:var(--bg); color:var(--ink); border:1px solid var(--hair)}
.row{display:flex; gap:10px; margin-top:22px}
.row .go{margin-top:0}
.row .go.quiet{flex:0 0 auto; width:auto; padding-inline:24px}

/* ---------- progress through the form ---------- */
.pips{display:flex; gap:5px; margin:0 0 20px}
.pip{height:4px; flex:1; border-radius:2px; background:var(--hair)}
.pip.on{background:var(--orange-600)}
.pip.past{background:var(--orange)}

/* ---------- documents ---------- */
.docs{list-style:none; margin:0; padding:0; background:var(--bg);
  border-radius:var(--r); overflow:hidden}
.docs li + li{border-top:1px solid var(--hair)}
.docrow{display:flex; align-items:center; gap:14px; width:100%; text-align:left;
  background:none; border:0; padding:17px 18px; cursor:pointer}
.docrow:hover{background:var(--bg-2)}
.docrow .t{display:block; font-size:.99rem; font-weight:550}
.docrow .s{display:block; font-size:.82rem; color:var(--ink-3); margin-top:1px}

.paper{background:var(--bg); border-radius:var(--r); overflow:hidden; margin-bottom:14px}
.paper iframe{display:block; width:100%; height:62vh; min-height:360px; border:0;
  background:var(--bg-2)}
.paper .fallback{padding:14px 18px; font-size:.85rem; color:var(--ink-2)}
.sigprev{margin-top:8px; min-height:46px; padding:8px 14px; border-radius:13px;
  background:var(--bg-2); font-family:"Snell Roundhand","Apple Chancery","Segoe Script",cursive;
  font-size:1.8rem; color:#1F2D6B; line-height:1.3; overflow:hidden}
.sigprev:empty::before{content:"Your signature appears here"; font-family:var(--font);
  font-size:.85rem; color:var(--ink-3)}
.agree{display:flex; gap:12px; align-items:flex-start; margin:18px 0 0;
  font-size:.9rem; color:var(--ink-2); line-height:1.5; cursor:pointer}
.agree input{width:21px; height:21px; margin:1px 0 0; accent-color:var(--orange-600); flex:none}

/* ---------- uploads ---------- */
.drop{display:block; margin-top:12px; padding:26px 18px; border:1.5px dashed var(--hair);
  border-radius:15px; text-align:center; color:var(--ink-2); font-size:.92rem; cursor:pointer}
.drop:hover{border-color:var(--orange); background:var(--orange-tint); color:var(--orange-600)}
.drop b{display:block; font-size:1rem; color:var(--ink); margin-bottom:3px}
.drop:hover b{color:var(--orange-600)}
.drop input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
.files{list-style:none; margin:14px 0 0; padding:0}
.files li{display:flex; align-items:center; gap:12px; padding:11px 0;
  border-top:1px solid var(--hair); font-size:.9rem}
.files .grow{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.files .when{color:var(--ink-3); font-size:.8rem; white-space:nowrap}
.files .x{background:none; border:0; color:var(--ink-3); cursor:pointer; font-size:1.1rem;
  padding:0 2px}
.files .x:hover{color:var(--red)}

.badge{display:inline-block; padding:3px 9px; border-radius:999px; font-size:.72rem;
  font-weight:600; background:var(--bg-2); color:var(--ink-3)}
.badge.on{background:var(--green-bg); color:var(--green)}

/* ---------- first day ---------- */
.day{list-style:none; margin:18px 0 0; padding:0}
.day li{display:flex; gap:14px; padding:14px 0; border-top:1px solid var(--hair)}
.day li:first-child{border-top:0}
.day .num{flex:none; width:26px; height:26px; border-radius:50%; background:var(--orange-tint);
  color:var(--orange-600); font-size:.82rem; font-weight:700; display:flex;
  align-items:center; justify-content:center}
.day .t{font-weight:560}
.day .s{color:var(--ink-2); font-size:.9rem; margin-top:2px}

.toast{position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:rgba(29,29,31,.93); color:#fff; padding:11px 18px; border-radius:999px;
  font-size:.88rem; z-index:20; max-width:90vw}