/* The listener site's computer version (mouse and keyboard: html[data-platform="desktop"]), on top
   of base.css: more room on big screens, the shortcut list (site-desktop.js), and the Watch page as a
   theatre with what is on beside the picture. */

/* Big screens: a wider page, so the Live page's columns and the Watch theatre breathe. */
@media (min-width: 1500px) { html[data-platform="desktop"] body.site .wrap { max-width: 1360px; } }
/* Narrow computer windows keep the top menu (no phone tab bar): it wraps under the name. */
@media (max-width: 760px) { html[data-platform="desktop"] body.site footer.site .foot-grid { grid-template-columns: minmax(0, 1fr); } }

/* A mouse needs less room than a finger: the footer's links closer together (still ≥ 24 px, WCAG 2.5.8). */
html[data-platform="desktop"] body.site footer.site nav a { min-height: 32px; }

/* Keyboard shortcuts (? on any listener page). */
.hr-keys { border: 1px solid var(--line); border-radius: 18px; background: var(--panel); color: var(--text); padding: 22px 24px; width: min(440px, calc(100vw - 32px)); box-shadow: 0 30px 80px -30px rgba(0,0,0,.6); }
.hr-keys::backdrop { background: rgba(10, 4, 6, .5); backdrop-filter: blur(2px); }
.hr-keys h2 { font-size: 1.4rem; margin-bottom: 12px; }
.hr-keys dl { margin: 0 0 16px; display: grid; gap: 2px; }
.hr-keys dl div { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.hr-keys dt, .hr-keys dd { margin: 0; }
.hr-keys kbd { font: 600 .82rem/1 var(--font-data); padding: 4px 7px; border-radius: 6px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--ink); white-space: nowrap; }
.hr-keys form { display: flex; justify-content: flex-end; }