/* KCOI TAG Register — "tag plate" identity: engraved equipment nameplates, signal-yellow required fields */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=Golos+Text:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap');

:root{
  --ink:#14212E; --navy:#16324F; --navy2:#1F4468; --steel:#E9EEF3; --steel2:#F4F6F9; --line:#CBD5DF; --mute:#5E6E7E;
  --plate:#FBFCFD; --signal:#F2C230; --signal-soft:#FFF4CC; --ok:#2E7D4F; --ok-soft:#E3F2E8; --bad:#B3261E; --bad-soft:#FBE7E5;
  --warn:#9A6200; --warn-soft:#FFF1D6; --grey:#D9DEE4;
  --mono:'JetBrains Mono',Consolas,monospace; --disp:'Oswald','Arial Narrow',sans-serif; --body:'Golos Text','Segoe UI',Arial,sans-serif;
  --r:6px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--steel2);color:var(--ink);font:14px/1.45 var(--body)}
a{color:var(--navy2)}
:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:.02em;margin:0;text-transform:uppercase}
h1{font-size:26px} h2{font-size:18px} h3{font-size:14px;letter-spacing:.06em}
.mono{font-family:var(--mono)}
.muted{color:var(--mute)} .small{font-size:12px}
.hide{display:none!important}

/* shell */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh;background:linear-gradient(90deg,var(--navy) 232px,var(--steel2) 232px)}
.side{background:var(--navy);color:#DCE6F0;display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:20px 18px 16px;border-bottom:1px solid rgba(255,255,255,.12)}
.brand .mark{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--disp);letter-spacing:.08em;color:#fff;text-transform:uppercase}
.brand .mark i{width:26px;height:16px;border:1.5px solid var(--signal);border-radius:3px;position:relative;display:inline-block}
.brand .mark i:before,.brand .mark i:after{content:"";position:absolute;top:5px;width:3px;height:3px;border-radius:50%;background:var(--signal)}
.brand .mark i:before{left:3px}.brand .mark i:after{right:3px}
.brand .proj{font-size:11.5px;color:#9FB3C8;margin-top:7px}
.nav{padding:10px 8px;flex:1;overflow:auto}
.nav a{display:flex;align-items:center;justify-content:space-between;color:#DCE6F0;text-decoration:none;padding:9px 12px;border-radius:5px;margin:1px 0;font-weight:500}
.nav a:hover{background:rgba(255,255,255,.07)}
.nav a.on{background:#fff;color:var(--navy)}
.nav .sep{font:600 10.5px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#7F97AF;padding:16px 12px 6px}
.badge{background:var(--signal);color:var(--ink);font:700 11px/1 var(--mono);padding:3px 6px;border-radius:9px}
.nav a.on .badge{background:var(--navy);color:#fff}
.me{padding:14px 18px;border-top:1px solid rgba(255,255,255,.12);font-size:12.5px}
.me b{color:#fff;display:block}
.me a{color:#9FB3C8;margin-right:10px}
.main{min-width:0}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:26px 32px 18px;border-bottom:1px solid var(--line);background:#fff}
.top .eyebrow{font:600 11px var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin-bottom:6px}
.content{padding:24px 32px 60px}

/* elements */
.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--navy);background:var(--navy);color:#fff;font:600 13.5px var(--body);padding:9px 15px;border-radius:var(--r);cursor:pointer;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--navy2)}
.btn.ghost{background:#fff;color:var(--navy)}
.btn.ghost:hover{background:var(--steel)}
.btn.ok{background:var(--ok);border-color:var(--ok)}
.btn.bad{background:#fff;color:var(--bad);border-color:var(--bad)}
.btn.sig{background:var(--signal);border-color:#D9A900;color:var(--ink)}
.btn.sm{padding:5px 10px;font-size:12.5px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.card{background:#fff;border:1px solid var(--line);border-radius:8px}
.card .hd{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.card .bd{padding:16px 18px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
label.f{display:block;font-size:12px;font-weight:600;color:var(--mute);margin-bottom:4px}
input[type=text],input[type=email],input[type=password],input[type=number],input[type=url],select,textarea{width:100%;border:1px solid var(--line);border-radius:5px;padding:8px 10px;font:14px var(--body);background:#fff;color:var(--ink)}
textarea{min-height:70px;resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--navy2);outline:none;box-shadow:0 0 0 3px rgba(31,68,104,.12)}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font:600 11px var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--mute);padding:9px 10px;border-bottom:1px solid var(--line);background:var(--steel2);position:sticky;top:0;z-index:1}
table.t td{padding:8px 10px;border-bottom:1px solid #E6EBF0;vertical-align:top}
table.t tr.click{cursor:pointer}
table.t tr.click:hover td{background:#F5F8FB}
table.t tr.sel td{background:#EEF4FA}
.pill{display:inline-block;font:600 11px/1 var(--body);padding:4px 8px;border-radius:10px;background:var(--steel);color:var(--navy);white-space:nowrap}
.pill.SUBMITTED,.pill.VERIFY{background:var(--warn-soft);color:var(--warn)}
.pill.APPROVED,.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.PARTIAL{background:#E4EEF8;color:var(--navy2)}
.pill.REJECTED,.pill.bad,.pill.VOID{background:var(--bad-soft);color:var(--bad)}
.pill.RETURNED,.pill.HOLD{background:#F7E6DA;color:#8A4B12}
.pill.FROZEN{background:#DCE9F7;color:#174A7C}
.flash{padding:11px 14px;border-radius:6px;margin-bottom:16px;border:1px solid}
.flash.ok{background:var(--ok-soft);border-color:#B5D9C2;color:#1F5A37}
.flash.bad{background:var(--bad-soft);border-color:#EBC0BB;color:var(--bad)}
.flash.info{background:#EAF1F8;border-color:#C6D7E8;color:var(--navy)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:13px}
.kv dt{color:var(--mute)} .kv dd{margin:0}

/* signature: tag plate */
.plate{display:inline-flex;align-items:center;position:relative;background:linear-gradient(180deg,#FFFFFF 0%,#EEF2F6 100%);border:1.5px solid #9AAABB;border-radius:7px;padding:10px 30px;box-shadow:inset 0 1px 0 #fff,0 1px 0 #C3CEDA,0 6px 14px -8px rgba(20,33,46,.35);min-height:52px}
.plate:before,.plate:after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff,#9AAABB 70%);box-shadow:inset 0 0 0 1px #8494A6}
.plate:before{left:10px}.plate:after{right:10px}
.plate .segs{display:flex;align-items:flex-start;font:700 22px/1 var(--mono);color:var(--ink);letter-spacing:.02em}
.plate .seg{display:flex;flex-direction:column;align-items:center}
.plate .seg b{font-weight:700;padding:0 1px}
.plate .seg small{font:600 8.5px/1 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--mute);margin-top:6px;white-space:nowrap}
.plate .dash{color:#8B9AAA;padding:0 1px}
.plate .seg.miss b{color:#C9A227;background:repeating-linear-gradient(90deg,var(--signal-soft) 0 6px,transparent 6px 9px)}
.plate.empty .segs{color:#9AAABB;font-size:15px;font-weight:600}
.plate.lg .segs{font-size:30px}
.plate.sm{padding:4px 18px;min-height:0;border-width:1px;border-radius:5px;box-shadow:none}
.plate.sm:before,.plate.sm:after{width:5px;height:5px;margin-top:-2.5px}
.plate.sm:before{left:6px}.plate.sm:after{right:6px}
.plate.sm .segs{font-size:13px}
.plate.bad{border-color:var(--bad)}
.tagtxt{font:700 13px var(--mono);white-space:nowrap}

/* editor */
.ed{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.stepper{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;max-height:330px;overflow:auto;padding:2px}
.sc{border:1px solid var(--line);border-radius:6px;padding:9px 11px;cursor:pointer;background:#fff;text-align:left;font:inherit;color:inherit}
.sc:hover{border-color:var(--navy2)}
.sc.on{border-color:var(--navy);box-shadow:0 0 0 2px var(--navy) inset;background:#F3F7FB}
.sc .n{font-weight:600;font-size:13px}
.sc .x{font:600 11.5px var(--mono);color:var(--mute);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sc .a{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;margin-top:5px;color:var(--ok);font-weight:700}
.sc .a.Future{color:var(--mute)} .sc .a.Not{color:#A0705A}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.fld.R input,.fld.R select{background:var(--signal-soft);border-color:#E3C25A}
.fld.R.has input,.fld.R.has select{background:#fff;border-color:var(--line)}
.fld .h{font-size:11px;color:var(--mute);margin-top:3px;min-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fld .req{color:#B08600}
.fld.chg input,.fld.chg select{border-color:#D9A100;background:var(--warn-soft)}
.fld.chg label.f{color:var(--warn)}
.issues{margin:10px 0 0;padding:0;list-style:none}
.issues li{padding:6px 10px;border-left:3px solid var(--bad);background:var(--bad-soft);color:var(--bad);margin-bottom:4px;font-size:13px;border-radius:0 4px 4px 0}
.issues li.ok{border-color:var(--ok);background:var(--ok-soft);color:var(--ok)}
.ai{border-left:3px solid #6B5BD2;background:#F2F0FC;padding:8px 10px;border-radius:0 4px 4px 0;font-size:13px;margin-top:8px}
.ai b{color:#4B3DA8}
.sticky{position:sticky;top:16px}
.lines td .d{max-width:340px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--ok)}
.dot.bad{background:var(--bad)} .dot.warn{background:#D9A100} .dot.grey{background:#B9C4CF}
.drop{border:1.5px dashed #9FB0C2;border-radius:8px;padding:18px;text-align:center;background:#F8FAFC;cursor:pointer}
.drop.over{border-color:var(--navy);background:#EEF4FA}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.seg-legend{display:flex;gap:14px;font-size:12px;color:var(--mute);margin-top:12px;flex-wrap:wrap}
.seg-legend span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px;background:var(--signal-soft);border:1px solid #E3C25A}
.seg-legend span.o:before{background:#fff;border-color:var(--line)}
.stat{padding:16px 18px}
.stat .v{font:600 30px/1 var(--disp)}
.stat .l{font-size:12px;color:var(--mute);margin-top:6px}
.empty{padding:40px;text-align:center;color:var(--mute)}
.drawer{position:fixed;top:0;right:0;width:520px;max-width:100%;height:100vh;background:#fff;border-left:1px solid var(--line);box-shadow:-20px 0 40px -20px rgba(0,0,0,.25);z-index:50;overflow:auto;transform:translateX(105%);transition:transform .18s}
.drawer.open{transform:none}
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login-art{background:var(--navy);color:#DCE6F0;padding:48px;display:flex;flex-direction:column;justify-content:space-between;overflow:hidden}
.login-art .big{font:600 44px/1.05 var(--disp);text-transform:uppercase;color:#fff;letter-spacing:.01em;max-width:520px}
.login-form{display:flex;align-items:center;justify-content:center;padding:40px}
.login-form form{width:100%;max-width:360px}
.plates-demo{display:flex;flex-direction:column;gap:14px;margin:30px 0}
.plates-demo .plate{align-self:flex-start}
.plates-demo .plate:nth-child(2){margin-left:40px}.plates-demo .plate:nth-child(3){margin-left:12px}
@media (max-width:1100px){.ed{grid-template-columns:1fr}.g4{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.shell{grid-template-columns:1fr}.side{position:static;height:auto}.nav{display:flex;flex-wrap:wrap}.nav .sep{display:none}
  .content,.top{padding-left:16px;padding-right:16px}.g2,.g3,.g4{grid-template-columns:1fr}.login-wrap{grid-template-columns:1fr}.login-art{display:none}
  .plate .segs{font-size:16px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}