/* The "Request your Operations Audit" section on /operations-audit (build #1728): a form on the
   left, a first-look panel on the right, built from the approved sketch layout A. Uses the site
   tokens from lumen.css; the spacing steps below are local to this section. */

.oa-request {
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --oa-ok: #1f7a5a; --oa-ok-ink: #17583f; --oa-bad: #a1342b; --oa-bad-soft: rgba(161, 52, 43, 0.09);
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 88px) var(--pad-x) clamp(24px, 4vw, 48px);
  position: relative;
  scroll-margin-top: 88px;
}
.oa-request::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  width: min(780px, calc(100% - 2 * var(--pad-x)));
  height: 1px;
  transform: translateX(-50%);
  background: var(--line);
}
.oa-num { font-family: var(--f-mono); font-variant-numeric: lining-nums tabular-nums; }

.oa-head { text-align: center; margin: 0 auto var(--s6); }
.oa-head .about-block-eyebrow { margin-bottom: var(--s5); }
.oa-title {
  font: 800 clamp(1.75rem, 4.4vw, 3rem)/1.1 var(--f-display);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s3);
  color: var(--ink);
}
.oa-lede { margin: 0 auto; max-width: 56ch; color: var(--ink-2); font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.6; }

.oa-how { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2) var(--s6); margin: var(--s5) auto 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
.oa-how-label { flex-basis: 100%; text-align: center; font: 500 0.6875rem/1.5 var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--azure-text); }
.oa-how-step b { font-weight: 500; color: var(--azure-text); margin-right: 0.15em; }
@media (max-width: 599px) { .oa-how { flex-direction: column; align-items: center; gap: 4px; } }

.oa-stage { display: grid; gap: var(--s6); align-items: stretch; grid-template-columns: 1fr 1fr; }
.oa-card {
  background: var(--surface);
  border-radius: var(--radius-card);
  padding: var(--s6);
  box-shadow: 0 1px 2px rgba(20, 36, 51, 0.05), 0 14px 40px rgba(34, 120, 189, 0.1);
  min-width: 0;
}
.oa-card-title { font: 700 1.375rem/1.2 var(--f-display); margin: 0 0 var(--s5); color: var(--ink); }

/* ---------- the form ---------- */
.oa-form { display: flex; flex-direction: column; gap: var(--s4); }
.oa-field { position: relative; display: grid; gap: var(--s2); min-width: 0; align-content: start; }
.oa-field--slows { flex: 1; display: flex; flex-direction: column; align-items: stretch; }

/* floating labels (build #1980): the real <label> sits inside the empty box at body size and floats to the
   top edge on focus, when filled, when the browser autofills, or when a dropdown has an option chosen */
