/**
 * Kinfolk's presentation of the shared Studio Community module layouts.
 * Data, permissions and destinations remain the responsibility of each provider.
 * Keep these rules under the template so extension-owned screens are unaffected.
 */

.kf-template .ts-sr-only {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}
.kf-template :is(.ts-pulse, .ts-threads, .ts-events, .ts-leaders, .ts-badges) {
    min-inline-size: 0;
    font-family: var(--font-body);
    color: var(--color-ink);
}
.kf-template :is(.ts-pulse__list, .ts-threads__list, .ts-events__list, .ts-week, .ts-leaders__list, .ts-badges__list) {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kf-template :is(.ts-pulse__item, .ts-thread, .ts-event, .ts-week__day, .ts-leader, .ts-badges__item) {
    max-inline-size: none;
    margin: 0;
}
.kf-template .ts-icon { display: inline-block; flex: 0 0 auto; vertical-align: middle; }
.kf-template .ts-sec__meta {
    margin: 0 0 18px;
    color: var(--color-muted);
    font-size: .8125rem;
    line-height: 1.5;
}
.kf-template .ts-sec__more { margin: 18px 0 0; }
.kf-template .ts-more {
    display: inline-flex;
    min-block-size: 44px;
    align-items: center;
    gap: 10px;
    color: var(--color-accent);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
}
.kf-template .ts-more__label { text-decoration: underline; text-underline-offset: 5px; }
.kf-template .ts-more__icon { inline-size: 16px; block-size: 16px; }
.kf-template .ts-button {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    min-block-size: 44px;
    padding: 10px 18px;
    border: 1px solid var(--color-accent);
    border-radius: var(--ec-btn-radius);
    background: var(--color-accent);
    color: var(--color-accent-ink);
    font: 600 .875rem/1.4 var(--font-body);
    text-decoration: none;
}
.kf-template .ts-button--secondary { background: transparent; color: var(--color-accent); }
.kf-template .ts-avatar {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    inline-size: 40px;
    block-size: 40px;
    border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font: 600 .8125rem/1 var(--font-body);
    text-transform: uppercase;
}
.kf-template .ts-avatar--tone-1 { background: #f8dacb; color: #7c3e2c; }
.kf-template .ts-avatar--tone-2 { background: #e0e8bb; color: #465427; }
.kf-template .ts-avatar--tone-3 { background: #e5d6ee; color: #653975; }
.kf-template .ts-avatar--tone-4 { background: #cce5df; color: #265d53; }
.kf-template .ts-avatar--tone-5 { background: #f3e3b5; color: #72551f; }
.kf-template .ts-avatar__img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 50%; }
.kf-template .ts-avatar--online::after {
    content: "";
    position: absolute;
    inset-inline-end: -1px;
    inset-block-end: -1px;
    inline-size: 10px;
    block-size: 10px;
    border: 2px solid var(--color-paper);
    border-radius: 50%;
    background: var(--color-success);
}
.kf-template .ts-facepile { display: inline-flex; align-items: center; padding-inline-start: 6px; flex: 0 0 auto; }
.kf-template .ts-facepile__item { inline-size: 30px; block-size: 30px; margin-inline-start: -6px; border: 2px solid var(--color-paper); font-size: .625rem; }
.kf-template .ts-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-inline-size: 100%;
    padding: 3px 7px;
    border-radius: 4px;
    background: var(--color-paper-3);
    color: var(--color-neutral);
    font-size: .6875rem;
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
}
.kf-template .ts-tag--category { background: var(--color-accent-soft); color: var(--color-accent); }
.kf-template :is(.ts-tag--solved, .ts-tag--rsvp) { background: var(--color-success-soft); color: var(--color-success); }
.kf-template :is(.ts-tag--pinned, .ts-tag--hot) { background: var(--color-warning-soft); color: var(--color-warning); }
.kf-template :is(.ts-tag--unread, .ts-tag--you) { background: var(--color-accent); color: var(--color-accent-ink); }
.kf-template .ts-tag > svg { inline-size: 12px; block-size: 12px; }

/* A quiet strip of actual community figures. */
.kf-template .ts-pulse { display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px; }
.kf-template .ts-pulse__presence { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: .875rem; }
.kf-template .ts-pulse__presence-names { color: var(--color-muted); font-size: .8125rem; }
.kf-template .ts-pulse__list { display: flex; flex: 1 1 480px; justify-content: space-between; gap: 24px; }
.kf-template .ts-pulse__item { display: flex; flex-direction: column; gap: 4px; }
.kf-template .ts-pulse__link { display: flex; flex-direction: column; gap: 4px; color: inherit; text-decoration: none; }
.kf-template .ts-pulse__value { font: 700 2.2rem/1 var(--font-display); letter-spacing: -.05em; }
.kf-template .ts-pulse__label { color: var(--color-muted); font-size: .8125rem; line-height: 1.4; }

/* Discussions and questions use the same accessible data shape. */
.kf-template .ts-thread { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 15px; padding-block: 21px; border-block-end: 1px solid var(--color-rule); }
.kf-template .ts-thread:first-child { border-block-start: 1px solid var(--color-rule); }
.kf-template .ts-thread__body { min-inline-size: 0; }
.kf-template .ts-thread__title { display: inline-block; color: var(--color-ink); font: 600 1.1875rem/1.35 var(--font-display); letter-spacing: -.02em; text-decoration: none; }
.kf-template .ts-thread__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 9px; margin: 10px 0 0; font-size: .75rem; line-height: 1.5; color: var(--color-muted); }
.kf-template .ts-thread__author { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kf-template .ts-person__name { color: inherit; text-decoration: none; }
.kf-template .ts-thread__count { display: flex; flex-direction: column; min-inline-size: 34px; align-items: center; margin: 2px 0 0; }
.kf-template .ts-thread__count-value { color: var(--color-ink); font: 600 1.125rem/1.2 var(--font-display); }
.kf-template .ts-thread__count-label { margin-block-start: 3px; color: var(--color-muted); font-size: .6875rem; }
.kf-template .ts-threads__start { margin: 20px 0 0; }
.kf-template .ts-tabs__list { display: flex; flex-wrap: wrap; gap: 6px; margin-block-end: 18px; }
.kf-template .ts-tabs__tab { min-block-size: 42px; padding: 9px 14px; border: 1px solid var(--color-rule); border-radius: var(--ec-btn-radius); background: transparent; color: var(--color-neutral); font: 600 .8125rem/1.3 var(--font-body); cursor: pointer; }
.kf-template .ts-tabs__tab[aria-selected="true"] { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.kf-template .ts-tabs__panel[hidden] { display: none; }

/* The noticeboard pairs a compact week with generous event rows. */
.kf-template .ts-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-block-end: 24px; }
.kf-template .ts-week__day { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; min-block-size: 68px; padding: 10px 3px; border: 1px solid var(--color-rule); border-radius: 6px; }
.kf-template .ts-week__weekday { color: var(--color-muted); font-size: .6875rem; }
.kf-template .ts-week__date { font: 600 1.15rem/1.2 var(--font-display); }
.kf-template .ts-week__day--today { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.kf-template .ts-week__day--today .ts-week__weekday { color: inherit; }
.kf-template .ts-week__today { font-size: .5625rem; line-height: 1; }
.kf-template .ts-week__day--events:not(.ts-week__day--today)::after { content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--color-accent); }
.kf-template .ts-event { display: grid; grid-template-columns: 68px minmax(0, 1fr); align-items: start; gap: 19px; padding-block: 22px; border-block-end: 1px solid var(--color-rule); }
.kf-template .ts-event:first-child { border-block-start: 1px solid var(--color-rule); }
.kf-template .ts-event__date { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 11px 8px; border-radius: 6px; background: var(--color-accent-soft); color: var(--color-accent); }
.kf-template :is(.ts-event__weekday, .ts-event__month) { font-size: .625rem; font-weight: 600; line-height: 1.2; text-transform: uppercase; }
.kf-template .ts-event__day { font: 700 1.7rem/1 var(--font-display); letter-spacing: -.04em; }
.kf-template .ts-event__body { min-inline-size: 0; }
.kf-template .ts-event__title { display: inline-block; color: var(--color-ink); font: 600 1.25rem/1.25 var(--font-display); letter-spacing: -.025em; text-decoration: none; }
.kf-template .ts-event__meta { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 9px 0 0; color: var(--color-muted); font-size: .75rem; line-height: 1.5; }
.kf-template :is(.ts-event__place, .ts-event__online) { display: inline-flex; align-items: center; gap: 4px; }
.kf-template .ts-event__going { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 0; font-size: .6875rem; color: var(--color-muted); }
.kf-template .ts-event__going .ts-facepile__item { inline-size: 26px; block-size: 26px; }

/* Recognition stays human: a face, a name and the contribution count. */
.kf-template .ts-leader { display: grid; grid-template-columns: 18px 36px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding-block: 16px; border-block-end: 1px solid var(--color-rule); }
.kf-template .ts-leader:first-child { border-block-start: 1px solid var(--color-rule); }
.kf-template .ts-leader__rank { font: 600 .8125rem/1 var(--font-display); color: var(--color-muted); }
.kf-template .ts-leader__avatar { inline-size: 36px; block-size: 36px; }
.kf-template .ts-leader__who { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; min-inline-size: 0; }
.kf-template .ts-leader__name { color: var(--color-ink); font: 600 .9375rem/1.3 var(--font-body); text-decoration: none; overflow-wrap: anywhere; }
.kf-template .ts-leader__value { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.kf-template .ts-leader__value-number { font: 600 1.0625rem/1.1 var(--font-display); }
.kf-template .ts-leader__value-unit { font-size: .625rem; line-height: 1.2; color: var(--color-muted); }
.kf-template .ts-leaders__gap { margin: 5px 0; text-align: center; letter-spacing: .2em; color: var(--color-muted); }
.kf-template .ts-leader--you { background: var(--color-accent-soft); }
.kf-template .ts-badges__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: 12px; }
.kf-template .ts-badges__item { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 20px 12px; border-radius: var(--ec-radius); background: var(--color-paper-3); }
.kf-template .ts-badges__glyph { display: grid; place-items: center; inline-size: 42px; block-size: 42px; background: var(--kf-citrus); color: var(--kf-citrus-ink); border-radius: 50%; }
.kf-template .ts-badges__name { font-size: .75rem; font-weight: 600; }
.kf-template .ts-badges__item--locked .ts-badges__glyph { background: var(--color-rule); color: var(--color-muted); }

@media (hover: hover) {
    .kf-template :is(.ts-thread__title, .ts-event__title, .ts-leader__name, .ts-person__name):hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
    .kf-template .ts-button:hover { background: var(--color-accent-soft); color: var(--color-accent); }
    .kf-template .ts-pulse__link:hover .ts-pulse__label { color: var(--color-accent); }
}
@media (max-width: 40rem) {
    .kf-template .ts-pulse { gap: 22px; }
    .kf-template .ts-pulse__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
    .kf-template .ts-pulse__value { font-size: 1.8rem; }
    .kf-template .ts-thread { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; }
    .kf-template .ts-thread__avatar { inline-size: 34px; block-size: 34px; }
    .kf-template .ts-thread__count { grid-column: 2; flex-direction: row; gap: 5px; justify-content: flex-start; margin-block-start: -4px; }
    .kf-template .ts-thread__count-value { font-size: .8125rem; }
    .kf-template .ts-thread__count-label { margin: 0; }
    .kf-template .ts-thread__title { font-size: 1.0625rem; }
    .kf-template .ts-event { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; }
    .kf-template .ts-week { gap: 4px; }
    .kf-template .ts-week__day { min-block-size: 65px; }
    .kf-template .ts-leader { grid-template-columns: 16px 32px minmax(0, 1fr) auto; gap: 8px; }
    .kf-template .ts-leader__avatar { inline-size: 32px; block-size: 32px; }
}