/* Metro Cargo. Tokens first, then the screens.
   No build step: this is served as it stands, so there is no node on the server
   and nothing to compile during a deploy. */

:root{
  --brand:#F1BA29; --brand-ink:#161616;
  --bg:#F5F4F0; --surface:#FFFFFF; --surface-2:#FAF9F6; --surface-3:#F1EFEA;
  --text:#161616; --muted:#5C5852; --faint:#8A857C;
  --border:#E4E1DA; --border-strong:#CFCBC2;
  --ok:#2E7D4F; --warn:#B4801A; --bad:#B4352C;
  --r:10px; --r-lg:16px;
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
[data-theme="dark"]{
  --bg:#0D0D0D; --surface:#161616; --surface-2:#1C1C1C; --surface-3:#232323;
  --text:#F2F0EC; --muted:#A8A39B; --faint:#6F6A62;
  --border:#2A2A2A; --border-strong:#3A3A3A;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit}

.input{width:100%;height:42px;padding:0 12px;border:1px solid var(--border-strong);
  border-radius:var(--r);background:var(--surface);color:var(--text);font:inherit}
.field{display:block;margin-bottom:14px}
.field > span{display:block;font-size:12.5px;color:var(--muted);margin-bottom:5px}

/* An anchor and a button that look the same have to centre their label the same
   way, so both are flex rather than one relying on line height. */
.btn{height:42px;padding:0 18px;border:0;border-radius:var(--r);font:inherit;text-decoration:none;
  font-weight:600;cursor:pointer;background:var(--surface-3);color:var(--text);
  display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn-primary{background:var(--brand);color:var(--brand-ink)}
.btn-block{width:100%;display:flex}

.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);
  margin:2px 0 16px;cursor:pointer}
.seg{display:inline-flex;background:var(--surface-3);border-radius:999px;padding:3px;gap:2px}
.seg a{padding:5px 13px;border-radius:999px;font-size:12.5px;text-decoration:none;color:var(--muted)}
.seg a.on{background:var(--surface);color:var(--text);font-weight:600}

/* ---------------------------------------------------------------- login */
.login{min-height:100vh;display:grid;place-items:center;padding:28px;background:#E8E5DD}
.logincard{width:100%;max-width:1100px;background:#F4F2EC;border-radius:26px;overflow:hidden;
  display:grid;grid-template-columns:1fr 1fr;min-height:620px;
  box-shadow:0 24px 70px rgba(22,22,22,.10)}

.login-form{display:flex;flex-direction:column;padding:34px 40px 30px}
.login-top{margin-bottom:auto}
.login-top img{height:58px;width:auto}
.login-top .mark-light{display:block}
.login-top .mark-dark{display:none}

.login-box{width:100%;max-width:340px;margin:0 auto;padding:22px 0}
.login-box h1{font-size:27px;text-align:center;letter-spacing:-.4px;margin:0 0 22px}
.login-box .input{background:#fff}

.infield{position:relative;display:block}
.infield .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  color:var(--faint);pointer-events:none}
.infield .input{padding-right:40px;transition:border-color .12s ease, box-shadow .12s ease}
.infield .ic ~ .input{padding-left:38px}
.infield .input:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(241,186,41,.22);outline:none}

.reveal{position:absolute;right:8px;top:50%;transform:translateY(-50%);border:0;background:none;
  padding:6px;cursor:pointer;color:var(--faint);transition:color .12s ease;line-height:0}
.reveal:hover{color:var(--text)}
.reveal.on{color:var(--brand-ink,var(--text))}
.reveal.on::after{content:"";position:absolute;inset:4px;border-radius:8px;
  background:rgba(241,186,41,.18);z-index:-1}

.alert{background:rgba(180,53,44,.08);border:1px solid rgba(180,53,44,.25);color:#8E2B24;
  border-radius:var(--r);padding:9px 12px;font-size:13px;margin:0 0 14px;animation:rise .16s ease}
@keyframes rise{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.btn-primary{position:relative;transition:transform .09s ease, filter .12s ease}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[data-sending]{pointer-events:none;filter:saturate(.7)}
.btn-primary[data-sending] .label{opacity:.55}
.spinner{display:none;position:absolute;right:16px;top:50%;width:15px;height:15px;margin-top:-8px;
  border:2px solid rgba(0,0,0,.25);border-top-color:rgba(0,0,0,.65);border-radius:50%;
  animation:spin .6s linear infinite}
.btn-primary[data-sending] .spinner{display:block}
@keyframes spin{to{transform:rotate(360deg)}}

.langseg{margin-top:18px;display:flex;justify-content:center}

.login-art{position:relative;margin:14px 14px 14px 0;border-radius:20px;overflow:hidden;
  display:flex;align-items:flex-end;padding:34px;
  background-image:linear-gradient(to top,rgba(8,10,14,.86) 0%,rgba(8,10,14,.30) 48%,
    rgba(8,10,14,.04) 100%),url('/img/truck-login.jpg');
  background-size:cover;background-position:50% 38%}
.artmark{width:84px;height:84px;border-radius:22px;background:rgba(9,11,15,.86);
  border:1px solid rgba(255,255,255,.10);display:grid;place-items:center;
  backdrop-filter:blur(8px);box-shadow:0 12px 30px rgba(0,0,0,.45)}
.artmark img{width:52px;height:52px;display:block}

@media (max-width:980px){
  .login{padding:0;background:#F4F2EC}
  .logincard{grid-template-columns:1fr;max-width:460px;border-radius:0;box-shadow:none;min-height:100vh}
  .login-art{display:none}
  .login-top{display:flex;justify-content:center;margin-bottom:6px}
  .login-top img{height:68px}
}

[data-theme="dark"] .login{background:var(--bg)}
[data-theme="dark"] .logincard{background:var(--surface)}
[data-theme="dark"] .login-box .input{background:var(--surface-2)}
[data-theme="dark"] .login-top .mark-light{display:none}
[data-theme="dark"] .login-top .mark-dark{display:block}

/* Some people get motion sick, and it is one query. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ---------------------------------------------------------------- the shell */
.shell{display:grid;grid-template-columns:232px 1fr;min-height:100vh}

.side{background:var(--surface);border-right:1px solid var(--border);padding:14px 12px;
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.sidehead{display:flex;align-items:center;gap:10px;padding:10px;margin-bottom:10px;
  background:var(--surface-3);border-radius:14px}
.sidehead img{height:34px;width:auto;display:block}
.sidehead .lock-light{display:block}
.sidehead .lock-dark{display:none}
[data-theme="dark"] .sidehead .lock-light{display:none}
[data-theme="dark"] .sidehead .lock-dark{display:block}

.nav{display:flex;flex-direction:column;gap:2px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:10px;
  text-decoration:none;color:var(--muted);font-size:13.5px;
  transition:background .12s ease, color .12s ease}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.on{background:rgba(241,186,41,.16);color:var(--text);font-weight:600}
.nav a svg{flex:none;opacity:.8}

.side-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--border);
  font-size:12px;color:var(--faint)}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;
  border-bottom:1px solid var(--border);background:var(--surface);position:sticky;top:0;z-index:5}
.topbar h1{font-size:16px;margin:0;font-weight:650}
.topbar .grow{flex:1}
.iconbtn{width:34px;height:34px;border:1px solid var(--border);border-radius:10px;
  background:var(--surface);color:var(--muted);display:grid;place-items:center;cursor:pointer;
  transition:border-color .12s ease, color .12s ease}
.iconbtn:hover{border-color:var(--border-strong);color:var(--text)}
.avatar{width:34px;height:34px;border-radius:10px;background:var(--brand);color:var(--brand-ink);
  display:grid;place-items:center;font-weight:700;font-size:12.5px}
.page{padding:22px;flex:1}

/* ---------------------------------------------------------------- cards and lists */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg)}
.card-head{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--border)}
.card-head h2{font-size:14px;margin:0;font-weight:650}
.card-pad{padding:16px}
.muted{color:var(--muted)}
.faint{color:var(--faint)}
.mono{font-variant-numeric:tabular-nums}

.pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;background:var(--surface-3);color:var(--muted)}
.pill.ok{background:rgba(46,125,79,.12);color:var(--ok)}
.pill.warn{background:rgba(180,128,26,.14);color:var(--warn)}
.pill.bad{background:rgba(180,53,44,.12);color:var(--bad)}

.pickable{display:block;width:100%;text-align:left;text-decoration:none;color:inherit;
  border:1px solid var(--border);border-radius:12px;padding:11px 13px;margin-bottom:8px;
  background:var(--surface);transition:border-color .12s ease, background .12s ease}
.pickable:hover{border-color:var(--border-strong)}
.pickable.on{border-color:var(--brand);background:rgba(241,186,41,.10)}
.pickable.off{opacity:.55;cursor:not-allowed}
.pickable .t{font-weight:600;font-size:13.5px}
.pickable .s{font-size:12px;color:var(--muted);margin-top:2px}
.pickable .why{font-size:12px;color:var(--bad);margin-top:4px}

/* ---------------------------------------------------------------- dispatch board */
.board{display:grid;grid-template-columns:288px 288px 1fr;gap:16px;align-items:start}
.kv{display:flex;justify-content:space-between;gap:12px;padding:7px 0;
  border-bottom:1px solid var(--border);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600;text-align:right}
.stat{padding:12px 0}
.stat .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-size:23px;font-weight:700;letter-spacing:-.4px;margin-top:2px}
.stat .c{font-size:11.5px;color:var(--faint);margin-top:2px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sep{height:1px;background:var(--border);margin:14px 0}
.notice{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;
  padding:10px 12px;font-size:12.5px;color:var(--muted)}

@media (max-width:1180px){.board{grid-template-columns:1fr}}
@media (max-width:900px){.shell{grid-template-columns:1fr}.side{position:static;height:auto}}

/* ---------------------------------------------------------------- forms */
.formwrap{max-width:560px}
.formwrap .card-pad{padding:20px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.hint{display:block;font-size:12px;color:var(--faint);margin-top:4px}
.err{display:block;font-size:12px;color:var(--bad);margin-top:4px}
.input.bad{border-color:var(--bad)}
select.input{appearance:none;background-image:none}
.formfoot{display:flex;gap:10px;align-items:center;margin-top:6px}
.btn-ghost{background:transparent;border:1px solid var(--border-strong);color:var(--muted)}
.checkrow{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 14px}
.checkrow label{display:flex;align-items:center;gap:7px;font-size:13px;cursor:pointer}
/* The code screen. Wide enough for a desk, with the code beside the record it
   belongs to rather than stacked like a telephone screen. */
.codewrap{max-width:720px}
.codegrid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:center}
.codebox{font-size:34px;font-weight:700;letter-spacing:6px;text-align:center;
  padding:28px 14px;background:var(--surface-3);border-radius:14px;
  font-variant-numeric:tabular-nums}
@media (max-width:720px){.codegrid{grid-template-columns:1fr}}
.headbtn{margin-left:auto}
@media (max-width:640px){.two{grid-template-columns:1fr}}

/* An action that belongs to the screen rather than to a form. Sits in the top bar. */
.btn-top{height:34px;padding:0 13px;border:1px solid var(--border-strong);border-radius:10px;
  background:var(--surface);color:var(--text);font:inherit;font-size:12.5px;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;cursor:pointer;
  transition:border-color .12s ease, background .12s ease}
.btn-top:hover{border-color:var(--brand);background:var(--surface-2)}
.btn-top svg{opacity:.7}
.done{border:1px solid var(--ok);color:var(--ok);background:transparent;border-radius:10px;
  padding:10px 12px;font-size:12.5px;margin-bottom:16px}
.returnbox{margin-top:14px}
.returnbox summary{font-size:12.5px;color:var(--muted);cursor:pointer;list-style:none}
.returnbox summary::-webkit-details-marker{display:none}
.returnbox summary:hover{color:var(--text)}
.returnbox[open] summary{color:var(--text);font-weight:600}
.availrow{display:flex;gap:8px;align-items:center;margin-top:10px}
.availrow .input{height:34px;padding:0 10px;font-size:12.5px;max-width:190px}

/* The setup and password screens use the same card as the sign in screen. A lone
   narrow column on a desk reads as a telephone form, and these open on a desktop. */
.login-box.wide{max-width:420px;padding:18px 0 26px}
.login-box .lead{font-size:13px;color:var(--muted);text-align:center;margin:0 0 20px;line-height:1.55}
textarea.input{height:auto;min-height:76px;padding:10px 12px;line-height:1.5;resize:vertical}

/* The password rules, ticked as they are met. A filled box rather than a glyph. */
.rules{list-style:none;margin:-6px 0 16px;padding:0;display:grid;gap:5px}
.rules li{position:relative;padding-left:22px;font-size:12px;color:var(--faint);
  transition:color .12s ease}
.rules li::before{content:"";position:absolute;left:0;top:3px;width:12px;height:12px;
  border:1px solid var(--border-strong);border-radius:4px;background:var(--surface);
  transition:background .12s ease, border-color .12s ease}
.rules li.met{color:var(--ok)}
.rules li.met::before{background:var(--ok);border-color:var(--ok)}
.linkish{background:none;border:0;padding:0;font:inherit;font-size:12.5px;color:var(--faint);
  cursor:pointer;text-decoration:underline}
.linkish:hover{color:var(--text)}

/* Dashboard counts. Each one is a link to the screen behind it. */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:14px}
.tile{display:block;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:16px 18px;
  transition:border-color .12s ease, transform .09s ease}
