/**
 * Kestrel community layer (template.kestrel.community): the mod_studio_community variants and the
 * extension module layouts (PAGES.md 5). Sections follow the variants in the order they are built.
 *
 * @copyright Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license   GNU General Public License version 2 or later
 */

/* 1. Account pieces: kestrel:account-header and kestrel:account-drawer (PAGES.md 2.1, 2.2;
   DESIGN_SPEC 7.1, 7.13, 7.22, Header board). The compact header buttons and the drawer's half
   width buttons carry their whole look here, so the header reads right on any page. */

.ke-account {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.ke-account--member {
    gap: 0.375rem;
}

:is(.ke-account, .ke-account-drawer) :is(.ke-account__login, .ke-account__join, .ke-account-drawer__login, .ke-account-drawer__join) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--ke-control-h-sm);
    padding: 0 1.125rem;
    border: 1px solid var(--ke-ink);
    border-radius: var(--ke-r-control);
    background-color: var(--ke-page);
    color: var(--ke-ink);
    font-family: var(--ke-sans);
    font-size: var(--ke-t-ui);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--ec-dur-1) var(--ec-ease), border-color var(--ec-dur-1) var(--ec-ease), color var(--ec-dur-1) var(--ec-ease);
}

:is(.ke-account, .ke-account-drawer) :is(.ke-account__login, .ke-account-drawer__login):hover {
    background-color: var(--ke-paper);
    color: var(--ke-ink);
}

:is(.ke-account, .ke-account-drawer) :is(.ke-account__join, .ke-account-drawer__join) {
    border-color: var(--ke-accent);
    background-color: var(--ke-accent);
    color: var(--ke-on-accent);
}

:is(.ke-account, .ke-account-drawer) :is(.ke-account__join, .ke-account-drawer__join):hover {
    border-color: var(--ke-accent-hover);
    background-color: var(--ke-accent-hover);
    color: var(--ke-on-accent);
}

/* Avatars in the account pieces: initials on the tone ground (DESIGN_SPEC 3.7, 7.13). */
:is(.ke-account, .ke-account-drawer) .ts-avatar {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: 50%;
    background-color: var(--ke-slate);
    color: var(--ke-slate-ink);
    font-family: var(--ke-mono);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1;
}

:is(.ke-account, .ke-account-drawer) .ke-avatar--44 {
    inline-size: 2.75rem;
    block-size: 2.75rem;
    font-size: 0.875rem;
}

:is(.ke-account, .ke-account-drawer) .ts-avatar[data-ts-tone="1"] { background-color: var(--ke-sand); color: var(--ke-sand-ink); }
:is(.ke-account, .ke-account-drawer) .ts-avatar[data-ts-tone="2"] { background-color: var(--ke-sage); color: var(--ke-sage-ink); }
:is(.ke-account, .ke-account-drawer) .ts-avatar[data-ts-tone="3"] { background-color: var(--ke-rose); color: var(--ke-rose-ink); }
:is(.ke-account, .ke-account-drawer) .ts-avatar[data-ts-tone="4"] { background-color: var(--ke-paper); color: var(--ke-ink-2); }
:is(.ke-account, .ke-account-drawer) .ts-avatar[data-ts-tone="5"] { background-color: var(--ts-tint); color: var(--ts-on-tint); }

:is(.ke-account, .ke-account-drawer) .ts-avatar__img {
    inline-size: 100%;
    block-size: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* The bell: a 44px icon button with the unread count cut out of the icon by a page ring. */
.ke-account .ke-account__bell {
    position: relative;
    display: inline-grid;
    place-items: center;
    flex: none;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--ke-r-control);
    color: var(--ke-ink);
    text-decoration: none;
    transition: background-color var(--ec-dur-1) var(--ec-ease);
}

.ke-account .ke-account__bell:hover {
    background-color: var(--ke-paper);
    color: var(--ke-ink);
}

.ke-count {
    position: absolute;
    inset-block-start: 5px;
    inset-inline-end: 3px;
    display: grid;
    place-items: center;
    min-inline-size: 1.125rem;
    block-size: 1.125rem;
    padding: 0 0.3125rem;
    border: 2px solid var(--ke-page);
    border-radius: var(--ke-pill);
    background-color: var(--ke-accent);
    color: var(--ke-on-accent);
    font-family: var(--ke-mono);
    font-size: 0.625rem;
    font-weight: 600;
    line-height: 1;
}

