/* Sharing one item (owner, 15 Oct 2026): the framed picture as it will arrive, then what to include (js/share-pick.js). */
.sheet[data-name="share"] .lp-framed { display: grid; place-items: center; padding: 14px; border: 0; border-radius: 20px; background: var(--page); }
.sheet[data-name="share"] .lp-framed img { display: block; width: auto; max-width: 100%; max-height: 300px; border-radius: 14px; box-shadow: var(--shadow-card, 0 1px 0 #DCDDE0, 0 8px 22px rgba(17, 18, 20, .06)); }
/* A report travels with its wide picture (the day's pictures, the date, the read): shown whole, edge to edge. */
.sheet[data-name="share"] .lp-wide { padding: 0; overflow: hidden; }
.sheet[data-name="share"] .lp-wide img { width: 100%; max-height: none; border-radius: 20px; box-shadow: 0 0 0 1px var(--rule); }

.sheet[data-name="share"] .spick { margin: 14px 0 0; padding: 4px 0; border: 0; border-radius: 20px; background: var(--page); min-inline-size: 0; }
.sheet[data-name="share"] .spick legend { float: left; width: 100%; padding: 10px 14px 2px; font-size: 13px; font-weight: 600; color: var(--text2); }
.sheet[data-name="share"] .spick-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px; cursor: pointer; clear: both; }
.sheet[data-name="share"] .spick-row + .spick-row { border-top: 1px solid var(--rule); }
.sheet[data-name="share"] .spick-row input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.sheet[data-name="share"] .spick-box { flex: none; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--panel); box-shadow: inset 0 0 0 1.5px var(--line-strong); color: transparent; transition: background-color 160ms var(--ease-out, ease), box-shadow 160ms var(--ease-out, ease); }
.sheet[data-name="share"] .spick-box svg { width: 16px; height: 16px; transform: scale(.6); transition: transform 200ms var(--ease-out, ease); }
.sheet[data-name="share"] .spick-row input:checked + .spick-box { background: var(--ember); box-shadow: none; color: #FFFFFF; }
.sheet[data-name="share"] .spick-row input:checked + .spick-box svg { transform: none; }
.sheet[data-name="share"] .spick-row input:focus-visible + .spick-box { outline: 2px solid var(--ember); outline-offset: 2px; }
.sheet[data-name="share"] .spick-tx { display: flex; flex-direction: column; min-width: 0; }
.sheet[data-name="share"] .spick-tx b { font-size: 15.5px; line-height: 22px; font-weight: 500; color: var(--ink); }
.sheet[data-name="share"] .spick-tx small { font-size: 13px; line-height: 18px; color: var(--text2); }
.sheet[data-name="share"] .lnk em { font-style: normal; color: var(--ink); }
/* While the other link is made, the actions wait so nothing goes with the old one. */
.sheet[data-name="share"].spick-busy .share-primary, .sheet[data-name="share"].spick-busy .cpy, .sheet[data-name="share"].spick-busy .channels, .sheet[data-name="share"].spick-busy .cl { opacity: .45; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .sheet[data-name="share"] .spick-box, .sheet[data-name="share"] .spick-box svg { transition: none; } }

/* An article's page on Tellz: its picture under the byline, our read in Orchid (evidence), beside what it means to us. */
.gp-art-pic { width: 100%; margin: 0; border-radius: 16px; overflow: hidden; background: var(--wash); }
.gp-art-pic img { display: block; width: 100%; height: auto; max-height: 300px; object-fit: cover; }
.gp-read { width: 100%; padding: 14px; border-radius: 16px; background: var(--orchid-soft, #F3EDF8); }
.gp-read > b { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--orchid-ink, #704398); }
.gp-read p { margin-top: 6px; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--ink); }

/* The same two choices fit the desktop panel and the phone sheet. */
.share-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 12px; }
.share-two button { display: flex; min-width: 0; min-height: 52px; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: 12.5px; font-weight: 600; }
.share-two .ic { flex: none; width: 16px; height: 16px; }
@media (max-width: 339px) { .share-two { grid-template-columns: minmax(0, 1fr); } }

/* A shared page with no Tellz mark (SHARE_BRANDING off; owner, 19 Oct 2026: the sharer takes the credit): no wordmark in
   any top bar and no Sign up on the item; Log in stays for teammates, and one quiet line at the foot lets a visitor start
   their own (js/screens-outside.js joinPanel). */
.share-plain .lockup, .share-plain .w-meta .w-login { display: none !important; }
.gp-quiet { padding: 24px 16px 32px; text-align: center; }
.gp-quiet p { margin: 0; font-size: 13px; line-height: 20px; color: var(--text2); }
.gp-quiet .gp-link { min-height: 44px; font-size: 13px; }
.sheet[data-name="share"] .lp-words { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border: 0; border-radius: 20px; background: var(--page); }
.sheet[data-name="share"] .lp-words b { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--ink); }
.sheet[data-name="share"] .lp-words span { font-size: 14px; line-height: 20px; color: var(--text2); }

/* Save the original image without scrolling past the message and channels. */
.sheet[data-name="share"] .share-image-save { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: var(--share-save-hit, 44px); margin-top: 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink); font-size: 15px; font-weight: 500; }
.sheet[data-name="share"] .share-image-save:disabled { opacity: .6; cursor: wait; }
.sheet[data-name="share"] #share-link-hint[hidden] { display: none; }

