/* Top Shelf Trailers dashboard: calm, low-density design system.
   Type scale (4 sizes): 12 label · 14 body · 24 number · 40 hero number. Spacing scale: 4 / 8 / 16 / 24 / 32 / 48.
   One accent (the brand yellow). Red and green appear only as status. */
:root{
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:32px;--s6:48px;
  --t1:12px;--t2:14px;--t3:24px;--t4:40px;
  --bg:#f6f6f3;--surface:#ffffff;--ink:#1b1b19;--muted:#66665f;--line:#e7e7e2;--soft:#efefea;
  --accent:#f3be10;--on-accent:#1b1b19;--good:#14753f;--good-bg:#e3f4ea;--bad:#b3261e;--bad-bg:#fbe7e5;
  --shadow:0 1px 2px rgba(20,20,10,.05),0 4px 16px rgba(20,20,10,.04);--radius:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#111110;--surface:#1a1a18;--ink:#f1f1ec;--muted:#a3a39b;--line:#2d2d29;--soft:#242421;
  --good:#5fd39a;--good-bg:#173023;--bad:#ff8c82;--bad-bg:#3a1c19;--shadow:none;}}
:root[data-theme="dark"]{--bg:#111110;--surface:#1a1a18;--ink:#f1f1ec;--muted:#a3a39b;--line:#2d2d29;--soft:#242421;--good:#5fd39a;--good-bg:#173023;--bad:#ff8c82;--bad-bg:#3a1c19;--shadow:none}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--t2)/1.55 -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--s4)}
:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:6px}
button,select,input,textarea{font:inherit;color:inherit}
button{cursor:pointer}

/* ---------- header (sticky, quiet) ---------- */
.top{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:var(--s3);padding-top:var(--s3);padding-bottom:var(--s3);flex-wrap:wrap}
.brand{display:flex;align-items:center;margin-right:auto}
.brand img{height:36px;width:auto;border-radius:6px;display:block}
.mode{display:flex;background:var(--soft);border-radius:999px;padding:var(--s1)}
.mode button{border:0;background:none;color:var(--muted);font-weight:600;padding:var(--s2) var(--s3);border-radius:999px;min-height:36px}
.mode button.on{background:var(--ink);color:var(--surface)}
.controls{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap}
select,input[type=date],input[type=text],textarea{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:var(--s2) var(--s3);min-height:40px}
select{padding-right:var(--s2)}
.btn{background:var(--ink);color:var(--surface);border:0;border-radius:10px;padding:var(--s2) var(--s3);font-weight:600;min-height:40px;transition:opacity .15s}
.btn:hover{opacity:.88}
.btn.quiet{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.quiet:hover{background:var(--soft);opacity:1}
.btn.sel{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.btn:disabled{opacity:.4;cursor:default}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:var(--s1) 0;font-size:var(--t1)}
.link:hover{color:var(--ink)}
.tabs{display:flex;gap:var(--s1);overflow-x:auto;scrollbar-width:none;margin-bottom:-1px}
.tabs::-webkit-scrollbar{display:none}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--muted);font-weight:600;padding:var(--s3) var(--s3) calc(var(--s3) - 2px);white-space:nowrap;transition:color .15s}
.tabs button:hover{color:var(--ink)}
.tabs button.on{color:var(--ink);border-bottom-color:var(--accent)}
.subbar{border-top:1px solid var(--line);background:var(--surface)}
.subbar .wrap{display:flex;gap:var(--s3);align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:var(--s2);padding-bottom:var(--s2)}
#fbar{display:flex;gap:var(--s2);flex-wrap:wrap;align-items:center}
#fbar input[type=text]{min-width:220px}
.chk{display:flex;gap:var(--s2);align-items:center;color:var(--muted);min-height:40px}
.segc{display:inline-flex;background:var(--soft);border-radius:10px;padding:var(--s1);gap:var(--s1)}
.segc button{border:0;background:none;color:var(--muted);font-weight:600;padding:var(--s2) var(--s3);border-radius:8px;min-height:36px}
.segc button.on{background:var(--accent);color:var(--on-accent)}
.menu{position:relative}
.menupanel{position:absolute;right:0;top:calc(100% + var(--s2));background:var(--surface);border:1px solid var(--line);border-radius:12px;min-width:240px;padding:var(--s2);box-shadow:0 12px 32px rgba(0,0,0,.18);max-height:70vh;overflow:auto}
.menupanel a{display:block;padding:var(--s2) var(--s3);border-radius:8px;color:var(--ink);text-decoration:none}
.menupanel a:hover{background:var(--soft)}
.menupanel a.sub{padding-left:var(--s5);font-size:var(--t1);color:var(--muted)}
.menupanel .mh{font-size:var(--t1);color:var(--muted);padding:var(--s2) var(--s3)}
.menupanel .theme{display:flex;gap:var(--s1);padding:var(--s2) var(--s3);border-top:1px solid var(--line);margin-top:var(--s2)}
.menupanel .theme button{flex:1;border:1px solid var(--line);background:none;border-radius:8px;padding:var(--s1) var(--s2);min-height:32px}
.menupanel .theme button.on{background:var(--ink);color:var(--surface)}

