/* A window moved aside (panel-move.js; Chris, 6 Nov): it is no longer modal, so it floats over the live desk where he put it, above the
   desk's own layers and under anything in the top layer (a picture shown large, a menu, the reload bar). */
.detail.floating { position: fixed; inset: auto; margin: 0; z-index: 200; }
.detail.floating:not(.coin-head) { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25); }
.detail.floating.coin-head::before { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 2px 10px rgba(0, 0, 0, 0.25); }

/* Beside the coin's upper half is the desk itself: a press there is the desk's. The window's own parts take their presses as before, and the
   card's head (the grip, under the coin and the tabs) takes the window. */
.detail.floating.coin-head { pointer-events: none; }
.detail.floating.coin-head > * { pointer-events: auto; }
.detail.floating.coin-head > .sheet-head, .detail.floating.coin-head > .sheet-head > .head { pointer-events: none; }
.detail.floating.coin-head > .sheet-head > .head > *, .detail.floating.coin-head > .sheet-head > .panel-tabs { pointer-events: auto; }
.win-grip { display: none; position: absolute; left: 0; right: 0; z-index: -1; cursor: grab; }
.detail.floating.coin-head:not(.fill) > .win-grip { display: block; }
.detail.floating:not(.coin-head) > .sheet-head { cursor: grab; }
.detail.win-moving > .win-grip, .detail.win-moving > .sheet-head { cursor: grabbing; }

/* Aside, a click on the desk no longer closes it: its own ×, beside full screen, in the card's top right corner. */
.detail.floating.coin-head:not(.fill) #detail-close {
  display: inline-grid; place-items: center; position: absolute; right: -6px; top: calc(var(--coin-head) / 2 + 6px);
  width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 8px; color: var(--muted); font-size: 0;
}
.detail.floating.coin-head:not(.fill) #detail-close::before {
  content: ''; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.detail.floating.coin-head:not(.fill) #detail-close:hover, .detail.floating.coin-head:not(.fill) #detail-close:focus-visible { color: var(--gold); }
.detail.floating.coin-head:not(.fill) #detail-full:not([hidden]) { right: 30px; }

/* While it moves: the pointer is the window's everywhere, and the dim lifts off the desk as it leaves its place (panel-move.js sets its
   strength). Put back in its place the dim, if it had gone, comes back softly. */
.win-shield { position: fixed; inset: 0; z-index: 2147483001; cursor: grabbing; }
.win-dim { position: fixed; inset: 0; z-index: 199; pointer-events: none; }
.detail.win-dock::backdrop { animation: win-dim-in 0.2s ease-out; }
@keyframes win-dim-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .detail.win-dock::backdrop { animation: none; } }