/* ============================================================================
   SITE FRAME — weight, mobile and a reading viewer for the website plates
   (TNMT · Reveneo · BitSport). 2026-09-17.

   Kept in its own file on purpose: style.css is co-edited by another session
   and whole-file writes race. Loaded after style.css, so equal specificity wins.

   WHY: a plate is a desktop page shot at 3456px, shown in a 16:10 box that is
   1100px at most and ~342px on a phone. At phone size its text is roughly a
   tenth of its real size, and no frame width fixes that. So the plates are now
   right-sized WebP (public_html_tools/plates/make_derivatives.py), only the
   open tab's plate is fetched, and any plate opens at reading size in a viewer
   that pans inside itself — the page underneath never scrolls sideways.
   ============================================================================ */

.p-site .ps-body { cursor: zoom-in; }

/* a frame for an address that never went live: the right-hand slot states
   that instead of linking, so all four bars keep one height and one axis */
.ps-visit--off { border-bottom-color: transparent; color: #9a938c; cursor: default; }

/* the invitation to read the plate — sits on the plate, not in the copy */
.ps-open {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  font-family: inherit;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: #141414;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #141414;
  padding: 7px 10px;
  cursor: pointer;
}
.ps-open:hover { background: #141414; color: #fff; }
.ps-tab:focus-visible,
.ps-open:focus-visible { outline: 2px solid #146c43; outline-offset: -2px; }

/* ---- phones: the frame keeps the feed's gutter; its controls become touchable */
@media (max-width: 760px) {
  .ps-tabs { overflow-x: auto; scrollbar-width: none; }
  .ps-tabs::-webkit-scrollbar { display: none; }
  .ps-tab {
    flex: 1 0 auto;
    min-height: 44px;
    padding: 0 14px;
    font-size: 10px;
    letter-spacing: 0.14em;
  }
  .ps-bar .ps-url,
  .ps-bar .ps-visit { font-size: 10px; }
  .ps-open { right: 8px; bottom: 8px; padding: 10px 12px; }
}

/* ---- the viewer ----------------------------------------------------------- */
.pv {
  position: fixed;
  inset: 0;
  z-index: 10000;                 /* above the station (9000) */
  display: flex;
  flex-direction: column;
  background: rgba(16, 16, 16, 0.97);
  color: #e9e6e1;
  font-family: "Simplon BP Mono", ui-monospace, monospace;
}
.pv[hidden] { display: none; }
.pv-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #333;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pv-cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-nav { display: flex; gap: 6px; flex: 0 0 auto; }
.pv-bar button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid #555;
  min-width: 36px;
  min-height: 36px;
  padding: 0 10px;
  cursor: pointer;
}
.pv-bar button:hover,
.pv-bar button:focus-visible { border-color: #e9e6e1; outline: none; }
.pv-bar button[disabled] { opacity: 0.3; cursor: default; }
.pv-scroll {
  flex: 1 1 auto;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.pv-img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: none;
  height: auto;
  cursor: zoom-in;
}
.pv.is-read .pv-img { width: 1760px; cursor: zoom-out; }
@media (max-width: 760px) {
  .pv.is-read .pv-img { width: 1100px; }   /* a phone reads the page at 3x the frame */
  .pv-bar { padding: 8px 10px; }
}