/* CRS — Direction E "Terminal". The demo's inline styles (demo/screens) as one
   class system, so the app can run under a strict CSP. Tokens follow
   docs/mocks/README.md with Budget navy in place of the mockups' green. */

:root{
  --accent:#00285F; --accent-dk:#001D47; --dark:#0A1F3F; --on-dark:#E6ECF5;
  --ground:#E9EBE5; --panel:#F6F7F3; --thead:#EEF0EB; --white:#FFFFFF;
  --border:#B9BEB4; --rule:#D5D9D0; --kbd-border:#8A948C;
  --ink:#151A16; --muted:#4E5A52; --sel:#DCE4F0;
  --ok:#00285F; --amber:#7A5200; --red:#8E1E1E; --info:#1D3F8A;
  --mono:'JetBrains Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink); font-family:var(--mono); font-size:13px; line-height:1.5}
button,input,select,textarea,kbd{font:inherit}
a{color:var(--accent)} a:hover{color:var(--accent-dk)}
input[type=checkbox],input[type=radio]{accent-color:var(--accent); width:16px; height:16px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.shell{min-height:100vh; display:flex; flex-direction:column}

/* ---- chrome -------------------------------------------------------------- */
.status{background:var(--dark); color:var(--on-dark); padding:0 20px; min-height:36px; display:flex; align-items:center; gap:24px; font-size:12px; letter-spacing:.04em; text-transform:uppercase; flex-wrap:wrap}
.status a{color:var(--on-dark); text-decoration:none}
.status .brand{font-weight:700; display:flex; align-items:center; gap:8px}
.status .sq{width:10px; height:10px; background:var(--accent); display:inline-block; outline:1px solid var(--on-dark)}
.status .right{margin-left:auto; display:flex; gap:16px; align-items:center}
.status form{display:inline}
.status button{background:none; border:0; color:var(--on-dark); text-transform:uppercase; letter-spacing:.04em; cursor:pointer; padding:0; font-size:12px; text-decoration:underline}
.stubbar{background:#FFF8E6; color:#5A3D00; border-bottom:1px solid #C9A95A; padding:3px 20px; font-size:11px; text-transform:uppercase; letter-spacing:.06em}
.tabs{background:var(--panel); border-bottom:1px solid var(--border); padding:0 20px; display:flex; gap:2px; flex-wrap:wrap}
.tabs a{display:flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent}
.tabs a.on{color:var(--ink); background:var(--sel); border-bottom-color:var(--accent); font-weight:700}
kbd{font-size:11px; border:1px solid var(--kbd-border); padding:0 5px; line-height:18px; background:var(--white); color:var(--ink); font-weight:500}
.btn-primary kbd,.status kbd{border-color:var(--on-dark); background:transparent; color:#fff}
.cmd{background:var(--white); border-bottom:1px solid var(--border); padding:6px 20px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.cmd .prompt{color:var(--accent); font-weight:700}
.cmd input{flex:1 1 320px; min-height:36px; border:0; background:transparent; color:var(--ink); padding:0; outline:none}
.cmd .hint{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.04em}
.fbar{margin-top:auto; background:var(--dark); color:var(--on-dark); padding:6px 20px; display:flex; gap:18px; flex-wrap:wrap; font-size:12px; align-items:center}
.fbar kbd{border-color:#4A5E7E; background:transparent; color:#fff; margin-right:6px}
.fbar .right{margin-left:auto; color:#B7C3D6; text-transform:uppercase; letter-spacing:.04em}

/* ---- layout -------------------------------------------------------------- */
main.page{padding:16px 20px 24px; display:flex; gap:14px; align-items:flex-start; flex-wrap:wrap; width:100%; max-width:1400px}
.col{flex:1 1 640px; min-width:0; display:flex; flex-direction:column; gap:14px}
.side{flex:0 1 340px; min-width:280px; display:flex; flex-direction:column; gap:14px}
.narrow{max-width:760px}
.head{padding:14px 20px 0; display:flex; align-items:baseline; gap:14px; flex-wrap:wrap}
.head h1{margin:0; font-size:18px; letter-spacing:.02em}
.head .meta{color:var(--muted); font-size:12px}
.steps{padding:10px 20px 0; display:flex; gap:18px; flex-wrap:wrap; text-transform:uppercase; letter-spacing:.04em; font-size:12px; color:var(--muted)}
.steps .done{color:var(--ink)} .steps .cur{color:var(--accent); font-weight:700}

/* ---- panels / tables ----------------------------------------------------- */
.panel{background:var(--panel); border:1px solid var(--border); display:flex; flex-direction:column}
.panel-h{padding:8px 14px; border-bottom:1px solid var(--border); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:12px; display:flex; gap:12px; align-items:center; flex-wrap:wrap}
.panel-h .aside{margin-left:auto; font-weight:500; color:var(--muted); letter-spacing:.04em}
.panel-b{padding:12px 14px}
.list{list-style:none; margin:0; padding:0}
.list li{display:flex; align-items:center; gap:14px; padding:8px 14px; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.list li:last-child{border-bottom:0}
.list .tagcol{width:110px; flex:0 0 auto}
.list .grow{flex:1 1 300px}
.tablewrap{overflow-x:auto}
table.grid{width:100%; border-collapse:collapse; background:var(--white)}
table.grid th{background:var(--thead); text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:6px 10px; border-bottom:1px solid var(--border); white-space:nowrap}
table.grid td{padding:7px 10px; border-bottom:1px solid var(--rule); vertical-align:top}
table.grid tr.sel td{background:var(--sel)}
table.grid tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
table.grid tr.dim td{color:var(--muted)}
table.grid label.rowpick{display:flex; gap:8px; align-items:center; cursor:pointer}
table.grid td.num,table.grid th.num{text-align:right; white-space:nowrap}
dl.kv{display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; margin:0; padding:12px 14px}
dl.kv dt{color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.06em; padding-top:2px}
dl.kv dd{margin:0}
dl.kv dd.num{text-align:right}
.kpis{background:var(--panel); border-bottom:1px solid var(--border); padding:0 20px; display:flex; flex-wrap:wrap; align-items:center}
.kpi{display:flex; align-items:baseline; gap:10px; padding:10px 18px 10px 0; border-right:1px solid var(--rule); margin-right:18px}
.kpi:last-of-type{border-right:0}
.kpi b{font-size:22px}
.kpi span{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.kpi.red b,.kpi.red span{color:var(--red)} .kpi.amber b,.kpi.amber span{color:var(--amber)}
.checks{list-style:none; margin:0; padding:10px 14px; display:flex; flex-direction:column; gap:4px}
.checks li{display:flex; gap:8px}
.checks .ok{color:var(--ok); font-weight:700} .checks .no{color:var(--red); font-weight:700}

/* ---- status tags ---------------------------------------------------------- */
.tag{font-weight:700; white-space:nowrap}
.t-ok{color:var(--ok)} .t-warn{color:var(--amber)} .t-err{color:var(--red)} .t-info{color:var(--info)} .t-mute{color:var(--muted)}
.muted{color:var(--muted)} .small{font-size:11px} .b{font-weight:700} .upper{text-transform:uppercase; letter-spacing:.06em}

/* ---- forms / buttons ------------------------------------------------------ */
.form{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:10px 14px; padding:12px 14px}
.form .wide{grid-column:1/-1}
.field{display:flex; flex-direction:column; gap:4px}
.field>span,.field>label{font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=date],.field input[type=datetime-local],
.field input[type=number],.field input[type=password],.field input[type=search],.field select,.field textarea,
input.in,select.in{min-height:36px; border:1px solid var(--border); background:var(--white); padding:4px 8px; color:var(--ink); border-radius:0; width:100%}
.field textarea{min-height:64px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--accent); outline-offset:1px}
.opts{display:flex; flex-direction:column; gap:6px}
.opts label,.checkline{display:flex; gap:8px; align-items:flex-start; cursor:pointer; min-height:28px}
.btns{display:flex; gap:8px; flex-wrap:wrap; align-items:center; padding:12px 14px}
.btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 14px; border:1px solid var(--border); background:var(--white); color:var(--ink); text-transform:uppercase; letter-spacing:.06em; font-weight:700; font-size:12px; text-decoration:none; border-radius:0; cursor:pointer}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:var(--accent); border-color:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-dk); color:#fff}
.btn-danger{color:var(--red); border-color:var(--red)}
.btn[disabled],.btn.disabled{opacity:.45; cursor:not-allowed}
.link{background:none; border:0; padding:0; color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:3px; cursor:pointer; text-transform:uppercase; letter-spacing:.06em; font-size:12px}
.flash{margin:12px 20px 0; padding:8px 14px; border:1px solid; background:var(--white)}
.flash.ok{border-color:var(--accent); color:var(--accent)} .flash.err{border-color:var(--red); color:var(--red)} .flash.warn{border-color:var(--amber); color:var(--amber)}
.pager{display:flex; gap:12px; align-items:center; padding:8px 14px; color:var(--muted)}
.filters{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end; padding:10px 14px; border-bottom:1px solid var(--rule)}
.filters .field{min-width:160px}
.segs{display:flex; gap:2px; flex-wrap:wrap}
.segs a{padding:6px 10px; border:1px solid var(--border); text-decoration:none; color:var(--muted); text-transform:uppercase; font-size:11px; letter-spacing:.06em; background:var(--white)}
.segs a.on{background:var(--sel); color:var(--ink); border-color:var(--accent); font-weight:700}

/* ---- customer-facing surfaces (tablet / phone) ---------------------------- */
body.cust{background:var(--ground); font-size:15px}
.cust-wrap{max-width:720px; margin:0 auto; padding:20px 16px 40px}
.cust-head{background:var(--dark); color:var(--on-dark); padding:12px 16px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; display:flex; gap:10px; align-items:center}
.term{border:1px solid var(--border); background:var(--white); padding:12px 14px; margin:10px 0}
.term .initial{margin-top:8px}
.sigpad{width:100%; height:180px; background:var(--white); border:1px dashed var(--kbd-border); touch-action:none; display:block}

/* ---- login ---------------------------------------------------------------- */
.login{max-width:440px; margin:10vh auto; background:var(--panel); border:1px solid var(--border)}
.login .panel-b{display:flex; flex-direction:column; gap:12px}

@media (max-width:700px){
  .status{gap:10px; padding:4px 12px} .tabs,.cmd,.kpis{padding-left:12px; padding-right:12px}
  main.page{padding:12px} .side{min-width:0; flex-basis:100%}
}
@media print{
  .status,.tabs,.cmd,.fbar,.btns,.stubbar{display:none}
  body{background:#fff}
}

/* helpers used instead of inline styles (CSP) */
.fkey{color:inherit; text-decoration:none}
.pre{white-space:pre-wrap}
.flash.flush{margin:0}
.cust-head .sq{width:10px; height:10px; background:var(--accent); outline:1px solid var(--on-dark); display:inline-block}
.login details form{margin-top:10px}
.push{margin-left:auto; align-self:center}
fieldset.plain{border:0; margin:0; min-width:0}
.ca{border-bottom:1px solid var(--rule)}
.ca:last-child{border-bottom:0}
.ca dl.kv{padding:6px 0}
.opts.row{flex-direction:row; flex-wrap:wrap; gap:6px 16px}
.cust-h1{font-size:20px; margin:8px 0}
.btns.flushx{padding-left:0; padding-right:0}
body.paper{background:#fff; padding:32px; max-width:820px; margin:0 auto}
body.paper dl.kv{padding:0}
.sigline{margin-top:48px}
@media print{.noprint{display:none}}