/* The pay portal. Phone first, because every person using it is a truck owner or driver looking at their phone.
   Same palette as Selene so it feels like one company, but none of the console's chrome. */
:root{
  --ink:#0a0d16;--panel:#141b2b;--panel-2:#0f1522;--line:#222c42;
  --text:#e8ebf2;--muted:#8b95a8;--brass:#e3a857;--ok:#7fd8a0;--danger:#f08a8a;--info:#7fb2ff;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%}
body{background:var(--ink);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;
  padding:0 0 env(safe-area-inset-bottom)}
#app{max-width:560px;margin:0 auto;padding:14px}
/* The portal is built phone-first at 560px, which is right for a hero figure and a week list. The load sheet is
 * eight columns of a spreadsheet, so on a real screen the page opens up enough to show it whole -- "bigger on a
 * bigger screen, fits an iPhone" -- rather than clipping Ticket # off the end. */
@media (min-width:720px){ #app{max-width:1040px} }
.hidden{display:none!important}
.center{text-align:center}
.card{background:var(--panel-2);border:1px solid var(--line);border-radius:14px;padding:20px 18px;margin:40px 0}
.brand{font-size:19px;font-weight:700;letter-spacing:.01em}
/* The sub-line under the brand used to carry the gap above the form (margin 6px 0 16px). It is gone, so the
   brand carries it now — scoped to #login so nothing else on the page moves. */
#login .brand{margin-bottom:16px}
.sub{color:var(--muted);font-size:13px;margin:6px 0 16px}
/* The owner line under the brand (see the comment in pay.html). The brand carries the gap above the form, so
   these two sit BETWEEN them and give that margin back, or the form would drift down the card. */
#login .brand{margin-bottom:6px}
.co{font-size:13.5px;font-weight:600;color:var(--txt);letter-spacing:.01em}
.who-sub{margin:6px 0 16px;line-height:1.5;max-width:34ch;margin-left:auto;margin-right:auto}
.sub2{color:var(--muted);font-size:11.5px}
.fld{display:block;width:100%;height:44px;margin:0 0 10px;padding:0 12px;background:var(--panel);color:var(--text);
  border:1px solid var(--line);border-radius:9px;font-size:16px;font-family:inherit}
.fld:focus{outline:none;border-color:var(--brass)}
.btn{display:block;width:100%;height:44px;background:var(--brass);color:#231802;border:none;border-radius:9px;
  font-size:15px;font-weight:600;font-family:inherit;cursor:pointer}
.btn:active{transform:scale(.99)}
.btn[disabled]{opacity:.6}
.btn-ghost{background:transparent;color:var(--text);border:1px solid var(--line);font-weight:500}
.lnk{background:none;border:none;color:var(--muted);font-size:12.5px;font-family:inherit;cursor:pointer;padding:4px}
.err{color:var(--danger);font-size:12.5px;min-height:18px;margin:8px 0 0}
.fine{color:var(--muted);font-size:11px;margin:14px 0 0;line-height:1.5}
/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0 12px;border-bottom:1px solid var(--line);margin-bottom:14px}
.who{display:flex;align-items:center;gap:9px;font-size:13.5px}
.av{width:32px;height:32px;border-radius:50%;background:#12241a;color:var(--ok);display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:600;flex:none}
/* week list */
.wk{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;text-align:left;
  background:var(--panel-2);border:1px solid var(--line);border-radius:11px;padding:11px 13px;margin:0 0 8px;
  color:var(--text);font-family:inherit;font-size:14px;cursor:pointer}
.wk:active{border-color:var(--brass)}
.wk b{font-size:15px}
.wk .amt{font-weight:700;font-variant-numeric:tabular-nums}
/* statement */
.hero{background:#101c2a;border-radius:12px;padding:14px 15px;margin:0 0 12px}
.hero .big{font-size:29px;font-weight:700;margin:3px 0;font-variant-numeric:tabular-nums}
.row{display:flex;justify-content:space-between;gap:10px;padding:4px 0;font-variant-numeric:tabular-nums;font-size:13.5px}
.row.tot{border-top:1px solid var(--line);margin-top:6px;padding-top:7px;font-weight:600}
.row .lab{color:var(--muted)}
.neg{color:var(--danger)}
.sec{color:#7f8ca3;font-size:10px;text-transform:uppercase;letter-spacing:.07em;margin:14px 0 4px}
.chip{display:inline-block;padding:2px 8px;border-radius:5px;font-size:11px;font-weight:600;
  border:1px solid var(--line);background:var(--panel);color:var(--muted)}
.chip.ok{border-color:#2f6a48;background:#12241a;color:var(--ok)}
/* A ticket is a small BLOCK now (job + amount, then what was hauled, then the quantity and ticket number).
 * It was display:flex, so the moment it gained inner rows they laid out as three columns and every load read
 * sideways. */
.tk{display:block;padding:7px 0;font-size:13px;border-bottom:1px solid #161d2e;font-variant-numeric:tabular-nums}
.tk:last-child{border-bottom:none}
.tkd{color:var(--fg);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcard{background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:13px 14px;margin:0 0 12px}
.empty{color:var(--muted);font-size:13px;text-align:center;padding:26px 10px;border:1px dashed var(--line);border-radius:12px}
@media(min-width:520px){ #app{padding:20px} }

/* The owner's statement as the workbook they already read: labels down the left, a column per truck they own.
   Fit-to-width zoom (set in pay.js) shrinks it until the columns fit a phone and never enlarges past 1:1.
   border-collapse must be `separate` for the sticky label column to keep its row lines in Safari. */
.gwrap{overflow:auto;max-width:100%}
.g{border-collapse:separate;border-spacing:0;min-width:100%;font-size:12.5px;font-variant-numeric:tabular-nums}
.g th,.g td{padding:5px 9px;text-align:right;white-space:nowrap;border-bottom:1px solid #1a2236;vertical-align:top}
.g th{font-size:11px;color:var(--muted);font-weight:600}
.g th b{color:var(--text);font-size:13px}
.gsub{font-weight:400;font-size:9.5px;color:var(--muted);white-space:normal;max-width:110px;margin-left:auto}
.gsub2{font-weight:400;font-size:9.5px;color:var(--muted)}
.g .gl{text-align:left;position:sticky;left:0;background:var(--panel-2);z-index:2;color:var(--muted)}
.g tr:first-child .gl{z-index:3}
.g .gind{padding-left:18px}
.g .gall{color:var(--muted)}
.g .gb td,.g .gb .gl{font-weight:700;color:var(--text)}
.g .gsec td{color:#7f8ca3;font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;padding-top:11px;border-bottom:none;text-align:left}
.g .gtot td{background:#101c2a;font-weight:700;color:var(--text);border-top:1px solid #2a3550}
.g .gtot .gl{background:#101c2a;color:var(--text)}

/* Loads by day: a strip he can check against his own week. */
.dayrow{display:flex;align-items:center;gap:10px;padding:9px 2px;border-top:1px solid var(--line)}
.dayrow:first-of-type{border-top:none}
.dayn{font-weight:700;min-width:74px}
.dayc{color:var(--muted);font-size:13px;flex:1}
.days{font-variant-numeric:tabular-nums;font-weight:600}

/* EVERY LOAD, the same columns as the MAB sheet. A real table where there is room for one; below 720px each row
 * folds into a labelled card, so a phone never scrolls sideways and no column is dropped to make it fit. */
.ldwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ldtbl{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.ldtbl th{text-align:left;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  font-weight:700;padding:0 8px 6px 0;border-bottom:1px solid var(--line);white-space:nowrap}
.ldtbl td{padding:7px 8px 7px 0;border-bottom:1px solid #161d2e;vertical-align:top}
.ldtbl .ld-n{text-align:right;white-space:nowrap}
.ldtbl .ld-g{font-weight:700}
.ldtbl .ld-t,.ldtbl .ld-d{white-space:nowrap;color:var(--muted)}
.ldtbl .ld-tk{white-space:nowrap;font-weight:700}
.ldtbl .ld-mat{color:var(--muted)}
.tkoff{color:#f0c070;font-weight:400}

@media (max-width:719px){
  /* A table row folded into a card. The COLUMN ORDER of a spreadsheet (unit, then quantity, then rate) reads as
   * nonsense stacked -- it came out "· LoadQty 1· Rate 84.00" -- so the parts are reordered here to read the way
   * a person says it: 1 Load @ 84.00. Nothing is dropped and nothing scrolls sideways. */
  .ldwrap{overflow-x:visible}
  .ldtbl,.ldtbl tbody,.ldtbl td{display:block;width:100%}
  .ldtbl thead{display:none}
  .ldtbl tr{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:5px;
    border-bottom:1px solid var(--line);padding:10px 0}
  .ldtbl tr:last-child{border-bottom:none}
  .ldtbl td{border:none;padding:0;text-align:left!important;width:auto}
  .ldtbl td:empty{display:none}
  .ldtbl .ld-d{order:1;color:var(--muted);font-size:12px}
  /* the truck sits beside the date on a phone: an owner reading six trucks needs to know whose load this is */
  .ldtbl .ld-tk{order:1;font-size:12px;font-weight:700}
  .ldtbl .ld-tk::before{content:"\00b7  ";font-weight:400;color:var(--muted)}
  .ldtbl .ld-job{order:2;flex:1 0 100%;font-weight:700;font-size:14.5px;white-space:normal;margin-top:1px}
  .ldtbl .ld-d{flex:0 0 auto}
  .ldtbl .ld-mat{order:3;flex:1 0 100%;color:var(--muted);font-size:12.5px}
  .ldtbl td[data-l="Qty"]{order:4;color:var(--muted);font-size:12.5px;margin-top:2px}
  .ldtbl td[data-l="Unit"]{order:5;color:var(--muted);font-size:12.5px;margin-top:2px}
  .ldtbl td[data-l="Rate"]{order:6;color:var(--muted);font-size:12.5px;margin-top:2px}
  .ldtbl td[data-l="Rate"]::before{content:"@ ";}
  .ldtbl .ld-g{order:7;flex:1 0 100%;font-size:16px;font-weight:700;margin-top:3px}
  .ldtbl .ld-t{order:8;flex:1 0 100%;color:var(--muted);font-size:12px}
  .ldtbl td[data-l="Ticket"]::before{content:"ticket ";}
}


/* Month groups in the week list (Daniel 2026-08-13): the header answers "how much did I make that month"
   without adding cards in your head. Weeks group by their week-ENDING date, newest month first. */
.mo{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:18px 0 7px;padding:0 2px}
.mo b{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:#c9d2e6}
.mo .mosub{color:var(--muted);font-size:11px;margin-left:7px;text-transform:none;letter-spacing:0;font-weight:400}
.mo .mot{font-weight:700;font-variant-numeric:tabular-nums;font-size:14px}
/* NEW = paid since the last time THIS person opened the portal; clears once they have seen the list. */
.wk.new{border-color:var(--brass);box-shadow:0 0 0 1px rgba(227,168,87,.28)}
.newchip{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#231802;background:var(--brass);border-radius:5px;padding:2px 7px;margin-left:7px;vertical-align:2px}
.newdot{width:6px;height:6px;border-radius:50%;background:#231802;animation:paypulse 1.15s ease-in-out infinite}
@keyframes paypulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.newdot{animation:none}}

/* Language switch (Daniel 2026-08-14). Two words, no flags — a flag picks a country and these drivers
   come from many. Quiet until chosen, so it never competes with the money on the page. */
.langpick{display:flex;gap:6px;align-items:center;justify-content:center;margin:14px 0 2px;opacity:.75}
.langpick .i18n-btn{font-size:13px;padding:4px 8px;background:none;border:0;cursor:pointer;color:inherit;opacity:.6}
.langpick .i18n-btn.on{opacity:1;font-weight:700;text-decoration:underline}
.langpick .i18n-sep{opacity:.4}

/* Today's fuel price on an owner's screen. The delta is the point — a price on its own is just a price. */
.fp-row{display:flex;gap:10px;flex-wrap:wrap}
.fp-card{flex:1 1 150px;background:rgba(255,255,255,.03);border:1px solid var(--line,#243044);border-radius:10px;padding:11px 12px}
.fp-k{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;opacity:.7;margin-bottom:3px}
.fp-p{font-size:25px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fp-d{font-size:12px;font-variant-numeric:tabular-nums;opacity:.75;margin-top:1px}
.fp-d.up{color:#e0556b;opacity:1}
.fp-d.down{color:#5fb98e;opacity:1}

/* The year drill-in: one block per paid week, its deductions indented under what was paid. */
.wkbox { border: 1px solid var(--line, #222c42); border-radius: 10px; padding: 9px 11px; margin: 8px 0; }
.wkbox .row { margin: 0; }
.wkbox .row.sub .lab { padding-left: 10px; opacity: .85; }

/* The year drill-in's month rows: same shape as the statement list, plus an open/closed chevron. */
.taxmo { cursor: pointer; }
.taxmo .mochev { opacity: .55; font-size: 11px; margin-left: 2px; }
.leftrow { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 7px; }