/* URBAN CGI — candidate funnel shared styles */
:root{
  --bg:#0c0e12; --bg2:#14171e; --bg3:#1b1f28;
  --line:#2a3038; --line2:#3a424e;
  --ink:#eef1f5; --ink2:#a8b1bd; --ink3:#ffffff;
  --accent:#ff5a1f; --accent2:#ffb03a;
  --ok:#3ecf8e; --warn:#ffb03a; --bad:#ff4d4d;
  --r:6px; --max:860px;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',monospace;
  --sans:'Inter','Helvetica Neue',Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--max); margin:0 auto; padding:32px 24px 96px}
.wrap.wide{max-width:1500px}

/* header */
header.top{border-bottom:1px solid var(--line); background:rgba(12,14,18,.94);
  position:sticky; top:0; z-index:50; backdrop-filter:blur(8px)}
header.top .inner{max-width:var(--max); margin:0 auto; padding:16px 24px;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap}
header.top.wide .inner{max-width:1500px}
.logo{font-weight:800; letter-spacing:.14em; font-size:13px; text-transform:uppercase}
.logo b{color:var(--accent)}
.tag{color:var(--ink3); font-size:12px; letter-spacing:.06em; text-transform:uppercase}
.spacer{flex:1}

/* progress rail */
.rail{display:flex; gap:6px; align-items:center; font-size:11px; color:var(--ink3);
  text-transform:uppercase; letter-spacing:.08em}
.rail span{padding:3px 9px; border:1px solid var(--line); border-radius:100px; white-space:nowrap}
.rail span.on{border-color:var(--accent); color:var(--accent)}
.rail span.done{border-color:var(--ok); color:var(--ok)}

/* type */
h1{font-size:34px; line-height:1.15; margin:28px 0 12px; font-weight:800; letter-spacing:-.02em}
h2{font-size:20px; margin:44px 0 6px; font-weight:700; letter-spacing:-.01em}
h3{font-size:15px; margin:26px 0 6px; font-weight:700; text-transform:uppercase; letter-spacing:.09em; color:var(--accent2)}
p{margin:0 0 14px; color:var(--ink2); max-width:66ch}
p.lede{font-size:18px; color:var(--ink)}
small,.small{font-size:13px; color:var(--ink3)}
a{color:var(--accent2)}
hr{border:0; border-top:1px solid var(--line); margin:36px 0}
.kicker{font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--accent); font-weight:700}

/* cards */
.card{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; margin:16px 0}
.card.tight{padding:16px}
.card.flag{border-left:3px solid var(--accent)}

/* form */
label.f{display:block; font-size:13px; font-weight:600; margin:16px 0 5px; color:var(--ink)}
label.f .req{color:var(--accent)}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=number],select,textarea{
  width:100%; background:var(--bg3); color:var(--ink); border:1px solid var(--line2);
  border-radius:var(--r); padding:11px 12px; font-family:inherit; font-size:15px}
textarea{resize:vertical; min-height:96px; line-height:1.5}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent)}
input.err,textarea.err,select.err{border-color:var(--bad)}
.hint{font-size:12px; color:var(--ink3); margin-top:4px}
.count{font-size:11px; color:var(--ink3); text-align:right; font-family:var(--mono)}
.count.over{color:var(--bad)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px}
@media(max-width:640px){.grid2{grid-template-columns:1fr}}

/* buttons */
button,.btn{font-family:inherit; font-size:14px; font-weight:700; cursor:pointer;
  border-radius:var(--r); padding:12px 22px; border:1px solid var(--line2);
  background:var(--bg3); color:var(--ink); transition:.15s}
