:root{ --paper:#E9E7D9; --paper-raised:#F4F2E7; --ink:#211E16; --ink-soft:#57543F; --green-900:#24402F; --green-700:#3C6349; --green-050:#DDE6DC; --ochre:#A9772A; --ochre-text:#7A5419; --ochre-soft:#EFE1C4; --rust:#9C3B2A; --rust-soft:#F3DCD4; --warn-bg:#F9E39A; --line:#C7C0A7; --line-strong:#A79F84; --focus:#3C6349; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper:#181B15; --paper-raised:#20241C; --ink:#ECE7D6; --ink-soft:#AFA98F; --green-900:#8FBB9E; --green-700:#6FA383; --green-050:#26332A; --ochre:#D9AC5C; --ochre-text:#D9AC5C; --ochre-soft:#3A311E; --rust:#E08066; --rust-soft:#3A2420; --warn-bg:#4A3B12; --line:#3A3E30; --line-strong:#4C5140; --focus:#8FBB9E; } } :root[data-theme="dark"]{ --paper:#181B15; --paper-raised:#20241C; --ink:#ECE7D6; --ink-soft:#AFA98F; --green-900:#8FBB9E; --green-700:#6FA383; --green-050:#26332A; --ochre:#D9AC5C; --ochre-text:#D9AC5C; --ochre-soft:#3A311E; --rust:#E08066; --rust-soft:#3A2420; --warn-bg:#4A3B12; --line:#3A3E30; --line-strong:#4C5140; --focus:#8FBB9E; } *{ box-sizing:border-box; } /* Scoped to our own wrapper, not the real — same reasoning as the excise tax plugin's .cea-et-root (see its DEVELOPMENT-NOTES.md §4/§8). */ .cea-bl-root{ display:block; background:var(--paper); color:var(--ink); font-family:"IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; font-size:15px; line-height:1.5; } .cea-bl-root h1,.cea-bl-root h2,.cea-bl-root h3{ font-family:"Fraunces", Georgia, serif; font-weight:500; text-wrap:balance; margin:0; color:var(--ink); } .cea-bl-topbar{ background:none; color:var(--ink); padding:40px 28px 24px; text-align:center; } .cea-bl-topbar-inner{ max-width:900px; margin:0 auto; } .cea-bl-topbar .org{ font-family:"Fraunces",serif; font-weight:500; font-size:34px; } .cea-bl-topbar .dept{ font-size:14px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--green-700); font-family:"IBM Plex Mono",monospace; margin-top:12px; } .cea-bl-shell{ max-width:900px; margin:0 auto; padding:32px 28px 80px; } .cea-bl-note{ background:var(--ochre-soft); border:1px solid var(--line); border-radius:6px; padding:16px 20px; font-size:14px; line-height:1.6; margin-bottom:28px; } .cea-bl-note a{ color:var(--ochre-text); font-weight:600; } .cea-bl-section{ background:var(--paper-raised); border:1px solid var(--line); border-radius:6px; padding:24px 26px; margin-bottom:22px; } .cea-bl-section h2{ font-size:19px; margin-bottom:4px; } .cea-bl-section .section-desc{ font-size:13.5px; color:var(--ink-soft); margin-bottom:18px; } .req{ color:var(--rust); } .cea-bl-field{ margin-bottom:16px; } .cea-bl-field label{ display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; } .cea-bl-field .hint{ font-size:12px; color:var(--ink-soft); font-weight:400; margin-top:4px; } .cea-bl-group-label{ display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:8px; } .cea-bl-sublabel{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; text-transform:uppercase; letter-spacing:.03em; } .cea-bl-field input[type="text"], .cea-bl-field input[type="email"], .cea-bl-field input[type="tel"], .cea-bl-field input[type="date"], .cea-bl-field input[type="number"], .cea-bl-field select, .cea-bl-field textarea{ width:100%; font:inherit; font-size:14.5px; padding:10px 12px; border-radius:4px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); } .cea-bl-field input:focus, .cea-bl-field select:focus, .cea-bl-field textarea:focus{ outline:2px solid var(--focus); outline-offset:1px; } .cea-bl-field.invalid input, .cea-bl-field.invalid select, .cea-bl-field.invalid textarea{ border-color:var(--rust); background:var(--warn-bg); } .cea-bl-field .field-error{ display:none; font-size:12.5px; color:var(--rust); margin-top:5px; font-weight:600; } .cea-bl-field.invalid .field-error{ display:block; } .cea-bl-row2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .cea-bl-row3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:16px; } .cea-bl-row2[hidden], .cea-bl-row3[hidden]{ display:none; } @media (max-width:640px){ .cea-bl-row2, .cea-bl-row3{ grid-template-columns:1fr; } } .cea-bl-check{ display:flex; align-items:flex-start; gap:10px; font-size:14px; margin-bottom:14px; } .cea-bl-check input{ margin-top:3px; } .cea-bl-check-row{ display:flex; gap:22px; padding-top:2px; } .cea-bl-check-row .cea-bl-check{ margin-bottom:0; } .cea-bl-check-row-wrap{ flex-wrap:wrap; row-gap:10px; } .cea-bl-check-inline{ margin-bottom:8px; font-size:12.5px; color:var(--ink-soft); } .cea-bl-check-inline input{ margin-top:1px; } /* Owners, Partners & Officers: entry composer + removable list, mirrors the METRC entry-row pattern from the supplier plugin but with more fields per entry. */ .cea-bl-owner-entry{ display:flex; flex-direction:column; gap:10px; } .cea-bl-owner-entry input{ font:inherit; font-size:14.5px; padding:10px 12px; border-radius:4px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); } .cea-bl-owner-entry .cea-bl-btn{ align-self:flex-start; } .cea-bl-owner-list{ list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; } .cea-bl-owner-chip{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; background:var(--green-050); border:1px solid var(--line); border-radius:4px; padding:10px 12px; font-size:13.5px; } .cea-bl-owner-chip-sub{ display:block; font-size:12px; color:var(--ink-soft); margin-top:2px; font-weight:400; } .cea-bl-owner-chip button{ background:none; border:none; color:var(--rust); font-weight:700; cursor:pointer; font-size:14px; line-height:1; padding:2px 6px; flex-shrink:0; } /* Fee selection: same card pattern as the payment-method options, with fee amount right-aligned. */ .cea-bl-fee-options{ display:flex; flex-direction:column; gap:10px; } .cea-bl-field .cea-bl-fee-option{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 15px; border:1px solid var(--line-strong); border-radius:4px; background:var(--paper); cursor:pointer; font-size:14px; } .cea-bl-fee-option:has(input:checked){ border-color:var(--green-700); background:var(--green-050); } .cea-bl-fee-option input[type="radio"]{ accent-color:var(--green-700); width:15px; height:15px; margin-right:10px; } .cea-bl-fee-option .fee-title{ flex:1; font-weight:500; } .cea-bl-fee-option .fee-amount{ font-family:"IBM Plex Mono",monospace; font-size:13.5px; white-space:nowrap; } .cea-bl-fee-option .fee-sub{ display:block; font-size:11px; color:var(--ink-soft); font-family:"IBM Plex Sans",sans-serif; text-align:right; } .cea-bl-total-box{ display:flex; justify-content:space-between; align-items:center; background:var(--green-050); border-radius:4px; padding:14px 18px; margin:18px 0; font-weight:600; } .cea-bl-total-box .amount{ font-family:"IBM Plex Mono",monospace; font-size:17px; } .cea-bl-subheading{ font-size:14px; font-family:"IBM Plex Sans",sans-serif; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft); margin:22px 0 12px; } /* Matches the gap a section's own h2 + .section-desc leaves before its first field (≈22px), rather than the tighter 12px default above. */ .cea-bl-subheading-spaced{ margin-bottom:22px; } .cea-bl-lic-input{ display:flex; align-items:stretch; border:1px solid var(--line-strong); border-radius:4px; background:var(--paper); overflow:hidden; } .cea-bl-lic-prefix{ display:flex; align-items:center; padding:0 10px; font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--ink-soft); white-space:nowrap; background:var(--green-050); border-right:1px solid var(--line-strong); } .cea-bl-lic-input input[type="text"]{ flex:1; width:auto; min-width:0; border:none; border-radius:0; background:transparent; } .cea-bl-lic-input input[type="text"]:focus{ outline:2px solid var(--focus); outline-offset:-2px; } .cea-bl-metrc-entry-row{ display:flex; gap:10px; } .cea-bl-metrc-entry-row input[type="text"]{ flex:2; } .cea-bl-metrc-entry-row input[type="date"]{ flex:1; } .cea-bl-metrc-entry-row input{ font:inherit; font-size:14.5px; padding:10px 12px; border-radius:4px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); } .cea-bl-metrc-entry-row .cea-bl-btn{ flex-shrink:0; } @media (max-width:640px){ .cea-bl-metrc-entry-row{ flex-wrap:wrap; } .cea-bl-metrc-entry-row input{ flex:1 1 100%; } } .cea-bl-chip-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-wrap:wrap; gap:8px; } .cea-bl-chip{ display:flex; align-items:center; gap:8px; background:var(--green-050); border:1px solid var(--line); border-radius:20px; padding:6px 8px 6px 14px; font-size:13px; } .cea-bl-chip button{ background:none; border:none; color:var(--rust); font-weight:700; cursor:pointer; font-size:14px; line-height:1; padding:2px 6px; } .cea-bl-upload{ border:1.5px dashed var(--line-strong); border-radius:6px; padding:18px; text-align:center; background:var(--paper); cursor:pointer; } .cea-bl-upload input[type="file"]{ display:none; } .cea-bl-upload .upload-label{ font-size:13.5px; font-weight:600; color:var(--green-700); } .cea-bl-upload .upload-hint{ font-size:12px; color:var(--ink-soft); margin-top:4px; } .cea-bl-file-list{ list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; } .cea-bl-file-chip{ display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--green-050); border:1px solid var(--line); border-radius:4px; padding:6px 10px; font-size:13px; } .cea-bl-file-chip button{ background:none; border:none; color:var(--rust); font-weight:700; cursor:pointer; font-size:14px; line-height:1; padding:2px 4px; } .cea-bl-file-chip-desc{ align-items:center; } .cea-bl-file-chip-desc .cea-bl-file-chip-name{ flex-shrink:0; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cea-bl-file-chip-desc input[type="text"]{ flex:1; min-width:0; font:inherit; font-size:13px; padding:6px 8px; border-radius:3px; border:1px solid var(--line-strong); background:var(--paper); color:var(--ink); } .cea-bl-fee-box{ display:flex; justify-content:space-between; align-items:center; background:var(--green-050); border-radius:4px; padding:14px 18px; margin-bottom:18px; font-weight:600; } .cea-bl-fee-box .amount{ font-family:"IBM Plex Mono",monospace; font-size:17px; } .cea-bl-paymethod-group{ display:flex; flex-direction:column; gap:10px; } /* Specificity note: each option is itself a , so the generic ".cea-bl-field label{ display:block }" rule above (2 classes) beats a bare ".cea-bl-paymethod-option{ display:flex }" (1 class) regardless of source order — the qualified selector here matches that specificity and wins on tie, restoring the radio+text row layout. */ .cea-bl-field .cea-bl-paymethod-option{ display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border:1px solid var(--line-strong); border-radius:4px; background:var(--paper); cursor:pointer; } .cea-bl-paymethod-option:has(input:checked){ border-color:var(--green-700); background:var(--green-050); } .cea-bl-paymethod-option input[type="radio"]{ margin-top:3px; accent-color:var(--green-700); width:15px; height:15px; flex-shrink:0; } .cea-bl-paymethod-option .pm-body{ display:block; flex:1; } .cea-bl-paymethod-option .pm-title{ display:block; font-size:14px; font-weight:500; } .cea-bl-paymethod-option .pm-sub{ display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px; } .cea-bl-paymethod-option .pm-detail{ display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); font-size:12.5px; line-height:1.6; color:var(--ink-soft); } .cea-bl-paymethod-option .pm-detail strong{ color:var(--ink); font-weight:500; } .cea-bl-paymethod-option:has(input:checked) .pm-detail{ display:block; } .cea-bl-signature-preview{ border:1px solid var(--line-strong); border-radius:4px; padding:16px; min-height:60px; display:flex; align-items:center; background:var(--paper); margin-bottom:10px; } .cea-bl-signature-preview .placeholder{ color:var(--ink-soft); font-size:13.5px; } .cea-bl-signature-preview .signed{ font-family:"Sacramento", cursive; font-size:30px; color:var(--ink); } .cea-bl-sig-date-note{ font-size:12.5px; color:var(--ink-soft); margin-top:6px; } .cea-bl-sig-date-note strong{ color:var(--ink); font-weight:600; } .cea-bl-btn{ font-size:14px; font-weight:600; cursor:pointer; border-radius:4px; padding:10px 18px; border:1px solid var(--line-strong); background:var(--paper-raised); color:var(--ink); } .cea-bl-btn.primary{ background:var(--green-700); color:var(--paper-raised); border-color:var(--green-700); } .cea-bl-certify{ background:var(--green-050); border-radius:6px; padding:18px 20px; font-size:13.5px; line-height:1.6; margin-bottom:18px; } #cea-bl-validation-summary{ display:none; background:var(--rust-soft); border:1px solid var(--rust); border-radius:6px; padding:14px 18px; margin-bottom:18px; font-size:14px; } #cea-bl-validation-summary.show{ display:block; } #cea-bl-validation-summary ul{ margin:8px 0 0; padding-left:20px; } .cea-bl-submit-row{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; } #cea-bl-submit[aria-disabled="true"]{ opacity:.55; cursor:default; } .cea-bl-submit-status{ font-size:13.5px; } .cea-bl-submit-status.ok{ color:var(--green-700); font-weight:600; } .cea-bl-submit-status.err{ color:var(--rust); font-weight:600; } .cea-bl-success{ display:none; background:var(--green-050); border:1px solid var(--green-700); border-radius:6px; padding:22px 26px; margin-top:24px; } .cea-bl-success[hidden]{ display:none; } .cea-bl-success.show{ display:block; } /* Modal (signature) */ .cea-bl-modal-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:flex; align-items:center; justify-content:center; z-index:1000; padding:20px; } .cea-bl-modal-backdrop[hidden]{ display:none; } .cea-bl-modal{ background:var(--paper-raised); border-radius:8px; max-width:480px; width:100%; padding:24px; border:1px solid var(--line); } .cea-bl-modal h3{ font-size:18px; margin-bottom:14px; } .cea-bl-modal-tabs{ display:flex; gap:8px; margin-bottom:16px; } .cea-bl-modal-tab{ flex:1; text-align:center; padding:8px; border-radius:4px; cursor:pointer; font-size:13.5px; font-weight:600; border:1px solid var(--line-strong); background:var(--paper); } .cea-bl-modal-tab.active{ background:var(--green-700); color:var(--paper-raised); border-color:var(--green-700); } .cea-bl-modal-pane[hidden]{ display:none; } #cea-bl-sig-canvas{ border:1px solid var(--line-strong); border-radius:4px; width:100%; height:140px; touch-action:none; background:var(--paper); } .cea-bl-modal-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; } /* Submitting overlay: stands out much more than the small inline status text, since the Airtable round trip can take a few seconds and applicants weren't sure the click had registered. */ .cea-bl-submitting-overlay{ z-index:1100; } .cea-bl-submitting-modal{ text-align:center; max-width:360px; } .cea-bl-submitting-modal h3{ margin:16px 0 8px; } .cea-bl-submitting-modal p{ font-size:13.5px; color:var(--ink-soft); margin:0; } .cea-bl-spinner{ width:38px; height:38px; margin:0 auto; border-radius:50%; border:4px solid var(--line); border-top-color:var(--green-700); animation:cea-bl-spin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce){ .cea-bl-spinner{ animation-duration:2.4s; } } @keyframes cea-bl-spin{ to{ transform:rotate(360deg); } }