/* Only new material layout. All cards, controls, text and overlays use product styles. */
.reader-card .material-card { display: grid; gap: 30px; margin: 30px 0; padding: 26px; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); background: transparent; }
.material-card > .reader-footer { margin-top: 0; }
.material-source { display: block; color: var(--sub); font-size: 13px; text-decoration: none; overflow-wrap: anywhere; }
.material-source:hover { color: var(--ink); }
.material-frame { display: block; width: 100%; height: 420px; max-height: 65dvh; border: 0; background: #fff; }
.material-frame--video { height: auto; aspect-ratio: 16 / 9; }
.material-frame--post { max-height: none; max-width: 550px; margin-inline: auto; background: transparent; }
.material-frame-slot { display: block; width: 100%; height: 420px; max-height: 65dvh; }
.material-frame-slot--video { height: auto; aspect-ratio: 16 / 9; }
.material-frame-slot--post { max-height: none; max-width: 550px; margin-inline: auto; }
.material-frame-slot > .material-frame { height: 100%; max-height: none; }
.material-prewarm-layout { position: fixed !important; left: -20000px !important; top: 0 !important; visibility: hidden; pointer-events: none; }
/* Official widgets defer sizing outside the viewport. Keep their preparation
   surface transparent, inert and behind the app rather than display:none. */
.material-frame-parking { position: fixed; left: 0; top: 0; opacity: 0; pointer-events: none; z-index: -1; }
.material-preview { display: block; overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: inherit; text-decoration: none; transition: background-color var(--color-motion); }
.material-preview:hover { background: #edf6fd; }
.material-preview img { display: block; width: 100%; max-height: 240px; object-fit: cover; }
.material-preview img[hidden] { display: none; }
.material-preview-text { display: block; padding: 18px; }
.material-domain { display: block; margin-top: 12px; color: var(--sub); font-size: 13px; }
.material-source:focus-visible, .material-preview:focus-visible { outline: 2px solid var(--dot); outline-offset: 3px; }
@media (max-width: 520px) { .reader-card .material-card { padding: 18px; } }