/* Shared styles for the two share-flow pages: /welcome and /share.
 *
 * Both pages render the same "story image preview + printable flyer +
 * QR code + join URL" surface, so their button skins, toggle styles,
 * and content rules are shared verbatim. Before this file existed, both
 * pages had inline <style> blocks duplicating the same rules — a fix to
 * one would silently drift from the other. (The lightbox overlay styles
 * live in common.css, the single source of truth for every consumer.)
 *
 * Page-specific rules (welcome's step-numbers, done-section,
 * tagline-callout; share's narrower media-query breakpoint) stay in
 * each page's own inline <style> block.
 *
 * Loaded via <link rel="stylesheet"> AFTER common.css and BEFORE the
 * page's inline <style>, so the cascade priority lands as:
 *   common.css → share.css → inline page <style>
 */

/* ── Step content typography ───────────────────────────────────── */
.step-content p { font-size: 15px; color: var(--color-body); line-height: 1.6; margin-bottom: 12px; }
.step-content p:last-child { margin-bottom: 0; }
.step-content h3 { font-size: 15px; font-weight: 700; color: var(--color-ink); margin-top: 20px; margin-bottom: 6px; }
.icon-heading { display: flex; align-items: center; gap: 10px; }
.step-icon { flex-shrink: 0; stroke-width: 40; color: var(--color-gray-600); }

/* ── Broadcast / join URL display ──────────────────────────────── */
.broadcast-wrap { max-width: 420px; margin-left: auto; margin-right: auto; margin-top: 20px; }
.url-row { display: flex; gap: 8px; align-items: stretch; margin-bottom: 16px; max-width: 420px; margin-left: auto; margin-right: auto; }
.url-clip { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── QR code section ───────────────────────────────────────────── */
.qr-section { display: flex; align-items: center; gap: 20px; justify-content: center; }
.qr-section .btn-copy, .qr-section .btn-outline { padding: 12px 16px; font-size: 15px; }
.qr-img { width: 88px; height: 88px; border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg); display: block; }

/* ── Buttons ────────────────────────────────────────────────────── */
/* Page-level override of common.css's .btn-action default — the
 * share-flow context wants taller, wider buttons than the standard
 * action button. Both pages use this override so it's shared here. */
.btn-action { padding: 12px 24px; }
.btn-post { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none; font-family: inherit; }
/* The feed row's "Copy link for comment" is a smaller, secondary control
 * directly under Post to Feed (owner call 2026-10-08): the page font (a bare
 * <button> falls back to the system face, as .btn-post's font-family above
 * exists to undo) at 13px, ~30px tall on desktop. On a touch-primary device
 * common.css's (hover: none) touch-target bump still lifts every .btn-outline to
 * 44px — deliberately left in force. Disabled (no join link) it mutes instead of
 * taking the base button's grey fill under an ink border. */
.share-row .btn-outline { font-family: inherit; font-size: 13px; padding: 6px 14px; margin-top: 8px; }
.share-row .btn-outline:disabled { background: white; color: var(--color-gray-400); border-color: var(--color-gray-350); cursor: not-allowed; }
.btn-share-link { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-radius: var(--radius-lg); font-size: 15px; font-weight: 600; color: white; cursor: pointer; background: var(--color-gray-700); border: none; transition: opacity var(--transition-fast); }
.btn-share-link:hover { opacity: 0.85; }
.btn-email { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-radius: var(--radius-lg); font-size: 15px; font-weight: 600; color: white; cursor: pointer; background: #0891b2; border: none; transition: opacity var(--transition-fast); text-decoration: none; }
.btn-email:hover { opacity: 0.85; }
.btn-sms { display: flex; align-items: center; gap: 8px; padding: 16px 20px; border-radius: var(--radius-lg); font-size: 15px; font-weight: 600; font-family: inherit; line-height: 1; color: white; cursor: pointer; background: #16a34a; /* iMessage-brand green (documented off-token brand literal, like .btn-email #0891b2) — NOT the success token; retheming success must not repaint a brand button (owner call 2026-07-25, D6) */ border: none; transition: opacity var(--transition-fast); position: relative; }
.btn-sms:disabled { background: var(--color-gray-400); cursor: not-allowed; }
.btn-sms:disabled::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--color-ink); color: white; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); }
.btn-sms:disabled:hover::after { opacity: 1; }

