/* ============================================================
   EmojiCopy — Handoff section styles
   ------------------------------------------------------------
   Each mockup ends with a "Hand-off for dev" section so the dev
   can open the URL and immediately copy HTML / Vue / CSS for
   anything that needs to be built.

   Pattern in HTML:

     <section class="handoff">
         <header class="handoff__head">
             <span class="handoff__eyebrow">HAND-OFF FOR DEV</span>
             <h2 class="handoff__title">Timed feedback questions</h2>
             <p class="handoff__lede">Drop these snippets…</p>
         </header>

         <div class="handoff__components">
             <div class="handoff-badge handoff-badge--source">
                 ✓ <code>PopModal</code> · <code>ui/components/pop/PopModal.vue</code>
             </div>
             <div class="handoff-badge handoff-badge--new">
                 🟡 <code>FeedbackMicroPrompt</code> · new — spec below
             </div>
         </div>

         <div class="handoff__block">
             <header class="handoff__block-head">
                 <span class="handoff__block-label">HTML</span>
                 <button class="handoff__copy" data-copy="snippet-html">Copy</button>
             </header>
             <pre id="snippet-html"><code>…</code></pre>
         </div>
     </section>

   Depends on `tokens.css`.
   ============================================================ */

/* Section shell */
.handoff {
    margin-top: var(--sp-9);
    padding-top: var(--sp-7);
    border-top: 2px dashed var(--c-border-secondary);
}

/* Header — eyebrow, title, lede */
.handoff__eyebrow {
    display: inline-block;
    padding: 4px 10px;
    margin-bottom: 12px;
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--c-icon-green);
    background: var(--c-surface-highlight);
    border-radius: var(--r-pill);
}

.handoff__title {
    margin-bottom: 10px;
    font-family: var(--ff-dm-sans);
    font-weight: 900;
    font-size: clamp(2.8rem, 3.5vw, 4rem);
    line-height: 1.1;
    letter-spacing: -.03em;
    color: var(--c-text-primary);
}

.handoff__lede {
    max-width: 75ch;
    margin-bottom: var(--sp-6);
    font-family: var(--ff-inter);
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--c-text-secondary);
}

/* Components-used badges */
.handoff__components {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: var(--sp-5);
    margin-bottom: var(--sp-7);
    background: var(--c-surface-cta);
    border: 1px solid var(--c-border-primary);
    border-radius: var(--r-md);
}

.handoff-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--r-pill);
    font-family: var(--ff-inter);
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.4;

    code {
        padding: 1px 6px;
        font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
        font-size: 1.15rem;
        font-weight: 700;
        background: rgba(0, 0, 0, .06);
        border-radius: 4px;
    }

    &.handoff-badge--source {
        background: color-mix(in srgb, var(--green-500) 25%, transparent);
        color: light-dark(var(--green-900), var(--green-300));

        code {
            background: color-mix(in srgb, var(--green-700) 18%, transparent);
        }
    }

    &.handoff-badge--new {
        background: color-mix(in srgb, #FFC021 25%, transparent);
        color: light-dark(#7a4d00, #FFCF56);

        code {
            background: color-mix(in srgb, #FFC021 30%, transparent);
        }
    }
}

/* Code blocks — default to a teaser height with a fade mask + "Show more"
   button. Click on the pre still copies the FULL contents (handoff.js).
   When `.handoff__block` gets `.is-expanded`, the pre shows in full. */
.handoff__block {
    margin-bottom: var(--sp-5);
    background: var(--c-surface-secondary);
    border: 1px solid var(--c-border-primary);
    border-radius: var(--r-md);
    overflow: hidden;

    pre {
        position: relative;
        margin: 0;
        padding: var(--sp-5);
        max-height: 220px;
        font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
        font-size: 1.25rem;
        line-height: 1.55;
        color: var(--c-text-primary);
        background: var(--c-surface-cta);
        overflow: hidden;
        white-space: pre;
        tab-size: 4;
        mask-image: linear-gradient(to bottom, black 80%, transparent);
        transition: max-height .2s ease;
    }

    &.is-expanded pre,
    &.is-short pre {
        max-height: 4000px;
        mask-image: none;
        overflow: auto;
    }
}

.handoff__block-expand {
    display: block;
    width: 100%;
    padding: 10px 16px;
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-secondary);
    background: var(--c-surface-cta);
    border: none;
    border-top: 1px solid var(--c-border-primary);
    cursor: pointer;
    transition: background .15s, color .15s;

    &:hover {
        background: var(--c-surface-tertiary);
        color: var(--c-text-primary);
    }

    .handoff__block.is-short & {
        display: none;
    }
}

.handoff__block-expand__label::before {
    content: '▼ Show full code';
}

.handoff__block.is-expanded .handoff__block-expand__label::before {
    content: '▲ Collapse';
}

.handoff__block-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 10px 16px;
    background: var(--c-surface-cta);
    border-bottom: 1px solid var(--c-border-primary);
}

.handoff__block-label {
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-secondary);

    small {
        margin-left: 8px;
        font-weight: 500;
        font-size: 1.1rem;
        letter-spacing: 0;
        text-transform: none;
        color: var(--c-text-tertiary);
    }
}

