/* The share menu (register.php; Figma course page 05.2, 05.3). Its button is the page's own; this is
   the menu under it, its places, "copy link" and the note once copied. Each rule names the menu as
   well as the part, so the old site's own button:hover and a:hover paint (styles-rtl.css) never reach it. */

.cil-share { position: relative; }
.cil-share .cil-share__menu {
    position: absolute;
    top: calc(100% + 14px);   /* 05.2: 14px under the button */
    inset-inline-end: 0;      /* lined up with the button's far side, opening into the page (05.2) */
    z-index: 6;
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: max-content;
    padding: 13px 13px 11px;   /* the design's 14/12 with its border drawn inside: 248 x 114 */
    border: 1px solid var(--cil-black-light-3);
    border-radius: 12px;
    background: var(--cil-white);
    box-shadow: 0 8px 10px color-mix(in srgb, var(--cil-black-dark-4) 14%, transparent);
}
.cil-share .cil-share__menu[hidden] { display: none; }
/* No room that way: it opens the other way. */
.cil-share .cil-share__menu.is-flip { inset-inline-start: 0; inset-inline-end: auto; }
/* No room below (low in the window): it opens upward (05.2 mobile). */
.cil-share .cil-share__menu.is-up { top: auto; bottom: calc(100% + 14px); }
.cil-share .cil-share__ways { display: flex; gap: 10px; }

/* Each place wears the footer's own mark (Oren 2026-10-15, item 81): at rest the design's light circle, the mark black;
   pointed at its platform's own colour fading in under the mark as the mark takes that colour's ink -- nothing
   moves, grows or turns (colours: design-system/brand-colours.css). A social place wears the footer's own mark
   (footer-component/icons.php); WhatsApp, which the footer does not offer, and email keep the design's marks.
   Email is no platform: it takes the house blue, as "copy link" below does. The fallbacks keep the mark on the
   light circle should the colours ever be missing. The keyboard gets the same, with a focus ring. */
.cil-share .cil-share__way {
    --way-fill: var(--cil-blue); --way-ink: var(--cil-black);
    position: relative;
    isolation: isolate;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    /* At rest the design's light circle with the mark in black, as before -- only the marks are the footer's
       (Oren 2026-10-15: "return the white background"). */
    background: color-mix(in srgb, var(--cil-black-light-3) 30%, var(--cil-white));   /* Figma's #F6F6F6 */
    color: var(--cil-black);
    text-decoration: none;
    transition: color .15s ease;
}
.cil-share .cil-share__way--telegram { --way-fill: var(--cil-brand-telegram); --way-ink: var(--cil-brand-telegram-ink); }
.cil-share .cil-share__way--linkedin { --way-fill: var(--cil-brand-linkedin); --way-ink: var(--cil-brand-linkedin-ink); }
.cil-share .cil-share__way--facebook { --way-fill: var(--cil-brand-facebook); --way-ink: var(--cil-brand-facebook-ink); }
.cil-share .cil-share__way--whatsapp { --way-fill: var(--cil-brand-whatsapp); --way-ink: var(--cil-brand-whatsapp-ink); }
/* The colour is a layer under the mark, as the footer's is, so a gradient (Telegram) fades like a flat one. */
.cil-share .cil-share__way::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--way-fill, var(--cil-blue));
    opacity: 0;
    transition: opacity .15s ease;
}
.cil-share .cil-share__mark { display: block; }
/* The footer's mark fills its disc as in the footer (its 40-unit box at 40px there), so here it keeps the same
   proportion of the 36px disc. */
.cil-share .cil-share__mark--platform { width: 100%; height: 100%; }
.cil-share .cil-share__way:is(:hover, :focus, :active) { color: var(--cil-black); text-decoration: none; }
.cil-share .cil-share__way:is(:hover, :focus-visible) { color: var(--way-ink, var(--cil-black)); }
.cil-share .cil-share__way:is(:hover, :focus-visible)::before { opacity: 1; }
.cil-share .cil-share__way:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }

