/* Task Split Sorter — scoped under .tss, the section's own class.
   Design tokens match the site's existing palette (see insights/hitl-widget.css):
   orange #FF7900, teal #07A3D1, ink #14181C, near-black card #000/#111. */
.tss, .tss * { box-sizing: border-box; }
.tss { background:#000; color:#fff; border-radius:14px; overflow:hidden; margin:2.5rem 0; padding:2rem 1.5rem 2.25rem; font-family:'Roboto',system-ui,-apple-system,'Segoe UI',Arial,sans-serif; }
.tss .tss-eyebrow { font-size:.68rem; font-weight:700; color:#07A3D1; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .6rem; }
.tss .tss-title { font-size:1.5rem !important; font-weight:800 !important; color:#fff !important; line-height:1.25 !important; margin:0 0 .8rem !important; padding:0 !important; border:none !important; }
.tss .tss-title em { color:#FF7900; font-style:normal; }
.tss .tss-intro { font-size:.92rem; color:rgba(255,255,255,.7); line-height:1.6; margin:0 0 1.6rem; max-width:64ch; }
.tss .tss-items { list-style:none; margin:0 0 1.5rem; padding:0; display:flex; flex-direction:column; gap:.8rem; }
.tss .tss-item { margin:0; }
.tss .tss-fieldset { border:1px solid rgba(255,255,255,.1); border-radius:10px; padding:1rem 1.1rem; margin:0; background:#0d0d0d; }
.tss .tss-legend { padding:0 0 .75rem; font-size:.92rem; font-weight:600; color:#fff; line-height:1.5; display:flex; align-items:baseline; gap:.6rem; }
.tss .tss-num { flex-shrink:0; width:22px; height:22px; border-radius:50%; background:rgba(7,163,209,.18); color:#07A3D1; font-size:.72rem; font-weight:800; display:inline-flex; align-items:center; justify-content:center; }
.tss .tss-toggle { display:flex; gap:.5rem; flex-wrap:wrap; }
.tss .tss-opt { flex:1 1 140px; min-height:44px; background:#111 !important; border:1.5px solid rgba(255,255,255,.14) !important; border-radius:8px !important; padding:.6rem .7rem !important; font-size:.8rem !important; font-weight:600 !important; color:rgba(255,255,255,.8) !important; cursor:pointer !important; text-align:center !important; box-shadow:none !important; }
.tss .tss-opt:hover { border-color:rgba(7,163,209,.6) !important; }
.tss .tss-opt:focus-visible { outline:3px solid #FF7900; outline-offset:2px; }
.tss .tss-opt[aria-pressed="true"][data-value="ai"] { border-color:#07A3D1 !important; background:rgba(7,163,209,.18) !important; color:#fff !important; }
.tss .tss-opt[aria-pressed="true"][data-value="both"] { border-color:#fff !important; background:rgba(255,255,255,.16) !important; color:#fff !important; }
.tss .tss-opt[aria-pressed="true"][data-value="human"] { border-color:#FF7900 !important; background:rgba(255,121,0,.16) !important; color:#fff !important; }
.tss .tss-result-wrap { min-height:64px; }
.tss .tss-progress { font-size:.78rem; color:rgba(255,255,255,.5); margin:0 0 1rem; }
.tss .tss-submit { min-height:44px; background:#FF7900 !important; color:#000 !important; border:none !important; border-radius:8px !important; padding:.75rem 1.6rem !important; font-size:.9rem !important; font-weight:700 !important; cursor:pointer !important; box-shadow:none !important; }
.tss .tss-submit:disabled { background:rgba(255,121,0,.3) !important; cursor:not-allowed !important; }
.tss .tss-submit:focus-visible { outline:3px solid #07A3D1; outline-offset:2px; }
.tss .tss-result { margin-top:1.2rem; background:#0d0d0d; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:1.3rem 1.4rem; }
.tss .tss-result[hidden] { display:none; }
.tss .tss-score-row { display:flex; align-items:baseline; gap:.9rem; margin-bottom:.7rem; flex-wrap:wrap; }
.tss .tss-score-num { font-size:2.2rem; font-weight:800; letter-spacing:-1px; }
.tss .tss-score-band { font-size:1rem; font-weight:700; }
.tss .tss-result-copy { font-size:.9rem; color:rgba(255,255,255,.75); line-height:1.65; margin:0 0 .9rem; }
.tss .tss-result-copy strong { color:#FF7900; }
.tss .tss-split-bars { margin:0 0 1rem; display:flex; flex-direction:column; gap:.55rem; }
.tss .tss-split-row { display:grid; grid-template-columns:84px 1fr 40px; align-items:center; gap:.6rem; font-size:.76rem; color:rgba(255,255,255,.65); }
.tss .tss-split-track { height:8px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.tss .tss-split-fill { height:100%; border-radius:4px; }
.tss .tss-benchmark { font-size:.8rem; color:rgba(255,255,255,.5); line-height:1.6; margin:0 0 1rem; padding-top:.6rem; border-top:1px solid rgba(255,255,255,.08); }
.tss .tss-actions { display:flex; gap:.8rem; flex-wrap:wrap; align-items:center; }
.tss .tss-retry { min-height:44px; background:transparent !important; border:1.5px solid rgba(255,255,255,.18) !important; border-radius:8px !important; padding:.6rem 1.2rem !important; font-size:.82rem !important; font-weight:600 !important; color:rgba(255,255,255,.75) !important; cursor:pointer !important; box-shadow:none !important; }
.tss .tss-retry:hover { border-color:#FF7900 !important; color:#FF7900 !important; }
.tss .tss-retry:focus-visible { outline:3px solid #07A3D1; outline-offset:2px; }

/* Lead capture (Phase 6) */
.tss .tss-lead { margin-top:1.2rem; padding-top:1.1rem; border-top:1px solid rgba(255,255,255,.1); }
.tss .tss-lead-label { display:block; font-size:.8rem; color:rgba(255,255,255,.6); margin-bottom:.6rem; line-height:1.5; }
.tss .tss-lead-row { display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:.6rem; }
.tss .tss-lead-field { display:flex; flex-direction:column; gap:.3rem; flex:1 1 200px; }
.tss .tss-lead-field label { font-size:.72rem; color:rgba(255,255,255,.55); }
.tss .tss-lead input, .tss .tss-lead select { min-height:44px; background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.16) !important; border-radius:7px !important; padding:.55rem .8rem !important; font-size:.85rem !important; color:#fff !important; box-shadow:none !important; }
.tss .tss-lead input:focus-visible, .tss .tss-lead select:focus-visible { outline:3px solid #07A3D1; outline-offset:1px; }
.tss .tss-consent { display:flex; align-items:flex-start; gap:.5rem; font-size:.76rem; color:rgba(255,255,255,.6); line-height:1.5; margin:.5rem 0 .8rem; }
.tss .tss-consent input { min-width:18px; min-height:18px; margin-top:2px; }
.tss .tss-consent a { color:#07A3D1; }
.tss .tss-lead-submit { min-height:44px; background:#07A3D1 !important; color:#000 !important; border:none !important; border-radius:8px !important; padding:.65rem 1.3rem !important; font-size:.85rem !important; font-weight:700 !important; cursor:pointer !important; box-shadow:none !important; }
.tss .tss-lead-submit:disabled { opacity:.5 !important; cursor:not-allowed !important; }
.tss .tss-lead-msg { font-size:.8rem; margin-top:.6rem; min-height:1.2em; }
.tss .tss-lead-msg[data-state="error"] { color:#FCA5A5; }
.tss .tss-lead-msg[data-state="success"] { color:#4ADE80; }
.tss .hp-field { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.tss .tss-noscript { background:#0d0d0d; border:1px solid rgba(255,255,255,.1); border-radius:12px; padding:1.2rem 1.4rem; font-size:.88rem; color:rgba(255,255,255,.75); line-height:1.65; }

@media (prefers-reduced-motion: no-preference) {
  .tss .tss-opt, .tss .tss-submit, .tss .tss-retry, .tss .tss-lead-submit, .tss .tss-split-fill { transition: border-color .15s, background-color .15s, color .15s, width .3s; }
}
@media (min-width:640px) {
  .tss { padding:2.6rem 3rem; }
  .tss .tss-title { font-size:1.9rem !important; }
  .tss .tss-intro { font-size:1rem; }
  .tss .tss-opt { font-size:.85rem !important; }
}