.oa-field label {
  position: absolute; z-index: 1; left: var(--s4); top: 16px;
  max-width: calc(100% - var(--s4) - var(--s7));
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 400 1rem/24px var(--f-body); color: var(--ink-3);
  transform-origin: left top;
  transition: transform 0.2s var(--ease-sine), color 0.2s;
  pointer-events: none;
}
.oa-field:focus-within label,
.oa-field:has(input[placeholder]:not(:placeholder-shown)) label,
.oa-field:has(textarea:not(:placeholder-shown)) label,
.oa-field:has(select option:checked:not([value=""])) label { transform: translateY(-10px) scale(0.75); color: var(--ink-3); }
.oa-field:has(input:-webkit-autofill) label { transform: translateY(-10px) scale(0.75); }
.oa-field:has(input:autofill) label { transform: translateY(-10px) scale(0.75); }
.oa-field:focus-within label { color: var(--azure-text); }
.oa-field:has([aria-invalid="true"]) label { color: var(--oa-bad); }
.oa-field--slows label { background: var(--canvas); left: calc(var(--s4) - 4px); padding: 0 4px; right: 24px; max-width: none; }
.oa-field--slows:focus-within label { background: #fff; }
.oa-field--slows:focus-within label, .oa-field--slows:has(textarea:not(:placeholder-shown)) label { transform: translate(1px, -10px) scale(0.75); }
.oa-form input, .oa-form select, .oa-form textarea {
  width: 100%;
  min-height: 56px;
  padding: 24px var(--s4) 6px;
  font: 400 1rem/1.4 var(--f-body);
  color: var(--ink);
  background: var(--canvas);
  border: 0;
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1.5px rgba(20, 36, 51, 0.2);
  transition: box-shadow 0.2s var(--ease-sine), background 0.2s;
}
.oa-form input::placeholder, .oa-form textarea::placeholder { color: transparent; opacity: 1; transition: color 0.2s; }
.oa-form input:focus::placeholder, .oa-form textarea:focus::placeholder { color: var(--ink-3); }
.oa-form textarea { resize: vertical; min-height: 112px; flex: 1; max-height: 260px; }
.oa-form input:focus, .oa-form select:focus, .oa-form textarea:focus {
  outline: 0;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--azure), 0 0 0 4px var(--azure-soft);
}
.oa-form [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--oa-bad); background: #fff; }
.oa-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%2343607a' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m3.5 6 4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--s4) center;
  padding-right: var(--s7);
}
.oa-err { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--oa-bad); }
.oa-err:empty { display: none; }
.oa-hint a { white-space: nowrap; }
.oa-hint { margin: 0; font-size: 0.875rem; color: var(--ink-3); line-height: 1.5; }
.oa-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s3); margin-top: var(--s2); }
.oa-send {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s6);
  border: 0; border-radius: var(--radius);
  background: var(--azure); color: #fff;
  font: 600 0.9375rem/1 var(--f-body);
  cursor: pointer;
  transition: transform 0.2s var(--ease-sine), box-shadow 0.3s var(--ease-sine), background 0.2s;
}
.oa-send:hover { background: var(--azure-deep); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(34, 120, 189, 0.3); }
.oa-send:disabled { opacity: 0.6; cursor: default; transform: none; box-shadow: none; }
.oa-note { margin: 0; align-self: stretch; padding: var(--s3) var(--s4); border-radius: var(--radius); font-size: 0.9375rem; line-height: 1.5; }
.oa-note[hidden] { display: none; }
.oa-note--ok { background: rgba(31, 122, 90, 0.1); color: var(--oa-ok-ink); }
.oa-note--bad { background: var(--oa-bad-soft); color: var(--oa-bad); }

/* ---------- progress ---------- */
.oa-bar { height: 8px; border-radius: 99px; background: var(--tint); overflow: hidden; flex: 1; }
.oa-bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: linear-gradient(90deg, var(--azure), var(--sky)); }
.oa-strip { display: none; gap: var(--s2); padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--tint); }
.oa-strip .oa-bar { flex: none; background: #fff; }
.oa-strip-row { display: flex; justify-content: space-between; gap: var(--s3); align-items: baseline; font-size: 0.875rem; color: var(--ink-2); }
.oa-strip-pct { color: var(--ink); font-weight: 600; }
.oa-request[data-state="failed"] .oa-strip { background: var(--oa-bad-soft); }
.oa-request[data-state="failed"] .oa-strip-row { color: var(--oa-bad); }
.oa-request[data-state="failed"] .oa-strip-pct { display: none; }
/* A failed lookup has no progress to show: an empty bar inside the red box reads as broken (build #1893). */
.oa-request[data-state="failed"] .oa-strip .oa-bar,
.oa-request[data-state="failed"] .oa-meter { display: none; }
.oa-retry { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--azure-text); font: 600 0.875rem/1.3 var(--f-body); text-decoration: underline; cursor: pointer; }
.oa-retry[hidden] { display: none; }

