/* Control (/rosie #control): screens captured from the v5 teach pendant app (1280 × 800, the Steam Deck's own
   resolution) and the offline programming app, each in its own light and dark theme. */

/* The pendant on a Steam Deck: Valve's press render (press_oled_front_english.png, 2500 × 980) cropped to
   x 200–2300, y 172–918, so 2100 × 746. Its display is the 982 × 614 px rect at (759, 235) in the render;
   the percentages below are that rect in the crop. The render carries its own soft shadow, which the side
   mask fades out before the crop edge (the device body spans 6.4–94.1% of the width). */
.deck-figure { display: grid; gap: .9rem; justify-items: center; margin: 0 0 2.5rem; }
.deck { position: relative; width: min(100%, 1180px); aspect-ratio: 2100 / 746; }
.deck-body { position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5.5%, #000 94.5%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5.5%, #000 94.5%, transparent); }
.deck-screen { position: absolute; left: 26.619%; top: 8.445%; width: 46.762%; height: 82.306%; overflow: hidden; background: #000; }
.deck-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.deck-figure figcaption { max-width: 46rem; text-align: center; font-size: .88rem; color: var(--ink-2); }
.deck-figure figcaption .lbl { margin-right: .5rem; }

.pendant-ui { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem clamp(1rem, 2vw, 2rem); margin-bottom: 3rem; }
.pendant-shot { display: grid; gap: .8rem; align-content: start; margin: 0; min-width: 0; }
.pendant-screen { position: relative; padding: clamp(6px, .8vw, 12px); background: #0b0d0f; border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }
.pendant-screen img { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; border-radius: 2px; }
.pendant-shot figcaption { font-size: .88rem; color: var(--ink-2); }
.pendant-shot figcaption .lbl { margin-right: .5rem; }

/* Offline programming, linked to its own page. */
.olp-teaser { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; margin-bottom: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.olp-teaser-copy { display: grid; gap: 1rem; align-content: start; }
.olp-teaser-copy h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.15; }
.olp-teaser-copy p { color: var(--ink-2); }
.olp-shot .pendant-screen { padding: clamp(4px, .5vw, 8px); border-radius: 8px; }
.olp-shot .pendant-screen img { aspect-ratio: 1600 / 1000; }

/* the screenshots' own light and dark themes, following the site theme; the hidden one is never fetched (lazy + display: none) */
.pendant-dark { display: none !important; }
:root[data-theme="dark"] .pendant-light { display: none !important; }
:root[data-theme="dark"] .pendant-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pendant-light { display: none !important; }
  :root:not([data-theme="light"]) .pendant-dark { display: block !important; }
}

@media (max-width: 900px) { .olp-teaser { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 760px) { .pendant-ui { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; } }