/********************************************************************************************************/
/* SiteShell.css                                                                                        */
/*                                                                                                      */
/* The shell for the two nested masters - SiteContent (scrollable reading width) and SiteConsole (wide   */
/* working layout). Loaded by both, and by nothing else.                                                */
/*                                                                                                      */
/* Site.Master still owns the html/head/body, the header bar and the pop-out navigation, so none of      */
/* that is repeated here. What IS here is everything between the header and the bottom of the page.     */
/*                                                                                                      */
/* Colours come from the per-owner Config.css through var(), with a literal fallback on every one so a   */
/* page still renders if it is reached before an owner is resolved.                                     */
/********************************************************************************************************/

/* The scrollbar width is reserved whether or not the page is long enough to need one. Without this a
   short page is wider than a long one by exactly the scrollbar, and the content visibly jumps sideways
   as you navigate between them. Diagnosed on the school pages; same cure here.

   Scoped to this sheet rather than Site.css on purpose - while the reroute is part done, only the pages
   that have moved onto the new masters should change. It moves up to Site.css when they all have. */
html {
    scrollbar-gutter: stable;
}


/********************************************************************************************************/
/* NOTICE - shared by both layouts                                                                      */
/********************************************************************************************************/

/* Server-side Visible=false when there is nothing to say, so this never contributes an empty box or a
   stray margin on an ordinary page. */
.dsSiteNotice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 12px 0;
    padding: 10px 12px;
    border-left: 4px solid #b12e34;
    border-radius: 2px;
    background-color: #fdf3f4;
    color: #5c1a1e; /* 7.4:1 on the ground above - WCAG 1.4.3 at normal weight */
    font-size: 14px;
    line-height: 1.45;
}

    .dsSiteNotice i {
        margin-top: 2px;
        color: #b12e34;
    }


/********************************************************************************************************/
/* SITECONTENT - the reading layout                                                                     */
/********************************************************************************************************/

.dsSiteContent {
    /* Matches the school pages exactly: white page on the tinted ground, 10px of breathing room at the
       sides, and the same 1200px ceiling. Navigating from a school page to a tenant content page should
       not move anything. */
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
    background-color: var(--background-active-color, white);
    color: black;
    box-sizing: border-box;
}

.dsSiteBanner {
    margin: 10px 0;
}

    /*  The BANNER fills the width - it is artwork sized for exactly that. Scoped to the <picture>
        that SchoolHeader.RenderBannerFor emits, because a bare `.dsSiteBanner img` also matched the
        logo used when there is NO banner, and beat that logo's own rule on specificity (0,1,1 over
        0,1,0). The result was an owner's small square logo stretched across the full page width. */
    .dsSiteBanner picture img {
        display: block;
        width: 100%;
        height: auto;
    }

/* Logo beside the name when the owner has no banner - the school pages' fallback, which reads as an
   identity rather than as a section heading. The blue rule that used to sit on the name alone is
   gone: on a page that already has its own title it looked like a stray heading. */
.dsSiteBannerFallback {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 0;
}

/*  Deliberately specific enough to survive anything scoped to .dsSiteBanner. This logo is a mark, not
    a banner: it keeps its own proportions and its own size whatever the container is doing. */
.dsSiteBanner .dsSiteBannerLogo,
.dsSiteBannerLogo {
    flex: 0 0 auto;
    width: auto;
    max-width: 220px;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    object-position: left center;
}

.dsSiteBannerName {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
    color: black;
}

.dsSiteToolbar {
    margin-bottom: 4px;
}

/* The gap under the toolbar belongs to this container, not to whatever happens to be first inside it.
   The school pages learned this the hard way: when the gap lived on the first child margin-top, and
   that child was the install-as-app note, app mode hid the note and took the gap with it. Owning it
   here makes it the same 20px whatever is or is not showing. */
.dsSiteContentBody {
    padding-top: 20px;
    padding-bottom: 40px;
    min-height: 400px;
}

    .dsSiteContentBody p {
        margin-bottom: 10px;
    }


/********************************************************************************************************/
/* FOOTER                                                                                               */
/********************************************************************************************************/

.dsSiteFooter {
    margin-top: 20px;
    padding: 16px 0 24px 0;
    border-top: 1px solid #d7dee5;
    font-size: 13px;
    line-height: 1.6;
    color: #4a5460; /* 7.9:1 on white */
}

