/**
 * Chisimba Reborn default canvas.
 *
 * The default canvas supplies the initial contextual arrangement while the
 * enclosing Chisimba Reborn skin supplies the rendering system and identity.
 */

#Canvas_Content_Body {
    display: grid;
    grid-template-areas:
        "main supplementary-top"
        "main supplementary-bottom";
    grid-template-columns:
        minmax(0, 1fr)
        minmax(17rem, 24rem);
    gap: var(--chisimba-layout-gap);
    align-items: start;
}

#Canvas_Content_Body_Region2 {
    grid-area: main;
    min-width: 0;
    padding: var(--chisimba-region-padding);
    background: var(--chisimba-surface);
    border: 1px solid var(--chisimba-border);
    border-top: 0.35rem solid var(--chisimba-primary);
    border-radius: var(--chisimba-region-radius);
    box-shadow: var(--chisimba-shadow);
}

#Canvas_Content_Body_Region3 {
    grid-area: supplementary-top;
}

#Canvas_Content_Body_Region1 {
    grid-area: supplementary-bottom;
}

#Canvas_Content_Body_Region1,
#Canvas_Content_Body_Region3 {
    min-width: 0;
    padding: var(--chisimba-region-padding);
    background: var(--chisimba-surface-muted);
    border: 1px solid var(--chisimba-border);
    border-top: 0.3rem solid var(--chisimba-grey-blue);
    border-radius: var(--chisimba-region-radius);
}

#Canvas_Content_Body img,
#Canvas_Content_Body video,
#Canvas_Content_Body iframe,
#Canvas_Content_Body table,
#Canvas_Content_Body input,
#Canvas_Content_Body select,
#Canvas_Content_Body textarea {
    max-width: 100%;
}

@media (max-width: 60rem) {
    #Canvas_Content_Body {
        grid-template-areas:
            "main"
            "supplementary-top"
            "supplementary-bottom";
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Chisimba Reborn: keep supplementary block stacks aligned to the top. */
#Canvas_Content_Body_Region1,
#Canvas_Content_Body_Region3 {
    align-self: start;
    align-content: start;
}

/* BEGIN CHISIMBA-REBORN SUPPLEMENTARY REGION TOP ALIGNMENT
 *
 * The canvas grid stretches columns to the height of the tallest region.
 * These regions must therefore explicitly stack their blocks from the top.
 */
#Canvas_Content_Body_Region1,
#Canvas_Content_Body_Region3 {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    align-content: flex-start;
    align-self: stretch;
}

#Canvas_Content_Body_Region1 > *,
#Canvas_Content_Body_Region3 > * {
    flex: 0 0 auto;
}
/* END CHISIMBA-REBORN SUPPLEMENTARY REGION TOP ALIGNMENT */


/* BEGIN CHISIMBA-REBORN REGION TOP-ALIGNMENT FINAL
 *
 * Chisimba's legacy equal-height helper may write explicit heights to the
 * three regions. Modern CSS Grid does not require that treatment. These rules
 * keep main and supplementary content aligned to the top regardless of the
 * height of neighbouring columns.
 */

#Canvas_Content_Body {
    align-items: start !important;
    align-content: start !important;
}

#Canvas_Content_Body_Region1,
#Canvas_Content_Body_Region2,
#Canvas_Content_Body_Region3 {
    align-self: start !important;
    justify-self: stretch !important;
    vertical-align: top !important;
    min-height: 0 !important;
}

#Canvas_Content_Body_Region1,
#Canvas_Content_Body_Region3 {
    display: block !important;
    height: auto !important;
    max-height: none !important;
}

#Canvas_Content_Body_Region1 > :first-child,
#Canvas_Content_Body_Region3 > :first-child,
#Canvas_Content_Body_Region1 > :first-child > :first-child,
#Canvas_Content_Body_Region3 > :first-child > :first-child {
    margin-top: 0 !important;
}

#Canvas_Content_Body_Region1 .featurebox:first-child,
#Canvas_Content_Body_Region3 .featurebox:first-child,
#Canvas_Content_Body_Region1 .contentfeaturebox:first-child,
#Canvas_Content_Body_Region3 .contentfeaturebox:first-child {
    margin-top: 0 !important;
}

/* END CHISIMBA-REBORN REGION TOP-ALIGNMENT FINAL */


/* BEGIN CHISIMBA-REBORN LAYOUT-WRAPPER GRID
 *
 * The csslayout engine commonly returns a #onecolumn, #twocolumn or
 * #threecolumn wrapper as the direct child of #Canvas_Content_Body.
 *
 * Make that framework wrapper the grid. This is more deterministic than
 * display:contents and preserves the existing PHP layout architecture.
 *
 * Default supplementary order:
 *   Region1 = upper controls/actions
 *   Region3 = lower supplementary information
 */

