/* tablet-shots.v2.css -- the #interface tablet (2026-09-27, patches/landing_static).
 * Served max-age=604800: never edit in place, ship a new name.
 *
 * The screen shows screenshots of the real dashboard: Columns, Grid and
 * Stream, each light and dark, the members' purchases in the feed. Two
 * controls in the picture are live, drawn as transparent hotspots over the
 * appearance button (rail) and the layout switch: a press swaps the picture
 * with the dashboard's own cross-fade, the old picture fading out over the
 * new one in .32s ease, the timing of ::view-transition-old(root) in
 * static/jp/theme.css. Nothing else moves.
 * v2: a browser bar above the screen (window lights, the agor.as address),
 * drawn by the bundle (.ss-bar), following the picture's scheme; not a control.
 * Needs the sectionsNN.shots bundle (ScraperShot draws the layers). */
#interface .ss-screen { position: relative; }
#interface .ss-screen > picture.ss-prev {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  animation: ss-shot-fade .32s ease both;
}
#interface .ss-screen > picture.ss-prev img { width: 100%; height: 100%; }
@keyframes ss-shot-fade { from { opacity: 1; } to { opacity: 0; } }

#interface .ss-hot { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
#interface .ss-hot-btn {
  position: absolute; box-sizing: border-box; margin: 0; padding: 0; border: 0;
  background: transparent; border-radius: 10px; cursor: pointer; pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .18s ease, box-shadow .18s ease;
}
#interface .ss-hot-thm { border-radius: 50%; }
#interface .ss-hot-btn:hover, #interface .ss-hot-btn:focus-visible {
  background: rgba(18, 18, 22, .06); box-shadow: 0 0 0 1px rgba(18, 18, 22, .06); outline: none;
}
#interface .ss-screen.is-dark .ss-hot-btn:hover, #interface .ss-screen.is-dark .ss-hot-btn:focus-visible {
  background: rgba(255, 255, 255, .08); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08);
}
#interface .ss-hot-btn.is-on { cursor: default; }
#interface .ss-hot-btn.is-on:hover { background: transparent; box-shadow: none; }

/* ---- the browser bar: window lights, the address, nothing to press ---- */
#interface .ss-bar {
  display: flex; align-items: center; gap: 12px;
  height: 40px; padding: 0 14px; box-sizing: border-box;
  background: #F3F3F5; border-bottom: 1px solid rgba(20, 20, 24, .08);
  border-radius: 13px 13px 0 0;
  color: #1D1D1F; user-select: none; -webkit-user-select: none;
  transition: background-color .32s ease, border-color .32s ease, color .32s ease;
}
#interface .ss-bar.is-dark { background: #1A1A1C; border-bottom-color: rgba(255, 255, 255, .08); color: #E9E9EB; }
#interface .ss-bar-dots { display: flex; gap: 7px; flex: none; width: 47px; }
#interface .ss-bar-dots i {
  width: 11px; height: 11px; border-radius: 50%; display: block;
  box-shadow: inset 0 0 0 .5px rgba(0, 0, 0, .12);
}
#interface .ss-bar-dots i:nth-child(1) { background: #FF5F57; }
#interface .ss-bar-dots i:nth-child(2) { background: #FEBC2E; }
#interface .ss-bar-dots i:nth-child(3) { background: #28C840; }
#interface .ss-bar-url {
  flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 26px; margin: 0 auto; max-width: min(420px, 60%);
  border-radius: 8px; background: #FFFFFF; border: 1px solid rgba(20, 20, 24, .07);
  font-size: 12.5px; font-weight: 500; letter-spacing: .01em; line-height: 1;
  transition: background-color .32s ease, border-color .32s ease;
}
#interface .ss-bar.is-dark .ss-bar-url { background: #2A2A2D; border-color: rgba(255, 255, 255, .07); }
#interface .ss-bar-url svg { width: 11px; height: 11px; opacity: .7; flex: none; }
#interface .ss-bar-spacer { flex: none; width: 47px; }
#interface .ss-bar + .ss-screen { border-radius: 0 0 13px 13px; }

/* the narrow scroll window (scraper-scroll.v3): the picture is 1100px wide
   inside a sideways scroller, so the layers take the picture's box */
@media (max-width: 1099px) {
  #interface .ss-screen > picture.ss-prev, #interface .ss-hot { width: 1100px; height: auto; aspect-ratio: 1710 / 920; }
}
/* phones: the phone card (phone-shots) draws its own screen; nothing of this applies */
@media (max-width: 768px) {
  #interface .ss-hot, #interface .ss-bar { display: none; }
  #interface .ss-screen > picture.ss-prev { width: 100%; height: 100%; aspect-ratio: auto; }
}
@media (prefers-reduced-motion: reduce) {
  #interface .ss-screen > picture.ss-prev { display: none; }
  #interface .ss-bar, #interface .ss-bar-url { transition: none; }
}

#interface .ss-note {
  max-width: 44rem; margin: .9rem auto 0; text-align: center;
  font-size: 11px; line-height: 1.6; color: hsl(var(--fg-subtle));
}
@media (max-width: 768px) { #interface .ss-note { display: none; } }