.pl-story-reader {
    --pl-story-bg-canvas: var(--pl-bg-canvas, #fff);
    --pl-story-bg-surface: var(--pl-bg-surface, #f5f5f5);
    --pl-story-text-primary: var(--pl-text-primary, #111);
    --pl-story-text-secondary: var(--pl-text-secondary, #444);
    --pl-story-on-dark-primary: #fff;
    --pl-story-on-dark-secondary: rgba(255, 255, 255, 0.75);
    --pl-story-on-dark-link: #9ecbff;
    --pl-story-ui-fg: var(--pl-story-on-dark-primary);
    --pl-story-ui-bg: color-mix(in srgb, #000 45%, transparent);
    --pl-story-ui-border: color-mix(in srgb, var(--pl-story-on-dark-primary) 28%, transparent);

    background: var(--pl-story-bg-canvas);
    color: var(--pl-story-text-primary);
}

.pl-story-reader.pl-story-theme-dark {
    --pl-story-bg-canvas: var(--pl-bg-canvas, #0f1115);
    --pl-story-bg-surface: var(--pl-bg-surface, #1a1f26);
    --pl-story-text-primary: var(--pl-text-primary, #f5f7fa);
    --pl-story-text-secondary: var(--pl-text-secondary, #c1c8d0);
    --pl-story-ui-fg: var(--pl-story-on-dark-primary);
    --pl-story-ui-bg: color-mix(in srgb, #000 50%, transparent);
    --pl-story-ui-border: color-mix(in srgb, var(--pl-story-on-dark-primary) 28%, transparent);
}

@media (hover: hover) and (pointer: fine) {
    .pl-story-background.is-active ~ .pl-story-reader {
        background: transparent;
    }
}

.pl-story-reader .pl-editor-help {
    display: none !important;
}

.pl-story-background {
    position: fixed;
    inset: 0;
    z-index: 0;
}

@media (hover: hover) and (pointer: fine) {
    .pl-story-reader {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(
            -50%,
            calc(-50% + (var(--wp-admin-bar-height, 0px)) + (var(--pl-env-banner-height, 0px)))
        );
        height: min(92dvh, 1000px);
        aspect-ratio: 678 / 1200;
        width: auto;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 20px 60px color-mix(in srgb, #000 60%, transparent);
        z-index: 2;
    }

    .pl-story-reader .pl-story-slides,
    .pl-story-reader .pl-story-slide {
        height: 100%;
    }
}

@media (hover: none) and (pointer: coarse) {
    .pl-story-reader {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        overflow: hidden;
        overscroll-behavior-x: contain;
        z-index: 1000;
    }

    .pl-story-reader .pl-story-slides,
    .pl-story-reader .pl-story-slide {
        height: 100dvh;
    }
}

.pl-story-reader :where(p, li, h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link):not(.wp-element-button)) {
    color: var(--pl-story-text-primary);
}

.pl-story-reader :where(small, figcaption, .has-small-font-size, .has-medium-font-size) {
    color: var(--pl-story-text-secondary);
}

.pl-story-reader h1,
.pl-story-reader a[rel~="tag"] {
    text-shadow:
        -1px -1px 0 color-mix(in srgb, #000 70%, transparent),
         1px -1px 0 color-mix(in srgb, #000 70%, transparent),
        -1px  1px 0 color-mix(in srgb, #000 70%, transparent),
         1px  1px 0 color-mix(in srgb, #000 70%, transparent);
}

.pl-story-reader a[rel~="tag"] {
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}

/* Local contrast repair for dark Gutenberg surfaces while Story theme is light. */
.pl-story-reader.pl-story-theme-light :is(
    .has-black-background-color,
    .has-very-dark-gray-background-color,
    .has-background-dim,
    [class*="has-background-dim-"],
    .has-background[style*="background-image"],
    .has-background[style*="background:"],
    .has-background[style*="background-color:#000"],
    .has-background[style*="background-color: #000"],
    .has-background[style*="background-color:#111"],
    .has-background[style*="background-color: #111"],
    .has-background[style*="background-color:rgb(0"],
    .has-background[style*="background-color: rgb(0"],
    .has-background[style*="background-color:rgb(17"],
    .has-background[style*="background-color: rgb(17"],
    .has-background[style*="background:#000"],
    .has-background[style*="background: #000"],
    .has-background[style*="background:#111"],
    .has-background[style*="background: #111"]
) :where(p, li, h1, h2, h3, h4, h5, h6, a:not(.wp-block-button__link):not(.wp-element-button), cite, figcaption, figure, blockquote) {
    color: var(--pl-story-on-dark-primary);
}

.pl-story-reader.pl-story-theme-light :is(
    .has-black-background-color,
    .has-very-dark-gray-background-color,
    .has-background-dim,
    [class*="has-background-dim-"],
    .has-background[style*="background-image"],
    .has-background[style*="background:"],
    .has-background[style*="background-color:#000"],
    .has-background[style*="background-color: #000"],
    .has-background[style*="background-color:#111"],
    .has-background[style*="background-color: #111"],
    .has-background[style*="background-color:rgb(0"],
    .has-background[style*="background-color: rgb(0"],
    .has-background[style*="background-color:rgb(17"],
    .has-background[style*="background-color: rgb(17"],
    .has-background[style*="background:#000"],
    .has-background[style*="background: #000"],
    .has-background[style*="background:#111"],
    .has-background[style*="background: #111"]
) :where(a:not(.wp-block-button__link):not(.wp-element-button)) {
    color: var(--pl-story-on-dark-link);
}

.pl-story-reader.pl-story-theme-light :is(
    .has-black-background-color,
    .has-very-dark-gray-background-color,
    .has-background-dim,
    [class*="has-background-dim-"],
    .has-background[style*="background-image"],
    .has-background[style*="background:"],
    .has-background[style*="background-color:#000"],
    .has-background[style*="background-color: #000"],
    .has-background[style*="background-color:#111"],
    .has-background[style*="background-color: #111"],
    .has-background[style*="background-color:rgb(0"],
    .has-background[style*="background-color: rgb(0"],
    .has-background[style*="background-color:rgb(17"],
    .has-background[style*="background-color: rgb(17"],
    .has-background[style*="background:#000"],
    .has-background[style*="background: #000"],
    .has-background[style*="background:#111"],
    .has-background[style*="background: #111"]
) :where(cite, figcaption) {
    color: var(--pl-story-on-dark-secondary);
}

/* JS luminance-based classification for colored Gutenberg backgrounds. */
.pl-story-reader.pl-story-theme-light .pl-story-bg-dark :where(
    p,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a:not(.wp-block-button__link):not(.wp-element-button),
    cite,
    figcaption,
    figure,
    blockquote
) {
    color: var(--pl-story-on-dark-primary);
}

.pl-story-reader.pl-story-theme-light .pl-story-bg-dark :where(a:not(.wp-block-button__link):not(.wp-element-button)) {
    color: var(--pl-story-on-dark-link);
}

.pl-story-reader.pl-story-theme-light .pl-story-bg-dark :where(cite, figcaption) {
    color: var(--pl-story-on-dark-secondary);
}

.pl-story-reader.pl-story-theme-light .pl-story-bg-light :where(
    p,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    a:not(.wp-block-button__link):not(.wp-element-button),
    cite,
    figcaption,
    figure,
    blockquote
) {
    color: var(--pl-story-text-primary);
}

.pl-story-reader.pl-story-theme-light .pl-story-bg-light :where(cite, figcaption) {
    color: var(--pl-story-text-secondary);
}