/* Library detail viewer — authoritative comparison surface, 2026-08-17.
 * Detail compares authored screens, not phone hardware. Image, flow preview and
 * live demo share one neutral 390 x 844 viewport. */

.preview-dialog {
  width: min(1180px, calc(100% - 36px)) !important;
  height: min(920px, calc(100dvh - 36px)) !important;
  max-width: none !important;
  max-height: none !important;
  margin: auto !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-radius: 20px !important;
  background: #f4f4f0 !important;
  color: #22221f;
  box-shadow: 0 30px 90px rgba(18,18,16,.22) !important;
}
.preview-dialog::backdrop { background: rgba(24,24,22,.38) !important; backdrop-filter: blur(4px); }
.preview-dialog-content {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) 388px !important;
  width: 100%; height: 100%; gap: 0 !important; padding: 0 !important;
  overflow: hidden !important; background: #f4f4f0 !important;
}

/* Media side */
.preview-media-stage {
  grid-column: 1 !important; grid-row: 1 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0,1fr) auto auto !important;
  align-items: center !important; justify-items: center !important;
  min-width: 0 !important; min-height: 0 !important;
  gap: 12px !important; padding: 18px 22px 16px !important;
  overflow: hidden !important; border: 0 !important;
  border-right: 1px solid #deded8 !important; border-radius: 0 !important;
  background: #ecece7 !important;
}
.preview-mode-head {
  display: grid !important; grid-template-columns: auto minmax(0,1fr) auto !important;
  align-items: center !important; width: 100% !important; min-height: 40px; gap: 14px;
}
.preview-mode-caption { color:#888881; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.preview-mode-badge {
  justify-self:end; padding:5px 8px; border:1px solid #d6d6d0; border-radius:999px;
  background:rgba(255,255,255,.70); color:#6e6e67; font-size:10px; font-weight:700; white-space:nowrap;
}
.preview-mode-switch {
  display:inline-flex !important; justify-self:start !important; width:fit-content !important;
  min-width:0 !important; padding:3px !important; gap:2px !important;
  border:1px solid #d6d6d0 !important; border-radius:999px !important;
  background:rgba(255,255,255,.78) !important;
}
.preview-mode-switch[hidden] { display:none !important; }
.preview-mode-switch button {
  min-height:30px !important; padding:0 11px !important; border:0 !important;
  border-radius:999px !important; background:transparent !important; color:#85857e !important;
  font-size:11px !important; font-weight:750 !important; white-space:nowrap; box-shadow:none !important;
}
.preview-mode-switch button:hover { color:#272723 !important; }
.preview-mode-switch button.is-active { background:#252521 !important; color:#fff !important; }
.preview-mode-switch button.is-active::after { display:none !important; }

/* Neutral screen viewport: explicitly erase shared PhoneShell hardware chrome. */
#previewMediaFrame,
#previewMediaFrame:not(.is-artboard-preview),
#previewMediaFrame.is-source-video {
  position:relative !important; isolation:isolate;
  width:min(344px,calc(100% - 64px),calc((100dvh - 220px) * 390 / 844)) !important;
  height:auto !important; max-width:calc(100% - 64px) !important; max-height:calc(100dvh - 220px) !important;
  aspect-ratio:390 / 844 !important; margin:0 !important; padding:0 !important;
  overflow:hidden !important; border:1px solid rgba(29,29,26,.12) !important;
  border-radius:28px !important; background:#fff !important;
  box-shadow:0 20px 48px -28px rgba(23,23,20,.52) !important;
}
#previewMediaFrame::before,#previewMediaFrame::after { display:none !important; }
#previewMediaFrame .phone-screen,
#previewMediaFrame:not(.is-artboard-preview) .phone-screen,
#previewMediaFrame.is-source-video .phone-screen {
  position:relative !important; width:100% !important; height:100% !important;
  overflow:hidden !important; border-radius:27px !important; background:#fff !important;
}
#previewMediaFrame .phone-media:not(iframe),
#previewMediaFrame:not(.is-artboard-preview) .phone-media:not(iframe),
#previewMediaFrame.is-source-video .phone-media:not(iframe) {
  position:absolute !important; inset:0 !important; display:block;
  width:100% !important; height:100% !important; max-width:none !important; max-height:none !important;
  border:0 !important; object-fit:contain !important; object-position:center !important;
  transform:none !important; background:#fff !important;
}
#previewMediaFrame .phone-media[hidden] { display:none !important; visibility:hidden !important; }
#previewMediaFrame .phone-media:not([hidden]) {
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  z-index:1 !important;
}
/* Legacy raw recordings that still include a generous device board get a small
 * case-scoped crop. Most affected cases now use canonical screen sequences. */
