/* GeekScope: ChatGPT and Claude page (ai.html). Loads after css/system.css.
   The page's one authored moment: the example conversation steps forward as you
   scroll. Each turn rises (system), each tool result stamps on, and the run sheet
   beside it ticks off the job. Everything else uses the shared utilities. */

/* ---------- hero ---------- */
.ai-hero { max-width: var(--max); margin: 0 auto; padding: 28px var(--g) 0; display: grid; gap: 48px; }
.ai-hero h1 { max-width: 12em; }
@media (max-width: 767px) { .ai-hero h1 .ln { white-space: normal; } }

/* the index the assistant searches: a readout plate with crop marks */
.idx { position: relative; margin: 0; background: var(--slide); padding: 20px 20px 18px; }
.idx-h { font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink); padding-bottom: 14px; box-shadow: 0 1px 0 var(--ink); }
.idx-l { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 16px; }
.idx-l div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 16px 0 14px; }
.idx-l dd { margin: 0; font-size: 22px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; font-variation-settings: "wdth" 100; }
.idx-l dt { font-size: 15px; line-height: 1.35; color: var(--ink-2); }
.idx-big { grid-column: 1 / -1; box-shadow: 0 1px 0 var(--rule); padding-top: 20px !important; padding-bottom: 18px !important; }
.idx-big dd { font-size: clamp(40px, 11vw, 52px); font-variation-settings: "wdth" 112; letter-spacing: -0.045em; }
.idx-big dt { font-size: 17px; color: var(--ink); font-weight: 600; }
.idx-f { padding-top: 12px; box-shadow: 0 -1px 0 var(--rule); font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
.idx-f time { font-size: 15px; }
/* crop marks sit just outside the plate's corners */
.idx .reg-tl { left: -10px; top: -10px; } .idx .reg-tr { right: -10px; top: -10px; }
.idx .reg-bl { left: -10px; bottom: -10px; } .idx .reg-br { right: -10px; bottom: -10px; }

.idx-f time { white-space: nowrap; }
@media (max-width: 559px) {
  .idx-l { grid-template-columns: minmax(0, 1fr); }
  .idx-l div:not(.idx-big) { flex-direction: row-reverse; justify-content: space-between; align-items: baseline; padding: 12px 0; box-shadow: 0 1px 0 var(--rule); }
  .idx-l div:last-child { box-shadow: none; }
  .idx-l div:not(.idx-big) dt { text-align: right; }
}
@media (min-width: 768px) {
  .idx { max-width: 460px; }
}
@media (min-width: 1100px) {
  .ai-hero { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding-top: clamp(36px, 7vh, 84px); align-items: end; }
  .ai-hero-copy { grid-column: 1 / span 7; }
  .ai-hero h1 { max-width: none; }
  .ai-hero h1 .ln { display: block; }
  .idx { grid-column: 9 / span 4; max-width: none; margin-bottom: 4px; padding: 22px 24px 18px; }
  .idx-big dd { font-size: clamp(44px, 3.7vw, 56px); }
}

/* ---------- the example conversation ---------- */
.ex { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--g) 0; display: grid; gap: 28px; }
.ex-note { margin-top: 16px; color: var(--ink-2); max-width: 26em; }
/* phone and tablet: heading, then the document, then the run sheet as a summary */
@media (max-width: 1099px) {
  .ex-side { display: contents; }
  .ex-side h2, .ex-note { order: 0; }
  .ex-note { margin-top: -12px; }
  .ex .log { order: 1; margin-top: 12px; }
  .run { order: 2; }
}

/* run sheet: what the assistant did, ticked off in pencil */
.run { margin-top: 44px; box-shadow: 0 -2px 0 var(--ink); }
.run li { display: grid; grid-template-columns: 30px 84px minmax(0, 1fr); align-items: center; column-gap: 12px; min-height: 56px; padding: 6px 0; box-shadow: 0 1px 0 var(--rule); }
.run-t { width: 28px; height: 28px; overflow: visible; }
.run-k { font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.run-v { font-size: 15px; line-height: 1.3; }
@media (max-width: 1099px) { .run { margin-top: 20px; } .run::before { content: "What the assistant did"; display: block; padding: 14px 0 6px; font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); } }