/* ---------- content ---------- */
main{padding-bottom:var(--s6)}
.sub{color:var(--muted);font-size:var(--t1);margin:var(--s4) 0 var(--s3)}
.msg{background:var(--bad-bg);color:var(--bad);border-radius:var(--radius);padding:var(--s3) var(--s4);margin:var(--s3) 0;display:flex;gap:var(--s3);align-items:center;justify-content:space-between}
.note{background:var(--soft);color:var(--ink);border-radius:var(--radius);padding:var(--s3) var(--s4);margin:0 0 var(--s4);font-size:var(--t2)}
.fine{color:var(--muted);font-size:var(--t1);margin:var(--s4) 0 0}
.tab,.vtab{animation:in .18s ease-out}
@keyframes in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.stack>*+*{margin-top:var(--s4)}

.grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid.focus{grid-template-columns:1.7fr 1fr 1fr 1fr}
.grid.three{grid-template-columns:repeat(3,1fr)}
.grid.two{grid-template-columns:repeat(2,1fr)}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--s2)}
.tile .k{font-size:var(--t1);color:var(--muted);font-weight:500}
.tile .v{font-size:var(--t3);font-weight:700;line-height:1.15;letter-spacing:-.01em}
.tile.hero .v{font-size:var(--t4)}
.tile .foot{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;min-height:24px}
.tile .sub{font-size:var(--t1);color:var(--muted);margin:0}
.chip{display:inline-block;font-size:var(--t1);font-weight:600;color:var(--muted);background:var(--soft);border-radius:999px;padding:2px var(--s2);white-space:nowrap}
.chip.up{color:var(--good);background:var(--good-bg)}
.chip.down{color:var(--bad);background:var(--bad-bg)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s4);box-shadow:var(--shadow)}
.card>header{display:flex;justify-content:space-between;align-items:center;gap:var(--s3);min-height:24px}
.card h3{margin:0;font-size:var(--t2);font-weight:600}
.card .body{margin-top:var(--s3)}
.info{display:inline-flex;width:16px;height:16px;border-radius:50%;border:1px solid var(--muted);color:var(--muted);font-size:10px;font-weight:700;align-items:center;justify-content:center;margin-left:var(--s1);cursor:help;vertical-align:1px}
.more{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.more summary{list-style:none;cursor:pointer;display:flex;gap:var(--s3);align-items:center;padding:var(--s3) var(--s4);min-height:56px;border-radius:var(--radius)}
.more summary::-webkit-details-marker{display:none}
.more .t{font-weight:600}
.more .h{color:var(--muted);font-size:var(--t1);margin-right:auto}
.more .t{margin-right:auto}.more .h{margin-right:0}
.more .tg::after{content:"Show";color:var(--muted);font-size:var(--t1);text-decoration:underline;text-underline-offset:3px}
.more[open] .tg::after{content:"Hide"}
.more .in{padding:0 var(--s4) var(--s4)}
.more+.more,.card+.more,.more+.card,.grid+.card,.grid+.more,.card+.card,.card+.grid,.more+.grid{margin-top:var(--s4)}

/* tables: key columns first, the rest on request */
.tw{overflow-x:auto;margin:0 calc(var(--s4) * -1);padding:0 var(--s4)}
table{width:100%;border-collapse:collapse}
th{font-size:var(--t1);font-weight:500;color:var(--muted);text-align:right;padding:var(--s2) var(--s3);border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:var(--s3);border-bottom:1px solid var(--line);text-align:right;min-height:48px;vertical-align:middle}
th:first-child,td:first-child,th.l,td.l{text-align:left}
tbody tr:last-child td{border-bottom:0}
tr.foot td{font-weight:700;border-top:1px solid var(--ink)}
td.empty,p.empty{color:var(--muted);text-align:center;padding:var(--s5) var(--s3);margin:0}
tr.row{cursor:pointer}tr.row:hover td{background:var(--soft)}
.card:not(.all) .x{display:none}
th.sortable{cursor:pointer}th.sortable:hover{color:var(--ink)}
.sm{color:var(--muted);font-size:var(--t1)}
.pill{display:inline-block;font-size:var(--t1);font-weight:600;border-radius:999px;padding:2px var(--s2);white-space:nowrap;background:var(--soft)}
.pill.good{background:var(--good-bg);color:var(--good)}.pill.bad{background:var(--bad-bg);color:var(--bad)}.pill.accent{background:var(--accent);color:var(--on-accent)}
a.ext{font-size:var(--t1);font-weight:600;color:var(--ink);background:var(--soft);padding:var(--s1) var(--s2);border-radius:8px;text-decoration:none;white-space:nowrap}
a.ext:hover{background:var(--accent);color:var(--on-accent)}

/* short breakdown lists */
ul.hb{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
ul.hb li{display:grid;grid-template-columns:minmax(0,1.3fr) auto minmax(60px,1fr);gap:var(--s3);align-items:center;min-height:32px}
ul.hb .l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
ul.hb .n{font-weight:600;text-align:right}
ul.hb .b{height:8px;background:var(--soft);border-radius:4px;overflow:hidden}
ul.hb .b i{display:block;height:100%;border-radius:4px}
.body:not(.open) ul.hb li.x{display:none}

/* charts: no gridlines, direct labels */
.chart{width:100%;height:180px;display:block}
.key{display:flex;gap:var(--s4);color:var(--muted);font-size:var(--t1);margin-bottom:var(--s2)}
.key span{display:flex;align-items:center;gap:var(--s2)}.key i{width:10px;height:10px;border-radius:3px;display:inline-block}

/* feature bits */
.board{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.rank{display:flex;gap:var(--s3);align-items:center}
.rank .no{width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.rank .who{flex:1;min-width:0;display:grid;gap:var(--s2)}.rank .amt{text-align:right}.rank .amt small{display:block;color:var(--muted)}
.heat{display:grid;grid-template-columns:40px repeat(24,minmax(0,1fr));gap:3px;font-size:10px;color:var(--muted);align-items:center}
.heat b{font-weight:500;text-align:center}.heat i{display:block;height:24px;border-radius:4px}
.src{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.src .tile.ok{border-left:4px solid var(--good)}.src .tile.off{border-left:4px solid var(--line)}
textarea{width:100%;min-height:120px;font:var(--t1) ui-monospace,Menlo,monospace}
code{background:var(--soft);border-radius:6px;padding:1px var(--s1);font-size:var(--t1)}
.pager{display:flex;gap:var(--s3);justify-content:center;align-items:center;color:var(--muted);margin-top:var(--s3)}
.dlgwrap{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40;display:flex;justify-content:center;align-items:flex-start;padding:var(--s5) var(--s3);overflow:auto}
.dlg{background:var(--surface);border-radius:var(--radius);max-width:680px;width:100%;padding:var(--s4);position:relative;display:grid;gap:var(--s3)}
.dlg h2{font-size:var(--t3);margin:0;padding-right:72px;line-height:1.2}.dlg h2 small{display:block;font-size:var(--t1);color:var(--muted);font-weight:400;margin-top:var(--s1)}
.dlg .x{position:absolute;right:var(--s3);top:var(--s3)}
.tr{max-height:320px;overflow:auto;background:var(--bg);border-radius:12px;padding:var(--s3);font-size:var(--t2)}
.tr p{margin:var(--s2) 0}.tr p.caller b{color:var(--ink)}.tr p b{display:block;font-size:var(--t1);color:var(--muted);font-weight:600}
pre.tr{white-space:pre-wrap}

/* loading skeletons */
.sk{background:linear-gradient(90deg,var(--soft) 25%,var(--line) 50%,var(--soft) 75%);background-size:200% 100%;animation:sh 1.2s infinite;border:0;box-shadow:none;min-height:104px}
.sk.tall{min-height:240px;margin-top:var(--s4)}
@keyframes sh{to{background-position:-200% 0}}
@media (prefers-reduced-motion:reduce){.tab,.vtab,.sk{animation:none}}

/* ---------- tablet / phone ---------- */
@media (max-width:900px){.grid.focus{grid-template-columns:1fr 1fr}.grid.focus .hero{grid-column:1/-1}.grid.three{grid-template-columns:1fr 1fr}}
@media (max-width:640px){
  .wrap{padding:0 var(--s3)}
  .bar{gap:var(--s2);padding-top:var(--s2);padding-bottom:var(--s2)}
  .brand img{height:32px}
  .controls{width:100%}.controls select{flex:1;min-width:0}
  .grid,.grid.focus,.grid.three,.grid.two{grid-template-columns:1fr}
  .tile,.card{padding:var(--s3)}.tile.hero .v{font-size:var(--t4)}
  .tabs button{padding:var(--s3) var(--s3);min-height:48px}
  .btn,select,input[type=date],input[type=text],.mode button,.segc button{min-height:44px}
  #fbar,#fbar select,#fbar input[type=text]{width:100%}
  .tw{margin:0 calc(var(--s3) * -1);padding:0 var(--s3)}
  .more summary{padding:var(--s3)}.more .in{padding:0 var(--s3) var(--s3)}
  .heat{grid-template-columns:30px repeat(24,minmax(0,1fr));gap:2px}.heat i{height:18px}
}

/* needs-attention list */
ul.attn{list-style:none;margin:0;padding:0;display:grid}
ul.attn li{display:grid;grid-template-columns:64px 1fr auto;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-bottom:1px solid var(--line);min-height:56px}
ul.attn li:last-child{border-bottom:0}
ul.attn .n{font-size:var(--t3);font-weight:700}
.dlg .x{position:absolute;right:var(--s3);top:var(--s3)}
.card .body>.stack>*+*{margin-top:var(--s3)}

.grid>*{margin-top:0!important}

ul.attn .n{text-align:left}

/* login page + account dialogs */
.loginpage{display:grid;place-items:center;min-height:100vh;padding:var(--s4)}
.login{width:100%;max-width:380px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);box-shadow:var(--shadow);display:grid;gap:var(--s3)}
.login img{border-radius:8px;justify-self:start}
.login h1{margin:var(--s3) 0 0;font-size:var(--t3)}
.login .sub{margin:0}
.login form,.dlg form{display:grid;gap:var(--s3)}
.field{display:grid;gap:var(--s1);font-size:var(--t1);color:var(--muted);font-weight:500}
.field input,.field select{font-size:var(--t2);color:var(--ink);width:100%}
.field .row{display:flex;gap:var(--s2)}.field .row input{flex:1;min-width:0}
.formerr{color:var(--bad);background:var(--bad-bg);border-radius:10px;padding:var(--s2) var(--s3);margin:0}
.two2{display:grid;gap:var(--s3);grid-template-columns:1fr 1fr}
.adduser{border-top:1px solid var(--line);padding-top:var(--s3)}.adduser h3{margin:0;font-size:var(--t2)}
td.acts{white-space:normal}td.acts .link{margin-right:var(--s3)}
#ao{color:var(--ink);background:var(--soft);border-radius:10px;padding:var(--s2) var(--s3);user-select:all}
.dlg{max-width:720px}
@media (max-width:640px){.two2{grid-template-columns:1fr}}
.field input,.field select{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:var(--s2) var(--s3);min-height:44px;font:inherit}
.field input:focus,.field select:focus{outline:2px solid var(--ink);outline-offset:1px}
.menupanel .sep{border-top:1px solid var(--line);margin:var(--s2) 0}