/* Contourly — 2i share sheet. Owned by Wave-2 agent B.
   The sheet + tabs + icons + toast live in app.css §17/§22; this file owns only
   the sheet's own layout head/actions and the responsive presentation:
   a bottom sheet on mobile, a centered modal card on desktop (never a full-width
   bottom bar). Scoped to `.ct-share-sheet` so other overlays keep the bottom sheet. */

/* Cap height + scroll so a tall 9:16 story preview never pushes the sheet past
   the viewport (the foundation .ct-sheet is bottom-anchored on mobile). */
.ct-share-sheet { max-height: 92dvh; overflow-y: auto; }

.ct-share-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 14px;
}
.ct-share-head .ct-share-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-share-head .ct-tabs { flex: none; }

/* The card preview and the channel/action bar share ONE centered width band so
   their outer edges line up (the preview used to be a touch narrower). The band
   caps at the container width, so a narrow sheet never overflows sideways. */
.ct-share-sheet .ct-share-preview { width: min(316px, 100%); margin: 24px auto 0; }
.ct-share-sheet .ct-share-actions {
  width: min(316px, 100%);
  margin: 28px auto 0;
  flex-wrap: nowrap;                 /* the band fits all 5 tiles — never wrap */
  justify-content: space-between;    /* spread tiles edge-to-edge across the band */
}

/* The 9:16 preview is tall — cap its height so the whole sheet stays in view. */
.ct-share-preview img.ct-cardprev--story { max-height: 46vh; width: auto; margin: 0 auto; }

/* Error fallback fills the sheet width (drop the 274px cap + the -1.2° tilt). */
.ct-share-preview--error { width: auto; transform: none; margin-top: 16px; }

/* ==========================================================================
   TABLET / DESKTOP ≥768 — centered modal card, not a full-width bottom bar.
   ========================================================================== */
@media (min-width: 768px) {
  .ct-share-sheet {
    left: 50%; right: auto; bottom: auto; top: 50%;
    transform: translate(-50%, -50%);
    width: min(440px, calc(100vw - 48px));
    max-height: calc(100dvh - 48px);
    border: var(--ct-bw) solid var(--ct-ink);
    border-radius: var(--ct-r-sheet);
    box-shadow: 0 12px 0 rgba(23, 22, 18, .22);
    /* equal top + right inset so the format toggle sits symmetrically in the corner */
    padding: 24px 24px 28px;
  }
  .ct-share-sheet .ct-sheet__handle { display: none; }
  /* No handle on desktop → drop the handle-clearance margin so the toggle's top
     inset equals padding-top (== padding-right); gives the header more height too. */
  .ct-share-sheet .ct-share-head { margin-top: 0; }
  .ct-share-preview img.ct-cardprev--story { max-height: 56vh; }
}