/* MECH TECH — Nardo Gray global theme. Loaded last. Colors only. */
:root,.app-shell,.mx-root{
 --nt-bg:#55575A;--nt-panel:#343638;--nt-ink:#FFFFFF;--nt-ink2:#D1D3D4;--nt-accent:#000000;--nt-red:var(--nt-accent);--nt-red-d:#292B2D;--nt-line:#77797C;--nt-input:#292B2D;--nt-nav:#111112;--nt-navsel:#000000;--nt-in-bub:#77797C;--nt-out-bub:#000000;--nt-redbg:#292B2D;
 --nav:var(--nt-nav);--nav2:var(--nt-navsel);--surface:var(--nt-panel);--bg:var(--nt-bg);--ink:var(--nt-ink);--muted:var(--nt-ink2);--stroke:var(--nt-line);
 --teal:var(--nt-red);--tealbg:var(--nt-redbg);--blue:var(--nt-red);--bluebg:var(--nt-redbg);--red:var(--nt-red);--redbg:var(--nt-redbg);--orange:var(--nt-red);--orangebg:#3a3c3f;--shadow:0 8px 26px #0000002e;
 color-scheme:dark}
html,body,.app-shell,.app-shell .main,.app-shell .page,.main,.page{background:var(--nt-bg);color:var(--nt-ink)}
a{color:#fff;text-decoration:underline;text-decoration-color:var(--nt-ink2);text-underline-offset:3px}
.hint,.muted,small,.tiny,.kpi small,.kpi .desc,.app-shell .tech-action-copy{color:var(--nt-ink2)}
/* inputs */
input,select,textarea,.login-card input,.login-card select,.login-card textarea,.ob-modal input,.ob-modal select,.ob-modal textarea{background:var(--nt-input)!important;color:var(--nt-ink)!important;border-color:var(--nt-line)!important;color-scheme:dark}
input[type=checkbox],input[type=radio]{accent-color:var(--nt-red)}
input::placeholder,textarea::placeholder{color:#a9abad!important;opacity:1}
input:focus,textarea:focus,select:focus{outline:2px solid var(--nt-ink2);outline-offset:1px;border-color:var(--nt-ink2)!important}
button:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid #fff;outline-offset:2px}
.form-field label,.mx-form label{color:var(--nt-ink2)}
option{background:var(--nt-input);color:#fff}
/* nav */
.sidebar,.app-shell .sidebar{background:var(--nt-nav);color:#fff}
.brand,.user-pill{border-color:#ffffff1a}
.brand small,.user-pill{color:var(--nt-ink2)}
.nav button,.app-shell .nav button{color:#fff}
.nav .nav-icon{filter:grayscale(1)}
.nav button:hover{background:#1e1f21}
.nav button.active,.app-shell .nav button.active,.app-shell .nav button:hover{background:var(--nt-navsel);color:#fff}
.nav button:hover:not(.active),.app-shell .nav button:hover:not(.active){background:var(--nt-input)}
.nav button.active:before,.app-shell .nav button.active:before{background:var(--nt-ink)}
@media(max-width:720px){.sidebar,.app-shell .sidebar{background:var(--nt-nav)}
 .sidebar-toggle{background:var(--nt-panel);color:#fff;border-color:var(--nt-line)}
 .sidebar-close{background:var(--nt-navsel);color:#fff;border-color:var(--nt-line)}}
/* topbar */
.topbar{background:var(--nt-nav);border-bottom-color:#2a2c2e;color:#fff}
.topbar h1{color:#fff}
.eyebrow,.app-shell .eyebrow,.ro-number,.app-shell .ro-number,.timer,.app-shell .timer{color:var(--nt-ink2)!important}
.ro-number,.app-shell .ro-number,.timer,.app-shell .timer{color:#fff!important}
.login-card .eyebrow{color:var(--nt-ink)!important}
.dot{background:var(--nt-accent);border:1px solid var(--nt-line)}
/* surfaces */
.panel,.panel.soft,.kpi,.ro-card,.app-shell .panel,.app-shell .kpi,.app-shell .ro-card,.app-shell .tech-action-card,.topic,.finding,.ft-card,.ft-job,.ft-empty-card,.mj-card,.modal,.login-card,.ob-modal,.ob-choice,.ob-codecard{background:var(--nt-panel)!important;color:var(--nt-ink);border-color:var(--nt-line)!important}
.app-shell .tech-action-card{box-shadow:0 8px 24px #0003}
.app-shell .tech-action-card:hover,.ro-card:hover,.mj-card:hover,.mj-card.open,.ob-choice:hover{border-color:var(--nt-ink2)!important}
.mj-card.open{box-shadow:inset 3px 0 0 var(--nt-red)}
.app-shell .tech-action-link{color:#fff;text-decoration:underline;text-decoration-color:var(--nt-ink2)}
.sep,.ob-divider:before,.ob-divider:after,.login-card .sep{background:var(--nt-line)!important}
.list-item,th,td,.modal-heading,.modal-footer,.ob-head,.ob-foot,.ob-section{border-color:var(--nt-line)}
th{background:#2c2e30;color:var(--nt-ink2)}
.modal-backdrop,.ob-backdrop{background:#111112c4!important}
.modal-heading h2,.ob-head h2,.ob-choice h3,.ob-modal label,.login-card h1,.login-card label,.login-card b{color:#fff!important}
.login-card p,.login-card .hint,.login-card small,.ob-modal .tiny,.ob-modal .hint,.ob-lede,.ob-choice ul,.ob-steps,.ob-code,.ob-codebox small,.ob-codebox span,.ob-codecard small,.ob-codecard .tiny{color:var(--nt-ink2)!important}
.login-screen,.lp{background:var(--nt-bg)!important;color:#fff}
.lp-top{background:#55575aee;border-color:var(--nt-line)}
.lp-sec,.ob-divider{border-color:var(--nt-line);color:var(--nt-ink2)}
.lp-hero p,.lp-sec p{color:var(--nt-ink2)}
.lp-list li{border-color:var(--nt-line);background:var(--nt-panel)}
.lp-sec blockquote{background:var(--nt-panel)}
.lp-kicker,.lp-num,.ob-choice-tag,.ob-section{color:var(--nt-ink)}
.ob-icon{background:var(--nt-input);border-color:var(--nt-line)}
.ob-codebox{background:var(--nt-input);border-color:var(--nt-red)}
.ob-error{background:var(--nt-redbg);border-color:var(--nt-red)}
.ob-dev{border-color:var(--nt-line);color:var(--nt-ink2)}
.ob-facts dt{color:var(--nt-ink2)}
.ob-skel div{background:linear-gradient(90deg,#3d3f42,#4a4c4f,#3d3f42);background-size:200% 100%}
.customer-hero{background:var(--nt-nav)!important}
.customer-hero p{color:var(--nt-ink2)}
/* buttons */
.btn,.app-shell .btn{background:var(--nt-red);color:#fff;border-color:var(--nt-red)}
.btn:hover{filter:none;background:var(--nt-red-d)}
.btn.teal,.app-shell .btn.teal,.login-card .btn.teal,.ob-cta{background:var(--nt-red)!important;border-color:var(--nt-red)!important;color:#fff!important}
.btn.teal:hover,.ob-cta:hover{background:var(--nt-red-d)!important}
.btn.danger{background:var(--nt-accent);border-color:var(--nt-line);color:var(--nt-ink)}
.btn.secondary,.btn.mutedbtn,.btn.ob-ghost{background:var(--nt-input);color:#fff;border-color:var(--nt-line)}
.btn.secondary:hover,.btn.mutedbtn:hover,.btn.ob-ghost:hover{background:#3d3f42;border-color:var(--nt-ink2)}
.btn:disabled{opacity:.45}
.ob-link{color:#fff}.ob-link:hover{color:#fff;text-decoration-color:#fff}
.tabs button{background:var(--nt-input);color:var(--nt-ink2);border-color:var(--nt-line)}
.tabs button.active{background:var(--nt-red);color:#fff;border-color:var(--nt-red)}
/* status / chips */
.status,.status.ok,.status.red,.customer-page .status{background:var(--nt-redbg);color:#fff}
.status.warn{background:#3a3c3f;color:#fff;box-shadow:inset 3px 0 0 var(--nt-red)}
.status.neutral,.status.mj-s-declined,.ft-prio{background:#46484b;color:var(--nt-ink2)}
.ft-prio-urgent{background:var(--nt-red);color:#fff}.ft-prio-high{background:#3a3c3f;color:#fff;box-shadow:inset 3px 0 0 var(--nt-red)}
.step,.mj-steps span{background:var(--nt-input);color:var(--nt-ink2)}
.step.now,.mj-steps span.done{background:var(--nt-red);color:#fff}
.alert,.alert.info,.alert.success{background:#3a3c3f;color:#fff;border-left:3px solid var(--nt-red)}
.alert{border-left-color:var(--nt-red)}
.toast,.toast.bad{background:var(--nt-nav);color:#fff;border-left:4px solid var(--nt-red)}
.toast.bad{background:var(--nt-red)}
/* misc */
.file-target{background:var(--nt-input);border-color:var(--nt-line)}
.file-target input{background:transparent!important;border:0!important}
.bubble,.bubble.customer{background:var(--nt-in-bub);color:#fff;border-color:var(--nt-line)}
.bubble.mine{background:var(--nt-out-bub);border-color:var(--nt-red)}
.bubble small{color:#eceeee}
.calendar button{background:var(--nt-input);color:#fff;border-color:var(--nt-line)}
.calendar button.selected{background:var(--nt-red);border-color:var(--nt-red)}
.calendar button:hover{border-color:var(--nt-red)}
.calendar button.today{box-shadow:inset 0 0 0 2px var(--nt-ink2)}
.timeline{border-color:var(--nt-line)}
.timeline-item:before{background:var(--nt-red);border-color:var(--nt-panel);box-shadow:0 0 0 1px var(--nt-red)}
.poll-option{background:var(--nt-input);color:#fff;border-color:var(--nt-line)}
.poll-option.voted,.topic.selected{background:var(--nt-redbg)!important;border-color:var(--nt-red)!important}
.ft-assign,.ft-leg{background:var(--nt-input)}
.ft-costs{background:var(--nt-input)}
.ft-loc{background:var(--nt-input)}
.ft-leg.now{background:var(--nt-panel);border-color:var(--nt-red)}
.ft-progress span{background:#4a4c4f}.ft-progress span.done{background:var(--nt-red)}
.ft-warn{background:var(--nt-redbg);color:#fff}
.ft-gps{border-color:var(--nt-line)}.ft-gps.on{background:var(--nt-input);border-color:var(--nt-line);box-shadow:inset 3px 0 0 var(--nt-red)}
.ft-tabs .ft-count{background:#ffffff1f}
.mj-video{background:var(--nt-nav)}

/* ===== Messenger ===== */
.mx-root{--mx-red:var(--nt-accent)}
.mx-rz{background:linear-gradient(135deg,transparent 50%,#a9abad 50%,#a9abad 58%,transparent 58%,transparent 70%,#a9abad 70%,#a9abad 78%,transparent 78%)}
.mx-note.bad{background:var(--nt-red)}
.mx-draft{color:#fff}
@keyframes mx-fl{0%,60%{box-shadow:0 0 0 3px #fff}100%{box-shadow:none}}
/* Keep overlay surfaces opaque throughout entrance motion, not just afterward. */
@keyframes obFade{from{opacity:1}to{opacity:1}}
@keyframes obPop{from{opacity:1;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mx-rise{from{opacity:1;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes mx-slide{from{opacity:1;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes mx-drop{from{opacity:1;transform:translateY(-12px)}to{opacity:1;transform:none}}
/* autofill */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,textarea:-webkit-autofill,select:-webkit-autofill{-webkit-text-fill-color:#fff;caret-color:#fff;-webkit-box-shadow:0 0 0 1000px #292B2D inset;transition:background-color 9999s}

/* Legacy accent names remain compatibility aliases only; every accent is neutral. */
.ob-link{ text-decoration-color:var(--nt-ink2)}
.ob-icon:hover,.ob-check,.ob-code.ok,.lp-tag,.lp-sec blockquote,.lp-foot{border-color:var(--nt-line)}
.ob-code.bad,.ob-error,.ft-empty-mark{color:var(--nt-ink)}
.ob-modal .ob-invalid,[aria-invalid=true]{border-color:var(--nt-ink)!important;outline:2px dashed var(--nt-ink2);outline-offset:2px;box-shadow:none}
input:user-invalid,select:user-invalid,textarea:user-invalid{border-color:var(--nt-ink)!important;outline:2px dashed var(--nt-ink2);outline-offset:2px;box-shadow:none}
.mx-dot.on{background:var(--nt-ink)}
.mx-root button:focus-visible,.mx-ib:focus-visible,.mx-btn:focus-visible{outline-color:var(--nt-ink)}
.mx-reacts button,.mx-picker button{filter:grayscale(1)}
.btn.danger:hover{background:var(--nt-input);border-color:var(--nt-ink2)}
.calendar button:hover,.mx-btn.dang:hover{border-color:var(--nt-ink2)}
/* Existing descriptive labels stay intact; these monochrome cues reinforce meaning. */
.alert.success::before{content:"\2713\0020 Success: ";font-weight:800}
.alert.info::before{content:"Information: ";font-weight:800}
.alert:not(.success):not(.info)::before{content:"! Notice: ";font-weight:800}
.ob-error::before,.mx-err::before,.mx-errt::before,.toast.bad::before,.mx-note.bad::before{content:"! Error: ";font-weight:800}
.status.ok::before{content:"\2713\0020";margin-right:4px}
.status.warn::before{content:"!\0020";font-weight:900;margin-right:4px}
/* Learn page only: black across the full document and every content section. */
html:has(.lp),body:has(.lp),body:has(.lp) #app,.lp,.lp .lp-top,.lp .lp-hero,.lp .lp-sections,.lp .lp-sec,.lp .lp-foot,.lp .lp-actions,.lp .lp-list li,.lp .lp-sec blockquote{background:#000000!important}
.lp h1,.lp h2{color:#FFFFFF!important}
.lp .lp-hero p,.lp .lp-sec p,.lp .lp-list li,.lp .lp-sec blockquote{color:#D1D3D4!important}
/* Login-only service bay (photo + black/red). Scoped to .ob-login. */
.ob-login.login-screen{background:#050505!important}
.ob-login .login-card{background:#070708d9!important;border-color:#2c2c30!important}
.ob-login .login-card input{background:#000000!important;border-color:#3e3e43!important;color:#FFFFFF!important}
.ob-login .login-card input:focus{border-color:#9a9aa0!important;outline:0}
.ob-login .login-card label{color:#FFFFFF!important}
.ob-login #login-form .btn.teal{background:#D7262F!important;border-color:#D7262F!important;color:#FFFFFF!important}
.ob-login #login-form .btn.teal:hover{background:#B81E26!important}
.ob-login .login-card .btn[data-act="ob-signup"]{background:#55575A!important;border-color:#6A6C6F!important;color:#FFFFFF!important}
.ob-login .login-card .btn[data-act="ob-signup"]:hover{background:#626467!important}
.ob-login .login-card .btn[data-act="ob-learn"]{background:#000000!important;border-color:#55575A!important;color:#FFFFFF!important}
.ob-login .eyebrow{color:#E0313A!important}
.ob-login .ob-bay-brand .hint{color:#D1D3D4!important}
.ob-login .ob-link,.ob-login .ob-link:hover{color:#FFFFFF!important;text-decoration-color:#D7262F!important;text-decoration-thickness:1px}