/* Kleinberg Electric — applicant form
   Palette taken from the company letterhead: navy, with the yellow from the
   logo mark as the single accent. */

:root {
  --navy: #10243f;
  --navy-hi: #1a3963;
  --ink: #16202e;
  --muted: #5b6b7f;
  --line: #d8dfe8;
  --line-2: #eef2f7;
  --bg: #f4f6f9;
  --card: #fff;
  --accent: #f5b921;
  --ok: #0f7a4a;
  --err: #b3261e;
  --focus: #2a6fd6;
  --radius: 10px;
  /**
   * One width for the header, the form and the footer. Setting it in three
   * places is what let the narrow pages drift: main.narrow was 560px while the
   * header and footer stayed at 800, so both overhung the card by 120px a side.
   */
  --page: 800px;
  --shadow: 0 1px 2px rgba(16, 36, 63, .05), 0 4px 16px rgba(16, 36, 63, .05);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------------- header ---------------- */

.site-head { background: var(--navy); color: #fff; padding: 18px 0; }
.head-in {
  max-width: var(--page); margin: 0 auto; padding: 0 16px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
/* The company mark is black artwork, so it needs a light plate to sit on
   against the navy header rather than disappearing into it. */
.logo {
  display: block; height: 40px; width: auto; flex: 0 0 auto;
  background: #fff; padding: 7px 12px; border-radius: 8px;
  box-sizing: content-box;
}
.head-txt { min-width: 0; }
h1 { margin: 0; font-size: 19px; letter-spacing: -.2px; }
.co { margin: 2px 0 0; font-size: 13px; color: #a9bacd; }

.bar { background: #0a1a2e; height: 5px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s ease; }
/* Pages that aren't a multi-step wizard show the bar already full. Done with a
   class rather than style="width:100%" because the CSP forbids inline styles —
   which silently left the bar empty on /request and /decide. */
.bar > i.done { width: 100%; }

/* ---------------- layout ---------------- */

main { max-width: var(--page); margin: 0 auto; padding: 20px 16px 60px; }

/**
 * The single-card pages — request a link, decide, set a password. The width
 * goes on <body> rather than <main> so the header and footer inherit it and
 * everything lines up down the page.
 */
body.narrow { --page: 560px; }
main.narrow { max-width: var(--page); }
.mono-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px; width: 100%; margin-top: 8px;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 16px;
}

h2 { margin: 0 0 4px; font-size: 21px; letter-spacing: -.3px; }

/**
 * "Account #1" / "Account #2" on the two-account direct deposit form.
 *
 * Given a rule above it, because the only thing separating two identical sets
 * of bank fields is the heading they sit under — and typing the second
 * account's routing number into the first account's boxes is the most
 * expensive mistake this form can produce.
 */
.acct-h {
  margin: 32px 0 4px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 15.5px;
  letter-spacing: -.1px;
}

.sub {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--muted);
}

.lede { margin: 10px 0 0; color: var(--muted); font-size: 14.5px; }
.lede strong { color: var(--ink); }
.lede.spaced { margin-top: 22px; }
.steps { font-size: 12.5px; color: var(--muted); margin: 0 0 12px; }

/* ---------------- fields ---------------- */

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-top: 18px; }
.full { grid-column: 1 / -1; }
@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
  .full { grid-column: auto; }
}

label.f { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 5px; }
.req { color: var(--err); }
.opt { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.tip { font-size: 12.5px; color: var(--muted); margin: 5px 0 0; }

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=password], select, textarea {
  width: 100%;
  padding: 10px 11px;
  font: inherit; font-size: 15px;
  color: var(--ink); background: #fff;
  border: 1px solid var(--line); border-radius: 7px;
  transition: border-color .15s ease;
}
input.upper { text-transform: uppercase; }
textarea { min-height: 70px; resize: vertical; }

select {
  appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%235b6b7f' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 11px;
}

input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus);
}
.bad { border-color: var(--err) !important; background: #fdf6f5; }
.bad-outline { outline: 2px solid var(--err); outline-offset: 3px; border-radius: 8px; }

/* ---------------- checkboxes and radio cards ---------------- */

.ck { display: flex; gap: 9px; align-items: flex-start; font-size: 14.5px; line-height: 1.4; cursor: pointer; margin-top: 10px; }
.ck.spaced { margin-top: 20px; }
.ck input { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--navy); }

