/* Cover entry point keeps the project's existing title and touch target. */
.project-identity { grid-template-columns: 44px minmax(0,1fr); gap: 0 12px; }
#draft-state { grid-column: 2; }
.cover-trigger { position: relative; display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; padding: 0; overflow: hidden; border: 1px solid var(--site-line); border-radius: 10px; background: #273339; }
.cover-trigger canvas { width: 100%; height: 100%; display: block; }
.cover-trigger::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #ffffff0a; pointer-events: none; }
.cover-trigger:hover { border-color: var(--site-muted); }
#project-dialog[data-intent=cover] { width: min(520px,calc(100% - 48px)); height: min(640px,calc(100dvh - 48px)); overflow: hidden; }
#project-dialog[data-intent=cover][open] { display: flex; flex-direction: column; }
#project-dialog[data-intent=cover] .dialog-heading { flex: none; margin-bottom: 12px; }
#project-dialog[data-intent=cover] #project-dialog-content { display: flex; flex: 1; min-height: 0; overflow: visible; }
.cover-editor { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; }
.cover-editor-body { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: hidden; }
.cover-preview-seat { --cover-card-size: 156px; --cover-step: 62px; display: flex; flex-direction: column; align-items: center; flex: none; min-width: 0; }
.cover-preview-seat > .cover-label { align-self: flex-start; margin-bottom: 0; }
.cover-stack { --cover-drag: 0px; position: relative; width: 100%; height: calc(var(--cover-card-size) + 32px); flex: none; overflow: hidden; isolation: isolate; touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
.cover-preset { --cover-yaw: 0deg; --cover-edge-light: 90deg; position: absolute; top: 12px; left: calc(50% - var(--cover-card-size)/2); width: var(--cover-card-size); height: var(--cover-card-size); min-width: 44px; min-height: 44px; padding: 0; overflow: hidden; border: 1px solid #ffffff29; border-radius: 22px; background: #273339; color: white; box-shadow: 0 8px 18px #0003; transform: translateX(calc(var(--cover-offset)*var(--cover-step) + var(--cover-drag))) perspective(520px) rotateY(var(--cover-yaw)) scale(.84); transition: transform 280ms cubic-bezier(.2,.8,.2,1), opacity 280ms ease; cursor: pointer; }
/* Perspective belongs to each card so the clipped stack does not flatten a
   shared 3D scene. The outer edges face forward; inner edges recede. */
.cover-preset[data-offset='-1'] { --cover-yaw: 20deg; }
.cover-preset[data-offset='1'] { --cover-yaw: -20deg; --cover-edge-light: 270deg; }
.cover-preset[data-offset='-2'] { --cover-yaw: 32deg; }
.cover-preset[data-offset='2'] { --cover-yaw: -32deg; --cover-edge-light: 270deg; }
.cover-preset[data-offset='-2'],.cover-preset[data-offset='2'] { transform: translateX(calc(var(--cover-offset)*var(--cover-step) + var(--cover-drag))) perspective(520px) rotateY(var(--cover-yaw)) scale(.72); opacity: .78; }
.cover-preset:not([data-offset='0']) { border-color: #ffffff38; box-shadow: 0 10px 20px #0005, 0 2px 5px #0005; }
.cover-preset:not([data-offset='0'])::before { content: ''; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: linear-gradient(var(--cover-edge-light),#ffffff0c,transparent 28%,#00000010); box-shadow: inset 1px 1px 0 #ffffff1c, inset -1px -1px 0 #0003; pointer-events: none; }
.cover-preset[data-offset='0'] { transform: translateX(var(--cover-drag)) perspective(520px) rotateY(0deg) scale(1); cursor: grab; }
.cover-preset[data-visible=false] { visibility: hidden; pointer-events: none; opacity: 0; }
.cover-preset:hover:not(:disabled) { background: #273339; color: white; }
.cover-preset:focus-visible { outline: 2px solid var(--site-paper); outline-offset: 3px; }
.cover-stack[data-dragging] .cover-preset { transition: none; cursor: grabbing; }
.cover-preset::after { position: absolute; content: ''; inset: 0; background: rgba(0,0,0,.56); pointer-events: none; }
.cover-artwork { width: 100%; height: 100%; display: block; pointer-events: none; }
.cover-card-type { position: absolute; z-index: 1; bottom: 14px; left: 14px; right: 14px; display: flex; flex-direction: column; align-items: flex-start; color: white; text-shadow: 0 1px 2px #0006; pointer-events: none; }
.cover-card-code { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -.035em; }
.cover-card-name { display: block; max-width: 100%; font-size: 12px; line-height: 1.4; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cover-default-mark { position: absolute; z-index: 1; top: 12px; left: 14px; color: #ffffffb3; font-size: 10px; line-height: 1.2; pointer-events: none; }
.cover-stack-navigation { display: grid; grid-template-columns: 44px minmax(96px,1fr) 44px; gap: 8px; align-items: center; margin-top: -8px; }
.cover-stack-arrow { display: grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--site-line); border-radius: 50%; color: var(--site-muted); font-size: 24px; line-height: 1; }
.cover-stack-arrow:hover:not(:disabled) { color: var(--site-paper); background: var(--site-control); }
.cover-selected-name { margin: 0; color: var(--site-paper); font-size: 12px; line-height: 1.4; font-weight: 500; text-align: center; }
.cover-stack-help { margin: 2px 0 0; color: var(--site-muted); font-size: 11px; line-height: 1.4; }
.cover-pane { flex: 1; min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; scroll-padding-block: 6px; }
.cover-pattern { display: block; width: 100%; min-height: 44px; font-size: 14px; }
.cover-section + .cover-section { margin-top: 16px; }
.cover-section[hidden],.cover-variation[hidden] { display: none; }
.cover-label { margin: 0 0 8px; color: var(--site-muted); font-size: 11px; line-height: 1.4; letter-spacing: .09em; text-transform: uppercase; font-weight: 500; }
.cover-direction-group { display: grid; grid-template-columns: repeat(8,minmax(44px,1fr)); gap: 4px; }
.cover-direction-group .studio-ui-choice { position: relative; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--site-line); border-radius: var(--site-radius-control); font-size: 0; color: var(--site-muted); }
.cover-direction-group .studio-ui-choice::after { content: ''; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: currentColor; -webkit-mask: url('../assets/arrow-up-right.svg') center / contain no-repeat; mask: url('../assets/arrow-up-right.svg') center / contain no-repeat; transform: rotate(var(--cover-direction-angle)); pointer-events: none; }
.cover-direction-group .studio-ui-choice[data-checked] { border-color: var(--site-muted); background: var(--site-control); color: var(--site-paper); text-decoration: none; }
.cover-variation { align-self: flex-start; background: transparent; min-height: 44px; margin-top: 8px; padding: 10px var(--site-space-4); font-size: 14px; line-height: 1.4; color: var(--site-muted); }
.cover-variation:hover:not(:disabled) { background: transparent; color: var(--site-paper); }
.cover-actions { display: flex; flex: none; justify-content: flex-end; gap: 8px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--site-line); }
.cover-actions button { min-width: 44px; height: var(--studio-control-height); min-height: var(--studio-control-height); padding-inline: 16px; font-size: 14px; }
@media(max-width:599px) {
  #project-dialog[data-intent=cover] { width: calc(100% - 32px); height: min(660px,calc(100dvh - 32px)); }
  .cover-preview-seat { --cover-card-size: 144px; --cover-step: 52px; }
  .cover-direction-group { grid-template-columns: repeat(4,minmax(44px,1fr)); gap: 6px; }
  .cover-card-code { font-size: 30px; }
}
@media(max-width:359px) {
  .cover-preview-seat { --cover-card-size: 128px; --cover-step: 38px; }
  .cover-card-type { left: 12px; right: 12px; bottom: 12px; }
  .cover-card-code { font-size: 27px; }.cover-card-name { font-size: 11px; }
}
@media(max-height:500px) and (orientation:landscape) {
  #project-dialog[data-intent=cover] { width: min(560px,calc(100% - 24px)); height: calc(100dvh - 24px); max-height: calc(100dvh - 24px); padding: 16px; }
  #project-dialog[data-intent=cover] .dialog-heading { margin-bottom: 8px; }
  /* One scroll owner retains the stack above its controls even on short screens. */
  .cover-editor-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; gap: 8px; }
  .cover-preview-seat { --cover-card-size: 104px; --cover-step: 46px; }
  .cover-pane { flex: none; overflow: visible; }
  .cover-stack-navigation { margin-top: -12px; }
  .cover-stack-help { display: none; }
  .cover-card-type { left: 9px; right: 9px; bottom: 9px; }
  .cover-card-code { font-size: 23px; }.cover-card-name { font-size: 10px; }
  .cover-direction-group { grid-template-columns: repeat(auto-fit,minmax(44px,1fr)); }
  .cover-actions { margin-top: 8px; padding-top: 8px; }
}
@media(prefers-reduced-motion:reduce) { .cover-preset { transition: none; } }