/**
 * Kestrel layout layer (template.kestrel.layout): the container, the row grid and its rhythm, app
 * mode, the header masthead and its drawer, the footer band and the member area bar (PAGES.md 1.5,
 * 2.1 to 2.4; DESIGN_SPEC 5). Every rule carries a class (kit README 6.1). Nothing here puts
 * transform, filter, contain, isolation or clipping overflow on html, body, the shell, rows or
 * columns (G7, lint R6); full-bleed fills are ink overflow at 100vmax (lint R7). The drawer
 * breakpoint is the kit's 56.25rem; grid spans start at 48rem.
 *
 * @copyright Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license   GNU General Public License version 2 or later
 */

/* 1. Container, shell and row rhythm (DESIGN_SPEC 5.2) ----------------------------------------
   Rows stack with --ke-row-gap between them; a row the library printed but whose modules printed
   nothing is display: none and takes no gap. Inner pages start --ke-page-top under the header,
   the home 48px; the member bar and the member strip sit flush under the header. */

.ts-container {
    inline-size: 100%;
    max-inline-size: var(--ec-cw);
    margin-inline: auto;
    padding-inline: var(--ec-gut);
}

.ts-shell {
    --ke-shell-top: var(--ke-page-top);
    display: flex;
    flex-direction: column;
    row-gap: var(--ke-row-gap);
    padding-block: var(--ke-shell-top) var(--ec-sect-y);
}

.ts-home .ts-shell {
    --ke-shell-top: 3rem;
}

/* The breadcrumbs sit 28px above the page head (20px on the apps' pages). */
.ts-shell > .ts-row[data-ts-row="crumbs"] {
    margin-block-end: calc(1.75rem - var(--ke-row-gap));
}

.ts-app .ts-shell > .ts-row[data-ts-row="crumbs"] {
    margin-block-end: calc(1.25rem - var(--ke-row-gap));
}

/* The member strip opens the signed-in home flush under the header, 56px above the lead. */
.ts-shell > .ts-row[data-ts-row="below-top"]:first-child {
    margin-block: calc(-1 * var(--ke-shell-top)) calc(3.5rem - var(--ke-row-gap));
}

/* The paper band meets the footer when it closes the page. */
.ts-shell > .ts-row[data-ts-row="band"]:last-child {
    margin-block-end: calc(-1 * var(--ec-sect-y));
}

/* 2. The 12-column grid (PAGES.md 1.5, DESIGN_SPEC 5.5) -------------------------------------- */

.ts-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: clamp(1.5rem, 4.5vw, 4rem);
    row-gap: var(--ke-row-gap);
    align-items: start;
    min-inline-size: 0;
}

.ts-col {
    grid-column: 1 / -1;
    min-inline-size: 0;
}

@media (width >= 48rem) {
    .ts-row > .ts-span-1 { grid-column: span 1; }
    .ts-row > .ts-span-2 { grid-column: span 2; }
    .ts-row > .ts-span-3 { grid-column: span 3; }
    .ts-row > .ts-span-4 { grid-column: span 4; }
    .ts-row > .ts-span-5 { grid-column: span 5; }
    .ts-row > .ts-span-6 { grid-column: span 6; }
    .ts-row > .ts-span-7 { grid-column: span 7; }
    .ts-row > .ts-span-8 { grid-column: span 8; }
    .ts-row > .ts-span-9 { grid-column: span 9; }
    .ts-row > .ts-span-10 { grid-column: span 10; }
    .ts-row > .ts-span-11 { grid-column: span 11; }
    .ts-row > .ts-span-12 { grid-column: span 12; }
}

/* A module that prints nothing still gives the library a column: hide it, let a lone column span
   the row and drop a row with nothing to show. */
.ts-row > .ts-col:empty {
    display: none;
}

.ts-row:not(:has(> .ts-col:not(:empty) ~ .ts-col:not(:empty))) > .ts-col:not(:empty) {
    grid-column: 1 / -1;
}

.ts-row:not(:has(> .ts-col:not(:empty))) {
    display: none;
}

/* The content row: main and asides as intrinsic flex (DESIGN_SPEC 5.4, DV14), so the spans only
   decide which columns exist; 780 and 300 at 1440, stacked below about 924px of content. */
.ts-row[data-ts-row="content"] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 3.5rem 4rem;
}

.ts-row[data-ts-row="content"] > .ts-col {
    flex: 1 1 300px;
}

.ts-row[data-ts-row="content"] > .ts-pos-main {
    flex: 999 1 560px;
}

