/* The Share sheet (articleapp/share.js, articleapp/share_sheet.html): a <dialog> over the page, a bottom sheet on
   phones. Brand tokens only (static/brand/tokens.css), so dark mode follows html.dark; logical properties, so Arabic
   needs nothing in rtl.css. Built like the agent's consent dialog (agentapp/agent.css .pt-consent). */
.pt-share { width: min(32rem, calc(100vw - 2rem)); max-height: min(44rem, calc(100dvh - 2rem)); padding: 0;
    border: 1px solid var(--pt-border); border-radius: var(--pt-radius-lg); background: var(--pt-surface); color: var(--pt-text);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35); overflow: hidden; }
.pt-share[open] { display: flex; flex-direction: column; }
.pt-share::backdrop { background: rgba(0, 0, 0, .55); }
.pt-share-body { overflow-y: auto; display: grid; gap: .85rem; padding: 1rem 1.25rem 0; font: 400 .9375rem/1.55 var(--pt-font-text); }
.pt-share-body[aria-busy="true"] { opacity: .6; }
.pt-share-body form { display: grid; gap: .85rem; margin: 0; }
.pt-share-body p { margin: 0; }

.pt-share-head { display: flex; align-items: center; gap: .5rem; }
.pt-share-head h2 { flex: 1; margin: 0; font: 700 1.15rem/1.35 var(--pt-font-text); color: var(--pt-text); }
.pt-share-head h2:focus { outline: none; }

