/**
 * 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: transparent;
    border: 0;
    border-radius: 0;
}

#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;
}

/* A one-column layout must not reserve the supplementary sidebar track. */
#Canvas_Content_Body > #onecolumn,
#Canvas_Content_Body > .onecolumn {
    grid-template-areas: "main";
    grid-template-columns: minmax(0, 1fr);
}

/*
 * 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 */

/* CHISIMBA-REBORN CANVAS REGION SPACING CONTRACT — p365
 * Canvas regions own inter-component spacing. A structural block around a
 * complete featurebox must not create a second visible surface or inset.
 */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) .block:has(> .featurebox) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) .block > .featurebox,
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) > .featurebox {
    margin-inline: 0;
    margin-block-start: 0;
    width: 100%;
}

/* CHISIMBA-REBORN READING SURFACE — p367
 * A quiet, reusable surface for stories and similar text-heavy content.
 * Regions own outer placement; the surface owns only its reading area.
 */
.reading-list .reading-surface {
    background: rgba(255, 255, 255, 0.84);
    border: 0;
    border-radius: 2px;
    box-shadow: none;
    padding: clamp(1rem, 2vw, 1.5rem);
}

.reading-list .reading-surface + .reading-surface {
    margin-block-start: 1rem;
}

.reading-surface > :first-child,
.reading-surface :is(.abstract, .storycontent, .storyauthor) > :first-child {
    margin-block-start: 0;
}

.reading-surface > :last-child,
.reading-surface :is(.abstract, .storycontent, .storyauthor) > :last-child {
    margin-block-end: 0;
}

.reading-surface .storyauthor {
    margin-block-start: 1rem;
}

/* CHISIMBA LUCIDE ICON SERVICE AND STORIES CONSOLIDATION — p372
 * Modules own icon meaning; the skin owns icon presentation.
 */
.chisimba-icon {
    display: inline-block;
    flex: 0 0 auto;
    overflow: visible;
    stroke: currentColor;
    stroke-width: 1.5;
    vertical-align: -0.125em;
}

.reading-surface .abstract {
    margin-block-end: 0.5rem;
}

.reading-surface .story-status {
    display: inline-flex;
    align-items: center;
    margin-inline-start: 0.5rem;
    color: currentColor;
}

.reading-surface .story-status .chisimba-icon {
    font-size: 1rem;
}

/* CHISIMBA STORIES PRESENTATION CORRECTION — p373
 * A Stories list is a complete reading component, not a legacy side block.
 * TinyMCE-authored abstracts retain their own block markup in the producer.
 */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) .block:has(> .reading-list),
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) .block:has(> #stories > .reading-list) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
}

.reading-surface .story-status {
    vertical-align: middle;
}

.reading-surface .story-status .chisimba-icon {
    display: block;
}

/* CHISIMBA STORIES CONTENT AND EDITOR FINISH — p378
 * Content-mode blocks align to their region rather than inheriting utility
 * block insets. Reading lists then present each item as a distinct surface.
 * Abstracts are introductory copy and remain visually secondary.
 */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) .block:has(> .featurebox--content),