.tile:hover{border-color:var(--brand-strong,var(--brand));transform:translateY(-1px)}
.tile .l{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
.tile .v{font-size:30px;font-weight:700;letter-spacing:-.6px;margin-top:4px}
.tile.bad .v{color:var(--bad)}
.tile.bad{border-color:rgba(180,53,44,.35)}

/* ---------------------------------------------------------------- movement
   Cheap on purpose. Everything here is a transform or an opacity, which the
   browser does on the compositor, so it costs the server nothing and the
   telephone nothing that matters. Anybody who has asked their machine to stop
   animating gets none of it. */

/* Arriving on a screen. The content lifts into place once, quickly. */
@keyframes page-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page{animation:page-in .18s ease both}
.login .logincard{animation:page-in .22s ease both}

/* Leaving a screen. The skeleton stands in while the next one is fetched, so a
   slow connection shows the shape of what is coming rather than a white pane. */
@keyframes shimmer{from{background-position:-320px 0}to{background-position:320px 0}}
.skel{display:grid;gap:14px}
.skel .row{height:74px;border:1px solid var(--border);border-radius:var(--r-lg);
  background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 40%,
    var(--surface) 80%);background-size:320px 100%;background-repeat:repeat-x;
  animation:shimmer 1.1s linear infinite}
.skel .row:nth-child(2){opacity:.75}
.skel .row:nth-child(3){opacity:.5}
.skel .row:nth-child(4){opacity:.3}

/* A pressed row or tile says it was pressed before the next screen arrives. */
.pickable:active,.tile:active,.btn-top:active{transform:translateY(1px)}

@media (prefers-reduced-motion:reduce){
  .page,.login .logincard{animation:none}
  .skel .row{animation:none}
  .pickable:active,.tile:active,.btn-top:active{transform:none}
  .btn-primary:active{transform:none}
}
.tile.flat{cursor:default}
.tile.flat:hover{border-color:var(--border);transform:none}