#Canvas_Content_Body {
    display: block;
    min-width: 0;
}

#Canvas_Content_Body > #onecolumn,
#Canvas_Content_Body > #twocolumn,
#Canvas_Content_Body > #threecolumn,
#Canvas_Content_Body > .onecolumn,
#Canvas_Content_Body > .twocolumn,
#Canvas_Content_Body > .threecolumn {
    align-content: start;
    align-items: start;
    display: grid !important;
    float: none !important;
    gap: var(--chisimba-layout-gap);
    grid-template-areas:
        "main supplementary-top"
        "main supplementary-bottom";
    grid-template-columns:
        minmax(0, 1fr)
        minmax(17rem, 24rem);
    height: auto !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0;
    padding: 0;
    position: static !important;
    width: 100% !important;
}

/*
 * Also support modules that emit the region elements directly without one of
 * the standard csslayout wrappers.
 */
#Canvas_Content_Body:has(> #Canvas_Content_Body_Region1),
#Canvas_Content_Body:has(> #Canvas_Content_Body_Region2),
#Canvas_Content_Body:has(> #Canvas_Content_Body_Region3) {
    align-content: start;
    align-items: start;
    display: grid;
    gap: var(--chisimba-layout-gap);
    grid-template-areas:
        "main supplementary-top"
        "main supplementary-bottom";
    grid-template-columns:
        minmax(0, 1fr)
        minmax(17rem, 24rem);
}

#Canvas_Content_Body_Region2 {
    align-self: start !important;
    clear: none !important;
    float: none !important;
    grid-area: main;
    height: auto !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0;
    position: static !important;
    width: auto !important;
}

#Canvas_Content_Body_Region1 {
    align-self: start !important;
    clear: none !important;
    float: none !important;
    grid-area: supplementary-top;
    height: auto !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0;
    position: static !important;
    width: auto !important;
}

#Canvas_Content_Body_Region3 {
    align-self: start !important;
    clear: none !important;
    float: none !important;
    grid-area: supplementary-bottom;
    height: auto !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0;
    position: static !important;
    width: auto !important;
}

@media (max-width: 60rem) {
    #Canvas_Content_Body > #onecolumn,
    #Canvas_Content_Body > #twocolumn,
    #Canvas_Content_Body > #threecolumn,
    #Canvas_Content_Body > .onecolumn,
    #Canvas_Content_Body > .twocolumn,
    #Canvas_Content_Body > .threecolumn,
    #Canvas_Content_Body:has(> #Canvas_Content_Body_Region1),
    #Canvas_Content_Body:has(> #Canvas_Content_Body_Region2),
    #Canvas_Content_Body:has(> #Canvas_Content_Body_Region3) {
        grid-template-areas:
            "main"
            "supplementary-top"
            "supplementary-bottom";
        grid-template-columns: minmax(0, 1fr);
    }
}

/* END CHISIMBA-REBORN LAYOUT-WRAPPER GRID */

/* CHISIMBA-REBORN: PRELOGIN CONTENT-CONTAINMENT FIX */
/*
 * The legacy prelogin module emits the three canvas regions directly inside
 * #Canvas_Content_Body and also runs an old JavaScript equal-height routine.
 * Region 1 and Region 3 can be taller than the main story region. In some
 * renderings the legacy calculated height allows supplementary blocks to
 * escape the body's visual flow and overlap the footer.
 *
 * Restrict this correction to pages that actually contain the login form.
 * The grid, all three regions, and the footer are returned to normal document
 * flow. No fixed height is introduced.
 *
 * @author Derek Keats
 */
#Canvas_Content_Body:has(#form_loginform) {
    align-items: start !important;
    display: grid !important;
    float: none !important;
    grid-template-areas:
        "main supplementary-top"
        "main supplementary-bottom" !important;
    grid-template-columns:
        minmax(0, 1fr)
        var(--chisimba-sidebar-width, minmax(17rem, 24rem)) !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: max-content !important;
    overflow: visible !important;
    position: relative !important;
}

#Canvas_Content_Body:has(#form_loginform)
    > #Canvas_Content_Body_Region1 {
    align-self: start !important;
    float: none !important;
    grid-area: supplementary-top !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    position: static !important;
}

#Canvas_Content_Body:has(#form_loginform)
    > #Canvas_Content_Body_Region2 {
    align-self: stretch !important;
    float: none !important;
    grid-area: main !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    position: static !important;
}

#Canvas_Content_Body:has(#form_loginform)
    > #Canvas_Content_Body_Region3 {
    align-self: start !important;
    float: none !important;
    grid-area: supplementary-bottom !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    position: static !important;
}

