/* PitchIQ control UI. Tokens lifted from the client gate
   (~/.claude/skills/host-subdomain/app/templates/login.html) so the
   operator tool and the client-facing gate read as one product family.
   Mobile-first: the operator's most stressful screen (a gate prompt) is
   opened from a phone, away from a desk. */
:root {
  --bg: #0E0C09; --surface: #16130E; --surface-2: #1E1912;
  --border: rgba(244,240,232,.08); --border-strong: rgba(244,240,232,.16);
  --text: #F4F0E8; --text-2: #B3AC9E; --text-3: #847D6F;
  --accent: #4CAF94; --accent-soft: rgba(76,175,148,.15); --on-accent: #06140F;
  --bad: #E66767; --bad-soft: rgba(230,103,103,.12);
  --warn: #E8A13A; --warn-soft: rgba(232,161,58,.14);
  --ui: 'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --r-s: 8px; --r-m: 12px; --r-l: 20px;
  --shadow: 0 2px 8px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.4);
  --ease: cubic-bezier(0.16,1,0.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--ui);
  -webkit-font-smoothing:antialiased; line-height:1.5;
  padding-bottom:48px;
}
a{color:var(--accent)}
.wrap{max-width:640px; margin:0 auto; padding:20px 16px 40px}

header.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; border-bottom:1px solid var(--border);
  position:sticky; top:0; background:var(--bg); z-index:10;
}
.brand{display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--text-2)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent); box-shadow:0 0 10px var(--accent)}
.topbar nav a{font-size:13px; color:var(--text-2); text-decoration:none; margin-left:16px}
.topbar nav a:hover{color:var(--text)}

h1{font-size:22px; font-weight:700; margin-bottom:4px}
h2{font-size:16px; font-weight:700; margin:24px 0 10px}
.subtitle{color:var(--text-2); font-size:14px; margin-bottom:24px}

.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--r-l); padding:20px; margin-bottom:16px;
}

label{display:block; font-size:12px; font-weight:600; letter-spacing:.03em; color:var(--text-2); margin-bottom:6px}
.field{margin-bottom:16px}
.hint{font-size:12px; color:var(--text-3); margin-top:6px}
input[type=text],input[type=url],input[type=password],input[type=number],select{
  width:100%; font-family:var(--ui); font-size:15px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:var(--r-s); padding:12px 14px;
}
input:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; cursor:pointer; font-family:var(--ui); font-size:15px; font-weight:600;
  color:var(--on-accent); background:var(--accent); border:none; border-radius:var(--r-s);
  padding:13px; transition:opacity 150ms var(--ease);
}
.btn:hover{opacity:.9}
.btn:disabled{opacity:.4; cursor:not-allowed}
.btn.secondary{background:var(--surface-2); color:var(--text); border:1px solid var(--border-strong)}
.btn.danger{background:var(--bad); color:#2b0d0d}

.toggle-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid var(--border);
}
.toggle-row:last-child{border-bottom:none}
.toggle-row .label{font-size:14px; font-weight:600}
.toggle-row .desc{font-size:12px; color:var(--text-3); margin-top:2px}
.switch{position:relative; width:44px; height:26px; flex:none}
.switch input{opacity:0; width:0; height:0}
.switch .slider{
  position:absolute; inset:0; background:var(--surface-2); border:1px solid var(--border-strong);
  border-radius:999px; cursor:pointer; transition:background 150ms var(--ease);
}
.switch .slider::before{
  content:''; position:absolute; width:18px; height:18px; left:3px; top:2px;
  background:var(--text-2); border-radius:50%; transition:transform 150ms var(--ease), background 150ms var(--ease);
}
.switch input:checked + .slider{background:var(--accent-soft); border-color:var(--accent)}
.switch input:checked + .slider::before{transform:translateX(18px); background:var(--accent)}

.badge{display:inline-block; font-size:11px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:999px}
.badge.measured{background:var(--accent-soft); color:var(--accent)}
.badge.inferred{background:var(--warn-soft); color:var(--warn)}
.badge.disabled{background:var(--border); color:var(--text-3)}
.badge.stale{background:var(--bad-soft); color:var(--bad)}
.badge.done{background:var(--accent-soft); color:var(--accent)}
.badge.running{background:var(--warn-soft); color:var(--warn)}
.badge.blocked{background:var(--bad-soft); color:var(--bad)}
.badge.failed{background:var(--bad-soft); color:var(--bad)}

.error{background:var(--bad-soft); border:1px solid rgba(230,103,103,.3); color:var(--bad);
  font-size:13px; font-weight:500; border-radius:var(--r-s); padding:10px 12px; margin-bottom:16px}
.notice{background:var(--accent-soft); border:1px solid rgba(76,175,148,.28); color:var(--accent);
  font-size:13px; font-weight:500; border-radius:var(--r-s); padding:10px 12px; margin-bottom:16px}
.warn-box{background:var(--warn-soft); border:1px solid rgba(232,161,58,.3); color:var(--warn);
  font-size:13px; border-radius:var(--r-s); padding:10px 12px; margin-bottom:16px}

table.stages{width:100%; border-collapse:collapse; font-size:14px}
table.stages th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--text-3); padding:6px 8px; border-bottom:1px solid var(--border)}
table.stages td{padding:8px; border-bottom:1px solid var(--border)}

.spend-bar{height:8px; border-radius:999px; background:var(--surface-2); overflow:hidden; margin:6px 0}
.spend-bar .fill{height:100%; background:var(--accent)}
.spend-bar .fill.over{background:var(--bad)}

.run-list-item{display:flex; align-items:center; justify-content:space-between; padding:14px 0;
  border-bottom:1px solid var(--border); text-decoration:none; color:var(--text)}
.run-list-item:last-child{border-bottom:none}
.run-list-item .name{font-weight:600}
.run-list-item .meta{font-size:12px; color:var(--text-3)}

.gate-options{display:flex; flex-direction:column; gap:8px; margin-top:12px}

@media (min-width: 640px){
  .row2{display:flex; gap:16px}
  .row2 > .field{flex:1}
}