#previewMediaFrame.is-source-video[data-preview-case-id="loy"] #previewDialogVideo,
#previewMediaFrame.is-source-video[data-preview-case-id="moe"] #previewDialogVideo,
#previewMediaFrame.is-source-video[data-preview-case-id="reflect"] #previewDialogVideo,
#previewMediaFrame.is-source-video[data-preview-case-id="moodly"] #previewDialogVideo,
#previewMediaFrame.is-source-video[data-preview-case-id="softly-reflections"] #previewDialogVideo {
  inset:-5% !important; width:110% !important; height:110% !important;
  object-fit:cover !important; object-position:center !important;
}
#previewMediaFrame:not(.is-artboard-preview) iframe.phone-media {
  position:absolute !important; top:50% !important; left:50% !important; inset:auto !important;
  display:block !important; width:var(--preview-source-width,390px) !important;
  height:var(--preview-source-height,844px) !important; max-width:none !important; max-height:none !important;
  border:0 !important; border-radius:0 !important; background:#fff !important;
  transform:translate(-50%,-50%) scale(var(--preview-embed-scale,1)) !important;
  transform-origin:center !important;
}

/* Live demos own a responsive 390 x 844 document. Let the iframe fill the
 * actual phone viewport instead of rendering a fixed canvas and scaling it;
 * the latter crops the left half when the dialog narrows. */
#previewMediaFrame:not(.is-artboard-preview):not(.is-source-video) iframe.phone-media {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  transform-origin: center center !important;
}
#previewMediaFrame.is-artboard-preview {
  width:min(620px,calc(100% - 44px)) !important; max-width:calc(100% - 44px) !important;
  aspect-ratio:var(--adaptive-media-ratio,4 / 3) !important; border-radius:16px !important; background:transparent !important;
}
#previewMediaFrame.is-artboard-preview .phone-screen { border-radius:15px !important; background:transparent !important; }
#previewMediaFrame.is-artboard-preview .phone-media:not(iframe) { object-fit:contain !important; object-position:center !important; background:transparent !important; }
.preview-image-navigation { display:none !important; }

