/* Production overrides: examples are white work surfaces, not tinted mock cards. */
/* The full-bleed experience background is 100vw and exceeds the page by the scrollbar width. */
html {
  overflow-x: clip;
}

body,
.experience,
.capabilities,
.download-section,
.closing-download,
.site-footer {
  background: #fff;
}

.evidence-studio,
.evidence-studio[data-scene="work"],
.evidence-studio[data-scene="review"],
.scene-canvas,
.evidence-report,
.writing-document,
.review-layout,
.annotated-document,
.review-inspector,
.live-window,
.animated-feature,
.visual-work,
.visual-scholar,
.visual-review,
.visual-gate {
  background: #fff !important;
}

.animated-feature::before {
  display: none !important;
}

.animated-feature {
  border: 1px solid #e4e4e7 !important;
  box-shadow: none !important;
}

.live-window {
  border-color: #dedee3;
  box-shadow: 0 10px 28px rgba(20, 20, 30, 0.08);
}

.live-window-bar,
.live-window-footer,
.studio-bar,
.playback-console {
  background: #fff !important;
}

.live-files,
.live-report-summary,
.review-inspector,
.report-interpretation,
.source-detail:has(strong) {
  background: #fafafa !important;
}

.evidence-tabs button {
  background: #fff !important;
}

.platform-card:not(.is-available) .platform-download,
.dialog-confirm:disabled {
  opacity: 0.58;
}

.dialog-confirm:not(:disabled) {
  opacity: 1;
}

.release-status-note {
  margin: 20px 0 0;
  color: #777;
  font-size: 11px;
  line-height: 1.8;
  text-align: center;
}

.dialog-release-notice {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px;
  color: #666;
  font-size: 11px;
  line-height: 1.8;
  background: #f5f5f5;
  border-radius: 7px;
}

.dialog-release-notice svg {
  width: 14px;
  height: 14px;
  margin-top: 3px;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .release-status-note {
    font-size: 9px;
  }
}

/* Compact desktop download dialog, retaining the monochrome palette. */
#download-dialog { width: min(480px, calc(100vw - 32px)); padding: 32px; border-radius: 24px; box-shadow: 0 24px 80px #00000026; max-height: calc(100dvh - 32px); overflow-y: auto; }
#download-dialog .dialog-icon { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 22px; }
#download-dialog .eyebrow { font-size: 11px; letter-spacing: .8px; margin-bottom: 8px; }
#download-dialog h2 { font-size: 28px; line-height: 1.3; letter-spacing: -.8px; }
#download-dialog #dialog-description { margin-top: 14px; font-size: 12px; line-height: 1.85; }
#download-dialog .dialog-platforms { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 24px 0 14px; }
#download-dialog .dialog-platforms button { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; min-width: 0; border-radius: 14px; border: 1px solid #ddd; text-align: left; transition: background .18s, border-color .18s; }
#download-dialog .dialog-platforms button:hover { background: #fafafa; border-color: #aaa; }
#download-dialog .dialog-platforms button.is-selected { border-color: #555; background: #f4f4f4; box-shadow: inset 0 0 0 1px #555; }
#download-dialog .dialog-platforms button > svg:first-child { width: 24px; height: 24px; }
#download-dialog .dialog-platforms button > svg:last-child { position: absolute; top: 17px; right: 14px; width: 16px; height: 16px; }
#download-dialog .dialog-platforms button span { font-size: 15px; font-weight: 500; }
#download-dialog .dialog-platforms button small { display: block; margin-top: 6px; font-size: 10px; font-weight: 400; line-height: 1.6; }
#download-dialog .dialog-version { color: #777; font-size: 10px; line-height: 1.7; margin: 0 0 20px; overflow-wrap: anywhere; }
#download-dialog .dialog-confirm { width: 100%; min-height: 48px; margin-top: 6px; border-radius: 12px; font-size: 14px; }
#download-dialog .dialog-back { margin-top: 18px; font-size: 11px; }
#download-dialog .dialog-close { top: 16px; right: 16px; }
@media (max-width: 420px) { #download-dialog { padding: 26px 22px; } #download-dialog h2 { font-size: 25px; } #download-dialog .dialog-platforms button { padding: 15px 12px; } }

#download-dialog .architecture-confirm { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 20px; padding: 4px 0; border: 0; background: transparent; cursor: pointer; }
#download-dialog .architecture-confirm input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: #222; flex-shrink: 0; }
#download-dialog .architecture-confirm span { display: grid; gap: 5px; color: #333; font-size: 11px; line-height: 1.6; }
#download-dialog .architecture-confirm small { color: #777; font-size: 10px; }
