/* The film's Share button and the sheet it opens under the film's buttons (share/app-share-sheet.js; the approved mock
   in docs/design/SHARE_LINK.md). Each row is a real button of at least 48px: its picture at the start side, its name,
   and under it the one line saying what it does. The rows that are the old Share button (button.share-btn) keep its
   fill while the film is fetched (app-layout.css): only their idle look is set here. */

#downloads .film-actions .share-open { flex: 1; min-width: 0; min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: .4em; margin: 0; padding: 10px 16px; font: inherit; font-size: 1rem; font-weight: 600; color: var(--dl-ink); background: var(--dl-todo); border: 1px solid var(--accent); border-radius: var(--r-pill); cursor: pointer; }
#downloads .film-actions .share-open[hidden] { display: none; }
#downloads .film-actions .share-open:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
#downloads .film-actions .share-open .share-choice-ico { position: static; width: 1.1em; height: 1.1em; }

#downloads .film-actions .share-sheet { flex: 1 1 100%; min-width: 0; box-sizing: border-box; margin: 2px 0 0; padding: 8px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-lg); box-shadow: 0 -4px 16px rgba(0, 0, 0, .12); }
#downloads .film-actions .share-sheet[hidden] { display: none; }
#downloads .film-actions .share-sheet-head { margin: 2px 6px 6px; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* One row: a button (a choice) or the notice's padlock line. The picture is placed at the start side, so the words
   keep their own flow -- the old Share button's label is redrawn whole on every change of state. */
#downloads .film-actions .share-sheet .share-row { position: relative; display: block; width: 100%; min-width: 0; min-height: 48px; box-sizing: border-box; margin: 0; padding: 10px 10px; padding-inline-start: 46px; font: inherit; font-size: .95rem; line-height: 1.3; text-align: start; color: var(--ink); border: 0; border-radius: var(--r-md); overflow-wrap: anywhere; }
#downloads .film-actions .share-sheet .share-row + .share-row { margin-top: 2px; }
#downloads .film-actions .share-sheet button.share-row { cursor: pointer; }
#downloads .film-actions .share-sheet .share-row:not(.preparing):not(.ready):not(.done) { background: transparent; }
#downloads .film-actions .share-sheet button.share-row:not(.preparing):not(.ready):not(.done):hover { background: var(--surface-hover); }
#downloads .film-actions .share-sheet .share-row.recommended:not(.done) { background: var(--selected-bg); }
#downloads .film-actions .share-sheet .share-row.done { background: var(--dl-saved); color: var(--dl-saved-ink); }
#downloads .film-actions .share-sheet .share-row.share-locked-why { background: var(--surface-2); }
#downloads .film-actions .share-sheet .share-row[hidden], #downloads .film-actions .share-sheet .share-choice-held { display: none; }
#downloads .film-actions .share-sheet button.share-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#downloads .film-actions .share-sheet .share-row > span:not(.share-detail) { font-weight: 700; }
#downloads .film-actions .share-sheet .share-row > .share-detail { display: block; margin-top: 2px; font-size: .8rem; font-weight: 400; line-height: 1.35; opacity: 1; }
#downloads .film-actions .share-sheet .share-row:not(.done) > .share-detail { color: var(--muted); }
#downloads .film-actions .share-sheet .share-row.preparing > .share-detail, #downloads .film-actions .share-sheet .share-row.ready > .share-detail { color: inherit; }
#downloads .film-actions .share-sheet .share-row .film-shape { font-weight: 600; }

.share-choice-ico { display: inline-block; flex: none; font-style: normal; pointer-events: none; }
.share-choice-ico[hidden] { display: none; }
.share-choice-ico svg { display: block; width: 100%; height: 100%; }
#downloads .film-actions .share-sheet .share-row > .share-choice-ico { position: absolute; inset-inline-start: 10px; top: 10px; width: 26px; height: 26px; }

#downloads .film-actions .share-locked[hidden] { display: none; }
#downloads .film-actions .share-buy-now { display: flex; align-items: center; justify-content: center; width: calc(100% - 12px); min-height: 48px; box-sizing: border-box; margin: 8px 6px 4px; padding: 10px 16px; font: inherit; font-weight: 700; color: var(--on-accent); background: var(--accent); border: 1px solid var(--accent); border-radius: var(--r-pill); cursor: pointer; }
#downloads .film-actions .share-buy-now[hidden] { display: none; }
#downloads .film-actions .share-buy-now:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

#downloads .film-actions .share-said { margin: 6px 6px 2px; font-size: .85rem; color: var(--ink); overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
#downloads .film-actions .share-said[hidden] { display: none; }