/* Scoped to the tube-bank workbench. Existing visual controls own motion state. */
.bank-page .thermal-experiment { align-items:start; }
.bank-page [data-trilha=bancos] { display:flex; flex-direction:column; gap:0; min-width:0; }
.bank-page [data-trilha=bancos] > * { width:100%; min-width:0; }
.bank-page .obs-scene { padding:0; border-radius:12px; background:linear-gradient(160deg,#f7fbfd,#eef4f6); }
.bank-page .obs-scene svg { max-height:none; }
.bank-page .obs-reading { margin-top:18px; }
.bank-page .obs-title { font-size:23px; }
.bank-page .obs-response { min-height:0; }
.bank-page .bank-tubes circle { stroke:#829dab; stroke-width:1.1; }
.bank-page .bank-stream { stroke:#8ab8cc; stroke-width:1; opacity:.6; }
.bank-page .bank-particle { fill:#3b91bd; }
.bank-page .bank-labels text { font-size:12px; fill:#6b8390; }
.bank-page .bank-dimension { cursor:pointer; }
.bank-page .bank-cota { stroke:#7393a5; stroke-width:1.2; }
.bank-page .bank-dimension text { fill:#42687c; font-size:13px; }
.bank-page .bank-dimension[aria-pressed=true] .bank-cota { stroke:#1e73a2; stroke-width:2; }
.bank-page .bank-dimension[aria-pressed=true] text { fill:#195f85; font-weight:600; }
.bank-page .bank-dimension:focus-visible { outline:2px solid #287db1; outline-offset:6px; }
.bank-state { color:#39657e; font-size:12px; font-weight:600; margin:0 0 10px; }
[data-case-state=stale] .bank-state { color:#956129; }
.bank-editor { padding:14px 0; border-block:1px solid #d6e2e6; margin-block:14px; }
.bank-selectors { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:12px; }
.bank-page :is(.bank-selectors,.bank-pager) button { border:1px solid #c5d6df; background:#fff; color:#315c75; border-radius:7px; padding:9px 13px; min-height:44px; font:inherit; font-size:13px; cursor:pointer; transition:background-color 150ms ease,border-color 150ms ease; }
.bank-page .bank-selectors button[aria-pressed=true] { background:#e5f2fb; border-color:#7faec8; }
.bank-page :is(.bank-selectors,.bank-pager) button:focus-visible { outline:2px solid #287db1; outline-offset:3px; }
.bank-page :is(.bank-selectors,.bank-pager) button:disabled { opacity:.45; cursor:default; }
.bank-editor label { display:block; font-size:13px; margin-bottom:7px; }
.bank-editor input { border:1px solid #c5d6df; border-radius:7px; background:#fff; color:#253b47; width:100%; min-height:44px; padding:9px 12px; font-family:var(--font-mono,monospace); }
.bank-editor input[aria-invalid=true] { border-color:#ac633f; }
.bank-help,.bank-legend { color:#627c89; font-size:12px; line-height:1.6; margin:8px 0 0; }
.bank-pager { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:10px; }
.bank-pager span { font-size:12px; text-align:center; }
.bank-page .bank-field-active { border-color:#78a9c3; background:#f2f9fc; }
.bank-math { font-size:14px; line-height:1.7; margin-bottom:20px; }
.bank-math summary { cursor:pointer; min-height:44px; color:#315c75; font-weight:600; }
.bank-math table { width:100%; table-layout:fixed; border-collapse:collapse; font-size:13px; margin-block:14px; }
.bank-math :is(td,th) { padding:10px; border-bottom:1px solid #d6e2e6; text-align:left; vertical-align:top; overflow-wrap:anywhere; }
.bank-math caption { text-align:left; color:#627c89; }
.bank-page .eng-formula-body p { overflow-wrap:anywhere; }
.bank-calculation-values { padding:12px; background:#edf5f8; border-radius:8px; }
#bank-result[data-stale=true] .result-hero { opacity:.5; }
#bank-result[data-stale=true] .panel-sub::after { content:' · caso anterior'; color:#956129; }
@media(hover:hover) { .bank-page :is(.bank-selectors,.bank-pager) button:enabled:hover { background:#edf6fb; border-color:#7faec8; } }
@media(min-width:1100px) { .bank-page [data-trilha=bancos] { position:sticky; top:84px; } }
@media(max-width:500px) { .bank-page .bank-pager button { padding:8px; font-size:12px; } .bank-page .obs-title { font-size:21px; } }
@media(prefers-reduced-motion:reduce) { .bank-page :is(.bank-selectors,.bank-pager) button { transition:none; } }
/* Full workbench: introduction/controls beside a generous shared 2D/3D stage. */
.bank-page .thermal-experiment { display:grid; grid-template-columns:minmax(0,1fr); gap:24px; }
.bank-page .thermal-experiment > [data-trilha=bancos] { display:grid; position:static; grid-template-columns:minmax(230px,.7fr) minmax(0,1.65fr); align-items:start; gap:8px 28px; }
.bank-page [data-trilha=bancos] > .obs-reading { grid-column:1; grid-row:1 / span 5; margin:0; padding-top:4px; }
.bank-page [data-trilha=bancos] > .obs-scene { grid-column:2; grid-row:2; }
.bank-page .bank-toolbar { grid-column:2; grid-row:1; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; margin-bottom:4px; }
.bank-tool-group { display:flex; flex-wrap:wrap; gap:4px; }
.bank-page :is(.bank-toolbar,.bank-camera,.bank-live-controls,.bank-catalog) button { min-height:44px; padding:9px 12px; border:1px solid #c8dbe6; border-radius:7px; background:#fff; color:#315f7b; font:inherit; font-size:12px; cursor:pointer; transition:background-color 150ms ease,border-color 150ms ease; }
.bank-page :is(.bank-toolbar,.bank-catalog) button[aria-pressed=true] { background:#e7f3fa; border-color:#7cabca; color:#195b85; }
.bank-page :is(.bank-toolbar,.bank-camera,.bank-live-controls,.bank-catalog) button:focus-visible,.bank-inspector summary:focus-visible,.bank-3d:focus-visible { outline:2px solid #287db1; outline-offset:3px; }
.bank-page .bank-camera { grid-column:2; grid-row:3; display:flex; flex-wrap:wrap; gap:6px; margin-top:4px; }
.bank-page .bank-camera button { min-width:44px; }
.bank-page .bank-camera-help { grid-column:2; grid-row:4; }
.bank-page .bank-pager { grid-column:2; grid-row:3; margin:4px 0 0; }
.bank-page [data-trilha=bancos] > .bank-legend:not(.bank-camera-help) { grid-column:2; grid-row:5; margin:0; }
.bank-page :is(.bank-camera,.bank-pager,.bank-camera-help)[hidden] { display:none; }
.bank-page .bank-3d { touch-action:none; cursor:grab; }
.bank-page .bank-3d:active { cursor:grabbing; }
.bank-page .bank-3d-title { font-size:14px; fill:#365c75; }
.bank-page .bank-3d-caption { font-size:13px; fill:#567587; }
.bank-page .bank-3d-particle,.bank-page .bank-particle { fill:var(--bank-fluid-color,#338fb9); }
.bank-page .bank-inspector summary { min-height:44px; padding:10px 0; color:#315f7b; cursor:pointer; font-size:13px; }
.bank-page .bank-inspector .bank-editor { padding-top:8px; margin-top:0; }
.bank-page .bank-editor input[type=range] { padding:0; margin-top:8px; min-height:44px; border:0; accent-color:#287db1; }
.bank-page .bank-live-controls { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:16px; padding-top:12px; border-top:1px solid #d8e3e9; }
.bank-live-controls label { display:flex; align-items:center; gap:8px; font-size:12px; margin:0; min-height:44px; }
.bank-live-controls input { width:18px; height:18px; accent-color:#287db1; }
.bank-page .bank-catalog { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:24px 0; }
.bank-page .bank-catalog button { text-align:left; min-width:0; padding:14px; }
.bank-catalog span { display:block; font-size:14px; font-weight:600; margin-bottom:7px; }
.bank-catalog small { display:block; font-size:11px; color:#6b8290; line-height:1.6; }
.bank-page form[action="/calculadora_arranjos_tubos"] { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.bank-page form .vx-fieldset { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-content:start; gap:12px 16px; min-width:0; margin-bottom:0; }
.bank-page form .vx-fieldset legend { font-size:13px; }
.bank-page form .vx-field { min-width:0; margin-bottom:0; }
.bank-page form > div:last-child { grid-column:1/-1; margin-top:0!important; }
.bank-page form .vx-field-label { min-height:38px; align-items:start; gap:4px; }
.bank-page .bank-explanation { margin-bottom:20px; }
.bank-explanation > summary { min-height:44px; cursor:pointer; color:#315f7b; }
.bank-comparison { padding:24px; border:1px solid #d5e3eb; border-radius:10px; margin-bottom:24px; background:#fff; }
.bank-comparison h3 { font-size:19px; margin:0 0 10px; }
.bank-comparison p { font-size:13px; line-height:1.7; color:#526c7d; }
.bank-comparison button { min-height:44px; padding:10px 16px; border:1px solid #87b0ca; border-radius:7px; background:#edf6fb; color:#195b85; font:inherit; font-size:13px; cursor:pointer; }
.bank-comparison button:focus-visible { outline:2px solid #287db1; outline-offset:3px; }
.bank-comparison-output { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:16px; }
.bank-comparison-output article { padding:16px; border:1px solid #d5e3eb; border-radius:8px; background:#f7fbfd; }
.bank-comparison-output h4 { font-size:15px; margin:0 0 12px; }
.bank-comparison-output .bank-comparison-value { font-size:20px; color:#254f69; }
.bank-comparison-bar { height:8px; background:#e1edf4; border-radius:4px; }
.bank-comparison-bar::before { content:''; display:block; height:100%; width:var(--bank-bar); background:#418cb7; border-radius:4px; }
@media(max-width:1100px) { .bank-page .thermal-experiment > [data-trilha=bancos] { grid-template-columns:minmax(200px,.7fr) minmax(0,1.3fr); gap:10px 20px; } .bank-page form[action="/calculadora_arranjos_tubos"] { grid-template-columns:1fr; } .bank-page .bank-catalog { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:700px) { .bank-page .thermal-experiment > [data-trilha=bancos] { display:flex; flex-direction:column; gap:10px; } .bank-page [data-trilha=bancos]>.obs-reading { order:6; } .bank-page .bank-toolbar { order:0; } .bank-page .obs-scene { order:1; } .bank-page .bank-camera,.bank-page .bank-pager { order:2; } .bank-page .bank-camera-help { order:3; } .bank-page [data-trilha=bancos]>.bank-legend:not(.bank-camera-help) { order:4; } .bank-page .bank-catalog { gap:7px; } .bank-page .bank-catalog button { padding:10px; } }
@media(max-width:440px) { .bank-page form .vx-fieldset { grid-template-columns:1fr; } .bank-page form .vx-field-label { min-height:0; } .bank-page .bank-catalog { grid-template-columns:1fr; } }
@media(hover:hover) { .bank-page :is(.bank-toolbar,.bank-camera,.bank-live-controls,.bank-catalog) button:enabled:hover { background:#eef7fc; border-color:#89b6d0; } }
@media(prefers-reduced-motion:reduce) { .bank-page :is(.bank-toolbar,.bank-camera,.bank-live-controls,.bank-catalog) button { transition:none; } }