.featurebox--content,
.featurebox--content > .block-content__body {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.featurebox--content .reading-list {
    display: grid;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.featurebox--content .reading-list .reading-surface {
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(31, 45, 52, 0.10);
    border-radius: 0.375rem;
}

.featurebox--content .reading-list .reading-surface + .reading-surface {
    margin-block-start: 0;
}

.reading-surface .abstract {
    color: #59666d;
    font-size: 0.9375rem;
    line-height: 1.55;
}

/* CHISIMBA CONTENT WIDTH FINISH — p379
 * The middle-block collection is a placement wrapper. When it contains a
 * content-mode block, it must not add the utility-block horizontal inset.
 * Story bodies use their reading surface's available width; authored child
 * content retains any intentional sizing of its own.
 */
#Canvas_Content_Body_Region2
    > #middleblocks:has(> .block > .featurebox--content) {
    margin-inline: 0;
    padding-inline: 0;
    width: 100%;
}

.reading-surface .storycontent {
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: none;
    max-width: none;
    width: 100%;
}

/* CHISIMBA ADAPTIVE LOGIN BLOCK — p382
 * Login and signed-in states share one compact, accessible auth surface.
 * SVG icons inherit colour and remain decorative beside visible text.
 */
#form_loginform fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

#form_loginform .auth-login-error {
    background: color-mix(in srgb, #dc2626 9%, var(--chisimba-surface, #fff));
    border: 1px solid color-mix(in srgb, #dc2626 35%, transparent);
    border-radius: .5rem;
    color: #991b1b;
    margin: 0 0 .75rem;
    padding: .65rem .75rem;
}

#form_loginform .auth-field {
    align-items: center;
    background: var(--chisimba-surface, #fff);
    border: 1px solid var(--chisimba-border, #cbd5e1);
    border-radius: .5rem;
    display: grid;
    gap: .55rem;
    grid-template-columns: 1.15rem minmax(0, 1fr);
    margin-block-end: .7rem;
    padding-inline: .7rem;
}

#form_loginform .auth-field:focus-within {
    border-color: var(--chisimba-primary, #2563eb);
    box-shadow: 0 0 0 3px rgb(37 99 235 / 15%);
}

#form_loginform .auth-field input {
    background: transparent;
    border: 0;
    box-shadow: none;
    inline-size: 100%;
    margin: 0;
    min-width: 0;
    padding: .7rem 0;
}

#form_loginform .chisimba-icon,
.auth-block .chisimba-icon {
    color: var(--chisimba-muted, #64748b);
    flex: 0 0 auto;
}

#form_loginform .loginbuttonwrap button,
.auth-block__logout button {
    align-items: center;
    display: inline-flex;
    gap: .45rem;
    justify-content: center;
}

.auth-block--signed-in {
    display: grid;
    gap: .85rem;
}

.auth-block__identity {
    align-items: center;
    display: flex;
    gap: .55rem;
    margin: 0;
    overflow-wrap: anywhere;
}

.auth-block__logout,
.auth-block__logout button {
    inline-size: 100%;
    margin: 0;
}


/* P393 account card: one surface, deliberate avatar, natural geometry. */
.account-card__avatar-wrap {
    display: flex;
    justify-content: center;
    margin: 0.25rem 0 1rem;
}

.account-card__avatar {
    display: block;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
}

.account-card__avatar--fallback {
    box-sizing: border-box;
    padding: 1.15rem;
    border: 1px solid #cbd7e1;
    background: #f1f5f8;
}

.auth-block__logout {
    margin-top: 1rem;
}

/* CHISIMBA-REBORN STORY ADMINISTRATION ICONS — p398
 * Modules own icon meaning and translated labels; the skin owns layout,
 * sizing, colour and interaction states for both story administration pages.
 */
.story-admin-page {
    min-width: 0;
}

.story-admin-page__header {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    justify-content: flex-start;
    margin-block-end: 1rem;
}

.story-admin-page__title {
    margin: 0;
}

.story-admin-page__add {
    align-items: center;
    background: var(--chisimba-primary, #2563eb);
    border: 1px solid var(--chisimba-primary, #2563eb);
    border-radius: 0.45rem;
    color: #fff;
    display: inline-flex;
    font-weight: 600;
    gap: 0.45rem;
    line-height: 1.2;
    padding: 0.55rem 0.8rem;
    text-decoration: none;
}

.story-admin-page__add:hover,
.story-admin-page__add:focus-visible {
    background: var(--chisimba-primary-dark, #1d4ed8);
    border-color: var(--chisimba-primary-dark, #1d4ed8);
    color: #fff;
    text-decoration: none;
}

.story-admin-page__add-icon {
    font-size: 1.05rem;
}

.story-admin-page__instructions {
    color: var(--chisimba-muted, #64748b);
    line-height: 1.55;
    margin-block: 0;
}

.story-admin-page__table-wrap {
    inline-size: 100%;
}

.story-admin-page__table {
    border-collapse: collapse;
    inline-size: 100%;
}

.story-admin-page__table th,
.story-admin-page__table td {
    overflow-wrap: anywhere;
    padding: 0.4rem 0.45rem;
    text-align: start;
    vertical-align: middle;
}

.story-admin-page__actions {
    align-items: center;
    display: inline-flex;
    gap: 0.5rem;
    white-space: nowrap;
}

.story-admin-page__actions a,
.story-admin-page__action {
    align-items: center;
    border-radius: 0.35rem;
    color: var(--chisimba-primary, #2563eb);
    display: inline-flex;
    inline-size: 2rem;
    justify-content: center;
    min-block-size: 2rem;
    text-decoration: none;
}

.story-admin-page__actions a:hover,
.story-admin-page__actions a:focus-visible,
.story-admin-page__action:hover,
.story-admin-page__action:focus-visible {
    background: rgb(37 99 235 / 10%);
    color: var(--chisimba-primary-dark, #1d4ed8);
    text-decoration: none;
}

.story-admin-page__action-icon,
.story-admin-page__status-icon {
    font-size: 1.1rem;
}

.story-admin-page__status,
.story-admin-page__date {
    align-items: center;
    display: inline-flex;
}

.story-admin-page__date {
    gap: 0.4rem;
    white-space: nowrap;
}

.story-admin-page__status--active {
    color: #15803d;
}

.story-admin-page__status--inactive {
    color: var(--chisimba-muted, #64748b);
}

.story-admin-page__status--pinned {
    color: var(--chisimba-primary, #2563eb);
}

.story-admin-page__status--expired {
    color: #b45309;
}

@media (max-width: 760px) {
    .story-admin-page__header {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* BEGIN CHISIMBA-REBORN SINGLE STACKED SIDEBAR POSITION
 *
 * canvas_stacked13 combines both narrow columns into Region3 and omits
 * Region1. The default two-row canvas otherwise assigns Region3 to the lower
 * sidebar row, leaving an artificial vertical gap beside a tall main region.
 * When Region3 is the only supplementary region, give it the upper sidebar
 * slot and collapse the unused row.
 */
#Canvas_Content_Body:has(> #Canvas_Content_Body_Region3):not(:has(> #Canvas_Content_Body_Region1)) {
    display: grid !important;
    grid-template-areas: "main supplementary-top" !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(17rem, 24rem) !important;
    grid-template-rows: auto !important;
}

#Canvas_Content_Body:has(> #Canvas_Content_Body_Region3):not(:has(> #Canvas_Content_Body_Region1))
    > #Canvas_Content_Body_Region3 {
    align-self: start !important;
    grid-area: supplementary-top !important;
    height: auto !important;
    min-height: 0 !important;
}

@media (max-width: 60rem) {
    #Canvas_Content_Body:has(> #Canvas_Content_Body_Region3):not(:has(> #Canvas_Content_Body_Region1)) {
        grid-template-areas:
            "main"
            "supplementary-top" !important;
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
    }
}

/* END CHISIMBA-REBORN SINGLE STACKED SIDEBAR POSITION */

/* CHISIMBA COMPLETE COMPONENT WRAPPER CONTRACT — p380
 *
 * Canvas regions, block lists and .block elements are placement structures.
 * They must not create an additional card or horizontal inset around a child
 * that already renders a complete visual component.
 *
 * This extends the existing feature-box contract to semantic Content blocks
 * while deliberately leaving unboxed legacy module output unchanged.
 * Regions own placement and inter-component spacing; components own their
 * visible surface.
 *
 * @author Derek Keats
 */

/* Flatten a region when a complete component is direct or block-wrapped. */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
):has(> .content-block),
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
):has(> :is(#leftblocks, #middleblocks, #rightblocks) > .block > .content-block) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

/* Placement lists use all available width and own spacing between blocks. */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) > :is(#leftblocks, #middleblocks, #rightblocks):has(
    > .block > .content-block
) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--chisimba-space-3, 12px);
    margin: 0;
    min-width: 0;
    padding: 0;
    width: 100%;
}

/* A generic wrapper around a complete component is structural, not a card. */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) .block:has(> .content-block) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    padding: 0 !important;
    width: 100%;
}

/* The component itself occupies the width provided by its canvas region. */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) .block > .content-block,
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) > .content-block {
    box-sizing: border-box;
    margin: 0;
    max-inline-size: none;
    max-width: none;
    min-width: 0;
    width: 100%;
}

/* Unified course catalogue cards. */
.course-catalogue,
.course-catalogue-page {
    inline-size: 100%;
    min-inline-size: 0;
}

.course-card-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    inline-size: 100%;
}

.course-card {
    background: var(--chisimba-surface, #fff);
    border: 1px solid var(--chisimba-border, #d7e0ea);
    border-radius: var(--chisimba-region-radius, 0.65rem);
    box-shadow: var(--chisimba-shadow, 0 0.25rem 1rem rgb(15 23 42 / 8%));
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    overflow: hidden;
}

.course-card__media {
    aspect-ratio: 16 / 9;
    background: color-mix(in srgb, var(--chisimba-primary, #0b78c5) 12%, #fff);
    overflow: hidden;
    position: relative;
}

.course-card__image {
    block-size: 100%;
    display: block;
    inline-size: 100%;
    object-fit: cover;
}

.course-card__placeholder {
    align-items: center;
    block-size: 100%;
    display: flex;
    inline-size: 100%;
    justify-content: center;
}

.course-card__placeholder span {
    border: 0.18rem solid color-mix(in srgb, var(--chisimba-primary, #0b78c5) 50%, transparent);
    border-radius: 50%;
    block-size: 3rem;
    display: block;
    inline-size: 3rem;
}

.course-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    inset-block-start: 0.75rem;
    inset-inline-start: 0.75rem;
    position: absolute;
}

.course-card__badge {
    background: rgb(255 255 255 / 94%);
    border-radius: 999px;
    color: var(--chisimba-text, #172033);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.45rem 0.65rem;
}

.course-card__badge--access {
    background: var(--chisimba-primary, #0b78c5);
    color: #fff;
}

.course-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 1rem;
}

.course-card__title {
    font-size: 1.2rem;
    line-height: 1.25;
    margin: 0;
}

.course-card__summary {
    color: var(--chisimba-muted, #536273);
    display: -webkit-box;
    line-height: 1.5;
    margin: 0.7rem 0 1rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.course-card__footer {
    margin-block-start: auto;
    padding-block-start: 0.25rem;
}

.course-card__lecturer {
    color: var(--chisimba-muted, #536273);
    font-size: 0.9rem;
    line-height: 1.35;
    margin: 0 0 1rem;
}

.course-card__lecturer span {
    font-weight: 700;
}

.course-card__action,
.course-catalogue__more a {
    align-items: center;
    border-radius: 0.4rem;
    display: inline-flex;
    font-weight: 700;
    justify-content: center;
    min-block-size: 2.75rem;
    text-decoration: none;
}

.course-card__action {
    background: var(--chisimba-primary, #0b78c5);
    color: #fff;
    padding: 0.55rem 0.9rem;
}

.course-card__action:hover,
.course-card__action:focus-visible {
    background: var(--chisimba-primary-dark, #075c98);
    color: #fff;
    text-decoration: none;
}

.course-card__action:focus-visible,
.course-catalogue__more a:focus-visible {
    outline: 0.2rem solid var(--chisimba-focus, #f59e0b);
    outline-offset: 0.15rem;
}

.course-catalogue__more {
    margin: 1.25rem 0 0;
    text-align: center;
}

.course-catalogue__more a {
    border: 1px solid var(--chisimba-primary, #0b78c5);
    color: var(--chisimba-primary, #0b78c5);
    padding: 0.5rem 1rem;
}

.course-catalogue__empty {
    color: var(--chisimba-muted, #536273);
    margin: 0;
}

@media (max-width: 64rem) {
    .course-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 42rem) {
    .course-card-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}
+

.course-application {
    background: var(--chisimba-surface, #fff);
    border: 1px solid var(--chisimba-border, #d7e0ea);
    border-top: 0.35rem solid var(--chisimba-primary, #0b78c5);
    border-radius: var(--chisimba-region-radius, 0.65rem);
    box-shadow: var(--chisimba-shadow, 0 0.25rem 1rem rgb(15 23 42 / 8%));
    margin-inline: auto;
    max-inline-size: 46rem;
    padding: clamp(1.25rem, 4vw, 2.5rem);
}

.course-application__eyebrow {
    color: var(--chisimba-primary, #0b78c5);
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin: 0 0 0.4rem;
    text-transform: uppercase;
}

.course-application h1 {
    margin-block-start: 0;
}

.course-application__back {
    color: var(--chisimba-primary, #0b78c5);
    font-weight: 700;
}

/* CHISIMBA DESCENDANT COMPLETE COMPONENT CONTRACT — p382
 *
 * A module installation can add an extra structural element between a canvas
 * region, its block list and a complete component. Presentation must not rely
 * on one exact wrapper depth: any region containing a semantic Content block
 * is placement only, and any enclosing generic .block is placement only.
 * Ordinary blocks remain untouched.
 *
 * @author Derek Keats
 */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
):has(.content-block) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) :is(#leftblocks, #middleblocks, #rightblocks):has(.content-block) {
    box-sizing: border-box;
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: 0;
    width: 100%;
}

:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
) .block:has(.content-block) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: 0 !important;
    width: 100%;
}

/* CHISIMBA COURSE APPLICATION NOTICE BUTTON */
button.course-card__action {
    border: 0;
    cursor: pointer;
    font: inherit;
}
/* END CHISIMBA COURSE APPLICATION NOTICE BUTTON */

/* CHISIMBA_BLOCK_PLACEMENT_NO_INSET
   Generic block wrappers are placement structures only.
   Visual/internal spacing belongs to the rendered block component itself. */
:is(#leftblocks, #middleblocks, #rightblocks) > :is(
    .block,
    .blockwrapper,
    .block-wrapper,
    .moduleblock,
    .module-block,
    .sideblock,
    .side-block
) {
    box-sizing: border-box;
    width: 100%;
    padding-inline: 0 !important;
}

/* Do not flatten the component's own internal content spacing. */
:is(#leftblocks, #middleblocks, #rightblocks)
> :is(.block, .blockwrapper, .block-wrapper, .moduleblock, .module-block, .sideblock, .side-block)
> :is(.contentblock, .content-block) {
    box-sizing: border-box;
}
/* END CHISIMBA_BLOCK_PLACEMENT_NO_INSET */

/* CHISIMBA_CONTENT_MODE_BLOCK_WRAPPER */
:is(#Canvas_Content_Body_Region1,#Canvas_Content_Body_Region2,#Canvas_Content_Body_Region3)
:is(#leftblocks,#middleblocks,#rightblocks)
> .block:has(> .featurebox--content) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    margin: 0;
    min-width: 0;
    padding: 0;
    width: 100%;
}

:is(#Canvas_Content_Body_Region1,#Canvas_Content_Body_Region2,#Canvas_Content_Body_Region3)
:is(#leftblocks,#middleblocks,#rightblocks)
> .block > .featurebox--content {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    box-sizing: border-box;
    margin: 0;
    max-width: none;
    min-width: 0;
    padding: 0;
    width: 100%;
}
/* END CHISIMBA_CONTENT_MODE_BLOCK_WRAPPER */

/* CHISIMBA_CONTENT_MODE_REGION_SHELL
 *
 * A complete content-mode block already supplies its own visual surface.
 * The canvas region around it is placement only and must not leave a
 * background/padding strip beneath the component.
 */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region2,
    #Canvas_Content_Body_Region3
):has(
    > :is(#leftblocks, #middleblocks, #rightblocks)
    > .block
    > .featurebox--content
) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
/* END CHISIMBA_CONTENT_MODE_REGION_SHELL */

/* CHISIMBA_STRUCTURAL_SIDEBAR
 *
 * A sidebar marked with this primitive owns its visible cards. The canvas
 * region is placement only, so it must not add an extra inset that leaves the
 * first sidebar card lower than the main column. Use this marker for canonical
 * account/admin navigation and other card stacks in a standard two-column
 * workspace instead of adding module-specific offset rules.
 */
:is(
    #Canvas_Content_Body_Region1,
    #Canvas_Content_Body_Region3
):has(> .chisimba-structural-sidebar) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.chisimba-structural-sidebar,
.chisimba-structural-sidebar > :first-child {
    margin-top: 0 !important;
}
/* END CHISIMBA_STRUCTURAL_SIDEBAR */

/* CHISIMBA_STRUCTURAL_MAIN
 *
 * A main-column component marked with this primitive owns its visible cards.
 * The canvas region becomes placement only, preventing card-within-card
 * backgrounds and duplicate outer gutters.
 */
#Canvas_Content_Body_Region2:has(> .chisimba-structural-main) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.chisimba-structural-main,
.chisimba-structural-main > :first-child {
    margin-top: 0 !important;
}
/* END CHISIMBA_STRUCTURAL_MAIN */

/* My Learning components own both visible cards; regions only place them. */
#Canvas_Content_Body_Region2:has(> .mylearning-page),
#Canvas_Content_Body_Region1:has(> .mylearning-sidebar),
#Canvas_Content_Body_Region3:has(> .mylearning-sidebar) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

.mylearning-page > .student-learning-overview,
.mylearning-sidebar > .featurebox:first-child {
    margin-top: 0;
}

/* Registration: balanced main and guidance columns. */
#Canvas_Content_Body_Region2:has(
    > .registration-service.chisimba-form-page
    > .chisimba-form-card
) {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}

/* Site Administration owns its task cards; the canvas region is structural. */
#Canvas_Content_Body_Region2:has(
    > .toolbar_main
    > .admin-workbench
) {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}

@media (min-width: 60.01rem) {
    #Canvas_Content_Body:has(
        > #Canvas_Content_Body_Region2
        .registration-service.chisimba-form-page
    ) {
        grid-template-columns: minmax(0, 1fr) minmax(27rem, .52fr) !important;
    }

    #Canvas_Content_Body:has(
        > #Canvas_Content_Body_Region2
        .registration-service.chisimba-form-page
    ) > #Canvas_Content_Body_Region3 > .chisimba-guidance-card {
        margin-top: 0 !important;
    }

    #Canvas_Content_Body:has(
        > #Canvas_Content_Body_Region2
        .registration-service.chisimba-form-page
    ) > #Canvas_Content_Body_Region3 {
        padding: 0;
    }
}