/* checklist-form widget — namespaced under .fnlck so it never collides with the host page.
   Matched to firm-nl.com's contact form: Roobert, white inputs, a thin orange frame, larger
   regular-weight labels, orange accents. Layout: a centered, orange-framed main strip of
   questions with document-upload cards floating in an invisible right rail aligned to each
   section (CSS grid; collapses inline on mobile). */

@font-face { font-family: Roobert; src: url("fonts/Roobert-Light.woff") format("woff");   font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: Roobert; src: url("fonts/Roobert-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Roobert; src: url("fonts/Roobert-Medium.woff") format("woff");  font-weight: 500; font-style: normal; font-display: swap; }

.fnlck {
  --fnl-font: Roobert, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fnl-text: #202020;
  --fnl-muted: #6f6f6f;
  --fnl-blue: #0050bd;
  --fnl-blue-strong: #1345ce;
  --fnl-orange: #f79156;
  --fnl-orange-tint: #fff3ea;
  --fnl-bg: #ffffff;
  --fnl-surface: #f6f6f6;
  --fnl-border: #e2e2e2;
  --fnl-border-soft: #eeeeee;
  --fnl-error: #c0392b;
  --fnl-radius: 1.25rem;
  --fnl-radius-sm: .625rem;
  --fnl-pill: 5rem;

  font-family: var(--fnl-font);
  color: var(--fnl-text);
  font-size: 16px; font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  max-width: 1420px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; box-sizing: border-box;
}
.fnlck *, .fnlck *::before, .fnlck *::after { box-sizing: border-box; }

/* ---- layout: [ spacer | main strip | floating rail ], main centered ---- */
.fnlck-body {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 760px) minmax(0, 300px);
  column-gap: 2rem; row-gap: 0; justify-content: center; align-items: stretch;
}

/* header — aligned to the centered main strip */
.fnlck-head { grid-column: 2; padding: 0 2.2rem; margin: 0 0 1.75rem; }
.fnlck-eyebrow { color: var(--fnl-orange); text-transform: uppercase; letter-spacing: .14em; font-size: .72rem; font-weight: 500; margin: 0 0 .9rem; }
.fnlck-head h1 { font-size: 2.15rem; font-weight: 500; letter-spacing: -.02em; line-height: 1.08; margin: 0 0 .85rem; }
.fnlck-head p { color: var(--fnl-muted); font-size: 1.05rem; max-width: 60ch; margin: 0; }
.fnlck-head .fnlck-intro-note { font-size: .92rem; margin-top: .6rem; }

/* main strip cells (col 2) — the orange frame is drawn per-cell so it stays continuous */
.fnlck-sec, .fnlck-foot-row {
  grid-column: 2; background: var(--fnl-bg);
  border-left: 1px solid var(--fnl-orange); border-right: 1px solid var(--fnl-orange);
}
.fnlck-sec { padding: 1.7rem 2.2rem; border-top: 1px solid var(--fnl-border-soft); }
.fnlck-main-first { border-top: 1px solid var(--fnl-orange); border-top-left-radius: var(--fnl-radius); border-top-right-radius: var(--fnl-radius); }
.fnlck-foot-row { border-top: 1px solid var(--fnl-border-soft); border-bottom: 1px solid var(--fnl-orange); border-bottom-left-radius: var(--fnl-radius); border-bottom-right-radius: var(--fnl-radius); padding: 1.6rem 2.2rem; }

/* floating document rail (col 3) — invisible strip, cards align to their section */
.fnlck-railcell { grid-column: 3; align-self: start; padding-top: 1.7rem; min-width: 0; }
.fnlck-rail-stack { display: flex; flex-direction: column; gap: .7rem; }

.fnlck-sec > h2 { font-size: .78rem; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; color: var(--fnl-text); margin: 0 0 1.1rem; padding-bottom: .65rem; position: relative; }
.fnlck-sec > h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 2rem; height: 2px; background: var(--fnl-orange); border-radius: 2px; }
.fnlck-hint { color: var(--fnl-muted); font-size: .92rem; margin: -.4rem 0 1.4rem; max-width: 58ch; }

/* ---- fields ---- */
.fnlck-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; }
.fnlck-field { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1.15rem; }
.fnlck-field.fnlck-col-2 { grid-column: 1 / -1; }
.fnlck-field > label { font-size: .95rem; font-weight: 400; color: var(--fnl-text); }
.fnlck-req { color: var(--fnl-orange); font-weight: 400; }
.fnlck-sub { color: var(--fnl-muted); font-size: .82rem; font-weight: 400; }
.fnlck-desc { color: var(--fnl-muted); font-size: .82rem; line-height: 1.45; margin: -.15rem 0 .15rem; max-width: 62ch; }

