/* Kings Security client request portal */
html{-webkit-text-size-adjust:100%}
body{margin:0}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%; height:auto}
[hidden]{display:none!important}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
#turnstile:empty{display:none}
/* Layout: dark brand band with tabs, then a working form (left) beside a sticky live request slip (right); stacks on phones. */
:root{
  --bg:#F3F5F8; --surface:#FFFFFF; --sunk:#EBEEF3; --ink:#0B1320; --muted:#5B6575; --line:#D9DEE6; --line-strong:#B9C1CD;
  --gold:#F2B544; --gold-ink:#835600; --gold-soft:#FDF3DC; --on-gold:#0B1320;
  --band:#0B1320; --band-ink:#F3F5F8; --band-muted:#9AA6B6;
  --ok:#1C7347; --ok-soft:#E1F2E8; --warn:#8F5400; --warn-soft:#FFF0D2; --bad:#B3261E; --bad-soft:#FBE7E5; --info:#1F56AD; --info-soft:#E3ECFA;
  --focus:#1F56AD;
  --f-display:"Montserrat", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body:"Public Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r:8px;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0C1117; --surface:#141B24; --sunk:#0F151C; --ink:#E9EDF2; --muted:#98A3B3; --line:#263140; --line-strong:#3A4757;
  --gold:#FFC962; --gold-ink:#FFC962; --gold-soft:#2A2313; --on-gold:#0B1320;
  --band:#070B10; --band-ink:#E9EDF2; --band-muted:#8D99AA;
  --ok:#5CC892; --ok-soft:#12291E; --warn:#F0B45A; --warn-soft:#2B2112; --bad:#F08A80; --bad-soft:#2E1614; --info:#86AEF2; --info-soft:#142035;
  --focus:#86AEF2; color-scheme:dark }}
:root[data-theme="dark"]{
  --bg:#0C1117; --surface:#141B24; --sunk:#0F151C; --ink:#E9EDF2; --muted:#98A3B3; --line:#263140; --line-strong:#3A4757;
  --gold:#FFC962; --gold-ink:#FFC962; --gold-soft:#2A2313; --on-gold:#0B1320;
  --band:#070B10; --band-ink:#E9EDF2; --band-muted:#8D99AA;
  --ok:#5CC892; --ok-soft:#12291E; --warn:#F0B45A; --warn-soft:#2B2112; --bad:#F08A80; --bad-soft:#2E1614; --info:#86AEF2; --info-soft:#142035;
  --focus:#86AEF2; color-scheme:dark }

*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font:15px/1.5 var(--f-body); -webkit-font-smoothing:antialiased}
body::before{content:""; position:fixed; inset:0 0 auto; height:env(safe-area-inset-top,0px); z-index:10; background:var(--band)}
.wrap{max-width:1180px; margin:0 auto; padding-left:max(16px, env(safe-area-inset-left,0px)); padding-right:max(16px, env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0; letter-spacing:-.01em}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.mono{font-family:var(--f-mono); font-variant-numeric:tabular-nums}

/* Band */
.band{background:var(--band); color:var(--band-ink); position:sticky; top:env(safe-area-inset-top,0px); z-index:5; border-bottom:3px solid var(--gold)}
.band .wrap{display:flex; align-items:center; gap:20px; flex-wrap:wrap; padding-block:12px}
.logo{height:46px; width:auto; display:block}
.band-title{display:flex; flex-direction:column; gap:2px; padding-left:18px; border-left:1px solid #2A3646; min-width:0}
.band-title b{font-family:var(--f-display); font-weight:700; font-size:15px; letter-spacing:.02em}
.band-title span{font-size:12.5px; color:var(--band-muted)}
.dispatch{margin-left:auto; text-align:right; font-size:12px; color:var(--band-muted); line-height:1.3}
.dispatch b{display:block; font-family:var(--f-mono); color:var(--gold); font-size:16px; user-select:all}
.tabs{display:flex; gap:4px; width:100%; margin-top:6px; overflow-x:auto}
.tab{appearance:none; background:none; border:0; color:var(--band-muted); padding:10px 14px 11px; font-weight:600; font-size:14px; cursor:pointer; border-radius:6px 6px 0 0; white-space:nowrap; display:flex; align-items:center; gap:8px}
.tab:hover{color:var(--band-ink)}
.tab[aria-selected="true"]{background:var(--bg); color:var(--ink)}
.count{font-family:var(--f-mono); font-size:11px; background:var(--gold); color:var(--on-gold); border-radius:10px; padding:1px 7px}

/* Notice */
.notice{border-radius:var(--r); padding:12px 14px; font-size:14px; display:flex; gap:10px; align-items:flex-start}
.notice.info{background:var(--info-soft); color:var(--ink); border:1px solid color-mix(in srgb, var(--info) 30%, transparent)}
.notice.warn{background:var(--warn-soft); border:1px solid color-mix(in srgb, var(--warn) 35%, transparent)}
.notice.bad{background:var(--bad-soft); border:1px solid color-mix(in srgb, var(--bad) 35%, transparent)}
.notice b{font-weight:700}

/* Layout */
main{padding-block:28px 64px}
.view[hidden]{display:none}
.grid{display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:28px; align-items:start}
@media (max-width:980px){ .grid{grid-template-columns:minmax(0,1fr)} }
.intro{display:flex; flex-direction:column; gap:6px; margin-bottom:22px; max-width:65ch}
.intro h1{font-size:clamp(24px,3.2vw,32px); font-weight:800}
.intro p{margin:0; color:var(--muted)}

.step{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:22px; display:flex; flex-direction:column; gap:18px}
.steps{display:flex; flex-direction:column; gap:18px; min-width:0}
.step-h{display:flex; gap:12px; align-items:baseline}
.step-n{font-family:var(--f-mono); font-size:12px; color:var(--gold-ink); background:var(--gold-soft); border-radius:4px; padding:2px 7px; flex:none}
.step-h h2{font-size:18px; font-weight:700}
.step-h p{margin:2px 0 0; color:var(--muted); font-size:13.5px}
.sec{display:flex; flex-direction:column; gap:14px; padding-top:18px; border-top:1px solid var(--line)}
.sec:first-child{padding-top:0; border-top:0}
.sec > h3{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
.sec > h3 small{font-family:var(--f-body); text-transform:none; letter-spacing:0; font-weight:500; margin-left:6px}

/* Type picker */
.types{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px}
.type{appearance:none; text-align:left; background:var(--surface); border:1.5px solid var(--line); border-radius:10px; padding:14px; cursor:pointer; display:flex; flex-direction:column; gap:6px; transition:border-color .15s, background .15s}
.type:hover{border-color:var(--line-strong)}
.type[aria-pressed="true"]{border-color:var(--gold); background:var(--gold-soft)}
.type svg{width:24px; height:24px; color:var(--gold-ink)}
.type b{font-family:var(--f-display); font-size:14.5px}
.type span{font-size:12.5px; color:var(--muted); line-height:1.4}

/* Fields */
.row{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px 14px}
.f{display:flex; flex-direction:column; gap:5px; min-width:0}
.f > label, .lbl{font-size:13px; font-weight:600}
.f > label i, .lbl i{font-style:normal; color:var(--bad)}
.hint{font-size:12.5px; color:var(--muted)}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=date],input[type=time],select,textarea{
  width:100%; background:var(--surface); border:1px solid var(--line-strong); border-radius:6px; padding:8px 10px; min-height:38px}
textarea{min-height:76px; resize:vertical}
input:hover,select:hover,textarea:hover{border-color:var(--muted)}
.invalid{border-color:var(--bad)!important; box-shadow:0 0 0 2px var(--bad-soft)}
.group-invalid{outline:2px solid var(--bad); outline-offset:4px; border-radius:6px}

.choices{display:flex; flex-wrap:wrap; gap:8px}
.choice{position:relative}
.choice input{position:absolute; opacity:0; inset:0; cursor:pointer; margin:0}
.choice span{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); border-radius:999px; padding:6px 13px; font-size:13.5px; background:var(--surface); cursor:pointer}
.choice input:checked + span{background:var(--ink); color:var(--bg); border-color:var(--ink)}
.choice input:focus-visible + span{outline:2px solid var(--focus); outline-offset:2px}
.seg{display:inline-flex; flex-wrap:wrap; border:1px solid var(--line-strong); border-radius:8px; overflow:hidden; background:var(--surface)}
.seg .choice span{border:0; border-radius:0; padding:8px 14px; border-right:1px solid var(--line)}
.seg .choice:last-child span{border-right:0}
.seg .choice{flex:1 1 auto} .seg .choice span{width:100%; justify-content:center; height:100%}
@media (max-width:560px){ .types{grid-template-columns:1fr 1fr} .type span{display:none} .type{padding:12px} }

/* Stepper */
.stepper{display:inline-flex; align-items:center; border:1px solid var(--line-strong); border-radius:6px; overflow:hidden; background:var(--surface); height:34px}
.stepper button{appearance:none; border:0; background:var(--sunk); width:30px; height:100%; cursor:pointer; font-size:16px; line-height:1}
.stepper button:hover{background:var(--line)}
.stepper input{width:40px; border:0!important; min-height:0; height:100%; text-align:center; padding:0; border-radius:0; font-family:var(--f-mono); -moz-appearance:textfield}
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none}
.stepper[aria-disabled="true"]{opacity:.4; pointer-events:none}

/* Guard picker */
.gp{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px}
.gp-group{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:10px; overflow:hidden; min-width:0}
.gp-group > div:first-child{font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); background:var(--sunk); padding:8px 12px}
.gp-item{display:flex; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid var(--line); cursor:pointer}
.gp-item:hover{background:color-mix(in srgb, var(--sunk) 60%, transparent)}
.gp-item.on{background:var(--gold-soft)}
.gp-item input[type=checkbox]{width:17px; height:17px; accent-color:var(--ink); flex:none; margin:0}
.gp-code{font-family:var(--f-mono); font-size:11.5px; border:1px solid var(--line-strong); border-radius:4px; padding:1px 5px; flex:none; min-width:44px; text-align:center}
.gp-name{flex:1; font-size:13.5px; min-width:0; line-height:1.3}
.gp-name small{display:block; color:var(--muted); font-size:11.5px}

