/* ════════════════════════════════════════════════════════════════════════
   program-shots.css  ·  Invisible (program detail pages — REWORK)
   ────────────────────────────────────────────────────────────────────────
   Static, screenshot-grade "real product" captures that REINFORCE the
   auto-playing program-loops (per the boss's note: "the animations are good,
   but could be reinforced with even a couple more real screenshots").

   Two surfaces, both built in the site's vanilla-CSS mock idiom, both framed
   in the shared .product-mock browser chrome so they read as real captures:

     1. .pshot         — the Invisible web app's PROGRAM view (sidebar + the
                         real day-by-day steps with type badges + status).
                         The single most literal "screenshot of the program";
                         de-abstracts the timeline by showing the same week
                         exactly as it appears in the product.
     2. .cshot         — the CLAUDE step: the Invisible MCP "program step" card
                         rendered inside Claude (the widget the real Claude
                         step shows), for the learn-claude page.

   Brand-faithful: Invisible sage/coral/ink/cream tokens (NOT restyled), the
   serif/mono/inter type system, flat dot-language. Coral stays the one rare
   accent — used only for the single "you are here" active step. Static by
   nature (a screenshot doesn't animate), so no reduced-motion concerns beyond
   the shared chrome.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Band wrapper: a section that frames one or more screenshot panels.
   Backgrounds slot into the page's alternation (white → sage → white …). ── */
.shot-band { padding: clamp(72px, 9vw, 120px) clamp(24px, 5vw, 64px); background: var(--white); }
.shot-band--sage {
  background: var(--secondary);
  background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1.5px);
  background-size: 20px 20px;
}
.shot-band--warm { background: var(--surface-warm); }
.shot-band .section-header { margin-bottom: clamp(28px, 4vw, 40px); }
.shot-band--sage .section-header h2 { color: var(--white); }
.shot-band--sage .section-header h2 em { color: rgba(255,255,255,0.7); }
.shot-band--sage .section-header .overline { color: var(--on-sage); opacity: .9; }
.shot-band--sage .section-header .overline::before { background: var(--on-sage); }
.shot-band--sage .product-subtitle { color: var(--on-sage); }
.shot-band--sage .shot-caption { color: var(--on-sage); opacity: .82; }
.shot-band--sage .shot-caption .dot { color: var(--white); }
.shot-band .product-subtitle { max-width: 60ch; margin: 0 auto clamp(26px, 3.4vw, 38px); text-align: center; }

/* ── Stage: centers a screenshot panel, gives it breathing room ─────────── */
.pshot-stage { display: flex; justify-content: center; padding: 6px 0 2px; }
.pshot-stage .product-mock { width: 100%; max-width: 880px; margin: 0 auto; }
/* keep the chrome URL on one line (long program paths shouldn't wrap the pill).
   NB: must be display:block — text-overflow:ellipsis is a no-op on the base
   rule's display:flex, which would hard-clip the URL mid-word with no ellipsis. */
.pshot-stage .product-mock-bar .product-mock-url { display: block; line-height: 22px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* a small label that reads "this is a real capture", like a figure caption */
.shot-caption {
  max-width: 880px; margin: 16px auto 0; text-align: center;
  font-family: 'DM Mono', monospace; font-size: 11.5px; letter-spacing: .04em;
  color: var(--muted); line-height: 1.5;
}
.shot-caption .dot { color: var(--secondary); }

/* ════════════════ 1 · IN-APP PROGRAM VIEW (.pshot) ════════════════════ */
.pshot {
  display: grid;
  grid-template-columns: 168px 1fr;
  background: var(--white);
  min-height: 430px;
  text-align: left;
  font-family: 'Inter', system-ui, sans-serif;
}

/* — left sidebar — */
.pshot-side {
  background: color-mix(in oklab, var(--surface-warm) 70%, var(--white));
  border-right: 1px solid var(--line);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 22px;
}
.pshot-brand { display: flex; align-items: center; gap: 8px; padding: 2px 6px 0; }
.pshot-brand-mark {
  width: 18px; height: 18px; border-radius: 5px; background: var(--primary);
  flex-shrink: 0; position: relative;
}
/* dotted-i echo of the real mark */
.pshot-brand-mark::before {
  content: ''; position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  width: 2.5px; height: 2.5px; border-radius: 50%; background: var(--white);
  box-shadow: 0 4px 0 var(--white), 0 7px 0 var(--white);
}
.pshot-brand-word { font-family: 'DM Mono', monospace; font-size: 13px; letter-spacing: .02em; color: var(--ink); }

.pshot-nav { display: flex; flex-direction: column; gap: 2px; }
.pshot-navitem {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 8px; border-radius: 7px;
  font-size: 12.5px; color: var(--muted); position: relative;
}
.pshot-navico {
  width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0;
  border: 1.5px solid var(--faint);
}
.pshot-navitem.is-active { background: var(--white); color: var(--ink); box-shadow: 0 1px 2px rgba(18,28,26,.05); font-weight: 500; }
.pshot-navitem.is-active .pshot-navico { border-color: var(--secondary); background: color-mix(in oklab, var(--secondary) 28%, var(--white)); }

.pshot-user { margin-top: auto; display: flex; align-items: center; gap: 9px; padding: 8px 6px 2px; border-top: 1px solid var(--line); }
.pshot-avatar { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in oklab, var(--secondary) 45%, var(--white)); flex-shrink: 0; }
.pshot-username { font-size: 12px; color: var(--body-color); }

