/* SITE SHOWCASE — the screenshot widget used inside blog posts.
 *
 * Lives in public/ and is linked from the post's own HTML, so the widget
 * travels with the post: the app bundle never needs a rebuild to restyle
 * it, and the staging preview renders it identically. Post HTML is injected
 * with innerHTML, so nothing here may depend on script: the tabs are radio
 * inputs, the scrolling is transform transitions, and the "what to notice"
 * jump-to uses :has().
 *
 * Markup contract (see the post for a full example):
 *   .ss  > input.ss-tab#ss-N (radio, name shared) + label[for]   one per site
 *        > .ss-panel.ss-pN                                         one per site
 *            .ss-stage > .ss-frame > .ss-bar + .ss-win > img      desktop
 *                      > .ss-phone > .ss-win > img                phone
 *            ol.ss-notice > li.ss-at-NN[tabindex=0]               NN = % down the page
 */
.ss { --ss-navy:#1B5083; --ss-sky:#56AEE3; --ss-gold:#FDC010; --ss-ink:#111827; --ss-soft:#4b5563;
  --ss-rule:#e5e7eb; --ss-ground:#f3f6f9; --ss-win:clamp(240px, 52vw, 400px);
  margin: 2.25rem 0; font-family: inherit; }
.ss .ss-tab { position: absolute; opacity: 0; pointer-events: none; }
.ss .ss-tabs { display: flex; gap: .4rem; flex-wrap: wrap; margin: 0 0 .9rem; }
.ss label { cursor: pointer; border: 1.5px solid var(--ss-rule); background: #fff; color: var(--ss-ink);
  border-radius: 999px; padding: .4rem 1rem; font-weight: 600; font-size: .92rem; line-height: 1.2;
  transition: background .15s, border-color .15s, color .15s; }
.ss label:hover { border-color: var(--ss-sky); }
.ss-panel { display: none; }

/* One rule per slot; the post uses up to four sites. */
#ss-1:checked ~ .ss-tabs label[for="ss-1"], #ss-2:checked ~ .ss-tabs label[for="ss-2"],
#ss-3:checked ~ .ss-tabs label[for="ss-3"], #ss-4:checked ~ .ss-tabs label[for="ss-4"] {
  background: var(--ss-navy); border-color: var(--ss-navy); color: #fff; }
#ss-1:checked ~ .ss-p1, #ss-2:checked ~ .ss-p2, #ss-3:checked ~ .ss-p3, #ss-4:checked ~ .ss-p4 { display: block; }
#ss-1:focus-visible ~ .ss-tabs label[for="ss-1"], #ss-2:focus-visible ~ .ss-tabs label[for="ss-2"],
#ss-3:focus-visible ~ .ss-tabs label[for="ss-3"], #ss-4:focus-visible ~ .ss-tabs label[for="ss-4"] {
  outline: 2px solid var(--ss-sky); outline-offset: 2px; }

/* The stage: a browser window with a phone overlapping its corner. */
.ss-stage { position: relative; background: var(--ss-ground); border-radius: 16px;
  padding: 18px 18px 26px; margin: 0; }
.ss-frame { background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.08), 0 10px 30px rgba(15,23,42,.10); margin-right: clamp(40px, 14%, 110px); }
.ss-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; background: #eef2f6;
  border-bottom: 1px solid var(--ss-rule); }