/* ---------- the panel ---------- */
.oa-panel { display: flex; flex-direction: column; gap: var(--s4); }
.oa-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.oa-panel-head .oa-card-title { margin: 0; }
.oa-status { padding: 4px var(--s3); border-radius: 99px; background: var(--azure-soft); color: var(--azure-text); font: 600 0.8125rem/1.5 var(--f-body); text-align: right; }
.oa-request[data-state="done"] .oa-status { background: rgba(31, 122, 90, 0.12); color: var(--oa-ok-ink); }
.oa-request[data-state="failed"] .oa-status { background: var(--oa-bad-soft); color: var(--oa-bad); }
.oa-intro { margin: 0; font-size: 0.875rem; color: var(--ink-3); line-height: 1.5; }
.oa-meter { display: flex; align-items: center; gap: var(--s4); }
.oa-meter .oa-num { min-width: 4ch; text-align: right; font-size: 0.9375rem; font-weight: 600; }

.oa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
.oa-steps li { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--canvas); transition: background 0.3s var(--ease-sine), opacity 0.3s; }
.oa-steps li[data-s="pending"] { opacity: 0.7; }
.oa-steps li[data-s="active"] { background: var(--azure-soft); }
.oa-steps li[data-s="failed"] { background: var(--oa-bad-soft); }
.oa-dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 2px rgba(20, 36, 51, 0.25); margin-top: 2px; }
.oa-dot svg { width: 14px; height: 14px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: none; }
[data-s="active"] .oa-dot { box-shadow: inset 0 0 0 2px var(--azure); }
[data-s="active"] .oa-dot::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--azure); animation: oa-pulse 1.2s var(--ease-sine) infinite; }
[data-s="done"] .oa-dot { background: var(--oa-ok); box-shadow: none; }
[data-s="done"] .oa-dot svg { display: block; }
[data-s="failed"] .oa-dot { box-shadow: inset 0 0 0 2px var(--oa-bad); }
[data-s="failed"] .oa-dot::after { content: "!"; color: var(--oa-bad); font: 700 0.8125rem/1 var(--f-body); }
@keyframes oa-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.55); opacity: 0.55; } }
.oa-step-body { display: grid; gap: 4px; min-width: 0; }
.oa-step-name { font: 600 0.9375rem/1.4 var(--f-body); }
.oa-step-note { font-size: 0.8125rem; color: var(--ink-2); display: none; line-height: 1.4; }
[data-s="done"] .oa-step-note { display: block; }

.oa-request:not([data-js]) .oa-steps,
.oa-request:not([data-js]) .oa-meter,
.oa-request:not([data-js]) .oa-status { display: none; }
.oa-nojs { margin: 0; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
.oa-request[data-js] .oa-nojs { display: none; }
.oa-request:not([data-js]) .oa-intro { display: none; }
.oa-nojs-form { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.oa-request[data-js] .oa-nojs-form { display: none; }
.oa-request:not([data-js]) .oa-form > :not(.oa-card-title):not(.oa-nojs-form) { display: none; }

/* ---------- the result ---------- */
.oa-result { display: none; border-radius: var(--radius); background: linear-gradient(180deg, var(--tint), #fff 120px); padding: var(--s5); box-shadow: 0 0 0 1px var(--line); }
.oa-request[data-state="done"] .oa-result { display: block; animation: oa-rise 0.6s var(--ease-expo); }
@keyframes oa-rise { from { opacity: 0; } to { opacity: 1; } }
.oa-result-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.oa-result-head h5 { margin: 0; font: 700 1.125rem/1.3 var(--f-display); overflow-wrap: anywhere; }
.oa-tag { padding: 4px var(--s3); border-radius: 99px; background: var(--azure-text); color: #fff; font: 600 0.75rem/1.5 var(--f-body); }
.oa-looks { margin: 0 0 var(--s5); font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5; }
.oa-cols { display: grid; gap: var(--s5); }
.oa-cols h6 { margin: 0 0 var(--s3); font: 700 0.9375rem/1.3 var(--f-display); color: var(--azure-text); }
.oa-chips { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); grid-template-columns: repeat(var(--oa-cols, 3), 1fr); }
.oa-chips li { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 4px; min-height: 44px; padding: var(--s3) var(--s2); border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1.5px rgba(34, 120, 189, 0.28); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; min-width: 0; overflow-wrap: anywhere; }
.oa-chips svg { width: 26px; height: 26px; flex: none; fill: none; stroke: var(--azure); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.oa-chips .oa-via { font-size: 0.8125rem; font-weight: 400; color: var(--ink-3); }
.oa-more { margin: var(--s3) 0 0; font-size: 0.875rem; color: var(--ink-3); }
.oa-none { margin: 0; padding: var(--s3) var(--s4); border-radius: var(--radius); background: #fff; box-shadow: 0 0 0 1.5px rgba(34, 120, 189, 0.2); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.oa-problems { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.oa-problems li { display: flex; gap: var(--s3); font-size: 0.9375rem; line-height: 1.5; }
.oa-problems .oa-num { flex: none; color: var(--azure-text); font-weight: 600; font-size: 0.875rem; padding-top: 2px; }
.oa-lead { margin: 0 0 var(--s3); font-size: 0.9375rem; line-height: 1.5; color: var(--ink-2); }
.oa-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); font-size: 0.9375rem; }
.oa-ticks li { display: flex; gap: var(--s3); align-items: baseline; }
.oa-ticks li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sky); transform: translateY(-1px); }
.oa-fine { margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--ink-2); line-height: 1.5; }

.oa-notice { display: none; margin: 0; padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--oa-bad-soft); color: var(--oa-bad); font-size: 0.9375rem; line-height: 1.5; }
.oa-request[data-state="failed"] .oa-notice { display: block; }

