body{margin:0;background:#F7F8F9;font-family:Barlow,system-ui,sans-serif}
a{color:#1F2933;text-decoration:none}a:hover{color:#8A6400}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:.2}}
[data-goto],[data-stub],[data-nudge],[data-back]{cursor:pointer}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,16px) scale(.97)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes toastOut{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,10px)}}

/* ---------- top bar + nav (shared by every demo page) ---------- */
.demo-topbar{display:flex;align-items:center;flex-wrap:wrap;column-gap:22px;background:#1F2933;padding:0 20px;position:sticky;top:0;z-index:10}
.demo-brand{display:flex;align-items:center;gap:8px;height:56px}
.demo-brand img{width:24px;height:24px}
.demo-brand-name{font:700 18px/1 Barlow;letter-spacing:.14em;color:#fff}
.demo-brand-tag{font:500 10px/1 'IBM Plex Mono';letter-spacing:.16em;color:#F5B700}
/* scroll shadows: the edge glow only shows when there is hidden content to scroll to */
.demo-nav{display:flex;gap:4px;align-self:stretch;align-items:stretch;min-width:0;overflow-x:auto;scrollbar-width:none;
  background:
    linear-gradient(90deg,#1F2933 30%,rgba(31,41,51,0)) left center,
    linear-gradient(270deg,#1F2933 30%,rgba(31,41,51,0)) right center,
    radial-gradient(farthest-side at 0 50%,rgba(245,183,0,.4),rgba(245,183,0,0)) left center,
    radial-gradient(farthest-side at 100% 50%,rgba(245,183,0,.4),rgba(245,183,0,0)) right center;
  background-repeat:no-repeat;
  background-size:36px 100%,36px 100%,12px 100%,12px 100%;
  background-attachment:local,local,scroll,scroll}
.demo-nav::-webkit-scrollbar{display:none}
.demo-nav a{display:flex;align-items:center;padding:0 10px;font:500 13px/1 Barlow;color:#9AA5B1;white-space:nowrap}
.demo-nav a:hover{color:#fff}
.demo-nav a.active{color:#fff;box-shadow:inset 0 -2px 0 #F5B700}
.demo-topbar-right{display:flex;align-items:center;gap:14px;margin-left:auto;height:56px}
.demo-needs-pill{display:flex;align-items:center;gap:7px;background:rgba(245,183,0,.14);border:1px solid rgba(245,183,0,.4);border-radius:5px;padding:5px 10px}
.demo-needs-pill>span:first-child{width:6px;height:6px;border-radius:50%;background:#F5B700;animation:pulseDot 1.6s infinite}
.demo-needs-pill>span:last-child{font:600 11px/1 'IBM Plex Mono';color:#F5B700}
.demo-account{display:flex;align-items:center;gap:8px;position:relative;cursor:pointer}
.demo-avatar{width:28px;height:28px;border-radius:5px;background:#E4E7EB;display:flex;align-items:center;justify-content:center;font:700 11px/1 Barlow;color:#1F2933}
.demo-account-name{font:500 13px/1 Barlow;color:#E4E7EB}
/* account popout nav — full nav is always reachable from the MC avatar,
   even when the scrolling nav row is cut off on narrow screens */
.demo-popnav{display:none;position:absolute;top:44px;right:0;flex-direction:column;min-width:190px;background:#1F2933;border:1px solid #3E4C59;border-radius:8px;box-shadow:0 14px 34px rgba(0,0,0,.4);padding:6px;z-index:30}
.demo-popnav.open{display:flex}
.demo-popnav-label{padding:9px 12px 8px;border-bottom:1px solid #3E4C59;margin-bottom:4px;font:600 10px/1 'IBM Plex Mono';letter-spacing:.12em;color:#9AA5B1;text-transform:uppercase;white-space:nowrap}
.demo-popnav a{display:block;padding:10px 12px;border-radius:5px;font:500 13px/1 Barlow;color:#9AA5B1;white-space:nowrap}
.demo-popnav a:hover{background:#323F4B;color:#fff}
.demo-popnav a.active{color:#fff;box-shadow:inset 2px 0 0 #F5B700;background:#323F4B}
@media (max-width:900px){
  .demo-nav{order:3;flex-basis:100%;align-self:auto;height:44px;margin:0 -20px;padding:0 14px;border-top:1px solid #3E4C59}
  .demo-account-name{display:none}
}
@media (max-width:430px){.demo-brand-tag{display:none}}

/* ---------- page scaffolding ---------- */
.demo-main{width:100%;max-width:1440px;margin:0 auto;box-sizing:border-box}
.demo-pagehead{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:12px}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.demo-cols{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.demo-cols.side-340{grid-template-columns:minmax(0,1fr) 340px;gap:18px}
@media (max-width:1024px){.demo-cols,.demo-cols.side-340{grid-template-columns:minmax(0,1fr)}}
@media (max-width:900px){.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.stat-grid{grid-template-columns:minmax(0,1fr)}}

/* dashboard "needs your decision" rows */
.decision-row{display:grid;grid-template-columns:88px minmax(0,1fr) 118px 150px;align-items:center;gap:14px;padding:14px 16px}
.decision-price{text-align:right}
@media (max-width:720px){
  .decision-row{grid-template-columns:88px minmax(0,1fr);gap:10px 14px}
  .decision-price{text-align:left}
}

/* post / post-view field grids */
.field-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 18px}
@media (max-width:860px){.field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.field-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- tables (board / postings / settlement) ---------- */
.board-row{display:grid;grid-template-columns:98px minmax(0,1fr) 128px 92px 110px 116px 128px;align-items:center}
.posting-row{display:grid;grid-template-columns:120px minmax(0,1fr) 150px 120px 150px 120px;align-items:center}
.invoice-row{display:grid;grid-template-columns:110px minmax(0,1fr) 150px 110px 120px 130px;align-items:center}
.table-head{padding:10px 18px;border-bottom:1px solid #E4E7EB;font:600 10px/1 'IBM Plex Mono';letter-spacing:.1em;color:#9AA5B1}
/* cells carry semantic c-* classes (set in app.js) so the collapse below
   survives column reordering — only the desktop grid-template-columns above
   depend on source order */
@media (max-width:900px){
  .table-head{display:none}
  .board-row,.posting-row,.invoice-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 16px}
  .board-row .c-route,.posting-row .c-route,.invoice-row .c-ride{grid-column:1/-1;order:3}
  /* board: countdown | low bid, route, vehicle | floor, bidders, CTA */
  .board-row .c-when{order:1}
  .board-row .c-low{order:2;text-align:right}
  .board-row .c-vehicle{order:4}
  .board-row .c-floor{order:5;text-align:right}
  .board-row .c-bidders{order:6}
  .board-row .c-cta{order:7;grid-column:1/-1}
  /* postings: status | payout, route, affiliate | floor, CTA */
  .posting-row .c-status{order:1}
  .posting-row .c-payout{order:2;text-align:right}
  .posting-row .c-awarded{order:4}
  .posting-row .c-floor{order:5;text-align:right}
  .posting-row .c-cta{order:6;grid-column:1/-1}
  /* settlement: id | status, ride, party | amount, due */
  .invoice-row .c-id{order:1}
  .invoice-row .c-status{order:2;justify-self:end}
  .invoice-row .c-party{order:4}
  .invoice-row .c-amount{order:5;text-align:right}
  .invoice-row .c-due{order:6}
  /* small mono labels for cells whose meaning came from the hidden header */
  .board-row .c-floor::before,.board-row .c-bidders::before,
  .posting-row .c-awarded::before,.posting-row .c-floor::before,
  .invoice-row .c-due::before{display:block;font:600 9px/1 'IBM Plex Mono';letter-spacing:.1em;color:#9AA5B1;margin-bottom:5px}
  .board-row .c-floor::before{content:"FLOOR"}
  .board-row .c-bidders::before{content:"BIDDERS"}
  .posting-row .c-awarded::before{content:"AWARDED TO"}
  .posting-row .c-floor::before{content:"FLOOR"}
  .invoice-row .c-due::before{content:"DUE"}
}

/* award page bid cards */
.bid-card{display:grid;grid-template-columns:minmax(0,1fr) 150px 130px;gap:16px;align-items:center}
@media (max-width:760px){
  .bid-card{grid-template-columns:minmax(0,1fr) auto}
  .bid-card>:nth-child(3){grid-column:1/-1}
}

/* invoice document */
.invoice-body{padding:30px 36px 32px}
.invoice-parties{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
@media (max-width:600px){
  .invoice-body{padding:22px 18px 24px}
  .invoice-parties{grid-template-columns:1fr}
}