/* Comquat for Recruiters. Tokens from the Comquat Brand design system.
   Recruiters' feature colour is ink, with kumquat accents. */
:root{
  --kumquat:#FF8A1F;--kumquat-deep:#E2650B;--kumquat-text:#B44E00;
  --leaf:#1F6B45;--leaf-light:#3E9A5F;--ink:#17191C;--peel:#FFF3E2;--paper:#FFFFFF;--muted:#5B5F66;--pith:#E9DCC8;
  --warn:#FFF0C2;--danger:#A12A1C;
  --display:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;--sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --r-sm:8px;--r-md:16px;--r-pill:999px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--peel);color:var(--ink);font:16px/1.55 var(--sans)}
a{color:var(--kumquat-text)}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.08;margin:0 0 10px}
h1{font-size:clamp(28px,5vw,40px)}h2{font-size:24px}h3{font-size:18px;font-family:var(--sans);font-weight:700;letter-spacing:0}
p{margin:0 0 12px}
.muted{color:var(--muted)}.small{font-size:14px}
:focus-visible{outline:3px solid var(--kumquat);outline-offset:2px}

/* header */
.top{position:sticky;top:0;z-index:20;background:var(--ink);color:var(--peel)}
.top .in{max-width:1080px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.chip{background:var(--peel);border-radius:var(--r-pill);padding:6px 14px 4px;display:inline-flex}
.chip img{height:22px;display:block}
.tag{font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;background:var(--kumquat);color:var(--ink);border-radius:var(--r-pill);padding:6px 10px}
.top nav{margin-left:auto;display:flex;gap:4px;flex-wrap:wrap}
.top nav a,.top nav button{color:var(--peel);text-decoration:none;font:500 15px var(--sans);background:none;border:0;padding:8px 10px;border-radius:var(--r-sm);cursor:pointer}
.top nav a:hover,.top nav button:hover,.top nav a.on{background:#2b2e33}
@media(max-width:640px){.top .in{flex-wrap:wrap;gap:6px 10px;padding:8px 12px}.tag{font-size:11px;padding:5px 8px}
  .top nav{margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;gap:2px}.top nav a,.top nav button{font-size:14px;padding:6px 8px;white-space:nowrap}
  main{padding:18px 12px 80px}.card{padding:16px}}

main{max-width:1080px;margin:0 auto;padding:24px 16px 80px}
.narrow{max-width:560px;margin:0 auto}

/* cards and layout */
.card{background:var(--paper);border:1px solid var(--pith);border-radius:var(--r-md);padding:20px;margin:0 0 16px}
.card.tint{background:var(--peel)}
.row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}

/* forms */
label{display:block;font-weight:700;font-size:14px;margin:12px 0 6px}
label .opt{font-weight:400;color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=number],select,textarea{
  width:100%;font:16px var(--sans);color:var(--ink);background:var(--paper);border:1px solid var(--pith);border-radius:var(--r-sm);padding:11px 12px}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:3px solid var(--leaf-light);outline-offset:1px;border-color:var(--leaf)}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:15px;margin:14px 0}
.check input{width:20px;height:20px;margin-top:2px;flex:none;accent-color:var(--ink)}
.hint{font-size:14px;color:var(--muted);margin:6px 0 0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px var(--sans);border:2px solid var(--ink);background:var(--ink);color:var(--peel);
  border-radius:var(--r-pill);padding:11px 20px;cursor:pointer;text-decoration:none;min-height:46px}
