*{box-sizing:border-box}:root{--bg:#0a0a0b;--panel:#15161a;--panel2:#1b1c1f;--line:#34353a;--text:#f3f6f8;--muted:#9ea1a6;--accent:#d61f2c;--accent2:#8f1219;--danger:#ff6b6b;--warn:#f5b942;--good:#5fd39b}html{color-scheme:dark}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select{font:inherit}button{cursor:pointer}h1,h2,h3,p{margin:0}.site-header{display:grid;grid-template-columns:max-content 1fr max-content;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:#0c0c0d;position:sticky;top:0;z-index:30}.brand-row{grid-column:1}.header-right{grid-column:3;justify-self:end}.brand-row{display:flex;align-items:center;gap:14px}.brand-logo{height:54px;width:auto;display:block}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.site-header h1{font-size:31.5px}.site-header p{color:var(--muted);font-size:15px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}.header-right{display:flex;gap:6px;align-items:center}.header-right a.button,.header-right button.button{padding:6px 8px;font-size:13.5px}.status-pill{font-size:15px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 9px}.button{border:1px solid var(--line);background:var(--panel2);color:var(--text);border-radius:7px;padding:10px 13px;font-weight:800;font-size:18px}.button:hover{border-color:#465362}.button.primary{background:var(--accent);border-color:var(--accent);color:#ffffff}.button.ghost{background:transparent}.button.small{padding:7px 9px;font-size:15px}.button.danger{color:#ffb2b2;background:transparent;border-color:#5c3030}.step-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--line);background:#100f11;position:sticky;top:75px;z-index:25}.step{border:0;border-right:1px solid var(--line);background:transparent;color:var(--muted);padding:4px 16px;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:800}.step b{width:32px;height:32px;border:1px solid var(--line);border-radius:999px;display:grid;place-items:center;font-size:13px}.step.active{color:var(--text);background:#14191f}.step.active b{background:var(--accent);border-color:var(--accent);color:#ffffff}.page-shell{max-width:1500px;margin:0 auto;padding:26px 24px 50px}.view{display:none}.view.active{display:block}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}.page-head h2{font-size:42px;letter-spacing:-.035em;margin-top:3px}.page-head p{color:var(--muted);font-size:18px;margin-top:5px;max-width:760px}.pack-page-head{align-items:flex-start;margin-bottom:8px}.pack-page-head h2{font-size:31.5px;margin-top:2px}.pack-two-col{display:grid;grid-template-columns:1fr 3fr;gap:20px;align-items:start;margin-top:-19.5px;margin-bottom:14px}.pack-instructions-col h2{font-size:19px;letter-spacing:-.02em;margin-top:4px}.pack-instructions-col.card{display:flex;flex-direction:column;padding:14px 18px;overflow:hidden}.pack-instructions-col .eyebrow{font-size:13px}.pack-instructions-col .how-it-works li::before{width:18px;height:18px;font-size:9.5px;top:2px}.pack-instructions-col .how-it-works{max-width:none;margin-top:6px;gap:6px;flex:1 1 auto;overflow-y:auto;min-height:0}.pack-instructions-col .how-it-works li{font-size:13px;line-height:1.35;padding-left:26px}.pack-trucks-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:0}.pack-regenerate-btn{padding:6px 10px;font-size:13.5px}@media(max-width:1050px){.pack-two-col{grid-template-columns:1fr}}.how-it-works{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px;max-width:1080px}.how-it-works li{position:relative;padding-left:32px;color:var(--muted);font-size:18px;line-height:1.4}.how-it-works li::before{counter-increment:hiw;content:counter(hiw);position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:900;display:grid;place-items:center;line-height:1}.how-it-works{counter-reset:hiw}.how-it-works.continued{counter-reset:hiw 2}.how-it-works strong{color:var(--text)}.more-instructions-link{display:inline-block;margin-top:6px;color:var(--muted);font-size:16.5px;text-decoration:underline;cursor:pointer}.more-instructions-link:hover{color:var(--text)}.page-head-actions{display:flex;gap:8px}.eyebrow{color:var(--accent);font-size:15px;font-weight:900;letter-spacing:.14em}.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}.project-card{margin-bottom:16px}.project-fields{display:grid;grid-template-columns:minmax(0,2fr) minmax(250px,1fr);gap:16px}.project-fields label>span,.truck-fields label>span,.sheet-toolbar label>span{display:block;color:var(--muted);font-size:15px;font-weight:800;margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}input,select{width:100%;min-width:0;background:#111214;color:var(--text);border:1px solid var(--line);border-radius:7px;padding:10px 11px;outline:none}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(214,31,44,.12)}.inline-input{display:grid;grid-template-columns:1fr auto;gap:7px}.micro{font-size:15px;line-height:1.5;color:var(--muted);margin-top:10px}.truck-setup-list{display:grid;gap:14px}.truck-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.truck-card-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:16px}.truck-card-head-left{display:flex;align-items:center;gap:12px}.truck-number{width:34px;height:34px;border:1px solid var(--line);border-radius:8px;display:grid;place-items:center;color:var(--accent);font-weight:900}.truck-card-head h3{font-size:24px}.truck-card-body{padding:18px}.truck-fields{display:grid;grid-template-columns:2fr repeat(3,1fr) 1.2fr;gap:10px}.department-block{margin-top:18px;border-top:1px solid var(--line);padding-top:15px}.department-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:9px}.department-head h4{margin:0;font-size:19.5px}.dept-rows{display:grid;gap:7px}.dept-row{display:grid;grid-template-columns:44px minmax(180px,1fr) auto auto auto;gap:7px;align-items:center}.load-order-number{height:39px;border:1px solid var(--line);border-radius:6px;display:grid;place-items:center;font-size:16.5px;color:var(--accent);font-weight:900}.move-buttons{display:flex;gap:3px}.icon-button{width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:6px;background:transparent;color:var(--muted)}.icon-button:hover{color:var(--text)}.invite-btn{white-space:nowrap}.add-dept-row{display:grid;grid-template-columns:1fr auto;gap:7px;margin-top:8px}.sheet-toolbar{display:grid;grid-template-columns:repeat(3,minmax(150px,1fr));gap:10px;align-items:end;margin-bottom:12px}.sheet-metric{border-left:2px solid var(--line);padding:2px 10px 5px}.truck-generate-bar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.truck-generate-card{display:flex;align-items:center;gap:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px}.truck-generate-info{display:grid;gap:2px}.truck-generate-info b{font-size:18px;letter-spacing:.03em}.truck-generate-info span{display:block;color:var(--muted);font-size:15px}.sheet-metric span{display:block;color:var(--muted);font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.sheet-metric strong{display:block;font-size:30px;margin-top:3px}.sheet-help{font-size:16.5px;color:var(--muted);padding:10px 2px}.sheet-wrap{padding:0;overflow:auto}.case-sheet{border-collapse:separate;border-spacing:0;width:100%;min-width:1840px}.case-sheet th{position:sticky;top:0;background:#1b1c1f;color:#b0b2b6;text-transform:uppercase;font-size:13.5px;letter-spacing:.07em;text-align:left;padding:9px 7px;border-bottom:1px solid var(--line);z-index:3}
.case-sheet th.dimension-cell,.case-sheet th.weight-cell,.case-sheet th.select-cell{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dimension-head{width:108px;min-width:108px;white-space:nowrap}.case-sheet td{padding:5px;border-bottom:1px solid #222a32;border-right:1px solid #1f262d;vertical-align:middle}.case-sheet tr.complete td{background:rgba(95,211,155,.035)}.case-sheet tr.incomplete td{background:rgba(245,185,66,.025)}.case-sheet tr.blank td{background:#101419}.case-sheet input,.case-sheet select{padding:8px;font-size:16.5px;border-radius:5px}.case-sheet input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}.rownum{width:42px}.row-index{font-size:15px;color:var(--muted);text-align:center}.num-cell{width:76px}.weight-cell{width:84px;min-width:84px}.select-cell{width:145px;min-width:145px}.check-cell{width:74px;text-align:center}.tip-cell{min-width:180px}.actions-col{width:104px}.row-actions{display:flex;gap:4px;justify-content:center}.tip-summary-btn{width:100%;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:8px;font-size:15px}.tip-summary-btn.needs{border-color:#784444;color:#ffb5b5}.row-status{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;background:var(--warn)}tr.complete .row-status{background:var(--good)}.review-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:14px}.review-truck{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}.review-truck-head{padding:15px 16px;border-bottom:1px solid var(--line);display:flex;align-items:flex-end;justify-content:space-between;gap:10px}.review-truck-head h3{font-size:27px}.review-total{text-align:right}.review-total span{display:block;color:var(--muted);font-size:13.5px;text-transform:uppercase}.review-total strong{font-size:25.5px}.review-dept{display:grid;grid-template-columns:54px minmax(0,1fr) auto;gap:9px;align-items:center;padding:11px 16px;border-bottom:1px solid #222a32}.review-order{width:50px;height:50px;border:1px solid var(--line);border-radius:12px;display:grid;place-items:center;color:var(--accent);font-weight:900;font-size:15px}.review-dept strong{display:block;font-size:18px}.review-dept small{display:block;color:var(--muted);font-size:15px;margin-top:2px}.review-status{text-align:right;font-size:15px}.review-status.good{color:var(--good)}.review-status.warn{color:var(--warn)}.review-truck-actions{padding:12px 16px;display:flex;justify-content:flex-end}.truck-tabs{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}.truck-tab.active{background:var(--accent);color:#ffffff;border-color:var(--accent)}.pack-truck-selector-inline{width:220px;max-width:100%;margin-bottom:6px}.pack-truck-selector-inline select:disabled{opacity:.45;cursor:not-allowed;background:#101115}.pack-truck-selector-inline label{display:grid;gap:3px}.pack-truck-selector-inline label>span{display:block;color:var(--muted);font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.pack-truck-selector-inline select{width:100%}.pack-history-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.more-instructions-btn{margin-top:4px;padding:7px 12px}.pack-truck-selector label>span{display:block;color:var(--muted);font-size:13.5px;text-transform:uppercase;letter-spacing:.08em;font-weight:900;margin-bottom:6px}.pack-truck-selector select{font-weight:800}.empty-pack{text-align:center;color:var(--muted);padding:50px 20px}.pack-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-bottom:8px}.truck-stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0}
.truck-stats-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:2px 0 2px}
.truck-stats-bar .truck-stats-row{flex:1 1 320px}
.truck-undo-redo{display:flex;align-items:center;gap:6px;flex-shrink:0}
.truck-undo-redo .button{padding:7px 12px;font-size:16.5px}
.info-btn{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--muted);font-size:13.5px;font-weight:900;font-style:italic;font-family:Georgia,serif;display:grid;place-items:center;cursor:pointer;padding:0;flex-shrink:0}
.info-btn:hover{color:var(--text);border-color:var(--text)}
@media(max-width:600px){.truck-undo-redo{width:100%;justify-content:flex-end}}.pack-stat{border-top:2px solid var(--line);padding-top:4px}.pack-stat span{display:block;color:var(--muted);font-size:13.5px;text-transform:uppercase;letter-spacing:.07em}.pack-stat strong{display:block;font-size:19.5px;margin-top:2px}.pack-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:4px}.pack-heading h3{font-size:28.5px}.suggested-block .pack-heading{align-items:flex-start}.actual-block .pack-heading{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}.pack-help-btn{justify-self:center;display:flex;align-items:center;justify-content:center;white-space:nowrap}.challenge-finish-slot{justify-self:end}.challenge-finish-slot .status-pill{height:100%;display:flex;align-items:center;justify-content:center;text-align:center}.pack-heading p{font-size:15px;color:var(--muted);margin-top:1px}#packTruckTitle:empty{display:none}.legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.legend-item{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:13.5px}.legend-dot{width:9px;height:9px;border-radius:2px}.truck-wrap{position:relative;padding:10px 0 14px}.truck-canvas{position:relative;width:100%;height:250px;border:3px solid #65717c;border-radius:9px 17px 17px 9px;background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),#131416;background-size:24px 24px;overflow:hidden}.truck-centerline{position:absolute;top:50%;left:0;right:0;border-top:1px dashed rgba(255,255,255,.08)}#caseLayer,#securementLayer{position:absolute;inset:0}.nose-label,.door-label{position:absolute;color:var(--muted);font-size:13.5px;font-weight:900;letter-spacing:.12em}.nose-label{top:4px;left:2px}.door-label{bottom:5px;right:2px}.actual-truck-wrap .nose-label{top:4px;bottom:auto;left:2px}.packed-case{position:absolute;border:1px solid rgba(0,0,0,.65);border-radius:3px;color:#080b0e;display:flex;align-items:center;justify-content:center;text-align:center;font-size:clamp(7px,.7vw,10px);font-weight:900;line-height:1.05;padding:2px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}.packed-case.stacked{outline:2px solid rgba(255,255,255,.7);outline-offset:-3px}.case-mini{display:block;font-size:.75em;opacity:.68;margin-top:1px}.level-badge{position:absolute;right:2px;top:2px;background:#111214;color:white;border-radius:3px;padding:2px 3px;font-size:7px}.tip-badge{position:absolute;left:2px;bottom:2px;background:#111214;color:white;border-radius:3px;padding:2px 3px;font-size:6px}.bar-zone{position:absolute;top:0;bottom:0;background:rgba(255,255,255,.12);border-left:1px solid rgba(255,255,255,.5);border-right:1px solid rgba(255,255,255,.5);z-index:7}.bar-center{position:absolute;top:0;bottom:0;border-left:1px dashed var(--accent);z-index:8}.bar-label{position:absolute;top:5px;transform:translateX(-50%);font-size:10.5px;background:#101012;color:var(--accent);padding:2px 3px;border-radius:3px;z-index:9;white-space:nowrap}.pack-message{border-left:3px solid var(--line);padding:9px 11px;color:var(--muted);font-size:16.5px;min-height:38px}.pack-message.good{border-color:var(--good);color:#cfeade}.pack-message.warn{border-color:var(--warn);color:#f5dca8}.pack-bottom-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.pack-bottom-grid h3{font-size:22.5px;margin:3px 0 10px}.report-list{display:grid;gap:7px}.report-item{border:1px solid var(--line);border-radius:7px;padding:9px;font-size:15px}.report-item strong{display:block}.report-item span{display:block;color:var(--muted);margin-top:3px}.tip-dialog{width:min(620px,calc(100% - 24px));border:1px solid var(--line);border-radius:12px;background:#15161a;color:var(--text);padding:0}.tip-dialog::backdrop{background:rgba(0,0,0,.72)}.tip-dialog form{padding:18px}.dialog-card{padding:22px 24px}.dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.dialog-copy{display:flex;flex-direction:column;gap:12px;margin-top:14px;line-height:1.5}.dialog-copy .how-it-works{gap:10px}.stacking-tip-link{background:transparent;border:0;padding:0;margin-left:4px;color:var(--text);font:inherit;font-size:13px;font-weight:700;text-decoration:underline;cursor:pointer}.stacking-tip-link:hover{color:var(--accent)}.stacking-tip-dialog{width:min(760px,calc(100% - 24px))}.stacking-tip-figures{display:flex;gap:16px;flex-wrap:wrap}.stacking-tip-figures figure{flex:1 1 260px;margin:0;background:#101115;border:1px solid var(--line);border-radius:8px;padding:10px}.stacking-tip-figures svg{display:block;width:100%;height:auto;border-radius:4px}.stacking-tip-figures figcaption{color:var(--muted);font-size:12.5px;font-weight:800;letter-spacing:.02em;text-align:center;margin-top:8px}.dialog-head h3{font-size:27px}.dialog-x{border:0;background:transparent;color:var(--muted);font-size:37.5px}.tip-options{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.tip-option{display:flex;gap:8px;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:10px}.tip-option input{width:18px;height:18px;accent-color:var(--accent)}.tip-option b{display:block;font-size:16.5px}.tip-option small{display:block;color:var(--muted);font-size:13.5px;margin-top:2px}.tip-option.locked{opacity:.58}.dialog-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.form-error{color:#ffaaaa;font-size:15px;margin-top:10px}.toast{position:fixed;right:18px;bottom:18px;background:#1b1c1f;border:1px solid var(--line);border-radius:8px;padding:10px 12px;color:var(--text);font-size:16.5px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.18s;z-index:60}.toast.show{opacity:1;transform:none}
@media(max-width:1000px){.truck-fields{grid-template-columns:1fr 1fr 1fr}.truck-fields label:first-child{grid-column:span 2}.sheet-toolbar{grid-template-columns:1fr 1fr 1fr}.pack-stats{grid-template-columns:repeat(3,1fr)}.truck-stats-row{grid-template-columns:repeat(2,1fr)}.pack-bottom-grid{grid-template-columns:1fr}}
@media(max-width:700px){.site-header{position:static;padding:12px}.step-nav{top:0}.step span{display:none}.page-shell{padding:18px 11px 40px}.page-head{align-items:flex-start;flex-direction:column}.page-head-actions{width:100%;flex-wrap:wrap}.project-fields,.sheet-toolbar{grid-template-columns:1fr}.truck-fields{grid-template-columns:1fr 1fr}.truck-fields label:first-child{grid-column:span 2}.dept-row{grid-template-columns:36px 1fr auto}.dept-row .move-buttons{grid-column:2}.invite-btn{grid-column:2}.dept-row>.icon-button:last-child{grid-column:3;grid-row:1}.pack-stats{grid-template-columns:1fr 1fr}.truck-stats-row{grid-template-columns:1fr 1fr}.pack-heading{align-items:flex-start;flex-direction:column}.legend{justify-content:flex-start}.truck-canvas{height:220px}.tip-options{grid-template-columns:1fr}}
@media print{.site-header,.step-nav,.page-head .button,.truck-tabs{display:none!important}.page-shell{max-width:none;padding:0}.view{display:none!important}#view-pack{display:block!important}.truck-canvas{background:white;border-color:#333;print-color-adjust:exact;-webkit-print-color-adjust:exact}.pack-bottom-grid .card{break-inside:avoid}}

/* V10: remove browser number steppers everywhere. Case-sheet dimensions use text + numeric keyboards. */
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{-moz-appearance:textfield;appearance:textfield}
.case-sheet input[inputmode=decimal]{font-variant-numeric:tabular-nums}

/* V13 explicit stack assignment */
.stack-on-cell{min-width:230px}.stack-bottom-cell{min-width:155px}.stack-status{display:block;font-size:12px;line-height:1.25;margin-top:4px;color:var(--muted);max-width:230px}.stack-status.bad{color:#ffaaaa}.stack-status.good{color:var(--good)}.case-sheet select:disabled,.case-sheet button:disabled{opacity:.5;cursor:not-allowed}.case-sheet tr.stack-invalid td{background:rgba(255,107,107,.035)}

.stack-status.warn{color:var(--warn)}

/* V17 stack readability + side-view inspector */
.packed-case.clickable-stack{cursor:pointer;outline:2px solid rgba(255,255,255,.78);outline-offset:-3px}
.packed-case.clickable-stack:hover{filter:brightness(1.08)}
.packed-case.clickable-stack:focus{outline:3px solid var(--accent);outline-offset:-3px}
.stack-on-label{display:block;margin-top:2px;padding:2px 3px;border-radius:3px;background:rgba(8,11,14,.86);color:#fff;font-size:.72em;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stack-click-hint{position:absolute;right:2px;bottom:2px;background:#111214;color:var(--accent);border-radius:3px;padding:2px 3px;font-size:6px;line-height:1}
.stack-dialog{width:min(760px,calc(100% - 24px));border:1px solid var(--line);border-radius:12px;background:#15161a;color:var(--text);padding:0}
.stack-dialog::backdrop{background:rgba(0,0,0,.76)}
.stack-dialog-inner{padding:18px}
.stack-side-view{position:relative;height:360px;margin-top:16px;border:1px solid var(--line);border-radius:9px;background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),#111214;background-size:24px 24px;overflow:hidden}
.stack-side-view::after{content:'TRUCK FLOOR';position:absolute;left:0;right:0;bottom:15px;border-top:2px solid #65717c;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.12em;padding:5px 7px 0}
.stack-side-direction{position:absolute;left:10px;top:8px;color:var(--muted);font-size:12px;font-weight:900;letter-spacing:.1em;z-index:5}
.stack-side-case{position:absolute;border:2px solid rgba(0,0,0,.68);border-radius:5px;color:#080b0e;display:flex;align-items:center;justify-content:center;text-align:center;font-weight:900;line-height:1.05;padding:5px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.stack-side-case strong{display:block;font-size:clamp(9px,1.5vw,14px);word-break:break-word}
.stack-side-case small{display:block;font-size:8px;opacity:.7;margin-top:3px}
.stack-side-case .side-level{position:absolute;right:3px;top:3px;background:#111214;color:#fff;border-radius:3px;padding:2px 4px;font-size:7px}

.stack-dialog-details{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:8px;margin-top:12px}
.stack-detail{border:1px solid var(--line);border-radius:7px;padding:9px;background:#121316}
.stack-detail b{display:block;font-size:16.5px}
.stack-detail span{display:block;color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:3px}
@media(max-width:640px){.stack-side-view{height:300px}.stack-dialog-inner{padding:14px}}

/* V19 true L×W×H stack inspector */
.stack-dialog{width:min(980px,calc(100% - 24px))}
.stack-side-view{height:auto;min-height:390px;padding:0;background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),#111214;background-size:24px 24px}
.stack-side-view::after{display:none}
.stack-3d-svg{display:block;width:100%;height:auto;min-height:390px}
.stack-face{stroke:rgba(0,0,0,.72);stroke-width:2;vector-effect:non-scaling-stroke}
.stack-face-front{fill-opacity:.96}
.stack-face-side{fill-opacity:.67}
.stack-face-top{fill-opacity:.80}

.stack-floor-line{stroke:#697681;stroke-width:3;vector-effect:non-scaling-stroke}
.stack-axis-label{fill:#9aa6b3;font-size:21px;font-weight:900;letter-spacing:1.2px}
.stack-case-svg-name{fill:#070a0d;font-size:20px;font-weight:950}
.stack-case-svg-dims{fill:#111820;font-size:13px;font-weight:850}
.stack-case-svg-level{fill:#fff;font-size:14px;font-weight:950;paint-order:stroke;stroke:#111214;stroke-width:5px}
.stack-detail span strong{color:var(--text)}
@media(max-width:640px){.stack-side-view{min-height:280px}.stack-3d-svg{min-height:280px}.stack-axis-label{font-size:18px}.stack-case-svg-name{font-size:16px}.stack-case-svg-dims{font-size:11px}}


/* V20: case-number-only pack labels + straight-on 2D case/stack inspector */
.case-sheet{min-width:2050px}
.case-number-cell{min-width:115px}
.case-description-cell{min-width:190px}
.case-clickable{cursor:pointer}
.case-clickable:hover{filter:brightness(1.07)}
.case-clickable:focus{outline:3px solid var(--accent);outline-offset:-3px}
.packed-case .case-name{display:block;font-size:clamp(8px,.78vw,12px);font-weight:950;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stack-side-view{height:auto;min-height:430px;padding:0}
.stack-2d-svg{display:block;width:100%;height:auto;min-height:430px}
.stack-truck-frame{fill:#111214;stroke:#65717c;stroke-width:4;vector-effect:non-scaling-stroke}
.stack-2d-case{stroke:rgba(0,0,0,.78);stroke-width:3;vector-effect:non-scaling-stroke}

.stack-floor-label{fill:#9aa6b3;font-size:19.5px;font-weight:900;letter-spacing:1.1px}
.stack-row-end-label{fill:#77828e;font-size:15px;font-weight:900;letter-spacing:.9px}
.stack-axis-label{fill:#9aa6b3;font-size:21px;font-weight:900;letter-spacing:1px}
.stack-case-svg-name{fill:#070a0d;font-size:22px;font-weight:950;paint-order:stroke;stroke:rgba(255,255,255,.18);stroke-width:1px}
@media(max-width:640px){.stack-side-view,.stack-2d-svg{min-height:300px}.stack-axis-label{font-size:16.5px}.stack-case-svg-name{font-size:17px}}


/* V21: corrected rear-looking-to-nose left/right mapping + caster visualization */
.stack-wheel{fill:#090c0f;stroke:#c5ced6;stroke-width:2;vector-effect:non-scaling-stroke}
.stack-wheel-hub{fill:#697681;stroke:#090c0f;stroke-width:1;vector-effect:non-scaling-stroke}

/* V22: larger true-proportion truck cross-section + wheel/support tangency */
.stack-side-view{min-height:560px}
.stack-2d-svg{min-height:560px}
.stack-dimension-label{fill:#7f8b97;font-size:18px;font-weight:850;letter-spacing:.8px}
@media(max-width:640px){.stack-side-view,.stack-2d-svg{min-height:360px}.stack-dimension-label{font-size:15px}}


/* V23: explicit preferred-row controls */
.case-sheet{min-width:2290px}
.row-number-cell,.row-lock-cell{width:96px;min-width:96px}
.row-number-cell select,.row-lock-cell select{text-align:center;text-transform:uppercase;font-weight:850;min-width:84px}
.row-pref-status{display:block;margin-top:3px;font-size:12px;line-height:1.2;color:var(--muted);max-width:110px}
.row-pref-status.good{color:var(--good)}
.row-pref-status.bad{color:#ffaaaa}
tr.pref-invalid td{background:rgba(255,107,107,.035)}
.row-pref-head{white-space:nowrap}
.mini-info-button{display:inline-grid;place-items:center;width:20px;height:20px;padding:0;margin-left:4px;border:1px solid #596572;border-radius:50%;background:#121316;color:var(--accent);font-size:16.5px;font-weight:950;vertical-align:middle}
.mini-info-button:hover{border-color:var(--accent)}
.row-rules-dialog{width:min(720px,calc(100% - 24px))}
.row-rules-inner{padding:18px}
.row-rules-copy{margin-top:14px;display:grid;gap:9px}
.row-rules-copy p{font-size:18px;line-height:1.55;color:#cbd3da}
.row-rules-copy h4{margin:7px 0 0;color:var(--accent);font-size:16.5px;letter-spacing:.1em}
.row-rules-note{border-left:3px solid var(--accent);padding:8px 10px;background:rgba(214,31,44,.045);border-radius:0 6px 6px 0}

/* V24 bounded row selectors */
.row-number-cell select,.row-lock-cell select{cursor:pointer}
.row-number-cell select:disabled,.row-lock-cell select:disabled{cursor:not-allowed}


/* V25: Side 1 / Side 2 + optional Hot Dog / Hamburger */
.case-sheet{min-width:2460px}
.dimension-cell{width:80px;min-width:80px}
.dimension-cell select{width:88px;min-width:88px;text-align:center;font-weight:800;cursor:pointer}
.orientation-cell{width:128px;min-width:128px}
.orientation-cell select{min-width:116px;font-weight:850;text-align:center;cursor:pointer}
.dimension-head,.orientation-head{white-space:nowrap}

/* V27: generated row results are informational, manual selectors remain constraints */
.generated-row-status{display:block;margin-top:4px;font-size:12px;line-height:1.2;color:var(--accent);font-weight:850;letter-spacing:.04em;white-space:nowrap}

/* V28: impossible manual rows are warnings, never case-removal conditions */
.row-pref-status.warn{color:var(--warn)}
.case-sheet tr.pref-warning td{background:rgba(245,185,66,.045)}
tr.pref-warning .row-status{background:var(--warn)!important}

/* V31 performance: one shared quarter-inch picker instead of thousands of options per cell */
.case-dimension-picker-btn{width:100%;min-width:0;background:#121316;border:1px solid var(--line);color:var(--text);border-radius:5px;padding:8px;font:inherit;font-size:16.5px;text-align:left;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.case-dimension-picker-btn:focus{border-color:var(--accent);box-shadow:0 0 0 2px rgba(214,31,44,.12);outline:none}.dimension-picker-dialog{width:min(520px,calc(100% - 24px))}.dimension-picker-grid{display:grid;grid-template-columns:2fr 1fr;gap:10px;margin-top:16px}.dimension-picker-grid label span{display:block;color:var(--muted);font-size:13.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:800;margin-bottom:5px}.dimension-picker-grid select{width:100%}@media(max-width:520px){.dimension-picker-grid{grid-template-columns:1fr}}


/* V34: progressive physical-row locks */
.row-lock-cell{width:92px;min-width:92px;text-align:center}
.row-lock-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:5px 8px;border:1px solid var(--line);border-radius:7px;background:#0b1015;color:var(--muted);font-size:13.5px;font-weight:900;letter-spacing:.05em;cursor:pointer;white-space:nowrap}
.row-lock-toggle input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.row-lock-toggle.is-locked{border-color:var(--accent);color:var(--accent);background:rgba(214,31,44,.055)}
.row-lock-toggle:has(input:disabled){opacity:.38;cursor:not-allowed}
.locked-row-case td{background:rgba(214,31,44,.018)}
.locked-row-case .row-number-cell select{border-color:rgba(214,31,44,.5)}
.generated-row-status{display:none!important}

/* V35: pre-generation mathematical row-lock validation */
.row-lock-status{display:block;margin-top:4px;color:#f6c85f;font-size:12px;font-weight:900;letter-spacing:.045em;line-height:1.1;white-space:nowrap}


/* V1.34: link to the Google Sheets case-file template, offered both in the Upload Case File
   dialog's step 1 and in the standalone "Create Case File" popup */
.template-sheet-link{color:var(--accent);font-weight:900;text-decoration:underline}
.template-sheet-link:hover{color:#fff}

/* V37 smart case-file import */
.case-import-dialog{width:min(1240px,calc(100% - 24px));max-height:92vh;border:1px solid var(--line);border-radius:12px;background:#15161a;color:var(--text);padding:0}.case-import-dialog::backdrop{background:rgba(0,0,0,.78)}.case-import-inner{padding:18px}.import-file-btn{border-color:#53612d;color:var(--accent)}.case-import-drop{display:grid;place-items:center;text-align:center;min-height:64px;border:1px dashed #56616d;border-radius:10px;background:#111214;padding:12px;cursor:pointer}.case-import-drop:hover{border-color:var(--accent)}.case-import-drop input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}.case-import-drop b{font-size:24px}.case-import-drop small{display:block;color:var(--muted);font-size:15px;margin-top:6px}.case-import-file-meta{margin-top:10px;color:#cbd3da;font-size:16.5px}.case-import-status{min-height:20px;margin-top:7px;font-size:15px;color:var(--muted)}.case-import-status.working{color:var(--accent)}.case-import-status.good{color:var(--good)}.case-import-status.warn{color:var(--warn)}.case-import-status.bad{color:#ff9b9b}.case-import-review-head{display:flex;justify-content:space-between;align-items:end;gap:12px;margin-top:15px}.case-import-review-head h4{margin:3px 0 0;font-size:27px}.import-method-pill{border:1px solid #53612d;border-radius:999px;color:var(--accent);padding:6px 9px;font-size:12px;font-weight:900;letter-spacing:.08em}.case-import-table-wrap{overflow:auto;max-height:52vh;border:1px solid var(--line);border-radius:9px;margin-top:10px}.case-import-table{border-collapse:separate;border-spacing:0;min-width:1480px;width:100%;font-size:15px}.case-import-table th{position:sticky;top:0;z-index:2;background:#1b1c1f;color:#b0b2b6;text-transform:uppercase;letter-spacing:.06em;text-align:left;padding:8px;border-bottom:1px solid var(--line)}.case-import-table td{padding:5px;border-bottom:1px solid #222a32}.case-import-table input,.case-import-table select{padding:7px;font-size:15px;min-width:76px}.case-import-table td:nth-child(1){width:42px;text-align:center}.case-import-table td:nth-child(2){min-width:110px}.case-import-table td:nth-child(3){min-width:180px}.case-import-table td:nth-child(12){min-width:250px}.case-import-table tr.confidence-low td{background:rgba(245,185,66,.045)}.case-import-table tr.confidence-medium td{background:rgba(245,185,66,.018)}.confidence-pill{display:inline-block;border:1px solid var(--line);border-radius:999px;padding:2px 5px;font-size:10.5px;font-weight:900;letter-spacing:.05em;margin-right:5px}.confidence-pill.high{color:var(--good)}.confidence-pill.medium{color:var(--warn)}.confidence-pill.low{color:#ff9b9b}.import-note-cell small{color:var(--muted);font-size:12px;line-height:1.35}.case-import-review-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;color:var(--muted);font-size:15px}@media(max-width:700px){.page-head-actions{flex-wrap:wrap}.case-import-inner{padding:13px}.case-import-review-footer{align-items:flex-start;flex-direction:column}}


/* V40: basic case-file import help */
.import-action-pair{display:inline-flex;align-items:center;gap:6px}
.import-info-button{margin-left:0;flex:0 0 auto}
.import-recommended-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:2px 0 5px}
.import-recommended-columns span{display:block;padding:8px 10px;border:1px solid var(--line);border-radius:6px;background:#0d1217;color:var(--text);font-size:15px;font-weight:900;letter-spacing:.04em}
@media(max-width:700px){.import-recommended-columns{grid-template-columns:1fr}}

/* V45 import Wheels default */
.import-step{border:1px solid var(--line);border-radius:14px;padding:13px;margin:10px 0;background:rgba(255,255,255,.025)}
.import-step-head{display:flex;align-items:center;gap:11px;margin-bottom:3px}
.import-step-num{flex-shrink:0;width:50px;height:50px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px}
.import-step-head h4{margin:0;font-size:27px}
.import-wheel-buttons{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.import-wheel-option{cursor:pointer;display:inline-flex;align-items:center}
.import-wheel-option input{position:absolute;opacity:0;pointer-events:none}
.import-wheel-option span{display:inline-flex;align-items:center;justify-content:center;min-width:140px;padding:9px 16px;border:1px solid var(--line);border-radius:10px;background:#0c1116;font-weight:800;letter-spacing:.05em;text-align:center}
.import-wheel-option input:checked+span{border-color:var(--good);color:var(--good);box-shadow:0 0 0 1px var(--good) inset;background:rgba(95,211,155,.08)}
.import-wheels-auto-note{margin-top:10px;padding:10px 12px;border-left:3px solid var(--accent);background:rgba(214,31,44,.06);border-radius:0 8px 8px 0}
.import-wheels-defaulted{display:block;margin-top:3px;color:var(--warn);font-size:12px;font-weight:900;letter-spacing:.05em;text-transform:uppercase}
.import-wheels-fixed{color:var(--muted);font-size:15px;font-weight:800}
.case-import-table td:nth-child(8){min-width:120px}


/* V47 live truck editor */
.securement-editor{margin:14px 0;padding:16px}.securement-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.securement-editor-head h3{margin:2px 0 4px}.manual-securement-list{display:grid;gap:8px;margin-top:12px}.manual-securement-row{display:grid;grid-template-columns:42px minmax(150px,1fr) minmax(180px,1fr) 100px 42px;gap:10px;align-items:end;padding:10px;border:1px solid #29333d;border-radius:10px;background:#131416}.manual-securement-row label{display:grid;gap:4px;font-size:16.5px;text-transform:uppercase;color:#a3a6aa}.manual-securement-row input,.manual-securement-row select{min-height:38px}.sec-lock{display:flex!important;align-items:center!important;gap:8px!important;padding-bottom:9px}.manual-securement-line{border-left:3px solid #f59e0b!important}.manual-strap-line{position:absolute;top:0;bottom:0;border-left:2px dashed #22d3ee;z-index:35;pointer-events:none}.manual-securement-label{background:#111820;color:#fff;padding:2px 5px;border-radius:4px;z-index:45}.pack-case-edit-dialog{width:min(980px,95vw)}.pack-case-edit-inner{width:100%}.pack-case-edit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pack-case-edit-grid label{display:grid;gap:5px}.pack-case-edit-grid label span{font-size:16.5px;text-transform:uppercase;letter-spacing:.08em;color:#a3a6aa}.pack-edit-options{display:flex;gap:24px;margin:16px 0}.pack-tip-sides{display:flex;flex-wrap:wrap;gap:12px;align-items:center;padding:12px;border:1px solid #29333d;border-radius:10px}.packed-case[data-row]::after{content:'R' attr(data-row);position:absolute;right:4px;bottom:3px;font-size:9px;font-weight:900;background:rgba(0,0,0,.58);color:white;padding:1px 3px;border-radius:3px}.report-item.manual{border-left:3px solid #22d3ee}@media(max-width:800px){.pack-case-edit-grid{grid-template-columns:1fr 1fr}.manual-securement-row{grid-template-columns:1fr 1fr}.securement-editor-head{flex-direction:column}}

/* V48 virtual truck refinements */
.row-band-layer{position:absolute;inset:0;z-index:1;pointer-events:none}.row-band{position:absolute;top:0;bottom:0;border-left:2px solid;border-right:1px dashed;opacity:.34}.row-band span{position:absolute;left:4px;top:28px;padding:2px 5px;border-radius:4px;background:#0b1015;color:#fff;font-size:12px;font-weight:950;letter-spacing:.08em;opacity:1}.packed-case{z-index:10}.packed-case.dragging{opacity:.45}.packed-case.swap-target{box-shadow:0 0 0 4px #fff inset,0 0 0 3px var(--accent);filter:brightness(1.15)}
.top-wheel-markers{position:absolute;inset:2px;pointer-events:none}.top-wheel-markers i{position:absolute;width:7px;height:7px;border-radius:50%;background:#111;border:2px solid #fff;box-sizing:border-box}.top-wheel-markers i:nth-child(1){left:2px;top:2px}.top-wheel-markers i:nth-child(2){right:2px;top:2px}.top-wheel-markers i:nth-child(3){left:2px;bottom:2px}.top-wheel-markers i:nth-child(4){right:2px;bottom:2px}.top-wheel-markers.front i:nth-child(n+3),.top-wheel-markers.back i:nth-child(-n+2),.top-wheel-markers.left i:nth-child(odd),.top-wheel-markers.right i:nth-child(even){display:none}
.pack-edit-case-view{margin:12px 0 16px;padding:12px;border:1px solid #29333d;border-radius:10px;background:#0c1116}.solo-truck{position:relative;height:190px;border:3px solid #66727d;border-radius:8px;background:#0f151a;overflow:hidden}.solo-case{position:absolute;bottom:22px;background:#60a5fa;border:2px solid rgba(255,255,255,.75);display:grid;place-items:center;color:#081018;font-weight:950;min-width:16px;min-height:16px}.solo-case span{padding:4px;text-align:center}.solo-wheels{position:absolute;left:50%;top:3px;transform:translateX(-50%);font-size:16.5px;letter-spacing:7px;color:#0a0a0b}.solo-left,.solo-right{position:absolute;bottom:3px;color:#a3a6aa;font-size:13.5px;font-weight:900}.solo-left{left:6px}.solo-right{right:6px}.solo-truck small{position:absolute;top:5px;left:50%;transform:translateX(-50%);color:#a3a6aa;font-size:13.5px;white-space:nowrap}
.pack-row-view{position:relative}
/* V146.29.1: .stack-2d-svg's own min-height:560px (set for the near-square REAR/FRONT/single-stack
   pictures) would force this SVG back up to 560px tall regardless of its own viewBox proportions,
   undoing the fitted-viewBox sizing above - overriding it here (equal specificity via the combined
   selector) lets LEFT/RIGHT/BOTTOM render at their true, much shorter, truck-shaped proportions,
   matching the main Truck Pack canvas. REAR/FRONT never hit this floor anyway (their aspect-driven
   height is always well above it), so they render unchanged. */
.stack-2d-svg.pack-row-view-svg{min-height:0}
.pack-row-view-svg{transition:opacity .15s ease}.pack-row-view-controls{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:10px}.row-view-arrow{border:1px solid #34414d;background:#141b22;color:var(--text);border-radius:999px;padding:9px 14px;font-weight:900;font-size:16.5px;letter-spacing:.04em}.row-view-arrow:hover{border-color:#5a6a78;background:#1a232b}.row-view-arrow-back{background:var(--accent);border-color:var(--accent);color:#fff}
/* V146.36: hub-and-spoke row-view controls - LEFT/BOTTOM/RIGHT sit in one row, with 180 FLIP
   directly above BOTTOM (a 3-column grid keeps FLIP centered over the middle button regardless of
   how the 3 row buttons' own widths differ), matching the layout the user asked for. */
.pack-row-view-hub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:auto;gap:8px;justify-items:center;max-width:460px;margin:0 auto}
.pack-row-view-hub .row-view-flip{grid-column:2;grid-row:1}
.pack-row-view-hub .row-view-left{grid-column:1;grid-row:2}
.pack-row-view-hub .row-view-bottom{grid-column:2;grid-row:2}
.pack-row-view-hub .row-view-right{grid-column:3;grid-row:2}
.pack-row-view-hub .row-view-arrow{width:100%}
.stack-row-level-badge-bg{fill:rgba(8,11,14,.76)}.stack-row-level-badge-text{fill:#d61f2c;font-size:11px;font-weight:1000;letter-spacing:.04em}
.pack-row-view-stats{margin:0 0 16px}.pack-row-stats-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px}.pack-row-stat-card{flex:0 0 auto;min-width:150px;border:1px solid #29333d;border-radius:10px;background:#0e151b;padding:11px 12px}.pack-row-stat-name{font-size:19.5px;font-weight:900}.pack-row-stat-desc{font-size:15px;color:var(--muted);margin-top:2px}.pack-row-stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;margin-top:8px}
@media(max-width:640px){.pack-row-stat-card{min-width:130px}.row-view-arrow{padding:8px 11px;font-size:15px}}

/* V49 corrected live-editor straight-on wheel placement */
.solo-wheel-edge{position:absolute;pointer-events:none;display:flex;gap:10px;z-index:3}.solo-wheel-edge i{display:block;width:8px;height:8px;border-radius:50%;background:#0a0a0b;border:1px solid rgba(255,255,255,.8)}
.solo-wheel-edge.bottom{left:50%;bottom:-1px;transform:translateX(-50%)}
.solo-wheel-edge.top{left:50%;top:-1px;transform:translateX(-50%)}
.solo-wheel-edge.left{left:-1px;top:50%;transform:translateY(-50%);flex-direction:column}
.solo-wheel-edge.right{right:-1px;top:50%;transform:translateY(-50%);flex-direction:column}
.solo-wheel-edge.front,.solo-wheel-edge.back{left:50%;top:50%;transform:translate(-50%,-50%)}
/* V51 full-stack live editor */
.pack-stack-editors{display:grid;gap:16px;margin-top:16px}.pack-stack-editor-card{padding:16px;border:1px solid #2a3540;border-radius:14px;background:#0e151b}.pack-stack-editor-card:first-child{border-color:#5a6a78;box-shadow:inset 0 3px 0 rgba(214,255,47,.7)}.pack-stack-editor-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:14px}.pack-stack-editor-head h3{margin:2px 0 0;font-size:30px}.pack-stack-level-badge{padding:6px 9px;border:1px solid #34414d;border-radius:999px;color:#aab5bf;font-size:15px;font-weight:900;letter-spacing:.08em;white-space:nowrap}.pack-stack-editor-card .pack-edit-options{padding-top:12px;border-top:1px solid #25303a}.pack-stack-editor-card .pack-tip-sides{margin-top:10px}.pack-case-edit-dialog{width:min(1500px,96vw);max-height:94vh}.pack-case-edit-inner{max-height:90vh;overflow:auto}.pack-edit-case-view{position:relative;background:#10171d;padding-top:2px;margin-bottom:18px}.pack-stack-editors{position:relative;z-index:1;display:grid!important;visibility:visible!important;opacity:1!important}.pack-stack-editor-card{display:block!important;visibility:visible!important;opacity:1!important}.pack-stack-editor-card .pack-case-edit-grid{display:grid!important}.pack-stack-editor-card .pack-edit-options,.pack-stack-editor-card .pack-tip-sides{display:flex!important}
@media(max-width:800px){.pack-stack-editor-head{flex-direction:column}.pack-case-edit-dialog{width:98vw}.pack-edit-case-view{position:static}}
.pack-editor-section-title{padding:12px 2px 0;margin-bottom:2px}.pack-editor-section-title .micro{margin-top:4px}.pack-case-edit-inner{overflow-y:auto!important;overflow-x:hidden!important}.pack-edit-case-view svg{display:block;max-height:48vh}.pack-stack-editor-card input,.pack-stack-editor-card select{pointer-events:auto!important}


/* V60 dual-truck workflow */
.dual-pack-block{margin-top:2px}.pack-trucks-merged{border:1px solid rgba(255,255,255,.1);border-radius:20px;background:rgba(255,255,255,.025);padding:8px 14px}#actualControlsWrap{margin-top:14px}
.suggested-block{box-shadow:inset 0 0 0 1px rgba(96,165,250,.08)}
.actual-block{box-shadow:inset 0 0 0 1px rgba(214,31,44,.10)}
/* V1.41: "Print Pack Instructions" button - a new, separate right-aligned row of its own, directly
   under the existing .pack-heading, rather than a 4th item squeezed into that heading's fixed
   1fr/auto/1fr grid (challenge.html's heading already fills all 3 of those columns with the eyebrow
   text, the HELP button, and the Finish slot). Identical markup+CSS on both index.html and
   challenge.html, so it sits in the same top-right spot on both without touching either page's
   existing heading layout. Hidden by default in the HTML (matters most for the Challenge, where it
   should stay hidden until the challenge is complete); updatePrintPackButton() in app.js is what
   reveals it. */
.pack-print-row{display:flex;justify-content:flex-end;margin:2px 0 8px}
.pack-print-btn[hidden]{display:none}
.transfer-arrow{text-align:center;font-size:16.5px;letter-spacing:.14em;font-weight:900;margin:6px 0 2px;color:var(--muted)}
.actual-truck-canvas{border:2px solid rgba(214,31,44,.32);background:linear-gradient(90deg,rgba(214,31,44,.025),transparent 45%)}
.actual-truck-canvas.drop-ready{outline:4px solid rgba(214,31,44,.6);outline-offset:3px;box-shadow:0 0 30px rgba(214,31,44,.18)}
.suggested-case{cursor:grab}.suggested-case.dragging{opacity:.35}.actual-case{cursor:pointer}
.actual-row-band.locked span{background:rgba(214,31,44,.95);color:#ffffff}.actual-row-band.working span{background:#f59e0b;color:#111}
.actual-row-controls{margin-top:14px}.actual-controls-inner{display:flex;gap:18px;justify-content:space-between;align-items:flex-start}.actual-controls-inner>*:first-child{min-width:0}.actual-control-buttons{display:flex;gap:10px;align-items:center;flex-wrap:wrap;justify-content:flex-end;flex-shrink:0}.actual-control-buttons button{font-size:13.5px;white-space:nowrap}.secure-after-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.secure-after-row>span{font-size:16.5px;font-weight:900;letter-spacing:.08em;color:var(--muted)}
@media(max-width:850px){.actual-controls-inner{display:block}.actual-control-buttons{justify-content:flex-start;margin-top:12px}}
.locked-row-tools{margin-top:16px;display:grid;gap:8px}.locked-row-tool{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 12px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.025)}.locked-row-tool>strong{min-width:80px}.locked-row-tool>span{font-size:16.5px;color:var(--muted);margin-right:auto}.locked-row-tool button{font-size:13.5px;white-space:nowrap}

/* V66 TruckPacks workflow refinements */
.pack-history-actions{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.button:disabled{opacity:.38;cursor:not-allowed}
.suggested-truck-canvas.drop-ready{outline:4px solid rgba(96,165,250,.55);outline-offset:3px;box-shadow:0 0 28px rgba(96,165,250,.16)}
.suggested-truck-wrap{padding-top:26px;padding-bottom:4.5px}.actual-truck-wrap{padding-top:26px;padding-bottom:4.5px}.suggested-row-actions{position:relative;width:100%;height:26px;margin-top:5px}.suggested-row-action-slot{position:absolute;top:0;height:26px;display:flex;justify-content:center;overflow:visible}.suggested-row-add{width:calc(100% - 4px);min-width:26px;height:22px;padding:2px;border:1px solid rgba(214,31,44,.55);border-radius:5px;background:#151b17;color:var(--accent);font-weight:950;line-height:1;text-align:center;letter-spacing:.015em;overflow:hidden;display:flex;align-items:center;justify-content:center}.suggested-row-add:hover,.suggested-row-add:focus-visible{background:var(--accent);color:#ffffff;border-color:var(--accent);outline:2px solid rgba(214,31,44,.35);outline-offset:2px}.row-add-arrow{display:block;font-size:clamp(10px,1.2vw,15px);line-height:1}.suggested-truck-wrap .door-label{bottom:auto;top:4px}.actual-truck-wrap .door-label{bottom:auto;top:4px}
.actual-case.movable{cursor:grab}.actual-case.movable.dragging{opacity:.35}.actual-case.locked{cursor:pointer}
.row-securement-chips{display:flex;gap:6px;flex-wrap:wrap;width:100%;margin-top:4px}.securement-chip{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:var(--text);border-radius:999px;padding:6px 9px;font:inherit;font-size:15px;font-weight:900;letter-spacing:.05em;cursor:pointer}.securement-chip:hover{border-color:rgba(214,31,44,.5)}
@media(max-width:850px){.pack-history-actions{align-items:flex-start}.pack-truck-selector-inline{width:100%}.pack-history-buttons{justify-content:flex-start}}

/* V69 reliable pointer-based case transfer */
.suggested-case,.actual-case.movable{touch-action:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;cursor:grab}.suggested-case:active,.actual-case.movable:active{cursor:grabbing}.pack-drag-ghost{position:fixed!important;z-index:9999!important;pointer-events:none!important;opacity:.78!important;transform:none!important;box-shadow:0 12px 34px rgba(0,0,0,.45)!important}.pack-pointer-dragging{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}.pack-pointer-dragging *{cursor:grabbing!important;user-select:none!important;-webkit-user-select:none!important}

/* V1.63: a dock-origin ghost keeps the dock's grey fill after it leaves .dock-list.
   Transparency and shadow come from the same .pack-drag-ghost rule used by truck cases. */
.pack-drag-ghost.dock-drag-ghost{background:#b9bec6!important}

/* V80: a case resting on its Back exposes the full caster plane. */
.top-wheel-markers.back i:nth-child(n){display:block}

/* V116: clearly distinguish the active floor or stacked-case tip control. */
.pack-stack-editor-card select:disabled,.pack-stack-editor-card input:disabled{background:#171d22!important;color:#68737d!important;border-color:#27313a!important;opacity:.58;cursor:not-allowed}
.pack-stack-editor-card label:has(select:disabled)>span,.pack-stack-editor-card label:has(input:disabled)>span{color:#68737d}
/* V146.41: direct request - Side 1/2/Height/Wheels/Resting-Tip-Side are permanently read-only in the
   ACTUAL row popup, each with its own "Move to Top Truck To Edit" note instead of a hover-only tooltip. */
.dim-field-wrap{position:relative;display:block}.dim-field-input{padding-right:26px!important}.dim-field-unit{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--muted);font-weight:800;font-size:16.5px;pointer-events:none}

/* V118: explicit, non-destructive approval for stack overhangs. */
.stack-override-dialog{width:min(680px,94vw)}.stack-override-dialog .dialog-card{border-color:#f59e0b;box-shadow:0 24px 80px rgba(0,0,0,.6)}.stack-override-message{margin:18px 0 12px;padding:16px;border:1px solid rgba(245,158,11,.42);border-radius:12px;background:rgba(245,158,11,.09);color:#f8fafc;font-size:24px;line-height:1.55}.stack-override-dialog .button.danger{background:#f59e0b;color:#111;border-color:#f59e0b}

/* V119: regeneration can never silently replace a complete pack with missing cases. */
.generation-warning-dialog{width:min(760px,94vw)}.generation-warning-dialog .dialog-card{border-color:#fb7185}.generation-warning-issues{display:grid;gap:8px;margin:14px 0 20px;padding:0;list-style:none}.generation-warning-issues li{display:grid;gap:3px;padding:11px 13px;border:1px solid rgba(251,113,133,.28);border-radius:10px;background:rgba(251,113,133,.07)}.generation-warning-issues b{color:#fff}.generation-warning-issues span{color:var(--muted);font-size:19.5px;line-height:1.4}
.packed-case.has-overhead-wheels{border-color:transparent!important;box-shadow:none!important}.packed-case.has-overhead-wheels::before{content:'';position:absolute;inset:0;background:var(--case-fill);border:1px solid rgba(0,0,0,.65);border-radius:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.24);z-index:0}.packed-case.has-overhead-wheels .case-name{position:relative;z-index:5}.packed-case.wheel-edge-left::before{left:var(--wheel-zone-x)}.packed-case.wheel-edge-right::before{right:var(--wheel-zone-x)}.packed-case.wheel-edge-top::before{top:var(--wheel-zone-y)}.packed-case.wheel-edge-bottom::before{bottom:var(--wheel-zone-y)}.packed-case.wheel-edge-top-face::before{inset:0}.wheel-edge-left .overhead-wheel-markers i:nth-child(n+3),.wheel-edge-right .overhead-wheel-markers i:nth-child(n+3),.wheel-edge-top .overhead-wheel-markers i:nth-child(n+3),.wheel-edge-bottom .overhead-wheel-markers i:nth-child(n+3){display:none!important}.wheel-edge-left .overhead-wheel-markers i:nth-child(1),.wheel-edge-right .overhead-wheel-markers i:nth-child(1){top:18%!important;bottom:auto!important}.wheel-edge-left .overhead-wheel-markers i:nth-child(2),.wheel-edge-right .overhead-wheel-markers i:nth-child(2){top:auto!important;bottom:18%!important}.wheel-edge-top .overhead-wheel-markers i:nth-child(1),.wheel-edge-bottom .overhead-wheel-markers i:nth-child(1){left:18%!important;right:auto!important}.wheel-edge-top .overhead-wheel-markers i:nth-child(2),.wheel-edge-bottom .overhead-wheel-markers i:nth-child(2){left:auto!important;right:18%!important}.wheel-edge-top-face .overhead-wheel-markers i:nth-child(n){display:block!important}
.packed-case.has-overhead-wheels{overflow:visible}.overhead-wheel-markers{position:absolute;inset:0;pointer-events:none;z-index:4}.overhead-wheel-markers i{position:absolute;display:block;background:#111;border:1.5px solid #d9e2ea;border-radius:50%;box-shadow:0 0 0 1px #111;box-sizing:border-box}.wheel-edge-top-face .overhead-wheel-markers i{width:var(--wheel-zone-x);height:var(--wheel-zone-y);max-width:10px;max-height:10px}.wheel-edge-top-face .overhead-wheel-markers i:nth-child(1){left:3px;top:3px}.wheel-edge-top-face .overhead-wheel-markers i:nth-child(2){right:3px;top:3px}.wheel-edge-top-face .overhead-wheel-markers i:nth-child(3){left:3px;bottom:3px}.wheel-edge-top-face .overhead-wheel-markers i:nth-child(4){right:3px;bottom:3px}.wheel-edge-left .overhead-wheel-markers,.wheel-edge-right .overhead-wheel-markers{border-style:solid;border-color:rgba(8,11,14,.75);border-width:0}.wheel-edge-left .overhead-wheel-markers{border-left-width:var(--wheel-zone-x)}.wheel-edge-right .overhead-wheel-markers{border-right-width:var(--wheel-zone-x)}.wheel-edge-left .overhead-wheel-markers i,.wheel-edge-right .overhead-wheel-markers i{width:var(--wheel-zone-x);height:var(--wheel-zone-x);max-width:10px;max-height:10px}.wheel-edge-left .overhead-wheel-markers i{left:calc(var(--wheel-zone-x) * -.5)}.wheel-edge-right .overhead-wheel-markers i{right:calc(var(--wheel-zone-x) * -.5)}.wheel-edge-left .overhead-wheel-markers i:nth-child(1),.wheel-edge-right .overhead-wheel-markers i:nth-child(1){top:7%}.wheel-edge-left .overhead-wheel-markers i:nth-child(2),.wheel-edge-right .overhead-wheel-markers i:nth-child(2){top:31%}.wheel-edge-left .overhead-wheel-markers i:nth-child(3),.wheel-edge-right .overhead-wheel-markers i:nth-child(3){bottom:31%}.wheel-edge-left .overhead-wheel-markers i:nth-child(4),.wheel-edge-right .overhead-wheel-markers i:nth-child(4){bottom:7%}.wheel-edge-top .overhead-wheel-markers{border-top:var(--wheel-zone-y) solid rgba(8,11,14,.75)}.wheel-edge-bottom .overhead-wheel-markers{border-bottom:var(--wheel-zone-y) solid rgba(8,11,14,.75)}.wheel-edge-top .overhead-wheel-markers i,.wheel-edge-bottom .overhead-wheel-markers i{width:var(--wheel-zone-y);height:var(--wheel-zone-y);max-width:10px;max-height:10px}.wheel-edge-top .overhead-wheel-markers i{top:calc(var(--wheel-zone-y) * -.5)}.wheel-edge-bottom .overhead-wheel-markers i{bottom:calc(var(--wheel-zone-y) * -.5)}.wheel-edge-top .overhead-wheel-markers i:nth-child(1),.wheel-edge-bottom .overhead-wheel-markers i:nth-child(1){left:7%}.wheel-edge-top .overhead-wheel-markers i:nth-child(2),.wheel-edge-bottom .overhead-wheel-markers i:nth-child(2){left:31%}.wheel-edge-top .overhead-wheel-markers i:nth-child(3),.wheel-edge-bottom .overhead-wheel-markers i:nth-child(3){right:31%}.wheel-edge-top .overhead-wheel-markers i:nth-child(4),.wheel-edge-bottom .overhead-wheel-markers i:nth-child(4){right:7%}
.wheel-edge-left .overhead-wheel-markers,.wheel-edge-right .overhead-wheel-markers,.wheel-edge-top .overhead-wheel-markers,.wheel-edge-bottom .overhead-wheel-markers{border:0}.wheel-edge-left .overhead-wheel-markers::after,.wheel-edge-right .overhead-wheel-markers::after,.wheel-edge-top .overhead-wheel-markers::after,.wheel-edge-bottom .overhead-wheel-markers::after{content:'';position:absolute;opacity:.72}.wheel-edge-left .overhead-wheel-markers::after{left:var(--wheel-zone-x);top:0;bottom:0;border-left:1px solid #080b0e}.wheel-edge-right .overhead-wheel-markers::after{right:var(--wheel-zone-x);top:0;bottom:0;border-right:1px solid #080b0e}.wheel-edge-top .overhead-wheel-markers::after{top:var(--wheel-zone-y);left:0;right:0;border-top:1px solid #080b0e}.wheel-edge-bottom .overhead-wheel-markers::after{bottom:var(--wheel-zone-y);left:0;right:0;border-bottom:1px solid #080b0e}.wheel-edge-left .overhead-wheel-markers i,.wheel-edge-right .overhead-wheel-markers i,.wheel-edge-top .overhead-wheel-markers i,.wheel-edge-bottom .overhead-wheel-markers i{width:var(--wheel-zone-x);height:var(--wheel-zone-y);max-width:none;max-height:none}.wheel-edge-left .overhead-wheel-markers i{left:0}.wheel-edge-right .overhead-wheel-markers i{right:0}.wheel-edge-top .overhead-wheel-markers i{top:0}.wheel-edge-bottom .overhead-wheel-markers i{bottom:0}
.actual-level-badge{position:absolute;left:3px;top:2px;z-index:20;padding:1px 4px;border-radius:4px;background:rgba(8,11,14,.76);color:#d61f2c;font-size:7px;font-weight:1000;letter-spacing:.04em;pointer-events:none}

/* V137 pack safety and operator controls */
.case-accountability{display:grid;grid-template-columns:repeat(5,minmax(110px,1fr)) auto;gap:1px;margin:0 0 14px;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--line)}
.case-accountability>div,.case-accountability>b{display:flex;flex-direction:column;justify-content:center;min-height:66px;padding:10px 14px;background:#11171d}.case-accountability span{font-size:16.5px;font-weight:900;letter-spacing:.12em;color:var(--muted)}.case-accountability strong{font-size:36px}.case-accountability>b{color:#d61f2c;align-items:center;text-align:center}.case-accountability.bad>b{color:#ff7d7d;background:#28171a}
.persistent-panel{min-height:190px}.persistent-problems,.activity-log{display:grid;gap:8px}.problem-item,.activity-entry{display:grid;grid-template-columns:minmax(90px,auto) 1fr;gap:12px;padding:10px 12px;border:1px solid #64343a;border-radius:9px;background:#24171a}.problem-item span,.activity-entry span{color:var(--muted)}.problem-clear{padding:14px;border:1px solid #3e6434;border-radius:9px;color:#d61f2c;background:#142116}.activity-entry{grid-template-columns:74px 1fr;border-color:var(--line);background:#0c1116}.activity-entry.error{border-color:#743c43}.activity-entry time{color:#d61f2c;font-size:18px;font-weight:900}
.state-legend{display:inline-flex;align-items:center;gap:5px;font-size:16.5px;font-weight:900;color:var(--muted)}.state-legend b{color:#d61f2c}.packed-case.stacked{box-shadow:inset 0 0 0 3px rgba(255,255,255,.7)}.packed-case.manually-rotated:after{content:'↻';position:absolute;right:3px;top:2px;font-size:10px;font-weight:1000}.packed-case.fit-override{outline:3px dashed #ffb454;outline-offset:-4px}.packed-case.locked{filter:saturate(.8)}
.case-quick-tools{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);display:none;gap:2px;z-index:30}.packed-case:hover .case-quick-tools,.packed-case:focus-within .case-quick-tools{display:flex}.case-quick-tools button{min-width:14px;height:13px;padding:0 2px;border:1px solid #101418;border-radius:3px;background:#0a0e12;color:#fff;font-size:6px;font-weight:1000;cursor:pointer}.case-quick-tools button:hover{background:#d61f2c;color:#ffffff}
.placement-explanation{margin:14px 22px;padding:14px 16px;border:1px solid #52652d;border-radius:10px;background:#131a10}.placement-explanation p{margin:5px 0 0;color:#d7dfca;line-height:1.5}
.regeneration-preview-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:18px 0}.preview-metric{display:flex;flex-direction:column;padding:14px;border:1px solid var(--line);border-radius:10px;background:#0c1116}.preview-metric b{font-size:42px;color:#d61f2c}.preview-metric span{color:var(--muted)}.regeneration-preview-summary p{grid-column:1/-1;color:var(--muted);line-height:1.5}
.stack-builder-card{max-width:900px}.stack-builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}.stack-builder-grid label{display:grid;gap:7px}.stack-builder-grid label>span{font-size:18px;font-weight:900;letter-spacing:.1em;color:var(--muted)}.stack-builder-grid select{width:100%}.valid-result{color:#d61f2c}
@media(max-width:900px){.case-accountability{grid-template-columns:repeat(2,1fr)}.case-accountability>b{grid-column:1/-1}.regeneration-preview-summary,.stack-builder-grid{grid-template-columns:1fr}.regeneration-preview-summary p{grid-column:auto}.case-quick-tools{display:flex}.pack-history-actions{flex-wrap:wrap}}
/* V146.19: Case Sheet simplified to basic-info entry only - Row Number, Row Lock, Orientation
   and Resting Side columns removed (still settable per case in the Pack view). This is the final
   word on .case-sheet sizing in the cascade, overriding every earlier min-width set back when the
   sheet had those extra columns. Case Number and Description are narrowed on request - each input
   keeps typing past its visible width (native text-input scroll), and the full value always shows
   in the Pack view's per-case popup. All widths are explicit (not just min-width) so the table's
   own width does not force auto-layout to redistribute leftover space onto these two columns. */
.case-sheet{table-layout:fixed;width:100%;min-width:1006px}
.case-number-cell{width:78px;min-width:78px}
.case-number-cell input{width:8ch}
.case-description-cell{min-width:140px}

/* V1.06: condensed step-nav folded into the header's middle column, replacing the old full-width
   step-nav row entirely (direct request for more vertical space). Element+class selectors below
   guarantee these win over the base .step-nav/.step rules regardless of file order. */
.header-center{grid-column:2;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
nav.header-steps{display:flex;align-items:center;gap:4px;border-bottom:0;background:transparent;position:static;top:auto;z-index:auto}
nav.header-steps .step{border:0;padding:4px 9px;border-radius:999px;gap:5px}
nav.header-steps .step.active{background:#14191f}
nav.header-steps .step b{width:24px;height:24px;font-size:11px;flex-shrink:0}
nav.header-steps .step span{font-size:12.5px;white-space:nowrap}

/* ===================== V147: Truck Pack Challenge game ===================== */
/* The "Try it out now!" banner on the real site's header, linking to challenge.html. */
.challenge-banner{grid-column:2;justify-self:center;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--accent);background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-weight:900;font-size:14.5px;text-decoration:none;letter-spacing:.02em;animation:challengeBannerPulse 2.2s ease-in-out infinite;white-space:nowrap}
.challenge-banner:hover{filter:brightness(1.12)}
@media(max-width:1050px){.site-header{display:flex;flex-wrap:wrap;justify-content:space-between;row-gap:8px}.header-center{width:100%;order:3;justify-content:center}.challenge-banner{width:100%;justify-content:center}}
@keyframes challengeBannerPulse{0%,100%{box-shadow:0 0 0 0 rgba(214,31,44,.55)}50%{box-shadow:0 0 0 7px rgba(214,31,44,0)}}
@media(max-width:700px){.challenge-banner{font-size:15px;padding:8px 11px}}

/* V1.46: direct request - fill the empty black band under the header on the main planner page with a
   row of quick trust points (free, no login, no card, print-from-browser) instead of leaving it blank.
   V1.47: follow-up request - only the Project Setup view should show it, not Case Sheet or Truck Packs,
   so it now lives inside #view-setup (hidden automatically with the rest of that view via .view/.view.active)
   instead of sitting in the header area above all three views. */
.trust-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 30px;padding:0 0 16px;margin-bottom:18px;border-bottom:1px solid var(--line);text-align:center}
.trust-bar span{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.trust-bar span::before{content:"\2713";color:var(--good);font-weight:900;font-size:14px}
@media(max-width:700px){.trust-bar{gap:8px 14px}.trust-bar span{font-size:11px;white-space:normal}}

/* V1.50: direct request - real, visible marketing copy naming "free truck pack planner" (the sr-only
   H1 and meta tags target the same phrase, but search engines weigh visible on-page text too), sitting
   right above the trust bar so it reads as one intro block instead of competing with it. */
.hero-title{margin:6px 0 0;text-align:center;font-size:34px;font-weight:900;letter-spacing:-.02em;color:var(--text)}
.hero-tagline{margin:8px 0 0;text-align:center;color:var(--muted);font-size:15px;font-weight:600}
@media(max-width:700px){.hero-tagline{font-size:13px}.hero-title{font-size:26px}}

/* Case Sheet lockdown: dimension/weight edits are disabled (not removed) so players can still see
   every case's fixed size while the Truck column - the one control the Challenge actually needs -
   stays fully live. Duplicate/Delete are disabled the same way; upload/add-case controls are left
   out of challenge.html's markup entirely (app.js binds them with optional chaining). */
body[data-app-mode="challenge"] .case-dimension-picker-btn:disabled,
body[data-app-mode="challenge"] .weight-cell input:disabled,
body[data-app-mode="challenge"] .weight-cell input[readonly],
body[data-app-mode="challenge"] .case-number-cell input[readonly],
body[data-app-mode="challenge"] .case-description-cell input[readonly],
body[data-app-mode="challenge"] .row-actions .icon-button:disabled{opacity:.4;cursor:not-allowed}
body[data-app-mode="challenge"] .weight-cell input[readonly],
body[data-app-mode="challenge"] .case-number-cell input[readonly],
body[data-app-mode="challenge"] .case-description-cell input[readonly]{background:#101115;color:var(--muted)}

/* Setup page truck cards: dimensions are fixed for every Roadie, so the inputs are disabled rather
   than hidden - the numbers still need to be visible/comparable at a glance. */
body[data-app-mode="challenge"] .truck-fields input:disabled{opacity:.55;cursor:not-allowed;background:#101115}

/* Finish button slot, next to "The real load plan" heading above Truck 1's Actual Pack. Empty and
   invisible until every case is committed to Truck 1's Actual Pack (see renderChallengeFinishSlot
   in app.js), so nothing shifts layout while the player is still working. */
.challenge-finish-slot{display:flex;align-items:stretch}
.challenge-finish-btn{font-size:21px;padding:12px 22px;animation:challengeFinishGlow 1.6s ease-in-out infinite}
@keyframes challengeFinishGlow{0%,100%{box-shadow:0 0 0 0 rgba(214,31,44,.6)}50%{box-shadow:0 0 0 9px rgba(214,31,44,0)}}
.challenge-submitted-pill{color:var(--good);border-color:var(--good)}
.challenge-hint-pill{color:var(--warn);border-color:#5c4a1f;font-weight:700}

/* V147.13: scoring and the LeaderBoard were removed by direct request - completing the Challenge now
   just shows a plain congratulations dialog. */
.challenge-complete-dialog{text-align:center}
.challenge-complete-icon{font-size:78px;line-height:1;margin-bottom:6px}
.challenge-complete-dialog p{color:var(--muted);font-size:19.5px;margin-top:8px}
.challenge-complete-dialog .dialog-actions{justify-content:center;margin-top:20px}
.challenge-back-link{white-space:nowrap}
@media(max-width:700px){.header-right .challenge-back-link,.header-right #challengeHowToPlayBtn{display:none}}
/* ===================== end V147 Truck Pack Challenge game ===================== */

/* V147.10: mobile splash gate - direct request, the drag/drop planner and the Challenge game are both
   unusable on a phone-size touchscreen. The inline <head> script in index.html/challenge.html adds
   is-mobile-device to <html> before first paint (using UA sniffing plus a coarse-pointer+narrow-width
   fallback, so it also catches tablets), and this hides every other direct child of <body> in favor of
   the gate below. #mobileGateContinue (wired in app.js) is an escape hatch for anyone who lands here on
   a real device that can actually run it - it only lasts for that browser tab/session. */
#mobileGate{display:none}
/* V1.70: the Desktop Only gate is retired - phones now get the phone version (mobile.css/mobile.js). */
#mobileGate{position:fixed;inset:0;z-index:9999;background:var(--bg);flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:32px 24px;text-align:center}
#mobileGate img{width:110px;height:auto}
#mobileGate h1,#mobileGate .mobile-gate-title{font-size:30px;font-weight:700;color:var(--text)}
#mobileGate p{max-width:380px;color:var(--muted);font-size:19.5px;line-height:1.55}
.mobile-gate-cta{border:0;background:transparent;color:var(--muted);font-size:16.5px;text-decoration:underline;padding:4px;margin-top:4px}
.mobile-gate-cta:hover{color:var(--text)}

/* V147.11: footer legal links (Privacy Policy / Terms of Use) on index.html and challenge.html, plus
   the standalone legal-page layout privacy.html/terms.html use - same dark theme and type scale as the
   rest of the site, just prose instead of the app UI. */
.site-footer{max-width:1500px;margin:0 auto;padding:18px 24px 34px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center;justify-content:space-between;border-top:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1.5}
.site-footer span:first-child{max-width:640px}
.footer-links{display:flex;gap:8px;align-items:center;white-space:nowrap}
.footer-links a{color:var(--muted);text-decoration:underline}
.footer-links a:hover{color:var(--text)}
@media(max-width:700px){.site-footer{padding:16px 11px 28px;flex-direction:column;align-items:flex-start}}
/* V1.42: direct request - a continuous right-to-left scrolling banner of the Hare Krishna maha
   mantra, beneath the copyright/legal-links footer, on every page. Two identical copies of the text
   sit side by side in a flex track; animating the track exactly one copy-width to the left (-50%)
   and looping is what makes the scroll read as endless, with no visible seam or reset-jump. */
.footer-mantra{overflow:hidden;white-space:nowrap;width:100%;padding:8px 0;border-top:1px solid var(--line);background:#0a0a0b}
.footer-mantra-track{display:inline-flex;width:max-content;animation:footerMantraScroll 38s linear infinite}
/* V1.44: direct request - "just a few shades lighter than the black background... noticeable but
   kind of hidden," instead of the much brighter var(--muted) gray it used before. #222226 sits only
   a little above the footer's own #0a0a0b background - visible up close or if you're looking for
   it, easy to miss at a glance. */
.footer-mantra-track span{color:#222226;font-size:13.5px;letter-spacing:.02em}
@keyframes footerMantraScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.footer-mantra-track{animation:none}}

.legal-shell{max-width:820px;margin:0 auto;padding:36px 24px 60px}
.legal-shell h1{font-size:39px;letter-spacing:-.03em;margin-bottom:4px}
.legal-shell .legal-updated{color:var(--muted);font-size:16.5px;text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin-bottom:26px}
.legal-shell h2{font-size:22.5px;margin:28px 0 8px}
.legal-shell p,.legal-shell li{color:#c7cad0;font-size:19.5px;line-height:1.7}
.legal-shell ul,.legal-shell ol{margin:6px 0 6px 20px;padding:0;display:grid;gap:6px}
.legal-shell a{color:#8fb8ff}
.legal-shell .legal-note{border-left:3px solid var(--warn);background:rgba(245,185,66,.06);padding:12px 14px;border-radius:0 8px 8px 0;margin:20px 0}
.legal-shell .legal-note p{color:#f5dca8;margin:0}
.legal-back-link{display:inline-block;margin-bottom:18px;color:var(--muted);font-size:16.5px;text-decoration:underline}
/* V1.22: multi-select rubber-band + group drag */
.packed-case.selected{outline:3px solid #ffd23f;outline-offset:-3px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 14px rgba(255,210,63,.65)}
.rubber-band-box{position:fixed;z-index:9998;pointer-events:none;border:1.5px dashed #4da3ff;background:rgba(77,163,255,.16);border-radius:2px}
.pack-group-drag-ghost{position:fixed!important;z-index:9999!important;pointer-events:none!important;display:flex;align-items:center;justify-content:center;border:2px dashed #ffd23f;border-radius:6px;background:rgba(255,210,63,.14);box-shadow:0 12px 34px rgba(0,0,0,.45)}
.pack-group-drag-count{background:#111214;color:#fff;font-weight:800;font-size:12px;letter-spacing:.02em;padding:4px 9px;border-radius:4px;white-space:nowrap}
.legal-back-link:hover{color:var(--text)}

/* V1.55: SEO audience landing pages (V1.92: only tour-truck-pack-planner remains;
   the moving-truck and trailer-loading pages were removed). Static content pages - same dark theme and type scale as the app, but
   fully responsive and readable on phones (they don't use the mobile gate). */
.footer-links{flex-wrap:wrap;white-space:normal}
.footer-links a{white-space:nowrap}
.lp-shell{max-width:1100px;margin:0 auto;padding:22px 24px 50px}
.lp-breadcrumb{color:var(--muted);font-size:14px;margin-bottom:18px}
.lp-breadcrumb a{color:var(--muted)}
.lp-hero{max-width:880px}
.lp-hero h1{font-size:46px;letter-spacing:-.035em;line-height:1.05;margin:6px 0 14px}
.lp-lead{color:#c7cad0;font-size:19.5px;line-height:1.6}
.lp-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px}
.lp-cta{display:inline-block;text-decoration:none}
.lp-cta-note{color:var(--muted);font-size:14px}
.lp-trust{list-style:none;padding:0;margin:20px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.lp-trust li{border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:6px 12px;font-size:13.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#c7cad0}
.lp-trust li::before{content:"✓ ";color:var(--good)}
.lp-shot{margin:34px 0 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px}
.lp-shot img{display:block;width:100%;height:auto;border-radius:8px}
.lp-shot figcaption{color:var(--muted);font-size:14.5px;margin-top:10px;line-height:1.5}
.lp-section{margin-top:46px}
.lp-section h2,.lp-final h2{font-size:30px;letter-spacing:-.025em;margin-bottom:16px}
.lp-steps{list-style:none;counter-reset:lp;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lp-steps li{counter-increment:lp;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px}
.lp-steps li::before{content:counter(lp);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font-weight:900;font-size:14px;margin-bottom:10px}
.lp-steps h3,.lp-card h3{font-size:18px;margin-bottom:6px}
.lp-steps p,.lp-card p{color:#c7cad0;font-size:15.5px;line-height:1.55}
.lp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lp-card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px}
.lp-tips{margin:0;padding:0 0 0 22px;display:grid;gap:10px;max-width:880px}
.lp-tips li{color:#c7cad0;font-size:17px;line-height:1.6}
.lp-tips li::marker{color:var(--accent)}
.lp-faq{display:grid;gap:10px;max-width:880px}
.lp-faq-item{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 18px}
.lp-faq-item summary{cursor:pointer;font-weight:800;font-size:17.5px}
.lp-faq-item p{color:#c7cad0;font-size:16.5px;line-height:1.6;margin-top:8px}
.lp-final{margin-top:50px;padding:26px}
.lp-final p{color:#c7cad0;font-size:17px}
.lp-more-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.lp-more-link{display:grid;gap:6px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:18px;color:var(--text);text-decoration:none}
.lp-more-link:hover{border-color:#465362}
.lp-more-link b{font-size:19px}
.lp-header-cta{text-decoration:none;font-size:15px;padding:8px 12px}
@media(max-width:900px){.lp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-grid{grid-template-columns:1fr}}
@media(max-width:600px){.lp-shell{padding:16px 16px 40px}.lp-hero h1{font-size:34px}.lp-lead{font-size:17.5px}.lp-steps,.lp-more-grid{grid-template-columns:1fr}.lp-section h2,.lp-final h2{font-size:25px}
  .lp-header{grid-template-columns:1fr auto;padding:8px 12px}.lp-header .brand-row div{display:none}.lp-header .brand-logo{height:40px}.lp-header-cta{font-size:13px;padding:7px 9px}}

/* V1.56: Project Setup "Truck type" preset dropdown + approximate-size warning (Planner only). */
.truck-type-block{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;max-width:560px}
.truck-type-label>span{display:block;color:var(--muted);font-size:15px;font-weight:800;margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em}
.truck-type-label select{font-size:15px}
.truck-type-warning{margin:0;color:var(--warn);font-size:13.5px;font-weight:700;line-height:1.4}
.truck-type-warning b{color:var(--warn)}
.truck-type-loaded{display:block;margin-top:6px;color:var(--text)}
.truck-type-loaded b{color:var(--text)}
@media(max-width:1000px){.truck-type-block{grid-template-columns:1fr}}

/* V1.58: both overhead truck views are turned 180° - NOSE on the right, REAR DOORS on the left
   (see TRUCK_VIEW_EDGE_FLIP in app.js). These overrides mirror the direction-specific styling. */
.truck-wrap .nose-label{left:auto;right:2px}
.truck-wrap .door-label{right:auto;left:2px}
.truck-canvas{border-radius:17px 9px 9px 17px}
.row-band{border-left:1px dashed;border-right:2px solid}
.row-band span{left:auto;right:4px}
.truck-canvas .bar-label{transform:translateX(50%)}

/* V1.59: Row Planner + Dock. Left column = collapsible HOW IT WORKS + DOCK STAGE 2 (cases waiting to
   load), a fixed-height column that never grows; overflow opens as a drop-down over the row controls. */
.dock-column{display:flex!important;flex-direction:column;position:relative;overflow:hidden!important}
.dock-column.hiw-open{overflow-y:auto!important}
.dock-column.dock-expanded{overflow:visible!important;z-index:40}
.dock-column [hidden]{display:none!important}
.hiw-toggle{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;background:transparent;border:0;border-bottom:1px solid var(--line);padding:2px 0 8px;margin-bottom:10px;color:var(--accent);font-weight:900;letter-spacing:.14em;font-size:13px;cursor:pointer;text-align:left}
.hiw-toggle i{font-style:normal;color:var(--muted);font-size:13px;letter-spacing:.02em;white-space:nowrap}
.hiw-toggle:hover i{color:var(--text)}
.hiw-close{border-bottom:0;border-top:1px solid var(--line);padding:8px 0 2px;margin:10px 0 0}
.hiw-body h2{font-size:19px;letter-spacing:-.02em;margin-bottom:6px}
.dock-panel{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
.dock-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:4px}
.dock-head .eyebrow{font-size:13px}.dock-head small{color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.04em;white-space:nowrap}
.dock-sub{color:var(--muted);font-size:12.5px;line-height:1.35;margin-bottom:8px}
.dock-list{display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;align-items:flex-start;overflow:hidden;flex:1 1 auto;min-height:0;padding:6px;border:1px dashed #3a3d44;border-radius:8px;background:linear-gradient(rgba(255,255,255,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.028) 1px,transparent 1px),#131416;background-size:24px 24px}
.dock-list .packed-case.dock-case{position:relative;flex:0 0 auto;background:#b9bec6;cursor:grab;touch-action:none;user-select:none}
.dock-list .packed-case.dock-case:hover{outline:2px solid #fff;outline-offset:-1px}
/* V1.66: dock marquee selections use the same persistent yellow highlight as truck selections. */
.dock-list .packed-case.dock-case.selected,.dock-list .packed-case.dock-case.selected:hover{outline:3px solid #ffd23f;outline-offset:-3px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 0 14px rgba(255,210,63,.65)}
.dock-empty{color:var(--muted);font-size:13px;padding:6px}
.dock-more{margin-top:8px;width:100%;border:1px dashed #5a5e66;background:#15161a;color:var(--text);border-radius:7px;padding:8px;font-weight:900;font-size:12.5px;letter-spacing:.06em;cursor:pointer;flex:0 0 auto}
.dock-more:hover{border-color:var(--accent)}
.dock-overflow{position:absolute;left:-1px;right:-1px;top:100%;margin-top:-10px;background:var(--panel);border:1px solid var(--accent);border-top:0;border-radius:0 0 10px 10px;padding:4px 18px 14px;z-index:60;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.dock-overflow .dock-list{overflow:visible;border-top-style:dashed}
.pack-print-row{display:flex;justify-content:flex-end;align-items:center;gap:10px}
.pack-truck-select-inline{display:flex;align-items:center;gap:10px}
.pack-truck-select-inline span{color:var(--muted);font-size:13px;font-weight:900;letter-spacing:.1em;white-space:nowrap}
.pack-truck-select-inline select{width:230px;padding:6px 9px}
.case-sheet th.location-cell,.case-sheet td.location-cell{width:175px;min-width:175px;max-width:175px}
.location-select{min-width:160px}
.location-select.loc-dock{color:#f5b942}
.location-select:disabled{opacity:.5;cursor:not-allowed}
.truck-wrap{max-width:100%}

/* V1.60: truck size lock note on Project Setup */
.truck-size-lock-note{margin-top:10px;color:var(--warn);font-size:14px;font-weight:700}

/* V1.73: flashing lime demo banner (homepage) + INSTRUCTIONS button (Challenge), same blink as the phone bars */
/* V1.75: slow, smooth glow instead of a hard blink */
@keyframes tpLimeFlash{0%,100%{background:#c9ef3c;color:#111;box-shadow:0 0 0 0 rgba(217,255,71,0),0 0 6px 0 rgba(217,255,71,.25)}50%{background:#e4ff6e;color:#111;box-shadow:0 0 0 5px rgba(217,255,71,.18),0 0 22px 6px rgba(217,255,71,.45)}}
.challenge-banner{border:2px solid #d9ff47;background:#d9ff47;color:#111;animation:tpLimeFlash 2.6s ease-in-out infinite}
.challenge-banner:hover{filter:none;animation-play-state:paused;background:#d9ff47;color:#111}
.tp-flash-btn{border:2px solid #d9ff47;background:#d9ff47;color:#111;font-weight:900;letter-spacing:.06em;animation:tpLimeFlash 2.6s ease-in-out infinite}
.tp-flash-btn:hover{animation-play-state:paused;background:#d9ff47;color:#111}
/* V1.73: step-by-step Challenge instructions */
.challenge-intro-dialog .dialog-card{max-height:calc(100dvh - 40px);display:flex;flex-direction:column}
.challenge-intro-dialog .dialog-copy{overflow-y:auto;min-height:0;padding-right:4px}
.challenge-steps h4{margin:14px 0 4px;color:#d9ff47;font-size:15px;letter-spacing:.1em}
.challenge-steps ul{margin:0;padding-left:20px;display:grid;gap:4px}
.challenge-steps li{line-height:1.4}
.challenge-steps-end{margin-top:12px;font-weight:900;letter-spacing:.04em;color:#fff}
.challenge-steps-end+.challenge-steps-end{margin-top:4px}

/* V1.74: desktop click to pick up / click to drop */
.packed-case.click-picked{outline:3px solid #d9ff47;outline-offset:1px;box-shadow:0 0 0 2px #111,0 0 18px 4px rgba(217,255,71,.75)!important;z-index:40!important;animation:tpPickPulse 1s ease-in-out infinite}
@keyframes tpPickPulse{50%{box-shadow:0 0 0 2px #111,0 0 8px 1px rgba(217,255,71,.35)}}
.packed-case.click-dropped{animation:tpDropFlash .8s ease-out}
@keyframes tpDropFlash{0%{box-shadow:0 0 0 4px #fff,0 0 24px 8px rgba(255,255,255,.8)}100%{box-shadow:none}}
body.tp-holding #suggestedTruckCanvas,body.tp-holding #actualTruckCanvas{cursor:crosshair}
body.tp-holding #dockList,body.tp-holding #dockOverflowList{cursor:copy}
.tp-pick-bar{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:18px;z-index:900;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;max-width:calc(100vw - 32px);padding:9px 10px 9px 16px;border-radius:12px;border:2px solid #d9ff47;background:#15180b;color:#f4ffc4;box-shadow:0 12px 34px rgba(0,0,0,.6);font-size:15px}
.tp-pick-bar[hidden]{display:none}
.tp-pick-msg b{color:#d9ff47}
.tp-pick-bar button{border:1px solid #4a5320;background:#23280f;color:#f4ffc4;border-radius:8px;padding:7px 11px;font-weight:800;font-size:14px;cursor:pointer}
.tp-pick-bar button:hover{border-color:#d9ff47}
.tp-pick-bar button small{opacity:.6;font-weight:600;margin-left:3px}
html.is-mobile-device .tp-pick-bar{display:none!important}

/* V1.76: desktop toasts sit bottom-LEFT so they never cover the Lock Current Row button (bottom right) */
.toast{left:18px;right:auto}

/* V1.77: Case Editor picture - zoomed views, sliding side/bottom views, compact symmetric buttons */
.pack-row-view .prv-head{text-align:center;margin:4px 0 8px;line-height:1.25}
.pack-row-view .prv-head b{display:block;color:#c3ccd5;font-size:13px;letter-spacing:.08em}
.pack-row-view .prv-head span{display:block;color:#7f8a96;font-size:11px;font-weight:800;letter-spacing:.06em;margin-top:2px}
.prv-viewport{position:relative;width:100%}
.prv-scroll{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.prv-scroll::-webkit-scrollbar{display:none}
.prv-viewport:not(.prv-long) .prv-scroll svg{margin:0 auto}
.pack-edit-case-view .prv-scroll svg.pack-row-view-svg{display:block;max-height:none!important;min-height:0!important;max-width:none}
.prv-end{position:absolute;top:50%;transform:translateY(-50%);z-index:2;pointer-events:none;background:rgba(12,17,22,.88);border:1px solid #3b4652;color:#d9ff47;font-size:11px;font-weight:900;letter-spacing:.08em;padding:5px 7px;border-radius:7px;white-space:nowrap}
.prv-end-l{left:4px}.prv-end-r{right:4px}
.prv-slider{display:block;width:100%;margin:10px 0 2px;accent-color:#d9ff47;height:26px;cursor:pointer}
.prv-floor{text-align:center;color:#8e99a5;font-size:11px;font-weight:900;letter-spacing:.12em;margin-top:6px}
.pack-row-view .pack-row-view-controls{margin-top:10px}
.pack-row-view .pack-row-view-hub{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important;width:100%;max-width:400px!important;margin:0 auto}
.pack-row-view .pack-row-view-hub .row-view-arrow{grid-column:auto!important;grid-row:auto!important;width:100%!important}
.pack-row-view .row-view-arrow{min-height:34px!important;height:auto!important;padding:6px 8px!important;font-size:12px!important;letter-spacing:.04em;border-radius:8px!important;line-height:1.15;white-space:nowrap;position:static!important;transform:none!important}
.pack-row-view .row-view-arrow-back{min-width:120px}

/* V1.79: Actual Pack Row Editor - red button + row picker */
.pack-heading-btns{display:flex;gap:10px;align-items:stretch;justify-content:center}
.tp-row-editor-btn{background:#d61f2c!important;border:2px solid #ff5a64!important;color:#fff!important;font-weight:900;letter-spacing:.05em}
.tp-row-editor-btn:hover{filter:brightness(1.12)}
.row-pick-dialog{width:min(560px,calc(100% - 24px))}
.row-pick-dialog .rp-help{line-height:1.45;margin-bottom:8px}
.row-pick-dialog .rp-note{color:var(--muted);font-size:14px;line-height:1.4;margin-bottom:12px}
.row-pick-dialog .rp-all{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;margin-bottom:8px;background:#1b1c1f;cursor:pointer}
.row-pick-dialog .rp-list{display:grid;gap:6px;max-height:min(46vh,420px);overflow:auto}
.row-pick-dialog .rp-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;cursor:pointer}
.row-pick-dialog .rp-row:has(input:checked){border-color:#d9ff47;background:#1a1d0f}
.row-pick-dialog input[type=checkbox]{width:22px;height:22px;accent-color:#d9ff47;flex:0 0 auto;margin:0}
.row-pick-dialog .rp-swatch{width:14px;height:14px;border-radius:4px;flex:0 0 auto}
.row-pick-dialog .rp-name{font-weight:900;min-width:58px}
.row-pick-dialog .rp-meta{color:var(--muted);font-size:14px}
.row-pick-dialog .rp-empty{padding:14px;border:1px dashed var(--line);border-radius:10px;color:var(--muted)}
.row-pick-dialog .rp-open:disabled{opacity:.45;cursor:not-allowed}

/* V1.80: floating row buttons behind the current row (desktop) */
.tp-rowact-host{position:absolute;z-index:45;transform:translate(-100%,-50%);pointer-events:none}
.tp-rowact-host[hidden]{display:none}
.tp-rowact{display:flex;flex-direction:column;gap:5px;align-items:stretch;pointer-events:auto;min-width:150px}
.tp-rowact button{border-radius:8px;font:inherit;font-weight:900;font-size:12.5px;letter-spacing:.04em;padding:7px 10px;cursor:pointer;white-space:nowrap;border:1px solid #3b4652;background:#161b20;color:#e8edf2}
.tp-rowact button:hover{border-color:#d9ff47}
.tp-rowact .tp-ra-lock{background:#d9ff47;color:#111;border:2px solid #d9ff47;font-size:14px;padding:10px 14px;animation:tpLimeFlash 2.6s ease-in-out infinite}
.tp-rowact .tp-ra-lab{font-size:10.5px;font-weight:900;letter-spacing:.1em;color:#9aa6b3;text-align:center;background:rgba(10,12,14,.85);border-radius:6px;padding:2px 4px}
.tp-rowact .tp-ra-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.tp-rowact .tp-ra-trio button{padding:7px 6px;background:#12241a;border-color:#2f6b45;color:#bff5cf}
.tp-rowact .tp-ra-remove{background:#2a1d10;border-color:#8a5a22;color:#ffd9a8}
.tp-rowact .tp-ra-unlock{background:#2a1215;border-color:#8c2a33;color:#ffc7cc}

/* V1.82: How it works shows steps 1-3; 4-6 behind a toggle */
.how-it-works li.hiw-more{display:none}
.how-it-works.show-more li.hiw-more{display:list-item;display:block}
.hiw-more-toggle{margin:8px 0 0;border:1px solid var(--line);background:#1b1c1f;color:var(--text);border-radius:8px;padding:6px 10px;font-weight:800;font-size:13px;cursor:pointer;align-self:flex-start}
.hiw-more-toggle:hover{border-color:#d9ff47}
/* V1.82: INSTRUCTIONS + ACTUAL PACK ROW EDITOR only slightly taller than their text */
.pack-heading-btns{align-items:center}
.pack-heading-btns .button{align-self:center;height:auto;min-height:0;padding:6px 14px;font-size:14px;line-height:1.2}
/* V1.82: breathing room under "CLICK A CASE, THEN CLICK WHERE IT GOES IN THE ACTUAL TRUCK" */
.transfer-arrow{margin:6px 0 14px}
/* V1.82: floating row buttons - centred in the free space; docked into the left column near the doors */
.tp-rowact-host{transform:translate(-50%,-50%);transition:opacity .15s}
.tp-rowact-host.tp-ra-docked.tp-ra-peek{opacity:0;pointer-events:none}
.tp-rowact-host.tp-ra-docked.tp-ra-peek .tp-rowact{pointer-events:none}
/* V1.82: steps pack at the top, leaving the blank space below for the parked row buttons */
.pack-instructions-col .how-it-works{flex:0 0 auto!important;align-content:start;gap:10px}
.pack-instructions-col .how-it-works li{margin:0}
/* V1.87: "Show / Hide steps 4-6" sits at the very bottom of the left column, below the parked row buttons */
.pack-instructions-col .hiw-more-toggle{margin-top:auto;align-self:flex-start}
.pack-instructions-col .how-it-works{margin-bottom:12px}
.hiw-body{display:flex;flex-direction:column;flex:1 1 auto;min-height:0}
/* V1.88: reserved strip for parked row buttons at the bottom of the dock */
.dock-rowact-space{flex:0 0 auto;height:0}
/* V1.89: congrats popup - two choices */
.challenge-complete-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.challenge-complete-actions .button{flex:1 1 220px}
/* V1.94: road-case look. Body = Case Color, rails on every edge = Rail Color, corner caps always
   silver. The layered background is one custom property so the wheel-zone ::before can reuse it. */
.road-case{--rc-r:2.5px;--rc-cap:7px;--rc-capimg:radial-gradient(circle at 40% 38%,#ffffff 0,#e2e6ea 38%,#9aa2ab 100%);
  --rc-bg:var(--rc-capimg) left top/min(var(--rc-cap),30%) min(var(--rc-cap),30%) no-repeat,var(--rc-capimg) right top/min(var(--rc-cap),30%) min(var(--rc-cap),30%) no-repeat,var(--rc-capimg) left bottom/min(var(--rc-cap),30%) min(var(--rc-cap),30%) no-repeat,var(--rc-capimg) right bottom/min(var(--rc-cap),30%) min(var(--rc-cap),30%) no-repeat,linear-gradient(var(--rc-rail),var(--rc-rail)) left top/100% var(--rc-r) no-repeat,linear-gradient(var(--rc-rail),var(--rc-rail)) left bottom/100% var(--rc-r) no-repeat,linear-gradient(var(--rc-rail),var(--rc-rail)) left top/var(--rc-r) 100% no-repeat,linear-gradient(var(--rc-rail),var(--rc-rail)) right top/var(--rc-r) 100% no-repeat,linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,0) 45%,rgba(0,0,0,.16)) var(--rc-body);
  color:var(--rc-text)}
.packed-case.road-case{border:1px solid rgba(0,0,0,.6);border-radius:2px;box-shadow:none}
.packed-case.road-case .case-name{color:var(--rc-text)}
.packed-case.road-case.has-overhead-wheels::before{border:1px solid rgba(0,0,0,.6);border-radius:2px;box-shadow:none}
.packed-case.road-case.stacked{outline:0;box-shadow:0 3px 7px rgba(0,0,0,.8)}
.packed-case.road-case .actual-level-badge{background:rgba(8,11,14,.82);color:#fff;left:5px;top:5px}
.road-case .overhead-wheel-markers i{background:#2457c5;border-color:#dfe3e7;box-shadow:0 0 0 1px #0b0b0c}
.dock-list .packed-case.dock-case.road-case{background:var(--rc-bg)}
/* V1.94: selection ring that shows on ANY case color (a yellow case can't hide a yellow glow). */
.packed-case.road-case.selected,.dock-list .packed-case.dock-case.road-case.selected,.dock-list .packed-case.dock-case.road-case.selected:hover{outline:3px solid #fff!important;outline-offset:2px!important;box-shadow:0 0 0 2px #000,0 0 16px 5px rgba(217,255,71,.7)!important}
.packed-case.road-case.click-picked{outline:3px solid #fff!important;outline-offset:2px!important;box-shadow:0 0 0 2px #000,0 0 18px 6px rgba(217,255,71,.75)!important}
.dock-list .packed-case.dock-case.road-case:hover{outline:2px solid #fff;outline-offset:1px}
/* Side / end / underside views and print: blue casters, silver hubs. */
.stack-2d-case.rc-svg-body{stroke:rgba(0,0,0,.7);stroke-width:1}
.stack-wheel{fill:#2457c5;stroke:#dfe3e7;stroke-width:1.5}
.stack-wheel-hub{fill:#dfe3e7;stroke:#0b0b0c;stroke-width:1}
/* Case Color / Rail Color pickers */
.case-sheet th.color-cell,.case-sheet td.color-cell{width:118px;min-width:118px}
.color-pick{display:flex;align-items:center;gap:6px}
.color-pick select{flex:1 1 auto;min-width:0}
.color-dot{flex:0 0 auto;width:14px;height:14px;border-radius:3px;border:2px solid var(--dot-rail,#d5dade);background:var(--dot-body,#17181b);box-shadow:0 0 0 1px rgba(0,0,0,.6)}
.import-color-pickers{margin-top:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.import-color-pickers label{display:grid;gap:6px;font-weight:900;letter-spacing:.08em;font-size:13px}
.import-color-pickers select{width:100%}
.import-color-preview{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:var(--muted)}
.import-color-preview .packed-case{position:relative;width:96px;height:46px;font-size:11px}
/* V1.95: overhead case number always fully visible - along the longest side, shrunk to fit */
.packed-case .case-name{max-width:none;text-overflow:clip;letter-spacing:0}
.packed-case .case-name.case-name-vert{writing-mode:vertical-rl;transform:rotate(180deg);max-height:none}
/* V1.97: saved projects dialog */
.projects-dialog{width:min(760px,calc(100vw - 24px))}
.projects-help,.projects-note{color:var(--muted);font-size:14px;line-height:1.45;margin:6px 0 12px}
.projects-note{font-size:12.5px;margin-top:12px}
.projects-actions{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.projects-list{display:flex;flex-direction:column;gap:8px;max-height:min(52vh,460px);overflow:auto}
.projects-row{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel2)}
.projects-row.current{border-color:#d9ff47;box-shadow:inset 3px 0 0 #d9ff47}
.projects-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.projects-main b{font-size:16px;overflow-wrap:anywhere}
.projects-main small{color:var(--muted);font-size:12.5px}
.projects-badge{align-self:flex-start;font-size:10.5px;font-weight:900;letter-spacing:.08em;background:#d9ff47;color:#111;border-radius:4px;padding:1px 6px}
.projects-row-btns{display:flex;flex-wrap:wrap;gap:6px}
.projects-row-btns .danger-ghost{border-color:#7f1d1d;color:#ffb4b4;background:transparent}
.projects-empty{color:var(--muted)}
@media(max-width:600px){.projects-row{flex-direction:column;align-items:stretch}.projects-actions .button{flex:1 1 auto}}
/* V1.98: case photos */
.case-sheet th.photo-cell,.case-sheet td.photo-cell{width:74px;min-width:74px;text-align:center}
.sheet-photo-thumb{display:block;width:60px;height:42px;padding:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:#fff;cursor:zoom-in;margin:0 auto}
.sheet-photo-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.sheet-photo-add{width:60px;height:34px;border:1px dashed #4a4f57;border-radius:5px;background:transparent;color:var(--muted);font-size:10.5px;font-weight:900;letter-spacing:.04em;cursor:pointer}
.sheet-photo-add:hover:not(:disabled){border-color:#d9ff47;color:#d9ff47}
.sheet-photo-add:disabled{opacity:.35;cursor:not-allowed}
.case-photo-block{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.photo-thumb{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;cursor:zoom-in;display:block}
.photo-thumb img{display:block;width:100%;height:100%;object-fit:contain}
.photo-thumb-editor{width:180px;height:126px}
.photo-thumb-phone{width:150px;height:105px}
.photo-empty{display:flex;align-items:center;justify-content:center;border:1px dashed #4a4f57;border-radius:8px;color:var(--muted);font-size:13px}
.photo-btns{display:flex;flex-direction:column;gap:6px}
.photo-view-dialog{width:min(900px,calc(100vw - 24px))}
.photo-view-img{display:block;max-width:100%;max-height:65vh;margin:8px auto 4px;border-radius:8px;object-fit:contain}
/* V2.00: Feedback button + beta popup */
.feedback-btn{background:#d9ff47;color:#111;border:1px solid #d9ff47;font-weight:900;letter-spacing:.04em}
.feedback-btn:hover{filter:brightness(1.06)}
.feedback-dialog{width:min(620px,calc(100vw - 24px))}
.fb-intro{color:#cbd5e1;font-size:15px;line-height:1.5;margin:4px 0 14px}
.fb-intro b{color:#fff}
.fb-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fb-topics{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fb-topic input{position:absolute;opacity:0;pointer-events:none}
.fb-topic span{display:inline-block;padding:7px 12px;border:1px solid var(--line);border-radius:999px;font-weight:800;font-size:13px;cursor:pointer;color:var(--muted)}
.fb-topic input:checked+span{background:#d9ff47;color:#111;border-color:#d9ff47}
.fb-topic input:focus-visible+span{outline:2px solid #fff;outline-offset:2px}
.fb-field{display:grid;gap:6px;margin-bottom:10px}
.fb-field>span{font-weight:900;letter-spacing:.08em;font-size:12.5px;text-transform:uppercase;color:var(--muted)}
.fb-field>span small{text-transform:none;letter-spacing:0;font-weight:600}
.fb-field>span i{color:#e0313d;font-style:normal}
.fb-field textarea,.fb-field input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;background:#0e0f12;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px}
.fb-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fb-status{min-height:1.2em;margin:4px 0;font-size:14px;color:var(--muted)}
.fb-status.bad{color:#ffaaaa}
.fb-thanks{text-align:center;padding:10px 0}
.fb-big{font-size:46px}
@media(max-width:600px){.fb-two{grid-template-columns:1fr}.site-header .feedback-btn{font-size:12px;padding:6px 8px}}
#feedbackForm{margin:0;padding:0;border:0;background:transparent;display:block}
.feedback-dialog .row-rules-inner{max-height:calc(100dvh - 40px);overflow:auto}
html.pp-open,html.pp-open body{overflow:hidden}
/* V2.06: project links / live sharing */
.cloud-pill{background:#12301f;color:#7cf0a8;border:1px solid #2b6b45;font-weight:900;letter-spacing:.04em}
.cloud-pill.offline{background:#222;color:#bbb;border-color:#444}
.share-dialog,.name-dialog{width:min(620px,calc(100vw - 24px))}
.cloud-help{color:#cbd5e1;font-size:14.5px;line-height:1.5;margin:8px 0}
.cloud-help.small{font-size:12.5px;color:var(--muted)}
.cloud-warn{background:#2a2110;border:1px solid #6b5317;color:#ffe2a0;border-radius:10px;padding:10px 12px;font-size:14px;line-height:1.45;margin:6px 0 12px}
.cloud-label{display:block;font-weight:900;letter-spacing:.08em;font-size:12.5px;color:var(--muted);margin:4px 0 6px;text-transform:uppercase}
.cloud-linkrow{display:flex;gap:8px}
.cloud-input{flex:1 1 auto;min-width:0;font:inherit;font-size:15px;background:#0e0f12;color:var(--text);border:1px solid var(--line);border-radius:8px;padding:10px;width:100%;box-sizing:border-box}
.cloud-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.cloud-actions a.button{text-decoration:none}
.linkish{background:none;border:0;padding:0;color:#d9ff47;text-decoration:underline;cursor:pointer;font:inherit}
.hs-block{border:1px solid var(--line);border-radius:10px;padding:10px 12px;margin:8px 0;background:var(--panel2)}
.hs-block.hs-mine{border-color:#d9ff47}
.hs-block ol{margin:6px 0 0 18px;padding:0;line-height:1.6;font-size:14px}
.hs-block p{margin:6px 0;font-size:14px}
.hs-drag{color:#d9ff47}
.projects-warn{display:block;color:#ffcf6b;font-size:12.5px;font-weight:800}
.projects-more{flex-basis:100%;display:flex;flex-wrap:wrap;gap:6px;padding-top:4px}
.projects-more[hidden]{display:none}
@media(max-width:600px){.cloud-linkrow{flex-direction:column}}
.projects-more .danger-ghost{border-color:#7f1d1d;color:#ffb4b4;background:transparent}
/* V2.08 (corrected per direct rule: casters are always 4" and INCLUDED in the case's height): a
   tipped wheeled case shows its case BODY = footprint minus 4" on the wheel end, and the blue wheels
   in that 4" strip outside the body. The wheel end is always an end of the case's own height axis
   (see overheadWheelEdge), so the case's other two sides always show at full size. */
.road-case .overhead-wheel-markers::after{display:none!important}
.road-case .overhead-wheel-markers i{background:#2457c5!important;border:1.5px solid #dfe3e7!important;box-shadow:0 0 0 1px #0b0b0c!important;border-radius:50%!important}
.road-case.wheel-edge-left .overhead-wheel-markers i,.road-case.wheel-edge-right .overhead-wheel-markers i{width:min(9px,var(--wheel-zone-x))!important;height:min(9px,var(--wheel-zone-x))!important}
.road-case.wheel-edge-top .overhead-wheel-markers i,.road-case.wheel-edge-bottom .overhead-wheel-markers i{width:min(9px,var(--wheel-zone-y))!important;height:min(9px,var(--wheel-zone-y))!important}
.road-case.wheel-edge-left .overhead-wheel-markers i:nth-child(1),.road-case.wheel-edge-right .overhead-wheel-markers i:nth-child(1){top:14%!important;bottom:auto!important}
.road-case.wheel-edge-left .overhead-wheel-markers i:nth-child(2),.road-case.wheel-edge-right .overhead-wheel-markers i:nth-child(2){top:auto!important;bottom:14%!important}
.road-case.wheel-edge-top .overhead-wheel-markers i:nth-child(1),.road-case.wheel-edge-bottom .overhead-wheel-markers i:nth-child(1){left:14%!important;right:auto!important}
.road-case.wheel-edge-top .overhead-wheel-markers i:nth-child(2),.road-case.wheel-edge-bottom .overhead-wheel-markers i:nth-child(2){left:auto!important;right:14%!important}