.ts-row[data-ts-row="content"]:has(> .ts-pos-sidebar-left:not(:empty)):has(> .ts-pos-sidebar-right:not(:empty)) {
    column-gap: 3rem;
}

.ts-row[data-ts-row="content"]:has(> .ts-pos-sidebar-left:not(:empty)):has(> .ts-pos-sidebar-right:not(:empty)) > .ts-col:not(.ts-pos-main) {
    flex-basis: 240px;
}

@media (width < 56.25rem) {
    .ts-row[data-ts-row="content"] > .ts-pos-main {
        order: -1;
    }
}

.ts-main {
    min-inline-size: 0;
}

/* App mode (K9, DESIGN_SPEC 5.5): the Sociable, Rewardify and Surveys apps keep their own sticky
   bars, so the header scrolls away there and nothing reserves a sticky offset. */
.ts-app {
    --ts-sticky-offset: 0px;
}

/* 3. Header masthead (PAGES.md 2.1, DESIGN_SPEC 5.6, Header board) ---------------------------- */

.ts-header {
    position: relative;
    z-index: var(--ts-z-header);
    border-block-end: 1px solid var(--ke-hairline);
    background-color: var(--ke-page);
    color: var(--ke-ink);
}

.ts-header.is-sticky {
    position: sticky;
    inset-block-start: 0;
}

.ts-app .ts-header.is-sticky {
    position: relative;
}

.ts-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 1.125rem;
}

.ts-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-block-size: 2.75rem;
    min-inline-size: 0;
    text-decoration: none;
}

.ts-header .ts-brand,
.ts-header .ts-brand:hover {
    color: var(--ke-ink);
    text-decoration: none;
}

.ts-brand__text {
    font-family: var(--ke-display);
    font-size: var(--ke-t-brand-s);
    font-weight: 700;
    font-synthesis-weight: none;
    line-height: 1;
    letter-spacing: -0.025em;
}

