/* The phone uses the police MDT's local fonts, app artwork, blue bevels and panels. */
@font-face{font-family:"Chakra Petch";src:url("/mdt-assets/fonts/chakra-petch-400.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("/mdt-assets/fonts/chakra-petch-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("/mdt-assets/fonts/chakra-petch-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Chakra Petch";src:url("/mdt-assets/fonts/chakra-petch-700.woff2") format("woff2");font-weight:700;font-display:swap}
:root{--base:#080e17;--surface:#101a27;--surface2:#1b2a3e;--line:#263346;--line2:#364b65;--text:#edf4ff;--muted:#a1b1c8;--cyan:#199fff;--phone-highlight:linear-gradient(180deg,#45afff,#0074e8);--phone-panel:linear-gradient(160deg,#1c2b40,#0d1623 75%);--phone-button:linear-gradient(180deg,#2c3d55,#172337)}
body,button,input,textarea,select{font-family:"Chakra Petch",Chakra,sans-serif;font-size:15px}
body{background:var(--base);color:var(--text)}
*{scrollbar-width:none}*::-webkit-scrollbar{display:none}
button{border:1px solid var(--line2);border-radius:8px;background:var(--phone-button);box-shadow:inset 0 1px #ffffff0c,0 2px 3px #0005;transition:background-color .12s,border-color .12s}
button:hover,button:focus-visible{border-color:#548fc6;outline-color:#199fff}
button.primary,.compact-primary,.composer button,.record-tools>button,.quick-actions .primary{background:var(--phone-highlight);border-color:#5ab7ff;color:white;box-shadow:inset 0 1px #bee5ff85,0 3px 12px #0084ff20;text-transform:none;font:600 15px "Chakra Petch",sans-serif}
input,textarea,select{background:#070f1a;border:1px solid #304157;border-radius:8px;color:var(--text);font-size:16px}
input:focus,textarea:focus,select:focus{outline:1px solid #199fff!important;border-color:#199fff}
.topbar,.statusbar,.mobile-nav,.app-rail{background:linear-gradient(180deg,#1b293b,#0d1521);border-color:var(--line)}
.topbar h1{font:700 21px/1.2 "Chakra Petch",sans-serif}
.topbar #viewEyebrow{color:#a1b1c8}
.section,.command-strip,.module-intro,.map-list,.map-inspector,.record-header,.detail-block,.remote-dialog,.pair-card{background:var(--phone-panel);border-color:var(--line);border-radius:14px;box-shadow:inset 0 1px #fff07}
.section>header,.section-heading,.chat-stage>header,.inspector-head{border-bottom:1px solid var(--line)}
.section h2,.section-heading h2,.chat-stage h2,.module-intro h2{font:700 18px/1.3 "Chakra Petch",sans-serif}
.section h2::before,.module-intro h2::before{content:"";display:inline-block;width:6px;height:6px;margin-right:9px;background:#199fff;box-shadow:0 0 8px #199fff75;vertical-align:middle}
.list{padding:8px}
.list-row,.compact .list-row{margin-bottom:7px;padding:12px;min-height:72px;gap:10px;border:1px solid #2b3b50;border-radius:7px;background:var(--phone-button);box-shadow:inset 0 1px #ffffff08,0 2px 3px #0006}
.list-row:first-child{border-top:1px solid #2b3b50}
.list-row b{font:600 16px/1.3 "Chakra Petch",sans-serif}
.list-row small{font:400 14px/1.4 "Chakra Petch",sans-serif;color:var(--muted)}
.list-row em{font:600 12px/1.3 "Chakra Petch",sans-serif;color:#79c1ff}
.list-row:hover,.list-row.selected{background:linear-gradient(#204c75,#10314f);border-color:#199fff}
.list-row.selected{box-shadow:inset 0 1px #ffffff18}
.list-row .signal{height:24px;width:3px}
.shift-intro h2{font:700 25px/1.15 "Chakra Petch",sans-serif}
.shift-intro p{font-size:14px;line-height:1.5}
.metric b{font:700 28px/1.1 "Chakra Petch",sans-serif;color:white}
.metric span{font:600 11px/1.3 "Chakra Petch",sans-serif;color:var(--muted)}
.status-buttons button.active,.segmented button.active,.pane-switch button.active,.reference-tabs button.active{background:var(--phone-highlight);border-color:#69beff;color:white;box-shadow:inset 0 1px #ffffff65}
.status-buttons button small,.status-buttons button.active small{color:inherit;font:500 12px "Chakra Petch",sans-serif}
.status-buttons button b{font:700 16px "Chakra Petch",sans-serif}
.fact small,.detail-block h3,.responders h3,.module-intro small{font:600 12px/1.4 "Chakra Petch",sans-serif;color:var(--muted)}
.fact b,.detail-block p,.inspector-head p{font:500 15px/1.5 "Chakra Petch",sans-serif}
.message-avatar{border-radius:7px;background:var(--phone-button);color:#edf4ff}
.message header b{font:700 15px "Chakra Petch",sans-serif}
.message header small{font-size:11px}.message p{font-size:15px;line-height:1.5}
.message{background:var(--phone-panel);padding:14px;border:1px solid var(--line);border-radius:10px}
.chat-messages{padding:12px}.composer{padding:12px}
.quick-call-menu{background:var(--phone-panel);border-color:var(--line2);border-radius:12px}
.quick-call-menu>button{background:var(--phone-button);border-color:var(--line2);font-size:15px;border-radius:7px}
.reference-table th{background:#142033;font-size:12px}.reference-table td{font-size:14px}.reference-table td b{font:600 15px "Chakra Petch",sans-serif}
.reference-table tr:hover td{background:#1b3049}
.connection-notice{background:#192b40;border-color:#40617f;color:#c3dbf2}
.pair-card{border:1px solid #35485f;max-width:620px}
.pair-copy h1{font:700 44px/1.05 "Chakra Petch",sans-serif}
.pair-card form button{background:var(--phone-highlight);color:white}
.pair-steps li{font-size:15px}.pair-card footer{font-size:13px}
@media(max-width:760px){
  .terminal{background:var(--base)}
  .topbar{min-height:70px;padding:12px 16px}
  .shift-intro{padding:18px 0 12px}
  .command-strip{padding:0;overflow:hidden}
  .metrics{grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:#0b1420}
  .metrics .metric:nth-child(n){display:grid;padding:12px 6px;text-align:center}
  .metric span{font-size:10px}.metric b{font-size:26px}
  .command-grid{gap:12px;margin-top:12px}
  .section>header{min-height:60px;padding:13px 14px}
  .section header>div>small{display:none}
  .mobile-nav{padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -6px 20px #0004}
  .mobile-nav button{background:none;box-shadow:none;border:0;border-radius:8px;color:var(--muted);font:600 12px "Chakra Petch",sans-serif}
  .mobile-nav button.active{background:linear-gradient(#204467,#101d30);color:white;box-shadow:inset 0 1px #3277ac}
  .mobile-nav img{width:32px;height:32px;object-fit:contain}
  .app-rail nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;padding:16px}
  .app-rail nav button{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;height:100px;gap:8px;padding:10px 4px;border:1px solid transparent;background:none;box-shadow:none;border-radius:9px}
  .app-rail nav button img{width:48px;height:48px;background:none;box-shadow:none}
  .app-rail nav button span{font:600 14px "Chakra Petch",sans-serif}
  .app-rail nav button.active{background:#24466b80;border-color:#199fff}
  .app-rail nav button em{position:absolute;top:4px;right:8px;background:#147dcc;color:white}
  .pane-switch{background:#0a111c;padding:7px;gap:6px;border-bottom:1px solid var(--line)}
  .pane-switch button{min-height:38px;border-radius:7px;font:600 14px "Chakra Petch",sans-serif}
  .inspector-actions button{font:600 14px "Chakra Petch",sans-serif}
  .remote-modal{padding:12px}.remote-dialog{padding:18px;max-height:calc(100dvh - 24px);overflow:auto}
}