/* Desktop layout for the odorant and meter-set calculators: inputs in the left column, results pinned in the right
 * column (and stopping where the inputs end), one spacing scale for every card. Phones keep the single-column flow. */
.grid.cl-split{display:grid;grid-template-columns:1fr;gap:16px}
.cl-top{display:grid;grid-template-columns:1fr;gap:16px}
.cl-top>.panel,.cl-split>.panel{margin:0}
@media (min-width:1100px){
  .app.cl-wide{max-width:1240px;padding:24px 24px 56px}
  .app.cl-mid{max-width:1120px;padding:24px 24px 56px}
  body.cl-wide-page .cc-bar-in{max-width:1240px;padding-inline:24px}
  body.cl-mid-page .cc-bar-in{max-width:1120px;padding-inline:24px}
  .grid.cl-split{gap:20px}
  .cl-top{grid-template-columns:minmax(0,1fr) 380px;gap:20px 24px;align-items:start}
  .cl-top>.cl-in{grid-column:1}
  .cl-top>.cl-out{grid-column:2;grid-row:1 / span var(--cl-rows,3);position:sticky;top:92px;align-self:start;max-height:calc(100vh - 112px);overflow:auto}
  .cl-top .cl-out .cards{grid-template-columns:1fr 1fr}
  .cl-top .cl-out .card.big{grid-column:1 / -1}
  .cl-top .cl-out .card:not(.big) .v{font-size:1.3rem;line-height:1.2;overflow-wrap:anywhere}
  .tool-head{margin-bottom:20px}
  .app.cl-wide .disclaimer,.app.cl-mid .disclaimer{margin-bottom:20px}
}
/* One spacing scale for every card, all widths */
.cl-split .panel{padding:20px}
.cl-split .panel h2{margin:0 0 16px}
.cl-split .row{gap:14px;margin-bottom:14px;align-items:start}
.cl-split .row:last-child{margin-bottom:0}
.cl-split label{display:block;margin-bottom:6px}
@media (max-width:600px){.cl-split .panel{padding:16px}}