/* Gum-only responsive display: computer layout above 700px, mobile layout at 700px and below. */
body.gum-lanes-enabled .line-scroll{display:none!important}
.gum-lanes,.gum-lanes-list,.gum-lane{min-width:0;max-width:100%}
.gum-lanes-list{display:grid;gap:24px}
.gum-lane{border:1px solid #cad7df;border-radius:10px;background:#edf3f8;overflow:hidden}
.gum-lane-heading{margin:0;padding:10px 14px;background:#f1f7fb;font-size:15px;line-height:1.4;color:#102a43}
.gum-lane-art{display:block;min-width:0!important;max-width:100%;height:auto!important;margin:0 auto;overflow:hidden;touch-action:pan-y pinch-zoom}
.gum-lane-hit rect{fill:transparent;stroke:transparent;cursor:pointer;pointer-events:all}
.gum-lane-hit.selected rect{fill:#087cdc0a;stroke:#087cdc;vector-effect:non-scaling-stroke;stroke-width:2}
.gum-lane-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px;padding:12px;background:white}
.gum-lane-button{display:flex;align-items:center;gap:8px;min-width:0;min-height:48px;padding:10px;text-align:start;background:white;color:#102a43;border:2px solid #cad7df;border-radius:8px}
.gum-lane-button.selected{border-color:#087cdc;background:#f3faff}
.gum-lane-button:focus-visible{outline:3px solid #071423;outline-offset:2px}
.gum-lane-number{flex-shrink:0;display:grid;place-items:center;width:27px;height:27px;border-radius:50%;background:#087cdc;color:white;font-size:13px}
.gum-lane-name{flex:1;min-width:0;font-size:14px;line-height:1.35;overflow-wrap:anywhere}
.gum-lane-check{flex-shrink:0;display:grid;place-items:center;width:25px;height:25px;border:2px solid #aebfcd;border-radius:5px;font-weight:800}
.gum-lane-button.selected .gum-lane-check{background:#087cdc;color:white;border-color:#087cdc}
.gum-lanes-status{font-size:14px;font-weight:700}
@media(min-width:701px){
 .gum-lanes-list{gap:20px;padding:20px;background:white;border:1px solid #cad7df;border-radius:8px}
 .gum-lane{border:0;border-radius:0;background:white;overflow:visible}
 .gum-lane-heading,.gum-lane-check,.gum-lanes-status{display:none}
 .gum-lane-controls{position:relative;display:block;width:var(--lane-width);min-height:120px;margin:0 auto;padding:0;background:white}
 .gum-lane-button{position:absolute;top:8px;left:var(--machine-center);transform:translateX(-50%);display:flex;flex-direction:column;gap:6px;width:var(--machine-width);min-height:0;margin:0;padding:4px;background:transparent;border:0;border-radius:3px;text-align:center}
 .gum-lane-button.selected{background:transparent;color:#087cdc}
 .gum-lane-number{width:25px;height:25px;font-weight:700}
 .gum-lane-name{width:100%;font-size:14px;font-weight:500;line-height:1.4}
 .gum-lane-button:hover .gum-lane-name,.gum-lane-button.selected .gum-lane-name{text-decoration:underline;text-underline-offset:3px}
 .gum-lane-hit:hover rect{stroke:#1688c7;vector-effect:non-scaling-stroke;stroke-width:2}
}
@media(max-width:700px){
 body.gum-lanes-enabled main{padding:22px 14px 40px}
 body.gum-lanes-enabled .intro h1{font-size:25px;overflow-wrap:anywhere}
 .gum-lanes-list{gap:18px}
 body.gum-lanes-enabled #machine-list{display:none}
 body.gum-lanes-enabled .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
 body.gum-lanes-enabled .actions button{padding:12px 8px;min-height:48px;font-size:14px}
 body.gum-lanes-enabled #help{grid-column:1/-1}
 body.gum-lanes-enabled #continue{width:100%;min-height:48px;font-size:15px}
}