.pt-share-media { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.pt-share-media img, .pt-share-cover { flex: none; width: 5.5rem; height: 5.5rem; object-fit: cover;
    border-radius: var(--pt-radius-md); background: var(--pt-surface-2); }
.pt-share-media .pt-tile { width: 5.5rem; height: 5.5rem; font-size: 1.5rem; }   /* a song without a cover */
.pt-share-cover { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
    padding: .35rem; text-align: center; color: var(--pt-text-muted); font-size: .75rem; line-height: 1.3; overflow: hidden; }
.pt-share-cover .material-icons { font-size: 1.25rem; }
/* Long single words (German "Ausgeblendet:") break inside the 5.5rem square instead of being clipped. */
.pt-share-cover strong { max-width: 100%; color: var(--pt-text); font-weight: 600; overflow-wrap: anywhere; hyphens: auto; }
.pt-share-text { display: grid; gap: .25rem; min-width: 0; }
.pt-share-caption { color: var(--pt-text-muted); font-size: .8125rem; overflow-wrap: anywhere; }
/* The post the creation was made from (genapp/components/remix_credit.html, articleapp.lineage, decision 8). */
.pt-share-credit { justify-self: start; display: inline-flex; align-items: center; gap: .35rem; max-width: 100%;
    min-height: 2.75rem; padding: .3rem .85rem; border: 1px solid var(--pt-border); border-radius: var(--pt-radius-pill);
    background: var(--pt-surface); color: var(--pt-text); font-size: .8125rem; text-decoration: none; }
.pt-share-credit:hover { border-color: var(--pt-border-strong); color: var(--pt-text); }
.pt-share-credit:focus-visible { outline: 2px solid var(--pt-focus-ring); outline-offset: 2px; }
.pt-share-credit .material-icons { font-size: 1rem; color: var(--pt-accent-text); }
.pt-share-credit > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pt-share-note { padding: .55rem .75rem; border-radius: var(--pt-radius-sm); background: var(--pt-accent-soft); color: var(--pt-text);
    font-size: .8125rem; }
.pt-share-note a { color: var(--pt-text); text-decoration: underline; }

.pt-share-field { display: grid; gap: .35rem; }
.pt-share-field > label { margin: 0; font-weight: 600; font-size: .875rem; color: var(--pt-text); }
.pt-share-body input[type="text"], .pt-share-body select, .pt-share-body textarea {
    width: 100%; font-size: max(16px, 1rem); background-color: var(--pt-surface); color: var(--pt-text);
    border: 1px solid var(--pt-border-strong); border-radius: var(--pt-radius-sm); }
.pt-share-body textarea { margin-top: .5rem; resize: vertical; }
.pt-share-body .pt-title-suggest { margin: .25rem 0 0; }

.pt-share-more summary { cursor: pointer; color: var(--pt-text-muted); font-size: .875rem; }
.pt-share-more summary:hover { color: var(--pt-text); }
.pt-share-body .pt-share-help { margin-top: .35rem; }

.pt-share-public, .pt-share-meta { color: var(--pt-text-muted); font-size: .8125rem; }
.pt-share-public { display: flex; gap: .4rem; align-items: flex-start; }
.pt-share-public .material-icons { font-size: 1rem; }

/* "Keep the prompt and settings private" (decision 9): a plain box, neither pushed nor hidden; the line under it says
   what the choice means (articleapp/prompt_privacy.js swaps it). */
.pt-share-privacy { display: grid; gap: .45rem; padding: .7rem .8rem; border: 1px solid var(--pt-border); border-radius: var(--pt-radius-md); }
.pt-share-privacy [hidden] { display: none; }
.pt-share-check { display: flex; align-items: flex-start; gap: .55rem; margin: 0; font-size: .875rem; font-weight: 600; color: var(--pt-text);
    cursor: pointer; }
.pt-share-check input { flex: none; width: 1.1rem; height: 1.1rem; margin: .15rem 0 0; accent-color: var(--pt-text); }
/* Korean breaks between words; a long unbroken token still wraps. */
.pt-share-check span, .pt-share-public > span:last-child, .pt-share-done p { min-width: 0; word-break: keep-all;
    overflow-wrap: anywhere; }
.pt-share-error, .pt-share-message[role="alert"] { color: var(--pt-danger); }
.pt-share-error { font-size: .8125rem; }
.pt-share-errors:empty { display: none; }
.pt-share-done { display: grid; gap: .5rem; }
.pt-share-done a { color: var(--pt-accent-text); }

.pt-share-actions { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap;
    margin-inline: -1.25rem; padding: .75rem 1.25rem 1rem; background: var(--pt-surface); border-top: 1px solid var(--pt-border); }

/* Publishing several at once (articleapp/share_many.html, share_many.js): the same sheet, one row per creation, each
   saying how it went under its form. */
.pt-many { width: min(40rem, calc(100vw - 2rem)); }
.pt-many-list { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.pt-many-row { display: flex; align-items: flex-start; gap: .75rem; padding: .75rem; border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md); background: var(--pt-surface); }
.pt-many-row.is-done { border-color: var(--pt-border-strong); }
.pt-many-row.is-failed { border-color: var(--pt-danger); }
.pt-many-media { flex: none; }
.pt-many-media img, .pt-many-media .pt-share-cover, .pt-many-media .pt-tile { width: 4.5rem; height: 4.5rem; object-fit: cover;
    border-radius: var(--pt-radius-sm); background: var(--pt-surface-2); }
.pt-many-media .pt-tile { font-size: 1.25rem; }
.pt-many-media .pt-share-cover { font-size: .6875rem; }
.pt-many-body { display: grid; gap: .5rem; flex: 1; min-width: 0; }
.pt-many-body form, .pt-many-body fieldset { display: grid; gap: .6rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.pt-many-body fieldset:disabled { opacity: .6; }
.pt-many-reason { color: var(--pt-text-muted); font-size: .875rem; }
.pt-many-reason a, .pt-many-status a { color: var(--pt-accent-text); }
.pt-many-status { font-size: .8125rem; font-weight: 600; color: var(--pt-text); }
.pt-many-status:empty { display: none; }
.pt-many-row.is-failed .pt-many-status { color: var(--pt-danger); }
.pt-many-summary { flex: 1 1 100%; margin: 0; font-size: .875rem; color: var(--pt-text); }
.pt-many-summary:empty { display: none; }

/* The Write page's strip (articleapp/components/studio_strip.html): recent creations not posted yet, each opening the
   Share sheet. One row that scrolls sideways on phones; a creation published from it gets a check until Undo. */
.pt-strip { margin: 0 0 1.75rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--pt-border); border-radius: var(--pt-radius-lg);
    background: var(--pt-surface); color: var(--pt-text); }
.pt-strip-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.pt-strip-title { display: flex; align-items: center; gap: .5rem; margin: 0; font: 600 1.05rem/1.35 var(--pt-font-text); color: var(--pt-text); }
.pt-strip-all { font-size: .875rem; font-weight: 600; color: var(--pt-accent-text); }
.pt-strip-all:hover { color: var(--pt-accent-text); }
.pt-strip-lead { margin: .25rem 0 .85rem; color: var(--pt-text-muted); font-size: .875rem; }
.pt-strip-title, .pt-strip-lead { word-break: keep-all; overflow-wrap: anywhere; }   /* Korean breaks between words */
.pt-strip-list { display: flex; gap: .6rem; margin: 0; padding: .15rem .15rem .35rem; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.pt-strip-list li { flex: none; }
.pt-strip-item { position: relative; display: flex; align-items: center; justify-content: center; width: 6.5rem; height: 6.5rem;
    border-radius: var(--pt-radius-md); overflow: hidden; background: var(--pt-surface-2); color: var(--pt-text-muted); text-decoration: none; }
.pt-strip-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pt-strip-item > .pt-tile:not(.pt-strip-kind) { width: 2.5rem; height: 2.5rem; font-size: 1rem; }   /* a song without a cover */
.pt-strip-item:focus-visible { outline: 2px solid var(--pt-focus-ring); outline-offset: 2px; }
.pt-strip-cover { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .35rem; text-align: center;
    font-size: .6875rem; line-height: 1.3; }
.pt-strip-cover .material-icons { font-size: 1.25rem; }
.pt-strip-kind { position: absolute; inset-block-end: .35rem; inset-inline-start: .35rem; }
.pt-strip-done { position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .55); color: var(--pt-paper); }
.pt-strip-done .material-icons { font-size: 2rem; }
.pt-strip-item.is-published .pt-strip-done { display: flex; }

@media (max-width: 575px) {
    .pt-share { width: 100vw; max-width: 100vw; max-height: 92dvh; margin: auto 0 0; border-radius: var(--pt-radius-lg) var(--pt-radius-lg) 0 0; }
    .pt-share-actions .pt-btn { flex: 1; }
    .pt-many-media img, .pt-many-media .pt-share-cover, .pt-many-media .pt-tile { width: 3.5rem; height: 3.5rem; }
    .pt-many-row { padding: .6rem; gap: .6rem; }
    .pt-strip { padding: .85rem .85rem 1rem; }
    .pt-strip-item { width: 5.5rem; height: 5.5rem; }
}