/* Week grid */
.wk{border:1px solid var(--line); border-radius:10px; overflow:hidden}
.wk-head,.wk-row{display:grid; grid-template-columns:96px minmax(0,1fr) 70px 104px 64px; gap:10px; align-items:center; padding:8px 12px}
.wk-head{background:var(--sunk); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.wk-row{border-top:1px solid var(--line)}
.wk-row.off{background:color-mix(in srgb, var(--sunk) 55%, transparent)}
.wk-row.off .wk-times, .wk-row.off .stepper, .wk-row.off .wk-24{opacity:.35; pointer-events:none}
.wk-times{display:flex; align-items:center; gap:6px; min-width:0}
.wk-times input{min-width:0; padding:6px 6px; min-height:34px; font-family:var(--f-mono); font-size:13px}
.wk-times span{color:var(--muted); font-size:12px}
.wk-24{font-size:12.5px; display:flex; gap:5px; align-items:center; cursor:pointer}
.wk-24 input{accent-color:var(--ink)}
.wk-hrs{font-family:var(--f-mono); font-size:12.5px; text-align:right; color:var(--muted)}
.wk-hrs em{display:block; font-style:normal; font-size:10.5px; color:var(--gold-ink)}
.wk-foot{display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:10px 12px; border-top:1px solid var(--line); background:var(--sunk)}
.wk-total{margin-left:auto; font-size:13px}
.wk-total b{font-family:var(--f-mono)}
.sw{display:flex; align-items:center; gap:9px; cursor:pointer; font-weight:600; font-size:14px}
.sw input{position:absolute; opacity:0; width:1px; height:1px}
.sw i{width:34px; height:20px; border-radius:20px; background:var(--line-strong); position:relative; flex:none; transition:background .15s}
.sw i::after{content:""; position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:var(--surface); transition:transform .15s}
.sw input:checked + i{background:var(--ink)}
.sw input:checked + i::after{transform:translateX(14px)}
.sw input:focus-visible + i{outline:2px solid var(--focus); outline-offset:2px}
@media (max-width:640px){
  .wk-head{display:none}
  .wk-row{grid-template-columns:1fr auto; row-gap:8px}
  .wk-times{grid-column:1 / -1}
  .wk-hrs{text-align:right}
}

.btn{appearance:none; border:1px solid var(--line-strong); background:var(--surface); border-radius:6px; padding:6px 12px; font-size:13px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:6px}
.btn:hover{border-color:var(--ink)}
.btn.small{padding:4px 10px; font-size:12.5px}
.btn.primary{background:var(--gold); color:var(--on-gold); border-color:var(--gold); font-size:15px; padding:11px 18px; width:100%; justify-content:center; font-family:var(--f-display); font-weight:700}
.btn.primary:hover{filter:brightness(.96)}
.btn.primary[disabled]{opacity:.6; cursor:wait}
.btn.ghost{border-color:transparent; background:none; color:var(--muted)}
.btn.ghost:hover{color:var(--bad)}

/* Date rows */
.dr{display:flex; flex-direction:column; gap:8px}
.dr-row{display:grid; grid-template-columns:minmax(140px,1.2fr) minmax(0,1.6fr) 104px 60px 34px; gap:10px; align-items:center; background:var(--sunk); border-radius:8px; padding:8px 10px}
.dr-row input[type=date]{font-family:var(--f-mono); font-size:13px; min-height:34px; padding:6px 8px}
.dr-day{font-size:11.5px; color:var(--muted); display:block; margin-top:2px}
@media (max-width:640px){ .dr-row{grid-template-columns:1fr auto} .dr-row .wk-times{grid-column:1/-1} .dr-row .wk-hrs{text-align:left} }

/* Timeline */
.tl{border:1px dashed var(--line-strong); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:12px}
.tl-bar{display:grid; grid-template-columns:auto 1fr auto 1fr auto; align-items:center; gap:8px; font-size:12.5px}
.tl-dot{display:flex; flex-direction:column; align-items:flex-start; gap:2px}
.tl-dot b{font-family:var(--f-mono); font-size:13px}
.tl-dot span{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.06em}
.tl-line{height:6px; border-radius:6px; background:var(--gold)}
.tl-line.after{background:repeating-linear-gradient(90deg,var(--line-strong) 0 6px,transparent 6px 10px)}
.tl-text{font-size:14px}

/* Aside slip */
aside.slip{position:sticky; top:calc(env(safe-area-inset-top,0px) + 94px); display:flex; flex-direction:column; gap:14px; min-width:0}
@media (max-width:980px){ aside.slip{position:static} }
.slip-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden}
.slip-top{background:var(--band); color:var(--band-ink); padding:14px 16px; display:flex; justify-content:space-between; gap:10px; align-items:flex-start}
.slip-top b{font-family:var(--f-display); font-size:15px; display:block}
.slip-top span{font-size:12px; color:var(--band-muted)}
.slip-id{font-family:var(--f-mono); font-size:12px; color:var(--gold); white-space:nowrap}
.slip-body{padding:6px 16px 14px; max-height:min(56vh,560px); overflow:auto}
@media (max-width:980px){ .slip-body{max-height:none} }
.slip-sec{padding-top:10px}
.slip-sec h4{margin:0 0 4px; font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--gold-ink); font-weight:700}
.kv{display:grid; grid-template-columns:minmax(90px,38%) 1fr; gap:3px 10px; margin:0; font-size:13px}
.kv dt{color:var(--muted)}
.kv dd{margin:0; white-space:pre-line; overflow-wrap:anywhere}
.slip-empty{color:var(--muted); font-size:13px; padding:12px 0}
.slip-actions{padding:14px 16px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px}
.fine{font-size:12px; color:var(--muted); margin:0}