/* the document */
.doc-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-bottom: 16px; box-shadow: 0 1px 0 var(--ink); }
.doc-what { font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
.doc .turns { margin-top: 0; }
.say-col { display: grid; min-width: 0; }

/* tool results: small instrument readouts under the assistant's reply (not cards) */
.tr { margin-top: 22px; padding-top: 14px; box-shadow: 0 -1px 0 var(--rule); }
.tr-h { display: flex; justify-content: space-between; gap: 12px; font: 450 15px/1.2 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
.tr-h span:first-child { color: var(--ink); }
.tr-g { margin-top: 16px; }
.tr-svg { width: 100%; height: auto; overflow: visible; }
.tr-n { display: flex; flex-wrap: wrap; gap: 14px 40px; margin-top: 16px; }
.tr-n3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 20px; }
@media (max-width: 559px) {
  .tr-n3 { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .tr-n3 div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 14px; }
  .tr-n3 dd { min-width: 2.2em; }
}
.tr-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 40px; }
.tr-f { font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink); padding-bottom: 1px; }
.tr-n div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; }
.tr-n dd { margin: 0; font-size: 26px; line-height: 1; font-weight: 500; letter-spacing: -0.03em; font-variation-settings: "wdth" 100; }
.tr-n dt { display: inline-flex; align-items: center; gap: 8px; font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
.tr-n dt i { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; }
.tr-list { margin-top: 14px; font-size: 20px; line-height: 1.25; font-weight: 500; }
.em-o circle { fill: none; stroke: var(--ink-2); stroke-width: 1.2; }
.em-f circle { fill: var(--ink); stroke: var(--ink); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; }
.dr { transform-box: fill-box; transform-origin: center; }
.dr rect { fill: var(--plate); stroke: var(--ink); stroke-width: 1; }
.dr path { fill: none; stroke: var(--ink-2); stroke-width: 1; }


@media (min-width: 1100px) {
  .ex { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .ex-side { grid-column: 1 / span 4; position: sticky; top: 32px; }
  .ex .log { grid-column: 6 / span 7; }
}

/* ---------- what you can ask: six prompts, set unevenly ---------- */
.asks-sec { margin-top: var(--sec); background: var(--slide); }
.asks-in { max-width: var(--max); margin: 0 auto; padding: 72px var(--g) 88px; }
.asks-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.asks { margin-top: 44px; display: grid; gap: 40px; }
.a { padding-top: 16px; box-shadow: 0 -1px 0 var(--ink); }
.q { font: 600 22px/1.32 var(--sans); letter-spacing: -0.016em; text-indent: -0.42em; max-width: 26em; }
.q .nw { white-space: nowrap; }
.q-k { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 14px; font: 450 15px/1.3 var(--mono); font-variation-settings: "wdth" 87; color: var(--ink-2); }
.q-k svg { width: 14px; height: 14px; fill: var(--ink); }
.q-k .lnk { margin: -11px 0 -11px 8px; font-family: var(--sans); font-size: 16px; }
@media (max-width: 1099px) {
  .a:nth-child(even) { margin-left: 10%; }
}
@media (min-width: 1100px) {
  .asks-in { padding: 104px var(--g) 120px; }
  .asks { margin-top: 64px; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; align-items: start; }
  .a1 { grid-column: 1 / span 6; }
  .a2 { grid-column: 8 / span 5; margin-top: 84px; }
  .a3 { grid-column: 2 / span 6; margin-top: 72px; }
  .a4 { grid-column: 9 / span 4; margin-top: 40px; }
  .a5 { grid-column: 1 / span 4; margin-top: 88px; }
  .a6 { grid-column: 6 / span 7; margin-top: 64px; }
  .a1 .q, .a6 .q { font-size: clamp(28px, 2.3vw, 34px); line-height: 1.24; }
  .a3 .q { font-size: clamp(24px, 1.9vw, 28px); }
  .a2 .q, .a4 .q, .a5 .q { font-size: 22px; }
}

/* ---------- set it up in two steps: one ink rule, an arrow between ---------- */
.setup { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--g) 0; }
.two { margin-top: 44px; display: grid; }
.two li { position: relative; padding: 24px 0 36px; box-shadow: 0 -2px 0 var(--ink); }
.two li::before { content: ""; position: absolute; left: 0; top: -9px; width: 2px; height: 16px; background: var(--ink); }
.two p { font-size: 20px; line-height: 1.45; color: var(--ink-2); max-width: 24em; }
.two strong { color: var(--ink); font-weight: 650; }
/* phone: the second step hangs below the first on a short ink line with an arrowhead */
.two li + li { margin-top: 28px; }
.two li + li::after { content: none; }
@media (min-width: 900px) {
  .two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two li { padding: 28px 64px 0 0; }
  .two li + li { margin-top: 0; padding-left: 0; }
  .two li + li::after { content: ""; position: absolute; left: -14px; top: -6px; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-top: 2px solid var(--ink); transform: rotate(45deg); }
  .two li + li::before { display: none; }
}
@media (min-width: 1100px) {
  .two { margin-top: 64px; column-gap: 24px; }
  .two li { padding-right: 96px; }
  .two p { font-size: clamp(23px, 1.8vw, 26px); line-height: 1.4; max-width: 21em; }
  .two li + li::after { left: -19px; }
}

/* ---------- questions ---------- */
.faq { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--g) 0; display: grid; gap: 32px; }
.qa-i { padding: 24px 0 30px; box-shadow: 0 -1px 0 var(--rule); }
.qa-i:first-child { box-shadow: 0 -2px 0 var(--ink); }
.qa-i h3 { font-size: 21px; }
.qa-i p { margin-top: 10px; color: var(--ink-2); max-width: 38em; }
.qa-src { font: 450 15px/1.45 var(--mono); font-variation-settings: "wdth" 87; overflow-wrap: anywhere; }
.qa-src time { font-size: 15px; white-space: nowrap; }
.qa-i .lnk { margin-top: 6px; }
@media (min-width: 1100px) {
  .faq { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .faq h2 { grid-column: 1 / span 4; position: sticky; top: 32px; }
  .qa { grid-column: 6 / span 7; }
  .qa-i h3 { font-size: 23px; }
}

/* ---------- closing band ---------- */
.close { margin-top: var(--sec); background: var(--slide); box-shadow: 0 -1px 0 var(--ink); }
.close-in { position: relative; max-width: var(--max); margin: 0 auto; padding: 64px var(--g) 72px; display: grid; gap: 4px; }
@media (max-width: 767px) { .close h2 .ln { white-space: normal; } }
.close-in .reg-tl, .close-in .reg-tr { top: 28px; }
.close-in .reg-bl, .close-in .reg-br { bottom: 28px; }
@media (min-width: 1100px) {
  .close-in { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; padding: 104px var(--g) 112px; }
  .close h2 { grid-column: 1 / span 8; }
  .close h2 .ln { display: block; }
  .close .actions { grid-column: 9 / span 4; justify-content: flex-end; margin-top: 0; }
}

/* ==========================================================================
   The authored moment: the conversation steps forward as you scroll.
   Final state is the default; this block only runs with support, motion allowed
   and no ?still. Each tool result names a view timeline so the run sheet,
   sticky beside the document, can tick in step with it.
   ========================================================================== */
.ex { timeline-scope: --r1, --r2, --r3, --r4; }
.tr-1 { view-timeline: --r1 block; }
.tr-2 { view-timeline: --r2 block; }
.tr-3 { view-timeline: --r3 block; }
.tr-4 { view-timeline: --r4 block; }
@keyframes ac-land { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
@keyframes ac-dim { from { opacity: 0.32; } to { opacity: 1; } }

.tr-1, .run-1 { --tl: --r1; }
.tr-2, .run-2 { --tl: --r2; }
.tr-3, .run-3 { --tl: --r3; }
.tr-4, .run-4 { --tl: --r4; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* the result lands like a stamp, then its parts come up in order */
    html:not(.still) .tr { transform-origin: 0 0; animation: ac-land linear both; animation-timeline: var(--tl); animation-range: cover 14% cover 26%; }
    html:not(.still) .tr .tr-g { animation: tl-develop linear both; animation-timeline: var(--tl); animation-range: cover 18% cover 32%; }
    html:not(.still) .tr .tr-n div { transform-origin: 0 100%; animation: tl-stamp linear both; animation-timeline: var(--tl); }
    html:not(.still) .tr .tr-n div:nth-child(1) { animation-range: cover 24% cover 30%; }
    html:not(.still) .tr .tr-n div:nth-child(2) { animation-range: cover 28% cover 34%; }
    html:not(.still) .tr .tr-n div:nth-child(3) { animation-range: cover 32% cover 38%; }
    html:not(.still) .tr .tr-list { transform-origin: 0 50%; animation: tl-stamp linear both; animation-timeline: var(--tl); animation-range: cover 20% cover 27%; }
    /* the verified emails fill one by one; the drafts land one by one */
    html:not(.still) .em-f circle, html:not(.still) .dr { animation: tl-stamp linear both; animation-timeline: var(--tl); animation-range: cover calc(16% + var(--i) * 0.6%) cover calc(19% + var(--i) * 0.6%); }
  }
}
/* the run sheet ticks in step with the document (needs timeline-scope) */
@supports (animation-timeline: view()) and (timeline-scope: none) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.still) .run li { animation: ac-dim linear both; animation-timeline: var(--tl); animation-range: cover 10% cover 24%; }
    html:not(.still) .run .gp { stroke-dasharray: 1 2; animation: tl-draw linear both; animation-timeline: var(--tl); animation-range: cover 22% cover 34%; }
  }
}

/* CSP-safe positions from the approved mockup. */
.ai-position-1 { --i:0; }
.ai-position-2 { --i:1; }
.ai-position-3 { --i:2; }
.ai-position-4 { --i:3; }
.ai-position-5 { --i:4; }
.ai-position-6 { --i:5; }
.ai-position-7 { --i:6; }
.ai-position-8 { --i:7; }
.ai-position-9 { --i:8; }
.ai-position-10 { --i:9; }
.ai-position-11 { --i:10; }
.ai-position-12 { --i:11; }
.ai-position-13 { --i:12; }
.ai-position-14 { --i:13; }
.ai-position-15 { --i:14; }
.ai-position-16 { --i:15; }
.ai-position-17 { --i:16; }
.ai-position-18 { --i:17; }
.ai-position-19 { --i:18; }
.ai-position-20 { --i:19; }
.ai-position-21 { --i:20; }
.ai-position-22 { --i:21; }
.ai-position-23 { --i:22; }
.ai-position-24 { --i:23; }
.ai-position-25 { --i:24; }
.ai-position-26 { --i:25; }
.ai-position-27 { --i:26; }