.ss-bar i { width: 9px; height: 9px; border-radius: 50%; background: #cbd5e1; }
.ss-bar i:first-child { background: var(--ss-gold); }
.ss-bar span { margin-left: 8px; flex: 1; min-width: 0; background: #fff; border-radius: 6px; padding: 2px 10px;
  font-size: .74rem; color: var(--ss-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-win { position: relative; height: var(--ss-win); overflow: hidden; background: #fff; }
.ss-win img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0;
  transform: translateY(0); transition: transform 1.1s cubic-bezier(.4,0,.2,1); will-change: transform; }

.ss-phone { position: absolute; right: 14px; bottom: 12px; width: clamp(92px, 22%, 150px);
  border: 5px solid #0f172a; border-radius: 18px; overflow: hidden; background: #0f172a;
  box-shadow: 0 12px 28px rgba(15,23,42,.28); }
.ss-phone .ss-win { height: calc(var(--ss-win) * .78); border-radius: 12px; }

/* Hover (or tap: the windows are focusable) scrolls the whole page. */
.ss-frame:hover .ss-win img, .ss-frame:focus-within .ss-win img,
.ss-phone:hover .ss-win img, .ss-phone:focus-within .ss-win img {
  transform: translateY(calc(-100% + var(--ss-win))); transition-duration: var(--ss-dur, 9s); transition-timing-function: linear; }
.ss-phone:hover .ss-win img, .ss-phone:focus-within .ss-win img {
  transform: translateY(calc(-100% + var(--ss-win) * .78)); }
.ss-hint { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: .72rem;
  color: var(--ss-soft); white-space: nowrap; pointer-events: none; }

/* What to notice: point at an item and the page glides to that spot. */
.ss .ss-notice { list-style: none; counter-reset: ss; padding: 0 !important; margin: 1rem 0 0; display: grid; gap: .5rem; }
.ss-notice li { counter-increment: ss; position: relative; margin: 0 !important; padding: .6rem .8rem .6rem 2.6rem;
  border: 1px solid var(--ss-rule); border-radius: 10px; background: #fff; cursor: default;
  transition: border-color .15s, background .15s; font-size: .98rem; line-height: 1.5; }
.ss-notice li::before { content: counter(ss); position: absolute; left: .7rem; top: .62rem; width: 1.35rem; height: 1.35rem;
  border-radius: 50%; background: var(--ss-navy); color: #fff; font-size: .75rem; font-weight: 700;
  display: grid; place-items: center; }
.ss-notice li::marker { content: none; }
.ss-notice li:hover, .ss-notice li:focus { border-color: var(--ss-sky); background: #f4f9fd; outline: none; }
.ss-notice li:focus-visible { outline: 2px solid var(--ss-sky); outline-offset: 2px; }
.ss-notice b { color: var(--ss-ink); }

/* The jump targets: li.ss-at-NN moves the desktop shot NN% down the page. */
.ss-panel:has(.ss-at-0:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(0); }
.ss-panel:has(.ss-at-5:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-5%); }
.ss-panel:has(.ss-at-10:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-10%); }
.ss-panel:has(.ss-at-15:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-15%); }
.ss-panel:has(.ss-at-20:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-20%); }
.ss-panel:has(.ss-at-25:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-25%); }
.ss-panel:has(.ss-at-30:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-30%); }
.ss-panel:has(.ss-at-35:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-35%); }
.ss-panel:has(.ss-at-40:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-40%); }
.ss-panel:has(.ss-at-45:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-45%); }
.ss-panel:has(.ss-at-50:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-50%); }
.ss-panel:has(.ss-at-55:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-55%); }
.ss-panel:has(.ss-at-60:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-60%); }
.ss-panel:has(.ss-at-65:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-65%); }
.ss-panel:has(.ss-at-70:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-70%); }
.ss-panel:has(.ss-at-75:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-75%); }
.ss-panel:has(.ss-at-80:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-80%); }
.ss-panel:has(.ss-at-85:is(:hover,:focus)) .ss-frame .ss-win img { transform: translateY(-85%); }
.ss-panel:has(.ss-notice li:is(:hover,:focus)) .ss-frame .ss-win { box-shadow: inset 0 0 0 3px var(--ss-sky); }

/* The numbers, as chips. */
.ss-meta { display: flex; flex-wrap: wrap; gap: .4rem; margin: .9rem 0 0; }
.ss-meta span { font-size: .78rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px;
  background: #e8f1f9; color: var(--ss-navy); }
.ss-meta span.ss-good { background: #e3f1e9; color: #1c6448; }
.ss-cap { font-size: .9rem; color: var(--ss-soft); margin: .9rem 0 0; }
.ss-cap a { font-weight: 600; }

@media (max-width: 560px) {
  .ss-stage { padding: 12px 12px 22px; }
  .ss-frame { margin-right: 0; }
  .ss-phone { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ss-win { overflow-y: auto; }
  .ss-win img, .ss-frame:hover .ss-win img, .ss-phone:hover .ss-win img,
  .ss-frame:focus-within .ss-win img, .ss-phone:focus-within .ss-win img,
  .ss-panel .ss-win img { transform: none !important; transition: none; }
  .ss-hint { display: none; }
}