.dsSiteFooterLinks {
    margin-bottom: 8px;
}

    .dsSiteFooterLinks a {
        color: var(--link-dark-color, #24569C);
        margin-right: 14px;
    }

.dsSiteFooterMark {
    color: #5b6672; /* 6.2:1 on white */
}

.dsSiteFooterMarkName {
    font-weight: 600;
    color: #3d4753;
}


/********************************************************************************************************/
/* SITECONSOLE - the wide working layout                                                                */
/********************************************************************************************************/

.dsSiteConsole {
    width: 100%;
    padding: 0 10px;
    background-color: var(--background-active-color, white);
    color: black;
    box-sizing: border-box;
}

.dsSiteConsoleBody {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* .TenantContent h2 floats at width:100% in Tenant.css, and a flex container that follows one
       collapses to zero height unless it clears. Cheap insurance, and the bug it prevents is invisible
       until someone puts a heading above a console screen. */
    clear: both;
}

/* Opt-in, for a console screen that genuinely reads better at the reading width. */
.dsSiteConsoleNarrow {
    max-width: 1200px;
    margin: 0 auto;
}

.dsSiteConsoleRail {
    flex: 0 0 220px;
    min-width: 0;
    padding: 10px;
    border-right: 1px solid #e3e8ed;
    box-sizing: border-box;
}

.dsSiteConsoleMain {
    flex: 1 1 auto;
    /* Without this a wide table inside a flex child refuses to shrink and pushes the whole page into a
       horizontal scroll. */
    min-width: 0;
}

.dsSiteConsoleToolbar {
    margin-bottom: 8px;
}


/********************************************************************************************************/
/* ACCESSIBILITY - carried across from the school pages                                                 */
/********************************************************************************************************/

/* Keyboard users get a visible ring; mouse users do not get one on click. WCAG 2.4.7. */
.dsSiteContent a:focus-visible,
.dsSiteContent button:focus-visible,
.dsSiteContent [role="button"]:focus-visible,
.dsSiteConsole a:focus-visible,
.dsSiteConsole button:focus-visible,
.dsSiteConsole [role="button"]:focus-visible {
    outline: 2px solid var(--primary-dark-color, #0571b8);
    outline-offset: 2px;
}

/* For anything that only ever says "opens in a new window" to a screen reader. WCAG 3.2.5. */
.dsVisuallyHidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* WCAG 2.3.3 - honour the reader own setting rather than deciding for them. */
@media (prefers-reduced-motion: reduce) {
    .dsSiteContent *,
    .dsSiteConsole * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/********************************************************************************************************/
/* NARROW                                                                                               */
/********************************************************************************************************/

@media (max-width: 700px) {
    /* The rail stops being a rail and becomes a band above the work. */
    .dsSiteConsoleBody {
        display: block;
    }

    .dsSiteConsoleRail {
        border-right: none;
        border-bottom: 1px solid #e3e8ed;
    }

    .dsSiteBannerName {
        font-size: 19px;
    }
}


/********************************************************************************************************/
/* PRINT                                                                                                */
/*                                                                                                      */
/* Hoisted out of 40 pages on 2026-09-20, where it had been copied almost verbatim each time - 34 of     */
/* them carried the byte-identical rule hiding the header and toolbar.                                  */
/*                                                                                                      */
/* It belongs here because the selectors belong here: .dsHeaderPanel is Site.Master's header bar and     */
/* .dsToolbarPanel is the page toolbar the masters will own. A page should not have to know how to take  */
/* the site chrome off its own printout, and the next report written gets this for free instead of       */
/* inheriting it by copy-paste.                                                                         */
/*                                                                                                      */
/* This sheet is emitted BEFORE each page's own <style>, so anything a page still says about printing    */
/* continues to win. Several pages legitimately add to this - forcing text to black, page breaks, table  */
/* head/foot repetition - and those stay where they are.                                                */
/********************************************************************************************************/

@media print {
    /* The site chrome is navigation. On paper it is nothing but wasted ink. */
    .dsHeaderPanel,
    .dsToolbarPanel {
        display: none !important;
    }

    /* That chrome is gone, so the space reserved for it goes too. */
    .dsPagePanel {
        padding-top: 0;
    }

    /* On screen this panel is a fixed-height scroller. On paper it has to let the whole report out,
       or printing gives you only the first screenful. */
    .dsFormPanelFSwTB {
        overflow: visible;
    }

    body {
        background-image: none;
        background: none;
    }
}