/* Window icons on every card (cardwin.js). Loaded last; the html body prefix beats the older !important rules.
   Nothing here animates except opacity. */

/* the bar: sits in the card's top padding and stays in view while a long card scrolls */
.cw-bar, .cw-restore { display: none; }
html body .tiles .tile:not(.cw-mini) > .cw-restore { display: none !important; }
html body .tiles.staged .tile.asked > .cw-bar, html body .tiles.staged .tile.cw-pinned > .cw-bar {
  display: flex; align-items: center; gap: 6px; position: sticky; top: 0; z-index: 6; height: 30px; margin: -30px 0 0; padding: 0;
  pointer-events: none; }
.cw-grip { flex: 1; align-self: stretch; }
.cw-icons { display: flex; gap: 2px; margin-inline-start: auto; pointer-events: auto; background: rgba(12, 10, 12, .55); border-radius: 9px; padding: 2px; }
.cw-icons button, .cw-restore { width: 28px; height: 28px; border: 0; padding: 0; background: transparent; color: rgba(255, 255, 255, .75); display: grid; place-items: center; cursor: pointer; border-radius: 7px; }
.cw-icons svg, .cw-restore svg { width: 15px; height: 15px; }
.cw-icons button:hover, .cw-restore:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.cw-icons button:focus-visible, .cw-restore:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.cw-pin[aria-pressed="true"] { color: var(--verm, #c8341f); background: color-mix(in srgb, var(--verm, #c8341f) 18%, transparent); }
/* the old text button is replaced by the close icon; "Make private" stays */
html body .tiles.staged .stagebtns .stageclose { display: none !important; }

/* sizes for the open card */
html body .tiles.staged.has-open .tile.asked[data-cw-size="small"] { width: min(520px, calc(100vw - 32px)) !important; }
html body .tiles.staged.has-open .tile.asked[data-cw-size="medium"] { width: min(760px, calc(100vw - 32px)) !important; }
html body .tiles.staged.has-open .tile.asked[data-cw-size="large"] { width: min(1040px, calc(100vw - 32px)) !important; }

/* keep the card area on screen while a pinned or folded card is out */
html body .tiles.staged.cw-any { display: block !important; }

/* pinned: a floating window, not covering the page; drag it by the bar */
html body .tiles.staged .tile.cw-pinned:not([hidden]) {
  display: block !important; position: fixed !important; transform: none !important; right: auto !important; bottom: auto !important; margin: 0 !important;
  z-index: 62; --cw-w: 480px; width: min(var(--cw-w), calc(100vw - 16px)) !important; min-height: 0 !important; height: auto !important;
  max-height: calc(100vh - var(--toph, 64px) - 32px) !important; overflow: auto !important; padding: 34px 18px 18px !important;
  background: #141113 !important; border: 1px solid rgba(255, 255, 255, .14) !important; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .55); }
html body .tiles.staged .tile.cw-pinned[data-cw-size="small"] { --cw-w: 360px; }
html body .tiles.staged .tile.cw-pinned[data-cw-size="large"] { --cw-w: 640px; }
html body .tiles.staged .tile.cw-pinned > .cw-bar { pointer-events: auto; cursor: grab; touch-action: none; user-select: none; }
html body .tiles.staged .tile.cw-pinned.cw-drag > .cw-bar { cursor: grabbing; }
html body .tiles.staged .tile.cw-pinned h2 .jp, html body .tiles.staged .tile.cw-mini h2 .jp { display: none !important; }

/* minimised: a title chip at the bottom corner; tap it to bring the card back */
html body .tiles.staged .tile.cw-mini:not([hidden]) {
  display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center; gap: 4px; position: fixed !important; transform: none !important; min-width: 170px !important;
  left: auto !important; top: auto !important; right: 16px !important; bottom: calc(16px + var(--cw-i, 0) * 52px) !important; margin: 0 !important;
  z-index: 75 !important; width: auto !important; max-width: min(300px, calc(100vw - 32px)) !important; min-height: 0 !important; height: 44px !important;
  padding: 0 4px 0 12px !important; overflow: hidden !important; background: #141113 !important; border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 12px; box-shadow: 0 10px 28px rgba(0, 0, 0, .5); }
html body .tiles.staged .tile.cw-mini > :not(h2):not(.cw-bar):not(.cw-restore) { display: none !important; }
html body .tiles.staged .tile.cw-mini > h2 { order: 0; flex: 1 1 auto; min-width: 60px; display: block !important; position: static !important; margin: 0 !important; font-size: 14px !important; line-height: 1.2 !important;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em !important; }
html body .tiles.staged .tile.cw-mini > h2 .cen { display: none !important; }
html body .tiles.staged .tile.cw-mini > .cw-restore { display: grid; order: 1; }
html body .tiles.staged .tile.cw-mini > .cw-bar { display: flex; order: 2; position: static; height: auto; margin: 0; pointer-events: auto; }
html body .tiles.staged .tile.cw-mini > .cw-bar .cw-grip, html body .tiles.staged .tile.cw-mini .cw-pin,
html body .tiles.staged .tile.cw-mini .cw-size, html body .tiles.staged .tile.cw-mini .cw-min { display: none; }
html body .tiles.staged .tile.cw-mini .cw-icons { background: none; }
html[dir="rtl"] body .tiles.staged .tile.cw-mini:not([hidden]) { right: auto !important; left: 16px !important; }
@media (max-width: 520px) {
  html body .tiles.staged .tile.cw-mini:not([hidden]) { right: 12px !important; bottom: calc(12px + var(--cw-i, 0) * 50px) !important; max-width: calc(100vw - 24px) !important; }
  html[dir="rtl"] body .tiles.staged .tile.cw-mini:not([hidden]) { left: 12px !important; right: auto !important; }
}
/* never dimmed like the other cards; while another card is open, pinned cards wait just behind it */
html body .tiles.staged .tile.cw-pinned:not([hidden]), html body .tiles.staged .tile.cw-mini:not([hidden]) { opacity: 1 !important; filter: none !important; }
html body .tiles.staged.has-open .tile.cw-pinned:not([hidden]) { z-index: 59 !important; }
/* short screens (laptops with a small window): the open card starts under the header and uses the full height,
   with a thinner paper frame, instead of being squeezed in the middle (Viv, 15 Nov 2026: "UI looks bad") */
@media (max-height: 640px) {
  html body .tiles.staged.has-open .tile.asked { top: calc(var(--toph, 64px) + 8px) !important; transform: translate(-50%, 0) !important;
    max-height: calc(100vh - var(--toph, 64px) - 16px) !important; }
  html[data-theme] body .tiles.staged.has-open .tile.asked { border-width: 8px !important; border-bottom-width: 18px !important; }
}
/* the Music card keeps room for the player even at the small size */
html body .tiles.staged.has-open .tile.asked[data-id="music"][data-cw-size="small"] { width: min(640px, calc(100vw - 32px)) !important; }