/* Share panel partial (emitted once per page).
   Extracted from Views/Shared/_SharePanel.cshtml — keep edits here, not inline. */
        /* Share panel — compact row of circular icon buttons. Each service has
           a brand tint on hover / native share is the only one with a persistent
           accent fill. Mobile layout is the same (icons only) so it stays compact
           even on narrow screens. Colors resolve --ih-* → host generic → literal. */
        .ih-share {
            --shp-surface: var(--ih-surface, var(--bg-secondary, #f3eee2));
            --shp-border: var(--ih-border, var(--border-color, #ddd5c4));
            --shp-bg: var(--ih-bg, var(--bg-primary, #fdfaf2));
            --shp-muted: var(--ih-text-muted, var(--text-secondary, #6b6358));
            --shp-accent: var(--ih-accent, var(--primary-color, #2d4a36));
            --shp-accent-soft: var(--ih-accent-soft, #d8e3d3);
            --shp-text: var(--ih-text, var(--text-primary, #1f1a14));

            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            margin: 48px 0 16px;
            padding: 18px 16px;
            background: var(--shp-surface);
            border: 1px solid var(--shp-border);
            border-radius: 20px;
            font-family: system-ui, -apple-system, sans-serif;
        }
        .ih-share-label {
            font-size: 11px;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            color: var(--shp-muted);
            font-weight: 700;
        }
        .ih-share-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 10px;
        }
        .ih-share-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 44px; height: 44px;
            border-radius: 50%;
            border: 1px solid var(--shp-border);
            background: var(--shp-bg);
            color: var(--shp-muted);
            cursor: pointer;
            text-decoration: none;
            transition: transform 140ms ease, background 140ms, color 140ms, border-color 140ms;
            /* Eliminates any default button inset so circle is perfectly round. */
            padding: 0;
        }
        .ih-share-btn svg {
            width: 20px; height: 20px;
            display: block;
        }
        .ih-share-btn:hover {
            transform: translateY(-2px);
        }
        /* Native "Share" shows only on devices that expose navigator.share —
           JS toggles display=flex. Always accent-filled so it reads as the
           primary action when present. */
        .ih-share-btn[data-net="native"] {
            display: none;
            background: var(--shp-accent);
            color: #fff;
            border-color: var(--shp-accent);
        }
        .ih-share-btn[data-net="native"].is-available { display: inline-flex; }
        .ih-share-btn[data-net="native"]:hover { background: var(--shp-accent); opacity: 0.9; }

        /* Brand-tinted hover states. Single source of truth — the native-share
           button doesn't need one since it already has the accent fill. */
        .ih-share-btn[data-net="copy"]:hover     { background: var(--shp-accent-soft); color: var(--shp-accent); border-color: var(--shp-accent); }
        .ih-share-btn[data-net="telegram"]:hover { background: #0088cc; color: #fff; border-color: #0088cc; }
        .ih-share-btn[data-net="whatsapp"]:hover { background: #25d366; color: #fff; border-color: #25d366; }
        .ih-share-btn[data-net="x"]:hover        { background: #000;    color: #fff; border-color: #000; }
        .ih-share-btn[data-net="facebook"]:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
        .ih-share-btn[data-net="linkedin"]:hover { background: #0a66c2; color: #fff; border-color: #0a66c2; }
        .ih-share-btn[data-net="reddit"]:hover   { background: #ff4500; color: #fff; border-color: #ff4500; }
        .ih-share-btn[data-net="email"]:hover    { background: #4b5563; color: #fff; border-color: #4b5563; }

        /* Copy-state toast pill sits above the copy button for ~1.8s after
           clipboard write succeeds. position:relative on .ih-share enables this. */
        .ih-share-toast {
            position: absolute;
            top: -12px; left: 50%;
            transform: translate(-50%, -100%);
            padding: 6px 12px;
            border-radius: 999px;
            background: var(--shp-text);
            color: var(--shp-bg);
            font-size: 12px;
            font-weight: 600;
            opacity: 0;
            pointer-events: none;
            transition: opacity 160ms ease, transform 160ms ease;
        }
        .ih-share.is-copied .ih-share-toast {
            opacity: 1;
            transform: translate(-50%, -110%);
        }

        @media (max-width: 720px) {
            .ih-share { margin: 32px 0 16px; padding: 14px 10px; border-radius: 16px; }
            .ih-share-list { gap: 8px; }
            .ih-share-btn { width: 40px; height: 40px; }
            .ih-share-btn svg { width: 18px; height: 18px; }
        }