/* ============================================================
   eSignature, Forms and Compliance (ADR-0042..0043) — ported from FileIt's
   styles.css: the es-*, est-*, cp-*, cx-* app styles and the fl-*, fx-*, ft-*
   public catalog pages. forms.css and formrender.css hold the Forms app.
   ============================================================ */

/* ===== eSignature (FileIt ADR-0097) ==============================================
   es-* only. The editor and the signing page both draw a PDF as page images
   (.es-page, position: relative) with the fields absolutely positioned on top
   in percent of the page, so a field sits in the same spot at any width.
   A field's colour is its recipient's, passed in as --c. */
.es-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; }
.es-tab { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: .86rem; color: var(--navy-800); cursor: pointer; }
a.es-tab { display: inline-block; text-decoration: none; }
.es-tab.on { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }
.es-tab .n { opacity: .7; margin-inline-start: 4px; }
.es-list { display: flex; flex-direction: column; gap: 10px; }
.es-row { display: flex; align-items: center; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; color: inherit; }
.es-row:hover { text-decoration: none; border-color: #c9d3e1; box-shadow: var(--shadow); }
.es-row-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 10px; background: #e8f1fa; color: var(--accent); font-size: 1.2rem; }
.es-row-main { flex: 1; min-width: 0; }
.es-row-title { font-weight: 700; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-row-sub { font-size: .83rem; color: var(--muted); margin-top: 2px; }
.es-row-when { font-size: .8rem; color: var(--muted); white-space: nowrap; text-align: end; }
.es-who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.es-who span { font-size: .76rem; background: #f3f6fa; border-radius: 999px; padding: 2px 9px; color: var(--navy-800); }
.es-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #b8c2d0; margin-inline-end: 4px; vertical-align: 1px; }
.es-dot.signed { background: #16a06c; }
.es-dot.sent, .es-dot.viewed { background: #e0a800; }
.es-dot.declined { background: #c0392b; }
.es-status { font-size: .72rem; font-weight: 700; border-radius: 999px; padding: 4px 10px; white-space: nowrap; text-transform: uppercase; letter-spacing: .03em; }
.es-status.draft { background: #eef1f6; color: var(--muted); }
.es-status.sent { background: #e6f0fa; color: var(--accent-dark); }
.es-status.needs { background: #fff3d6; color: #8a5a00; }
.es-status.completed { background: #e2f5ec; color: #0d7a56; }
.es-status.voided, .es-status.declined, .es-status.expired { background: #fbe9e7; color: #b3261e; }
.es-empty { text-align: center; padding: 56px 24px; }
.es-empty i { font-size: 2.6rem; color: var(--accent); opacity: .55; }

.es-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(30, 30, 30, .45); }
.es-modal[hidden] { display: none; }
.es-modal .modal-card { width: 100%; max-width: 560px; max-height: 92vh; overflow: auto; padding: 24px; }
.es-modal h2 { font-size: 1.2rem; color: var(--navy-900); margin: 0 0 4px; }
.es-modal-x { position: absolute; top: 12px; inset-inline-end: 12px; border: 0; background: none; font-size: 1.2rem; color: var(--muted); cursor: pointer; }
/* A <label> (so a click opens the file picker) — inline by default, hence display. */
.es-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; box-sizing: border-box; width: 100%; min-height: 150px; border: 2px dashed #c6d3e3; border-radius: 12px; padding: 24px 20px; text-align: center; color: var(--muted); font-size: .92rem; cursor: pointer; margin: 18px 0 16px; background: #fafcfe; transition: border-color .15s, background .15s; }
.es-drop:hover { border-color: #9fb6d1; background: #f5f9fd; }
/* Classes, not `i`: the Font Awesome kit swaps each <i> for an <svg> carrying the same classes. */
.es-drop .es-drop-ic { font-size: 2.4rem; color: var(--accent); margin-bottom: 6px; }
.es-drop strong { color: var(--navy-900); }
.es-drop .sub { font-size: .8rem; }
.es-drop.over { border-color: var(--accent); background: #eef6fe; }
.es-or { display: flex; align-items: center; gap: 12px; font-size: .74rem; color: var(--muted); margin: 0 0 12px; text-transform: uppercase; letter-spacing: .08em; }
.es-or::before, .es-or::after { content: ""; flex: 1; border-top: 1px solid var(--line); }
.es-modal .es-lead { margin: 2px 0 0; color: var(--muted); font-size: .92rem; }
.es-pick { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; margin-top: 10px; }
.es-pick button .ic { font-size: 1.3rem; color: #c0392b; flex: none; width: 22px; text-align: center; }
.es-pick button > span { min-width: 0; }
.es-pick .t, .es-pick .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-search { position: relative; }
.es-search .es-search-ic { position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.es-search input { width: 100%; box-sizing: border-box; padding: 10px 12px; padding-inline-start: 36px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .92rem; }
.es-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(12, 100, 174, .12); }
.es-pick button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff; cursor: pointer; text-align: start; font: inherit; }
.es-pick button:hover { background: #f5f8fc; }
.es-pick button:last-child { border-bottom: 0; }
.es-pick .t { font-weight: 600; color: var(--navy-900); font-size: .9rem; }
.es-pick .s { font-size: .78rem; color: var(--muted); }
.es-pick .none { padding: 16px; text-align: center; color: var(--muted); font-size: .88rem; }

/* editor */
.es-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 28px 0 0; }
.es-top .es-title { flex: 1; min-width: 220px; font-size: 1.35rem; font-weight: 700; color: var(--navy-900); border: 1px solid transparent; border-radius: 8px; padding: 6px 8px; background: transparent; font-family: inherit; }
.es-top .es-title:hover, .es-top .es-title:focus { border-color: var(--line); background: #fff; outline: none; }
/* the editor's autosave status (Draft / Saving… / Saved): plain text, not a box — the .es-saved card below is
   My Signature's saved-signature box, and sharing its name made this look like a button (QA Screen57) */
.es-autosave { font-size: .85rem; color: var(--muted); white-space: nowrap; }
.es-editor { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; margin: 18px 0 60px; align-items: start; }
.es-side { position: sticky; top: 14px; display: flex; flex-direction: column; gap: 14px; max-height: calc(100vh - 28px); overflow: auto; padding-bottom: 4px; }
.es-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.es-panel h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 10px; }
.es-panel .field { margin-bottom: 10px; }
.es-panel textarea { min-height: 64px; }
.es-recip { display: flex; align-items: center; gap: 8px; padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.es-recip.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(12, 100, 174, .15); }
.es-recip .who { flex: 1; min-width: 0; }
.es-recip .nm { font-weight: 600; font-size: .88rem; color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-recip .em { font-size: .76rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-recip .ord { width: 22px; height: 22px; border-radius: 50%; background: #eef1f6; font-size: .72rem; display: grid; place-items: center; color: var(--navy-800); flex: none; }
.es-recip button { border: 0; background: none; color: var(--muted); cursor: pointer; padding: 4px; }
.es-recip button:hover { color: var(--danger); }
.es-swatch { width: 12px; height: 12px; border-radius: 4px; flex: none; background: var(--c); }
.es-add { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.es-add input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .86rem; }
.es-add .full { grid-column: 1 / -1; display: flex; gap: 6px; }
.es-add .full .btn { flex: 1; justify-content: center; }
.es-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.es-palette button { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border: 1px solid var(--line); border-inline-start: 4px solid var(--c, var(--line)); border-radius: 8px; background: #fff; cursor: grab; font: inherit; font-size: .84rem; color: var(--navy-900); text-align: start; }
.es-palette button:hover { background: #f5f8fc; }
.es-palette button.arm { border-color: var(--accent); background: #eef5fd; }
.es-palette button i { width: 16px; text-align: center; color: var(--navy-800); }
.es-hint { font-size: .78rem; color: var(--muted); margin: 8px 0 0; }
.es-props[hidden] { display: none; }
.es-doc { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 22px 0 10px; }
.es-page { position: relative; width: 100%; max-width: 880px; background: #fff; border-radius: 3px; box-shadow: 0 2px 10px rgba(16, 32, 54, .14); user-select: none; -webkit-user-select: none; }
.es-page img { display: block; width: 100%; height: auto; border-radius: 3px; pointer-events: none; }
.es-page .es-pno { position: absolute; top: -20px; inset-inline-start: 0; font-size: .74rem; color: var(--muted); }
.es-page.arming { cursor: crosshair; }
.es-page.drop { box-shadow: 0 0 0 3px rgba(12, 100, 174, .35); }
.es-f { position: absolute; box-sizing: border-box; display: flex; align-items: center; gap: 4px; padding: 0 5px; overflow: hidden; border: 1.5px solid var(--c); border-radius: 3px; background: color-mix(in srgb, var(--c) 24%, transparent); font-size: 11px; line-height: 1.1; color: #1d2433; white-space: nowrap; cursor: move; touch-action: none; }
.es-f i { flex: none; }
.es-f.sel { outline: 2px solid var(--navy-900); outline-offset: 1px; z-index: 2; }
.es-f .rs { position: absolute; inset-inline-end: -1px; bottom: -1px; width: 11px; height: 11px; background: var(--c); cursor: nwse-resize; }
.es-f.ro { cursor: default; }
.es-f.filled { background: color-mix(in srgb, #16a06c 18%, transparent); border-color: #16a06c; }

/* envelope status page */
.es-view { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; margin: 18px 0 60px; align-items: start; }
.es-steps { list-style: none; margin: 0; padding: 0; }
.es-steps li { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.es-steps li:last-child { border-bottom: 0; }
.es-steps .ic { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; background: #eef1f6; color: var(--muted); font-size: .8rem; }
.es-steps .signed .ic { background: #e2f5ec; color: #0d7a56; }
.es-steps .sent .ic, .es-steps .viewed .ic { background: #fff3d6; color: #8a5a00; }
.es-steps .declined .ic { background: #fbe9e7; color: #b3261e; }
.es-steps .nm { font-weight: 600; font-size: .9rem; color: var(--navy-900); }
.es-steps .sub { font-size: .78rem; color: var(--muted); }
.es-audit { width: 100%; border-collapse: collapse; font-size: .8rem; }
.es-audit td { padding: 7px 6px; border-bottom: 1px solid var(--line); vertical-align: top; }
.es-audit td:first-child { white-space: nowrap; color: var(--muted); }
.es-hash { font-family: ui-monospace, Consolas, monospace; font-size: .72rem; word-break: break-all; color: var(--navy-800); }
.es-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.es-frame { width: 100%; height: 80vh; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }

/* the signer's page (public) */
.es-sign { background: #eef2f7; min-height: 70vh; padding-bottom: 60px; }
.es-signbar { position: sticky; top: 0; z-index: 40; background: var(--navy-900); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .15); }
.es-signbar .in { max-width: 920px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.es-signbar .msg { flex: 1; min-width: 200px; font-size: .9rem; }
.es-signbar .msg b { display: block; font-size: 1rem; }
.es-signbar .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .6); }
.es-sign-in { max-width: 920px; margin: 0 auto; padding: 18px 16px 0; }
.es-note { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; font-size: .9rem; }
.es-note .from { color: var(--muted); font-size: .82rem; margin-bottom: 4px; }
.es-note .body { white-space: pre-line; }
.es-consent { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 14px; }
.es-consent details { font-size: .84rem; color: var(--muted); margin: 8px 0 12px; }
.es-consent details p { margin: 6px 0; }
.es-card-msg { max-width: 560px; margin: 60px auto; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 36px 28px; text-align: center; }
.es-card-msg i.big { font-size: 2.6rem; color: var(--accent); margin-bottom: 10px; display: block; }
.es-card-msg h1 { font-size: 1.35rem; color: var(--navy-900); margin: 0 0 8px; }
.es-sf { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px dashed var(--c); border-radius: 3px; background: color-mix(in srgb, var(--c) 26%, transparent); font-weight: 600; color: #1d2433; cursor: pointer; overflow: hidden; line-height: 1.05; }
.es-sf.req::after { content: "*"; position: absolute; top: 0; inset-inline-end: 3px; color: #c0392b; font-size: 12px; }
.es-sf.done { border-style: solid; border-color: color-mix(in srgb, var(--c) 70%, #000); background: rgba(255, 255, 255, .35); }
.es-sf.current { box-shadow: 0 0 0 4px rgba(12, 100, 174, .45); }
.es-sf img { max-width: 100%; max-height: 100%; display: block; }
.es-sf input { width: 100%; height: 100%; border: 0; padding: 0 4px; background: transparent; font: inherit; font-weight: 500; color: #111; }
.es-sf input:focus { outline: none; background: rgba(255, 255, 255, .7); }
.es-sf.static { cursor: default; font-weight: 500; justify-content: flex-start; padding: 0 4px; }
/* Earlier signers' finished fields, in place (esign_signed.js). Ink on the page,
   a faint signer-coloured frame on hover, the ID card on hover / focus / tap. */
.es-done-f { position: absolute; box-sizing: border-box; display: flex; align-items: center; justify-content: flex-start; padding: 0 3px; overflow: hidden; border: 1px solid transparent; border-radius: 3px; color: #111; font-weight: 500; line-height: 1.05; white-space: nowrap; cursor: help; z-index: 1; }
.es-done-f:hover, .es-done-f:focus { border-color: color-mix(in srgb, var(--c) 75%, #000); background: color-mix(in srgb, var(--c) 10%, transparent); outline: none; }
.es-done-signature, .es-done-initials { flex-direction: column; justify-content: center; align-items: flex-start; padding: 1px; }
.es-done-f img { max-width: 100%; min-height: 0; flex: 1 1 auto; object-fit: contain; object-position: left center; display: block; pointer-events: none; }
.es-done-tag { flex: none; color: #0c64ae; font-size: 7px; line-height: 1.2; white-space: nowrap; }
.es-done-checkbox { justify-content: center; }
.es-idcard { position: fixed; z-index: 3000; min-width: 210px; max-width: 300px; background: #fff; color: #1d2433; border: 1px solid #dfe4ec; border-top: 3px solid var(--c); border-radius: 10px; box-shadow: 0 10px 30px rgba(16, 24, 40, .18); padding: 10px 14px; font-size: .85rem; pointer-events: none; }
.es-idcard-k { color: #6b7686; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }
.es-idcard-k:first-child { margin-top: 0; }
.es-idcard-name { font-weight: 700; font-size: .95rem; }
.es-idcard-mail { color: #5b6472; word-break: break-all; }
.es-idcard-id { font-family: ui-monospace, Consolas, monospace; }
[data-theme="dark"] .es-idcard { background: var(--card); color: var(--ink); border-color: var(--line); }
.es-adopt .modal-card { max-width: 620px; }
.es-adopt .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin: 14px 0; }
.es-adopt .tabs button { border: 0; background: none; padding: 8px 14px; font: inherit; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; }
.es-adopt .tabs button.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.es-pad { width: 100%; height: 190px; border: 1px solid var(--line); border-radius: 10px; background: #fff; touch-action: none; display: block; cursor: crosshair; }
.es-typed { display: grid; gap: 8px; }
.es-typed button { border: 1px solid var(--line); border-radius: 10px; background: #fff; padding: 10px 14px; font-size: 30px; text-align: start; cursor: pointer; color: #13213c; min-height: 64px; overflow: hidden; white-space: nowrap; }
.es-typed button.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(12, 100, 174, .18); }
.es-legal { font-size: .78rem; color: var(--muted); margin: 12px 0; }
/* My Signature (QA 2026-10-28): Settings → Profile, and the signing page's offer */
.ms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.ms-slot { border: 1px solid var(--line); border-radius: 12px; padding: 14px; min-width: 0; }
.ms-label { font-weight: 600; margin-bottom: 8px; }
.ms-img { height: 96px; display: flex; align-items: center; justify-content: center; background: #fff; border: 1px dashed var(--line); border-radius: 10px; margin-bottom: 10px; overflow: hidden; padding: 6px; }
.ms-img img { max-height: 84px; max-width: 100%; object-fit: contain; }
.ms-img .muted { font-size: .86rem; }
.ms-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.es-saved { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin: 0 0 14px; background: var(--card); }
.es-saved .imgs { display: flex; gap: 8px; align-items: center; }
.es-saved .imgs img { height: 40px; max-width: 160px; object-fit: contain; background: #fff; border-radius: 6px; padding: 2px 6px; }
.es-saved .txt { flex: 1; min-width: 180px; font-size: .9rem; }
.es-savebox { display: flex; align-items: center; gap: 8px; font-size: .88rem; margin: 10px 0 0; }
.es-saved[hidden], .es-savebox[hidden] { display: none; }
.es-toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 1100; background: #1d2433; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: .9rem; box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
.es-toast.err { background: #b3261e; }

/* FileIt ADR-0099: fixing a signer, the file types a picker row can be, and the
   post-send "Correct name or email" link on the status page. */
.es-recip.editing { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.es-recip button.ed:hover { color: var(--accent); }
.es-pick button .ic.image { color: #2f8f5b; }
.es-pick button .ic.word { color: #2b5fb4; }
.es-correct { border: 0; background: none; padding: 4px 0 0; font: inherit; font-size: .78rem; color: var(--accent); cursor: pointer; }
.es-correct:hover { text-decoration: underline; }

/* eSignature in dark mode. The section above hardcodes light surfaces (#fff
   panels, pale pills); with the dark palette the text on them turns light too,
   which left the editor's buttons — .btn-outline inside a white .es-panel —
   light-on-white and unreadable. Pages (.es-page) stay white: they are paper. */
[data-theme="dark"] .es-tab,
[data-theme="dark"] .es-row,
[data-theme="dark"] .es-panel,
[data-theme="dark"] .es-palette button,
[data-theme="dark"] .es-pick button { background: var(--card); color: var(--ink); }
[data-theme="dark"] .es-tab.on { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="dark"] .es-row:hover { border-color: #3d4d61; }
[data-theme="dark"] .es-row-icon { background: rgba(79, 153, 230, .14); }
[data-theme="dark"] .es-who span,
[data-theme="dark"] .es-recip .ord,
[data-theme="dark"] .es-status.draft,
[data-theme="dark"] .es-steps .ic { background: rgba(255, 255, 255, .08); }
[data-theme="dark"] .es-status.sent { background: rgba(79, 153, 230, .16); color: var(--accent-dark); }
[data-theme="dark"] .es-status.needs,
[data-theme="dark"] .es-steps .sent .ic,
[data-theme="dark"] .es-steps .viewed .ic { background: rgba(224, 168, 0, .16); color: #e8c07a; }
[data-theme="dark"] .es-status.completed,
[data-theme="dark"] .es-steps .signed .ic { background: rgba(22, 160, 108, .16); color: #5fd3a4; }
[data-theme="dark"] .es-status.voided,
[data-theme="dark"] .es-status.declined,
[data-theme="dark"] .es-status.expired,
[data-theme="dark"] .es-steps .declined .ic { background: rgba(239, 123, 112, .14); color: var(--danger); }
[data-theme="dark"] .es-palette button:hover,
[data-theme="dark"] .es-pick button:hover { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .es-palette button.arm { background: rgba(79, 153, 230, .16); border-color: var(--accent); }
[data-theme="dark"] .es-top .es-title:hover,
[data-theme="dark"] .es-top .es-title:focus { background: var(--card); }
[data-theme="dark"] .es-drop { background: rgba(255, 255, 255, .03); border-color: #3d4d61; }
[data-theme="dark"] .es-drop:hover { background: rgba(255, 255, 255, .05); border-color: #56687e; }
[data-theme="dark"] .es-drop.over { background: rgba(79, 153, 230, .12); border-color: var(--accent); }
[data-theme="dark"] .es-add input,
[data-theme="dark"] .es-search input { background: #1c2836; color: var(--ink); border-color: var(--line); }
[data-theme="dark"] .es-page { box-shadow: 0 2px 14px rgba(0, 0, 0, .5); }

@media (max-width: 960px) {
  .es-editor, .es-view { grid-template-columns: 1fr; }
  .es-side { position: static; max-height: none; }
}
@media (max-width: 600px) {
  .es-row { flex-wrap: wrap; }
  .es-row-when { width: 100%; text-align: start; }
  .es-signbar .in { padding: 10px 12px; }
}

/* ===== Compliance forms (FileIt ADR-0100) ========================================
   cp-* only. Colours come from the theme tokens (--card, --line, --ink ...),
   so dark mode needs only the few tinted fills below. */
/* The Compliance landing: the account's own forms on top, then "Available forms". */

/* Country flag: a circle cut from the square (1x1) SVG — a hairline ring so
   white-edged flags keep their shape on white cards. */
.cp-flag { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; vertical-align: -5px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); margin-inline-end: 8px; }
.cp-flag.sm { width: 22px; height: 22px; vertical-align: 1px; }
[data-theme="dark"] .cp-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .22); }
/* A state / regional form (DE 4 — California, IT-2104 — New York). */
.cp-region { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px; margin-inline-end: 4px; background: color-mix(in srgb, #e0a800 18%, transparent); color: #8a5a00; vertical-align: 1px; }
[data-theme="dark"] .cp-region { color: #e8c07a; }
.cp-empty { text-align: center; padding: 32px 24px; }
.cp-empty i { font-size: 2.2rem; color: var(--accent); opacity: .55; }
.cp-note { font-size: .8rem; color: var(--muted); margin: 26px 0 40px; }

/* the form */
.cp-h1 { font-size: 1.35rem; margin: 0; color: var(--navy-900); }
.cp-h1 span { font-weight: 500; color: var(--muted); font-size: 1rem; margin-inline-start: 6px; }
/* The form screen uses the whole width (the other app pages keep .container's
   1080px): the questions on the left, the live preview on the right. */
.container.cp-wide { max-width: none; padding: 0 28px; }
.cp-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(380px, 46%); gap: 24px; margin: 18px 0 60px; align-items: start; }
/* the side column: Preview | Details */
.cp-tabs { display: flex; gap: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 4px; }
.cp-tabs button { flex: 1; border: 0; background: none; padding: 7px 10px; border-radius: 7px; font: inherit; font-size: .86rem; font-weight: 600; color: var(--muted); cursor: pointer; }
.cp-tabs button.on { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dark); }
.cp-pane[hidden] { display: none; }
.cp-pane { display: flex; flex-direction: column; gap: 14px; }
.cp-pv-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cp-pv-pages { display: flex; gap: 4px; flex-wrap: wrap; }
.cp-pv-pages button { min-width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 7px; background: var(--card); color: var(--ink); font: inherit; font-size: .82rem; cursor: pointer; }
.cp-pv-pages button.on { border-color: var(--accent); background: var(--accent); color: #fff; }
/* The page is paper: white in both themes. */
.cp-pv { position: relative; width: 100%; margin: 0 auto; background: #fff; border-radius: 3px; box-shadow: 0 2px 10px rgba(16, 32, 54, .14); overflow: hidden; }
.cp-pv img { display: block; width: 100%; height: 100%; object-fit: contain; }
.cp-pv img:not([src]) { visibility: hidden; }
.cp-pv-hl { position: absolute; border: 2px solid var(--accent); border-radius: 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); pointer-events: none; transition: all .15s; }
.cp-pv-hl[hidden] { display: none; }
.cp-pv-busy { position: absolute; top: 8px; inset-inline-end: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 255, 255, .9); color: var(--accent); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.cp-pv-busy[hidden] { display: none; }
[data-theme="dark"] .cp-pv { box-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.cp-sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px; }
.cp-sec.off { background: transparent; border-style: dashed; }
.cp-sec header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.cp-sec h2 { font-size: 1.02rem; color: var(--navy-900); margin: 0 8px 0 0; display: inline; }
.cp-party { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 3px 9px; vertical-align: 2px; }
.cp-party.employee { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dark); }
.cp-party.employer { background: color-mix(in srgb, #9b6ef3 16%, transparent); color: #6d45c7; }
.cp-sec-help { font-size: .84rem; color: var(--muted); margin: 8px 0 0; }
.cp-switch { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; font-weight: 600; color: var(--navy-800); cursor: pointer; }
.cp-body { margin-top: 14px; }
.cp-body[hidden] { display: none; }
.cp-group { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.cp-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.cp-group h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0; }
.cp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 16px; }
.cp-f { display: flex; flex-direction: column; gap: 4px; min-width: 0; margin-bottom: 12px; }
/* Line fields up across a row: each field spans five shared row tracks
   (label, control, help, calculated note, error), so a label that wraps to two
   lines no longer pushes its own input below its neighbours'. Labels sit on
   the bottom of their track, right above the control. */
@supports (grid-template-rows: subgrid) {
  .cp-f:not(.line) { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 4px; align-content: start; }
  .cp-f:not(.line) > label { align-self: end; }
}
/* Closes a titled group, so the ungrouped fields after it don't read as part of it. */
.cp-group.cp-group-end { margin: 4px 0 12px; padding-top: 0; }
.cp-f[hidden] { display: none; }
.cp-f.wide, .cp-f.line { grid-column: 1 / -1; }
.cp-f.line { display: grid; grid-template-columns: minmax(0, 1fr) 190px; column-gap: 14px; align-items: center; max-width: 820px; }
.cp-f.line > label { grid-row: 1 / span 4; }
.cp-f > label { font-size: .84rem; font-weight: 600; color: var(--navy-800); }
.cp-f input, .cp-f select, .cp-f textarea { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .9rem; background: var(--card); color: var(--ink); }
.cp-f input:focus, .cp-f select:focus, .cp-f textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cp-f.mono input { font-family: ui-monospace, Consolas, monospace; letter-spacing: .04em; }
.cp-f.computed input { background: color-mix(in srgb, var(--accent) 7%, var(--card)); font-weight: 600; }
.cp-money { position: relative; }
.cp-money::before { content: "$"; position: absolute; inset-inline-start: 10px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .9rem; pointer-events: none; }
.cp-money input { padding-inline-start: 22px; text-align: end; }
.cp-req { color: #c0392b; margin-inline-start: 3px; }
.cp-help, .cp-calc { font-size: .76rem; color: var(--muted); }
.cp-calc:empty, .cp-err:empty { display: none; }
.cp-calc { color: var(--accent-dark); }
.cp-err { font-size: .78rem; color: var(--danger); font-weight: 600; }
.cp-f.bad input, .cp-f.bad select, .cp-f.bad textarea { border-color: var(--danger); }
.cp-radios { display: flex; flex-direction: column; gap: 6px; }
.cp-radio { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.cp-radio:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cp-radio input { margin-top: 3px; width: auto; }
.cp-radio b { display: block; font-weight: 600; font-size: .88rem; color: var(--navy-900); }
.cp-radio small { display: block; font-size: .76rem; color: var(--muted); }
.cp-radio small:empty { display: none; }
.cp-check { display: flex; align-items: flex-start; gap: 10px; font-size: .9rem; font-weight: 600; color: var(--navy-900); cursor: pointer; }
/* The field rule above sizes text boxes to 100% — never a checkbox or radio. */
.cp-f input[type="checkbox"], .cp-f input[type="radio"] { width: auto; padding: 0; margin: 3px 0 0; flex: none; box-shadow: none; }
/* The Details tab's Person picker sits outside a .field wrapper, so it gets
   the form's own control styling here. */
.cp-side .es-panel select { width: 100%; box-sizing: border-box; padding: 9px 36px 9px 12px; border: 1px solid var(--line); border-radius: 8px; font: inherit; font-size: .9rem; color: var(--ink); cursor: pointer;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2393a1b3' stroke-width='1.6' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center;
  -webkit-appearance: none; appearance: none; }
[dir="rtl"] .cp-side .es-panel select { padding: 9px 12px 9px 36px; background-position: left 12px center; }
.cp-side .es-panel select:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.cp-side .es-panel select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cp-state { font-size: .86rem; margin: 0 0 10px; display: flex; gap: 6px; align-items: baseline; }
.cp-state.ok { color: #0d7a56; }
.cp-state.warn { color: #8a5a00; }
.cp-about { font-size: .84rem; color: var(--ink); margin: 0 0 8px; }
.cp-signer { margin-top: 14px; }
.cp-signer h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 6px; }
.cp-signer .es-add[hidden] { display: none; }
[data-theme="dark"] .cp-badge.ok, [data-theme="dark"] .cp-state.ok { color: #5fd3a4; }
[data-theme="dark"] .cp-badge.warn, [data-theme="dark"] .cp-state.warn { color: #e8c07a; }
[data-theme="dark"] .cp-party.employer { color: #b89cf5; }
@media (max-width: 960px) {
  .cp-editor { grid-template-columns: 1fr; }
  .cp-f.line { grid-template-columns: 1fr; }
  .cp-f.line > label { grid-row: auto; }
}

/* ===== Compliance catalog: finder, compact cards, the all-forms page ======= */
/* A class, not `i`: the Font Awesome kit swaps each <i> for an <svg>. */
.cp-flag.xs { width: 16px; height: 16px; margin: 0; vertical-align: -3px; }
/* compact cards on the Compliance home: no description, a smaller card */
/* the all-forms page */
.cp-all-top { margin: 22px 0 0; }
.cp-hero { text-align: center; max-width: 820px; margin: 18px auto 30px; }
.cp-hero h1 { font-size: 1.9rem; color: var(--navy-900); margin: 0 0 6px; }
.cp-hero > p { margin: 0 0 22px; }
@media (max-width: 700px) {
  .cp-hero h1 { font-size: 1.5rem; }
}
/* ===== Public form landing pages (FileIt ADR-0104) ===== */
.fl .container, .fx .container { max-width: 1320px; }
.fl-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: .85rem; color: var(--muted); margin: 26px 0 14px; }
.fl-crumbs a { color: var(--muted); }
.fl-crumbs a:hover { color: var(--accent); }
.fl-crumbs [aria-current] { color: var(--navy-900); font-weight: 600; }
.fl-hero { text-align: center; max-width: 900px; margin: 0 auto 26px; }
.fl-hero h1, .fx-hero h1 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); line-height: 1.2; letter-spacing: -.02em; color: var(--navy-900); margin: 12px 0 10px; }
.fl-tagline { font-size: 1.08rem; color: var(--muted); line-height: 1.6; margin: 0 auto; max-width: 760px; }
.fl-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fl-badge { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; padding: 5px 11px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.fl-badge [class*="fa-"] { color: var(--accent); }
.fl-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-top: 20px; }
.fl-free { font-size: .85rem; color: var(--muted); }

.fl-grid { display: grid; grid-template-columns: 220px minmax(0, 1fr) 290px; gap: 28px; align-items: start; margin-bottom: 70px; }
.fl-left, .fl-right { align-self: stretch; }
.fl-sticky { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 16px; }
.fl-side-title { font-size: .72rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 600; margin-bottom: 8px; }
.fl-toc { display: flex; flex-direction: column; gap: 2px; border-inline-start: 2px solid var(--line); padding-inline-start: 12px; }
.fl-toc a { color: var(--ink); font-size: .9rem; padding: 4px 0; }
.fl-toc a:hover { color: var(--accent); text-decoration: none; }

.fl-main { min-width: 0; }
.fl-viewer { padding: 0; overflow: hidden; }
.fl-viewer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.fl-viewer-title { font-weight: 600; color: var(--navy-900); }
.fl-viewer-sub { font-size: .82rem; color: var(--muted); }
.fl-pager { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--ink); white-space: nowrap; }
.fl-pbtn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.fl-pbtn:hover { border-color: var(--accent); color: var(--accent); }
.fl-pages { position: relative; max-height: min(86vh, 1100px); overflow-y: auto; padding: 22px; background: #e9edf3; scroll-behavior: smooth; }
.fl-pages:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.fl-page { margin: 0 auto 22px; max-width: 820px; }
.fl-page img { display: block; width: 100%; height: auto; background: #fff; border-radius: 4px; box-shadow: 0 4px 18px rgba(30, 30, 30, .16); }
.fl-page figcaption { text-align: center; font-size: .78rem; color: #5b6472; margin-top: 8px; }
.fl-viewer-foot { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }

.fl-article { margin-top: 34px; line-height: 1.7; color: var(--ink); font-size: 1rem; }
.fl-article section { margin-bottom: 34px; scroll-margin-top: 90px; }
.fl-article h2 { font-size: 1.45rem; letter-spacing: -.01em; color: var(--navy-900); margin: 0 0 12px; }
.fl-article h3 { font-size: 1.08rem; color: var(--navy-900); margin: 22px 0 8px; display: flex; align-items: center; gap: 10px; }
.fl-article p { margin: 0 0 12px; }
.fl-step { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .82rem; }
.fl-list { margin: 0 0 12px; padding-inline-start: 22px; }
.fl-list li { margin-bottom: 8px; }
.fl-check, .fl-warn { list-style: none; padding-inline-start: 0; }
.fl-check li, .fl-warn li { position: relative; padding-inline-start: 26px; }
.fl-check li::before, .fl-warn li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .55em; width: 10px; height: 10px; border-radius: 50%; }
.fl-check li::before { background: #1e8e5a; }
.fl-warn li::before { background: #c27c0e; border-radius: 2px; transform: rotate(45deg); }
.fl-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 0 0 34px; }
.fl-facts div { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.fl-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fl-facts dd { margin: 4px 0 0; color: var(--navy-900); font-weight: 500; line-height: 1.45; }
.fl-outline { margin: 0; padding-inline-start: 22px; }
.fl-outline li { padding: 6px 0; border-bottom: 1px dashed var(--line); }
.fl-outline-t { color: var(--navy-900); }
.fl-outline-p { margin-inline-start: 10px; font-size: .75rem; padding: 2px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.fl-how { padding: 24px 26px; }
.fl-steps { margin: 0 0 14px; padding-inline-start: 22px; }
.fl-steps li { margin-bottom: 10px; }
.fl-note { font-size: .9rem; color: var(--muted); }
.fl-faq { border: 1px solid var(--line); border-radius: 10px; padding: 0 16px; margin-bottom: 10px; background: var(--card); }
.fl-faq summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--navy-900); }
.fl-faq p { margin: 0 0 14px; }
.fl-disclaimer { font-size: .85rem; color: var(--muted); }
.fl-article a { word-break: break-word; }
.fl-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.fl-rcard, .fx-card { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.fl-rcard:hover, .fx-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 6px 20px rgba(30, 30, 30, .08); }
.fl-rcode, .fx-code { font-weight: 700; color: var(--accent); }
.fl-rtitle, .fx-title { font-weight: 600; color: var(--navy-900); line-height: 1.35; }
.fl-rmeta, .fx-meta { font-size: .8rem; color: var(--muted); }

.fl-cta { padding: 20px; }
.fl-cta-code { font-size: .8rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .05em; }
.fl-cta-title { font-size: 1.2rem; font-weight: 700; color: var(--navy-900); margin: 2px 0 12px; }
.fl-cta ul { list-style: none; margin: 0 0 16px; padding: 0; font-size: .9rem; }
.fl-cta li { display: flex; gap: 8px; margin-bottom: 7px; }
.fl-cta li [class*="fa-"] { color: #1e8e5a; margin-top: 3px; flex: none; }
.fl-cta-btn { display: flex; width: 100%; justify-content: center; text-align: center; }
.fl-cta-sub { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 10px; }
.fl-meta { padding: 14px 18px; margin: 0; font-size: .86rem; }
.fl-meta div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.fl-meta div:last-child { border-bottom: none; }
.fl-meta dt { color: var(--muted); }
.fl-meta dd { margin: 0; text-align: end; color: var(--navy-900); font-weight: 500; }
.fl-mobile-cta { display: none; }

@media (max-width: 1200px) {
  .fl-grid { grid-template-columns: minmax(0, 1fr) 280px; }
  .fl-left { display: none; }
}
@media (max-width: 900px) {
  .fl-grid { grid-template-columns: minmax(0, 1fr); }
  .fl-right { display: none; }
  .fl-pages { padding: 12px; max-height: 78vh; }
  .fl-mobile-cta { display: block; position: fixed; inset-inline: 0; bottom: 0; z-index: 50; padding: 10px 16px; background: var(--card); border-top: 1px solid var(--line); box-shadow: 0 -6px 20px rgba(30, 30, 30, .08); }
  .fl-mobile-cta .btn { display: flex; width: 100%; justify-content: center; }
  .fl { padding-bottom: 70px; }
}

/* the hub */
.fx-hero { text-align: center; max-width: 900px; margin: 0 auto 30px; }
.fx-search { position: relative; max-width: 560px; margin: 22px auto 14px; }
.fx-search [class*="fa-"] { position: absolute; inset-inline-start: 16px; top: 0; bottom: 0; margin: auto 0; height: 1em; color: var(--muted); pointer-events: none; }
.fx-search input { width: 100%; padding: 14px 16px 14px 44px; border: 1px solid var(--line); border-radius: 12px; font-size: 1rem; background: var(--card); color: var(--ink); }
.fx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.fx-chip { font-size: .85rem; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.fx-chip span { color: var(--muted); margin-inline-start: 4px; }
.fx-chip:hover { border-color: var(--accent); text-decoration: none; }
.fx-country { margin-bottom: 36px; scroll-margin-top: 90px; }
.fx-country h2 { font-size: 1.35rem; color: var(--navy-900); margin: 0 0 14px; }
.fx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.fx-tag { font-size: .88rem; color: var(--ink); line-height: 1.45; }
.fx-country[hidden], .fx-card[hidden] { display: none; }
.fx-none { text-align: center; color: var(--muted); }
.fx-foot { margin: 20px 0 70px; }
[data-theme="dark"] .fl-pages { background: #0b121b; }

/* ===== Compliance home + catalog (redesign 2026-09-25) =====
   cx-* classes. .cp-card / .cp-country / .cp-none stay in the markup only as
   the filter script's hooks. */
.cx { padding-bottom: 40px; }
.cx-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin: 34px 0 22px; flex-wrap: wrap; }
.cx-head h1 { font-size: 1.75rem; letter-spacing: -.02em; color: var(--navy-900); margin: 0 0 6px; }
.cx-head p { margin: 0; color: var(--muted); max-width: 640px; line-height: 1.55; }
.cx-head-cta { padding: 11px 20px; border-radius: 12px; font-size: .98rem; white-space: nowrap; box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 28%, transparent); }
.cx-head-cta i { margin-inline-end: 4px; }

/* your forms */
.cx-mine { padding: 6px 0 8px; margin-bottom: 30px; overflow: hidden; }
.cx-mine-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px 10px; flex-wrap: wrap; }
.cx-mine-head h2 { font-size: 1.1rem; color: var(--navy-900); margin: 0; }
.cx-tabs { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.cx-tabs button, .cx-tabs a { text-decoration: none; border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer; }
.cx-tabs button span, .cx-tabs a span { font-weight: 500; opacity: .75; margin-inline-start: 2px; }
.cx-tabs button:hover, .cx-tabs a:hover { color: var(--navy-900); }
.cx-tabs button.on, .cx-tabs a.on { background: var(--card); color: var(--navy-900); box-shadow: 0 1px 3px rgba(30, 30, 30, .12); }
.cx-rows { list-style: none; margin: 0; padding: 0; }
.cx-rows li[hidden] { display: none; }
.cx-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-top: 1px solid var(--line); color: inherit; }
.cx-row:hover { background: var(--bg); text-decoration: none; }
.cx-row-ic { flex: none; display: flex; }
.cx-row-ic .cp-flag { width: 28px; height: 28px; margin: 0; }
.cx-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cx-row-title { color: var(--navy-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.cx-row-title b { font-weight: 700; margin-inline-end: 6px; }
.cx-row-sub { font-size: .8rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-row-sub i { margin-inline-end: 3px; }
.cx-row-end { flex: none; display: flex; align-items: center; gap: 10px; }
.cx-row-go { font-size: .84rem; font-weight: 600; color: var(--accent); white-space: nowrap; }
.cx-row-go i { font-size: .72rem; margin-inline-start: 4px; }
.cx-dot { margin: 0 6px; opacity: .6; }
.cx-badge { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; border-radius: 999px; padding: 4px 10px; white-space: nowrap; background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.cx-badge.ok { background: color-mix(in srgb, #16a06c 15%, transparent); color: #0d7a56; }
.cx-badge.sign { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-dark); }
.cx-badge.warn { background: color-mix(in srgb, #e0a800 20%, transparent); color: #8a5a00; }
.cx-more { display: block; width: 100%; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--accent); font: inherit; font-size: .88rem; font-weight: 600; padding: 12px; cursor: pointer; }
.cx-more:hover { background: var(--bg); }
.cx-more[hidden] { display: none; }

/* first visit */
.cx-intro { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; margin-bottom: 30px; overflow: hidden; }
.cx-intro.card, .cx-mine.card { padding: 0; }
.cx-intro > * { min-width: 0; }
.cx-intro-how { padding: 22px 24px; }
.cx-intro h2 { font-size: 1.1rem; color: var(--navy-900); margin: 0 0 14px; }
.cx-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cx-steps li { display: flex; gap: 12px; align-items: flex-start; }
.cx-steps b { display: block; color: var(--navy-900); font-weight: 600; }
.cx-steps span:not(.cx-step-ic) { display: block; font-size: .86rem; color: var(--muted); margin-top: 2px; line-height: 1.45; }
.cx-step-ic { flex: none; width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.cx-intro-picks { padding: 22px 24px; background: var(--bg); border-inline-start: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; }
.cx-intro-picks h3 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
.cx-intro-picks .cp-flag { margin: 0; }
.cx-pick { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: 1px solid var(--line); background: var(--card); border-radius: 10px; padding: 10px 12px; font: inherit; color: var(--ink); cursor: pointer; }
.cx-pick:hover { border-color: var(--accent); }
.cx-pick-code { flex: none; font-weight: 700; color: var(--accent); min-width: 64px; }
.cx-pick-title { flex: 1; min-width: 0; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-pick i { flex: none; font-size: .72rem; color: var(--muted); }

/* catalog */
.cx-cat { scroll-margin-top: 16px; }
.cx-cat-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cx-cat-head h2 { font-size: 1.2rem; color: var(--navy-900); margin: 0; }
.cx-seeall { font-size: .88rem; font-weight: 600; }
.cx-find { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 10px 0 8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 10px; }
body.app .cx-find { background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px); }
.cx-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; }
.cx-search { position: relative; flex: 1 1 320px; display: flex; align-items: center; margin: 0; }
.cx-search > [class*="fa-"] { position: absolute; inset-inline-start: 14px; top: 0; bottom: 0; margin: auto 0; height: 1em; color: var(--muted); pointer-events: none; }
.cx-search input { width: 100%; box-sizing: border-box; padding: 10px 40px; border: 1px solid var(--line); border-radius: 10px; font: inherit; font-size: .94rem; background: var(--card); color: var(--ink); }
.cx-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cx-search kbd { position: absolute; inset-inline-end: 10px; font: 600 .72rem/1 ui-monospace, Consolas, monospace; color: var(--muted); border: 1px solid var(--line); border-radius: 5px; padding: 3px 6px; background: var(--bg); }
.cx-select { position: relative; display: flex; align-items: center; margin: 0; flex: 0 0 auto; }
.cx-select > [class*="fa-"] { position: absolute; inset-inline-start: 12px; top: 0; bottom: 0; margin: auto 0; height: 1em; color: var(--muted); pointer-events: none; font-size: .85rem; }
.cx-select select { appearance: none; -webkit-appearance: none; font: inherit; font-size: .88rem; color: var(--ink); background: var(--card) no-repeat; border: 1px solid var(--line); border-radius: 10px; padding: 10px 34px 10px 34px; cursor: pointer; max-width: 230px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px, 5px 5px; }
[dir="rtl"] .cx-select select { background-position: 17px 55%, 12px 55%; }
.cx-select select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.cx-select.on select { border-color: var(--accent); color: var(--accent-dark); font-weight: 600; background-color: color-mix(in srgb, var(--accent) 8%, var(--card)); }
.cx-select.on > [class*="fa-"] { color: var(--accent); }
.cx-countries { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--line) transparent; padding-bottom: 6px; }
/* .cx-strip wraps each strip at runtime (app_base.html): ‹ › buttons + edge fades */
.cx-strip { position: relative; flex: none; min-width: 0; max-width: 100%; }
.cx-strip-nav { position: absolute; top: calc(50% - 3px); transform: translateY(-50%); z-index: 1; display: none; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); font-size: .75rem; cursor: pointer; box-shadow: 0 2px 8px rgba(30, 30, 30, .14); }
.cx-strip-nav:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); color: var(--accent); }
.cx-strip-nav.prev { inset-inline-start: 0; }
.cx-strip-nav.next { inset-inline-end: 0; }
.cx-strip.can-prev .cx-strip-nav.prev, .cx-strip.can-next .cx-strip-nav.next { display: inline-flex; }
.cx-strip.can-next .cx-countries { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
.cx-strip.can-prev .cx-countries { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
[dir="rtl"] .cx-strip.can-next .cx-countries { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 64px), transparent); }
[dir="rtl"] .cx-strip.can-prev .cx-countries { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent); }
.cx-strip.can-prev.can-next .cx-countries { -webkit-mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); mask-image: linear-gradient(to right, transparent, #000 64px, #000 calc(100% - 64px), transparent); }
.cx-countries::-webkit-scrollbar { height: 6px; }
.cx-countries::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.cx-countries::-webkit-scrollbar-track { background: transparent; }
.cx-countries button { flex: none; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 6px 12px 6px 8px; font: inherit; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.cx-countries button > [class*="fa-"] { color: var(--muted); margin-inline-start: 2px; }
.cx-countries button span { font-size: .74rem; color: var(--muted); background: var(--bg); border-radius: 999px; padding: 1px 7px; }
.cx-countries button:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.cx-countries button.on { background: var(--navy-900); border-color: var(--navy-900); color: var(--card); font-weight: 600; }
.cx-countries button.on > [class*="fa-"] { color: inherit; }
.cx-countries button.on span { background: rgba(255, 255, 255, .18); color: inherit; }
.cx-countries .cp-flag { margin: 0; }
.cx-count { font-size: .8rem; color: var(--muted); }

.cx-country { margin: 18px 0 26px; }
.cx-country[hidden], .cx-form[hidden], .cx-none[hidden] { display: none; }
.cx-country-h { display: flex; align-items: center; gap: 10px; font-size: 1.02rem; color: var(--navy-900); margin: 0 0 12px; }
.cx-country-h .cp-flag { margin: 0; }
.cx-country-n { font-size: .78rem; font-weight: 500; color: var(--muted); }
.cx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cx-form { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 16px 14px; transition: border-color .15s, box-shadow .15s, transform .15s; }
.cx-form:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 8px 22px rgba(30, 30, 30, .08); }
.cx-form-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cx-code { font-size: .8rem; font-weight: 700; letter-spacing: .02em; color: var(--accent-dark); background: color-mix(in srgb, var(--accent) 10%, transparent); border-radius: 6px; padding: 3px 8px; }
.cx-region { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 2px 8px; background: color-mix(in srgb, #e0a800 18%, transparent); color: #8a5a00; }
.cx-title { font-size: .98rem; font-weight: 600; line-height: 1.35; color: var(--navy-900); margin: 10px 0 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cx-meta { display: flex; align-items: baseline; font-size: .8rem; color: var(--muted); min-width: 0; }
.cx-auth { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cx-ed { flex: none; white-space: nowrap; }
.cx-sum { font-size: .87rem; color: var(--ink); line-height: 1.5; margin: 10px 0 0; }
.cx-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.cx-tags span { font-size: .72rem; font-weight: 600; border-radius: 999px; padding: 3px 9px; background: var(--bg); border: 1px solid var(--line); color: var(--muted); }
.cx-form-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px dashed var(--line); }
.cx-pdf { font-size: .8rem; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.cx-pdf:hover { color: var(--accent); text-decoration: none; }
.cx-none { text-align: center; padding: 44px 20px; color: var(--muted); }
.cx-none i { font-size: 2.2rem; color: var(--accent); opacity: .5; display: block; margin-bottom: 8px; }
.cx-note { display: flex; gap: 8px; font-size: .82rem; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 26px 0 30px; line-height: 1.5; }
.cx-note i { margin-top: 2px; color: var(--accent); }

/* /compliance/new: big, centred finder and roomy tiles */
.cx-find.big { position: static; background: none; backdrop-filter: none; align-items: center; }
.cx-find.big .cx-toolbar { width: 100%; max-width: 820px; justify-content: center; }
.cx-find.big .cx-search { flex-basis: 100%; }
.cx-find.big .cx-search input { padding: 16px 52px; font-size: 1.1rem; border-radius: 14px; }
.cx-find.big .cx-search > [class*="fa-"] { inset-inline-start: 20px; font-size: 1.1rem; }
.cx-find.big .cx-strip { width: 100%; }
.cx-find.big .cx-countries { max-width: 100%; justify-content: safe center; }
.cx-catalog.full .cx-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.cx-catalog.full .cx-form { padding: 18px 18px 16px; }

/* the "who is this for?" dialog */
.cx-start h2 { margin: 6px 0 4px; }
.cx-start-ic { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-size: 1.2rem; }

[data-theme="dark"] .cx-badge.ok { color: #5fd3a4; }
[data-theme="dark"] .cx-badge.warn, [data-theme="dark"] .cx-region { color: #e8c07a; }
[data-theme="dark"] .cx-code { color: #8cc2f5; }
[data-theme="dark"] .cx-tabs button.on, [data-theme="dark"] .cx-tabs a.on { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
[data-theme="dark"] .cx-countries button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
[data-theme="dark"] .cx-form:hover { box-shadow: 0 8px 22px rgba(0, 0, 0, .35); }

@media (max-width: 820px) {
  .cx-head { margin-top: 20px; align-items: stretch; }
  .cx-head-cta { width: 100%; justify-content: center; text-align: center; }
  .cx-intro { grid-template-columns: 1fr; }
  .cx-intro-picks { border-inline-start: 0; border-top: 1px solid var(--line); }
  .cx-row { padding: 12px 14px; gap: 10px; flex-wrap: wrap; }
  .cx-row-main { flex-basis: calc(100% - 50px); }
  .cx-row-end { width: 100%; justify-content: space-between; padding-inline-start: 38px; }
  .cx-mine-head { padding: 14px 14px 10px; }
  .cx-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
  .cx-tabs button, .cx-tabs a { flex: none; }
  .cx-select { flex: 1 1 140px; }
  .cx-select select { width: 100%; max-width: none; }
  .cx-grid { grid-template-columns: 1fr; }
  .cx-find { position: static; }
}

/* ===== Public Forms-template pages (FileIt ADR-0106) — builds on the fl-/fx- styles ===== */
.ft-seg { display: flex; gap: 4px; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 3px; }
.ft-seg button { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .84rem; font-weight: 600; padding: 6px 12px; border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.ft-seg button.on { background: var(--card); color: var(--navy-900); box-shadow: 0 1px 3px rgba(30, 30, 30, .12); }
.ft-stage { background: #e9edf3; padding: 26px 22px; max-height: min(88vh, 1150px); overflow-y: auto; }
.ft-stage[hidden], .ft-pdf[hidden] { display: none; }
.ft-mount { max-width: 760px; margin: 0 auto; }
.ft-n { font-size: .8rem; font-weight: 500; color: var(--muted); margin-inline-start: 6px; }
.fx-country h2 a { color: inherit; }
.ft-intro { margin: -6px 0 14px; color: var(--muted); font-size: .92rem; }
.fx-chip.on { background: var(--navy-900); border-color: var(--navy-900); color: var(--card); }
.fx-chip.on span { color: inherit; opacity: .8; }
.ft .fl-rcode, .fx .fx-code [class*="fa-"] { font-size: 1.1rem; }
.ft-qpage h3 { font-size: 1.02rem; }
.ft-qs { list-style: none; margin: 0 0 8px; padding: 0; }
.ft-qs li { padding: 8px 0; border-bottom: 1px dashed var(--line); }
.ft-q { color: var(--navy-900); }
.ft-req { color: #c2410c; margin-inline-start: 3px; }
.ft-tag { margin-inline-start: 8px; font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent-dark); }
.ft-opts { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
[data-theme="dark"] .ft-stage { background: #0b121b; }
[data-theme="dark"] .ft-seg button.on { box-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
@media (max-width: 900px) { .ft-stage { padding: 14px 10px; max-height: none; } }

/* ===== eSignature starter templates (FileIt ADR-0112): gallery + setup page ===== */
.est-tools { display: flex; flex-direction: column; gap: 12px; margin: 0 0 18px; }
.est-search { max-width: 520px; }
.est-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.est-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.est-card { display: flex; flex-direction: column; gap: 6px; background: var(--card, #fff); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; color: inherit; transition: border-color .15s, box-shadow .15s, transform .15s; }
.est-card:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 8px 22px rgba(30, 30, 30, .08); transform: translateY(-1px); }
.est-card[hidden] { display: none; }
.est-ic { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: #e8f1fa; color: var(--accent); font-size: 1.15rem; }
.est-name { font-weight: 700; color: var(--navy-900); }
.est-desc { font-size: .86rem; color: var(--muted); line-height: 1.45; flex: 1; }
.est-meta { font-size: .78rem; color: var(--muted); margin-top: 4px; }
.est-disclaimer { font-size: .8rem; color: var(--muted); margin: 22px 0 40px; max-width: 760px; line-height: 1.5; }
.est-setup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 46%); gap: 24px; align-items: start; margin-bottom: 40px; }
.est-form { min-width: 0; }
.est-group { border: 1px solid var(--line); margin: 0 0 14px; padding: 14px 16px 6px; }
.est-group legend { font-weight: 700; color: var(--navy-900); padding: 0 6px; }
.est-group .field textarea, .est-form .field input, .est-form .field select { width: 100%; box-sizing: border-box; }
.est-group .field textarea { resize: vertical; max-width: 100%; }
.est-form .field.invalid textarea { border-color: var(--danger); }
.est-form .req { color: var(--danger); }
.est-signer { border-top: 1px solid var(--line); padding: 12px 0 2px; }
.est-signer:first-of-type { border-top: 0; padding-top: 2px; }
.est-signer-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.est-me, .est-order { display: inline-flex; align-items: center; gap: 6px; font-size: .86rem; cursor: pointer; }
.est-order { margin: 6px 0 10px; }
.est-signer-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.est-signer input[readonly] { background: var(--bg); color: var(--muted); }
.est-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.est-next { font-size: .84rem; }
.est-preview { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow: auto; display: flex; flex-direction: column; gap: 14px;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; }
.est-preview-head { font-weight: 700; font-size: .9rem; color: var(--navy-900); }
.est-preview img { width: 100%; height: auto; background: #fff; box-shadow: 0 2px 10px rgba(30, 30, 30, .12); border-radius: 4px; }
@media (max-width: 900px) {
  .est-setup { grid-template-columns: 1fr; }
  .est-preview { position: static; max-height: none; }
}
@media (max-width: 560px) { .est-signer-fields { grid-template-columns: 1fr; } }
[data-theme="dark"] .est-ic { background: rgba(79, 153, 230, .14); }
[data-theme="dark"] .est-name, [data-theme="dark"] .est-group legend, [data-theme="dark"] .est-preview-head { color: var(--ink); }
.es-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.es-tplpick { display: flex; align-items: center; gap: 14px; margin: 16px 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: #f5f9fd; color: inherit; transition: border-color .15s; }
.es-tplpick:hover { text-decoration: none; border-color: var(--accent); }
.es-tplpick-ic { font-size: 1.6rem; color: var(--accent); flex: none; }
.es-tplpick .sub { display: block; font-size: .82rem; color: var(--muted); margin-top: 2px; }
.es-tplpick-go { margin-inline-start: auto; color: var(--muted); }
[dir="rtl"] .es-tplpick-go { transform: scaleX(-1); }
[data-theme="dark"] .es-tplpick { background: var(--card); }
/* Template language pickers (FileIt ADR-0119): the eSignature setup page and the Forms gallery. */
.est-lang, .fb-tpl-lang { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.est-lang select, .fb-tpl-lang select { font: inherit; color: var(--ink); background: var(--card); border: 1px solid var(--line);
  border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.est-lang select:focus, .fb-tpl-lang select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.fb-tpl-lang { margin: 0 0 10px; }

/* ===== VergeHR additions (ADR-0042..0043) ===== */
/* Envelope rows are .ctx-row (rowmenu.js): click opens, right-click / ⋮ the row menu. */
.es-row.ctx-row { cursor: pointer; }
.es-row-title a { color: inherit; }
.es-row-title a:hover { text-decoration: none; }
.es-row > .row-menu { flex: none; align-self: center; }
.es-row > .row-menu .kebab-menu { text-align: start; right: 0; }
.es-row.menu-open, .es-row:has(details[open]) { z-index: 5; position: relative; }
/* The editor's "pick an employee" list above the add-signer form. */
.es-emp-pick { width: 100%; margin: 0 0 8px; font: inherit; padding: 7px 9px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); }
/* Phones (390px): rows wrap, the editor stacks. */
@media (max-width: 640px) {
  .es-row { flex-wrap: wrap; gap: 10px; padding: 12px; }
  .es-row-main { flex-basis: calc(100% - 100px); }
  .es-row-when { order: 3; flex-basis: 100%; text-align: start; white-space: normal; }
  .es-row > .row-menu { position: absolute; top: 8px; inset-inline-end: 6px; }
  .es-row { position: relative; padding-inline-end: 44px; }
}
.fb-rcpt-emp { width: 100%; margin-top: 8px; font: inherit; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--card); color: var(--ink); }
.fb-combo.is-off { opacity: .55; }
.fb-resp-t td.row-menu { width: 44px; text-align: end; }
/* Compliance "Your forms" rows carry a row menu (.ctx-row). */
.cx-rows > li.ctx-row { display: flex; align-items: center; gap: 4px; }
.cx-rows > li.ctx-row > .cx-row { flex: 1; min-width: 0; }
.cx-rows > li.ctx-row > .row-menu { flex: none; padding-inline-end: 6px; }
.cx-rows > li.ctx-row > .row-menu .kebab-menu { right: 0; text-align: start; }
/* Phones: a long form title must not widen its grid track past the screen. */
.cx-grid > * { min-width: 0; }
.cx-title, .cx-meta, .cx-form-top { overflow-wrap: anywhere; min-width: 0; }