/* KloneOS brand — onboarding surfaces (submit / status / approve).
   Ported from the approved kloneos_onboarding_mockup.html visual + klones-ui
   app/globals.css @theme token sheet. Dark-only. No Tailwind build here.

   TWO deliberate overrides of the mockup (per Phase-1 orders):
   - Fonts SELF-HOSTED via @font-face below (mockup used a Google @import). A
     customer page must never fall back to system-ui on egress/CSP block.
     Space Grotesk + Manrope ship as VARIABLE woff2 (one file per family, full
     weight axis) in /static/fonts/ — so one @font-face per family with a
     weight RANGE covers every declared weight.
   - The step-3 draft badge ships ENGINE-NEUTRAL ("Drafted for you"), never
     "Drafted by Claude" — Gemini is the engine until the Phase 4/5 swap. */

@font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;src:url("/static/fonts/space-grotesk.woff2") format("woff2")}
@font-face{font-family:"Manrope";font-style:normal;font-weight:400 600;font-display:swap;src:url("/static/fonts/manrope.woff2") format("woff2")}

:root{
  --bg:#0e0e0f; --s-lowest:#0a0a0b; --s-low:#141416; --s-high:#1b1c1f;
  --primary:#00f1fe; --primary-soft:#99f7ff; --secondary:#2cf67c; --secondary-dim:#00e770;
  --ink:#f4f6f5; --slate:#8a93a0; --slate-dim:#5b626c; --amber:#ffb83d; --fail:#ff8d7a;
  --font-d:'Space Grotesk',system-ui,sans-serif; --font-b:'Manrope',system-ui,sans-serif;
  --ghost:0 0 0 1px rgba(255,255,255,.06);
  --teal-ring:0 0 0 1px rgba(0,241,254,.5), 0 0 36px rgba(0,241,254,.13);
  --green-glow:0 0 0 1px rgba(44,246,124,.5), 0 0 50px rgba(44,246,124,.18);
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  background-image:radial-gradient(rgba(0,241,254,.045) 1px, transparent 1px);
  background-size:34px 34px;
  color:var(--ink); font-family:var(--font-b); min-height:100vh;
  padding:40px 20px; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:640px;margin:0 auto}

/* topbar / wordmark */
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-d);font-weight:700;font-size:16px;letter-spacing:.02em}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--primary);box-shadow:0 0 14px rgba(0,241,254,.6)}
.who{font-size:12.5px;color:var(--slate)}

/* head */
.head{margin-bottom:22px}
.head h1{font-family:var(--font-d);font-weight:600;font-size:24px;letter-spacing:.01em}
.head p{font-size:13px;color:var(--slate);margin-top:6px;max-width:46ch;line-height:1.5}

/* stepper (bars) */
.stepper{display:flex;gap:8px;margin-bottom:26px}
.stepper .seg{flex:1;display:flex;flex-direction:column;gap:8px;cursor:pointer}
.stepper .bar{height:3px;border-radius:3px;background:rgba(255,255,255,.07);transition:.25s}
.stepper .seg.active .bar{background:var(--primary);box-shadow:0 0 12px rgba(0,241,254,.4)}
.stepper .seg.done .bar{background:var(--secondary);box-shadow:0 0 12px rgba(44,246,124,.35)}
.stepper .lbl{display:flex;align-items:center;gap:7px;font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate-dim)}
.stepper .seg.active .lbl{color:var(--ink)}
.stepper .seg.done .lbl{color:var(--secondary)}
.stepper .num{font-family:var(--font-d);font-weight:600}

/* card + steps */
.card{background:var(--s-high);border-radius:16px;box-shadow:var(--ghost);padding:26px}
.step{display:none}
.step.show{display:block;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* fields + inputs */
.field{margin-bottom:18px}
.field label{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--slate);margin-bottom:8px;font-weight:600}
.field .hint{font-size:11.5px;color:var(--slate-dim);margin-top:6px;line-height:1.45}
.ta,input.ta,select.ta,textarea.ta{
  width:100%;background:var(--s-lowest);box-shadow:var(--ghost);border:none;border-radius:9px;color:var(--ink);
  font-family:var(--font-b);font-size:13px;padding:11px 13px;outline:none;transition:.2s;resize:vertical}