.ts-header .ts-brand__text {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ts-brand__logo {
    display: block;
    inline-size: auto;
    max-inline-size: min(13.75rem, 50vw);
    block-size: 2.125rem;
}

.ts-brand--responsive-logo .ts-brand__logo--dark,
[data-color-scheme="dark"] .ts-brand--responsive-logo .ts-brand__logo--light {
    display: none;
}

[data-color-scheme="dark"] .ts-brand--responsive-logo .ts-brand__logo--dark {
    display: block;
}

.ts-header__actions,
.ts-header__modules {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-inline-size: 0;
}

.ts-header__actions {
    flex: none;
}

.ts-member .ts-header__modules {
    gap: 0.375rem;
}

/* Icon buttons: the kit search toggle, the library's toggles and close button (44px, DESIGN_SPEC 7.1). */
.ts-header :is(.ts-action, .ts-nav-close) {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--ke-r-control);
    background-color: transparent;
    color: var(--ke-ink);
    font: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.ts-header :is(.ts-action, .ts-nav-close):hover {
    background-color: var(--ke-paper);
    color: var(--ke-ink);
}

.ts-nav-toggle--labelled {
    inline-size: auto;
    gap: 0.5rem;
    padding-inline: 0.75rem;
}

/* The search band under the header (kit mod_finder "header" layout, kit template.js). Without
   script the toggle is a plain link to the search page and the band stays closed. */
.ts-search--header .ts-search__panel {
    position: absolute;
    inset: 100% 0 auto;
    z-index: 1;
    padding-block: 1.25rem;
    border-block-end: 1px solid var(--ke-hairline);
    background-color: var(--ke-page);
}

:where(html:not(.ke-js)) .ts-search--header .ts-search__panel {
    display: none;
}

.ts-search--header .ts-search__form {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    inline-size: 100%;
    max-inline-size: var(--ec-cw);
    margin-inline: auto;
    padding-inline: var(--ec-gut);
}

.ts-search__field {
    position: relative;
    flex: 1 1 12rem;
    min-inline-size: 0;
}

.ts-search__icon {
    position: absolute;
    z-index: 1;
    inset-block-start: 50%;
    inset-inline-start: 0.875rem;
    display: flex;
    color: var(--ke-ink-3);
    pointer-events: none;
    translate: 0 -50%;
}

.ts-search__field .ts-search__input {
    inline-size: 100%;
    padding-inline-start: 2.75rem;
}

.ts-search .ts-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    min-block-size: var(--ke-control-h);
    padding: 0 1.375rem;
    border: 0;
    border-radius: var(--ke-r-control);
    background-color: var(--ke-accent);
    color: var(--ke-on-accent);
    font: 600 var(--ke-t-ui)/1.2 var(--ke-sans);
    cursor: pointer;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.ts-search .ts-search__submit:hover {
    background-color: var(--ke-accent-hover);
}

/* From 56.25rem: brand and actions on the first row, the nav on its own row under a full-width
   hairline (DV4); the items scroll sideways when they do not fit. */
@media (width >= 56.25rem) {
    .ts-header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "brand actions" "nav nav";
        gap: 1.125rem 1.5rem;
        padding-block-end: 0;
    }

    .ts-header__inner > .ts-brand {
        grid-area: brand;
        justify-self: start;
    }

    .ts-header__actions {
        grid-area: actions;
    }

    /* The 1px top padding keeps the 48px items under the hairline, as the board's border-top. */
    .ts-header__nav {
        grid-area: nav;
        min-inline-size: 0;
        padding-block-start: 1px;
        border-image: linear-gradient(to bottom, var(--ke-hairline) 1px, transparent 1px) fill 0 // 0 100vmax;
    }

    .ts-brand__text {
        font-size: var(--ke-t-brand);
    }

    .ts-header__nav > :is(.ts-nav-close, .ke-drawer__bar),
    .ts-header__offcanvas,
    .ts-header .ts-nav-toggle {
        display: none;
    }

    /* 6px of padding inside the scroller keeps the focus ring unclipped (DESIGN_SPEC 9). */
    .ts-header__nav .mod-menu {
        display: flex;
        gap: 2rem;
        margin: -0.375rem;
        padding: 0.375rem;
        list-style: none;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ts-header__nav .mod-menu::-webkit-scrollbar {
        display: none;
    }

    .ts-header__nav .mod-menu > li {
        flex: none;
        margin: 0;
        padding: 0;
    }

    /* The row shows the first level; deeper levels live in the drawer and in Studio mega menus. */
    .ts-header__nav .mod-menu > li > ul {
        display: none;
    }

    .ts-header__nav .mod-menu > li > :is(a, span) {
        display: block;
        padding: 0.875rem 0 0.75rem;
        border-block-end: 2px solid transparent;
        color: var(--ke-ink-2);
        font-size: var(--ke-t-ui);
        font-weight: 500;
        line-height: 1.25rem;
        text-decoration: none;
        white-space: nowrap;
        transition: color var(--ec-dur-1) var(--ec-ease), border-color var(--ec-dur-1) var(--ec-ease);
    }

    .ts-header__nav .mod-menu > li > a:hover {
        color: var(--ke-ink);
    }

    .ts-header__nav .mod-menu > li > a:is([aria-current="page"], [aria-current="location"]),
    .ts-header__nav .mod-menu > li:is(.current, .active) > a {
        border-block-end-color: var(--ke-accent);
        color: var(--ke-ink);
        font-weight: 600;
    }
}

/* 4. Phone header and drawer (below 56.25rem; PAGES.md 2.2, DESIGN_SPEC 5.6, K21) -------------
   One row: brand, the members' bell and the toggle. The search, the guest buttons, the pill and
   the avatar menu move to the drawer, a panel from the right over the scrim; kit template.js
   traps focus, closes on Escape, returns focus and locks the page. */
@media (width < 56.25rem) {
    .ts-header__modules > :is(.ts-search--header, .ke-account--guest),
    .ts-header__modules .ke-account--member > :is(.ke-pill, .ke-account__menu) {
        display: none;
    }

    .ts-header__nav {
        position: fixed;
        inset: 0 0 0 auto;
        z-index: 1;
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        inline-size: min(26.25rem, 100%);
        block-size: 100dvh;
        padding: 0 1.25rem 2rem;
        overflow-y: auto;
        overscroll-behavior: contain;
        background-color: var(--ke-page);
        color: var(--ke-ink);
        box-shadow: 0 0 0 100vmax var(--ts-scrim);
        visibility: hidden;
        transform: translateX(100%);
        transition: transform var(--ec-dur-3) var(--ec-ease), visibility 0s linear var(--ec-dur-3);
    }

    .ts-nav-open .ts-header__nav {
        visibility: visible;
        transform: none;
        transition: transform var(--ec-dur-3) var(--ec-ease), visibility 0s;
    }

    body.ts-nav-open {
        position: fixed;
        inset-block-start: var(--ts-scroll-lock, 0px);
        inset-inline: 0;
        inline-size: 100%;
    }

    .ts-header__offcanvas {
        display: contents;
    }

    /* Brand row with the close button (kestrel.js 6.1); the bare close button without script. */
    .ke-drawer__bar,
    .ts-header__nav > .ts-nav-close {
        order: 0;
        flex: none;
    }

    .ke-drawer__bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-inline: -1.25rem;
        padding: 1.125rem 1.25rem;
        border-block-end: 1px solid var(--ke-hairline);
    }

    .ts-header__nav > .ts-nav-close {
        align-self: flex-end;
        margin-block-start: 1.125rem;
    }

    .ke-drawer__brand {
        color: var(--ke-ink);
    }

    .ke-drawer__brand .ts-brand__text {
        overflow-wrap: anywhere;
    }

    .ts-header__offcanvas > .ts-search--drawer {
        order: 1;
    }

    .ts-search--drawer .ts-search__label {
        display: block;
        margin: 0 0 0.5rem;
        color: var(--ke-ink);
        font-size: var(--ke-t-label);
        font-weight: 600;
        line-height: var(--ke-lh-label);
    }

    .ts-search--drawer .ts-search__row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .ts-header__nav .mod-menu {
        order: 2;
        display: block;
        margin: 0;
        padding: 0;
        border-block-start: 1px solid var(--ke-hairline);
        list-style: none;
    }

    .ts-header__nav .mod-menu li {
        margin: 0;
        padding: 0;
        border-block-end: 1px solid var(--ke-hairline);
    }

    .ts-header__nav .mod-menu ul > li:last-child {
        border-block-end: 0;
    }

    .ts-header__nav .mod-menu ul {
        margin: 0;
        padding: 0 0 0 1rem;
        border-block-start: 1px solid var(--ke-hairline);
        list-style: none;
    }

    .ts-header__nav .mod-menu li > :is(a, span) {
        display: flex;
        align-items: center;
        min-block-size: 3rem;
        padding: 0.75rem 0 0.75rem 0.875rem;
        border-inline-start: 2px solid transparent;
        color: var(--ke-ink);
        font-size: 1rem;
        font-weight: 500;
        line-height: 1.3;
        text-decoration: none;
    }

    .ts-header__nav .mod-menu li > a:is([aria-current="page"], [aria-current="location"]),
    .ts-header__nav .mod-menu li.current > a {
        border-inline-start-color: var(--ke-accent);
        font-weight: 600;
    }

    .ts-header__offcanvas > .ke-account-drawer {
        order: 3;
    }

    .ts-header__offcanvas > :not(.ts-search--drawer, .ke-account-drawer) {
        order: 4;
    }

    /* Without script the drawer cannot open: the nav prints as a block under the brand row, and
       the taller header scrolls away instead of sticking. */
    :where(html:not(.ke-js)) .ts-header.is-sticky {
        position: relative;
    }

    :where(html:not(.ke-js)) .ts-header__inner {
        flex-wrap: wrap;
    }

    :where(html:not(.ke-js)) .ts-header__nav {
        position: static;
        flex: 1 1 100%;
        inline-size: 100%;
        block-size: auto;
        padding: 0;
        overflow: visible;
        box-shadow: none;
        visibility: visible;
        transform: none;
    }

    :where(html:not(.ke-js)) .ts-header :is(.ts-nav-toggle, .ts-nav-close) {
        display: none;
    }
}

