/* =============================================================================
   69-physical-media.css
   Profile → Physical Media page. The page shell, topbar and segmented toggle are
   inherited from `.shelfd-diary-page` / `.shelfd-stats-seg` (06-profile.css), so
   only the format sections and the poster grid are defined here.
   ============================================================================= */

.shelfd-physical-media-page .shelfd-diary-page-scroll {
  padding: calc(14 * var(--shelfd-px, 1px)) calc(16 * var(--shelfd-px, 1px)) calc(28 * var(--shelfd-px, 1px));
}

/* ----- Topbar: bare 24px chevron left, centred title, ＋ right -------------
   The base `.shelfd-diary-page-back` (06-profile.css:7873 — the last of three
   unscoped redefinitions, which is the one that actually wins) dresses the
   back button as a pill: background, 1px border, 8px/13px padding. All three
   are cleared here. These selectors are (0,2,0) against that (0,1,0) base and
   this file loads after 06-profile.css, so no !important is required.
   The title is taken out of flow and pinned across the full bar so it centres
   on the PAGE, not in the space left between the two buttons. Its top/bottom
   mirror the topbar's own padding expression verbatim, so the two agree no
   matter what env(safe-area-inset-top) resolves to (it is 0 in the Capacitor
   webview). */
.shelfd-physical-media-page .shelfd-diary-page-topbar { position: relative; }
.shelfd-physical-media-page .shelfd-diary-page-title {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(10px + env(safe-area-inset-top, 0px));
  bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.shelfd-physical-media-page .shelfd-diary-page-back {
  padding: 0;
  border: 0;
  background: transparent;
  color: #f5f5f7;
  position: relative;
  z-index: 2;
}
.shelfd-physical-media-page .shelfd-diary-page-back-icon {
  width: calc(24 * var(--shelfd-px, 1px));
  height: calc(24 * var(--shelfd-px, 1px));
  display: block;
}
.shelfd-pm-add {
  flex: 0 0 auto;
  margin-left: auto;
  width: calc(24 * var(--shelfd-px, 1px));
  height: calc(24 * var(--shelfd-px, 1px));
  padding: 0;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f5f5f7;
  cursor: pointer;
  position: relative;
  z-index: 2;
  -webkit-tap-highlight-color: transparent;
  transition: transform 140ms ease, opacity 140ms ease;
}
.shelfd-pm-add svg { width: 100%; height: 100%; display: block; }
.shelfd-pm-add:active { transform: scale(0.9); opacity: 0.7; }

/* ----- ＋ add sheet (reuses .mylist-card-menu-* chrome) ------------------- */
/* id-scoped: a bare `input[type=text]` inherits a legacy black-box style app-
   wide, which an unscoped class cannot cancel. */
#shelfd-pm-add-search {
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 calc(8 * var(--shelfd-px, 1px));
  padding: calc(11 * var(--shelfd-px, 1px)) calc(13 * var(--shelfd-px, 1px));
  border: 1px solid rgba(255, 255, 255, 0.075);
  border-radius: calc(11 * var(--shelfd-px, 1px));
  background: rgba(255, 255, 255, 0.035);
  color: #f5f5f7;
  font: 400 calc(15 * var(--shelfd-px, 1px))/1.2 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
#shelfd-pm-add-search::placeholder { color: rgba(235, 232, 244, 0.42); }
/* Sheet holds a FIXED 82% of the viewport regardless of how many results are
   showing, so it never resizes under the user as they type. dvh first (it
   excludes the collapsing browser chrome on mobile) with a vh fallback for
   engines that don't support it. */
#shelfd-pm-add-overlay .mylist-card-menu-sheet {
  height: 82vh;
  height: 82dvh;
  display: flex;
  flex-direction: column;
}
.shelfd-pm-add-list {
  flex: 1 1 auto;
  /* A flex child will not shrink below its content without this, which is what
     lets the grid scroll inside the fixed-height sheet instead of overflowing. */
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Poster tile as a button — strip the UA chrome, keep the page's tile look. */
.shelfd-pm-pick {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 140ms ease;
}
.shelfd-pm-pick:active { transform: scale(0.96); }
/* Multi-select state — a lavender ring on the poster plus a tinted caption, so
   a batch of picks reads at a glance without adding a checkbox to every tile. */
.shelfd-pm-pick.is-selected .shelfd-pm-poster {
  box-shadow: inset 0 0 0 2px #c4b5fd;
}
.shelfd-pm-pick.is-selected .shelfd-pm-tile-title { color: #c4b5fd; }

.shelfd-pm-add-foot {
  flex: 0 0 auto;
  padding-top: calc(10 * var(--shelfd-px, 1px));
}
.shelfd-pm-add-foot[hidden] { display: none; }
#shelfd-pm-add-confirm {
  width: 100%;
  min-height: calc(46 * var(--shelfd-px, 1px));
  border: 0;
  border-radius: 999px;
  background: #c4b5fd;
  color: #17131f;
  font: 500 calc(15 * var(--shelfd-px, 1px))/1 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  transition: transform 140ms ease, opacity 140ms ease;
}
#shelfd-pm-add-confirm:disabled {
  opacity: 0.35;
  cursor: default;
}
#shelfd-pm-add-confirm:not(:disabled):active { transform: scale(0.97); }
.shelfd-pm-add-empty {
  padding: calc(14 * var(--shelfd-px, 1px)) calc(4 * var(--shelfd-px, 1px));
  color: rgba(235, 232, 244, 0.55);
  font: 400 calc(13.5 * var(--shelfd-px, 1px))/1.4 'Sohne', 'DM Sans', sans-serif;
  text-align: center;
}

.shelfd-pm-section { margin: 0 0 calc(22 * var(--shelfd-px, 1px)); }
.shelfd-pm-section:last-child { margin-bottom: 0; }

.shelfd-pm-section-title {
  display: flex;
  align-items: center;
  gap: calc(7 * var(--shelfd-px, 1px));
  margin: 0 0 calc(10 * var(--shelfd-px, 1px));
  color: #ffffff;
  font: 500 calc(15 * var(--shelfd-px, 1px))/1 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0;
}
.shelfd-pm-section-title span {
  color: rgba(216, 208, 233, 0.58);
  font-size: calc(13 * var(--shelfd-px, 1px));
  font-weight: 400;
}

.shelfd-pm-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(10 * var(--shelfd-px, 1px));
}

.shelfd-pm-tile { min-width: 0; }

/* Poster box is sized by PERCENTAGE PADDING (150% = a 2:3 poster), never by
   `aspect-ratio`. Percentage padding always resolves against the element's
   WIDTH, so no engine can resolve it height-first — the failure mode that
   collapsed grid items to a 4x2px speck on iOS 26 WebKit (see the v15.154
   fullbleed-clip incident). Do not "simplify" this to aspect-ratio. */
.shelfd-pm-poster {
  width: 100%;
  padding-top: 150%;
  border-radius: calc(4 * var(--shelfd-px, 1px));
  background-color: #16151d;
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.shelfd-pm-tile-title {
  margin-top: calc(6 * var(--shelfd-px, 1px));
  color: rgba(248, 244, 255, 0.86);
  font: 400 calc(12 * var(--shelfd-px, 1px))/1.25 'Sohne', 'DM Sans', sans-serif;
  letter-spacing: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 721px) {
  .shelfd-pm-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}