/* The item was already viewed: sharing needs a reminder, choices and actions together. */
.sheet[data-name="share"]:has(.share-compact) { padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.sheet[data-name="share"]:has(.share-compact) .sheethead { flex-shrink: 0; margin: 8px 0 12px; }
.sheet[data-name="share"] .share-compact { flex-shrink: 0; }
.sheet[data-name="share"] .share-summary { display: flex; align-items: center; gap: 16px; }
.sheet[data-name="share"] .share-summary .lp { flex: 1; min-width: 0; border: 0; background: var(--page); }
.sheet[data-name="share"] .share-summary .lp:not(.lp-words) { flex: none; width: var(--share-thumb, 56px); }
.sheet[data-name="share"] .share-summary .lp-framed { height: var(--share-thumb, 56px); padding: 0; border-radius: 12px; }
.sheet[data-name="share"] .share-summary .lp-framed img { width: 100%; height: 100%; object-fit: contain; border-radius: 8px; box-shadow: none; }
.sheet[data-name="share"] .share-summary .lp-cov { min-height: 0; padding: 0; background: none; display: block; }
.sheet[data-name="share"] .share-summary .lp-cov > img, .sheet[data-name="share"] .share-summary .lp-mk { display: block; width: var(--share-thumb, 56px); height: var(--share-thumb, 56px); object-fit: contain; border-radius: 8px; }
.sheet[data-name="share"] .share-summary .lp-mk { display: grid; }
.sheet[data-name="share"] .share-summary .lp-mk svg { width: 28px; height: 28px; }
.sheet[data-name="share"] .share-summary .lp-tx, .sheet[data-name="share"] .share-summary .lp-meta { display: none; }
.sheet[data-name="share"] .share-summary .lp-words { padding: 0; background: none; border-radius: 0; }
.sheet[data-name="share"] .share-summary .lp-words b { font-size: 14px; line-height: 20px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sheet[data-name="share"] .share-summary .lp-words span { display: none; }
.sheet[data-name="share"] .share-summary .share-image-save { flex: 1; width: auto; margin: 0; }
.sheet[data-name="share"] .share-compact .spick { margin-top: 12px; padding: 0; background: none; }
.sheet[data-name="share"] .share-compact .spick legend { float: none; width: auto; padding: 0 0 8px; }
.sheet[data-name="share"] .share-compact .spick-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.sheet[data-name="share"] .share-compact .spick-row { min-height: var(--share-save-hit, 44px); gap: 8px; padding: 6px 10px; border: 1px solid var(--rule); border-radius: 12px; background: var(--page); }
.sheet[data-name="share"] .share-compact .spick-box { width: 20px; height: 20px; border-radius: 6px; }
.sheet[data-name="share"] .share-compact .spick-row input:checked + .spick-box { background: var(--jade); }
.sheet[data-name="share"] .share-compact .spick-tx b { font-size: 13px; line-height: 18px; }
.sheet[data-name="share"] .share-compact .spick-tx small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sheet[data-name="share"] .share-compact .msg2 { padding: 10px 12px; margin-top: 12px; border-radius: 16px; }
.sheet[data-name="share"] .share-compact .msg2 textarea { display: block; min-height: var(--share-message-height, 72px); max-height: var(--share-message-max, 192px); overflow-y: auto; overflow-x: hidden; overflow-wrap: anywhere; white-space: pre-wrap; }
.sheet[data-name="share"] .share-message-field { position: relative; min-width: 0; }
.sheet[data-name="share"] .share-compact .share-message-field.more::after { content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 24px; background: linear-gradient(transparent, var(--page)); pointer-events: none; }
.sheet[data-name="share"] .share-compact .lnk { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet[data-name="share"] .share-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sheet[data-name="share"] .share-actions .share-primary, .sheet[data-name="share"] .share-actions .cpy { min-width: 0; min-height: 48px; margin: 0; font-size: 15px; }
.sheet[data-name="share"] .share-compact .picnote, .sheet[data-name="share"] .share-compact .chl { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sheet[data-name="share"] .share-compact .chs { margin-top: 16px; }
.sheet[data-name="share"] .share-compact .chs .appic { width: 36px; height: 36px; }
.sheet[data-name="share"] .share-compact .chs .appic .ic { width: 22px; height: 22px; }
.sheet[data-name="share"] .share-compact .chs .ch { min-height: 54px; font-size: 10px; gap: 4px; }
.sheet[data-name="share"] .share-compact .cl { min-height: 44px; padding: 8px 12px; margin-top: 12px; font-size: 14px; }
.sheet[data-name="share"] .share-compact .cl em { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.sheet[data-name="share"] .share-access { margin-top: 4px; }
.sheet[data-name="share"] .share-access summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; list-style: none; cursor: pointer; font-size: 13px; color: var(--text2); }
.sheet[data-name="share"] .share-access summary::-webkit-details-marker { display: none; }
.sheet[data-name="share"] .share-access[open] summary .ic { transform: rotate(180deg); }
.sheet[data-name="share"] .share-access .lock { margin-top: 0; font-size: 13px; }

@media (max-width: 979px) {
  /* Eight lines with the default choices still fit a 390 by 844 phone. Keep every hit area intact. */
  .sheet[data-name="share"]:has(.share-compact) .sheethead { margin: 4px 0 8px; }
  .sheet[data-name="share"] .share-compact .spick { margin-top: 8px; }
  .sheet[data-name="share"] .share-compact .msg2 { margin-top: 8px; }
  .sheet[data-name="share"] .share-compact .share-actions { margin-top: 8px; }
  .sheet[data-name="share"] .share-compact .chs { margin-top: 12px; }
  .sheet[data-name="share"].share-overflow { overflow: hidden; }
  .sheet[data-name="share"].share-overflow .share-compact { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }
  .sheet[data-name="share"].share-overflow > .share-actions { flex-shrink: 0; margin-top: 0; padding-top: 8px; border-top: 1px solid var(--rule); background: var(--sheet); }
}
/* The desktop dialog retains its existing compact message height. */
@media (min-width: 980px) {
  .sheet[data-name="share"] .share-compact .msg2 textarea { max-height: var(--share-message-height, 72px); }
}