/* Loamist family site: the task pages with live forms (contact.html, lc-check.html).
   Loads after site.css and content.css. The pages' inline scripts read and write the lc-* ids and
   classes below (and build some of them at runtime: steps, findings, counts, documents, CTAs), so
   every lc-* class the scripts use is styled here in the new tokens. Do not rename them.
   One accent (gold). Green only for done, passed or verified. Red and orange are severity only. */

:root {
  --red: #a3261c;
  --red-soft: #fbecea;
  --red-line: #efc9c4;
  --orange: #a8500e;
  --orange-soft: #fbefe5;
}

/* ---- state sections: the scripts switch these with style.display = 'none' | 'flex' | '' ---- */
.lc-upload-section, .lc-analyzing-section, .lc-results-section, .lc-success-section { display: flex; flex-direction: column; }
.lc-state { padding: clamp(40px, 5vw, 72px) var(--gutter) clamp(72px, 8vw, 120px); }
.lc-state > .lc-card { width: 100%; }

/* ---- hero inside the form state ---- */
.lc-upload-section .page-hero { padding-bottom: clamp(28px, 3vw, 44px); }
.lc-hero-h1 { font-size: clamp(40px, 5.6vw, 88px) !important; max-width: 20ch !important; }

/* ---- form card ---- */
.lc-form-layout { padding: 0 var(--gutter) clamp(72px, 8vw, 120px); }
.lc-check-form { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); padding: clamp(22px, 3vw, 36px); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.lc-form-group { display: flex; flex-direction: column; gap: 8px; }
.lc-form-group > label { font: 500 12px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lc-label-optional { text-transform: none; letter-spacing: 0; font: 400 13px var(--font-sans); color: var(--muted); }
.lc-form-group input, .lc-textarea {
  width: 100%; font: 400 16px/1.4 var(--font-sans); color: var(--ink); background: var(--bone); border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
.lc-textarea { min-height: 140px; resize: vertical; line-height: 1.55; }
.lc-form-group input::placeholder, .lc-textarea::placeholder { color: #9a948c; }
.lc-form-group input:focus, .lc-textarea:focus { outline: none; border-color: var(--ink); background: var(--card); box-shadow: 0 0 0 3px rgba(173, 127, 0, .18); }
.lc-form-group.has-error input { border-color: var(--red); }
.lc-field-error { font: 400 13px/1.4 var(--font-sans); color: var(--red); min-height: 1.2em; }
.lc-field-error:empty { min-height: 0; }
.lc-field-hint { color: var(--muted); }
.lc-form-error { font: 400 14px/1.5 var(--font-sans); color: var(--red); background: var(--red-soft); border: 1px solid var(--red-line); border-radius: 10px; padding: 12px 16px; }

/* Primary action: the ink pill, full width in the card. */
.lc-submit-btn { justify-content: center; width: 100%; border: 0; cursor: pointer; margin-top: 4px; }
.lc-submit-btn svg { flex: none; }
.lc-submit-btn[disabled], .lc-submit-btn.is-loading { opacity: .6; cursor: not-allowed; }
.lc-back-btn { cursor: pointer; align-self: flex-start; }
.btn svg { flex: none; }

/* ---- dropzone (lc-check) ---- */
.lc-dropzone { width: 100%; border: 1.5px dashed #d6cfc4; border-radius: 14px; background: var(--bone); padding: clamp(32px, 5vw, 56px) 24px; text-align: center; cursor: pointer; outline: none; transition: border-color .3s var(--ease), background .3s var(--ease); }
.lc-dropzone:hover, .lc-dropzone:focus-visible, .lc-dropzone--active { border-color: var(--gold); background: var(--gold-soft); }
.lc-dropzone.has-error { border-color: var(--red); background: var(--red-soft); }
.lc-dropzone-icon { color: var(--muted); margin-bottom: 14px; display: flex; justify-content: center; }
.lc-dropzone-icon svg { width: 40px; height: 40px; }
.lc-dropzone:hover .lc-dropzone-icon, .lc-dropzone:focus-visible .lc-dropzone-icon, .lc-dropzone--active .lc-dropzone-icon { color: var(--gold); }
.lc-dropzone-title { margin: 0 0 6px; font: 600 clamp(20px, 1.8vw, 24px)/1.2 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.lc-dropzone-sub { margin: 0 0 12px; font: 400 15px var(--font-sans); color: var(--ink-2); }
.lc-dropzone-browse { font: 600 15px var(--font-sans); color: var(--gold); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; cursor: pointer; }
.lc-dropzone-browse:hover { color: var(--gold-2); }
.lc-dropzone-formats { margin: 0; font: 500 11px/1.4 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }

.lc-file-selected { align-items: center; gap: 12px; padding: 14px 16px; background: var(--bone); border: 1px solid var(--line); border-radius: 10px; }
.lc-file-selected > svg { color: var(--ink); flex: none; }
.lc-file-name { flex: 1; min-width: 0; font: 500 13px var(--font-mono); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lc-file-remove { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--muted); background: none; border: 0; cursor: pointer; flex: none; }
.lc-file-remove:hover { background: var(--card); color: var(--ink); }

/* ---- progress ---- */
.lc-progress { flex-direction: column; gap: 8px; }
.lc-progress-bar { width: 100%; height: 6px; background: var(--bone-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.lc-progress-fill { height: 100%; width: 0%; background: var(--ink); border-radius: 999px; transition: width .15s ease-out; }
.lc-progress-label { display: block; margin-top: 8px; font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--muted); }

/* ---- aside next to the form ---- */
.lc-aside-panel { display: grid; gap: 22px; align-content: start; }
.lc-upload-trust { display: grid; gap: 10px; border-top: 1.5px solid var(--ink); padding-top: 18px; }
.lc-trust-item { display: flex; align-items: center; gap: 10px; font: 400 15px/1.45 var(--font-sans); color: var(--ink-2); }
.lc-trust-item svg { color: var(--ink); flex: none; }
.lc-aside-panel .numbered > li { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; }
.lc-aside-panel .numbered h3 { font-size: 18px; margin-bottom: 4px; }
.lc-aside-panel .numbered p { font-size: 15px; line-height: 1.5; }

/* ---- shared card for analyzing / results / success ---- */
.lc-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); padding: clamp(24px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 18px; }
.lc-card h2 { margin: 0; font: 600 clamp(28px, 3.2vw, 44px)/1.05 var(--font-display); letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.lc-card h2:focus { outline: none; }

/* success */
.lc-success { max-width: 640px; align-items: flex-start; }
.lc-success p { margin: 0; font: 400 clamp(17px, 1.4vw, 19px)/1.55 var(--font-sans); color: var(--ink-2); max-width: 52ch; }
.lc-success-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--green-soft); border: 1px solid var(--green-line); color: var(--green); }
.lc-success-icon svg { width: 26px; height: 26px; }
.lc-success-icon--neutral { background: var(--bone-2); border-color: var(--line); color: var(--ink); }
.lc-success .btn { margin-top: 8px !important; }

/* analyzing */
.lc-analyzing { max-width: 640px; }
.lc-analyzing-head { display: flex; flex-direction: column; gap: 8px; }
.lc-analyzing-file { font: 500 12px/1.4 var(--font-mono); letter-spacing: .04em; color: var(--muted); word-break: break-all; }
.lc-analyzing-meter { display: flex; flex-direction: column; gap: 8px; }
.lc-analyzing-meta { font: 500 12px var(--font-mono); letter-spacing: .04em; color: var(--muted); }
.lc-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-top: 1.5px solid var(--ink); }
.lc-step { display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.lc-step-ic { width: 20px; height: 20px; display: grid; place-items: center; }
.lc-step-label { font: 400 15px/1.45 var(--font-sans); color: var(--muted); }
.lc-step-dot { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid #c9c1b5; }
.lc-step[data-state="current"] .lc-step-dot { width: 15px; height: 15px; border: 2px solid rgba(173, 127, 0, .25); border-top-color: var(--gold); animation: lc-step-spin .75s linear infinite; }
.lc-step[data-state="current"] .lc-step-label { color: var(--ink); font-weight: 500; }
.lc-step[data-state="done"] .lc-step-dot { display: none; }
.lc-step-check { display: none; width: 16px; height: 16px; color: var(--green); }
.lc-step[data-state="done"] .lc-step-check { display: block; }
.lc-step[data-state="done"] .lc-step-label { color: var(--ink-2); }
@keyframes lc-step-spin { to { transform: rotate(360deg); } }
.lc-analyzing-note { display: flex; align-items: flex-start; gap: 10px; background: var(--gold-soft); border-radius: 10px; padding: 12px 14px; }
.lc-analyzing-note svg { color: var(--gold-2); flex: none; margin-top: 2px; }
.lc-analyzing-note p { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) {
  .lc-step[data-state="current"] .lc-step-dot { animation: none; border-color: var(--gold); }
  .lc-progress-fill { transition: none; }
}

/* results */
.lc-results { max-width: 1120px; }
.lc-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lc-band { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px; border-radius: 999px; white-space: nowrap; background: var(--bone-2); color: var(--ink-2); }
.lc-band[data-band="Critical"] { background: var(--red-soft); color: var(--red); }
.lc-band[data-band="High"] { background: var(--orange-soft); color: var(--orange); }
.lc-band[data-band="Moderate"] { background: var(--bone-2); color: var(--ink-2); }
.lc-band[data-band="Low"] { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-line); }
.lc-counts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; padding: 14px 0; border-top: 1.5px solid var(--ink); border-bottom: 1px solid var(--line); }
.lc-count { display: inline-flex; align-items: baseline; gap: 7px; font: 400 14px var(--font-sans); color: var(--ink-2); white-space: nowrap; }
.lc-count i { width: 7px; height: 7px; border-radius: 50%; flex: none; transform: translateY(-1px); background: var(--muted); }
.lc-count b { font: 600 18px var(--font-display); color: var(--ink); }
.lc-count[data-sev="Critical"] i { background: var(--red); }
.lc-count[data-sev="High"] i { background: var(--orange); }
.lc-count[data-sev="Advisory"] i { background: #c9c1b5; }
.lc-results-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.lc-results-main { min-width: 0; }
.lc-findings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lc-finding { display: grid; grid-template-columns: 88px 1fr; gap: 18px; align-items: start; padding: 16px 0; border-top: 1px solid var(--line); }
.lc-finding:first-child { border-top: 0; padding-top: 4px; }
.lc-rail { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.lc-tag { font: 500 13px/1.2 var(--font-mono); color: var(--ink); word-break: break-word; }
.lc-sev { display: inline-flex; align-items: center; gap: 5px; font: 500 10px/1.2 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lc-sev i { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--muted); }
.lc-finding[data-sev="Critical"] .lc-sev { color: var(--red); }
.lc-finding[data-sev="Critical"] .lc-sev i { background: var(--red); }
.lc-finding[data-sev="High"] .lc-sev { color: var(--orange); }
.lc-finding[data-sev="High"] .lc-sev i { background: var(--orange); }
.lc-finding[data-sev="Advisory"] .lc-sev i { background: #c9c1b5; }
.lc-finding-body b { display: block; margin-bottom: 4px; font: 600 16px/1.35 var(--font-sans); color: var(--ink); }
.lc-finding-body p { margin: 0; font: 400 14px/1.55 var(--font-sans); color: var(--ink-2); max-width: 66ch; }
.lc-results-clean { display: flex; align-items: flex-start; gap: 10px; background: var(--green-soft); border: 1px solid var(--green-line); border-radius: 10px; padding: 13px 15px; }
.lc-results-clean svg { color: var(--green); flex: none; margin-top: 2px; }
.lc-results-clean p { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--ink-2); }
.lc-aside { display: flex; flex-direction: column; gap: 20px; min-width: 0; background: var(--bone); border: 1px solid var(--line); border-radius: 14px; padding: 20px 22px 22px; }
.lc-aside-header { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.lc-card .lc-aside-header h2 { font: 600 18px/1.15 var(--font-display); letter-spacing: -0.01em; }
.lc-aside-header span { font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.lc-aside-block { padding: 0; }
.lc-aside-block h3 { margin: 0 0 10px; font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.lc-aside-lede { margin: 0 0 12px; font: 400 14px/1.55 var(--font-sans); color: var(--ink-2); }
.lc-steps-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; counter-reset: lcstep; }
.lc-steps-list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; counter-increment: lcstep; }
.lc-steps-list li::before { content: counter(lcstep, decimal-leading-zero); font: 500 11px/1.6 var(--font-mono); color: var(--muted); }
.lc-steps-list b { display: block; margin-bottom: 2px; font: 600 14px/1.35 var(--font-sans); color: var(--ink); }
.lc-steps-list p { margin: 0; font: 400 13px/1.5 var(--font-sans); color: var(--ink-2); }
.lc-docs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lc-docs li { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.lc-docs li:first-child { border-top: 0; }
.lc-doc-name { font: 400 14px/1.4 var(--font-sans); color: var(--ink); }
.lc-docs li[data-required="false"] .lc-doc-name { color: var(--muted); }
.lc-doc-opt { margin-left: 6px; font: 500 10px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.lc-doc-count { flex: none; font: 500 11px var(--font-mono); color: var(--muted); white-space: nowrap; }
.lc-ctas { display: flex; flex-direction: column; gap: 8px; }
.lc-cta { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; background: var(--card); border: 1px solid var(--line); border-radius: 10px; transition: border-color .3s var(--ease); }
.lc-cta:hover { border-color: var(--ink); }
.lc-cta span { font: 500 14px/1.35 var(--font-sans); color: var(--ink); }
.lc-cta svg { color: var(--gold); flex: none; }
.lc-claim { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: 10px; padding: 16px 18px; }
.lc-claim b { font: 600 17px/1.3 var(--font-display); color: var(--ink); }
.lc-claim p { margin: 0; font: 400 14px/1.5 var(--font-sans); color: var(--ink-2); }
.lc-results-actions { display: flex; }

@media (max-width: 900px) { .lc-results-grid { grid-template-columns: 1fr; gap: 24px; } .lc-aside { padding: 18px; } }
@media (max-width: 600px) {
  .lc-finding { grid-template-columns: 1fr; gap: 6px; }
  .lc-rail { flex-direction: row; align-items: center; gap: 10px; }
  .lc-dropzone { padding: 32px 18px; }
  .lc-check-form { padding: 22px 18px; }
}

/* Turnstile human check (site/turnstile.js); hidden until a site key renders it. */
.lc-turnstile { min-height: 65px; }