/* The cover's frame and the frame editor (partials/site/frame-editor.html.twig), for the profile and Settings › Profile.
   The cover's two shapes (width / height), read by ui/cover-editor.ts for its frames: on computers the cover is always
   5 : 1 of its own width (384 px tall at 1920), on phones 150 px tall (2.6 : 1 at 390 px). A .cover-shape crops its
   .cover-pic at the member's focal point and zoom, as the server wrote them in its style. */
.cover-shape { --ld-cover-pc: 5; --ld-cover-phone: 2.6; }
.cover-shape .cover-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--ld-cover-x, 50%) var(--ld-cover-y, 50%); transform: scale(var(--ld-cover-zoom, 1)); transform-origin: var(--ld-cover-x, 50%) var(--ld-cover-y, 50%); transition: transform .2s ease-out; }

/* The editor: the frames stay put and the picture zooms and pans behind them, dimmed outside the frames.
   ui/cover-editor.ts places the picture and the frames in pixels. */
.cover-ed { width: min(880px, calc(100vw - 32px)); }
.cover-ed.is-picture { width: min(560px, calc(100vw - 32px)); }
.ced-wrap { height: clamp(220px, 52vh, 480px); display: grid; border-radius: var(--ld-radius-lg); background: var(--ld-surface-0); }
.ced-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: var(--ld-radius-lg); }
.ced-stage.is-dragging { cursor: grabbing; }
.ced-stage:focus-visible { outline: 2px solid var(--ld-green); outline-offset: 3px; }
.ced-stage img { position: absolute; left: 0; top: 0; max-width: none; max-height: none; display: block; pointer-events: none; -webkit-user-drag: none; }
.ced-dim { position: absolute; inset: 0; width: 100%; height: 100%; fill: rgba(5,6,8,.62); pointer-events: none; }
.ced-frame { position: absolute; box-sizing: border-box; border: 2px solid #fff; border-radius: 2px; pointer-events: none; box-shadow: 0 0 0 1px rgba(5,6,8,.45); }
.ced-frame.is-phone { border: 2px dashed var(--ld-green); }
.ced-frame.is-round { border-radius: 50%; }
.ced-tag { position: absolute; left: 6px; top: 6px; display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: var(--ld-radius-full); background: rgba(5,6,8,.72); color: #fff; font: 600 11px/16px var(--font-sans); white-space: nowrap; }
.ced-frame.is-phone .ced-tag { top: auto; left: auto; bottom: 6px; right: 6px; color: var(--ld-green); }
/* Frames too small for both names keep only their icons. */
.ced-stage.is-tight .ced-tag { padding: 2px 4px; }
.ced-stage.is-tight .ced-tag > span { display: none; }
.ced-zoom { display: flex; align-items: center; gap: 10px; }
.ced-zoom input[type="range"] { flex: 1; max-width: 320px; accent-color: var(--ld-green); }
@media (max-width: 760px) {
  dialog.modal.cover-ed { inset: 0; margin: 0; width: 100% !important; max-width: none; height: 100dvh; max-height: none; border-radius: 0; border: 0; padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
  .cover-ed .ced-wrap { flex: 1 1 auto; height: auto; min-height: 160px; }
  .cover-ed .ced-zoom input[type="range"] { max-width: none; }
  .cover-ed .modal-actions .btn { flex: 1; }
}