.ke-count--inline {
    position: static;
    min-inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-inline-start: auto;
    border: 0;
    font-size: 0.6875rem;
}

/* The rewards pill: award icon in the accent, the level in mono caps, the points balance. */
.ke-account .ke-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0 0.875rem 0 0.6875rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-pill);
    color: var(--ke-ink);
    text-decoration: none;
    transition: border-color var(--ec-dur-1) var(--ec-ease);
}

.ke-account a.ke-pill:hover {
    border-color: var(--ke-ink);
    color: var(--ke-ink);
}

.ke-pill > .ke-icon {
    flex: none;
    color: var(--ke-accent);
}

.ke-pill__level {
    color: var(--ke-ink-2);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-micro);
    font-weight: 600;
    line-height: 1;
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ke-pill__value {
    font-size: var(--ke-t-ui);
    font-weight: 600;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* The avatar menu: a details disclosure (kit template.js closes it on outside click and Escape). */
.ke-account__menu {
    position: relative;
}

.ke-account__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-block-size: 2.75rem;
    padding: 3px 8px 3px 3px;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-pill);
    background-color: var(--ke-page);
    color: var(--ke-ink);
    list-style: none;
    cursor: pointer;
    transition: border-color var(--ec-dur-1) var(--ec-ease);
}

.ke-account__trigger::-webkit-details-marker {
    display: none;
}

.ke-account__trigger:hover,
.ke-account__menu[open] > .ke-account__trigger {
    border-color: var(--ke-ink);
}

.ke-account__chevron {
    display: inline-flex;
    transition: transform var(--ec-dur-1) var(--ec-ease);
}

.ke-account__menu[open] .ke-account__chevron {
    transform: rotate(180deg);
}

.ke-account__panel {
    position: absolute;
    inset-block-start: calc(100% + 0.5rem);
    inset-inline-end: 0;
    z-index: var(--ts-z-dropdown);
    inline-size: var(--ke-menu-w);
    padding: 0.5rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r);
    background-color: var(--ke-raised);
    color: var(--ke-ink);
    box-shadow: var(--ts-overlay-shadow);
}

.ke-account__who,
.ke-account-drawer__who {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.625rem 0.875rem;
    border-block-end: 1px solid var(--ke-hairline);
}

.ke-account__identity,
.ke-account-drawer__identity {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
    margin: 0;
}

.ke-account__name,
.ke-account-drawer__name {
    font-size: var(--ke-t-ui);
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.ke-account__level,
.ke-account-drawer__points {
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.4;
}

.ke-account__list,
.ke-account-drawer__list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0.375rem 0 0;
    list-style: none;
}

.ke-account__entry,
.ke-account-drawer__entry {
    margin: 0;
    padding: 0;
}

.ke-account__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    inline-size: 100%;
    min-block-size: 2.75rem;
    padding: 0 0.625rem;
    border: 0;
    border-radius: var(--ke-r-sm);
    background-color: transparent;
    color: var(--ke-ink);
    font-family: var(--ke-sans);
    font-size: var(--ke-t-ui);
    font-weight: 400;
    line-height: 1.3;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.ke-account .ke-account__link:hover {
    background-color: var(--ke-paper);
    color: var(--ke-ink);
}

.ke-account__logout {
    margin: 0.375rem 0 0;
    padding-block-start: 0.375rem;
    border-block-start: 1px solid var(--ke-hairline);
}

/* The drawer account entry: half-width 48px buttons for guests; rows for members. */
.ke-account-drawer {
    display: flex;
    flex-direction: column;
}

.ke-account-drawer__row {
    display: flex;
    gap: 0.75rem;
}

.ke-account-drawer :is(.ke-account-drawer__login, .ke-account-drawer__join) {
    flex: 1 1 0;
    min-block-size: var(--ke-control-h);
    padding-inline: 1rem;
}

.ke-account-drawer__who {
    padding-inline: 0;
}

.ke-account-drawer__name {
    font-size: 1rem;
}

.ke-account-drawer__list {
    padding: 0;
}

.ke-account-drawer__link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    inline-size: 100%;
    min-block-size: 3rem;
    padding: 0;
    border: 0;
    border-block-end: 1px solid var(--ke-hairline);
    background-color: transparent;
    color: var(--ke-ink);
    font-family: var(--ke-sans);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.ke-account-drawer .ke-account-drawer__link:hover {
    color: var(--ke-ink);
    text-decoration-line: underline;
}

