.wp-block-psycho-tatters-codex-sheet {
    box-sizing: border-box;
}

.ptx-codex-sheet {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    isolation: isolate;
    --ptx-codex-design-width: 1600;
}

/*
 * Existing sheets fall back to the original 1531 x 2009 ratio. When a new
 * parchment is selected Arcane Codex stores its real dimensions, so wide
 * manuscript art stays wide instead of being forced into the old portrait.
 */
.ptx-codex-sheet--fixed-ratio {
    aspect-ratio: var(--ptx-codex-frame-width, 1531) / var(--ptx-codex-frame-height, 2009);
}

/*
 * Background parchment.
 */
.ptx-codex-sheet__frame {
    position: absolute;

    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    object-fit: fill;

    z-index: 0;

    pointer-events: none;
    user-select: none;
}

/*
 * Editable Gutenberg area.
 *
 * These percentages can be adjusted in the
 * block inspector so you can precisely line up
 * the usable space with your parchment.
 */
.ptx-codex-sheet__content {
    position: absolute;

    top: var(--ptx-codex-top, 7%);
    right: var(--ptx-codex-right, 8%);
    bottom: var(--ptx-codex-bottom, 7%);
    left: var(--ptx-codex-left, 8%);

    z-index: 1;

    min-width: 0;
    min-height: 0;

    box-sizing: border-box;
    transform-origin: top left;
    will-change: transform;
}

/*
 * Allow blocks to behave normally inside the sheet.
 */
.ptx-codex-sheet__content > * {
    box-sizing: border-box;
}

/*
 * Editor placeholder before a parchment has been chosen.
 */
.ptx-codex-sheet__frame-placeholder {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 2px dashed #8c8f94;

    background: #f6f7f7;
    color: #50575e;

    z-index: 0;

    pointer-events: none;
}


/* Editor-only safe-area overlay. The actual content region uses the same
   percentage insets, so this guide is a literal representation of the live
   content boundary instead of a decorative approximation. */
.editor-styles-wrapper .ptx-codex-sheet__safe-area-guide {
    position: absolute;
    top: var(--ptx-codex-top, 8%);
    right: var(--ptx-codex-right, 8%);
    bottom: var(--ptx-codex-bottom, 8%);
    left: var(--ptx-codex-left, 8%);
    z-index: 3;
    border: 2px dashed rgba(131, 76, 46, .72);
    background: rgba(255, 248, 226, .035);
    pointer-events: none;
}
.editor-styles-wrapper .ptx-codex-sheet__safe-area-guide > span {
    position: absolute;
    top: 6px;
    left: 8px;
    padding: 2px 6px;
    background: rgba(255, 248, 226, .88);
    color: #5c3928;
    font: 600 10px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    letter-spacing: .06em;
}

.arcane-codex-safe-area-diagram { margin: 12px 0 16px; }
.arcane-codex-safe-area-diagram__paper {
    position: relative;
    aspect-ratio: 3 / 2;
    border: 1px solid #a8a19a;
    background: #efe3c9;
    border-radius: 3px;
}
.arcane-codex-safe-area-diagram__safe {
    position: absolute;
    display: grid;
    place-items: center;
    border: 1px dashed #7a4b34;
    background: rgba(255,255,255,.32);
    color: #5c3928;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .04em;
}

/*
 * OPTIONAL FLOW MODE
 *
 * This allows content to determine page height.
 *
 * I would NOT use this for your main Codex design
 * because it will distort the parchment vertically.
 */
.ptx-codex-sheet--flow {
    min-height: 900px;
}

.ptx-codex-sheet--flow .ptx-codex-sheet__content {
    position: relative;

    top: auto;
    right: auto;
    bottom: auto;
    left: auto;

    padding:
        var(--ptx-codex-top, 7%)
        var(--ptx-codex-right, 8%)
        var(--ptx-codex-bottom, 7%)
        var(--ptx-codex-left, 8%);
}

@media (max-width: 700px) {
    .ptx-codex-sheet {
        width: 100%;
    }
}

/* Fixed manuscript canvas: Gutenberg must not impose its own responsive
   max-widths on blocks inside the scaled parchment. */
.editor-styles-wrapper .ptx-codex-sheet__content > .block-editor-inner-blocks,
.editor-styles-wrapper .ptx-codex-sheet__content > .block-editor-inner-blocks > .block-editor-block-list__layout,
.editor-styles-wrapper .ptx-codex-sheet__content .block-editor-block-list__block,
.editor-styles-wrapper .ptx-codex-sheet__content .wp-block {
    width: 100%;
    max-width: none !important;
    box-sizing: border-box;
}

.editor-styles-wrapper .ptx-codex-sheet__content > .block-editor-inner-blocks,
.editor-styles-wrapper .ptx-codex-sheet__content > .block-editor-inner-blocks > .block-editor-block-list__layout {
    min-height: 100%;
}


/* Full-width reading surface behind the manuscript. This wrapper is added at
   render time on Codex entry pages, keeping site chrome, backdrop and paper as
   independent layers. The explicit alignfull/max-width rules are deliberate:
   block themes otherwise constrain arbitrary wrappers to the content column. */
.ptx-codex-reading-stage {
    box-sizing: border-box;
    position: relative;
    width: 100vw !important;
    max-width: none !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding:
        var(--ptx-stage-padding-top, 14px)
        var(--ptx-stage-padding-side, 22px)
        var(--ptx-stage-padding-bottom, 42px);
    background-color: var(--ptx-stage-background-color, #12070d);
    background-image: var(--ptx-stage-background-image, none);
    background-repeat: no-repeat;
    background-position: var(--ptx-stage-position-x, 50%) var(--ptx-stage-position-y, 50%);
    background-size: cover;
    overflow: visible;
}

/* The Reading Stage is the visible clipping window for the decorative
   backdrop. On desktop, background-attachment: fixed keeps the artwork pinned
   to the viewport while the parchment scrolls across it. Keeping the artwork
   here (rather than on body/.wp-site-blocks) prevents theme backgrounds from
   painting over it. */
.ptx-codex-reading-stage--fixed {
    background-attachment: scroll !important;
}

.ptx-codex-reading-stage__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: none !important;
    margin: 0 auto;
}

/* The block's Maximum Width remains the authoring/design-canvas width. The
   reading stage controls its DISPLAY width separately so high-resolution wide
   parchment can occupy the intended share of the viewport without rewriting
   every saved template. */
.ptx-codex-reading-stage .ptx-codex-sheet {
    width: min(
        var(--ptx-stage-parchment-width, 82vw),
        var(--ptx-stage-parchment-max-width, 1600px),
        100%
    ) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.ptx-codex-reading-stage--shadow .ptx-codex-sheet__frame {
    filter: drop-shadow(0 18px 24px rgba(0, 0, 0, 0.48));
}

@media (max-width: 700px) {
    .ptx-codex-reading-stage {
        width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        padding-left: 8px;
        padding-right: 8px;
    }

    .ptx-codex-reading-stage .ptx-codex-sheet {
        width: 100% !important;
    }

    /* iOS/mobile browsers are more reliable when the root background scrolls. */
    .ptx-codex-reading-stage--fixed {
        background-attachment: scroll !important;
    }

}

/* 0.7.0: the safe area is a real clipping/bounding context, not merely a
   starting offset. Entry Layout auto-fit runs inside this rectangle. */
.ptx-codex-sheet--fixed-ratio > .ptx-codex-sheet__content {
    overflow: hidden;
    contain: layout paint;
}