/* — main panel — */
.pshot-main { padding: 22px clamp(20px, 3vw, 30px) 24px; display: flex; flex-direction: column; }
.pshot-crumb { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--subtle); margin-bottom: 16px; }
.pshot-crumb span { margin: 0 5px; color: var(--faint); }
.pshot-eyebrow { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--secondary); margin-bottom: 7px; }
.pshot-title { font-family: 'Newsreader', serif; font-size: clamp(22px, 2.6vw, 27px); font-weight: 500; color: var(--ink); line-height: 1.1; margin-bottom: 7px; }
.pshot-sub { font-size: 13px; line-height: 1.5; color: var(--body-color); max-width: 52ch; margin-bottom: 18px; }

.pshot-progress { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.pshot-progress-bar { flex: 1; max-width: 230px; height: 5px; border-radius: 999px; background: var(--wash); overflow: hidden; }
.pshot-progress-bar i { display: block; height: 100%; background: var(--secondary); border-radius: 999px; }
.pshot-progress-label { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); white-space: nowrap; }

.pshot-steps { list-style: none; display: flex; flex-direction: column; }
.pshot-step {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 14px;
  padding: 13px 12px; border-radius: 10px; border: 1px solid transparent;
}
.pshot-step + .pshot-step { border-top: 1px solid var(--line); border-radius: 0; }
.pshot-step-main { display: block; min-width: 0; }
.pshot-step-status { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--faint); position: relative; flex-shrink: 0; }
.pshot-step.is-done .pshot-step-status { background: var(--secondary); border-color: var(--secondary); }
.pshot-step.is-done .pshot-step-status::after {
  content: ''; position: absolute; left: 5px; top: 3px; width: 4px; height: 8px;
  border: solid var(--white); border-width: 0 1.6px 1.6px 0; transform: rotate(42deg);
}
.pshot-step-label { display: block; font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--subtle); margin-bottom: 2px; }
.pshot-step-title { display: block; font-size: 14px; color: var(--ink); line-height: 1.25; }
.pshot-step.is-upcoming .pshot-step-title,
.pshot-step.is-upcoming .pshot-step-label { color: var(--faint); }
.pshot-step.is-upcoming .pshot-step-status { border-style: dashed; }

