/* Reply: Budget brand on white cards. Strict CSP, no inline styles. Light mode only.
   Palette from budget.com's own stylesheet: navy #00285F (chrome), orange #ED5505 (actions), red #D4002A. */

:root{
  --navy:#00285F; --orange:#ED5505; --orange-dk:#C94800; --on-navy:#FFFFFF;
  --ground:#F8F8F8; --panel:#FFFFFF; --thead:#F1F1F1; --white:#FFFFFF;
  --border:#C8C9C7; --rule:#E0E0E0; --ink:#333333; --muted:#666666; --sel:#FFFEE1;
  --ok:#1F6B3A; --ok-bg:#E6F2EA; --ok-br:#CBE3D3;
  --amber:#8A5A00; --amber-bg:#FFF3D6; --amber-br:#F2DCA3;
  --red:#D4002A; --red-bg:#FBE3E7; --red-br:#F3BCC6;
  --mute-bg:#F1F1F1;
  --sans:'Figtree',system-ui,'Segoe UI',sans-serif; --mono:'JetBrains Mono',Menlo,Consolas,monospace;
  --r:6px; --shadow:0 1px 3px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground); color:var(--ink); font-family:var(--sans); font-size:14px; line-height:1.5}
button,input,select,textarea{font:inherit}
a{color:var(--orange)} a:hover{color:var(--orange-dk)}
input[type=checkbox],input[type=radio]{accent-color:var(--orange); 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(--navy); color:var(--on-navy); padding:0 20px; min-height:44px; display:flex; align-items:center; gap:22px; font-size:13px; flex-wrap:wrap}
.status a{color:var(--on-navy); text-decoration:none}
.status .brand{font-weight:700; font-size:16px; display:flex; align-items:center; gap:9px}
.status .sq{width:12px; height:12px; background:var(--orange); display:inline-block; border-radius:2px}
.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-navy); cursor:pointer; padding:0; font-size:13px; text-decoration:underline; text-underline-offset:3px}

.tabs{background:var(--panel); border-bottom:1px solid var(--border); padding:0 20px; display:flex; gap:4px; flex-wrap:wrap}
.tabs a{display:flex; align-items:center; min-height:42px; padding:0 14px; color:var(--muted); font-weight:500; text-decoration:none; border-bottom:2px solid transparent}
.tabs a:hover{color:var(--ink)}
.tabs a.on{color:var(--ink); border-bottom-color:var(--navy); font-weight:600}

/* ---- 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}

/* ---- panels / tables ----------------------------------------------------- */
.panel{background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden}
.panel-h{padding:10px 16px; border-bottom:1px solid var(--border); font-weight:600; font-size:15px; display:flex; gap:12px; align-items:baseline; flex-wrap:wrap}
.panel-h .aside{margin-left:auto; font-weight:400; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums}
.panel-b{padding:14px 16px}
.list{list-style:none; margin:0; padding:0}
.list li{display:flex; align-items:center; gap:14px; padding:9px 16px; border-bottom:1px solid var(--rule); flex-wrap:wrap}
.list li:last-child{border-bottom:0}
.list .tagcol{flex:0 0 auto; min-width:92px; text-align:center}
.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:12px; color:var(--muted); font-weight:600; padding:7px 12px; border-bottom:1px solid var(--border); white-space:nowrap}
table.grid td{padding:9px 12px; 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(--navy)}
table.grid td.num,table.grid th.num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
dl.kv{display:grid; grid-template-columns:max-content 1fr; gap:6px 18px; margin:0; padding:14px 16px}
dl.kv dt{color:var(--muted); font-size:12px; font-weight:500; padding-top:2px}
dl.kv dd{margin:0; min-width:0}
dl.kv dd.num{text-align:right}

/* ---- status chips --------------------------------------------------------- */
.tag{display:inline-block; font-weight:600; white-space:nowrap; font-size:12px; line-height:20px; padding:0 8px; border-radius:4px; border:1px solid var(--rule); background:var(--mute-bg); color:var(--muted)}
.t-ok{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-br)}
.t-warn{color:var(--amber); background:var(--amber-bg); border-color:var(--amber-br)}
.t-err{color:var(--red); background:var(--red-bg); border-color:var(--red-br)}
.t-mute{color:var(--muted); background:var(--mute-bg); border-color:var(--rule)}
.muted{color:var(--muted)} .small{font-size:12px} .b{font-weight:600} .upper{text-transform:uppercase; letter-spacing:.04em; font-size:12px}
.pre{white-space:pre-wrap}
dl.kv dd.pre{max-width:72ch}

/* ---- forms / buttons ------------------------------------------------------ */
.form{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px 16px; padding:14px 16px}
.form .wide{grid-column:1/-1}
.field{display:flex; flex-direction:column; gap:4px}
.field>span,.field>label{font-size:12px; font-weight:500; 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 input[type=url],.field select,.field textarea,
input.in,select.in{min-height:38px; border:1px solid var(--border); background:var(--white); padding:6px 10px; color:var(--ink); border-radius:var(--r); width:100%}
.field textarea{min-height:64px}
input:focus,select:focus,textarea:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--orange); outline-offset:1px}
.opts{display:flex; flex-direction:column; gap:8px}
.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 16px}
.btn{display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; border:1px solid var(--border); background:var(--white); color:var(--ink); font-weight:600; font-size:13px; text-decoration:none; border-radius:var(--r); cursor:pointer}
.btn:hover{border-color:var(--navy); color:var(--ink)}
.btn-primary{background:var(--orange); border-color:var(--orange); color:#fff}
.btn-primary:hover{background:var(--orange-dk); border-color:var(--orange-dk); color:#fff}
.btn-danger{color:var(--red); border-color:var(--red)}
.btn-danger:hover{background:var(--red-bg); border-color:var(--red)}
.btn[disabled],.btn.disabled{opacity:.45; cursor:not-allowed}
.flash{margin:12px 20px 0; padding:10px 16px; border:1px solid; border-radius:var(--r); background:var(--white)}
.flash.ok{border-color:var(--ok-br); background:var(--ok-bg); color:var(--ok)}
.flash.err{border-color:var(--red-br); background:var(--red-bg); color:var(--red)}
.flash.warn{border-color:var(--amber-br); background:var(--amber-bg); color:var(--amber)}
.flash.flush{margin:0 0 12px}

/* ---- login ---------------------------------------------------------------- */
.login{max-width:440px; margin:10vh auto; background:var(--panel); border:1px solid var(--border); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden}
.login .panel-b{display:flex; flex-direction:column; gap:12px}
.login details form{margin-top:10px}

@media (max-width:700px){
  .status{gap:10px; padding:4px 12px} .tabs{padding-left:12px; padding-right:12px}
  main.page{padding:12px} .side{min-width:0; flex-basis:100%}
}
dl.kv dd.small{font-family:var(--mono)}