/* A company's site in a small 2010 browser: the gallery's lightbox with a toolbar, an address bar and a status bar. Classes prefixed pk-. */
.pk-host {
  position: fixed; inset: 0; z-index: 8;
  display: none; place-items: center;
  font: 14px/1.45 Arial, Helvetica, sans-serif; color: #333;
}
.pk-host.pk-open { display: grid; }
.pk-host *, .pk-host *::before, .pk-host *::after { box-sizing: border-box; }

.pk-back { position: absolute; inset: 0; background: rgba(8, 10, 14, 0.82); animation: pk-fade 0.25s ease-out both; }
@keyframes pk-fade { from { opacity: 0; } }

.pk-box {
  position: relative; z-index: 1;
  max-width: calc(100vw - 24px);
  padding: 10px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2), 0 12px 50px rgba(0, 0, 0, 0.6);
  animation: pk-pop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.15) both;
}
@keyframes pk-pop { from { transform: scale(0.94); opacity: 0; } }

.pk-x {
  position: absolute; top: -15px; right: -15px; z-index: 3;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: #1c1c1c; color: #fff; border: 3px solid #fff;
  font: bold 19px/1 Arial, sans-serif; cursor: pointer;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}
.pk-x:hover { background: #cc0000; }

/* the browser's toolbar, as 2010 had it: round blue Back and Forward, Home, the address, Go */
.pk-bar {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 8px; padding: 4px 7px 4px 5px;
  background: linear-gradient(#f7f7f7, #e1e4e8); border: 1px solid #c3c8cf; border-radius: 4px;
  font: 12px/1 Tahoma, Verdana, sans-serif; color: #444;
}
.pk-tb {
  flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%;
  display: grid; place-items: center;
  cursor: pointer;
}
.pk-tb svg { display: block; }
.pk-nav {
  background: radial-gradient(circle at 50% 28%, #9fd0fa, #3a86d8 55%, #1c5aa6);
  border: 1px solid #1a4c8a; color: #fff;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.18);
}
.pk-nav:hover { background: radial-gradient(circle at 50% 28%, #bfe1ff, #4f98e6 55%, #2466b5); }
.pk-nav:active { background: radial-gradient(circle at 50% 70%, #7db8ee, #2e74c4 55%, #1a5299); }
/* nowhere to go: a grey button, as the browsers greyed theirs */
.pk-nav:disabled, .pk-nav:disabled:hover {
  background: linear-gradient(#f4f5f7, #d9dde2); border-color: #b4bac2; color: #fff;
  box-shadow: inset 0 1px 0 #fff; cursor: default;
}
.pk-nav:disabled svg { filter: drop-shadow(0 0 0.6px #9aa2ab); }
.pk-home {
  border-radius: 4px;
  background: linear-gradient(#fff, #e6e9ed); border: 1px solid #a9b0b9; color: #3a6ea8;
}
.pk-home:hover { background: linear-gradient(#fff, #f0f3f6); }
.pk-lbl { flex: none; margin-left: 2px; }
.pk-addr {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 8px;
  background: #fff; border: 1px solid; border-color: #8e959d #c8ccd1 #c8ccd1 #8e959d;
  font: 13px/1 Tahoma, Verdana, sans-serif; color: #111;
}
.pk-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* a little gold padlock: the secure-site sign browsers showed */
.pk-lock { position: relative; flex: none; width: 10px; height: 8px; margin-top: 4px; border-radius: 1px; background: linear-gradient(#f8d66a, #c89a17); box-shadow: inset 0 0 0 1px #8a6a0c; }
.pk-lock::before { content: ""; position: absolute; left: 2px; top: -5px; width: 6px; height: 6px; border: 1.5px solid #8a6a0c; border-bottom: 0; border-radius: 3px 3px 0 0; }
.pk-go {
  flex: none; padding: 5px 10px; border-radius: 3px;
  background: linear-gradient(#fff, #e6e9ed); border: 1px solid #a9b0b9; color: #1B5790;
  font: bold 12px/1 Tahoma, Verdana, sans-serif; cursor: pointer;
}
.pk-go:hover { background: linear-gradient(#fff, #f0f3f6); }

/* the page: a capture scrolls here, a live site fills it and scrolls itself */
.pk-view {
  position: relative;
  overflow-y: auto; overscroll-behavior: contain;
  background: #f4f4f4; border: 1px solid #c3c8cf; border-bottom: 0; border-radius: 3px 3px 0 0;
  outline: none;
}
.pk-live .pk-view { overflow: hidden; background: #fff; }
.pk-page { position: relative; overflow: hidden; }
.pk-page img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
/* the capture's links, where the live page had them: nothing to see but the pointer and the status bar */
.pk-page a { position: absolute; border-radius: 3px; -webkit-tap-highlight-color: rgba(27, 87, 144, 0.25); }
.pk-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.pk-wait {
  position: absolute; inset: 0; z-index: 1; margin: 0;
  display: none; place-items: center;
  background: #f4f4f4; color: #5c5c5c; font: 13px/1.4 Tahoma, Verdana, sans-serif;
}
.pk-waiting .pk-wait { display: grid; }

/* the status bar: where a link goes, else Done; on the right, what you're looking at */
.pk-status {
  display: flex; align-items: center; gap: 8px;
  height: 22px; padding: 0 6px;
  background: linear-gradient(#f3f4f6, #dfe3e8); border: 1px solid #c3c8cf; border-radius: 0 0 3px 3px;
  font: 11px/1 Tahoma, Verdana, sans-serif; color: #333;
}
.pk-st { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pk-zone {
  flex: none; display: flex; align-items: center; gap: 5px;
  padding-left: 8px; border-left: 1px solid #b9c0c8; box-shadow: inset 1px 0 0 #fff;
  white-space: nowrap;
}
/* a dog-eared page for a snapshot, the blue globe of the Internet zone for a live site */
.pk-zone::before {
  content: ""; flex: none; width: 9px; height: 11px;
  background: linear-gradient(225deg, #c9ced4 0 3px, #fff 3px) no-repeat, #fff; border: 1px solid #7d858e;
}
.pk-live .pk-zone::before {
  width: 12px; height: 12px; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 35% 32%, #d4ecff, #4a95dc 50%, #1f5aa0);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 3px -2px 0 -1px rgba(70, 150, 70, 0.55);
}

.pk-cap {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px;
  padding: 10px 4px 2px;
}
.pk-cap-l { min-width: 0; max-width: 720px; }
.pk-cap-l b { font-size: 16px; color: #1B5790; }
.pk-sub { font-size: 13px; color: #5c5c5c; }
.pk-text { margin: 4px 0 0; font-size: 14px; color: #444; }
.pk-btn {
  flex: none; margin-top: 2px; padding: 6px 12px; border-radius: 4px; border: 1px solid #b9c1cb;
  background: linear-gradient(#fff, #e6e9ed); color: #1B5790;
  font: bold 12px/1 Arial, sans-serif; text-decoration: none; white-space: nowrap;
}
.pk-btn:hover { background: linear-gradient(#fff, #f0f3f6); }
.pk-host button:focus-visible, .pk-host a:focus-visible { outline: 2px solid #1B5790; outline-offset: 2px; }
/* over a photo or a dark band a blue ring alone gets lost: white inside it */
.pk-host .pk-page a:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 0 4px #1B5790; }
.pk-sr { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (max-width: 700px) {
  /* the frame runs close to the edges on a phone: keep the close button on screen */
  .pk-x { top: -12px; right: -6px; }
  /* a compact toolbar: the address label is heard, not seen, and Go clear of the close button */
  .pk-bar { gap: 4px; margin-bottom: 6px; padding: 3px 13px 3px 3px; }
  .pk-tb { width: 26px; height: 26px; }
  .pk-tb svg { width: 14px; height: 14px; }
  .pk-lbl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pk-addr { gap: 5px; padding: 0 6px; font-size: 12px; }
  .pk-go { padding: 5px 8px; }
  .pk-status { gap: 6px; padding: 0 5px; }
  .pk-zone { padding-left: 6px; }
  .pk-cap { flex-direction: column; gap: 6px; }
}
/* a phone held sideways: the frame close to the edges, and the caption's button beside the title
   rather than under it, so the page (peek.js fits it to what's left), Close and Visit all fit.
   Only a window too short even for that scrolls. */
@media (max-height: 520px) {
  .pk-host.pk-open { overflow-y: auto; }
  .pk-box { margin: 12px 0 8px; }
  .pk-x { top: -10px; }
  .pk-cap { flex-direction: row; flex-wrap: nowrap; }
  .pk-cap-l { flex: 1; }
}
/* fingers: bigger toolbar buttons, and the caption's button 44px tall, as the gallery has it */
@media (pointer: coarse) {
  .pk-tb { width: 32px; height: 32px; }
  .pk-go { padding: 9px 10px; }
  .pk-cap .pk-btn { padding: 15px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .pk-back, .pk-box { animation: none; }
}