/* Confirmation / fallback */
.done{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:28px; display:flex; flex-direction:column; gap:14px; max-width:720px}
.done h2{font-size:22px}
.done .big-id{font-family:var(--f-mono); font-size:18px; color:var(--gold-ink)}
pre.txt{background:var(--sunk); border:1px solid var(--line); border-radius:8px; padding:14px; font:12.5px/1.55 var(--f-mono); white-space:pre-wrap; overflow-wrap:anywhere; max-height:420px; overflow:auto; margin:0}

/* Lists (mine / inbox) */
.list-tools{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px}
.list-tools input[type=text]{max-width:260px}
.reqs{display:flex; flex-direction:column; gap:8px}
.req{background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden}
.req > button{appearance:none; width:100%; background:none; border:0; text-align:left; padding:12px 14px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:12px; align-items:center; cursor:pointer}
.req > button:hover{background:color-mix(in srgb, var(--sunk) 60%, transparent)}
.req-type{font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:3px 8px; border-radius:4px; background:var(--sunk); color:var(--muted); white-space:nowrap}
.req-main{min-width:0}
.req-main b{display:block; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.req-main span{font-size:12.5px; color:var(--muted); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pill{font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px; white-space:nowrap}
.pill.new{background:var(--gold-soft); color:var(--gold-ink)}
.pill.review{background:var(--info-soft); color:var(--info)}
.pill.confirmed{background:var(--ok-soft); color:var(--ok)}
.pill.closed{background:var(--sunk); color:var(--muted)}
.req-detail{border-top:1px solid var(--line); padding:14px; display:flex; flex-direction:column; gap:14px}
.staff-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; background:var(--sunk); border-radius:8px; padding:12px}
.staff-bar .f{flex:1 1 220px}
.empty{background:var(--surface); border:1px dashed var(--line-strong); border-radius:12px; padding:28px; text-align:center; color:var(--muted)}
.empty b{display:block; color:var(--ink); font-family:var(--f-display); font-size:16px; margin-bottom:4px}
.toast{position:fixed; left:50%; bottom:calc(20px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:8px; font-size:14px; z-index:20; box-shadow:0 6px 20px rgba(0,0,0,.25)}
@media (max-width:700px){ .band{position:static} .band-title{display:none} .logo{height:38px} aside.slip{top:auto} }
@media (prefers-reduced-motion: reduce){ *{transition:none!important} }

/* Guard lines */
.gl{display:flex; flex-direction:column; gap:12px}
.gl-line{border:1px solid var(--line); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:10px; background:var(--surface)}
.gl-head{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end}
.gl-head .btn.ghost{margin-left:auto}
.gl-certs{display:flex; flex-direction:column; gap:8px}
.gl-cap{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.07em; color:var(--muted)}
.gl-certs .choice span{padding:5px 11px; font-size:13px}
.gl-certs .choice b{font-weight:700; font-size:12px}
.gl-plain{background:var(--gold-soft); color:var(--ink); border-radius:6px; padding:8px 12px; font-size:13.5px; font-weight:600}
.wk.nocount .wk-head,.wk.nocount .wk-row{grid-template-columns:96px minmax(0,1fr) 70px 64px}
.dr.nocount .dr-row{grid-template-columns:minmax(140px,1.2fr) minmax(0,1.6fr) 60px 34px}
@media (max-width:640px){ .wk.nocount .wk-row{grid-template-columns:1fr auto auto} .dr.nocount .dr-row{grid-template-columns:1fr auto} }