.cil-share .cil-share__copy {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: 38px;
    margin: 0;
    padding: 0 12px;
    border: 1px solid var(--cil-blue);
    border-radius: 8px;
    background: var(--cil-blue-light-1);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--cil-blue-dark-1);
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* Pointed at, the house blue the email place takes (above), its words in the Campus black. */
.cil-share .cil-share__copy:is(:hover, :active) { background: var(--cil-blue); border-color: var(--cil-blue); box-shadow: none; color: var(--cil-black); }
.cil-share .cil-share__copy:focus-visible { outline: 2px solid var(--cil-blue-regular-7); outline-offset: 3px; border-radius: 8px; }

/* Copied (design-system/copy-value.js, as the admin copies): the button holds the house green and a
   band of it crosses -- without the tick, which the note by the button draws once the menu closes (05.3). */
.cil-share .cil-share__copy.is-done,
.cil-share .cil-share__copy.is-done:hover { background-color: var(--cil-green-light-3); border-color: var(--cil-green-light-3); box-shadow: none; color: var(--cil-green-dark-1); }
.cil-share .cil-share__copy.is-taken {
    background-image: linear-gradient(90deg, transparent 0%, var(--cil-green-light-9) 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size: 55% 100%;
    animation: cil-share-copy-sweep 0.75s ease-out forwards;
}
@keyframes cil-share-tick-draw { to { stroke-dashoffset: 0; } }
@keyframes cil-share-copy-sweep { from { background-position: -135% 0; } to { background-position: 245% 0; } }

/* Nothing could be copied (share-menu.js): the link in the menu, selected, to copy by hand. Contained,
   so its sentence and field take the menu's width rather than widening it. */
.cil-share .cil-share__byHand { display: flex; flex-direction: column; gap: 6px; contain: inline-size; }
.cil-share .cil-share__byHandWords { font-size: 13px; line-height: 1.4; color: var(--cil-black-dark-1); }
.cil-share .cil-share__byHandField {
    box-sizing: border-box;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--cil-black-light-5);
    border-radius: 8px;
    background: var(--cil-white);
    color: var(--cil-black-dark-1);
    font: inherit;
    font-size: 13px;
}
.cil-share .cil-share__byHandField:focus { outline: 2px solid var(--cil-blue-regular-7); outline-offset: -1px; }

/* "Link copied" (05.3): under the button, pointing at it, for a moment. */
.cil-share .cil-share__copied {
    position: absolute;
    top: calc(100% + 14px);
    /* Centred under the button; share-menu.js moves it in from the window's edge when the button sits
       near one, and --share-tip-x keeps the pointer on the button. */
    left: 50%;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--cil-black-dark-4);
    font-size: 14px;
    color: var(--cil-white);
    white-space: nowrap;
    translate: -50% 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
}
.cil-share .cil-share__copied::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: var(--share-tip-x, 50%);
    border: 5px solid transparent;
    border-bottom-color: var(--cil-black-dark-4);
    border-top: 0;
    translate: -50% 0;
}
.cil-share .cil-share__copied.is-shown { opacity: 1; visibility: visible; transition: opacity 0.2s ease; }
/* Its tick draws itself as it shows, as the copy button's did. */
.cil-share .cil-share__copiedTick { flex: none; width: 14px; height: 14px; }
.cil-share .cil-share__copiedTick path { stroke-dasharray: 22; stroke-dashoffset: 22; }
.cil-share .cil-share__copied.is-shown .cil-share__copiedTick path { animation: cil-share-tick-draw 0.4s ease-out 0.1s forwards; }
/* Low in the window: over the button, pointing down at it (05.3 mobile). */
.cil-share .cil-share__copied.is-up { top: auto; bottom: calc(100% + 14px); }
.cil-share .cil-share__copied.is-up::before { top: 100%; bottom: auto; border-top: 5px solid var(--cil-black-dark-4); border-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
    .cil-share .cil-share__way, .cil-share .cil-share__copy, .cil-share .cil-share__copied { transition: none; }
    .cil-share .cil-share__copy.is-taken { animation: none; }
    .cil-share .cil-share__copied.is-shown .cil-share__copiedTick path { animation: none; stroke-dashoffset: 0; }
}