/* Husainin Baug wireframes: page-fill helpers + floating screen navigation pill. */

/* Let each screen's root block fill a taller viewport (no white band below). */
body.hb-screen { min-height: 100vh; display: flex; flex-direction: column; }
body.hb-screen > div:first-of-type { flex: 1 0 auto; }

/* Phone-sized screen (M8): centre the 390x844 frame on a neutral backdrop. */
html.hb-phone, body.hb-phone { background: #D9DEDD; }
body.hb-phone { min-height: 100vh; display: flex; box-sizing: border-box; padding: 24px 0; }
body.hb-phone > div:first-of-type {
  flex: 0 0 auto; margin: auto;
  box-shadow: 0 12px 40px rgba(16, 32, 31, .22);
  border-radius: 6px;
}
@media (max-width: 430px), (max-height: 892px) {
  body.hb-phone { padding: 0; }
  body.hb-phone > div:first-of-type { box-shadow: none; border-radius: 0; }
}

/* Floating pill (only injected when not inside an iframe). */
#hb-screen-nav {
  position: fixed; right: 12px; bottom: 12px; z-index: 2147483000;
  display: flex; align-items: center; gap: 2px;
  max-width: calc(100vw - 24px); box-sizing: border-box;
  padding: 3px; border-radius: 999px;
  background: rgba(29, 36, 35, .82); color: #FFFFFF;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
  font: 500 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  opacity: .9; transition: opacity .15s ease;
}
#hb-screen-nav:hover, #hb-screen-nav:focus-within { opacity: 1; }
#hb-screen-nav .hb-sn-body { display: flex; align-items: center; gap: 2px; min-width: 0; }
#hb-screen-nav.is-collapsed .hb-sn-body { display: none; }
#hb-screen-nav a, #hb-screen-nav button { color: #FFFFFF; text-decoration: none; }
#hb-screen-nav .hb-sn-link {
  padding: 6px 10px; border-radius: 999px; white-space: nowrap; font-weight: 600;
}
#hb-screen-nav .hb-sn-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .25); margin: 0 2px; }
#hb-screen-nav .hb-sn-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 999px; font-size: 18px; line-height: 1;
}
#hb-screen-nav .hb-sn-btn.is-off { opacity: .3; }
#hb-screen-nav .hb-sn-title {
  max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 4px; color: rgba(255, 255, 255, .92);
}
#hb-screen-nav .hb-sn-count { color: rgba(255, 255, 255, .55); font-variant-numeric: tabular-nums; }
#hb-screen-nav .hb-sn-toggle {
  width: 26px; height: 26px; border: 0; border-radius: 999px; padding: 0;
  background: transparent; cursor: pointer; font-size: 15px; line-height: 1;
}
#hb-screen-nav a:hover, #hb-screen-nav .hb-sn-toggle:hover { background: rgba(255, 255, 255, .16); }
#hb-screen-nav a:focus-visible, #hb-screen-nav button:focus-visible { outline: 2px solid #8FD3CC; outline-offset: 1px; }
@media (max-width: 520px) {
  #hb-screen-nav .hb-sn-title { max-width: 110px; }
  #hb-screen-nav .hb-sn-count { display: none; }
}
@media print { #hb-screen-nav { display: none !important; } }

/* CyphronTech watermark: faint tiled text over every screen (also inside the viewer and thumbnails). */
html::after {
  content: ""; position: fixed; inset: 0; z-index: 2147482000; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220'%3E%3Ctext x='180' y='120' text-anchor='middle' transform='rotate(-24 180 110)' font-family='Inter,Segoe UI,Arial,sans-serif' font-size='22' font-weight='700' fill='%233A6CB0' fill-opacity='0.07'%3ECyphronTech%3C/text%3E%3Ctext x='180' y='142' text-anchor='middle' transform='rotate(-24 180 110)' font-family='Inter,Segoe UI,Arial,sans-serif' font-size='11' font-weight='600' letter-spacing='2' fill='%233A6CB0' fill-opacity='0.07'%3ECONFIDENTIAL%20%C2%B7%20CLIENT%20PREVIEW%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}
/* Corner credit inside each screen. */
html::before {
  content: "© CyphronTech · cyphrontech.com"; position: fixed; left: 10px; bottom: 8px; z-index: 2147482001;
  pointer-events: none; font: 600 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: rgba(58, 108, 176, .55); letter-spacing: .02em;
}