/* Share dialog (share.js) and the stripped-down look of an embed (?embed=1). */

/* ---------- embed: only the page's own content ---------- */
html.is-embed .nav,
html.is-embed .footer,
html.is-embed .page-head,
html.is-embed .h2h-credit,
html.is-embed .share-btn,
html.is-embed .export-actions,
html.is-embed .mt-back,
html.is-embed .results-filters {
    display: none !important;
}

html.is-embed main {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
    min-height: 0 !important;
}

html.is-embed .mt-page,
html.is-embed .results-page {
    padding-top: 12px;
    padding-bottom: 12px;
}

/* the credit an embed carries in place of the footer: a small pill at the end of the page, readable on any background */
.embed-credit {
    display: block;
    width: fit-content;
    margin: 6px 12px 10px auto;
    padding: 5px 12px;
    background: rgba(8, 10, 15, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 99px;
    color: #aab2c2;
    font: 600 12px/1.2 Inter, system-ui, sans-serif;
    text-decoration: none;
}
.embed-credit b { color: #aee875; font-weight: 800; }
.embed-credit:hover { border-color: #aee875; }

/* a see-through page for overlays: only the content is drawn */
html.is-transparent,
html.is-transparent body {
    background: transparent !important;
}

html.is-transparent body::before,
html.is-transparent body::after,
html.is-transparent .grid-lines,
html.is-transparent .glow {
    display: none !important;
}

/* ---------- the share button ---------- */
.share-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.share-btn svg {
    width: 15px;
    height: 15px;
}

/* ---------- the dialog ---------- */
.share-dialog {
    width: min(560px, calc(100vw - 24px));
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    padding: 0;
    background: var(--bg-2);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.share-dialog::backdrop { background: rgba(4, 6, 10, 0.78); }

.share-inner { padding: 22px 22px 20px; display: grid; gap: 12px; }

.share-inner h3 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: 22px; }
.share-inner h4 { margin: 10px 0 0; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.share-sub { margin: 0; font-size: 13px; color: var(--text-dim); }

.share-field { display: grid; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-dim); }
.share-field--small input { width: 120px; }
.share-row { display: flex; gap: 8px; }
.share-row input { flex: 1; min-width: 0; }

.share-field input,
.share-field textarea {
    width: 100%;
    padding: 8px 10px;
    background: var(--surface-3);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font: 500 13px var(--font-body);
}

.share-field textarea { resize: vertical; font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
.share-field input:focus,
.share-field textarea:focus { outline: none; border-color: var(--primary); }

.share-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-dim); }
.share-actions { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 4px; }

@media (max-width: 520px) {
    .share-row { flex-direction: column; }
}