.calculations-page { max-width: 73rem; }
.calc-jump { display:flex; gap:.625rem; flex-wrap:wrap; margin:0 0 2rem; }
.calc-jump a { padding:.75rem 1rem; border:1px solid #ffffff55; border-radius:.625rem; color:white; font-size:.8125rem; text-decoration:none; background:#12283ac9; }
.calc-jump a:hover { border-color:white; background:#ffffff17; }
.calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.calc-panel { padding:2rem; border:1px solid #ffffff45; border-radius:1rem; background:linear-gradient(135deg,#193244,#102033); box-shadow:0 .75rem 2rem #0002; margin-bottom:1.5rem; min-width:0; scroll-margin-top:2rem; }
.calc-panel .eyebrow { color:#fff; }
.calc-panel h2 { font-size:1.5rem; color:white; margin:.5rem 0 1rem; }
.calc-muted,.calc-source { font-size:.8125rem; line-height:1.65; color:#b4c3d1; }
.calc-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:1rem; margin:1.5rem 0; }
.calc-panel label { display:flex; flex-direction:column; gap:.625rem; font-size:.8125rem; color:#e8f0f8; min-width:0; }
.calc-panel input,.calc-panel select { width:100%; min-height:2.875rem; box-sizing:border-box; background:#091a2b; color:white; border:1px solid #ffffff60; border-radius:.625rem; padding:.75rem; font:inherit; }
.calc-panel input:focus { outline:2px solid white; outline-offset:2px; }
.calc-panel input[aria-invalid=true] { border-color:#ffb8a8; }
.calc-results { margin:1rem 0; }
.calc-results>div { display:flex; justify-content:space-between; gap:1rem; padding:.875rem 0; border-bottom:1px solid #ffffff18; }
.calc-results dt { font-size:.8125rem; color:#b9c8d4; }
.calc-results dd { margin:0; text-align:right; font-size:1rem; font-weight:700; color:white; white-space:nowrap; }
.calc-error { color:#ffd2c8; font-size:.8125rem; }
.calc-section-head { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.calc-section-head label { width:18rem; max-width:100%; }
.calc-table-scroll { overflow:auto; max-width:100%; border:1px solid #ffffff25; border-radius:.625rem; margin-top:1.25rem; }
.calc-table-scroll:focus-visible { outline:2px solid white; outline-offset:3px; }
.calc-table-scroll table { width:100%; border-collapse:collapse; font-size:.8125rem; white-space:nowrap; color:white; }
.calc-table-scroll caption { text-align:left; padding:1rem; background:#081929; font-weight:600; }
.calc-table-scroll th,.calc-table-scroll td { padding:.75rem 1rem; text-align:center; border-bottom:1px solid #ffffff14; border-right:1px solid #ffffff0d; }
.calc-table-scroll thead th { background:#0b1c2e; }
.calc-table-scroll th small { display:block; font-size:.6875rem; margin-top:.375rem; font-weight:400; color:#b9c8d4; }
.calc-table-scroll tbody th { position:sticky; left:0; background:#12283a; z-index:1; }
.calc-table-scroll tbody tr:nth-child(even) { background:#ffffff04; }
.calc-table-scroll td span { color:#b9c8d4; }
.calc-table-scroll button { cursor:pointer; border:0; background:transparent; font:inherit; color:white; padding:.375rem; border-radius:.25rem; }
.calc-table-scroll button:hover,.calc-table-scroll button:focus-visible { background:#ffffff18; outline:1px solid white; }
.calc-truck-layout { display:grid; grid-template-columns:16rem 1fr; gap:2rem; align-items:center; }
#calc-packing svg { width:100%; max-height:16rem; }
#calc-packing svg rect { fill:#071828; stroke:#ffffff55; }
#calc-packing svg circle { fill:#ffffff06; stroke:#dfeaf2; stroke-width:1; }
#calc-packing p { text-align:center; }
.calc-source { margin:1rem 0 3rem; }
.calc-source a { color:white; text-underline-offset:.2rem; }
.calc-retry { background:transparent; color:white; border:1px solid white; border-radius:.375rem; padding:.625rem; cursor:pointer; }
@media(max-width:800px) { .calc-grid { grid-template-columns:1fr; gap:0; } .calc-section-head { flex-direction:column; align-items:stretch; } .calc-section-head label { width:100%; } }
@media(max-width:500px) { .calc-panel { padding:1.125rem; border-radius:.75rem; } .calc-panel h2 { font-size:1.375rem; } .calc-fields { grid-template-columns:1fr; } .calc-truck-layout { grid-template-columns:1fr; gap:0; } #calc-packing { max-width:15rem; margin:auto; } .calc-jump { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; } .calc-jump a { font-size:.6875rem; text-align:center; padding:.75rem .5rem; } .calc-results dd { font-size:.9375rem; } .nav-links a { font-size:.5625rem; letter-spacing:.025em; } }

#calc-content, #calc-status { width:100%; min-width:0; }
@media(max-width:380px) { .nav-links a { font-size:.525rem; padding-inline:.125rem; } }
/* The same quiet grain used by the rest of the site's controls and panels. */
.calculations-page .calc-panel {
  background-image:url('/assets/grain-surface.svg?v=2.3'),linear-gradient(135deg,#193244,#102033);
  background-size:6rem 6rem,100% 100%;
  background-repeat:repeat,no-repeat;
}
/* Keep compact controls and table values crisp, without grain behind the text. */
.calculations-page :is(.calc-jump a,.calc-retry,.calc-panel input,.calc-panel select,.pnd-select-trigger,.calc-table-scroll,.calc-table-scroll caption,.calc-table-scroll th,.calc-table-scroll button),
body:has(.calculations-page) :is(.pnd-select-menu,.pnd-select-option) {
  background-image:none !important;
}
.calculations-page .calc-table-scroll { background-color:#12283a; }
#calc-packing .calc-trailer { max-height:20rem; }
#calc-packing .truck-door { fill:url(#truck-frame); stroke:#b4c9d5; stroke-width:1.1; stroke-linejoin:round; }
#calc-packing .truck-door-panel { fill:#182d3c; stroke:#6e899b; stroke-width:.8; }
#calc-packing .truck-door-bar { fill:none; stroke:#adc2cf; stroke-width:1.5; }
#calc-packing .truck-door-hinge { fill:none; stroke:#d4e0e8; stroke-width:3; stroke-linecap:round; }
#calc-packing .truck-outer { fill:url(#truck-frame); stroke:#c5d7e0; stroke-width:1.2; }
#calc-packing .truck-cargo { fill:#071828; stroke:#7e99a9; stroke-width:1; }
#calc-packing .truck-pipe { fill:#ffffff06; stroke:#dfeaf2; stroke-width:1; }
#calc-packing .truck-rail { stroke:#b8cbd6; stroke-width:1.2; fill:none; }
#calc-packing .truck-mark { stroke:#e7eef2; stroke-width:3; }
#calc-packing .truck-wheel { fill:#06121c; stroke:#6b8292; stroke-width:1; }
#calc-packing .truck-chassis { fill:#203746; stroke:#8ca2af; }
#calc-packing .truck-bumper { fill:#526878; stroke:#bbccd6; }
#calc-packing .truck-light { fill:#bd6463; stroke:#e3a09a; stroke-width:.75; }
#calc-packing .truck-plate { fill:#c7d5de; stroke:none; }
#calc-packing .truck-ground { stroke:#819baa; stroke-opacity:.3; stroke-width:1; }
/* Custom, accessible controls for numeric fields. */
.calc-number-field { display:flex; flex-direction:column; gap:.625rem; min-width:0; }
.calc-number { position:relative; min-width:0; }
.calc-panel .calc-number input { padding-right:3.25rem; appearance:textfield; -moz-appearance:textfield; }
.calc-number input::-webkit-inner-spin-button,.calc-number input::-webkit-outer-spin-button { -webkit-appearance:none; margin:0; }
.calc-number-controls { position:absolute; right:1px; top:1px; bottom:1px; width:2.5rem; display:grid; grid-template-rows:1fr 1fr; border-left:1px solid #ffffff25; border-radius:0 .5625rem .5625rem 0; overflow:hidden; }
.calc-number-controls button { display:flex; align-items:center; justify-content:center; padding:0; border:0; background:#152a3b; color:#e8f0f8; cursor:pointer; }
.calc-number-controls button+button { border-top:1px solid #ffffff20; }
.calc-number-controls svg { width:.875rem; height:.625rem; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; }
.calc-number-controls button:hover:not(:disabled) { background:#253d50; color:white; }
.calc-number-controls button:active:not(:disabled) { background:#345065; }
.calc-number-controls button:focus-visible { outline:2px solid white; outline-offset:-3px; }
.calc-number-controls button:disabled { color:#718494; cursor:default; }