/* /pan-size (task 823.42) and the recipe page's "Different pan?" line. Builds on conversions.css. */
.ps-page h1 { margin-bottom: .25rem; }
.ps-for { margin: 1rem 0; }
.ps-form { margin: 1rem 0; display: grid; gap: .75rem; }
.ps-fields { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: .75rem 1rem; align-items: end; }
.ps-fields select { width: 100%; min-height: 44px; }
.ps-form .btn { justify-self: start; }
.ps-result h2, .ps-recipe h2 { font-size: 1.25rem; margin-top: 0; }
.ps-result h3 { font-size: 1.05rem; margin: 1.1rem 0 .35rem; }
.ps-rows { width: 100%; }
.ps-rows thead th { text-align: left; font-weight: 600; font-size: .9rem; }
.ps-notes { padding-left: 1.2rem; margin: .25rem 0; }
.ps-notes li { margin: .3rem 0; }
.ps-done div { margin: .5rem 0; }
.ps-done dt { font-weight: 700; }
.ps-done dd { margin: .15rem 0 0; }
.ps-recipe { margin-top: 1rem; }
.ps-ings { list-style: none; padding: 0; }
.ps-ings li { padding: .3rem 0; border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08)); }
.ps-ings .qty { font-weight: 700; }
.ps-common td a { font-weight: 600; }
@media (min-width: 720px) {
  .ps-fields { grid-template-columns: minmax(0, 1fr) 6rem minmax(0, 1fr) 6rem; }
}
@media (max-width: 480px) {
  .ps-rows, .ps-rows tbody, .ps-rows tr, .ps-rows th, .ps-rows td { display: block; }
  .ps-rows thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .ps-rows tr { padding: .5rem 0; border-bottom: 1px solid var(--line, rgba(0, 0, 0, .08)); }
  .ps-rows td { padding: .1rem 0; }
  .ps-rows td::before { content: attr(data-label) ": "; color: var(--muted); }
}