/* 5. Footer band (PAGES.md 2.3, DESIGN_SPEC 5.6, Footer board) -------------------------------
   tokens.css gives .ts-footer the band scope (K28) and base.css paints its ground and ink. */

.ts-footer {
    border-block-start: 1px solid var(--ke-band-edge);
}

.ts-footer > .ts-container {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
    padding-block: 4rem 1.75rem;
}

.ts-footer__cols {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 1.5rem;
}

.ts-footer__col {
    display: flex;
    flex: 999 1 150px;
    flex-direction: column;
    gap: 0.875rem;
    min-inline-size: 0;
}

/* The board nests the link columns in their own grid (gap 32 by 24) beside the brand (gap 40
   by 32); the library prints them as flat siblings, so the brand's margins make up the rest. */
.ts-footer__brand {
    flex: 1 1 260px;
    gap: 1.125rem;
    margin-inline-end: 0.5rem;
}

/* Until the brand and four 150px columns share one row (964px of content), the brand takes its
   own row and the columns form an aligned grid under it, as the board's nested grid does; a
   wrapping flex row would leave the second row of columns out of line with the first. */
@media (width < 66rem) {
    .ts-footer__cols {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    }

    .ts-footer__brand {
        grid-column: 1 / -1;
        margin-block-end: 0.5rem;
        margin-inline-end: 0;
    }
}

