/* =================================================================== brand tokens
   PACK Power is the default brand (see mats/PACK/Pack Power Brand Guide.pdf).
   Other brands override these tokens in an [data-brand="..."] block - Lykos Energy is below.
   The server sets <html data-brand> from the URL prefix (/PACK, /Lykos); see app/brands.py. */
:root {
  /* Brand palette: Electric Yellow / Black / White */
  --brand-yellow: #fab918;
  --brand-black: #000000;
  --brand-white: #ffffff;

  /* Typography: Stratum (headings), Korolev (paragraph), Raleway (text).
     Stratum/Korolev are licensed fonts - used if installed, otherwise fall back. */
  --font-heading: "Stratum1", "Stratum", "Raleway", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg: #f4f4f2;
  --surface: #ffffff;
  --text: #111111;
  --muted: #5c5c5c;
  --border: #e0dfdb;
  --brand: var(--brand-black);
  --accent: var(--brand-yellow);
  --accent-ink: var(--brand-black);
  --accent-hover: #e9a90c;
  --icon-bg: var(--brand-black);      /* document-card badge */
  --icon-ink: var(--accent);
  --choice: #000;                     /* selected radios / checkboxes in forms */
  --hero-mark: url("/static/brand/pack/bolt.svg");
  --hero-mark-opacity: .18;
  --ok: #1f8a4c;
  --ok-bg: #e7f5ec;
  --err: #b42318;
  --radius: 10px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 4px 12px rgba(0, 0, 0, .06);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0b0b0b; --surface: #171717; --text: #f2f2f0; --muted: #a3a3a0;
    --border: #2c2c2a; --ok: #4cc98a; --ok-bg: #12301f; --err: #ff8a80;
    --shadow: 0 1px 2px rgba(0,0,0,.5);
  }
}
/* Raleway (SIL OFL, see fonts/Raleway-OFL.txt) - self-hosted variable font, latin + latin-ext subsets */
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/raleway-latin-wght.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;
}
@font-face {
  font-family: "Raleway"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/raleway-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font: 500 16px/1.5 var(--font-text);
  background: var(--bg); color: var(--text); min-height: 100vh;
}
h1, h2, h3, .doc-title, .btn { font-family: var(--font-heading); }
h1, h2 { font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }

.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px; background: var(--brand); color: #fff;
  padding-top: max(10px, env(safe-area-inset-top));
  border-bottom: 4px solid var(--accent);
}
.brand { display: flex; gap: 12px; align-items: center; }
.brand-logo { display: block; height: 40px; width: auto; }
.brand-divider { width: 2px; align-self: stretch; margin: 4px 0; background: var(--accent); }
.brand-app { font-family: var(--font-heading); font-weight: 700; font-size: 13px; letter-spacing: .28em; text-transform: uppercase; }
.link-btn { background: none; border: 0; color: #fff; opacity: .85; cursor: pointer; font: inherit; }
.link-btn:hover { opacity: 1; text-decoration: underline; }

main { max-width: 860px; margin: 0 auto; padding: 24px 16px 64px; }
.center { text-align: center; padding: 48px 0; }
.muted { color: var(--muted); }

.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 24px;
}
.hero { position: relative; overflow: hidden; border-top: 4px solid var(--accent); }
.hero::after {  /* brand mark (PACK bolt / Lykos wolf) */
  content: ""; position: absolute; top: 18px; right: -14px; width: 120px; height: 96px; pointer-events: none;
  background: var(--hero-mark) no-repeat center / contain; opacity: var(--hero-mark-opacity);
}
.hero > * { position: relative; z-index: 1; }
.hero h1 { margin: 0 0 4px; font-size: 26px; padding-right: 64px; }

.auth-logo { display: block; width: min(220px, 60vw); height: auto; margin: 32px auto 4px; }
.auth-logo img { display: block; width: 100%; height: auto; }
.hero .date { color: var(--muted); margin: 0; }

.progress { margin: 20px 0 8px; }
.progress-bar { height: 8px; background: var(--border); border-radius: 99px; overflow: hidden; }
.progress-bar > span { display: block; height: 100%; background: var(--accent); transition: width .3s; }
.progress-label { font-size: 14px; color: var(--muted); margin-top: 6px; }

