/* ═══════════════════════════════════════════════════════
   adaptive-visual-experience.css
   Page-specific styles only. Loaded after resource-page.css.
   ═══════════════════════════════════════════════════════ */

/* ── Inline code ── */
code {
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 400;
  background: var(--warm-100);
  color: var(--ink-700);
  padding: 2px 5px;
  border-radius: var(--r-sm);
}

/* ── Chain code blocks ── */
.ave-code-block {
  background: var(--navy);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: 28px 0;--amber:#f59e0b;}
.ave-code-label {
  display: block;
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--amber);
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.2);
}
.ave-code-block code {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px; font-weight: 400; line-height: 1.7;
  color: rgba(255,255,255,.82);
  background: none;
  padding: 20px;
  white-space: pre-wrap;
  word-break: break-all;
}

/* ── Live demo embed ── */
.ave-demo-frame {
  border-radius: var(--r-xl);
  border: 1px solid var(--warm-200);
  box-shadow: var(--shadow-lg);
  background: var(--white);
  margin: 36px 0;
  /* overflow must NOT be hidden — clips iframe to frame height */
  overflow: visible;
}
.ave-demo-frame > .ave-demo-label {
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  overflow: hidden;
}
.ave-demo-frame > .ave-demo-scroll-wrap {
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  overflow: hidden;
}
.ave-demo-label {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px;
  background: var(--warm-50);
  border-bottom: 1px solid var(--warm-200);
  font-family: var(--f-sans);
  font-size: 12px; font-weight: 400; color: var(--ink-500);
}
.ave-demo-label-tag {
  font-family: var(--f-mono);
  font-size: 9px; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--amber);
  background: var(--amber-soft);
  padding: 3px 8px; border-radius: var(--r-sm);
  flex-shrink: 0;
}
.ave-demo-frame iframe {
  width: 100%; height: 838px;
  border: none; display: block;
}

/* ── Metrics note ── */
.ave-metrics-note {
  font-family: var(--f-sans);
  font-size: 12px; font-weight: 300;
  line-height: 1.6; color: var(--ink-400);
  margin-top: -28px; margin-bottom: 32px;
  font-style: italic;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ave-demo-frame iframe { height: 700px; }
  .ave-code-block code { font-size: 11px; padding: 16px; }
}
@media (max-width: 480px) {
  .ave-demo-frame iframe { height: 600px; }
  .ave-code-block { border-radius: var(--r-md); }
  .ave-code-block code { font-size: 10.5px; padding: 12px; }
}

/* ── Screen: hide print notice; Print: hide iframe frame ── */
.ave-demo-print-notice { display: none; }
.ave-demo-screen-only  { display: block; }

/* ── Scroll wrap — overflow:visible in print forces iframe content to reflow ── */
.ave-demo-scroll-wrap {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

@media print {
  /* Overflow trick — makes browser render iframe content inline for print */
  .ave-demo-scroll-wrap { overflow: visible !important; }
  .ave-demo-frame { overflow: visible !important; }

  /* Hide the static fallback — iframe will render via overflow trick */
  .ave-demo-print-notice { display: none !important; }

  /* Keep iframe visible */
  .ave-demo-screen-only { display: block !important; }
  .ave-demo-frame { display: block !important; }
  .ave-demo-frame iframe { display: block !important; overflow: visible !important; /* height set by doPrint() JS inline style */ }

  /* Show the static render grid only if iframe fails */
  /* Fallback styles kept for reference */
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 36px 0;
    border: 1px solid #ccc;
    border-radius: 8px;
    overflow: hidden;
    break-inside: avoid; page-break-inside: avoid;
  }
  .ave-demo-print-header {
    display: flex !important;
    align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 10px 16px;
    background: #f5f4f0;
    border-bottom: 1px solid #ccc;
  }
  .ave-demo-print-notice .ave-demo-label-tag {
    background: #f5ede0; color: #7a3a00;
    padding: 2px 8px; border-radius: 3px;
    font-size: 8pt; flex-shrink: 0;
  }
  .ave-demo-print-url {
    font-size: 9pt; color: #666;
  }
  .ave-demo-print-renders {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .ave-demo-print-render {
    display: block !important;
    margin: 0; padding: 12px;
    border-right: 1px solid #e0ddd5;
  }
  .ave-demo-print-render:last-child { border-right: none; }
  .ave-demo-print-render img {
    width: 100%; height: auto; display: block;
    border-radius: 4px; border: 1px solid #ddd;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .ave-demo-print-render figcaption {
    font-size: 8pt; color: #888;
    text-align: center; margin-top: 6px;
    font-family: monospace;
  }
  .ave-demo-print-caption {
    display: block !important;
    padding: 10px 16px;
    background: #f5f4f0;
    border-top: 1px solid #ccc;
    font-size: 9pt; color: #666;
    line-height: 1.5; margin: 0 !important;
    font-style: italic;
  }
}