/* Plain prose notes (Behavior / implementation rules etc.) — not code,
   not collapsible, not click-to-copy. Sits at the bottom of a drawer. */
.handoff__notes {
    margin-top: var(--sp-5);
    padding: 14px 18px 18px;
    background: color-mix(in srgb, var(--c-surface-cta) 60%, transparent);
    border: 1px dashed var(--c-border-secondary);
    border-radius: var(--r-md);
}

.handoff__notes-head {
    display: block;
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-secondary);
    margin-bottom: 10px;

    small {
        margin-left: 8px;
        font-weight: 500;
        font-size: 1.1rem;
        letter-spacing: 0;
        text-transform: none;
        color: var(--c-text-tertiary);
    }
}

.handoff__notes-body {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-family: var(--ff-inter);
    font-size: 1.3rem;
    line-height: 1.6;
    color: var(--c-text-secondary);
    white-space: pre-wrap;
    cursor: default;

    code {
        font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
        font-size: 1.15rem;
        color: var(--c-text-primary);
    }
}

/* Click-to-copy on the pre itself (no separate copy button) */
.handoff__block pre {
    position: relative;
    cursor: copy;
    transition: background .15s;

    &:hover {
        background: color-mix(in srgb, var(--c-surface-cta) 60%, var(--c-surface-tertiary));
    }

    &::after {
        content: 'Click to copy';
        position: absolute;
        top: 10px;
        right: 14px;
        padding: 3px 8px;
        font-family: var(--ff-inter);
        font-weight: 700;
        font-size: 1.0rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--c-text-tertiary);
        background: var(--c-surface-secondary);
        border: 1px solid var(--c-border-primary);
        border-radius: var(--r-pill);
        opacity: 0;
        transition: opacity .15s;
        pointer-events: none;
    }

    &:hover::after {
        opacity: 1;
    }

    &.is-copied::after {
        content: 'Copied!';
        padding-left: 26px;
        color: var(--metal-950);
        background: var(--green-500) url('https://cdn.joypixels.com/emojicopy/assets/icons/check-thick_green.png') 6px center / 15px 15px no-repeat;
        border-color: var(--green-600);
        opacity: 1;
    }
}

/* Mockup card with built-in drawer for code (replaces the bottom section pattern) */
.handoff-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.handoff-card {
    background: var(--c-surface-secondary);
    border: 1px solid var(--c-border-primary);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;

    &:has(.handoff-card__drawer:not([hidden])) {
        border-color: color-mix(in srgb, var(--green-600) 35%, var(--c-border-primary));
        box-shadow: 0 12px 40px rgba(48, 217, 9, .10);
    }
}

.handoff-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 12px 18px;
    background: var(--c-surface-cta);
    border-bottom: 1px solid var(--c-border-primary);

    .handoff-card__label {
        font-family: var(--ff-inter);
        font-weight: 700;
        font-size: 1.3rem;
        color: var(--c-text-primary);
    }

    .handoff-card__trigger {
        padding: 4px 10px;
        font-family: var(--ff-inter);
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--c-icon-green);
        background: var(--c-surface-highlight);
        border-radius: var(--r-pill);
    }
}

/* Mockup-preview stage — soft dotted background so DARK modals contrast
   clearly. Add `.handoff-card__stage--invert` for pages whose surfaces
   are LIGHT (welcome banner, pricing cards, slim strip), and the stage
   flips to a dark dotted ground so light surfaces stand out. */
.handoff-card__stage {
    display: flex;
    justify-content: center;
    padding: var(--sp-7);
    background:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--metal-400) 32%, transparent) 1px, transparent 0),
        var(--metal-50);
    background-size: 14px 14px;
}

/* flat selector — native nesting can't do `&--invert` concatenation
   (VUE-CONVENTIONS.md R6; this file is parsed raw by the browser) */
.handoff-card__stage--invert {
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .06) 1px, transparent 0),
        var(--metal-900);
    background-size: 14px 14px;
}

.handoff-card__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 18px;
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--c-text-primary);
    background: var(--c-surface-secondary);
    border: none;
    border-top: 1px solid var(--c-border-primary);
    cursor: pointer;
    transition: background .15s, color .15s;

    .handoff-card__toggle-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 7px;
        margin-right: 2px;
        font-family: ui-monospace, 'Menlo', 'Consolas', monospace;
        font-weight: 700;
        font-size: 1.05rem;
        letter-spacing: -.02em;
        line-height: 1.4;
        color: light-dark(var(--green-900), var(--green-400));
        background: color-mix(in srgb, var(--green-500) 18%, transparent);
        border-radius: var(--r-sm);
    }

    .handoff-card__chevron {
        display: inline-block;
        font-size: 1.0rem;
        transition: transform .2s;
    }

    &[aria-expanded="true"] {
        color: var(--c-icon-green);
        background: color-mix(in srgb, var(--green-500) 8%, var(--c-surface-secondary));

        .handoff-card__chevron {
            transform: rotate(180deg);
        }
    }

    &:hover {
        background: color-mix(in srgb, var(--green-500) 8%, var(--c-surface-secondary));
        color: var(--c-icon-green);
    }
}