.docs { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.doc {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.doc.done { border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.doc.locked { opacity: .55; }
.doc.placeholder { border-style: dashed; }
.doc-icon {
  flex: none; width: 42px; height: 42px; border-radius: 10px; display: grid; place-items: center;
  font-family: var(--font-heading); font-size: 11px; font-weight: 800; letter-spacing: .06em;
  color: var(--icon-ink); background: var(--icon-bg);
}
@media (prefers-color-scheme: dark) { :root:not([data-brand="lykos"]) .doc-icon { background: #262626; } }
.doc.done .doc-icon { background: var(--ok); font-size: 20px; }
.doc-body { flex: 1; min-width: 0; }
.doc-title { font-weight: 700; }
.doc-meta { font-size: 14px; margin-top: 2px; }
.doc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

.btn {
  font: inherit; font-family: var(--font-heading); font-size: 15px; font-weight: 700; cursor: pointer;
  border-radius: 8px; padding: 9px 16px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text);
}
.btn:hover:not(:disabled) { filter: brightness(.95); }
.btn.primary:hover:not(:disabled) { filter: none; background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.ghost { background: transparent; }
.btn:disabled { cursor: not-allowed; opacity: 1; background: var(--ok-bg); border-color: transparent; color: var(--ok); }
.btn.primary:disabled:not(.is-done) { background: var(--border); color: var(--muted); }
.btn:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 75%, transparent); outline-offset: 2px; }

form label { display: block; font-weight: 600; font-size: 14px; margin: 14px 0 0; }
input[type=password], input[type=email] {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text);
}
.error { color: var(--err); min-height: 1.5em; margin: 12px 0 0; font-size: 14px; }
.rules { list-style: none; padding: 0; margin: 14px 0 0; font-size: 14px; color: var(--muted); }
.rules li::before { content: "○ "; }
.rules li.ok { color: var(--ok); }
.rules li.ok::before { content: "✓ "; }

dialog {
  border: 0; border-radius: var(--radius); padding: 28px; width: min(440px, calc(100vw - 32px));
  background: var(--surface); color: var(--text); box-shadow: 0 20px 50px rgba(0,0,0,.3);
}
dialog::backdrop { background: rgba(0, 0, 0, .6); }
dialog:not(.form-dialog) { border-top: 4px solid var(--accent); }
dialog h2 { margin: 0 0 4px; }
dialog .btn { width: 100%; margin-top: 16px; }

.narrow { max-width: 440px; margin: 24px auto 0; }
.narrow .btn { width: 100%; margin-top: 18px; }
.banner { padding: 14px 16px; border-radius: 10px; background: var(--ok-bg); color: var(--ok); margin-top: 16px; font-weight: 600; }
/* Toast: pops in at the top, fades away (app.js toast()). Popover UA styles reset so it isn't centered/bordered. */
.toast { position: fixed; inset: auto; top: calc(16px + env(safe-area-inset-top)); left: 50%; margin: 0; z-index: 1000;
  width: max-content; max-width: min(440px, calc(100vw - 32px)); display: flex; gap: 10px; align-items: flex-start;
  padding: 14px 18px; border: 0; border-left: 4px solid var(--ok); border-radius: 12px; background: var(--surface); color: var(--text);
  font-weight: 600; line-height: 1.4; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); cursor: pointer;
  opacity: 0; transform: translate(-50%, -12px); transition: opacity .35s ease, transform .35s ease; }
.toast::before { content: "\2713"; color: var(--ok); flex: none; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .toast { transition: opacity .35s ease; transform: translate(-50%, 0); } }

/* ---- in-app forms ---- */
a.btn { text-decoration: none; display: inline-block; }
dialog.form-dialog { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; overflow: hidden; }
dialog.form-dialog[open] { display: flex; flex-direction: column; }
.form-body { overflow-y: auto; padding: 0 40px 8px; background: #fff; color: #1b1f27; font-size: 15px; }
.form-header { display: block; width: calc(100% + 80px); margin: 0 -40px 8px; }
.form-title { text-align: center; font-size: 19px; margin: 18px 0 18px !important; letter-spacing: .01em; }
.form-body .lbl { font-weight: 600; }
.form-items { padding-left: 22px; }
.form-items li { margin: 6px 0; padding-left: 8px; }
.form-body label.inline { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; margin: 0; }
.form-body label.inline input { flex: 1; max-width: 340px; border: 0; border-bottom: 1px solid #1b1f27; padding: 4px 2px; font: inherit; font-weight: 400; background: #fffbea; color: #1b1f27; }
.form-body label.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 15px; margin: 18px 0; padding: 12px 14px; border-radius: 8px; background: #f4f5f7; }
.form-body label.check input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.sig-wrap { margin: 8px 0 12px; }
.sig-head { display: flex; justify-content: space-between; align-items: baseline; }
.link-btn.dark { color: #1d4ed8; }
.sig-pad { display: block; width: 100%; height: 150px; border: 1.5px dashed #9aa3b2; border-radius: 8px; background: #fff; touch-action: none; cursor: crosshair; margin-top: 6px; }
.sig-hint { font-size: 13px; margin-top: 4px; color: #5d6573; }
.form-body .error { color: #b42318; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); background: var(--surface); }
.form-actions .btn { width: auto; margin: 0; }
/* Form errors: a bar pinned above the buttons (tap to jump to the field) plus a message under the field itself. */
.form-error { display: flex; gap: 8px; align-items: flex-start; padding: 10px 20px; background: #fdecea; color: #b42318; border-top: 2px solid #b42318; font-size: 15px; font-weight: 600; line-height: 1.35; cursor: pointer; }
.form-error[hidden] { display: none; }
.form-error::before { content: "\26A0"; flex: none; }
.form-error.flash { animation: form-error-flash .6s ease-out; }
@keyframes form-error-flash { 0% { background: #f8b4ad; } 100% { background: #fdecea; } }
.field-msg { display: block; margin-top: 6px; color: #b42318; font-size: 14px; font-weight: 600; line-height: 1.35; }
.check + .field-msg { margin: -10px 0 16px; }   /* under a check box row: close to it, gap before the next field */
.field-msg::before { content: "\26A0\00A0"; }
@media (max-width: 560px) { .form-body { padding: 0 18px 8px; } .form-header { width: calc(100% + 36px); margin: 0 -18px 8px; } }

/* ---- legal name ---- */
.legal-name { margin: 12px 0 0; font-size: 15px; }
.legal-name .link-btn { margin-left: 6px; font-size: 14px; }
@media (prefers-color-scheme: dark) { .link-btn.dark { color: #8ab4ff; } }
.name-grid { display: grid; grid-template-columns: 1fr 110px; gap: 0 12px; }
.name-grid .span2 { grid-column: 1 / -1; }
.name-grid input { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; font-weight: 400;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); }
.name-grid .opt { font-weight: 400; }
.name-actions { display: flex; gap: 10px; }
.name-actions .btn { flex: 1; }
.name-actions .btn[hidden] { display: none; }

[hidden] { display: none !important; }

/* ---- I-9 form ---- */
.form-body.kind-i9 { padding-top: 22px; font-size: 14px; }
.i9-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-bottom: 3px solid #1b1f27; padding-bottom: 8px; }
.i9-title { font-size: 21px; font-weight: 700; }
.i9-id { font-size: 12px; text-align: right; color: #5d6573; max-width: 170px; }
.i9-note { font-size: 13px; color: #3b414b; }
.i9-sec { font-size: 14px; background: #eef1f5; padding: 8px 10px; border-left: 4px solid #1b1f27; margin: 16px 0 10px; }
.grid { display: grid; gap: 10px 12px; margin-bottom: 10px; }
.g4 { grid-template-columns: 1.4fr 1.4fr .8fr 1.4fr; }
.g2 { grid-template-columns: 1fr 1fr; }
.g-addr { grid-template-columns: 2fr .9fr 1.6fr .8fr .9fr; }
.fld { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #3b414b; margin: 0; }
.fld i { font-weight: 400; }
.fld input, .fld select, .fld textarea { font: inherit; font-size: 15px; font-weight: 400; color: #1b1f27; padding: 7px 8px; border: 1px solid #b9c0cb; border-radius: 6px; background: #f6f8fc; min-width: 0; }
.fld input[readonly] { background: #e6e9ef; color: #5a6270; cursor: not-allowed; }
.i9-attest { display: grid; grid-template-columns: 210px 1fr; gap: 16px; border-top: 1px solid #d5dae2; border-bottom: 1px solid #d5dae2; padding: 12px 0; margin-top: 6px; }
.i9-attest-text { font-weight: 700; font-size: 13px; margin: 0; }
.form-body fieldset { border: 0; padding: 0; margin: 0 0 8px; }
.form-body legend { font-size: 13px; margin-bottom: 6px; }
.radio { display: flex; gap: 8px; align-items: center; font-weight: 400; font-size: 14px; margin: 5px 0; cursor: pointer; }
.radio input { width: 16px; height: 16px; }
.i9-sub { margin: 8px 0 0 24px; padding: 10px 12px; background: #f6f8fc; border-radius: 8px; display: grid; gap: 10px; }
.invalid input, .invalid select, input.invalid { border-color: #b42318 !important; background: #fff4f2 !important; }
fieldset.invalid, .check.invalid, .sig-wrap.invalid .sig-pad { outline: 2px solid #b42318; outline-offset: 3px; border-radius: 6px; }
@media (max-width: 680px) {
  .g4, .g-addr, .g2 { grid-template-columns: 1fr 1fr; }
  .g-addr > :first-child { grid-column: 1 / -1; }
  .i9-attest { grid-template-columns: 1fr; }
  .i9-head { flex-direction: column; } .i9-id { text-align: left; max-width: none; }
}
.i9-attest > div, .i9-sub > *, .grid > * { min-width: 0; }
.i9-sub { margin-left: 0; }

/* ---- typed signature ---- */
@font-face { font-family: "PackSignature"; src: url("/static/fonts/dancing-script-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
.sig-wrap.typed { display: grid; gap: 8px; }
.sig-preview { min-height: 74px; display: flex; align-items: flex-end; padding: 6px 14px 8px; border-bottom: 1.5px solid #1b1f27; background: #fff; overflow: hidden; }
.sig-preview .script { font-family: "PackSignature", "Segoe Script", "Brush Script MT", cursive; font-weight: 600; font-size: 40px; line-height: 1.1; color: #0b1f4b; white-space: nowrap; }
.sig-preview .ph { color: #9aa3b2; font-size: 14px; }
.sig-wrap.typed.invalid .sig-preview { outline: 2px solid #b42318; outline-offset: 3px; }

/* ---- I-9 Supplement A ---- */
.g3 { grid-template-columns: 1.4fr 1.4fr .8fr; }
.g-paddr { grid-template-columns: 2fr 1.5fr .8fr .9fr; }
.prep-block { border: 1px solid #d5dae2; border-radius: 10px; padding: 12px 14px; margin: 10px 0; display: grid; gap: 10px; background: #fbfcfe; }
.prep-head { display: flex; justify-content: space-between; align-items: baseline; }
.prep-block .check { margin: 0; }
#prep-add { margin: 4px 0 8px; }
.i9-info { margin: 18px 0 6px; padding: 12px 14px; border-radius: 8px; background: #eef4ff; font-size: 13px; color: #1b2a44; }
.i9-docs-choice { margin: 10px 0; }
.i9-doc { margin: 10px 0; padding: 12px; border: 1px dashed #c3c9d4; border-radius: 6px; }
.i9-doc-title { font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.i9-doc .fld select { width: 100%; }
.i9-doc-files { margin-top: 10px; }
.i9-doc-files.invalid { outline: 2px solid #b42318; outline-offset: 3px; border-radius: 4px; }
.i9-doc-thumbs:not(:empty) { margin: 0 0 10px; }
.i9-thumb { display: inline-flex; align-items: center; gap: 8px; }
.i9-doc-hint { font-size: 12.5px; margin-top: 6px; }
@media (max-width: 680px) { .g3, .g-paddr { grid-template-columns: 1fr 1fr; } }

/* ---- ND-MN reciprocity (Form NDW-R) - reuses the I-9 layout classes ---- */
.form-body.kind-ndw { padding-top: 22px; font-size: 14px; }
.g-ndwaddr { grid-template-columns: 2fr 1.4fr 1.1fr .8fr; align-items: start; }
.ndw-state legend, .ndw-q legend { font-size: 12px; font-weight: 600; color: #3b414b; margin-bottom: 2px; }
.ndw-state .radio { margin: 0; min-height: 30px; }
.ndw-q { padding: 10px 0; border-top: 1px solid #e3e7ed !important; }
.ndw-q legend { font-size: 14px; float: left; width: 100%; margin-bottom: 4px; }
.ndw-yn { clear: both; display: flex; gap: 28px; }
.ndw-warn { color: #b42318; margin: 4px 0 0; }
.form-body label.check.ndw-na { font-weight: 600; background: #fff8e6; border: 1px solid #f3d27a; }
.fld.ro div { font-size: 15px; font-weight: 400; color: #1b1f27; padding: 7px 0; border-bottom: 1px solid #d5dae2; }
.fld.ro i { color: #8a93a3; }
@media (max-width: 680px) { .g-ndwaddr { grid-template-columns: 1fr 1fr; } .g-ndwaddr > :first-child { grid-column: 1 / -1; } }

/* ---- PACK Employee Info Sheet - reuses the I-9 layout classes ---- */
.form-body.kind-info { padding-top: 22px; font-size: 14px; }
.info-head { display: flex; flex-direction: column; align-items: center; gap: 10px; border-bottom: 3px solid #1b1f27; padding-bottom: 10px; }
.info-head img { height: 54px; }
.info-label { font-size: 13px; font-weight: 700; color: #1b1f27; margin: 4px 0 6px; }
.form-body label.check.info-same { font-weight: 400; font-size: 14px; margin: 0 0 12px; padding: 8px 12px; }
.fld textarea { resize: vertical; min-height: 72px; line-height: 1.4; }

/* ---- Vehicle Safety Handbook receipt ---- */
.form-body.kind-vsp { padding-top: 22px; font-size: 14px; }
.vsp-book { border: 1px solid #d5dae2; border-radius: 10px; padding: 12px 14px; margin: 14px 0 6px; background: #fbfcfe; }
.vsp-book-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.vsp-book-head .btn { flex: none; width: auto; margin: 0; text-decoration: none; text-align: center; }
.vsp-toc { margin: 10px 0 6px; padding-left: 20px; font-size: 13px; color: #3b414b; columns: 2; column-gap: 28px; }
.vsp-toc li { break-inside: avoid; margin-bottom: 3px; }
.vsp-status { margin: 6px 0 0; font-size: 13px; font-weight: 600; color: #8a5a00; }
.vsp-status.ok { color: #1a7f37; }
.vsp-book.invalid { outline: 2px solid #b42318; outline-offset: 3px; }
.form-body label.check.is-disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 680px) { .vsp-toc { columns: 1; } .vsp-book-head { flex-direction: column; align-items: stretch; } }

/* ---- Direct deposit - styled like the paper form ---- */
.form-body.kind-dd { padding-top: 22px; font-size: 14px; }
.dd-paper { color: #1b1f27; line-height: 1.45; }
.dd-paper p { margin: 0 0 12px; text-align: justify; }
.dd-title { font-family: var(--font-heading); font-size: 26px; font-weight: 800; text-align: center; margin: 0 0 14px; letter-spacing: -.01em; }
.dd-check { display: block; margin: 0 auto 10px; width: 292px; max-width: 100%; image-rendering: auto; }
.dd-section { border-top: 2px solid #1b1f27; padding-top: 10px; margin-top: 6px; }
.dd-important { margin-bottom: 4px !important; }
.dd-indent-first { text-indent: 2.5em; }
.dd-paper .dd-hint { font-size: 12.5px; color: #5d6573; text-align: left; }

/* underlined "blanks" */
.dd-blank { display: flex; align-items: flex-end; gap: 6px; margin: 0; font-weight: 400; min-width: 0; }
.dd-blank > span { white-space: nowrap; padding-bottom: 3px; }
.dd-blank input, .dd-amount input { font: inherit; font-size: 15px; color: #0b1f4b; border: 0; border-bottom: 1.5px solid #1b1f27;
  border-radius: 0; background: transparent; padding: 2px 4px; min-width: 0; outline: none; }
.dd-blank input:focus, .dd-amount input:focus { border-bottom-color: var(--accent); background: #fffaf0; }
.dd-blank.grow { flex: 1; } .dd-blank.grow input { flex: 1; width: 100%; }
.dd-date > div { border-bottom: 1.5px solid #1b1f27; min-width: 110px; padding: 2px 4px; color: #0b1f4b; }
.dd-routing input { width: calc(18ch + 8px); font-family: ui-monospace, Consolas, monospace; letter-spacing: 1ch; padding-left: 4px;
  border-bottom: 0; background: linear-gradient(to right, transparent .4ch, #1b1f27 .4ch 1.6ch, transparent 1.6ch) left bottom / 2ch 1.5px repeat-x content-box;
  padding-bottom: 0; }   /* nine blanks: tiles start at the content edge and are clipped to it */
.dd-routing input:focus { background: linear-gradient(to right, transparent .4ch, var(--accent) .4ch 1.6ch, transparent 1.6ch) left bottom / 2ch 2px repeat-x content-box, #fffaf0; }

.dd-sigrow { display: flex; gap: 24px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 10px; }
.dd-sig { flex: 1; min-width: 260px; }
.dd-sig .fld > span { font-size: 14px; font-weight: 400; color: #1b1f27; }
.dd-sig .sig-preview { min-height: 60px; }

.dd-accounts > p:first-child { text-align: left; }
.dd-acct { padding: 10px 0 12px; border-bottom: 1px dashed #d5dae2; }
.dd-acct:last-child { border-bottom: 0; }
.dd-line { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 18px; margin-bottom: 8px; }
.dd-indent { padding-left: 28px; }
.dd-clear { font-size: 12px; padding-bottom: 3px; }
.dd-paper fieldset.dd-type { display: flex; gap: 18px; margin: 0; }
.dd-box { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; font-weight: 400; }
.dd-box input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; margin: 0; border: 1.5px solid #1b1f27;
  background: #fff; display: grid; place-content: center; cursor: pointer; flex: none; }
.dd-box input::after { content: "✔"; font-size: 17px; line-height: 1; color: #0b1f4b; transform: scale(0); transition: transform .08s; }
.dd-box input:checked::after { transform: scale(1); }
.dd-box input:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 75%, transparent); outline-offset: 2px; }
.dd-amount { display: inline-flex; align-items: flex-end; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.dd-amount .dd-dollars { width: 64px; text-align: right; }
.dd-amount .dd-cents { width: 34px; }
.dd-amount input:disabled { background: repeating-linear-gradient(-45deg, transparent 0 4px, #eef1f5 4px 6px); }
.dd-amount .dd-box { margin-left: 4px; }
.dd-doc { margin: 10px 0 4px; padding: 10px 12px; border: 1px dashed #c3c9d4; border-radius: 6px; }
.dd-paper .dd-doc-note { font-size: 13.5px; text-align: left; padding: 10px 12px; border-radius: 6px; background: #eef4ff; color: #1b2a44; }
.dd-doc-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dd-doc-label { font-size: 14px; font-weight: 600; margin-right: 4px; }
@media (max-width: 560px) { .dd-doc-label { flex-basis: 100%; } }
.form-body label.dd-doc-btn { display: inline-flex; align-items: center; width: auto; margin: 0; font-size: 14px; }
.dd-doc-show { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dd-doc-show:not(:empty) { margin-top: 10px; }
.dd-doc-show img { max-height: 120px; max-width: 100%; border: 1px solid #d5dae2; border-radius: 4px; }
.dd-doc-pdf { font-size: 11px; font-weight: 700; color: #fff; background: #b42318; border-radius: 3px; padding: 3px 6px; }
.dd-doc-name { font-size: 14px; overflow-wrap: anywhere; }
.form-body label.check.dd-doc-ok { margin: 10px 0 0; font-weight: 400; font-size: 14px; padding: 8px 12px; }
.form-body label.check.dd-doc-ok[hidden] { display: none; }
.dd-paper .invalid input, .dd-paper input.invalid { border-bottom-color: #b42318 !important; background: #fff4f2 !important; }
.dd-paper .dd-routing.invalid input { background: linear-gradient(to right, transparent .4ch, #b42318 .4ch 1.6ch, transparent 1.6ch) left bottom / 2ch 2px repeat-x content-box, #fff4f2 !important; }
.dd-paper fieldset.invalid, .dd-paper .dd-box.invalid, .dd-paper .dd-amount.invalid, .dd-paper .dd-doc.invalid { outline: 2px solid #b42318; outline-offset: 3px; border-radius: 4px; }
@media (max-width: 680px) {
  .dd-title { font-size: 21px; }
  .dd-paper p { text-align: left; }
  .dd-indent { padding-left: 16px; }
  .dd-line > .dd-blank { flex-basis: 100%; }
  .dd-line > .dd-blank > span { min-width: 0; }
  .dd-amount { margin-left: 0; }
  .dd-date { flex-basis: 100%; }
}

/* =================================================================== mobile / touch */
/* Bigger, consistent tap targets everywhere */
.radio { min-height: 40px; padding: 4px 0; gap: 12px; line-height: 1.35; }
.radio input, .form-body label.check input, .prep-block .check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--choice); }
.form-body label.check { align-items: flex-start; cursor: pointer; }
.link-btn { min-height: 36px; padding: 6px 4px; }
input, select, textarea, button { touch-action: manipulation; }

@media (max-width: 600px) {
  /* 16px+ text stops iOS Safari from zooming into fields on focus */
  input, select, textarea,
  .fld input, .fld select, .name-grid input,
  input[type=password], input[type=email],
  .form-body label.inline input { font-size: 16px !important; }
  .fld input, .fld select, input[type=password], input[type=email], .name-grid input { min-height: 46px; }
  .btn { min-height: 46px; }

  main { padding: 16px 12px 48px; }
  .card { padding: 18px; }
  .hero h1 { font-size: 22px; }
  .topbar { padding-left: 14px; padding-right: 14px; }
  .brand { gap: 10px; }
  .brand-logo { height: 34px; }
  .brand-app { font-size: 11px; letter-spacing: .2em; }
  .doc { padding: 14px; }
  .doc-actions .btn { flex: 1 1 auto; text-align: center; }

  /* Small dialogs (password, legal name) */
  dialog:not(.form-dialog) { padding: 22px 18px; width: calc(100vw - 20px); max-height: calc(100dvh - 20px); overflow-y: auto; }

  /* Fillable forms become a full-screen sheet with a pinned action bar */
  dialog.form-dialog { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; }
  dialog.form-dialog[open] { display: flex; }
  .form-body { flex: 1; padding: 0 16px 24px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; font-size: 15px; }
  .form-body.kind-i9, .form-body.kind-ndw, .form-body.kind-info, .form-body.kind-vsp, .form-body.kind-dd { padding-top: 16px; }
  .form-header { width: calc(100% + 32px); margin: 0 -16px 8px; }
  .form-actions { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); gap: 10px; }
  .form-actions .btn { flex: 1; }
  .form-title { font-size: 17px; }

  /* Every field full width; short ones (MI, apt, state, ZIP) pair up two per row */
  .grid, .g2, .g3, .g4, .g-addr, .g-paddr, .g-ndwaddr { grid-template-columns: 1fr 1fr !important; gap: 12px; }
  .grid > * { grid-column: 1 / -1; }
  .grid > .short { grid-column: auto; }
  .fld { font-size: 13px; }

  .i9-head { flex-direction: column; gap: 6px; }
  .i9-id { text-align: left; max-width: none; }
  .i9-title { font-size: 19px; }
  .i9-attest { grid-template-columns: 1fr; gap: 10px; }
  .i9-sub { padding: 10px; }
  .prep-block { padding: 12px 10px; }

  /* Equipment form: label above the name field */
  .form-body label.inline { flex-direction: column; align-items: stretch; gap: 6px; }
  .form-body label.inline input { max-width: none; min-height: 44px; }

  .sig-pad { height: 180px; }
  .sig-preview { min-height: 64px; padding: 4px 8px 6px; }
  .sig-preview .script { font-size: 32px; }
}

/* ---- uniform radios & checkboxes (same size on every row, browser and theme) ---- */
.form-body { color-scheme: light; }   /* forms are always light paper - no dark native controls */
.form-body input[type=radio], .form-body input[type=checkbox] {
  -webkit-appearance: none; appearance: none; flex: 0 0 22px; width: 22px; height: 22px; min-width: 22px; min-height: 22px;
  margin: 0; padding: 0; border: 2px solid #9aa3b2; background: #fff; display: inline-grid; place-content: center;
  cursor: pointer; transition: border-color .12s, background .12s;
}
.form-body input[type=radio] { border-radius: 50%; }
.form-body input[type=checkbox] { border-radius: 5px; }
.form-body input[type=radio]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--choice); transform: scale(0); transition: transform .12s; }
.form-body input[type=radio]:checked { border-color: var(--choice); }
.form-body input[type=radio]:checked::before { transform: scale(1); }
.form-body input[type=checkbox]::before { content: ""; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0); margin-top: -3px; }
.form-body input[type=checkbox]:checked { background: var(--choice); border-color: var(--choice); }
.form-body input[type=checkbox]:checked::before { transform: rotate(-45deg) scale(1); }
.form-body input[type=radio]:focus-visible, .form-body input[type=checkbox]:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 80%, transparent); outline-offset: 2px; }
.radio { align-items: flex-start; }
.radio input { margin-top: 1px !important; }
.form-body input[type=radio]:hover:not(:checked), .form-body input[type=checkbox]:hover:not(:checked) { border-color: var(--choice); }

/* Direct deposit: square paper-style boxes for Checking / Savings / Entire Net Amount (overrides the uniform controls above) */
.form-body .dd-box input[type=radio], .form-body .dd-box input[type=checkbox] {
  border-radius: 0; border: 1.5px solid #1b1f27; background: #fff; }
.form-body .dd-box input[type=radio]::before, .form-body .dd-box input[type=checkbox]::before { content: none; }
.form-body .dd-box input:checked { background: #fff; border-color: #1b1f27; }

/* ---- Form W-4 - laid out like the IRS form (step labels on the left) ---- */
.form-body.kind-w4 { padding-top: 22px; font-size: 14px; }
.w4-head { display: grid; grid-template-columns: 150px 1fr 110px; border-bottom: 2px solid #1b1f27; padding-bottom: 6px; margin-bottom: 4px; }
.w4-head > div { padding: 0 10px; }
.w4-form { border-right: 1px solid #1b1f27; padding-left: 0 !important; }
.w4-form b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.w4-head small { display: block; font-size: 10.5px; color: #3b414b; line-height: 1.3; }
.w4-title { text-align: center; }
.w4-title b { display: block; font-size: 19px; }
.w4-year { border-left: 1px solid #1b1f27; text-align: center; }
.w4-year b { display: block; font-size: 30px; font-weight: 800; }
.w4-step { display: grid; grid-template-columns: 130px 1fr; gap: 14px; border-top: 1px solid #1b1f27; padding: 12px 0; }
.w4-step > h3 { margin: 0; font-size: 15px; line-height: 1.25; }
.w4-step > h3 span { display: block; }
.w4-step > h3 span i { font-weight: 400; font-size: 12px; }
.w4-step > h3.small { font-size: 12px; font-weight: 600; }
.w4-step p { margin: 0 0 10px; }
.w4-note { font-size: 13px; margin: 6px 0 10px; }
.w4-name { grid-template-columns: 1.4fr .55fr 1.4fr; }
.w4-ssn { display: grid; grid-template-columns: minmax(170px, 220px) 1fr; gap: 12px; align-items: start; margin-bottom: 8px; }
.w4-ssn .i9-note { font-size: 11.5px; margin: 0; }
.form-body fieldset.w4-filing { margin: 6px 0; }
.w4-filing legend { font-weight: 600; font-size: 13px; }
.w4-opts { margin: 0 0 10px; padding-left: 22px; }
.w4-opts li { margin-bottom: 6px; }
.form-body label.check.w4-inline { margin: 0; padding: 8px 10px; font-weight: 400; font-size: 14px; }
.w4-line { display: grid; grid-template-columns: 1fr 150px; gap: 12px; align-items: end; padding: 6px 0; border-bottom: 1px dotted #c9ced8; }
.w4-line-text { font-size: 13.5px; }
.w4-line-text i { color: #5d6573; }
.w4-line-amt { display: grid; grid-template-columns: 34px 10px 1fr; align-items: end; gap: 2px; border-left: 1px solid #1b1f27; padding-left: 6px; }
.w4-line-amt b { font-size: 13px; }
.w4-line-amt input, .w4-calc, .w4-count { font: inherit; font-size: 15px; text-align: right; border: 0; border-bottom: 1.5px solid #1b1f27;
  background: #f6f8fc; padding: 3px 6px; min-width: 0; border-radius: 0; }
.w4-calc { display: block; background: #eef1f5; color: #1b1f27; font-weight: 600; }
.w4-count { width: 44px; text-align: center; margin: 0 4px; }
.w4-off { opacity: .45; }
.w4-exempt { background: #fbfcfe; }
.w4-employer .fld.ro div { font-size: 14px; }
.w4-line.invalid input { border-bottom-color: #b42318 !important; background: #fff4f2 !important; }
@media (max-width: 680px) {
  .form-body.kind-w4 { padding-top: 16px; }
  .w4-head { grid-template-columns: 1fr auto; }
  .w4-title { grid-column: 1 / -1; grid-row: 2; text-align: left; padding: 6px 0 0 !important; }
  .w4-form { border-right: 0; }
  .w4-step { grid-template-columns: 1fr; gap: 6px; }
  .w4-step > h3 span { display: inline; margin-left: 4px; }
  .w4-ssn { grid-template-columns: 1fr; }
  .w4-name { grid-template-columns: 1fr 1fr !important; }
  .w4-line { grid-template-columns: 1fr; gap: 4px; }
  .w4-line-amt { grid-template-columns: 38px 10px minmax(0, 160px); border-left: 0; padding-left: 0; }
}

/* =================================================================== Lykos Energy
   mats/Lykos/Lykos_Brand Guide.pdf - palette: navy #133A5F, blue #3174B1, light blue #BED5E9, grays #6D6F71 / #A8AAAC,
   black. Type: Josefin Sans (headings), Overpass (text); Landepz is the logo face only (artwork, not a web font).
   Josefin Sans and Overpass (SIL OFL, see fonts/JosefinSans-OFL.txt, fonts/Overpass-OFL.txt) are self-hosted
   variable fonts, latin + latin-ext subsets (fontsource 5.2.8). Browsers only download them on Lykos pages. */
@font-face {
  font-family: "Josefin Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/static/fonts/josefin-sans-latin-wght.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;
}
@font-face {
  font-family: "Josefin Sans"; font-style: normal; font-weight: 100 700; font-display: swap;
  src: url("/static/fonts/josefin-sans-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/overpass-latin-wght.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;
}
@font-face {
  font-family: "Overpass"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/static/fonts/overpass-latin-ext-wght.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}
:root[data-brand="lykos"] {
  --brand-navy: #133a5f;
  --brand-blue: #3174b1;
  --brand-sky: #bed5e9;
  --brand-gray: #6d6f71;
  --brand-silver: #a8aaac;

  --font-heading: "Josefin Sans", "Century Gothic", "Futura", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-text: "Overpass", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --bg: #f2f5f9;
  --surface: #ffffff;
  --text: #0f1b27;
  --muted: #586470;
  --border: #d9e1ea;
  --brand: var(--brand-navy);
  --accent: var(--brand-blue);
  --accent-ink: #ffffff;
  --accent-hover: #285f92;
  --icon-bg: var(--brand-navy);
  --icon-ink: var(--brand-sky);
  --choice: var(--brand-navy);
  --hero-mark: url("/static/brand/lykos/lykos-icon.svg");
  --hero-mark-opacity: .09;
}
@media (prefers-color-scheme: dark) {
  :root[data-brand="lykos"] {
    --bg: #07111b; --surface: #0f1c2a; --text: #eef3f8; --muted: #a8aaac; --border: #213447;
    --icon-bg: #1a3552; --hero-mark: url("/static/brand/lykos/lykos-icon-reverse.svg"); --hero-mark-opacity: .12;
  }
}
[data-brand="lykos"] h1, [data-brand="lykos"] h2 { font-weight: 700; letter-spacing: 0; }
[data-brand="lykos"] .topbar { border-bottom-color: var(--brand-blue); }
[data-brand="lykos"] .brand-logo { height: 38px; }
[data-brand="lykos"] .brand-divider { background: var(--brand-blue); }
[data-brand="lykos"] .hero::after { width: 110px; height: 110px; top: 10px; right: -8px; }
[data-brand="lykos"] .auth-logo { width: min(240px, 64vw); }
/* Form "paper" accents: section bars and rules pick up the navy instead of near-black */
[data-brand="lykos"] .i9-sec { background: #eaf1f8; border-left-color: var(--brand-navy); }
[data-brand="lykos"] .info-head, [data-brand="lykos"] .i9-head { border-bottom-color: var(--brand-navy); }
[data-brand="lykos"] .i9-info { background: #eaf1f8; color: #0f2a44; }

/* ---- company chooser (/ with no brand prefix) ---- */
.chooser-list { display: grid; gap: 12px; margin-top: 18px; }
.chooser-item { display: grid; place-items: center; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; transition: border-color .15s, box-shadow .15s; }
.chooser-item:hover, .chooser-item:focus-visible { border-color: #8a93a3; box-shadow: var(--shadow); }
.chooser-item img { height: 64px; max-width: 100%; }