/* Driver status page — matches the client-approved "Working for the future" mockup.
   Sized to fit all 8 loads on one screen (no scrolling) by filling the viewport
   height and letting the rows share the available space. */
:root{
  --bg:#080b08;
  --ink:#ffffff;
  --green:#39e070;
  --green-deep:#0e1f14;
  --green-muted:#6f9c82;
  --red:#ec3d3d;
  --red-deep:#241010;
  --line:rgba(255,255,255,.09);
  --col:clamp(64px,22vw,96px);      /* width of each ENTER/STOP column */
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body.page-driver{
  height:100dvh;overflow:hidden;
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(57,224,112,.16), rgba(57,224,112,0) 60%),
    var(--bg);
  color:var(--ink);
  font-family:"Oswald",system-ui,Arial,sans-serif;
  font-weight:400;
  display:flex;justify-content:center;
  padding:clamp(6px,1.4vh,14px);
}
.driver{
  width:100%;max-width:640px;height:100%;
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(10px,2vh,26px) clamp(14px,3.4vw,26px);
  display:flex;flex-direction:column;overflow:hidden;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0));
}

/* Header */
.driver-head{text-align:center;flex:0 0 auto;margin-bottom:clamp(6px,1.4vh,18px);}
.tagline{
  text-transform:uppercase;letter-spacing:.42em;
  font-weight:400;font-size:clamp(10px,1.5vh,13px);color:var(--green-muted);
  margin-bottom:clamp(4px,1vh,10px);padding-left:.42em;
}
.headline{
  margin:0;text-transform:uppercase;font-weight:700;
  font-size:clamp(22px,5.2vh,46px);line-height:1.02;letter-spacing:.01em;
}
.headline .hl{color:var(--green);text-shadow:0 0 22px rgba(57,224,112,.55);}
.subhead{
  margin-top:clamp(4px,1vh,12px);text-transform:uppercase;letter-spacing:.24em;
  font-weight:300;font-size:clamp(10px,1.5vh,13px);color:var(--green-muted);padding-left:.24em;
}

/* Column headers + rows share one grid so lights align under labels */
.col-head,.row{
  display:grid;
  grid-template-columns:1fr var(--col) var(--col);
  align-items:center;
}
.col-head{
  flex:0 0 auto;padding:0 4px clamp(4px,1vh,10px);border-bottom:1px solid var(--line);
  text-transform:uppercase;letter-spacing:.22em;font-weight:400;font-size:clamp(10px,1.4vh,13px);
}
.col-load{color:var(--green-muted);}
.col-head .col-cell{text-align:center;}
.col-head .col-cell:nth-of-type(2){color:var(--green);}
.col-head .col-cell:last-child{color:var(--red);}

/* Rows fill the remaining height and split it evenly across the 8 loads */
.rows{list-style:none;margin:0;padding:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;}
.row{
  flex:1 1 0;min-height:0;padding:0 4px;border-bottom:1px solid var(--line);
  opacity:0;transform:translateY(4px);animation:rowin .35s ease forwards;
}
@keyframes rowin{to{opacity:1;transform:none;}}
.load{
  text-transform:uppercase;font-weight:600;
  font-size:clamp(16px,min(6.2vw,3.9vh),32px);letter-spacing:.01em;color:#fff;
  line-height:1;white-space:nowrap;
}

/* Indicator lights (scale with viewport height so they always fit) */
.light{
  justify-self:center;
  width:clamp(34px,6.8vh,60px);height:clamp(34px,6.8vh,60px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transition:box-shadow .25s ease, background .25s ease, opacity .25s ease;
}
.light svg{width:50%;height:50%;opacity:0;transition:opacity .2s ease;}
.light.enter{background:radial-gradient(circle at 50% 35%, #10261a, #0a1710);border:1px solid rgba(57,224,112,.15);}
.light.stop{background:radial-gradient(circle at 50% 35%, #201010, #180b0b);border:1px solid rgba(236,61,61,.15);}
.light.enter.on{
  background:radial-gradient(circle at 50% 32%, #7dffb0, #17c257 62%, #0e9b41);
  box-shadow:0 0 26px rgba(57,224,112,.6),inset 0 2px 6px rgba(255,255,255,.4);
  border-color:transparent;
}
.light.stop.on{
  background:radial-gradient(circle at 50% 32%, #ff8a8a, #e23b3b 60%, #b21f1f);
  box-shadow:0 0 26px rgba(236,61,61,.6),inset 0 2px 6px rgba(255,255,255,.35);
  border-color:transparent;
}
.light.on svg{opacity:1;}
.light svg path{stroke:#08130b;stroke-width:3.4;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.light.stop svg path{stroke:#1c0707;}

/* Footer + status */
.driver-foot{
  text-align:center;flex:0 0 auto;margin-top:clamp(6px,1.4vh,18px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(3px,.9vh,8px);
  text-transform:uppercase;letter-spacing:.22em;font-weight:400;font-size:clamp(10px,1.4vh,13px);
  color:var(--green-muted);padding-left:.22em;
}
.tagline-foot{margin:0;}
.status-line{
  flex:0 0 auto;margin-top:clamp(4px,1vh,14px);text-align:center;font-size:clamp(9px,1.2vh,11px);
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.32);
  display:flex;gap:8px;align-items:center;justify-content:center;
}
.conn{width:8px;height:8px;border-radius:50%;background:#39e070;box-shadow:0 0 8px #39e070;}
.conn.stale{background:#e0a53d;box-shadow:0 0 8px #e0a53d;}
.conn.down{background:#ec3d3d;box-shadow:0 0 8px #ec3d3d;}