/*
 * Presentation Generator (/presentation-generator/, js/presentation-generator.js).
 * Loaded after css/webapps.css, whose deck + slide CSS (.gs-deck, .gs-slide…) it
 * reuses as is. This file adds: the form bits (kids safety card, deck buttons),
 * three themes (Chalkboard, Big Print, Terminal), the new slide types (pg-*),
 * presenter view, and the two-per-page handout. Slides are sized in cqw
 * (1cqw = 1% of the slide width), like the sales meeting.
 */

/* ---- the form ---- */
.gs-emoji--pg .pg-safe { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.5; color: #f5f5f5; }
.gs-emoji--pg .pg-safe[hidden] { display: none; }
.gs-emoji--pg .pg-safe--no { background: rgba(231, 127, 36, 0.14); border: 1px solid var(--gs-orange, #e77f24); }
.gs-emoji--pg .pg-safe--help { background: rgba(46, 196, 182, 0.14); border: 1px solid var(--gs-teal, #2ec4b6); }
.gs-emoji--pg .pg-safe--soft { background: rgba(46, 196, 182, 0.08); border: 1px dashed var(--gs-teal, #2ec4b6); }
.gs-emoji--pg .pg-safe strong { color: #fff; }
.gs-emoji--pg button.pg-safe__idea { margin: 8px 8px 0 0; padding: 6px 10px; font-size: 13px; }
.gs-emoji--pg [data-pg-ages][hidden], .gs-emoji--pg [data-pg-who-field][hidden] { display: none; }

/* Under the deck: Sillier / Simpler / Remake / PDF / Handout / Share link */
.pg-deck__more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; }
.gs-emoji .pg-deck__more button.gs-emoji__btn { padding: 8px 12px; }
.gs-emoji .pg-deck__more button.gs-emoji__btn:disabled { opacity: 0.45; cursor: default; }
.pg-deck__msg { color: var(--gs-teal, #2ec4b6); font-size: 13px; }

/* ---- themes ---- */
.gs-deck[data-theme="chalkboard"] {
    --s-bg: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.06), transparent 60%), radial-gradient(ellipse at 80% 90%, rgba(255, 255, 255, 0.05), transparent 55%), #24412f;
    --s-ink: #f4f1e8; --s-muted: #c9d6c4; --s-accent: #ffd85e; --s-accent2: #ff9ecb; --s-real: #ff8a80; --s-p4: #8fd3ff; --s-p5: #c3f584;
    --s-card: rgba(255, 255, 255, 0.07); --s-panel: rgba(20, 40, 28, 0.9);
    --s-title-bg: radial-gradient(ellipse at 50% 30%, rgba(255, 255, 255, 0.08), transparent 65%), #1d3627; --s-title-ink: #fffbe8; --s-rule: #ffd85e;
    --s-font: 'Chalkboard SE', 'Comic Sans MS', 'Comic Neue', 'Segoe Print', 'Trebuchet MS', sans-serif; --s-head: 'Chalkboard SE', 'Comic Sans MS', 'Comic Neue', 'Segoe Print', 'Trebuchet MS', sans-serif;
}
.gs-deck[data-theme="chalkboard"] .gs-slide { box-shadow: inset 0 0 0 1.2cqw #7a4b25, inset 0 0 0 1.6cqw #5a3417; }
/* Big Print: older eyes. White, near-black ink, dark accents (all over 7:1), bigger type. */
.gs-deck[data-theme="bigprint"] {
    --s-bg: #ffffff; --s-ink: #111111; --s-muted: #333333; --s-accent: #0b3d91; --s-accent2: #9a3d00; --s-real: #a00000; --s-p4: #00594f; --s-p5: #4b4b4b;
    --s-card: #eef2fa; --s-panel: #ffffff;
    --s-title-bg: #0b3d91; --s-title-ink: #ffffff; --s-rule: #0b3d91;
    --s-font: Verdana, Tahoma, 'Segoe UI', Arial, sans-serif; --s-head: Verdana, Tahoma, 'Segoe UI', Arial, sans-serif;
}
.gs-deck[data-theme="bigprint"] .gs-slide h2.gs-slide__h { font-size: 4.4cqw; }
.gs-deck[data-theme="bigprint"] .gs-slide__list li { font-size: 3.5cqw; line-height: 1.3; }
.gs-deck[data-theme="bigprint"] .gs-slide .gs-slide__list.is-dense > li { font-size: 3cqw; }
.gs-deck[data-theme="bigprint"] .gs-slide .gs-slide__list.is-packed > li { font-size: 2.5cqw; }
.gs-deck[data-theme="bigprint"] .gs-slide__footer { font-size: 1.7cqw; opacity: 0.9; }
.gs-deck[data-theme="bigprint"] .pg-idea { font-size: 5.2cqw; }
/* Terminal: GrabSauce's own look. */
.gs-deck[data-theme="terminal"] {
    --s-bg: linear-gradient(160deg, #1a1a2e, #16213e 70%, #0f3460); --s-ink: #e0e0e0; --s-muted: #b0b0c0; --s-accent: #e77f24; --s-accent2: #2ec4b6; --s-real: #ff6b6b; --s-p4: #f5d76e; --s-p5: #8a8aaa;
    --s-card: rgba(255, 255, 255, 0.05); --s-panel: rgba(17, 17, 40, 0.92);
    --s-title-bg: radial-gradient(circle at 20% 20%, rgba(231, 127, 36, 0.25), transparent 50%), #111128; --s-title-ink: #f5f5f5; --s-rule: #e77f24;
    --s-font: 'Courier New', Courier, monospace; --s-head: 'Courier New', Courier, monospace;
}
.gs-deck[data-theme="terminal"] .gs-slide h2.gs-slide__h::before, .gs-deck[data-theme="terminal"] .gs-slide h1.gs-slide__title::before { content: '> '; color: var(--s-accent2); }

/* ---- slide types (pg-*) ---- */
.gs-deck .gs-slide p.pg-kick { font-size: 1.8cqw; font-weight: 800; letter-spacing: 0.4cqw; text-transform: uppercase; color: var(--s-accent2); margin-bottom: 1.2cqw; }
/* Big idea: one sentence, huge, centred */
.gs-deck .gs-slide--idea .gs-slide__body { justify-content: center; align-items: center; text-align: center; gap: 1.6cqw; }
.gs-deck .gs-slide p.pg-idea { font-family: var(--s-head); font-size: 4.6cqw; font-weight: 800; line-height: 1.2; max-width: 80cqw; color: var(--s-ink); }
.gs-deck .gs-slide--idea p.gs-slide__sub { color: var(--s-muted); opacity: 1; font-size: 2.4cqw; }
/* It's like… */
.gs-deck .pg-list--like li::before { content: '≈'; background: none; color: var(--s-accent2); font-weight: 900; top: -0.2cqw; width: auto; height: auto; font-size: 3cqw; }
/* Myth vs fact: tags in the two boxes */
.gs-deck .pg-list--myth .gs-slide__was { text-decoration: none; }
.gs-deck .gs-slide b.pg-tag { display: inline-block; margin-right: 1.2cqw; padding: 0.3cqw 0.8cqw; border-radius: 0.5cqw; font: 800 1.3cqw/1.2 var(--s-head); letter-spacing: 0.15cqw; vertical-align: middle; }
.gs-deck .gs-slide__was b.pg-tag { background: var(--s-real); color: #fff; }
.gs-deck .gs-slide__list--fixes strong b.pg-tag { background: var(--s-accent); color: var(--s-bg, #fff); }
.gs-deck[data-theme="startup"] .gs-slide__list--fixes strong b.pg-tag, .gs-deck[data-theme="chalkboard"] .gs-slide__list--fixes strong b.pg-tag,
.gs-deck[data-theme="terminal"] .gs-slide__list--fixes strong b.pg-tag { color: #111; }
/* Numbers: tiles without the sales gauges */
.gs-deck .pg-num { justify-content: center; padding: 3cqw 1.6cqw; }
.gs-deck .pg-num .gs-kpi__val { margin-top: 0; }
.gs-deck .gs-slide .pg-fake { margin-top: 0.8cqw; font-size: 1.3cqw; font-style: italic; color: var(--s-real); }
/* Quiz: the right answer lights up a few seconds after the slide shows (always on in print) */
.gs-deck .gs-slide h2.pg-quiz__q { border-bottom: 0; margin-bottom: 2.4cqw; font-size: 3.8cqw; }
.gs-deck .gs-slide ol.pg-quiz { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 2cqw; flex: 1; align-content: center; margin: 0; padding: 0 0 2cqw; }
.gs-deck .gs-slide li.pg-quiz__c {
    display: flex; align-items: center; gap: 1.6cqw; padding: 2cqw; border-radius: 1.4cqw; border: 0.3cqw solid var(--s-accent);
    background: var(--s-card); font-size: 2.7cqw; line-height: 1.25; margin: 0;
}
.gs-deck .pg-quiz__l {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 4.2cqw; height: 4.2cqw; border-radius: 50%;
    background: var(--s-accent); color: var(--s-bg, #fff); font: 800 2.2cqw/1 var(--s-head);
}
.gs-deck[data-theme="startup"] .pg-quiz__l, .gs-deck[data-theme="chalkboard"] .pg-quiz__l, .gs-deck[data-theme="terminal"] .pg-quiz__l, .gs-deck[data-theme="retro"] .pg-quiz__l { color: #111; }
.gs-deck .gs-slide li.pg-quiz__c.is-right { border-color: var(--s-accent2); box-shadow: 0 0 0 0.5cqw var(--s-accent2); }
.gs-deck .gs-slide li.pg-quiz__c.is-right::after { content: '✓'; margin-left: auto; color: var(--s-accent2); font-weight: 900; font-size: 3.4cqw; }
@keyframes pg-reveal { from { border-color: var(--s-accent); box-shadow: none; } }
@keyframes pg-reveal-tick { from { opacity: 0; transform: scale(0.2); } }
.gs-deck .is-on li.pg-quiz__c { animation: gs-s-up 0.5s both; animation-delay: calc(0.4s + var(--i, 0) * 0.2s); }
.gs-deck .is-on li.pg-quiz__c.is-right { animation: gs-s-up 0.5s both, pg-reveal 0.4s 4s both; animation-delay: calc(0.4s + var(--i, 0) * 0.2s), 4s; }
.gs-deck .is-on li.pg-quiz__c.is-right::after { animation: pg-reveal-tick 0.4s 4s both; }
/* Cards: Try this / Watch out / Real talk / Grown-ups */
.gs-deck .gs-slide--try .gs-slide__body, .gs-deck .gs-slide--watch .gs-slide__body, .gs-deck .gs-slide--real .gs-slide__body, .gs-deck .gs-slide--grownup .gs-slide__body { justify-content: center; }
.gs-deck .pg-card { padding: 3cqw 4cqw; border-radius: 2cqw; background: var(--s-card); border: 0.35cqw solid var(--s-accent); }
.gs-deck .pg-card .gs-slide__h { border-bottom: 0; padding-bottom: 0; margin-bottom: 2cqw; }
.gs-deck .gs-slide .pg-card ul.pg-card__list { flex: 0 0 auto; gap: 2cqw; padding-bottom: 0; }
.gs-deck .pg-card--try { border-style: dashed; border-color: var(--s-accent2); }
.gs-deck .pg-card--try .pg-card__list li { font-size: 3.2cqw; }
.gs-deck .pg-card--try .pg-card__list li::before { content: '👉'; background: none; top: 0; width: auto; height: auto; font-size: 2.6cqw; }
.gs-deck .pg-card--watch { border-color: var(--s-real); border-left-width: 1.6cqw; }
.gs-deck .pg-card--watch .pg-card__list li::before { background: var(--s-real); }
.gs-deck .pg-card--real { border-color: var(--s-ink); }
.gs-deck .pg-card--real .pg-card__list li::before { background: var(--s-ink); }
.gs-deck .pg-card--grownup { border-color: var(--s-accent2); border-radius: 4cqw; }
.gs-deck .pg-card--grownup .pg-card__list li::before { content: '💛'; background: none; top: 0; width: auto; height: auto; font-size: 2.4cqw; }
/* The ask */
.gs-deck .gs-slide--ask .gs-slide__body { justify-content: center; }
.gs-deck .gs-slide p.pg-ask { font-family: var(--s-head); font-size: 6cqw; font-weight: 900; line-height: 1.1; color: var(--s-accent); margin-bottom: 2.4cqw; }
.gs-deck .gs-slide ul.pg-list--ask { flex: 0 0 auto; }
/* Titles on the generator are longer than sales titles */
.gs-deck .pg-slide--title h1.gs-slide__title { font-size: 5.4cqw; }
.gs-deck .pg-slide--title p.gs-slide__sub { font-size: 2.6cqw; }
.gs-deck .pg-slide--title p.gs-slide__company { color: var(--s-accent2); opacity: 1; }

/* ---- presenter view: full screen + notes, next slide and a timer beside the slide ---- */
.gs-deck .pg-stage { display: contents; }
.gs-deck .pg-presenter { display: none; }
.gs-deck__screen.is-presenter .pg-stage {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 28vw); gap: 2vw; align-items: center;
    width: 100%; height: 100%; padding: 2vw; box-sizing: border-box;
}
.gs-deck__screen.is-presenter .gs-deck__frame { width: 100%; max-height: calc(100vh - 4vw); max-width: calc((100vh - 4vw) * 16 / 9); justify-self: center; }
.gs-deck__screen.is-presenter .pg-presenter {
    display: flex; flex-direction: column; gap: 8px; align-self: stretch; overflow: auto; padding: 18px; border-radius: 12px;
    background: #111128; color: #e0e0e0; font-family: 'Courier New', monospace; text-align: left; cursor: default;
}
.pg-presenter__top { display: flex; justify-content: space-between; color: #fff; font-weight: 700; font-size: 18px; }
.pg-presenter__clock { color: #2ec4b6; font-variant-numeric: tabular-nums; }
.gs-deck .pg-presenter p { margin: 0; padding: 0; }
.gs-deck .pg-presenter p.pg-presenter__label { margin-top: 14px; color: #e77f24; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; }
.gs-deck .pg-presenter p.pg-presenter__note { font-size: 22px; line-height: 1.4; color: #fff; }
.gs-deck .pg-presenter p.pg-presenter__next { font-size: 16px; color: #b0b0c0; }
@media (max-aspect-ratio: 1/1) {
    .gs-deck__screen.is-presenter .pg-stage { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); align-items: start; }
    .gs-deck__screen.is-presenter .gs-deck__frame { max-width: 100%; }
    .gs-deck .pg-presenter p.pg-presenter__note { font-size: 18px; }
}

/* ---- handout: two slides per portrait page, each with its note and lines to write on ---- */
@media print {
    .pg-deck--handout .pg-handout__row { break-inside: avoid; page-break-inside: avoid; margin: 0 0 0.2in; }
    .pg-deck--handout .pg-handout__row:nth-child(2n) { break-after: page; page-break-after: always; }
    .pg-deck--handout .pg-handout__row:last-child { break-after: auto; page-break-after: auto; }
    .pg-deck--handout .pg-handout__slide { width: 5.8in; margin: 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #999; container-type: inline-size; }
    .pg-deck--handout .pg-handout__slide .gs-slide { break-after: auto !important; page-break-after: auto !important; width: 100%; height: 100%; }
    .pg-deck--handout .pg-handout__notes { width: 5.8in; margin: 0.08in auto 0; font: 11pt/1.35 Verdana, Arial, sans-serif; color: #111; }
    .pg-deck--handout .pg-handout__n { margin: 0 0 0.04in; }
    .pg-deck--handout .pg-handout__line { display: block; height: 0.2in; border-bottom: 1px solid #aaa; }
}

@media (max-width: 767px) {
    .pg-deck .gs-deck__tools { grid-template-columns: 1fr auto 1fr; }
    .pg-deck .gs-deck__tools [data-deck-present] { grid-area: pdf; }
    .gs-deck .gs-slide ol.pg-quiz { gap: 1.4cqw; }
}
/* Reduced motion and print: the quiz answer shows straight away. */
@media (prefers-reduced-motion: reduce) {
    .gs-deck li.pg-quiz__c, .gs-deck li.pg-quiz__c::after { animation: none !important; }
}
/* Big Print title: the label on the dark blue needs a light colour (contrast). */
.gs-deck[data-theme="bigprint"] .pg-slide--title p.gs-slide__company { color: #ffd27a; }