/* workbench: a slim bar, then inputs and the answer side by side (the answer first on a phone, which
   base.css already does). For calculators with several inputs. Link after identity.css. */
html[data-layout="workbench"] .site-header .container { min-height: 3rem; }
html[data-layout="workbench"] .hero { padding-block: var(--s5) var(--s6); }
html[data-layout="workbench"] .hero .container { grid-template-columns: minmax(0, 1fr); gap: var(--s4); align-items: start; }
html[data-layout="workbench"] .hero-title { font-size: var(--step-3); max-width: 20ch; }
html[data-layout="workbench"] .promise { max-width: 44ch; margin-bottom: var(--s2); }
html[data-layout="workbench"] .flow { align-items: stretch; }
html[data-layout="workbench"] .section-alt { background: var(--surface-2); }