/* The "Show me how…" page (web/show-me-how.php, card #1082). Under 700px wide the phone's version and picture, the
   computer's from 700px, as the About page's video. */
.hw-search { display: block; width: 100%; box-sizing: border-box; min-height: 44px; padding: .55rem .75rem; font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--field-edge); border-radius: var(--radius); }
.hw-none { margin: 1rem 0 0; color: var(--muted); }
.hw-section h2, .hw-results { margin-top: 1.4rem; }
.hw-item { border-top: 1px solid var(--border); scroll-margin-top: 64px; }
.hw-item > summary { display: flex; align-items: center; gap: .85rem; padding: .6rem 0; min-height: 44px; cursor: pointer; list-style: none; }
.hw-item > summary::-webkit-details-marker { display: none; }
.hw-item img { display: block; flex: none; width: 54px; height: 96px; object-fit: cover; background: var(--border); border-radius: 6px; }
.hw-title { font-weight: 600; }
.hw-v { display: none; width: auto; max-width: 100%; height: auto; max-height: calc(100vh - 120px); margin: .2rem auto 1rem; background: var(--border); border-radius: var(--radius); }
@media (max-width: 699.98px) { .hw-v-phone { display: block; aspect-ratio: 9 / 16; } }
@media (min-width: 700px) {
  .hw-v-computer { display: block; aspect-ratio: 16 / 9; }
  .hw-item img { width: 128px; height: 72px; }
}
.hw-more { margin: 1.4rem 0 0; color: var(--muted); }