/* ============================================================
   LIVE BLOCK FRAME
   The frame never scrolls on its own (the gallery sizes "fit"
   frames to their block); autoplay scrolls "screen" frames.
   ============================================================ */
html.frame, html.frame body { overflow: hidden !important; scrollbar-width: none; }
html.frame::-webkit-scrollbar, html.frame body::-webkit-scrollbar { display: none; }
html.frame body { opacity: 0; transition: opacity 0.5s cubic-bezier(0.16, 0.84, 0.3, 1); }
html.frame body.frame-in { opacity: 1; }
/* Recording: no fade, the video starts on the first real frame */
html.frame-rec body { opacity: 1 !important; transition: none !important; }
html.frame-fit .site-wrapper, html.frame-fit .main-contents { min-height: 0 !important; }

/* Autoplay pointer */
.frame-cursor {
    position: fixed; left: 0; top: 0; z-index: 2147483647;
    width: 30px; height: 30px; margin: -3px 0 0 -6px;
    pointer-events: none; opacity: 0;
    transform: translate(var(--cx, -60px), var(--cy, -60px));
    transition: transform var(--cd, 0.8s) cubic-bezier(0.32, 0.72, 0, 1), opacity 0.3s;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.35));
}
.frame-cursor.on { opacity: 1; }
.frame-cursor svg { display: block; width: 100%; height: 100%; transform-origin: 20% 12%; transition: transform 0.14s; }
.frame-cursor.down svg { transform: scale(0.84); }
.frame-cursor::after {
    content: ""; position: absolute; left: -15px; top: -17px;
    width: 40px; height: 40px; border-radius: 50%;
    border: 2.5px solid rgba(238, 177, 17, 0.95);
    opacity: 0; transform: scale(0.3);
}
.frame-cursor.rip::after { animation: frameRipple 0.55s cubic-bezier(0.16, 0.84, 0.3, 1); }
@keyframes frameRipple { 0% { opacity: 1; transform: scale(0.3); } 100% { opacity: 0; transform: scale(1.6); } }
html.frame-phone .frame-cursor { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
html.frame-phone .frame-cursor svg { display: none; }
html.frame-phone .frame-cursor::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 2px rgba(0, 36, 10, 0.25); }
html.frame-phone .frame-cursor::after { left: 3px; top: 3px; }

/* The cookie notice belongs to the live site, not to a single block */
html.frame #cookieBar { display: none !important; }

/* Autoplay scrolls a frame every animation frame; the site's smooth scrolling would fight it */
html.frame, html.frame body { scroll-behavior: auto !important; }

/* ============================================================
   AI LIGHTBOX — ADDSEARCH WIDGET BASE (showcase only)
   The lightbox body is a static copy of the AddSearch widget's
   markup. On the live site AddSearch's script brings the widget's
   own base stylesheet; the prototype never loads it, so the search
   field, the "AI-generated answer" header, the toggle and the
   action buttons fall back to browser defaults. These rules stand
   in for that stylesheet in the block pages only, in the system's
   tokens, under the project's own colour overrides
   (organisms/_ai-lightbox.scss).
   ============================================================ */
html.frame .ai-lb .addsearch-sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Search field: one pill with the button inside it */
html.frame .ai-lb .ai-lb-body .addsearch-searchfield { display: flex; align-items: center; gap: 6px; max-width: none; margin: 0 0 20px; padding: 5px 5px 5px 20px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); text-align: left; transition: border-color 0.2s, box-shadow 0.2s; }
html.frame .ai-lb .ai-lb-body .addsearch-searchfield:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px var(--green-tint2); }
html.frame .ai-lb .ai-lb-body .addsearch-searchfield .search-field-wrapper { flex: 1; min-width: 0; }
html.frame .ai-lb .ai-lb-body .addsearch-searchfield input[type="search"] { width: 100%; min-width: 0; height: 40px; padding: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 15px; color: var(--ink); -webkit-appearance: none; appearance: none; }
html.frame .ai-lb .ai-lb-body .addsearch-searchfield input[type="search"]::placeholder { color: var(--ink-3); }
html.frame .ai-lb .ai-lb-body .addsearch-searchfield button { flex: none; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; font-size: 14px; font-weight: 600; line-height: 1; }