.pshot-step-badge {
  font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--muted); background: var(--white);
}
.pshot-step-badge[data-type="claude"] { color: #b25e3f; border-color: color-mix(in oklab, #d97757 40%, var(--line)); background: var(--claude-cream, #F4EFE4); }
.pshot-step-badge[data-type="coaching"] { color: var(--secondary-text, #5c6f6c); border-color: color-mix(in oklab, var(--secondary) 40%, var(--line)); }
.pshot-step-badge[data-type="practice"] { color: var(--muted); }

/* the single ACTIVE step — the one rare coral accent on the panel */
.pshot-step.is-active {
  background: color-mix(in oklab, var(--primary) 5%, var(--white));
  border-color: color-mix(in oklab, var(--primary) 28%, var(--line));
  border-radius: 10px;
}
.pshot-step.is-active + .pshot-step { border-top-color: transparent; }
.pshot-step.is-active .pshot-step-status { border-color: var(--primary); background: var(--white); }
.pshot-step.is-active .pshot-step-status::before {
  content: ''; position: absolute; inset: 3.5px; border-radius: 50%; background: var(--primary);
}
.pshot-step.is-active .pshot-step-title { font-weight: 500; }
.pshot-step-cta {
  font-family: 'DM Mono', monospace; font-size: 11px; color: var(--white);
  background: var(--ink); border-radius: 999px; padding: 6px 13px; white-space: nowrap;
}

@media (max-width: 720px) {
  .pshot { grid-template-columns: 1fr; }
  .pshot-side { flex-direction: row; align-items: center; gap: 14px; border-right: none; border-bottom: 1px solid var(--line); padding: 12px 14px; overflow: hidden; }
  .pshot-side .pshot-nav { flex-direction: row; gap: 4px; flex: 1; overflow: hidden; }
  .pshot-navitem { padding: 6px 9px; }
  .pshot-navitem span:not(.pshot-navico) { display: none; }
  .pshot-navitem.is-active span:not(.pshot-navico) { display: inline; }
  .pshot-user { display: none; }
  .pshot-step { grid-template-columns: 20px 1fr; }
  .pshot-step-badge { display: none; }
  .pshot-step-cta { grid-column: 2; justify-self: start; margin-top: 6px; }
}

/* ════════════════ 2 · CLAUDE STEP — the MCP step card (.cshot) ═════════
   Reuses the real-Claude fidelity already in program-loops.css (cream, the
   spark mark, "Claude Sonnet 4.5"). Adds the Invisible MCP step-card widget
   that the actual Claude step renders when you open the link. Static.        */
.cshot-card {
  align-self: stretch; margin: 2px 0 4px;
  border: 1px solid color-mix(in oklab, var(--secondary) 30%, var(--line));
  border-left: 3px solid var(--secondary);
  border-radius: 12px; background: var(--white);
  box-shadow: 0 10px 30px -22px rgba(18,28,26,.5);
  overflow: hidden;
}
.cshot-card-top {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; background: color-mix(in oklab, var(--secondary) 10%, var(--white));
  border-bottom: 1px solid color-mix(in oklab, var(--secondary) 22%, var(--line));
}
.cshot-card-mark { width: 16px; height: 16px; border-radius: 4px; background: var(--primary); flex-shrink: 0; position: relative; }
.cshot-card-mark::before { content: ''; position: absolute; left: 50%; top: 3.5px; transform: translateX(-50%); width: 2px; height: 2px; border-radius: 50%; background: var(--white); box-shadow: 0 3.5px 0 var(--white), 0 6px 0 var(--white); }
.cshot-card-app { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: .04em; color: var(--secondary-text, #5c6f6c); }
.cshot-card-app b { color: var(--ink); font-weight: 500; }
.cshot-card-badge { margin-left: auto; font-family: 'DM Mono', monospace; font-size: 9.5px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 3px 8px; }
.cshot-card-body { padding: 14px 16px 16px; }
.cshot-card-eyebrow { font-family: 'DM Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--secondary); margin-bottom: 5px; }
.cshot-card-title { font-family: 'Newsreader', serif; font-size: 18px; font-weight: 500; color: var(--ink); line-height: 1.2; margin-bottom: 11px; }
.cshot-card-list { list-style: none; display: flex; flex-direction: column; gap: 9px; margin-bottom: 13px; }
.cshot-card-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.4; color: var(--body-color); position: relative; }
.cshot-card-list li > .ck { position: relative; width: 15px; height: 15px; border-radius: 50%; background: var(--secondary); flex-shrink: 0; margin-top: 1px; }
.cshot-card-list li > .ck::after { content: ''; position: absolute; left: 5px; top: 3px; width: 3px; height: 6px; border: solid var(--white); border-width: 0 1.4px 1.4px 0; transform: rotate(42deg); }
.cshot-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.cshot-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Mono', monospace; font-size: 10.5px; color: var(--ink);
  background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px;
}
.cshot-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2faa6a; }
.cshot-card-note { margin-left: auto; font-family: 'Inter', sans-serif; font-size: 11px; color: var(--secondary-text, #5c6f6c); display: inline-flex; align-items: center; gap: 6px; }
.cshot-card-note::before { content: ''; width: 12px; height: 12px; border-radius: 3px; background: var(--secondary); flex-shrink: 0; }