.preview-screen-rail {
  display:flex !important; justify-content:center; width:100%; max-width:620px; min-height:62px;
  gap:7px; overflow-x:auto; padding:1px 2px 4px; scrollbar-width:none;
}
.preview-screen-rail::-webkit-scrollbar { display:none; }
.preview-screen-rail[hidden] { display:none !important; }
.preview-screen-rail button {
  display:grid; grid-template-columns:32px auto; align-items:center; flex:0 0 auto;
  min-width:86px; min-height:54px; padding:4px 8px 4px 4px; gap:6px;
  border:1px solid #d6d6d0; border-radius:10px; background:rgba(255,255,255,.60);
  color:#777770; font-size:10px; font-weight:700; text-align:left;
}
.preview-screen-rail button:hover,.preview-screen-rail button.is-active { border-color:#292925; background:#fff; color:#22221f; }
.preview-screen-rail button.is-active { box-shadow:0 0 0 1px #292925 inset; }
.preview-screen-rail img { display:block; width:32px; height:44px; object-fit:cover; object-position:top center; border-radius:5px; background:#ddd; }

.preview-media-toolbar {
  display:none !important; width:min(430px,100%); grid-template-columns:30px minmax(90px,1fr) auto 30px;
  align-items:center; gap:8px; color:#3b3b36; opacity:.88;
}
.preview-media-stage.is-video .preview-media-toolbar { display:grid !important; }
.media-icon-button {
  display:grid; width:30px !important; height:30px !important; padding:0 !important; place-items:center;
  border:1px solid #d4d4ce !important; border-radius:50% !important;
  background:rgba(255,255,255,.74) !important; color:#343430 !important; font-size:10px !important;
}
.video-progress { min-width:0; accent-color:#292925 !important; }
.video-time { min-width:66px; color:#777770 !important; font-size:10px !important; font-variant-numeric:tabular-nums; }

/* Information side */
.preview-dialog-info {
  grid-column:2 !important; grid-row:1 !important; display:flex !important; flex-direction:column !important;
  min-width:0 !important; min-height:0 !important; gap:18px !important; padding:28px 26px 22px !important;
  overflow-y:auto !important; background:#fff !important; scrollbar-gutter:stable;
}
.preview-dialog-header { display:block !important; padding:0 34px 0 0 !important; }
.preview-dialog-header > p {
  display:flex !important; flex-wrap:wrap; align-items:baseline; gap:6px;
  margin:0 !important; padding:0 !important; color:#20201d !important;
  font-size:20px !important; line-height:1.18 !important; letter-spacing:-.025em;
}
.preview-dialog-header > p strong { font-weight:850; }
.preview-dialog-header > p span { color:#777771; font-size:14px; font-weight:650; }
.preview-dialog-header > .preview-mode-switch { display:none !important; }
.preview-dialog-details { display:grid !important; gap:16px !important; }
.case-detail-summary { display:grid; gap:12px; }
.case-detail-summary > p { margin:0; color:#676760; font-size:13px; line-height:1.68; text-wrap:pretty; }
.case-detail-tags { display:flex; flex-wrap:wrap; gap:5px; }
.case-detail-tags span { padding:5px 8px; border-radius:999px; background:#f1f1ed; color:#686861; font-size:10px; font-weight:700; }
.case-quick-facts { display:grid; gap:7px; }
.case-quick-facts > div { display:grid; gap:3px; padding:10px 11px; border:1px solid #e7e7e2; border-radius:11px; background:#fbfbf9; }
.case-quick-facts small { color:#96968f; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.case-quick-facts strong { color:#373733; font-size:11px; font-weight:700; line-height:1.45; }

.preview-dialog-more.case-design-notes { margin:0 !important; border-top:1px solid #e7e7e2 !important; border-bottom:1px solid #e7e7e2 !important; }
.preview-dialog-more.case-design-notes > summary {
  display:grid !important; grid-template-columns:minmax(0,1fr) auto; align-items:center;
  min-height:46px; gap:12px; cursor:pointer; list-style:none;
}
.preview-dialog-more.case-design-notes > summary::-webkit-details-marker { display:none; }
.preview-dialog-more.case-design-notes > summary span { color:#292925; font-size:12px; font-weight:750; }
.preview-dialog-more.case-design-notes > summary small { display:none !important; }
.preview-dialog-more.case-design-notes > summary::after { color:#777771; content:"+"; font-size:16px; }
.preview-dialog-more.case-design-notes[open] > summary::after { content:"−"; }
.case-design-notes-content { padding:2px 0 14px; }
.preview-dialog-code { margin:0; border-top:1px solid #e7e7e2; border-bottom:1px solid #e7e7e2; }
.preview-dialog-code > summary { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:12px; cursor:pointer; list-style:none; }
.preview-dialog-code > summary::-webkit-details-marker { display:none; }
.preview-dialog-code > summary span { color:#292925; font-size:12px; font-weight:750; }
.preview-dialog-code > summary small { color:#777771; font-size:10px; }
.preview-dialog-code pre { max-height:230px; margin:0 0 14px; padding:14px; overflow:auto; border-radius:10px; background:#172019; color:#e8f5ea; font:500 11px/1.65 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace; white-space:pre-wrap; }
.case-design-notes-content dl { display:grid; gap:12px; margin:0; }
.case-design-notes-content dl > div { display:grid; gap:4px; }
.case-design-notes-content dt { color:#999992; font-size:9px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.case-design-notes-content dd { margin:0; color:#5f5f59; font-size:11px; line-height:1.58; }

.preview-dialog-footer {
  display:grid !important; gap:8px !important; margin-top:0 !important; padding-top:2px !important;
}
.preview-dialog-primary-actions { display:grid !important; grid-template-columns:1fr !important; gap:8px !important; }
.dialog-copy-button,.preview-dialog-footer .dialog-action-link {
  width:100% !important; min-height:44px !important; border-radius:10px !important;
  font-size:12px !important; font-weight:750 !important; text-decoration:none !important;
}
.dialog-copy-button { border:1px solid #252521 !important; background:#252521 !important; color:#fff !important; }
.preview-dialog-footer .dialog-action-link {
  display:inline-flex !important; align-items:center; justify-content:center;
  border:1px solid #d9d9d3 !important; background:#fff !important; color:#30302c !important;
}
.preview-dialog-footer .preview-dialog-lab-link { display:none !important; }
.preview-dialog-more-actions { width:100% !important; margin-top:0 !important; padding-top:0 !important; border-top:0 !important; text-align:right; }
.preview-dialog-more-actions > summary {
  display:inline-flex !important; min-height:30px; align-items:center; color:#85857f !important;
  font-size:10px !important; font-weight:700; cursor:pointer; list-style:none;
}
.preview-dialog-more-actions > summary::-webkit-details-marker { display:none; }
.preview-dialog-more-actions > div { display:grid !important; gap:8px !important; padding-top:7px !important; text-align:left; }
.preview-dialog-more-actions button,.preview-dialog-more-actions a { font-size:10px !important; }
#previewDialogOpenLive { display:none !important; }
.dialog-close-form { top:14px !important; right:14px !important; }
.dialog-close {
  width:32px !important; height:32px !important; border:0 !important; border-radius:50% !important;
  background:rgba(255,255,255,.86) !important; color:#30302c !important; font-size:20px !important;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
}

/* Lightbox */
.preview-dialog.is-lightbox { width:100vw !important; height:100dvh !important; border-radius:0 !important; background:#111 !important; }
.preview-dialog.is-lightbox .preview-dialog-content { grid-template-columns:1fr !important; background:#111 !important; }
.preview-dialog.is-lightbox .preview-dialog-info { display:none !important; }
.preview-dialog.is-lightbox .preview-media-stage { grid-column:1 !important; width:100%; height:100%; border-right:0 !important; background:#111 !important; }
.preview-dialog.is-lightbox .preview-mode-head,.preview-dialog.is-lightbox .preview-screen-rail { display:none !important; }
.preview-dialog.is-lightbox #previewMediaFrame { width:min(390px,calc((100dvh - 86px) * 390 / 844)) !important; max-width:calc(100% - 40px) !important; max-height:calc(100dvh - 86px) !important; }

@media (max-width:900px) {
  .preview-dialog { width:calc(100% - 20px) !important; height:calc(100dvh - 20px) !important; border-radius:16px !important; }
  .preview-dialog-content { display:block !important; overflow-y:auto !important; }
  .preview-dialog-info { min-height:auto !important; padding:24px 20px 18px !important; overflow:visible !important; border-bottom:1px solid #deded8; }
  .preview-dialog-footer { margin-top:4px !important; }
  .preview-media-stage { min-height:720px !important; padding:16px 16px 18px !important; border-right:0 !important; }
  #previewMediaFrame,#previewMediaFrame:not(.is-artboard-preview),#previewMediaFrame.is-source-video {
    width:min(320px,calc(100% - 40px)) !important; max-width:calc(100% - 40px) !important; max-height:none !important;
  }
}
@media (max-width:560px) {
  .preview-dialog { width:100% !important; height:100dvh !important; border-radius:0 !important; }
  .preview-dialog-info { padding:22px 16px 16px !important; }
  .preview-media-stage { min-height:650px !important; padding:14px 10px 18px !important; }
  .preview-mode-head { grid-template-columns:1fr auto !important; gap:8px; }
  .preview-mode-caption { display:none; }
  .preview-mode-switch { justify-self:stretch !important; overflow-x:auto; }
  .preview-mode-switch button { flex:1 0 auto; }
  .preview-mode-badge { font-size:9px; }
  #previewMediaFrame,#previewMediaFrame:not(.is-artboard-preview),#previewMediaFrame.is-source-video {
    width:min(300px,calc(100% - 28px)) !important; max-width:calc(100% - 28px) !important;
  }
  .preview-screen-rail { justify-content:flex-start; }
}