.radios { margin-top: 10px; display: grid; gap: 8px; }
.radios.tight { margin-top: 10px; }
.radios label {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 14.5px; line-height: 1.4;
  border: 1px solid var(--line); border-radius: 8px;
  padding: 11px 13px; cursor: pointer; background: #fff;
  transition: border-color .12s ease, background .12s ease;
}
.radios label:hover { border-color: var(--focus); }
.radios input { margin: 2px 0 0; width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--navy); }
.radios label.on { border-color: var(--navy); background: #f7fafe; box-shadow: inset 0 0 0 1px var(--navy); }

/* ---------------- callout boxes ---------------- */

.box {
  background: #f8fafc; border: 1px solid var(--line-2); border-radius: 8px;
  padding: 14px 16px; margin-top: 16px; font-size: 13.5px; color: var(--muted);
}
.box p { margin: 0 0 8px; }
.box p:last-child { margin: 0; }
.box strong { color: var(--ink); }
.box.warn { background: #fffaf0; border-color: #f0dcb4; }
.box.info { background: #f2f7fd; border-color: #cfe0f5; }
.box ol, .box ul { margin: 6px 0 0; padding-left: 20px; }
.box li { margin: 4px 0; }

/* ---------------- the link's deadline ----------------
   One line, above the form, on every step. Kept to one or two lines on a
   phone, which is what nearly everybody fills this in on: a banner that grows
   into a paragraph pushes the field being typed into off the screen. It
   escalates by colour rather than by size, for the same reason. */

.deadline {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  background: #f8fafc;
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--line-2);
  border-radius: 6px;
  padding: 8px 11px;
  margin: 0 0 14px;
}
.deadline.warn {
  background: #fffaf0; border-color: #f0dcb4; border-left-color: #d9a441; color: #6b5326;
}
.deadline.urgent {
  background: #fff4f2; border-color: #f2cbc4; border-left-color: #b3261e; color: #7d2a22;
  font-weight: 600;
}

/* ---------------- buttons ---------------- */

.nav { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-top: 24px; flex-wrap: wrap; }
.nav.center-nav { justify-content: center; }

button {
  font: inherit; font-size: 15.5px; font-weight: 700;
  border: 0; border-radius: 8px; padding: 13px 26px; cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.primary { background: var(--navy); color: #fff; }
.primary:hover:not(:disabled) { background: var(--navy-hi); }
.ghost { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.ghost:hover:not(:disabled) { border-color: var(--navy); }
button:disabled { opacity: .55; cursor: not-allowed; }
button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------------- messages ---------------- */

#err, #gateCodeErr {
  display: none; margin: 0 0 14px; padding: 12px 15px; border-radius: 8px;
  background: #fdecea; border: 1px solid #f3c2bd; color: #8a1f18;
  font-size: 14.5px; font-weight: 600;
}
#err.on, #gateCodeErr.on { display: block; }

/* ---------------- signature pad ---------------- */

.pad {
  border: 2px dashed var(--line); border-radius: 9px; background: #fff;
  position: relative; margin-top: 12px; touch-action: none;
}
.pad canvas { display: block; width: 100%; height: 190px; border-radius: 8px; cursor: crosshair; }
.pad .base { position: absolute; left: 26px; right: 26px; bottom: 52px; border-bottom: 1px solid #c8d2de; pointer-events: none; }
.pad .x { position: absolute; left: 26px; bottom: 56px; color: #9aa8b8; font-size: 19px; pointer-events: none; }
.pad.filled { border-style: solid; border-color: var(--ok); }
.padbar { display: flex; gap: 10px; align-items: center; margin-top: 9px; flex-wrap: wrap; }
.padbar button { padding: 8px 15px; font-size: 14px; }

/* ---------------- review ---------------- */

.rev { border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; margin-top: 14px; }
.rev h4 {
  margin: 0; padding: 9px 14px; background: #f4f7fa;
  font-size: 12px; letter-spacing: .07em; text-transform: uppercase;
  color: var(--navy); border-bottom: 1px solid var(--line-2);
}
.rev dl { margin: 0; padding: 6px 14px 12px; display: grid; grid-template-columns: auto 1fr; gap: 2px 18px; font-size: 14px; }
.rev dt { color: var(--muted); padding: 5px 0; }
.rev dd { margin: 0; padding: 5px 0; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  .rev dl { grid-template-columns: 1fr; }
  .rev dd { padding-top: 0; margin-bottom: 6px; }
}

/* ---------------- done ---------------- */

.center { text-align: center; }
.big-ok {
  width: 58px; height: 58px; border-radius: 50%; background: var(--ok); color: #fff;
  font-size: 31px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}

.filelist { list-style: none; padding: 0; margin: 20px 0 0; }
.filelist li { display: flex; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line-2); font-size: 14.5px; }
.filelist li:last-child { border: 0; }
.filelist .n {
  width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; flex: 0 0 auto;
}

footer {
  max-width: var(--page);
  margin: 0 auto;
  padding: 18px 16px 40px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.7;
  /* Prefer breaking between the middot-separated parts over splitting an
     address across lines. */
  text-wrap: pretty;
}

/**
 * iOS turns a bare phone number into a link whether we ask it to or not, which
 * put one blue underlined item in the middle of grey small print and made the
 * footer look like it had a stray hyperlink in it. Let it stay tappable, but
 * looking like the text around it.
 */
footer a { color: inherit; text-decoration-color: var(--line); text-underline-offset: 2px; }

/**
 * Each fact is its own item, so a line breaks BETWEEN facts rather than
 * through the middle of a street address. The separator belongs to the item
 * before it, which keeps it off the start of a wrapped line.
 */
.foot-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0 7px;
  margin: 0 0 3px;
}
.foot-line:last-child { margin-bottom: 0; }
.foot-line > span:not(:last-child)::after { content: " \00B7"; color: var(--line); }

/**
 * The copyright and running version. Set apart from the licence numbers above
 * it, and a shade quieter: it is here to be found when somebody goes looking
 * for it, not to compete with the address.
 */
.foot-line.version {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  opacity: 0.8;
}

@media (max-width: 560px) {
  /* On a phone the three lines wrap into six ragged ones. Centred and
     balanced, they read as three deliberate lines instead of an overflow. */
  footer { text-align: center; }
  .foot-line { justify-content: center; }
}

.hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* Ordinary in-copy links — the default purple-visited blue looks like a mistake
   next to the navy. */
.box a, .lede a {
  color: var(--focus);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.box a:hover, .lede a:hover { color: var(--navy); }
.box a:focus-visible, .lede a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- attachment ---------- */

/*
 * The file control is one of the few things on this form that gets used
 * standing up, one-handed, on a phone, in a van. Give it a real target size
 * rather than the browser's default hairline button.
 */
.upload { margin-top: 14px; }

.upload input[type="file"] {
  display: block;
  width: 100%;
  padding: 14px 12px;
  border: 1px dashed var(--line, #c7cdd6);
  border-radius: 8px;
  background: var(--soft, #f7f8fa);
  font: inherit;
  cursor: pointer;
}

.upload input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 10px 14px;
  min-height: 44px;
  border: 0;
  border-radius: 6px;
  background: var(--navy, #10243f);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.upload input[type="file"]:focus-visible { outline: 2px solid var(--navy, #10243f); outline-offset: 2px; }
.upload input[type="file"].bad { border-color: var(--bad, #a3241c); border-style: solid; }

#bankDocState:not(:empty) { margin-top: 8px; font-weight: 600; }

/* ---------- I-9 Section 2 panel ---------- */

.i9-panel { margin-top: 26px; }

.i9-doc {
  border: 1px solid var(--line, #c7cdd6);
  border-radius: 8px;
  padding: 12px 14px 16px;
  margin: 12px 0;
  background: var(--soft, #f7f8fa);
}

.i9-doc-h {
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--muted, #55636f);
}

.i9-panel input[type="text"],
.i9-panel input[type="date"],
.i9-panel select { width: 100%; }