button:hover,.btn:hover{border-color:var(--ink3)}
button.primary{background:var(--accent); border-color:var(--accent); color:#fff}
button.primary:hover{background:#ff6f3d}
button.ghost{background:transparent}
button:disabled{opacity:.4; cursor:not-allowed}
.actions{display:flex; gap:12px; align-items:center; margin-top:32px; flex-wrap:wrap}

/* choice tiles */
.tiles{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:20px 0}
@media(max-width:640px){.tiles{grid-template-columns:1fr}}
.tile{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r);
  padding:20px; cursor:pointer; transition:.15s}
.tile:hover{border-color:var(--ink3)}
.tile.sel{border-color:var(--accent); background:#1c1512}
.tile h4{margin:0 0 6px; font-size:16px}
.tile p{margin:0; font-size:13px}
.tile .tick{float:right; color:var(--accent); font-weight:800; opacity:0}
.tile.sel .tick{opacity:1}

/* 0-5 rating pills */
.skillrow{display:flex; align-items:center; gap:14px; padding:9px 0;
  border-bottom:1px solid var(--line)}
.skillrow:last-child{border-bottom:0}
.skillrow .nm{flex:1; font-size:14px; min-width:0}
.pills{display:flex; gap:4px; flex:0 0 auto}
.pill{width:34px; height:32px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line2); border-radius:4px; font-size:13px; font-weight:700;
  cursor:pointer; color:var(--ink3); background:var(--bg3); user-select:none}
.pill:hover{border-color:var(--ink3); color:var(--ink)}
.pill.on{background:var(--accent); border-color:var(--accent); color:#fff}
.pill.on.lo{background:var(--ink3); border-color:var(--ink3)}
.ev{margin:2px 0 12px 0; padding:10px 12px; background:#1c1512;
  border-left:2px solid var(--accent2); border-radius:0 var(--r) var(--r) 0}
.ev label{font-size:12px; color:var(--accent2); font-weight:600; display:block; margin-bottom:5px}
@media(max-width:640px){
  .skillrow{flex-direction:column; align-items:stretch; gap:7px}
  .pill{flex:1}
}

/* sliders */
.sl{padding:14px 0; border-bottom:1px solid var(--line)}
.sl .head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.sl .lb{font-size:15px; font-weight:600}
.sl .val{font-family:var(--mono); font-size:20px; font-weight:700; color:var(--ink3);
  min-width:24px; text-align:right}
.sl .val.set{color:var(--accent)}
.sl .hint{margin:2px 0 8px}
input[type=range]{width:100%; -webkit-appearance:none; height:4px; border-radius:4px;
  background:var(--line2); margin:8px 0 2px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none; width:20px; height:20px;
  border-radius:50%; background:var(--accent); cursor:pointer; border:2px solid var(--bg)}
input[type=range]::-moz-range-thumb{width:20px; height:20px; border-radius:50%;
  background:var(--accent); cursor:pointer; border:2px solid var(--bg)}
.budget{position:sticky; top:70px; z-index:40; background:var(--bg2);
  border:1px solid var(--line); border-radius:var(--r); padding:12px 16px; margin:18px 0;
  display:flex; gap:22px; flex-wrap:wrap; font-size:13px}
.budget b{font-family:var(--mono); font-size:15px}
.budget .bad{color:var(--bad)}
.budget .ok{color:var(--ok)}

/* video */
.stage{background:#000; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; position:relative; aspect-ratio:16/9}
.stage video{width:100%; height:100%; object-fit:cover; display:block}
.stage .ovl{position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:32px;
  background:rgba(0,0,0,.72)}
.stage .ovl .q{font-size:22px; font-weight:700; max-width:24ch; line-height:1.3; margin-bottom:18px}
.stage .ovl .cd{font-family:var(--mono); font-size:60px; font-weight:800; color:var(--accent2)}
.stage .ovl .lbl{font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--ink3)}
.rec{position:absolute; top:14px; left:14px; display:flex; align-items:center; gap:8px;
  background:rgba(0,0,0,.65); padding:6px 12px; border-radius:100px; font-size:12px;
  font-weight:700; letter-spacing:.08em}
.rec i{width:9px; height:9px; border-radius:50%; background:var(--bad);
  animation:bl 1s infinite; display:block}
@keyframes bl{50%{opacity:.2}}
.qbar{position:absolute; bottom:0; left:0; right:0; background:rgba(0,0,0,.78); padding:14px 18px}
.qbar .t{font-size:15px; font-weight:600}
.bar{height:3px; background:var(--line2); border-radius:3px; overflow:hidden; margin-top:9px}
.bar i{display:block; height:100%; background:var(--accent); width:0}

/* misc */
.pillset{display:flex; gap:8px; flex-wrap:wrap}
.chip{font-size:12px; padding:5px 11px; border:1px solid var(--line2); border-radius:100px;
  cursor:pointer; user-select:none; color:var(--ink2)}
.chip.on{border-color:var(--accent); background:#1c1512; color:var(--accent)}
.msg{padding:12px 14px; border-radius:var(--r); font-size:14px; margin:14px 0}
.msg.bad{background:#2a1414; border:1px solid #5a2020; color:#ffb3b3}
.msg.ok{background:#0f2419; border:1px solid #1f5138; color:#9be8c4}
.msg.warn{background:#2a2312; border:1px solid #574718; color:#ffdca0}
.hide{display:none !important}
table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:left; padding:9px 10px; border-bottom:1px solid var(--line)}
th{font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3);
  position:sticky; top:0; background:var(--bg2); z-index:5}
tbody tr:hover{background:var(--bg2)}
td.n{font-family:var(--mono); text-align:center}
.hm{display:inline-block; width:26px; text-align:center; border-radius:3px; font-family:var(--mono);
  font-size:12px; font-weight:700; padding:2px 0}
footer.bot{border-top:1px solid var(--line); margin-top:64px; padding:26px 0;
  color:var(--ink3); font-size:12px}