.ts-footer .ts-brand,
.ts-footer .ts-brand:hover {
    align-self: flex-start;
    max-inline-size: 100%;
    color: var(--ke-band-strong);
    text-decoration: none;
}

.ts-footer .ts-brand__text {
    font-size: var(--ke-t-brand-s);
    overflow-wrap: anywhere;
}

.ts-footer__blurb {
    max-inline-size: 32ch;
    margin: 0;
    color: var(--ke-band-ink-2);
    font-size: var(--ke-t-ui);
    line-height: 1.6;
    text-wrap: pretty;
}

.ts-footer__col > :is(h2, h3, h4, h5, h6) {
    margin: 0;
    color: var(--ke-band-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ts-footer__col > ul,
.ts-footer__legal,
.ts-footer__pay {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ts-footer__col > ul > li,
.ts-footer__legal > li,
.ts-footer__pay > li {
    margin: 0;
    padding: 0;
}

.ts-footer__col > ul > li > a {
    display: block;
    padding-block: 0.375rem;
    color: var(--ke-band-ink);
    font-size: var(--ke-t-ui);
    line-height: 1.25rem;
    text-decoration: none;
}

.ts-footer :is(.ts-footer__col > ul > li > a, .ts-footer__legal a, .ke-backtotop):hover {
    color: var(--ke-band-strong);
    text-decoration-line: underline;
}

.ts-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.ts-footer .ts-social {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--ke-r-control);
    color: var(--ke-band-ink);
}

.ts-footer__main:empty {
    display: none;
}

/* Space-between as the board: "Back to top" sits at the end of the row, and at the start of its
   own line once the row wraps; the item before it takes the free space on a shared line. */
.ts-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
    padding-block-start: 1.5rem;
    border-block-start: 1px solid var(--ke-band-line);
    color: var(--ke-band-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.4;
    letter-spacing: var(--ke-track-meta);
}

.ts-footer__copy {
    margin: 0;
}

.ts-footer__legal,
.ts-footer__pay {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 1.5rem;
}

.ts-footer__legal a,
.ke-backtotop {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    color: var(--ke-band-ink);
    text-decoration: none;
}

.ts-footer__bottom > :has(+ .ke-backtotop) {
    margin-inline-end: auto;
}

.ke-backtotop {
    font-weight: 500;
}

/* 6. Member area bar (PAGES.md 2.4, DESIGN_SPEC 5.6, MemberNav board) -------------------------
   A full-bleed paper band with a hairline below, flush under the header, inside the shell's
   container; the list scrolls inside itself, padded so the focus ring is never clipped. */

.ke-memberbar {
    margin-block: calc(-1 * var(--ke-shell-top)) calc(var(--ke-page-top) - var(--ke-row-gap));
    border-image: linear-gradient(to top, var(--ke-hairline) 1px, var(--ke-page) 1px) fill 0 // 0 100vmax;
    color: var(--ke-ink);
}

.ke-memberbar__inner {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    margin: -0.375rem;
    padding: 0.375rem;
    overflow-x: auto;
    scrollbar-width: none;
}

.ke-memberbar__inner::-webkit-scrollbar {
    display: none;
}

.ke-memberbar__title {
    flex: none;
    margin: 0;
    color: var(--ts-link);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ke-memberbar__list {
    display: flex;
    flex: none;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ke-memberbar__item {
    display: flex;
    margin: 0;
    padding: 0;
}

.ke-memberbar__link {
    display: inline-flex;
    align-items: center;
    padding: 0.875rem 0 0.75rem;
    border-block-end: 2px solid transparent;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-label);
    font-weight: 500;
    line-height: 1.25rem;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--ec-dur-1) var(--ec-ease), border-color var(--ec-dur-1) var(--ec-ease);
}

.ke-memberbar__link:hover {
    color: var(--ke-ink);
}

.ke-memberbar__link[aria-current="page"] {
    border-block-end-color: var(--ke-accent);
    color: var(--ke-ink);
    font-weight: 600;
}

/* 7. Reduced motion: the drawer and the menus appear in place (DESIGN_SPEC 8). ---------------- */

@media (prefers-reduced-motion: reduce) {
    .ts-header__nav,
    .ts-nav-open .ts-header__nav {
        transition: none;
    }
}

/* 8. Module stacks (M2b): side columns and the module rows stack their modules with 56px between
   them (Main and MemberHome boards). The main column keeps the component's own flow. --------- */

.ts-col:not(.ts-pos-main, :empty) {
    display: flex;
    flex-direction: column;
    gap: 3.5rem;
}

/* 9. The error document's bar and the component document (PAGES.md 2.8, M2b) -----------------
   The engine does not run on the error document, so the header cannot render: a slim bar with
   the brand and a search link stands in for it, on the page ground with a hairline below. */

.ke-docbar {
    border-block-end: 1px solid var(--ke-hairline);
    background-color: var(--ke-page);
    color: var(--ke-ink);
}

.ke-docbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.5rem;
    padding-block: 1.125rem;
}

.ke-docbar .ts-brand,
.ke-docbar .ts-brand:hover {
    color: var(--ke-ink);
    text-decoration: none;
}

.ke-docbar .ts-brand__text {
    font-size: var(--ke-t-brand);
}

.ke-docbar__search {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: var(--ke-control-h-sm);
    padding-inline: 0.75rem;
    border-radius: var(--ke-r-control);
    color: var(--ke-ink);
    font-family: var(--ke-sans);
    font-size: var(--ke-t-ui);
    font-weight: 500;
    line-height: 1.33;
    text-decoration: none;
}

.ke-docbar__search:hover {
    background-color: var(--ke-paper);
    color: var(--ke-ink);
    text-decoration: none;
}

.ke-docbar__search > svg {
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
}

/* tmpl=component (print views, dialogs, the Surveys full screen): no chrome, 24px around. */
body.ts-component {
    padding: 1.5rem;
}

/* The error document's footer line closes the viewport when the page is short. */
body.ts-error-page {
    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100svh;
}

.ke-docfoot {
    margin-block-start: auto;
}

/* 10. Article pages (M3a): "More from City" (kestrel:more in main-bottom) is a paper band that
   meets the footer when it closes the page, as the band row does on the home. ------------------ */

.ts-shell > .ts-row[data-ts-row="main-bottom"]:last-child:has(.ke-morefrom) {
    margin-block-end: calc(-1 * var(--ec-sect-y));
}

/* 11. Sociable pages (M4a, K61): the Sociable app keeps its own navigation column and right rail
   (gap G4), so beside a Kestrel side column its posts would narrow to about 216px at 1440. On
   Sociable pages the app takes the whole content row and any side column follows under it, its
   modules side by side; Rewardify and Community Surveys pages keep their side columns beside. */

.ts-app--sociable .ts-row[data-ts-row="content"] > .ts-pos-main {
    flex-basis: 100%;
    order: -1;
}

.ts-app--sociable .ts-row[data-ts-row="content"] > .ts-col:not(.ts-pos-main, :empty) {
    display: grid;
    flex-basis: 100%;
    grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr));
    align-items: start;
    gap: 3.5rem 4rem;
}