.ke-account-drawer__logout {
    margin: 0;
}

.ke-account-drawer__signout {
    border-block-end: 0;
}

/* The scheme switch, when an owner publishes the tools block in the drawer (PAGES.md 2.2 row 4). */
.ts-tools__scheme {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ts-tools .ts-tools__scheme-button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-block-size: 2.75rem;
    padding: 0 1rem;
    border: 1px solid var(--ke-ink);
    border-radius: var(--ke-pill);
    background-color: var(--ke-page);
    color: var(--ke-ink);
    font-family: var(--ke-sans);
    font-size: var(--ke-t-ui);
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}

.ts-tools .ts-tools__scheme-button[aria-pressed="true"] {
    border-color: var(--ke-accent-line);
    background-color: var(--ke-accent-soft);
    color: var(--ts-on-tint);
}

@media (prefers-reduced-motion: reduce) {
    .ke-account__chevron {
        transition: none;
    }
}

/* 2. Sociable module layouts (PAGES.md 5, INTEGRATIONS.md 4.3, Community board): people and group
   rows on hairlines in a side module; the feed post itself is components.css section 19. The
   verified mark follows a name; a feed without avatars drops the avatar column. */

.ke-verified {
    display: inline-flex;
    flex: none;
    align-self: center;
    color: var(--ke-accent);
}

.ke-verified > svg {
    inline-size: 1rem;
    block-size: 1rem;
}

.ke-post.ke-post--plain {
    grid-template-columns: minmax(0, 1fr);
}

.ke-post__stats a {
    color: var(--ke-ink-2);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

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

:is(.ke-people, .ke-groups) {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

:is(.ke-person, .ke-group) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    padding: 0.75rem 0;
    border-block-end: 1px solid var(--ke-hairline);
}

:is(.ke-person__body, .ke-group__body) {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.125rem;
    min-inline-size: 0;
}

.ke-person__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
    margin: 0;
    line-height: 1.3;
}

