/* ═══════════════════════════════════════════════════════════════════════════
   Pure Pressed Co. — Chrome for Developers Progressive Enhancements (v1)
   1. Cross-Document & Same-Document View Transitions (@view-transition)
   2. CSS Scroll-Driven Reading Progress Bar (animation-timeline: scroll())
   3. Built-in AI Summary Bar (Summarizer / LanguageModel + deterministic fallback)
   ═══════════════════════════════════════════════════════════════════════════ */

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .pp-brand,
  .pp-soon-brand {
    view-transition-name: pp-brand;
  }

  .pp-mark,
  .pp-soon-mark {
    view-transition-name: pp-mark;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

/* ─── Scroll-Driven Reading Progress Bar ───────────────────────────────── */
.pp-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 90;
  pointer-events: none;
  background: linear-gradient(90deg, var(--olive, #5B6E4A) 0%, var(--gold, #C29B38) 100%);
  transform-origin: 0 50%;
  transform: scaleX(0);
  opacity: 0;
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .pp-scroll-progress {
      opacity: 0.92;
      animation: pp-scroll-bar linear both;
      animation-timeline: scroll(root block);
    }
  }
}

@keyframes pp-scroll-bar {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* ─── Built-in AI / Plain-English Summary Card ─────────────────────────── */
.pp-ai-brief {
  margin: 22px 0 26px;
  padding: 16px 18px;
  border-radius: 10px;
  border: 1px solid rgba(91, 110, 74, 0.24);
  background: rgba(249, 246, 240, 0.78);
  box-shadow: 0 2px 10px rgba(44, 34, 24, 0.04);
}

.pp-ai-brief-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pp-ai-brief-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--olive, #5B6E4A);
  font-weight: 600;
}

.pp-ai-brief-badge {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: none;
  font-weight: 400;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(91, 110, 74, 0.12);
  color: var(--ink-soft, #5A4633);
}

.pp-ai-brief-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pp-ai-brief-btn {
  appearance: none;
  border: 1px solid rgba(91, 110, 74, 0.35);
  background: rgba(255, 253, 249, 0.9);
  color: var(--ink, #2C2218);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.2;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, transform 120ms ease;
}

.pp-ai-brief-btn:hover {
  background: rgba(91, 110, 74, 0.12);
  border-color: var(--olive, #5B6E4A);
}

.pp-ai-brief-btn[aria-pressed="true"] {
  background: var(--olive, #5B6E4A);
  border-color: var(--olive, #5B6E4A);
  color: var(--cream, #F9F6F0);
}

.pp-ai-brief-out {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(91, 110, 74, 0.18);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink-soft, #5A4633);
}

.pp-ai-brief-out ul {
  margin: 0;
  padding-left: 18px;
}

.pp-ai-brief-out li + li {
  margin-top: 5px;
}