/* ============================================================
   The way back out of a case study.

   This file used to dress an overlay: a fixed frame over the card, a
   frosted veil, and an iframe holding the story. That whole apparatus is
   gone — see js/case-overlay.js for why. In short: a same-origin iframe is
   a second full document in the same renderer, and the two of them plus
   the overlay's stack of viewport-sized composited layers put the page
   over Chrome's tile-memory budget, past which Chrome stops drawing.

   A case study is its own page now, wearing its own chrome strip and its
   own rail, so the only thing still needed here is the × that takes you
   back to the work.

   Fixed to the viewport rather than placed in the scaled stage: it
   belongs to the window the way the chrome does, so it never rides the
   card's zoom and its 32px stay 32px at every scale.
   ============================================================ */
.case-x {
  position: fixed;
  top: calc(var(--shell-chrome-h, 40px) + 12px);
  right: 14px;
  z-index: 19;                  /* over the story, under the chrome (20) */
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  /* near-solid rather than frosted: a backdrop-filter here would re-blur
     its own square on every scrolled frame beneath it, for the whole
     length of the read */
  background: rgba(var(--bg-rgb), 0.94);
  border: 1px solid var(--shell-line, var(--g-250));
  border-radius: 8px;
  color: var(--g-550);
  cursor: pointer;
  transition: color var(--t-micro) ease, background-color var(--t-micro) ease,
              border-color var(--t-micro) ease;
}
.case-x svg { width: 17px; height: 17px; }
.case-x:hover,
.case-x:focus-visible {
  color: var(--ink);
  background: rgba(var(--ink-rgb), 0.06);
  border-color: rgba(var(--ink-rgb), 0.2);
}

/* the deep-linked board runs embedded with no shell around it, and phones
   have their own nav — neither has a "back to work" corner to draw */
html.is-embed .case-x { display: none; }
@media (max-width: 700px) { .case-x { display: none; } }