:is(.ke-person__name, .ke-group__name) {
    color: var(--ke-ink);
    font-size: var(--ke-t-ui);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a:is(.ke-person__name, .ke-group__name):hover {
    color: var(--ke-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ke-group__name {
    align-self: flex-start;
}

.ke-person__note {
    margin: 0;
    color: var(--ke-ink-3);
    font-size: var(--ke-t-help);
    line-height: 1.45;
}

:is(.ke-group__meta, .ke-person__count) {
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.4;
    letter-spacing: 0.02em;
    font-variant-numeric: tabular-nums;
}

:is(.ke-person__count, .ke-group__badge) {
    flex: none;
}

.ts-avatar.ke-group__tile {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--ke-r-control);
    font-size: 0.75rem;
}

.ke-group__tile > .ke-group__img {
    inline-size: 100%;
    block-size: 100%;
    border-radius: inherit;
    object-fit: cover;
}

/* 3. Community blocks, Rewardify and Community Surveys modules (M4b; PAGES.md 3.1, 3.6, 5;
   DESIGN_SPEC 7.10, 7.15, 7.18, 7.21; MemberHome board). Coming up: title, the RSVP badge and one
   meta line each for the time and the place. Top readers and the leaderboard module: ranked rows,
   the viewer's row tinted. The first badge card. Have your say rows and What you told us bars. */

.ke-event__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-inline-size: 0;
}

.ke-events .ke-event__meta {
    flex-direction: column;
    align-items: flex-start;
}

:is(.ke-event__when, .ke-event__where) {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.ke-event__icon {
    flex: none;
}

.ke-leaders__head {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0 0;
    padding: 0 0.75rem 0.625rem;
    border-block-end: 1px solid var(--ke-hairline);
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-micro);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ke-leaders__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ke-leaders__row {
    display: grid;
    grid-template-columns: 1.75rem 2.25rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.875rem;
    margin: 0;
    padding: 0.875rem 0.75rem;
    border-block-end: 1px solid var(--ke-hairline);
}

.ke-leaders__row:is(.ke-leaders__row--me, .ke-leaders__row--you) {
    border: 1px solid var(--ke-accent-line);
    border-radius: var(--ke-r);
    background-color: var(--ke-accent-soft);
}

.ke-leaders__row--you {
    margin-block-start: 1rem;
}

.ke-leaders__rank {
    color: var(--ts-link);
    font-family: var(--ke-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ke-leaders__who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.125rem 0.5rem;
    min-inline-size: 0;
}

.ke-leaders__name {
    color: var(--ke-ink);
    font-size: var(--ke-t-ui);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    overflow-wrap: anywhere;
}

a.ke-leaders__name:hover {
    color: var(--ke-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:is(.ke-leaders__level, .ke-badges__tier) {
    flex-basis: 100%;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    line-height: 1.4;
}

.ke-leaders__value {
    color: var(--ke-ink);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-ui);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ke-badgefirst {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.ke-badgefirst__card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.5rem;
    border: 1px solid var(--ke-hairline);
    border-radius: var(--ke-r);
}

:is(.ke-badgefirst__name, .ke-results__title, .ke-question__title) {
    margin: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-h3);
    font-weight: var(--ke-w-h2);
    line-height: 1.2;
    letter-spacing: var(--ke-track-h2);
}

.ke-badgefirst__label {
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

.ke-badges__item {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.375rem;
    inline-size: 7.5rem;
    text-align: center;
}

.ke-badges__name {
    font-size: var(--ke-t-label);
    font-weight: 600;
    line-height: 1.3;
}

/* Rewardify's own tiers take the rings of the boards' rarities (K66). */
.ke-medal.ke-medal--silver {
    border: 2px solid var(--ke-accent);
}

.ke-medal:is(.ke-medal--gold, .ke-medal--platinum, .ke-medal--diamond, .ke-medal--epic, .ke-medal--legendary) {
    margin: 0.3125rem;
    border: 2px solid var(--ke-accent);
    box-shadow: 0 0 0 3px var(--ke-page), 0 0 0 5px var(--ke-accent);
}

.ke-surveys {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ke-survey {
    display: flex;
    align-items: center;
    gap: 1rem 2rem;
    margin: 0;
    padding: 1.375rem 0;
    border-block-end: 1px solid var(--ke-hairline);
}

.ke-survey__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 0.375rem;
    min-inline-size: 0;
}

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

.ke-survey__title {
    margin: 0;
    font-family: var(--ke-display);
    font-size: var(--ke-t-list);
    font-weight: var(--ke-w-h3);
    line-height: 1.25;
    letter-spacing: var(--ke-track-list);
}

.ke-survey__title > a {
    color: var(--ke-ink);
    text-decoration: none;
}

.ke-survey__title > a:hover {
    color: var(--ke-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}

:is(.ke-survey__meta, .ke-results__total) {
    margin: 0;
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-meta);
    letter-spacing: var(--ke-track-meta);
}

.ke-survey__start {
    flex: none;
}

.ke-results {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

:is(.ke-results__question, .ke-question__locked) {
    margin: 0;
    color: var(--ke-ink-2);
    font-size: var(--ke-t-ui);
    line-height: 1.5;
}

.ke-results__bars {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0;
    list-style: none;
}

.ke-results__bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.375rem 1rem;
    font-size: var(--ke-t-ui);
    line-height: 1.35;
}

.ke-results__pct {
    font-family: var(--ke-mono);
    font-size: var(--ke-t-help);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.ke-progress.ke-results__meter {
    grid-column: 1 / -1;
    block-size: 0.625rem;
}

.ke-question__note {
    margin: 0.875rem 0 0;
    color: var(--ke-ink-3);
    font-size: var(--ke-t-help);
    line-height: 1.45;
}

/* This week's question in a side module: the survey app's page drawn as the compact question card
   of the board (K67). The hero (with the survey's h1), the questions index, the trust line and the
   jump link stand down; the question, its choices and the send button stay. */
.ts-card__body > .ke-question .cs-site.cs-site :is(.cs-shell-hero, .cs-toc, .cs-trust, .cs-shell-submit .cs-btn-ghost, .cs-question-num) {
    display: none;
}

.ts-card__body > .ke-question .cs-site.cs-site .cs-shell-grid {
    display: block;
}

.ts-card__body > .ke-question .cs-site.cs-site :is(.cs-survey, .cs-question) {
    min-block-size: 0;
    padding: 0;
    border: 0;
}

.ts-card__body > .ke-question .cs-site.cs-site .cs-shell-submit {
    margin-block-start: 1rem;
    padding: 0;
    border: 0;
}

.ts-card__body > .ke-question .cs-site.cs-site .cs-question-title {
    font-size: var(--ke-t-h3);
    line-height: 1.2;
}

.ts-card__body > .ke-question .cs-site.cs-site .cs-shell-submit .cs-btn-primary {
    inline-size: 100%;
}