/* Preview pill — sits inside .handoff-card__head alongside the trigger pill.
   Opens a centered lightbox with an iframe of the in-context preview. */
.handoff-card__preview {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: none;
    border-radius: var(--r-pill);
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: light-dark(#6D28D9, #A78BFA);
    background: color-mix(in srgb, #8B5CF6 14%, transparent);
    cursor: pointer;
    transition: background .15s, color .15s;

    &:hover {
        background: color-mix(in srgb, #8B5CF6 22%, transparent);
    }

    .handoff-card__preview-icon {
        display: inline-flex;
        align-items: center;
        line-height: 0;

        svg {
            display: block;
            width: 14px;
            height: 14px;
        }
    }
}

/* Fullscreen lightbox — opens when a "Preview in context" button is
   clicked. Embeds an iframe of in-context/my-emoji.html. Closes on
   click-outside, ✕ button, or Escape. */
.handoff-preview-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 32px;
    background: rgba(15, 16, 18, 0.40);
    backdrop-filter: blur(2px);
    animation: handoff-preview-fade-in .15s ease both;

    &[hidden] { display: none; }
}

@keyframes handoff-preview-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.handoff-preview-lightbox__frame-wrap {
    position: relative;
    /* Canonical desktop frame — matches the @container layout-lg
       threshold (1280px) the real app uses. 800px tall is the
       canonical desktop design canvas. Caps to 92vw / 90vh on
       smaller screens. */
    width: min(1280px, 92vw);
    height: min(800px, 90vh);
    background: var(--c-surface-primary);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, .35), 0 2px 8px rgba(0, 0, 0, .15);
}

.handoff-preview-lightbox__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    font-size: 1.8rem;
    line-height: 1;
    color: var(--c-text-primary);
    background: var(--c-surface-secondary);
    border: 1px solid var(--c-border-primary);
    border-radius: 50%;
    cursor: pointer;
    z-index: 2;
    transition: background .15s, transform .15s;

    &:hover {
        background: var(--c-surface-tertiary);
        transform: scale(1.05);
    }
}

.handoff-preview-lightbox__frame {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    background: var(--c-surface-primary);
}

.handoff-card__drawer {
    padding: var(--sp-6);
    background: var(--c-surface-secondary);
    border-top: 1px solid var(--c-border-primary);

    &[hidden] {
        display: none;
    }

    > .handoff__components {
        margin-bottom: var(--sp-5);
    }

    > .handoff__block {
        margin-bottom: var(--sp-4);

        &:last-child {
            margin-bottom: 0;
        }
    }
}

/* ============================================================
   Variant chip — small "VARIANT" pill inside the card head.
   Marks cards that are one of many surface variants of the
   same underlying component (vs. cards that are unique
   surfaces). Sits between the label and the preview pill.
   ============================================================ */
.handoff-card__variant-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.0rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-tertiary);
    background: var(--c-surface-tertiary);
    border-radius: var(--r-pill);
}

/* ============================================================
   Variants section heading — sits above a group of variant
   cards so the reader sees at a glance "this is N variants
   of one composition" instead of N unrelated surfaces.
   ============================================================ */
.handoff-section-heading {
    margin: var(--sp-8) 0 var(--sp-5);
    padding-bottom: 10px;
    border-bottom: 1px solid var(--c-border-primary);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);

    h2 {
        font-family: var(--ff-dm-sans);
        font-weight: 900;
        font-size: 2.0rem;
        letter-spacing: -.02em;
        color: var(--c-text-primary);
    }
}
/* flat selector — &__element nesting silently drops in browser-parsed CSS (see DEV-NOTES R6 incident) */
.handoff-section-heading__count {
    font-family: var(--ff-inter);
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--c-text-tertiary);
}

/* ============================================================
   Refactor-pending callout — yellow banner under page-head
   warning that the mockup hard-codes HTML/CSS and the real
   composition work is deferred to COMPONENTIZE-TODO.md.
   ============================================================ */
.handoff-refactor-note {
    margin-bottom: var(--sp-6);
    padding: 12px 16px;
    background: color-mix(in srgb, #FFC021 12%, transparent);
    border: 1px solid color-mix(in srgb, #FFC021 30%, transparent);
    border-radius: var(--r-md);
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-family: var(--ff-inter);
    font-size: 1.3rem;
    line-height: 1.45;
    color: var(--c-text-secondary);

    b { color: var(--c-text-primary); }
    a { color: var(--c-icon-green); font-weight: 700; }
    code { font-family: ui-monospace, 'Menlo', 'Consolas', monospace; font-size: 1.2rem; background: var(--c-surface-tertiary); padding: 1px 6px; border-radius: 4px; color: var(--c-text-primary); }
}
/* flat selector — &__element nesting silently drops in browser-parsed CSS (see DEV-NOTES R6 incident) */
.handoff-refactor-note__icon { font-size: 1.6rem; line-height: 1.2; flex: none; }