/* Simple transport board — reference/transport-v75/transport.css.
   Scoped under .tp so the prototype paint never leaks into the V7 shell. */
.tp{max-width:1100px;margin:auto;color:#28253f;--tp-purple:#5c508e}
.tp h1{font-size:28px;white-space:normal;margin:6px 0}
.tp h2{font-size:19px;margin:0 0 12px}
.tp p,.tp small{color:#777186}
.tp-eyebrow{text-transform:uppercase;letter-spacing:1.6px;color:#69558b;font-size:11px;font-weight:800}
.tp-head,.tp-row,.tp-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tp-head{margin-bottom:22px}
.tp-card{padding:24px;border:1px solid #e6e2ef;border-radius:20px;background:#fff;margin-bottom:16px}
.tp button{font:inherit;cursor:pointer;min-height:44px;padding:10px 16px;border:1px solid #ded8e9;border-radius:12px;background:white;color:#594879}
.tp button.primary{background:var(--tp-purple);border-color:var(--tp-purple);color:#fff}
.tp button:disabled{opacity:.45;cursor:not-allowed}
.tp button:focus-visible,.tp input:focus-visible,.tp select:focus-visible{outline:3px solid #ab9bcf;outline-offset:2px}
.tp-tabs{display:flex;gap:8px;margin:20px 0;overflow:auto}
.tp-tabs button{white-space:nowrap}
.tp-tabs .active{background:#5c508e;color:#fff}
.tp-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:20px;margin-bottom:16px}
.tp-badge{font-size:12px;padding:5px 10px;border-radius:20px;background:#f1edf9;color:#655184}
.tp-badge.green{background:#e7f5ed;color:#286e52}
.tp-badge.red{background:#fff0f0;color:#9a3248}
.tp-count{font-size:36px;font-weight:800;color:#5c508e;line-height:1.2}
.tp-student{display:flex;gap:13px;align-items:center}
.tp-avatar{display:grid;place-items:center;width:48px;height:48px;flex-shrink:0;border-radius:15px;background:#efeafa;color:#655088;font-weight:700}
.tp-list{display:grid;gap:12px}
.tp-ride{padding:17px;border:1px solid #e8e3ef;border-radius:15px}
.tp-ride p{margin:7px 0;font-size:13px}
.tp-empty{text-align:center;padding:30px 12px;color:#746c84}
.tp-notice{padding:13px 16px;border-radius:12px;background:#f0edf8;margin-bottom:16px;line-height:1.6}
.tp-error{background:#fff0f0;color:#9a3248}
.tp-success{background:#e7f5ed;color:#286e52}
.tp label{display:grid;gap:7px;margin:12px 0;font-size:13px;font-weight:600}
.tp input,.tp select{font:inherit;width:100%;box-sizing:border-box;min-width:0;border:1px solid #dcd5e9;border-radius:10px;padding:12px;background:#fff}
.tp-qrcode{width:160px;height:160px;display:grid;place-items:center;margin:16px auto;text-align:center;font-size:12px;color:#746c84;background:#fff;border-radius:12px}
.tp-qrcode svg{display:block;width:100%;height:100%}
.tp-scan{margin:12px 0;border-radius:14px;overflow:hidden;background:#141026;aspect-ratio:16/9;max-height:420px}
.tp-scan video{display:block;width:100%;height:100%;object-fit:cover}
.tp-scan-region{position:relative;width:100%;height:100%;overflow:hidden}
/* html5-qrcode decodes exactly the pixels of the <video> element's CSS box: when the camera starts it
   copies the frame into a canvas of that size and never resizes it. The preview used to be a 427x320
   box, so a 64px QR on a printed card reached the decoder about 21px wide and small or distant cards
   never read. The video is laid out at decoding size here and the frame clips it, so the decoder gets
   up to 960px of the camera while the driver aims with the magnified centre of that same view. */
.tp-scan-region video{display:block!important;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:960px!important;height:auto!important;max-width:none!important;max-height:none!important;object-fit:contain}
.tp-scan-region canvas{display:none}
.tp-scan-idle{display:grid;place-items:center;height:100%;padding:24px;text-align:center;color:#cfc7e2;font-size:13px;line-height:1.6}
.tp details{padding:12px 0}
.tp summary{cursor:pointer;font-weight:600}
.tp-log{border-left:2px solid #ddd3ef;padding:0 0 15px 16px;margin-top:10px}
.tp-log b{font-size:13px}
.tp-log p{font-size:12px;margin:5px 0;overflow-wrap:anywhere}
.tp-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
.tp-form .full{grid-column:1/-1}
.tp-modal{width:min(520px,calc(100vw - 30px))}
.tp-modal.wide{width:min(680px,calc(100vw - 30px))}
@media(max-width:760px){
  .tp-grid{grid-template-columns:minmax(0,1fr)}
  .tp-card{padding:18px;border-radius:16px}
  .tp h1{font-size:25px}
  .tp-head>small{display:none}
  .tp-actions button{flex:1}
  .tp-tabs button{font-size:13px}
  .tp-ride .tp-row{align-items:flex-start}
  .tp-ride button{width:100%;margin-top:10px}
  .tp-avatar{width:43px;height:43px}
  .tp-form{grid-template-columns:minmax(0,1fr)}
}