#Canvas_Content_Body:has(#form_loginform)
    + .Canvas_Content_Body_After,
#Canvas_Content_Body:has(#form_loginform)
    ~ #footerbr,
#Canvas_Content_Body:has(#form_loginform)
    ~ .Canvas_Content_Footer_Before,
#Canvas_Content_Body:has(#form_loginform)
    ~ .Canvas_Content_Footer {
    clear: both !important;
    float: none !important;
    position: relative !important;
}

@media (max-width: 60rem) {
    #Canvas_Content_Body:has(#form_loginform) {
        grid-template-areas:
            "main"
            "supplementary-top"
            "supplementary-bottom" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto auto !important;
    }
}
/* END CHISIMBA-REBORN: PRELOGIN CONTENT-CONTAINMENT FIX */

/* BEGIN CHISIMBA-REBORN: COMPONENT-AWARE REGION SURFACES
 *
 * Canvas regions are structural layout containers. They should not create a
 * second visible card around content that already renders as a complete
 * component.
 *
 * Flatten a region only when it directly contains one of Chisimba's recognised
 * visual surfaces. Plain module output retains the normal region surface and
 * padding, which protects modules such as toolbar, wiki and modulecatalogue
 * that render tables, forms or other unboxed content directly.
 *
 * This also keeps exceptional blocks, such as the main user block, unchanged
 * when they do not use one of these recognised component wrappers.
 *
 * @author Derek Keats
 */

/* CHISIMBA-REBORN: COMPONENT-AWARE REGION SURFACES */
#Canvas_Content_Body_Region1:has(> .featurebox),
#Canvas_Content_Body_Region1:has(> .contentfeaturebox),
#Canvas_Content_Body_Region3:has(> .featurebox),
#Canvas_Content_Body_Region3:has(> .contentfeaturebox),
#Canvas_Content_Body_Region2:has(> .featurebox),
#Canvas_Content_Body_Region2:has(> .contentfeaturebox),
#Canvas_Content_Body_Region2:has(> .allstories),
#Canvas_Content_Body_Region2:has(> .currentstory) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/*
 * Keep a consistent vertical rhythm between multiple complete components once
 * the enclosing region has been flattened.
 */
#Canvas_Content_Body_Region1 > .featurebox + .featurebox,
#Canvas_Content_Body_Region1 > .contentfeaturebox + .contentfeaturebox,
#Canvas_Content_Body_Region3 > .featurebox + .featurebox,
#Canvas_Content_Body_Region3 > .contentfeaturebox + .contentfeaturebox,
#Canvas_Content_Body_Region2 > .featurebox + .featurebox,
#Canvas_Content_Body_Region2 > .contentfeaturebox + .contentfeaturebox,
#Canvas_Content_Body_Region2 > .currentstory + .currentstory {
    margin-block-start: var(--chisimba-shell-component-gap, 1rem);
}

/* END CHISIMBA-REBORN: COMPONENT-AWARE REGION SURFACES */

/* BEGIN CHISIMBA-REBORN: POSTLOGIN BLOCK-WRAPPED COMPONENT SURFACES
 *
 * Authenticated canvas blocks are wrapped more deeply than prelogin content:
 *
 *   Region2
 *     > #middleblocks
 *       > .block
 *         > .featurebox
 *
 * The earlier component-aware selectors only handled direct component
 * children, so authenticated story blocks retained three visible surfaces:
 * the region card, the generic block card, and the feature box itself.
 *
 * When a Region 2 block contains a complete feature box, flatten only the
 * structural Region 2 and generic block wrappers. The feature box remains the
 * single visible component surface.
 *
 * Plain Region 2 module output is deliberately unaffected.
 *
 * @author Derek Keats
 */

/* CHISIMBA-REBORN: POSTLOGIN BLOCK-WRAPPED COMPONENT SURFACES */
#Canvas_Content_Body_Region2:has(
    > #middleblocks > .block > .featurebox
) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

#Canvas_Content_Body_Region2
    > #middleblocks
    > .block:has(> .featurebox) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/*
 * Allow the feature box to occupy the available Region 2 width without the
 * legacy five-pixel inset that was previously useful inside older skins.
 */
#Canvas_Content_Body_Region2
    > #middleblocks
    > .block
    > .featurebox {
    margin: 0;
    width: 100%;
}

/* END CHISIMBA-REBORN: POSTLOGIN BLOCK-WRAPPED COMPONENT SURFACES */

