/* Collect album Studio refinements.
   Loaded after collect.css so this focused layer can evolve the owner workspace
   without changing the public album or the shared Collect component grammar. */

/* Keep the album identity and its progress summary in separate, resilient
   tracks. The StatGroup note is a fourth child, so it needs a real grid row
   instead of participating in the metric flex row. */
.collect-root [data-collect-album-shell] > .album-head {
  grid-template-columns: minmax(0, 1fr) minmax(26rem, 30rem);
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}

.collect-root [data-collect-album-shell] > .album-head .album-head-copy,
.collect-root [data-collect-album-shell] > .album-head .album-head-stats {
  min-width: 0;
}

.collect-root [data-collect-album-shell] > .album-head .album-head-stats {
  padding-top: 0;
  padding-bottom: 2px;
}

.collect-root [data-collect-album-shell] > .album-head h1 {
  max-width: 15ch;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.collect-root [data-collect-album-shell] > .album-head .stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 22px;
  width: 100%;
  align-items: end;
  justify-content: initial;
}

.collect-root [data-collect-album-shell] > .album-head .stat {
  min-width: 0;
}

.collect-root [data-collect-album-shell] > .album-head .stat .n {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.collect-root [data-collect-album-shell] > .album-head .stat .l {
  white-space: nowrap;
}

.collect-root [data-collect-album-shell] > .album-head .stats-empty-note {
  grid-column: 1 / -1;
  max-width: none;
  margin: 0;
}

/* Management is an editing surface, not a second dashboard. Keep its context
   compact and let the paper object carry the visual weight. */
.collect-root [data-collect-album-shell].is-editing .album-viewer-bar {
  gap: 10px 20px;
  margin-bottom: 14px;
  padding-bottom: 13px;
}

.collect-root [data-collect-album-shell].is-editing .album-page::after {
  display: none;
}

.collect-root [data-collect-album-shell].is-editing > .album-purchase-row-owner {
  display: none;
}

/* Warm paper command strip. Only Done is a filled orange action; editing
   modes and utilities remain neutral and are grouped by proximity. */
.collect-root [data-collect-album-shell].is-editing .studio-edit-bar {
  position: sticky;
  top: 8px;
  z-index: 1300;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  width: 100%;
  min-height: 60px;
  margin: 0 0 18px;
  padding: 7px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--sm-brown) 20%, var(--sm-border));
  border-radius: 11px;
  background: color-mix(in srgb, var(--sm-card) 82%, var(--sm-cream) 18%);
  color: var(--sm-text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 12px 30px -25px rgba(60, 30, 0, .5);
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-primary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 2px;
  padding: 3px;
  overflow: visible;
  border: 1px solid color-mix(in srgb, var(--sm-brown) 13%, var(--sm-border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--sm-brown) 5%, transparent);
  flex-wrap: nowrap;
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-primary form,
.collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-overflow,
.collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-exit {
  flex: 0 0 auto;
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-hint {
  display: none;
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar button,
.collect-root [data-collect-album-shell].is-editing .studio-edit-bar a[data-component="button"] {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--sm-text);
  line-height: 1.15;
  white-space: nowrap;
  transition:
    background-color .16s ease,
    border-color .16s ease,
    color .16s ease,
    transform .08s ease;
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar [data-studio-edit-pages] {
  border-color: color-mix(in srgb, var(--sm-brown) 18%, var(--sm-border));
  background: var(--sm-card);
  color: var(--sm-text);
  box-shadow: 0 2px 8px -6px rgba(60, 30, 0, .45);
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar [data-studio-open-theme],
.collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-carve-btn,
.collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-more-toggle {
  border-color: transparent;
  background: transparent;
  color: var(--sm-text-2);
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar [data-studio-pdf-uncarve],
.collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-more-toggle {
  border-color: var(--sm-border-2);
  color: var(--sm-muted);
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-more-toggle {
  width: 44px;
  height: 44px;
  padding: 0;
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar [data-collect-edit-done] {
  border-color: var(--sm-orange);
  background: var(--sm-orange);
  color: #fff;
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--sm-orange) 72%, transparent);
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar button:active,
.collect-root [data-collect-album-shell].is-editing .studio-edit-bar a[data-component="button"]:active {
  transform: translateY(1px);
}

.collect-root [data-collect-album-shell].is-editing .studio-edit-bar button:focus-visible,
.collect-root [data-collect-album-shell].is-editing .studio-edit-bar a[data-component="button"]:focus-visible {
  outline: 3px solid var(--sm-orange);
  outline-offset: 2px;
}

@media (hover: hover) {
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar [data-studio-edit-pages]:hover,
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar [data-studio-open-theme]:hover,
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-carve-btn:hover,
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-more-toggle:hover {
    border-color: color-mix(in srgb, var(--sm-brown) 24%, var(--sm-border));
    background: color-mix(in srgb, var(--sm-card) 74%, var(--sm-cream) 26%);
    color: var(--sm-text);
    opacity: 1;
  }

  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar [data-collect-edit-done]:hover {
    border-color: var(--sm-orange-2);
    background: var(--sm-orange-2);
    color: #fff;
  }
}

/* The inspector is contextual: the empty panel and its unused grid track stay
   collapsed until the controller marks a real sticker selection. */
.collect-root [data-collect-album-shell].is-editing .album-workspace {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.collect-root [data-collect-album-shell].is-editing .album-workspace:has(> .sticker-properties-panel.has-selection) {
  grid-template-columns: minmax(0, 1fr) clamp(272px, 24vw, 304px);
  gap: 24px;
}

.collect-root [data-collect-album-shell].is-editing .sticker-properties-panel {
  display: none;
}

.collect-root [data-collect-album-shell].is-editing .sticker-properties-panel.has-selection {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 304px;
  border-color: color-mix(in srgb, var(--sm-brown) 18%, var(--sm-border));
  background: color-mix(in srgb, var(--sm-card) 92%, var(--sm-cream) 8%);
}

/* On wide workspaces the command strip remains global to the editor, even
   when a contextual column opens. The panel begins below the strip, so modes,
   utilities and Done never compete with or clip behind the inspector. */
@media (min-width: 68.0625rem) {
  .collect-root [data-collect-album-shell].is-editing .album-workspace:has(> .sticker-properties-panel.has-selection) .studio-edit-bar {
    width: calc(100% + 24px + clamp(272px, 24vw, 304px));
  }

  .collect-root [data-collect-album-shell].is-editing .album-workspace:has(> .sticker-properties-panel.has-selection) > .sticker-properties-panel {
    margin-top: 78px;
  }
}

.collect-root [data-collect-album-shell].is-editing .sticker-properties-panel:focus-visible,
.collect-root [data-collect-album-shell].is-editing .sticker-properties-panel :is(button, a, input, select):focus-visible {
  outline: 3px solid var(--sm-orange);
  outline-offset: 2px;
}

.collect-root [data-collect-album-shell].is-editing [data-collect-sticker].selected {
  outline-color: var(--sm-brown);
}

.collect-root [data-collect-album-shell].is-editing .editable {
  background: color-mix(in srgb, var(--sm-cream) 72%, transparent);
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--sm-brown) 28%, transparent);
}

.collect-root [data-collect-album-shell].is-editing .editable:focus-visible {
  outline: 3px solid var(--sm-orange);
  outline-offset: 2px;
  background: var(--sm-card);
  box-shadow: none;
}

/* Give the imported album room to read as a physical object. The cover uses
   its source aspect ratio, so changing the cap scales height proportionally. */
.collect-root [data-collect-album-shell].is-editing .album-workspace-main > .book,
.collect-root [data-collect-album-shell].is-editing .album-workspace-main .book-stage {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
}

.collect-root [data-collect-album-shell].is-editing .book.js-ready.is-closed .book-closed-cover,
.collect-root [data-collect-album-shell].is-editing .book:not(.js-ready) .book-closed-cover,
.collect-root [data-collect-album-shell].is-editing .book .book-closed-cover {
  width: 100%;
  max-width: min(580px, 100%);
}

/* The header reflows before either track becomes cramped. */
@media (max-width: 64rem) {
  .collect-root [data-collect-album-shell] > .album-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }

  .collect-root [data-collect-album-shell] > .album-head h1 {
    max-width: 18ch;
  }

  .collect-root [data-collect-album-shell] > .album-head .album-head-stats {
    width: min(100%, 42rem);
  }
}

/* Tablet: the selected inspector becomes a non-modal side drawer. It remains
   dismissible through its native close button and does not reorder the book. */
@media (min-width: 47.5625rem) and (max-width: 68rem) {
  .collect-root [data-collect-album-shell].is-editing .album-workspace:has(> .sticker-properties-panel.has-selection) {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .collect-root [data-collect-album-shell].is-editing .sticker-properties-panel.has-selection {
    position: fixed;
    inset: 16px 16px auto auto;
    z-index: 1340;
    width: min(304px, calc(100vw - 32px));
    max-width: none;
    max-height: calc(100dvh - 32px);
    box-shadow: 0 28px 70px -24px rgba(60, 30, 0, .48);
    overscroll-behavior: contain;
  }
}

/* Phone: keep Done visible, let the command modes wrap as one group, and
   stack the selected inspector after the canvas instead of covering it. */
@media (max-width: 47.5rem) {
  .collect-root [data-collect-album-shell] > .album-head .stats {
    gap: 10px 12px;
  }

  .collect-root [data-collect-album-shell] > .album-head .stat .n {
    font-size: clamp(25px, 8vw, 32px);
  }

  .collect-root [data-collect-album-shell] > .album-head .stat .l {
    white-space: normal;
  }

  .collect-root [data-collect-album-shell].is-editing .album-viewer-bar {
    margin-bottom: 12px;
  }

  .collect-root [data-collect-album-shell].is-editing .album-viewer-actions {
    width: 100%;
  }

  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar {
    top: 4px;
    margin-bottom: 14px;
  }

  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-primary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 3px;
  }

  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-primary > *,
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-primary form {
    min-width: 0;
  }

  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-primary > button,
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-primary > a[data-component="button"],
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-primary form > button {
    width: 100%;
    justify-content: flex-start;
    padding-inline: 8px;
    font-size: 12px;
    text-align: start;
    white-space: normal;
  }

  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar .seb-primary .seb-overflow {
    justify-self: start;
  }

  .collect-root [data-collect-album-shell].is-editing .album-workspace:has(> .sticker-properties-panel.has-selection) {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .collect-root [data-collect-album-shell].is-editing .sticker-properties-panel.has-selection {
    position: relative;
    top: auto;
    width: 100%;
    max-width: none;
    max-height: none;
    box-shadow: 0 16px 38px -28px rgba(60, 30, 0, .42);
  }

  .collect-root [data-collect-album-shell].is-editing .book.js-ready.is-closed .book-closed-cover,
  .collect-root [data-collect-album-shell].is-editing .book:not(.js-ready) .book-closed-cover,
  .collect-root [data-collect-album-shell].is-editing .book .book-closed-cover {
    max-width: min(520px, 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar button,
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar a[data-component="button"],
  .collect-root [data-collect-album-shell].is-editing .sticker-properties-panel {
    transition: none;
  }

  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar button:active,
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar a[data-component="button"]:active {
    transform: none;
  }
}

@media (forced-colors: active) {
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar button:focus-visible,
  .collect-root [data-collect-album-shell].is-editing .studio-edit-bar a[data-component="button"]:focus-visible,
  .collect-root [data-collect-album-shell].is-editing .sticker-properties-panel:focus-visible,
  .collect-root [data-collect-album-shell].is-editing .sticker-properties-panel :is(button, a, input, select):focus-visible,
  .collect-root [data-collect-album-shell].is-editing .editable:focus-visible {
    outline-color: Highlight;
  }
}