/* 12. Member strip (M4b; PAGES.md 2.6, DESIGN_SPEC 3.9 and 7.21, MemberHome board): a full-bleed
   paper band with a hairline below, flush under the header: the greeting and the standing, the
   progress to the member ranked above with its caption, and "Your rewards" at the end. ---------- */

.ke-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 3rem;
    padding-block: 1.125rem;
    border-image: linear-gradient(to top, var(--ke-hairline) 1px, var(--ke-page) 1px) fill 0 // 0 100vmax;
    color: var(--ke-ink);
}

.ke-strip__greeting {
    margin: 0;
    font-family: var(--ke-display);
    font-size: 1.375rem;
    font-weight: var(--ke-w-h2);
    line-height: 1.2;
    letter-spacing: var(--ke-track-h2);
}

.ke-strip__meta {
    margin: 0.25rem 0 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-micro);
    line-height: 1.4;
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ke-strip__progress {
    display: flex;
    flex: 1 1 16rem;
    flex-direction: column;
    gap: 0.5rem;
    max-inline-size: 29rem;
}

.ke-strip__gap {
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-help);
    line-height: 1.4;
}

.ke-strip > .ts-sec__more {
    margin: 0;
}

/* 13. Long words in the footer (M6): a column heading is often the site name ("{site}" in the sample
   data) and a link can carry a long single word; at 390px the two-up columns are about 167px wide,
   so an unbroken name overflowed the page. Break such words inside their column. ---------------- */
.ts-footer__col > :is(h2, h3, h4, h5, h6),
.ts-footer__col > ul > li > a {
    overflow-wrap: anywhere;
}