/* Facebook (.btn-share-link) + email (.btn-email) share buttons, and the feed
 * row's "Copy link for comment" (.btn-outline), render disabled when the join
 * URL fails to load. Mirror the SMS disabled-tooltip so the reason is explained
 * on hover instead of a silently dead button (welcome.js sets the data-tooltip
 * when it disables them). Gated on [data-tooltip] so a disabled button without
 * one never shows an empty bubble. The other .btn-outline on these pages is the
 * QR download <a>, which is never :disabled. */
.btn-share-link, .btn-email, .btn-outline { position: relative; }
.btn-share-link:disabled, .btn-email:disabled { background: var(--color-gray-400); cursor: not-allowed; opacity: 1; }
.btn-share-link[data-tooltip]:disabled::after,
.btn-email[data-tooltip]:disabled::after,
.btn-outline[data-tooltip]:disabled::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--color-ink); color: white; padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: 1; }
.btn-share-link[data-tooltip]:disabled:hover::after,
.btn-email[data-tooltip]:disabled:hover::after,
.btn-outline[data-tooltip]:disabled:hover::after { opacity: 1; }

/* ── Story / printable button row + sub-controls ───────────────── */
.story-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; justify-content: center; }
.story-desktop-msg { display: none; font-size: 13px; color: var(--color-success); text-align: center; margin-top: 12px; line-height: 1.5; max-width: 300px; }
/* Always-visible instruction under a share row's controls (the feed post's
 * "copy the link first" line). Same measure as .story-desktop-msg, body colour. */
.share-hint { font-size: 13px; color: var(--color-body); text-align: center; margin-top: 10px; line-height: 1.5; max-width: 300px; }

/* ── Light/Dark image toggle switch ─────────────────────────────── */
.story-style-toggle { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; }
.toggle-label { font-size: 13px; font-weight: 600; color: var(--color-body); }
.toggle-switch { position: relative; display: inline-block; width: 40px; height: 22px; }
.toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.toggle-track { position: absolute; inset: 0; background: var(--color-gray-400); border-radius: var(--radius-pill); cursor: pointer; transition: background var(--transition-base); }
.toggle-track::before { content: ''; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: white; border-radius: 50%; transition: transform var(--transition-base); }
.toggle-switch input:checked + .toggle-track { background: var(--color-ink); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(18px); }
/* The input is hidden (opacity:0), so keyboard focus rings the track (UX6). */
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--focus-ring-blue); outline-offset: var(--focus-offset); }

/* ── Story / feed / flyer / plaque-card thumbnail previews (shared sizing) ──
 * Desktop widths match the originals (story 110, flyer 150; the feed
 * post and the plaque card take the flyer's 150); the aspect-ratios
 * equal the source canvases (story 1080x1920 = 9/16, feed 1080x1350 =
 * 4/5, flyer 2550x3300 = 17/22, plaque card 1500x600 = 5/2 — the card,
 * not the letter sheet it downloads as) so object-fit:cover never crops. Width lives
 * in a class — not inline — so each page's own media query can enlarge
 * the preview on mobile (welcome stacks at 640, share at 720). Cosmetic
 * bits (border, radius, object-fit) stay inline per page. */
.thumb-col { width: 160px; }
#storyThumb { width: 110px; aspect-ratio: 9 / 16; height: auto; }
#feedThumb { width: 150px; aspect-ratio: 4 / 5; height: auto; }
#printableThumb { width: 150px; aspect-ratio: 17 / 22; height: auto; }
#plaqueThumb { width: 150px; aspect-ratio: 5 / 2; height: auto; max-width: 100%; }

/* ── Lightbox: click thumbnail → larger image preview ───────────── */
/* The .lightbox-overlay / .lightbox-close / @keyframes rules live in
 * common.css (the single source of truth, loaded by every lightbox
 * consumer); only the share-flow thumb cursor stays here. Click handlers
 * are wired in welcome.js (loaded by both pages). */
#storyThumb, #feedThumb, #printableThumb, #plaqueThumb { cursor: pointer; }