.kitel-site .kitel-container {
    width: min(var(--kitel-content-width), calc(100% - 48px));
    margin-inline: auto;
}
.kitel-site .kitel-button {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    border: 1px solid var(--kitel-primary);
    border-radius: var(--kitel-radius-pill);
    background: var(--kitel-primary);
    color: #fff;
    font: 500 var(--kitel-text-md)/1 var(--kitel-font);
    text-decoration: none;
    cursor: pointer;
}
.kitel-site .kitel-button:hover { background: #111155; }
.kitel-site .kitel-write-action { display: inline-flex; min-height: 32px; align-items: center; justify-content: center; gap: 4px; padding: 0 14px; border: 0; border-radius: 20px; background: var(--kitel-primary); color: #fff; font: 600 var(--kitel-text-sm)/1 var(--kitel-font); text-decoration: none; white-space: nowrap; cursor: pointer; }
.kitel-site .kitel-write-action::before { display: block; width: 16px; height: 16px; background: url('../img/write.svg') center / contain no-repeat; content: ''; }
.kitel-site .kitel-write-action:hover { background: #111155; color: #fff; }
.kitel-site .kitel-write-action:focus-visible { outline: 2px solid var(--kitel-primary); outline-offset: 3px; }
/* Component-owned resets outrank the legacy admin .x input/select defaults. */
.kitel-site .kitel-filter-search { display: flex; align-items: center; box-sizing: border-box; width: 220px; max-width: 100%; height: var(--kitel-space-4, 32px); padding: 0 10px; border: 1px solid var(--kb-muted, #a9aeb3); border-radius: 16px; background: #fff; box-shadow: none; }
.kitel-site form.kitel-filter-search :is(input:not([type="hidden"]), select, button) { box-sizing: border-box; align-self: center; min-height: 0; height: 24px; margin: 0; padding-block: 0; border: 0; outline: 0; background-color: transparent; box-shadow: none; line-height: 24px; vertical-align: middle; }
.kitel-site form.kitel-filter-search input:not([type="hidden"]) { width: 0; min-width: 0; flex: 1 1 0%; padding-inline: 0; background: transparent; font-family: inherit; font-size: var(--kitel-text-sm, 16px); appearance: none; }
.kitel-site form.kitel-filter-search select { flex: 0 1 auto; width: auto; max-width: 80px; padding-inline: 2px; color: var(--kb-muted, #a9aeb3); font-family: inherit; font-size: 14px; }
.kitel-site form.kitel-filter-search button { flex: none; width: 20px; padding: 0; background: transparent url('../img/search.svg') center / 18px 18px no-repeat; cursor: pointer; }
.kitel-site form.kitel-filter-search:focus-within { border-color: var(--kitel-text-secondary, #626262); outline: 0; box-shadow: none; }
.kitel-site form.kitel-filter-search :is(input:not([type="hidden"]), select, button):focus { border: 0; outline: 0; box-shadow: none; }
.kitel-site form.kitel-filter-search :is(select, button):focus-visible { outline: 1px solid #7a838f; outline-offset: 0; border-radius: 3px; box-shadow: none; }
/* The header/mobile search keeps its own geometry, with the same restrained focus treatment. */
.kitel-site form.kitel-search:focus-within { outline: 1px solid #7a838f; outline-offset: 0; box-shadow: none; }
.kitel-site form.kitel-search :is(input, button):focus { outline: 0; box-shadow: none; }
.kitel-site form.kitel-search button:focus-visible { outline: 1px solid #7a838f; outline-offset: 0; box-shadow: none; }
.kitel-site form:is(.kitel-filter-search, .kitel-search) input:focus-visible { border: 0; outline: 0; box-shadow: none; }
/* Shared KITEL pagination alignment; .x nav would otherwise override display:flex. */
.kitel-site :is(.kitel-homework__pagination, .kitel-hw-admin__pagination, .kitel-board__pagination, .kitel-gallery__pagination),
.kitel-site :is(.kitel-member, .kitel-board, .kitel-gallery) .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-self: stretch; box-sizing: border-box; width: 100%; min-width: 0; margin-inline: 0; float: none; text-align: center; }
.kitel-site :is(.kitel-member, .kitel-board, .kitel-gallery) .pagination > ul { margin-inline: 0; float: none; }
.kitel-filter-search__label { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.kitel-site .kitel-button:focus-visible,
.kitel-site .kitel-input:focus-visible,
:where(.kitel-chrome a, .kitel-chrome button, .kitel-chrome input, .kitel-chrome summary, a.kitel-chrome):focus-visible {
    outline: 2px solid var(--kitel-primary);
    outline-offset: 3px;
}
.kitel-site .kitel-input {
    width: 100%;
    min-height: 50px;
    padding: 10px 16px;
    border: 1px solid var(--kitel-border);
    border-radius: var(--kitel-radius-sm);
    background: var(--kitel-surface-subtle);
    color: var(--kitel-text);
    font: inherit;
}
.kitel-site .kitel-page-heading {
    margin: 0 0 40px;
    color: var(--kitel-text);
    font-size: var(--kitel-text-page);
    font-weight: 500;
    letter-spacing: var(--kitel-heading-tracking);
}
.kitel-site .kitel-page-heading__description {
    display: block;
    margin-top: 12px;
    color: var(--kitel-text-muted);
    font-size: var(--kitel-text-lg);
    font-weight: 300;
    letter-spacing: 0;
}
.kitel-site .kitel-media-slot {
    overflow: hidden;
    border-radius: var(--kitel-radius-card);
    background: #d9d9d9;
}
.kitel-site .kitel-media-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
