/* =================================
   Space Vanta Theme 1.0
   Viewport shell (floating screens)
   Path: public/header/viewport/viewport.css

   Shared by Find, Vision and the mobile drawer.
   Content styles live next to each viewport:
   viewport/find/find.css, viewport/vision/vision.css, drawer/drawer.css

   Open state:
   - .is-open   set by viewport.js
   - :target    URL anchor (#sv-find, #sv-vision, #sv-drawer): works
                without JS, e.g. when the editor swallows click events
   Closing without JS: link to #sv-closed (an id that does not exist).
   ================================= */

.sv-layer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  font-family: var(--sv-font, "Inter", sans-serif);
  color: var(--sv-ink, #252321);
}
.sv-layer.is-open,
.sv-layer:target {
  display: block;
  animation: sv-layer-in 0.22s ease both;
}
@keyframes sv-layer-in { from { opacity: 0; } to { opacity: 1; } }

body.sv-scroll-lock { overflow: hidden; }
body:has(.sv-layer:target) { overflow: hidden; }

.sv-layer__backdrop {
  position: absolute;
  inset: 0;
  display: block;
  background: rgba(48, 36, 24, 0.38);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* stage lets clicks outside the sheet fall through to the backdrop */
.sv-layer__stage {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 7vh 16px 4vh;
  box-sizing: border-box;
  pointer-events: none;
}
.sv-layer__float {
  pointer-events: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  filter: drop-shadow(0 28px 44px rgba(70, 48, 24, 0.24)) drop-shadow(0 4px 8px rgba(70, 48, 24, 0.10));
}

/* ---------- Sheet: silver edge, warm-white face, chamfered corners ---------- */
.sv-sheet {
  --sv-sheet-cut: 22px;
  --sv-sheet-poly: polygon(
    var(--sv-sheet-cut) 0, 100% 0,
    100% calc(100% - var(--sv-sheet-cut)), calc(100% - var(--sv-sheet-cut)) 100%,
    0 100%, 0 var(--sv-sheet-cut)
  );
  --sv-sheet-poly-in: polygon(
    calc(var(--sv-sheet-cut) - 0.4px) 0, 100% 0,
    100% calc(100% - var(--sv-sheet-cut) + 0.4px), calc(100% - var(--sv-sheet-cut) + 0.4px) 100%,
    0 100%, 0 calc(var(--sv-sheet-cut) - 0.4px)
  );
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-height: 86vh;
  box-sizing: border-box;
}
.sv-sheet::before,
.sv-sheet::after { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.sv-sheet::before {
  inset: 0;
  clip-path: var(--sv-sheet-poly);
  background: linear-gradient(115deg, #ffffff 0%, #d2d3d8 22%, #f6f4f0 46%, #b9bcc4 74%, #ffffff 100%);
}
.sv-sheet::after {
  inset: 1px;
  clip-path: var(--sv-sheet-poly-in);
  background:
    radial-gradient(520px 260px at 85% -40px, rgba(255, 236, 205, 0.55), rgba(255, 236, 205, 0)),
    linear-gradient(180deg, #fffefb 0%, #fbf7f0 100%);
}

.sv-sheet__body { position: relative; z-index: 1; overflow: auto; box-sizing: border-box; }

/* seam of blue light on the top edge */
.sv-sheet__seam {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 12%;
  width: 150px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--sv-blue, #1d6bff) 35%, var(--sv-blue-2, #4d8dff) 70%, transparent 100%);
  box-shadow: 0 0 10px var(--sv-blue-glow, rgba(29, 107, 255, 0.38));
}
.sv-sheet__seam::after {
  content: "";
  position: absolute;
  left: 160px; top: 0;
  width: 24px; height: 2px;
  background: var(--sv-blue-2, #4d8dff);
  opacity: 0.7;
  box-shadow: 0 0 8px var(--sv-blue-glow, rgba(29, 107, 255, 0.38));
}

.sv-sheet__eyebrow {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sv-blue, #1d6bff);
}

/* close */
.sv-layer__close {
  position: absolute;
  top: 18px; right: 26px;
  z-index: 4;
  display: block;
  width: 32px; height: 32px;
  cursor: pointer;
}
.sv-layer__close span { position: absolute; left: 6px; right: 6px; top: 15px; height: 1.5px; background: var(--sv-ink, #252321); }
.sv-layer__close span:first-child { transform: rotate(45deg); }
.sv-layer__close span:last-child { transform: rotate(-45deg); }
.sv-layer__close:hover span { background: var(--sv-blue, #1d6bff); }

/* ---------- Mobile: sheets become full screen ---------- */
@media (max-width: 900px) {
  .sv-layer__stage { padding: 0; }
  .sv-layer__float { height: 100%; filter: none; }
  .sv-sheet { height: 100%; max-height: 100%; --sv-sheet-cut: 0px; }
  .sv-sheet::before { display: none; }
  .sv-sheet::after { inset: 0; clip-path: none; }
  .sv-layer__close { top: 14px; right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sv-layer.is-open,
  .sv-layer:target { animation: none; }
}