/* Vendored from homelab/gsa-dash/static/layers/layers.css (DESIGN.md §7); keep in step with it. */
/* The layer shapes (DESIGN.md §7) and their geometry (§5): a card
   holding controls at its edge is padded by its radius minus theirs. */

.layer { position: fixed; color: var(--ink); }
.layer .grab { display: none; }
.layer .head { flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--s-2);
  height: calc(var(--plate) + 2 * var(--card-pad)); padding: 0 calc(var(--card-pad) - (var(--hit) - var(--plate)) / 2) 0 18px; }
.layer .head b { font: 500 var(--t-lg) var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.layer .body { min-height: 0; }

.scrim { position: fixed; inset: 0; z-index: var(--z-scrim); background: var(--scrim); opacity: 0; transition: opacity var(--d-panel) var(--ease); }
.scrim.on { opacity: 1; }
.scrim.clear { background: transparent; }

/* a popover: anchored to its control, grows from it. Tools hold controls at
   their edges (24 = 10 + 14); menus hold rows (16 = 10 + 6). */
.layer.popover { z-index: var(--z-sheet); width: 340px; max-width: calc(100vw - 2 * var(--card-inset));
  padding: calc(var(--r-xl) - var(--r-ctl)); border-radius: var(--r-xl);
  transition: opacity var(--d-pop) var(--ease), transform var(--d-pop) var(--ease); }
.layer.popover[data-shape="menu"] { width: 260px; padding: var(--card-pad); border-radius: var(--r-lg); }
.layer.popover.out { opacity: 0; transform: scale(.97) translateY(-4px); }

/* a panel: the sidebar's mirror on the right, the same floating frosted card */
.layer.panel { z-index: var(--z-panel); top: calc(var(--card-inset) + var(--safe-top)); right: calc(var(--card-inset) + env(safe-area-inset-right));
  bottom: var(--card-inset); width: 380px; display: flex; flex-direction: column; border-radius: var(--r-lg);
  transition: opacity var(--d-panel) var(--ease), transform var(--d-panel) var(--ease); }
.layer.panel.out { opacity: 0; transform: translateX(var(--s-3)); }
.layer.panel .body { flex: 1; overflow-y: auto; padding: 0 var(--card-pad) var(--card-pad); }

/* a cover: a place of its own, opaque, rising from the bottom */
.layer.cover { z-index: var(--z-cover); inset: 0; background: var(--bg); transition: transform var(--d-sheet) var(--ease-sheet); }
.layer.cover.out { transform: translateY(100%); }
.layer.cover.dragging { transition: none; }

/* menus inside any layer */
.menu-rows { display: flex; flex-direction: column; gap: 1px; }
.menu-rows > * { display: flex; align-items: center; gap: var(--s-3); min-height: 40px; padding: 0 var(--s-3); border-radius: var(--r-ctl); color: var(--ink-2); }
@media (hover: hover) { .menu-rows > *:hover { background: var(--fill); color: var(--ink); } }

@media (max-width: 720px) {
  /* sheets: one element, a height --h and a progress --p (0 at fit, 1 at
     large). At fit it floats, inset with one radius all round, frosted; as
     it grows it meets the edges and turns opaque. */
  .layer.sheet { z-index: var(--z-sheet); --sheet-pad: calc(var(--r-sheet) - var(--r-ctl)); --inset: var(--s-2);
    left: calc(var(--inset) * (1 - var(--p, 0))); right: calc(var(--inset) * (1 - var(--p, 0)));
    bottom: calc(max(var(--inset), env(safe-area-inset-bottom)) * (1 - var(--p, 0)));
    height: var(--h, auto); max-height: calc(100dvh - var(--safe-top) - 10px);
    display: flex; flex-direction: column; overflow: hidden; touch-action: none;
    border-radius: var(--r-sheet) var(--r-sheet) calc(var(--r-sheet) * (1 - var(--p, 0))) calc(var(--r-sheet) * (1 - var(--p, 0)));
    transition: transform var(--d-sheet) var(--ease-sheet), height var(--d-sheet) var(--ease-sheet), left var(--d-sheet) var(--ease-sheet),
      right var(--d-sheet) var(--ease-sheet), bottom var(--d-sheet) var(--ease-sheet), border-radius var(--d-sheet) var(--ease-sheet); }
  .layer.sheet.large { --sheet-pad: var(--s-5); background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .layer.sheet.out { transform: translateY(calc(100% + var(--s-5))); transition-duration: var(--d-sheet-out); }
  .layer.sheet.dragging { transition: none; }
  .layer.sheet .grab { display: block; flex: none; position: relative; width: 36px; height: 5px; margin: var(--s-2) auto var(--s-1);
    border-radius: var(--r-pill); background: color-mix(in srgb, var(--ink) 30%, transparent); }
  .layer.sheet .grab::after { content: ""; position: absolute; inset: -12px -40px; }   /* a fat target */
  .layer.sheet .body { padding: var(--s-1) var(--sheet-pad) max(var(--sheet-pad), env(safe-area-inset-bottom)); overflow: hidden; }
  .layer.sheet.large .body { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; }
  .layer.sheet .head { height: var(--hit); }
  .layer.sheet .head [data-close] { display: none; }               /* drag or the scrim closes it */
  .layer.sheet .menu-rows > * { min-height: 52px; font-size: var(--t-body); }
}

/* a sheet over a cover (Speed over Now Playing): the one exception to one at a time */
.layer.over-cover { z-index: var(--z-over-cover); }