/* BEGIN CHISIMBA-REBORN: SIDEBLOCK-WRAPPED COMPONENT SURFACES
 *
 * Authenticated side blocks use the same nested-card pattern as Region 2:
 *
 *   Region1 / Region3
 *     > #leftblocks / #rightblocks
 *       > .block
 *         > .featurebox
 *
 * The region shell and generic block wrapper are structural. When the block
 * already contains a complete feature box, only the feature box should remain
 * visible as the component surface.
 *
 * Ordinary sidebar output that is not wrapped in a feature box is unchanged.
 *
 * @author Derek Keats
 */

/* CHISIMBA-REBORN: SIDEBLOCK-WRAPPED COMPONENT SURFACES */
#Canvas_Content_Body_Region1:has(
    > :is(#leftblocks, #rightblocks) > .block > .featurebox
),
#Canvas_Content_Body_Region3:has(
    > :is(#leftblocks, #rightblocks) > .block > .featurebox
) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/*
 * Keep the block-list wrapper structural and provide spacing between complete
 * components at the list level rather than through nested card padding.
 */
#Canvas_Content_Body_Region1
    > :is(#leftblocks, #rightblocks):has(> .block > .featurebox),
#Canvas_Content_Body_Region3
    > :is(#leftblocks, #rightblocks):has(> .block > .featurebox) {
    display: flex;
    flex-direction: column;
    gap: var(--chisimba-space-3, 12px);
}

/* Flatten only generic block wrappers that contain complete feature boxes. */
#Canvas_Content_Body_Region1
    > :is(#leftblocks, #rightblocks)
    > .block:has(> .featurebox),
#Canvas_Content_Body_Region3
    > :is(#leftblocks, #rightblocks)
    > .block:has(> .featurebox) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

/* Let each feature box occupy the full available sidebar width. */
#Canvas_Content_Body_Region1
    > :is(#leftblocks, #rightblocks)
    > .block
    > .featurebox,
#Canvas_Content_Body_Region3
    > :is(#leftblocks, #rightblocks)
    > .block
    > .featurebox {
    margin: 0;
    width: 100%;
}

/* END CHISIMBA-REBORN: SIDEBLOCK-WRAPPED COMPONENT SURFACES */

/* BEGIN CHISIMBA-REBORN: REGION COMPONENT BASELINE ALIGNMENT
 *
 * The first visible component in Regions 1, 2 and 3 must begin on the same
 * vertical baseline. Legacy wrappers previously supplied different mixtures
 * of margin and padding in each column, which caused side blocks and Region 2
 * blocks to begin at slightly different heights after those wrappers were
 * correctly flattened.
 *
 * These rules make each canvas region a pure layout container and remove only
 * top-edge spacing from the first rendered component. Spacing between multiple
 * components remains controlled by the block-list gap rules.
 *
 * This establishes a presentation-layer invariant:
 *
 *     first visible component in every occupied region starts at block-start 0
 *
 * @author Derek Keats
 */

/* CHISIMBA-REBORN: REGION COMPONENT BASELINE ALIGNMENT */

/*
 * Prevent the region columns themselves from introducing independent
 * block-start offsets.
 */
#Canvas_Content_Body_Region1,
#Canvas_Content_Body_Region2,
#Canvas_Content_Body_Region3 {
    margin-top: 0;
    align-self: start;
}

/*
 * Region 2 authenticated blocks:
 * remove any remaining top offset from the first generic block and its
 * feature-box component.
 */
#Canvas_Content_Body_Region2
    > #middleblocks
    > .block:first-child,
#Canvas_Content_Body_Region2
    > #middleblocks
    > .block:first-child
    > .featurebox {
    margin-top: 0;
}

/*
 * Side regions:
 * normalize the first block and first feature box in either legacy sideblock
 * list. This supports both leftblocks and rightblocks without assuming which
 * physical side a region occupies.
 */
#Canvas_Content_Body_Region1
    > :is(#leftblocks, #rightblocks)
    > .block:first-child,
#Canvas_Content_Body_Region3
    > :is(#leftblocks, #rightblocks)
    > .block:first-child,
#Canvas_Content_Body_Region1
    > :is(#leftblocks, #rightblocks)
    > .block:first-child
    > .featurebox,
#Canvas_Content_Body_Region3
    > :is(#leftblocks, #rightblocks)
    > .block:first-child
    > .featurebox {
    margin-top: 0;
}

/*
 * Some modules render a complete feature box directly in a region rather than
 * inside a block list. Keep those direct components on the same baseline too.
 */
#Canvas_Content_Body_Region1 > .featurebox:first-child,
#Canvas_Content_Body_Region2 > .featurebox:first-child,
#Canvas_Content_Body_Region3 > .featurebox:first-child {
    margin-top: 0;
}

/* END CHISIMBA-REBORN: REGION COMPONENT BASELINE ALIGNMENT */