.contact-floater.oa-hide, .back-to-top.oa-hide.visible { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(12px); }
.oa-tail { padding-top: 0; padding-bottom: clamp(72px, 8vw, 110px); }
.oa-tail .about-block { margin-top: 0; padding-top: 0; border-top: 0; }

/* desktop: the request section uses the same width as the sections above it (build #1952) */
@media (min-width: 900px) { .oa-request { max-width: none; margin-left: var(--sub-l); margin-right: var(--sub-r); padding-left: 0; padding-right: 0; } }

/* ---------- phones and narrow windows: the steps fold into a strip under the website field ---------- */
@media (max-width: 899px) {
  .oa-stage { grid-template-columns: 1fr; }
  .oa-strip { display: grid; }
  .oa-field--slows { display: grid; }
  .oa-form textarea { min-height: 112px; }
  .oa-panel-head, .oa-intro, .oa-meter, .oa-steps, .oa-nojs { display: none !important; }
  .oa-panel { padding: 0; background: none; box-shadow: none; }
  .oa-request[data-state="idle"] .oa-panel, .oa-request[data-state="running"] .oa-panel { display: none; }
  .oa-request[data-state="failed"] .oa-panel { display: none; }
  .oa-request:not([data-js]) .oa-strip { display: none; }
}
@media (max-width: 599px) {
  .oa-card { padding: var(--s5) var(--s4); }
  .oa-send { width: 100%; }
  .oa-chips { grid-template-columns: 1fr; }
  .oa-chips li { flex-direction: row; justify-content: flex-start; text-align: left; }
  .oa-chips svg { width: 20px; height: 20px; }
  .oa-steps { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .oa-request *, .oa-request *::before, .oa-request *::after, .oa-request input::placeholder, .oa-request textarea::placeholder { animation: none !important; transition: none !important; }
}

/* ---------- before a lookup: a faint outline of what the first look will contain (build #1952) ---------- */
.oa-example { display: none; }
.oa-request[data-js][data-state="idle"] .oa-example { display: grid; gap: var(--s3); padding: var(--s5); border-radius: var(--radius); background: var(--canvas); opacity: 0.7; }
.oa-example-label { font: 600 0.75rem/1.4 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.oa-example-h { margin-top: var(--s2); font: 700 0.9375rem/1.3 var(--f-display); color: var(--ink-3); }
.oa-example-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2); }
.oa-example-row i { height: 44px; border-radius: var(--radius); background: var(--tint); }
.oa-example-line { height: 10px; border-radius: 99px; background: var(--tint); }
.oa-example-line--short { width: 60%; }