/* The window's head is its coin (coin-travel.js; Chris, 1 Nov: "the coins, mine and the crews would be floating over transparent background
   and normal coin size, over the window card ... at the center top, the windows category's tabs underneath like normal, only the headers
   changes"). A window of Your sessions or of a crew member (panel.js spec.coin, the class coin-head) has no title, line, Close or full-screen
   button in its head: only the coin at the top middle, its back towards him (his name and work are struck there), half over the card and half
   over the dimmed page, and the tabs under it. The card is drawn from the coin's middle down. A swipe down, a tap on the page or Escape still
   closes it. Someone who has a medallion and no coin yet keeps his name and work as a short caption under it. */
:root { --coin-head: 104px; }
@media (min-width: 820px) { :root { --coin-head: 124px; } }

/* Clear above the card: the window's own ground is drawn by its ::before from the coin's middle down. */
.detail.coin-head { background: transparent; border-color: transparent; box-shadow: none; }
.detail.coin-head::before {
  content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: calc(var(--coin-head) / 2); bottom: 0; pointer-events: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: 16px;
}
@media (max-width: 699px) { .detail.coin-head::before { border-radius: 18px 18px 0 0; border-bottom: 0; } }
.detail.coin-head .sheet-head { background: transparent; padding-top: 0; cursor: default; }
.detail.coin-head .grab { display: none; }
.detail.coin-head .head { justify-content: center; position: relative; }

/* The coin, the size of a coin: large enough to read what is struck on his back. */
.detail.coin-head #detail-pic, .detail.coin-head #detail-pic:has(svg.v-coin) { width: var(--coin-head); height: var(--coin-head); flex: none; }

/* No words and no buttons in the head; the words stay for a screen reader. */
.detail.coin-head:not(.caption) .head-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.detail.coin-head.caption .head { flex-direction: column; gap: 2px; }
.detail.coin-head.caption .head-text { flex: none; text-align: center; }
.detail.coin-head.caption #detail-name { font-size: 16px; }
.detail.coin-head.caption .head-sub { margin: 0; font-size: 12.5px; }
.detail.coin-head #detail-close { display: none; }
.detail.coin-head:not(.fill) #detail-full { display: none; }
/* With a mouse there is no swipe up: full screen keeps its small corner icon, inside the card at the right. */
@media (pointer: fine) {
  .detail.coin-head:not(.fill) #detail-full:not([hidden]) { display: inline-grid; position: absolute; right: -6px; top: calc(var(--coin-head) / 2 + 6px); }
}
.detail.coin-head .panel-tabs { margin-top: 4px; }

/* Full screen: the card is the whole screen; the coin sits in the corner, small and on its face (a session or the list), or, over a new
   session, is the coin in its middle (coin-hero, fill.js), so nothing of the head shows but the tabs. */
.detail.coin-head.fill::before { top: 0; border: 0; border-radius: 0; }
html .detail.coin-head.fill .head > #detail-pic {
  display: block; position: fixed; z-index: 5; top: max(6px, env(safe-area-inset-top)); left: 6px; width: 44px; height: 44px;
}
html .detail.coin-head.tabbed.fill .panel-tabs { margin: 0 54px; }
html .detail.coin-head.tabbed.fill.coin-hero .panel-tabs { margin: 0 8px; }
.detail.coin-head.fill .m-dot { width: 11px; height: 11px; border-width: 2px; }

/* One coin in a window: where it is not, it is hidden; while it flies, it is the flying copy (coin-travel.js). */
.detail.coin-head.coin-at-hero #detail-pic, .detail.coin-head.coin-flying #detail-pic { visibility: hidden; }
.detail.coin-head:not(.coin-at-hero) .work-welcome .work-hero-ring > .work-hero-face,
.detail.coin-head:not(.coin-at-hero) .work-welcome .work-hero-ring > .mine-start-face,
.detail.coin-head.coin-flying .work-welcome .work-hero-ring > .work-hero-face,
.detail.coin-head.coin-flying .work-welcome .work-hero-ring > .mine-start-face { visibility: hidden; }

/* A new session full screen goes down with a swipe (panel-swipe.js): while it is dragged or leaves, the desk shows under it again, dimmed. */
.detail.fill.coin-hero.dragging::backdrop, .detail.fill.coin-hero.leaving::backdrop { background: rgba(16, 14, 12, 0.55); }

/* The place a coin left (coin-travel.js): nothing of it shows, not its shadow, rim or dot (1 Nov, Chris: the desk's medallion showed its
   empty ring before the coin came back), until the coin is back on it. */
.coin-away { visibility: hidden !important; }

/* A crew member's card over Your sessions (panel-stack.js): a still copy of Your sessions lies under it, with the desk dimmed under that,
   so while the card grows out of his coin, is dragged down or goes back into it, his own backdrop is clear. Your sessions coming back
   takes its place where the copy is, with no rise. */
.detail.stacked.stack-moving::backdrop, .detail.stacked.dragging::backdrop { background: transparent !important; }
.detail.stacked.leaving::backdrop { background: transparent !important; }
.detail.no-enter[open] { animation: none !important; }
.panel-under { position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; overflow: hidden; contain: strict; }
.panel-under .pu-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
@media (pointer: coarse) { .panel-under .pu-shade { background: rgba(16, 14, 12, 0.55); } }
.panel-under .pu-copy { transform-origin: 50% 100%; }
.panel-under .pu-veil { position: absolute; inset: 0; background: #000; opacity: 0; }

/* The flying copy: the coin's two stills back to back in the top layer, turning as it goes; nothing of a popover's own box. */
.coin-flyer {
  position: fixed; inset: auto; left: 0; top: 0; margin: 0; padding: 0; border: 0; background: transparent; overflow: visible; color: inherit;
  pointer-events: none; perspective: 900px; transform-origin: 50% 50%; will-change: transform;
}
.coin-flyer .cf-turn { position: absolute; inset: 0; transform-style: preserve-3d; }
.coin-flyer .cf-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.3)); }
.coin-flyer .cf-back { transform: rotateY(180deg); }
.coin-flyer .cf-face > img, .coin-flyer .cf-face > svg { display: block; width: 100%; height: 100%; }
.coin-flyer.flat .cf-back { display: none; }