.fnlck input[type="text"], .fnlck input[type="email"], .fnlck input[type="tel"],
.fnlck input[type="url"], .fnlck input[type="number"], .fnlck input[type="date"],
.fnlck select, .fnlck textarea {
  font: inherit; color: inherit; background: var(--fnl-bg);
  border: 1px solid var(--fnl-border); border-radius: var(--fnl-radius-sm);
  padding: .8rem .95rem; width: 100%; transition: border-color .15s, box-shadow .15s;
}
.fnlck input::placeholder, .fnlck textarea::placeholder { color: #adadad; }
.fnlck textarea { resize: vertical; min-height: 96px; }
.fnlck input:focus, .fnlck select:focus, .fnlck textarea:focus { outline: none; border-color: var(--fnl-orange); box-shadow: 0 0 0 3px rgba(247, 145, 86, .18); }
.fnlck-invalid input, .fnlck-invalid select, .fnlck-invalid textarea, .fnlck-invalid.fnlck-file { border-color: var(--fnl-error); }
.fnlck-invalid .fnlck-choice label { border-color: var(--fnl-error); }

/* ---- choice pills ---- */
.fnlck-choice { display: flex; flex-wrap: wrap; gap: .55rem; }
.fnlck-choice label { display: inline-flex; align-items: center; gap: .5rem; border: 1px solid var(--fnl-border); border-radius: var(--fnl-pill); padding: .55rem 1.05rem; cursor: pointer; font-size: .92rem; user-select: none; transition: border-color .12s, background .12s; }
.fnlck-choice label:hover { border-color: var(--fnl-text); }
.fnlck-choice input { accent-color: var(--fnl-orange); margin: 0; }
.fnlck-choice label:has(input:checked) { border-color: var(--fnl-orange); background: var(--fnl-orange-tint); }

/* ---- floating file upload cards ---- */
.fnlck-file { background: var(--fnl-bg); border: 1px solid var(--fnl-border-soft); border-radius: .75rem; padding: .9rem; box-shadow: 0 2px 10px rgba(32, 32, 32, .07); transition: border-color .12s, box-shadow .12s; }
.fnlck-file:hover { border-color: var(--fnl-border); box-shadow: 0 4px 14px rgba(32, 32, 32, .1); }
.fnlck-file-label { font-size: .85rem; font-weight: 500; display: block; line-height: 1.35; }
.fnlck-file-sub { display: block; color: var(--fnl-muted); font-size: .72rem; font-weight: 400; margin-top: .15rem; }
.fnlck-file input[type="file"] { display: none; }
.fnlck-file-ctl { display: flex; align-items: center; gap: .55rem; margin-top: .65rem; }
.fnlck-file-name { font-size: .74rem; color: var(--fnl-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fnlck-file-name.set { color: var(--fnl-blue-strong); font-weight: 500; }

/* ---- buttons ---- */
.fnlck-btn { font: inherit; font-weight: 500; font-size: 1rem; cursor: pointer; border: 0; border-radius: var(--fnl-pill); padding: .95rem 2rem; background: var(--fnl-orange); color: #202020; box-shadow: 0 10px 22px -8px rgba(247, 145, 86, .6); transition: filter .15s, transform .04s; }
.fnlck-btn:hover { filter: brightness(.96); }
.fnlck-btn:active { transform: translateY(1px); }
.fnlck-btn:focus-visible { outline: 3px solid rgba(0, 80, 189, .4); outline-offset: 2px; }
.fnlck-btn-ghost { background: transparent; border: 1px solid var(--fnl-border); color: var(--fnl-text); padding: .5rem 1.1rem; font-size: .85rem; box-shadow: none; }
.fnlck-btn-ghost:hover { border-color: var(--fnl-text); filter: none; }
.fnlck-file-btn { padding: .4rem .85rem; font-size: .8rem; flex: none; }
.fnlck-btn-add { margin-top: .3rem; }
.fnlck-btn-link { background: none; border: 0; color: var(--fnl-muted); cursor: pointer; font: inherit; font-size: .82rem; padding: 0; text-decoration: underline; text-underline-offset: 2px; box-shadow: none; }
.fnlck-btn-link:hover { color: var(--fnl-error); }

/* ---- party blocks ---- */
.fnlck-party-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.fnlck-party-title { font-weight: 500; font-size: 1rem; }
.fnlck-block-label { font-size: .72rem; font-weight: 500; text-transform: uppercase; letter-spacing: .08em; color: var(--fnl-muted); display: block; margin: 1.25rem 0 .75rem; }
.fnlck-subblock { margin-top: 1.1rem; }
.fnlck-nested { border-left: 2px solid var(--fnl-orange); padding-left: 1.1rem; margin-top: 1.25rem; }
.fnlck-nested-person { border: 1px solid var(--fnl-border-soft); border-radius: var(--fnl-radius-sm); padding: 1.1rem; margin-bottom: .75rem; background: var(--fnl-bg); }
.fnlck-info { position: relative; display: inline-flex; align-items: center; margin-left: .3rem; vertical-align: -0.14em; color: var(--fnl-orange); cursor: default; }
.fnlck-info-link { cursor: pointer; }
.fnlck-info svg { width: 14px; height: 14px; display: block; }
.fnlck-info::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%); background: var(--fnl-text); color: #fff; font-size: .72rem; font-weight: 400; font-style: normal; line-height: 1.3; white-space: nowrap; padding: .35rem .6rem; border-radius: .35rem; opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 5; }
.fnlck-info::before { content: ""; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--fnl-text); opacity: 0; visibility: hidden; transition: opacity .12s; }
.fnlck-info:hover::after, .fnlck-info:hover::before { opacity: 1; visibility: visible; }

/* controlling persons: one grouped card in the main column (cp cells share a background),
   header at top, add row at the bottom; each person's doc rail aligns to their row */
.fnlck-body > .fnlck-sec.fnlck-cp { border-top: 0; padding: 0 2.2rem; }
.fnlck-body > .fnlck-sec.fnlck-cp-last { padding-bottom: 1.6rem; }
.fnlck-cp-in { padding: 1rem 1.25rem; border-left: 1px solid var(--fnl-border); border-right: 1px solid var(--fnl-border); }
.fnlck-cp-first .fnlck-cp-in { border-top: 1px solid var(--fnl-border); border-radius: .75rem .75rem 0 0; }
.fnlck-cp-last .fnlck-cp-in { border-bottom: 1px solid var(--fnl-border); border-radius: 0 0 .75rem .75rem; }
.fnlck-cp:not(.fnlck-cp-first) .fnlck-cp-in { border-top: 1px solid var(--fnl-border-soft); }
.fnlck-railcell.fnlck-person-rail { padding-top: 1rem; }
/* tighten the space between the entity fields and the controlling-persons card */
.fnlck-subblock > .fnlck-grid > .fnlck-field:last-child { margin-bottom: 0; }
.fnlck-hidden { display: none !important; }

/* ---- footer / status ---- */
.fnlck-foot { display: flex; align-items: center; gap: 1.1rem; }
.fnlck-save-state { color: var(--fnl-muted); font-size: .82rem; display: inline-flex; align-items: center; gap: .45rem; }
.fnlck-save-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #22a06b; }
.fnlck-save-state:empty { display: none; }
.fnlck-summary-error { color: var(--fnl-error); font-size: .9rem; margin: 0 0 1rem; }

.fnlck-done { max-width: 760px; margin: 0 auto; text-align: center; padding: 3.5rem 1.5rem; border: 1px solid var(--fnl-orange); border-radius: var(--fnl-radius); background: var(--fnl-bg); }
.fnlck-check { width: 3rem; height: 3rem; border-radius: 50%; background: var(--fnl-orange-tint); color: var(--fnl-orange); display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.25rem; }
.fnlck-done h2 { margin: 0 0 .6rem; font-size: 1.5rem; font-weight: 500; }
.fnlck-done p { color: var(--fnl-muted); margin: 0 auto; max-width: 42ch; }

/* ---- responsive: single column, orange frame around the whole thing ---- */
@media (max-width: 900px) {
  .fnlck { padding: 1.75rem 1.1rem 3rem; }
  .fnlck-body { display: block; }
  .fnlck-head { padding: 0 .25rem; margin-bottom: 1.5rem; }
  .fnlck-head h1 { font-size: 1.8rem; }
  .fnlck-sec { padding: 1.4rem 1.3rem; }
  .fnlck-foot-row { padding: 1.4rem 1.3rem; }
  .fnlck-railcell { border-left: 1px solid var(--fnl-orange); border-right: 1px solid var(--fnl-orange); padding: .1rem 1.3rem 1.3rem; align-self: auto; background: var(--fnl-bg); }
  .fnlck-railcell:empty, .fnlck-railcell:has(> .fnlck-hidden:only-child) { display: none; }
  /* a controlling person's docs continue their card: keep the form's orange frame, and inset the
     card sides to the same 2.2rem as the body sections so the grey border lines up (not shifted by
     the orange border), with doc cards at the card's text-box width */
  .fnlck-railcell.fnlck-person-rail { padding: 0 2.2rem; }
  .fnlck-railcell.fnlck-person-rail .fnlck-rail-stack {
    border-left: 1px solid var(--fnl-border); border-right: 1px solid var(--fnl-border);
    padding: .25rem 1.25rem 1rem;
  }
}
@media (max-width: 480px) { .fnlck-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .fnlck * { transition: none !important; } }