/* The answer card */
html.frame .ai-lb .addsearch-ai-answers-result { padding: 18px 22px 16px; border: 1px solid #a6ce39; border-radius: var(--r-lg); text-align: left; }
html.frame .ai-lb .addsearch-ai-answers-result .header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(166, 206, 57, 0.45); }
html.frame .ai-lb .addsearch-ai-answers-result .main-headline { display: flex; align-items: center; gap: 8px; }
html.frame .ai-lb .addsearch-ai-answers-result .main-headline > svg { flex: none; width: 22px; height: 22px; }
html.frame .ai-lb .addsearch-ai-answers-result .main-headline-text { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -0.01em; color: var(--green-dark); }
html.frame .ai-lb .addsearch-ai-answers-result .ai-explanation-text-mobile { display: none; }
html.frame .ai-lb .addsearch-ai-answers-result .header-right-hand-side-container { display: flex; align-items: center; gap: 12px; }
html.frame .ai-lb .addsearch-ai-answers-result .ai-explanation-text { margin: 0; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
@media (max-width: 768px) {
    html.frame .ai-lb .addsearch-ai-answers-result .ai-explanation-text { display: none; }
    html.frame .ai-lb .addsearch-ai-answers-result .ai-explanation-text-mobile { display: block; margin: 4px 0 0 30px; font-size: 12px; line-height: 1.3; color: var(--ink-2); }
}

/* Show AI answer: a switch, not a checkbox */
html.frame .ai-lb .toggle-switch { position: relative; flex: none; display: inline-block; width: 40px; height: 22px; cursor: pointer; }
html.frame .ai-lb .toggle-switch input { position: absolute; width: 0; height: 0; margin: 0; opacity: 0; }
html.frame .ai-lb .toggle-switch .slider { position: absolute; inset: 0; border-radius: 999px; background: var(--line-2); transition: background-color 0.2s; }
html.frame .ai-lb .toggle-switch .slider::before { content: ""; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); transition: transform 0.2s; }
html.frame .ai-lb .toggle-switch input:checked + .slider::before { transform: translateX(18px); }

/* The answer, expanded ("Show less" state), so no fade over it */
html.frame .ai-lb .answer-container { position: relative; margin-top: 14px; }
html.frame .ai-lb .answer-container .fade-out-overlay { display: none; }
html.frame .ai-lb .answer-text { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
html.frame .ai-lb .answer-text p { margin: 0 0 12px; }
html.frame .ai-lb .answer-text ul { margin: 0 0 12px; padding-left: 20px; }
html.frame .ai-lb .answer-text li { margin-bottom: 6px; }
html.frame .ai-lb .ai-lb-body .answer-text h2 { margin: 16px 0 0; font-size: 13px; font-weight: 500; line-height: 1.45; letter-spacing: 0; color: var(--ink-3); }

/* Copy · thumbs up · thumbs down */
html.frame .ai-lb .action-buttons-group { display: flex; align-items: center; gap: 2px; margin-top: 12px; }
html.frame .ai-lb .action-buttons-group .copy-confirm-message:empty { display: none; }
html.frame .ai-lb .action-buttons-group button { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: pointer; transition: background-color 0.2s; }
html.frame .ai-lb .action-buttons-group button:hover { background: var(--green-tint); }
html.frame .ai-lb .action-buttons-group button svg { width: 17px; height: 17px; }

/* Sources: two to a row, one line each */
html.frame .ai-lb .sources { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(166, 206, 57, 0.45); }
html.frame .ai-lb .sources-headline { margin: 0 0 10px; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ink-2); }
html.frame .ai-lb .sources-list { flex-wrap: wrap; gap: 8px; }
html.frame .ai-lb .addsearch-ai-answers-result .sources-list a.source { flex: 1 1 calc(50% - 4px); min-width: 0; padding: 9px 12px; border-radius: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--green-dark); text-decoration: none; }

/* Show less */
html.frame .ai-lb .show-more-btn { align-items: center; gap: 4px; margin: 12px auto 0; padding: 4px 8px; border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
html.frame .ai-lb .show-more-btn .chevron { width: 16px; height: 16px; }

/* The Degree Finder block shows the finder alone; its grant lead-in band
   still shows on the full homepage (page-home) */
html.blk-home-finder #finder-intro { display: none !important; }

/* Program rows: room between the kicker's mode pills (Online / On Campus)
   and the program name under them (the built CSS resolves it to 0) */
html.frame .prow .prow-fit { margin-bottom: 10px !important; }
@media (max-width: 767px) { html.frame .prow .prow-fit { margin-bottom: 8px !important; } }

/* The tuition calculator block, filmed without its own heading: the showcase
   section carries that copy, so the recording is the calculator alone */
html.blk-bsn-waterfall .sec-tuition-calc .sec-head { display: none !important; }
html.blk-bsn-waterfall .sec-tuition-calc { padding-top: 48px !important; padding-bottom: 48px !important; }
/* …on its own green all the way down, so the frame shows no page below the section
   while the card is still short (before the steps open) */
html.blk-bsn-waterfall, html.blk-bsn-waterfall body, html.blk-bsn-waterfall .site-wrapper, html.blk-bsn-waterfall .main-contents { background: #00240a !important; }