.btn:hover{background:#2b2e33}
.btn.k{background:var(--kumquat);border-color:var(--kumquat);color:var(--ink)}.btn.k:hover{background:var(--kumquat-deep);border-color:var(--kumquat-deep)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--pith)}.btn.ghost:hover{border-color:var(--kumquat)}
.btn.danger{background:transparent;color:var(--danger);border-color:#e7c3bd}
.btn.sm{font-size:14px;padding:6px 12px;min-height:36px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.linkbtn{background:none;border:0;color:var(--kumquat-text);font:inherit;text-decoration:underline;cursor:pointer;padding:0}

/* lists */
.list{list-style:none;margin:0;padding:0}
.list li{border-top:1px solid var(--pith)}
.list li:first-child{border-top:0}
.list a.item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 4px;text-decoration:none;color:inherit}
.list a.item:hover{background:var(--peel)}
.badge{display:inline-block;font:700 12px/1 var(--sans);border-radius:var(--r-pill);padding:6px 10px;white-space:nowrap;background:var(--pith);color:var(--ink)}
.badge.ok{background:var(--leaf);color:var(--peel)}.badge.k{background:var(--kumquat);color:var(--ink)}.badge.warn{background:var(--warn)}.badge.bad{background:#f6d5d0;color:var(--danger)}

/* stepper */
.steps{display:flex;gap:6px;margin:0 0 18px;flex-wrap:wrap;padding:0;list-style:none}
.steps li{flex:1;min-width:120px;background:var(--paper);border:1px solid var(--pith);border-radius:var(--r-pill);padding:8px 12px;font-size:14px;font-weight:700;color:var(--muted);text-align:center}
.steps li.on{background:var(--ink);color:var(--peel);border-color:var(--ink)}
.steps li.done{background:var(--peel);color:var(--leaf)}

/* transcript editor */
.seg{display:grid;grid-template-columns:72px 130px 1fr;gap:8px;align-items:start;padding:8px 0;border-top:1px solid var(--pith)}
.seg:first-child{border-top:0}
.seg .ts{font:600 14px var(--sans);color:var(--kumquat-text);background:none;border:0;padding:10px 0;text-align:left;cursor:pointer}
.seg select,.seg textarea{font-size:15px;padding:8px}
.seg textarea{min-height:60px}
@media(max-width:640px){.seg{grid-template-columns:64px 1fr}.seg textarea{grid-column:1 / -1}}

/* profile editor */
.sec{border-top:1px solid var(--pith);padding:16px 0}
.sec:first-child{border-top:0;padding-top:0}
.sec h3{margin-bottom:8px}
.rows .r{display:grid;gap:8px;grid-template-columns:repeat(var(--cols,2),1fr) 40px;margin:0 0 8px;align-items:start}
.rows textarea{min-height:64px;font-size:15px}
.rows .x{border:0;background:var(--peel);border-radius:var(--r-sm);height:40px;cursor:pointer;font-size:18px}
@media(max-width:640px){.rows .r{grid-template-columns:1fr 40px}.rows .r>*:not(.x){grid-column:1}}
.missing{background:var(--warn)!important}
.flag{background:var(--warn);border-radius:var(--r-md);padding:12px 14px;margin:0 0 14px}
.flag ul{margin:6px 0 0;padding-left:20px}

/* media */
video,audio{width:100%;border-radius:var(--r-md);background:#000;display:block}
.drop{border:2px dashed var(--pith);border-radius:var(--r-md);padding:24px;text-align:center;background:var(--paper)}
.drop.over{border-color:var(--kumquat);background:var(--peel)}
.progress{height:10px;background:var(--pith);border-radius:var(--r-pill);overflow:hidden;margin:10px 0}
.progress i{display:block;height:100%;width:0;background:var(--kumquat);transition:width .2s}
.rec{display:inline-block;width:10px;height:10px;border-radius:50%;background:#e33;margin-right:6px;animation:blink 1s infinite}
@keyframes blink{50%{opacity:.2}}
.clip{display:grid;grid-template-columns:90px 90px 1fr 40px;gap:8px;margin:0 0 8px}
@media(max-width:640px){.clip{grid-template-columns:1fr 1fr 40px}.clip input[data-k=label]{grid-column:1 / 3}}

/* misc */
.spinner{width:22px;height:22px;border:3px solid var(--pith);border-top-color:var(--kumquat);border-radius:50%;animation:spin .8s linear infinite;display:inline-block;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{text-align:center;padding:40px 16px}
.toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);background:var(--ink);color:var(--peel);padding:12px 18px;border-radius:var(--r-pill);font-weight:700;z-index:50;max-width:90vw;box-shadow:0 8px 24px rgba(0,0,0,.2)}
.toast.err{background:var(--danger);color:#fff}
.price{border:2px solid var(--pith);border-radius:var(--r-md);padding:18px;background:var(--paper)}
.price.on{border-color:var(--ink)}
.price b.big{font:800 32px var(--display);display:block;margin:4px 0}
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:760px){.prices{grid-template-columns:1fr}}
.swatch{width:46px;height:46px;border-radius:var(--r-sm);border:1px solid var(--pith);padding:0;cursor:pointer}
.preview-bar{border-radius:var(--r-md);padding:16px;margin-top:12px}
table.t{width:100%;border-collapse:collapse;font-size:14px}table.t th,table.t td{text-align:left;padding:8px;border-top:1px solid var(--pith);vertical-align:top}
.kv{display:grid;grid-template-columns:160px 1fr;gap:6px 12px;font-size:15px}
.kv dt{color:var(--muted)}.kv dd{margin:0}
@media(max-width:560px){.kv{grid-template-columns:1fr}.kv dd{margin-bottom:8px}}
.hide{display:none!important}
.stickybar{position:sticky;bottom:0;background:#fff;padding:10px 0;border-top:1px solid var(--pith);box-shadow:0 -8px 16px -12px rgba(0,0,0,.25);z-index:5}