.ta::placeholder{color:var(--slate-dim)}
.ta:focus{box-shadow:var(--teal-ring)}
textarea.ta{min-height:96px;line-height:1.55}
select.ta{appearance:none;cursor:pointer}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.inline-status{font-size:11.5px;margin-top:6px;min-height:1.2em}
.inline-status.ok{color:var(--secondary)} .inline-status.bad{color:var(--fail)}

/* pill single-selects (gender / accent / authority) */
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pill{background:var(--s-lowest);box-shadow:var(--ghost);border-radius:7px;padding:9px 14px;font-size:12.5px;color:var(--slate);cursor:pointer;transition:.18s;font-weight:500;user-select:none}
.pill:hover{box-shadow:var(--teal-ring);color:var(--ink)}
.pill.sel{box-shadow:0 0 0 1px var(--primary),0 0 28px rgba(0,241,254,.16);color:var(--ink)}
.alt-code{font-size:11px;padding:4px 8px;color:var(--primary-soft);background:var(--s-lowest);box-shadow:var(--ghost);border:none;border-radius:6px;cursor:pointer;margin-right:4px}

/* face wells */
.faces{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:6px}
.well{aspect-ratio:4/5;background:var(--s-lowest);box-shadow:var(--ghost);border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;cursor:pointer;transition:.2s;position:relative;overflow:hidden;text-align:center;padding:8px}
.well:hover{box-shadow:var(--teal-ring)}
.well input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}
.well .plus{font-size:26px;color:var(--slate-dim);font-weight:300;line-height:1}
.well .wl{font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--slate);font-weight:600}
.well .sub{font-size:10.5px;color:var(--slate-dim)}
.well.filled{box-shadow:var(--green-glow)}
.well .ph{position:absolute;inset:0;display:none;align-items:flex-end;justify-content:center;padding:10px;background:linear-gradient(160deg,#1e2a26,#0e1512);background-size:cover;background-position:center}
.well.filled .ph{display:flex}
.well.filled .plus,.well.filled .wl,.well.filled .sub{opacity:0}
.well .chk{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;background:var(--secondary);color:#03110a;font-size:12px;align-items:center;justify-content:center;font-weight:700;display:none}
.well.filled .chk{display:flex}
.well .ph .pn{font-size:11px;color:var(--secondary);font-weight:600;letter-spacing:.05em;text-transform:uppercase;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.well .err{position:absolute;bottom:8px;left:8px;right:8px;font-size:9.5px;color:var(--fail);line-height:1.3}

/* draft badge — ENGINE-NEUTRAL copy */
.drafted{display:inline-flex;align-items:center;gap:8px;background:rgba(0,241,254,.07);box-shadow:0 0 0 1px rgba(0,241,254,.22);border-radius:6px;padding:6px 11px;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--primary-soft);font-weight:600;margin-bottom:12px}
.drafted .d{width:6px;height:6px;border-radius:50%;background:var(--primary);box-shadow:0 0 10px var(--primary)}

/* editable preview fields (inferred-marker machinery) */
.editable{min-height:5rem;white-space:pre-wrap}
.editable.locked{opacity:.6;cursor:not-allowed}
.inferred,.inferred-key,.ai-suggested{background:rgba(255,184,61,.16);color:var(--ink);padding:0 .2rem;border-radius:.2rem}
.editable.user-edited .inferred{background:transparent;padding:0}

/* rewrites table */
table{width:100%;border-collapse:collapse;margin-top:10px}
table th,table td{text-align:left;padding:8px 10px;font-size:12px;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.06)}
table th{color:var(--slate);font-weight:600;text-transform:uppercase;letter-spacing:.05em;font-size:10.5px}
table input[type=text]{width:100%;background:var(--s-lowest);box-shadow:var(--ghost);border:none;border-radius:7px;color:var(--ink);font-family:var(--font-b);font-size:12px;padding:8px 10px}

/* nav + buttons */
.nav{display:flex;align-items:center;justify-content:space-between;margin-top:24px;gap:12px}
.btn{font-family:var(--font-d);font-weight:600;font-size:14px;border:none;border-radius:8px;padding:13px 20px;cursor:pointer;transition:.18s}
.btn:disabled{opacity:.4;cursor:default}
.btn-primary{background:linear-gradient(135deg,var(--primary-soft),var(--primary));color:#03110a}
.btn-primary:hover:not(:disabled){box-shadow:0 0 30px rgba(0,241,254,.35)}
.btn-secondary{background:var(--s-high);box-shadow:var(--ghost);color:var(--ink)}
.btn-secondary:hover{box-shadow:var(--teal-ring)}
.btn-ghost{background:transparent;color:var(--primary-soft);padding:13px 6px}
.btn-ghost:hover{color:var(--primary)}

/* busy/working states (UX clarity pass) — CSS-only spinner, no new tokens.
   Placed after .btn:disabled so equal-specificity busy styling wins. */
@keyframes spin{to{transform:rotate(360deg)}}
.btn.busy{opacity:.75;pointer-events:none}
.btn.busy::after{content:"";display:inline-block;width:12px;height:12px;margin-left:9px;vertical-align:-2px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.status-line.working{color:var(--primary-soft);font-weight:700}

/* visible step-gate message (no silent dead Continue) */
.step-err{min-height:1.2em;margin-top:14px;font-size:12.5px;color:var(--amber);font-weight:600}
.step-err:empty{display:none}

/* status line (generate/submit) */
.status-line{color:var(--slate);font-size:12px;margin-top:10px;min-height:1.2em}
.status-line.error{color:var(--fail)}

/* success — mockup .done/.orb, with the real request data retained */
.done,#result.success-card{text-align:center;padding:14px 0}
.orb{width:64px;height:64px;border-radius:50%;margin:0 auto 18px;background:radial-gradient(circle at 40% 35%,#2cf67c,#0a3a26);box-shadow:var(--green-glow);display:flex;align-items:center;justify-content:center;font-size:30px;color:#03110a;font-weight:700}
.done h2,#result.success-card h2{font-family:var(--font-d);font-weight:600;font-size:20px;margin-bottom:8px}
.done p,#result.success-card p{font-size:13px;color:var(--slate);max-width:40ch;margin:4px auto;line-height:1.55}
#result.success-card a{color:var(--primary-soft);font-weight:600}
#result.success-card #submit_another_btn{margin-top:16px}
.micro{font-size:11px;color:var(--slate-dim);text-align:center;margin-top:18px;letter-spacing:.02em}

/* status pills (status.html) */
.kl-pill{display:inline-flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:5px;background:rgba(8,9,10,.6)}
.kl-pill .pdot{width:6px;height:6px;border-radius:50%}
.kl-pill--pending{color:var(--slate)} .kl-pill--pending .pdot{background:var(--slate-dim)}
.kl-pill--approved{color:var(--slate)} .kl-pill--approved .pdot{background:var(--amber)}
.kl-pill--live{color:#03110a;background:var(--secondary);font-weight:700}
.kl-pill--rejected{color:var(--fail)} .kl-pill--rejected .pdot{background:var(--fail)}

/* admin dialog (approve.html — light token pass) */
dialog{background:var(--s-high);color:var(--ink);border:none;border-radius:16px;box-shadow:0 0 0 1px rgba(255,255,255,.06),0 30px 80px rgba(0,0,0,.5);padding:24px;max-width:640px}
dialog::backdrop{background:rgba(4,5,6,.62)}
fieldset{background:var(--s-high);border:none;border-radius:14px;box-shadow:var(--ghost);padding:18px;margin-bottom:16px}
legend{font-family:var(--font-d);font-weight:600;color:var(--ink);padding:0 6px}