/*
 * Общий интерфейс Nex1on для главной страницы и публичных модулей.
 *
 * Темы задают характер — цвета, шрифт, радиус и базовые компоненты. Этот
 * слой отвечает за одинаково хорошую композицию магазина, форума, новостей,
 * комментариев и будущих модулей. Тема может заменить файл целиком, положив
 * assets/css/nex1on-ui.css у себя.
 */

:root {
    /*
     * Линия и сильная линия.
     *
     * Темы зовут её по-разному: три из четырёх — «--color-line», а
     * «default» — «--color-border». Раньше здесь стояла подмена самой
     * себя («--color-line, var(--nx-line)»), и на «default» переменная
     * не получала значения вовсе: сорок с лишним рамок в общем слое
     * рисовались никаким цветом, то есть не рисовались.
     *
     * Поймано проверкой «переменная ниоткуда» на новой странице модулей —
     * но болело это везде, просто никто не видел того, чего нет.
     *
     * Последним стоит цвет, посчитанный из текста: тема может не знать ни
     * одного из этих имён, а рамка нужна всё равно.
     */
    --nx-line: var(--color-line, var(--color-border, color-mix(in srgb, var(--color-text) 16%, transparent)));
    --nx-line-strong: var(--color-line-strong, var(--color-border-strong, color-mix(in srgb, var(--color-text) 34%, transparent)));
    --nx-panel: var(--color-panel, var(--color-surface));
    --nx-muted: var(--color-muted, color-mix(in srgb, var(--color-text) 62%, transparent));
    --nx-faint: var(--color-faint, color-mix(in srgb, var(--color-text) 42%, transparent));
    --nx-shadow-soft: 0 16px 46px color-mix(in srgb, var(--color-text) 9%, transparent);
    --nx-ease: 180ms ease;
}

/* ---------------------------------------------------------------- главная */

.home-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(15rem, 0.65fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 4rem);
    overflow: hidden;
    min-height: clamp(24rem, 58vh, 38rem);
    margin-block: clamp(1rem, 3vw, 2.5rem) clamp(2rem, 5vw, 4rem);
    padding: clamp(1.4rem, 5vw, 4.5rem);
    border: 1px solid var(--nx-line);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 85% 18%, color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 24rem),
        linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 5%, var(--nx-panel)), var(--nx-panel) 52%, color-mix(in srgb, var(--color-accent-soft) 5%, var(--nx-panel)));
    box-shadow: var(--shadow-panel, var(--nx-shadow-soft));
}

.home-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
    background-image:
        linear-gradient(color-mix(in srgb, var(--color-text) 3%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--color-text) 3%, transparent) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, transparent, black 65%);
}

.home-hero__copy { position: relative; z-index: 1; max-width: 48rem; }

.home-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin: 0 0 1rem;
    color: var(--color-accent);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.home-hero__eyebrow::before {
    content: "";
    width: 1.8rem;
    height: 1px;
    background: currentColor;
}

.home-hero h1 {
    max-width: 13ch;
    margin: 0;
    font-size: clamp(2.4rem, 7vw, 5.4rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-wrap: balance;
}

.home-hero .lead {
    max-width: 44rem;
    margin: 1.25rem 0 0;
    color: var(--nx-muted);
    font-size: clamp(1rem, 1.5vw, 1.18rem);
    line-height: 1.65;
}

.home-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    margin-top: 1.65rem;
}

.home-hero__visual {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    width: min(100%, 22rem);
    margin-inline: auto;
}

.home-hero__orbit,
.home-hero__orbit::before,
.home-hero__orbit::after {
    position: absolute;
    border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
    border-radius: 50%;
}

.home-hero__orbit {
    inset: 7%;
    box-shadow: 0 0 55px color-mix(in srgb, var(--color-accent) 9%, transparent);
}

.home-hero__orbit::before,
.home-hero__orbit::after { content: ""; }
.home-hero__orbit::before { inset: 14%; border-color: color-mix(in srgb, var(--color-accent-soft) 30%, transparent); }
.home-hero__orbit::after { inset: 31%; border-style: dashed; }

.home-hero__mark {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 36%;
    aspect-ratio: 1;
    border: 1px solid var(--nx-line-strong);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-accent) 11%, var(--nx-panel));
    color: var(--color-accent);
    box-shadow: 0 0 40px color-mix(in srgb, var(--color-accent) 16%, transparent);
    font-family: var(--font-mono);
    font-size: clamp(1.2rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: 0.06em;
}

.home-hero__dot {
    position: absolute;
    z-index: 3;
    width: 0.65rem;
    height: 0.65rem;
    inset: 12% 18% auto auto;
    border-radius: 50%;
    background: var(--color-accent-soft);
    box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--color-accent-soft) 12%, transparent), 0 0 18px var(--color-accent-soft);
}

/* ------------------------------------------------------- общий ритм модулей */

.main-col > .hero:not(.home-hero) {
    margin-bottom: clamp(1.25rem, 3vw, 2rem);
    padding-bottom: clamp(1rem, 2vw, 1.5rem);
    border-bottom: 1px solid var(--nx-line);
}

.main-col > .hero:not(.home-hero) .lead { max-width: 52rem; }

.panel,
.feed-item,
.good,
.forum-category,
.forum-section,
.forum-topic,
.comment,
.order-card,
.checkout__summary {
    transition: border-color var(--nx-ease), box-shadow var(--nx-ease), transform var(--nx-ease), background var(--nx-ease);
}

.panel {
    overflow: clip;
}

.panel--tight {
    width: min(100%, 48rem);
}

.field + .field { margin-top: 0.2rem; }

.button {
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
}

.button--small { min-height: 2.15rem; }

.tag,
.chip {
    line-height: 1.2;
}

/* ------------------------------------------------------ новости и разделы */

.feed { gap: clamp(0.75rem, 2vw, 1.15rem); }

.feed-item {
    position: relative;
    overflow: hidden;
}

.feed-item::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 2px;
    background: linear-gradient(var(--color-accent), transparent 72%);
    opacity: 0;
    transition: opacity var(--nx-ease);
}

.feed-item__title { text-wrap: balance; }
.feed-item__lead { max-width: 68ch; }

.feed-item__cover img {
    transition: transform 320ms ease, filter 320ms ease;
}

/* --------------------------------------------------------------- магазин */

.goods { align-items: stretch; }

.good {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}

.good__cover { overflow: hidden; }

.good__cover img {
    transition: transform 320ms ease, filter 320ms ease;
}

.good__body {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.good__title { text-wrap: balance; }
.good__lead { color: var(--nx-muted); }
.good__body .price { margin-top: auto; }

.good-page {
    gap: clamp(1.1rem, 3vw, 2rem);
}

.good-page__cover,
.good-page__buy,
.gallery__big {
    overflow: hidden;
    border-radius: var(--radius);
}

.good-page__buy {
    position: sticky;
    top: calc(var(--logo-height) + 2.5rem);
}

.gallery__thumb {
    transition: border-color var(--nx-ease), transform var(--nx-ease), opacity var(--nx-ease);
}

.gallery__thumb:not(.is-current) { opacity: 0.72; }

.checkout__summary,
.checkout__delivery,
.checkout__issues {
    border-color: var(--nx-line);
}

.checkout__way {
    transition: border-color var(--nx-ease), background var(--nx-ease), transform var(--nx-ease);
}

.order-card {
    position: relative;
    overflow: hidden;
}

/* ----------------------------------------------------------------- форум */

.forum-bar {
    gap: 0.7rem;
    padding: 0.7rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-accent) 3%, var(--nx-panel));
}

.forum-category {
    overflow: hidden;
    border-radius: var(--radius);
}

.forum-section,
.forum-topic {
    position: relative;
}

.forum-section::before,
.forum-topic::before {
    content: "";
    position: absolute;
    inset-block: 20% 20%;
    inset-inline-start: 0;
    width: 2px;
    background: var(--color-accent);
    opacity: 0;
    transition: opacity var(--nx-ease);
}

.forum-topic--pinned::before { opacity: 0.75; }

.forum-post {
    overflow: hidden;
    border-radius: var(--radius);
}

.forum-post__head {
    background: color-mix(in srgb, var(--color-accent) 4%, transparent);
}

/* ----------------------------------------------------------- комментарии */

.comments {
    padding-top: clamp(1.2rem, 3vw, 2rem);
    border-top: 1px solid var(--nx-line);
}

.comments__list {
    display: grid;
    gap: 0.7rem;
}

.comment {
    position: relative;
    overflow: hidden;
}

.comment--reply::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 2px;
    background: var(--color-accent);
}

.comments__form {
    max-width: 52rem;
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--nx-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-accent) 3%, var(--nx-panel));
}

/* ---------------------------------------------------------- блоки главной */

.home-block,
.showcase,
.home-feed {
    position: relative;
}

.home-block__head {
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--nx-line);
}

.home-block__title { text-wrap: balance; }

.home-talks__item,
.home-files__item,
.home-feed__item {
    transition: background var(--nx-ease), border-color var(--nx-ease), transform var(--nx-ease);
}

/* ---------------------------------------------------------- служебные элементы */

.nav__form {
    display: inline-flex;
    margin: 0;
}

.module-back {
    margin-top: 1rem;
}

.nx-trap {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------------------------------------------------------- взаимодействие */

@media (hover: hover) {
    .feed-item:hover,
    .good:hover,
    .forum-section:hover,
    .forum-topic:hover,
    .order-card:hover {
        transform: translateY(-2px);
        box-shadow: var(--nx-shadow-soft);
    }

    .feed-item:hover::after,
    .forum-section:hover::before,
    .forum-topic:hover::before { opacity: 1; }

    .feed-item:hover .feed-item__cover img,
    .good:hover .good__cover img { transform: scale(1.025); }

    .gallery__thumb:hover { opacity: 1; transform: translateY(-2px); }
    .checkout__way:hover { transform: translateX(2px); }

    .home-talks__item:hover,
    .home-files__item:hover,
    .home-feed__item:hover {
        background: color-mix(in srgb, var(--color-accent) 4%, transparent);
    }
}

@media (max-width: 48rem) {
    .home-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
        padding: 1.5rem;
    }

    .home-hero h1 { max-width: 16ch; font-size: clamp(2.2rem, 13vw, 4rem); }
    /*
     * Украшение на телефоне прячем.
     *
     * Круг с буквами — украшение, и на широком экране ему есть где
     * стоять, рядом с текстом. На телефоне он становится в столбик
     * под приветствием и съедает треть первого экрана: человек
     * прокручивает картинку, чтобы добраться до разделов.
     */
    .home-hero__visual { display: none; }
    .home-hero__actions .button { flex: 1 1 11rem; }
    .good-page__buy { position: static; }
    .forum-bar { align-items: stretch; }
}

@media (max-width: 30rem) {
    .home-hero { padding: 1.2rem; }
    .home-hero__visual { width: min(68vw, 14rem); }
    .home-hero__actions { flex-direction: column; }
    .home-hero__actions .button { width: 100%; flex-basis: auto; }
    .comments__form { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .feed-item,
    .good,
    .forum-section,
    .forum-topic,
    .order-card,
    .gallery__thumb,
    .checkout__way,
    .feed-item__cover img,
    .good__cover img { transition: none; }
}

/* ======================================================= модульная главная */
.is-home .main-col { min-width: 0; }
.region--home-stream {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(23rem, 100%), 1fr));
    gap: clamp(0.9rem, 2vw, 1.35rem);
    margin-top: clamp(1rem, 2vw, 1.5rem);
}
.region--home-stream > .home-block,
.region--home-stream > .region-item > .home-block {
    min-width: 0;
    margin: 0;
    padding: clamp(1rem, 2.2vw, 1.35rem);
    border: 1px solid var(--nx-line);
    border-radius: var(--radius);
    background:
        linear-gradient(145deg, color-mix(in srgb, var(--color-accent) 3%, transparent), transparent 52%),
        var(--nx-panel);
    box-shadow: var(--shadow-panel, none);
}
.region--home-stream > .showcase,
.region--home-stream > .home-feed,
.region--home-stream > .home-page-feature { grid-column: 1 / -1; }
.region--home-stream .home-block__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}
.region--home-stream .home-block__title { font-size: clamp(1.18rem, 2vw, 1.45rem); }
.region--home-stream .home-block__all { font-size: 0.9rem; }
.region--home-stream .home-talks__items,
.region--home-stream .home-files__items,
.region--home-stream .home-feed__items { margin-bottom: 0; }

.home-page-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    overflow: hidden;
    padding: 0 !important;
}
.home-page-feature.has-cover { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); }
.home-page-feature__body { align-self: center; padding: clamp(1.25rem, 4vw, 2.4rem); }
.home-page-feature__eyebrow,
.page-view__eyebrow {
    margin: 0 0 0.55rem;
    color: var(--color-accent);
    font: 700 0.68rem/1.2 var(--font-mono);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.home-page-feature__title {
    max-width: 20ch;
    margin: 0;
    font-size: clamp(1.65rem, 4vw, 2.75rem);
    line-height: 1.06;
    letter-spacing: -0.035em;
    text-wrap: balance;
}
.home-page-feature__title a { color: inherit; text-decoration: none; }
.home-page-feature__lead { max-width: 62ch; margin: 0.85rem 0 0; color: var(--nx-muted); line-height: 1.7; }
.home-page-feature__more { width: fit-content; margin-top: 1.15rem; }
.home-page-feature__cover { min-height: 16rem; overflow: hidden; background: color-mix(in srgb, var(--color-accent) 5%, var(--nx-panel)); }
.home-page-feature__cover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 380ms ease, filter 380ms ease; }

/* =========================================================== Pages */
.page-view { width: min(100%, 72rem); margin-inline: auto; }
.page-view--wide { width: 100%; }
.page-view--plain { width: min(100%, 64rem); }
.page-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    margin: 0.3rem 0 1rem;
    color: var(--nx-faint);
    font-size: 0.86rem;
}
.page-crumbs a { color: var(--nx-muted); text-decoration: none; }
.page-crumbs span[aria-current="page"] { color: var(--nx-faint); }
.page-view__hero {
    position: relative;
    display: grid;
    gap: clamp(1rem, 3vw, 2rem);
    align-items: stretch;
    overflow: hidden;
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
    padding: clamp(1.25rem, 4vw, 2.4rem);
    border: 1px solid var(--nx-line);
    border-radius: var(--radius);
    background:
        radial-gradient(circle at 92% 10%, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 19rem),
        linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 4%, var(--nx-panel)), var(--nx-panel));
}
.page-view__hero.has-cover { grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr); padding: 0; }
.page-view__hero.has-cover .page-view__intro { align-self: center; padding: clamp(1.25rem, 4vw, 2.4rem); }
.page-view__intro h1 {
    max-width: 18ch;
    margin: 0;
    font-size: clamp(2rem, 6vw, 4.25rem);
    line-height: 1;
    letter-spacing: -0.045em;
    text-wrap: balance;
}
.page-view__intro .lead { max-width: 58ch; margin: 1rem 0 0; color: var(--nx-muted); line-height: 1.65; }
.page-view__cover { min-height: 18rem; margin: 0; overflow: hidden; background: color-mix(in srgb, var(--color-accent) 5%, var(--nx-panel)); }
.page-view__cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.page-view__body { padding: clamp(1.15rem, 3vw, 2rem); }
.page-view--plain .page-view__body { padding-inline: 0; background: transparent; border: 0; box-shadow: none; }
.page-view__prose { max-width: 72ch; margin-inline: auto; font-size: 1.02rem; line-height: 1.78; }
.page-view--wide .page-view__prose { max-width: none; }
.page-view__prose > :first-child { margin-top: 0; }
.page-view__prose > :last-child { margin-bottom: 0; }
.page-view__prose h2,
.page-view__prose h3 { margin-top: 1.55em; text-wrap: balance; }
.page-view__prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.page-view__prose table { width: 100%; border-collapse: collapse; }
.page-view__prose th,
.page-view__prose td { padding: 0.65rem; border: 1px solid var(--nx-line); text-align: start; }
.page-view__prose blockquote { margin-inline: 0; padding-inline-start: 1rem; border-inline-start: 2px solid var(--color-accent); color: var(--nx-muted); }
.page-view__updated { margin: 0.85rem 0 0; color: var(--nx-faint); font-size: 0.82rem; text-align: end; }
.page-children { margin-top: clamp(1.2rem, 3vw, 2rem); }
.page-children__head { margin-bottom: 0.8rem; }
.page-children__head h2 { margin: 0; font-size: clamp(1.25rem, 2.5vw, 1.7rem); }
.page-children__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; }
.page-child {
    position: relative;
    display: grid;
    gap: 0.35rem;
    min-height: 8rem;
    padding: 1rem 3rem 1rem 1rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--radius);
    background: var(--nx-panel);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--nx-ease), transform var(--nx-ease), box-shadow var(--nx-ease);
}
.page-child strong { font-size: 1.05rem; }
.page-child > span:not(.page-child__arrow) { color: var(--nx-muted); font-size: 0.9rem; line-height: 1.55; }
.page-child__arrow { position: absolute; inset-block-start: 0.9rem; inset-inline-end: 0.9rem; color: var(--color-accent); }

@media (hover:hover) {
    .home-page-feature:hover .home-page-feature__cover img { transform: scale(1.025); }
    .page-child:hover { transform: translateY(-2px); border-color: var(--nx-line-strong); box-shadow: var(--nx-shadow-soft); }
}

@media (max-width: 48rem) {
    .region--home-stream { grid-template-columns: 1fr; }
    .region--home-stream > * { grid-column: 1 !important; }
    .home-page-feature.has-cover,
    .page-view__hero.has-cover { grid-template-columns: 1fr; }
    .home-page-feature__cover,
    .page-view__cover { min-height: 13rem; max-height: 22rem; }
    .page-children__grid { grid-template-columns: 1fr; }
    .page-view__updated { text-align: start; }
}

.home-hero__sections {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 1rem;
}
.home-hero__sections a {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 4%, transparent);
    color: var(--nx-muted);
    font-size: 0.82rem;
    text-decoration: none;
    transition: border-color var(--nx-ease), background var(--nx-ease), color var(--nx-ease), transform var(--nx-ease);
}
@media (hover:hover) {
    .home-hero__sections a:hover {
        transform: translateY(-1px);
        border-color: var(--nx-line-strong);
        background: color-mix(in srgb, var(--color-accent) 8%, transparent);
        color: var(--color-text);
    }
}

/* Content module 1.2 */
.content-view{display:grid;gap:1.25rem}.content-view__hero,.content-detail__hero{position:relative;overflow:hidden;padding:clamp(1.1rem,2vw,1.7rem);border:1px solid var(--nx-line);border-radius:var(--radius);background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 10%,var(--nx-panel)),var(--nx-panel) 62%);box-shadow:var(--nx-shadow-soft)}.content-view__hero h1,.content-detail__hero h1{margin:.15rem 0 .35rem;line-height:1.08}.content-view__hero p,.content-detail__lead{max-width:72ch;margin:0;color:var(--color-muted);line-height:1.58}.content-view__eyebrow{color:var(--color-accent);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.content-view__count{display:inline-flex;margin-top:.75rem;padding:.25rem .48rem;border:1px solid var(--nx-line);border-radius:999px;color:var(--color-muted);font-size:.72rem;background:color-mix(in srgb,var(--color-surface) 66%,transparent)}
.content-filters{display:grid;grid-template-columns:minmax(12rem,1.6fr) repeat(3,minmax(9rem,.7fr)) auto;gap:.55rem;align-items:end;padding:.75rem;border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel)}.content-filters label{display:grid;gap:.25rem}.content-filters label>span{color:var(--color-muted);font-size:.7rem;font-weight:700}.content-filters input,.content-filters select{width:100%}.content-filters__actions{display:flex;gap:.4rem;align-items:center}.content-empty{padding:2rem 1rem;border:1px dashed var(--nx-line-strong);border-radius:var(--radius);text-align:center;color:var(--color-muted);background:color-mix(in srgb,var(--nx-panel) 70%,transparent)}
.content-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}.content-card{display:flex;min-width:0;overflow:hidden;border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel);box-shadow:var(--nx-shadow-soft);transition:transform .16s ease,border-color .16s ease}.content-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--color-accent) 34%,var(--nx-line))}.content-card__media{flex:0 0 38%;min-height:9rem;background:color-mix(in srgb,var(--color-accent) 5%,var(--color-surface))}.content-card__media img,.content-home-card__media img{display:block;width:100%;height:100%;object-fit:cover}.content-card__body{display:flex;min-width:0;flex:1;flex-direction:column;padding:.85rem}.content-card__meta{display:flex;gap:.45rem;flex-wrap:wrap;margin-bottom:.35rem;color:var(--color-muted);font-size:.68rem}.content-card h2{margin:0 0 .35rem;font-size:1rem;line-height:1.25}.content-card h2 a{color:var(--color-text);text-decoration:none}.content-card h2 a:hover{color:var(--color-accent)}.content-card__excerpt{display:-webkit-box;overflow:hidden;margin:0;color:var(--color-muted);font-size:.82rem;line-height:1.5;-webkit-line-clamp:3;-webkit-box-orient:vertical}.content-card__props{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.65rem}.content-card__props span,.content-home-card__facts span{padding:.25rem .38rem;border:1px solid var(--nx-line);border-radius:999px;color:var(--color-muted);font-size:.68rem;background:color-mix(in srgb,var(--color-surface) 62%,transparent)}.content-card__more{display:inline-flex;align-items:center;gap:.25rem;margin-top:auto;padding-top:.7rem;color:var(--color-accent);font-size:.75rem;font-weight:800;text-decoration:none}.content-view--cards .content-card{flex-direction:column}.content-view--cards .content-card__media{flex:auto;min-height:12rem;max-height:15rem}.content-view--list .content-cards{grid-template-columns:minmax(0,1fr)}.content-view--list .content-card__media{max-width:18rem}.content-table-wrap{overflow:auto;border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel)}.content-table{width:100%;border-collapse:collapse;min-width:42rem}.content-table th,.content-table td{padding:.72rem .78rem;border-bottom:1px solid var(--nx-line);text-align:left;vertical-align:top}.content-table th{color:var(--color-muted);font-size:.68rem;letter-spacing:.04em;text-transform:uppercase}.content-table tr:last-child td{border-bottom:0}.content-table a{font-weight:800;text-decoration:none}.content-pager{display:flex;align-items:center;justify-content:center;gap:.4rem;flex-wrap:wrap;margin-top:.35rem}.content-pager a,.content-pager span{display:grid;place-items:center;min-width:2.1rem;height:2.1rem;padding:0 .55rem;border:1px solid var(--nx-line);border-radius:6px;text-decoration:none}.content-pager .is-current{border-color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 10%,transparent);color:var(--color-accent)}
.content-crumbs{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-bottom:.7rem;color:var(--color-muted);font-size:.72rem}.content-crumbs a{color:var(--color-muted);text-decoration:none}.content-crumbs a:hover{color:var(--color-accent)}.content-detail{display:grid;gap:1rem}.content-detail__date{display:block;margin-top:.7rem;color:var(--color-muted);font-size:.72rem}.content-detail__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(15rem,21rem);gap:1rem;align-items:start}.content-detail__body{min-width:0;padding:clamp(1rem,2vw,1.5rem);border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel);line-height:1.72;box-shadow:var(--nx-shadow-soft)}.content-detail__body img{max-width:100%;height:auto;border-radius:calc(var(--radius) * .75)}.content-detail__facts{display:grid;gap:.5rem;padding:.8rem;border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel);box-shadow:var(--nx-shadow-soft)}.content-detail__facts>div{padding:.52rem .58rem;border:1px solid var(--nx-line);border-radius:6px;background:color-mix(in srgb,var(--color-surface) 65%,transparent)}.content-detail__facts dt{margin-bottom:.15rem;color:var(--color-muted);font-size:.67rem;font-weight:800}.content-detail__facts dd{margin:0;overflow-wrap:anywhere}.content-detail__back{display:inline-flex;width:max-content;align-items:center;gap:.3rem;color:var(--color-accent);font-weight:800;text-decoration:none}
.content-home-block{display:grid;gap:.75rem}.content-home-block>header{display:flex;align-items:end;justify-content:space-between;gap:1rem}.content-home-block>header h2{margin:0}.content-home-block>header a{flex:0 0 auto;color:var(--color-accent);font-size:.76rem;font-weight:800;text-decoration:none}.content-home-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.content-home-card{display:flex;min-width:0;overflow:hidden;flex-direction:column;border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel);box-shadow:var(--nx-shadow-soft);text-decoration:none;color:var(--color-text);transition:transform .16s ease,border-color .16s ease}.content-home-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--color-accent) 34%,var(--nx-line))}.content-home-card__media{height:9rem;background:color-mix(in srgb,var(--color-accent) 5%,var(--color-surface))}.content-home-card__body{display:flex;flex:1;flex-direction:column;padding:.72rem}.content-home-card__body strong{line-height:1.25}.content-home-card__body p{display:-webkit-box;overflow:hidden;margin:.35rem 0 0;color:var(--color-muted);font-size:.76rem;line-height:1.42;-webkit-line-clamp:2;-webkit-box-orient:vertical}.content-home-card__facts{display:flex;gap:.3rem;flex-wrap:wrap;margin-top:.55rem}.content-home-card__arrow{margin-top:auto;padding-top:.6rem;color:var(--color-accent);font-size:.72rem;font-weight:800}
@media(max-width:70rem){.content-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.content-home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.content-filters__search{grid-column:1/-1}.content-filters__actions{justify-content:flex-end}.content-detail__grid{grid-template-columns:minmax(0,1fr)}.content-detail__facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:44rem){.content-cards,.content-home-grid,.content-filters,.content-detail__facts{grid-template-columns:minmax(0,1fr)}.content-filters__search{grid-column:auto}.content-card{flex-direction:column}.content-view--list .content-card__media{width:100%;max-width:none;min-height:10rem;max-height:13rem}.content-home-block>header{align-items:flex-start;flex-direction:column}.content-detail__hero,.content-view__hero{padding:1rem}.content-table{min-width:36rem}}
.content-value-media{display:block;max-width:100%;height:auto;border-radius:calc(var(--radius) * .7)}

/* Account & public profile */
.profile-shell,.public-profile{display:grid;gap:1rem;max-width:76rem;margin:0 auto}.profile-identity{display:flex;align-items:center;gap:1rem;padding:1rem 1.1rem;border:1px solid var(--nx-line);border-radius:var(--radius);background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 8%,var(--nx-panel)),var(--nx-panel) 68%);box-shadow:var(--nx-shadow-soft)}.profile-avatar{display:grid;place-items:center;overflow:hidden;flex:0 0 auto;border:1px solid var(--nx-line-strong);border-radius:50%;background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface));font-weight:850}.profile-avatar img{width:100%;height:100%;object-fit:cover}.profile-avatar>span{display:grid;place-items:center;width:100%;height:100%;background:hsl(var(--hue,210) 58% 42% / .18);color:var(--color-text)}.profile-avatar--xl{width:5rem;height:5rem;font-size:1.35rem}.profile-avatar--preview{width:7rem;height:7rem;font-size:1.6rem}.profile-avatar--public{width:7.5rem;height:7.5rem;font-size:1.8rem}.profile-identity__body{min-width:0;display:grid;gap:.3rem}.profile-identity__line{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap}.profile-identity__line h1,.public-profile__identity h1{margin:0;line-height:1.06}.profile-identity__handle,.public-profile__identity>p{margin:0;color:var(--color-muted)}.profile-identity__roles{display:flex;gap:.35rem;flex-wrap:wrap}.profile-identity__roles span,.profile-badge{display:inline-flex;align-items:center;min-height:1.7rem;padding:.18rem .48rem;border:1px solid var(--nx-line);border-radius:999px;background:color-mix(in srgb,var(--color-surface) 68%,transparent);color:var(--color-muted);font-size:.72rem;font-weight:750}.profile-badge--ok{border-color:color-mix(in srgb,#2cab69 42%,var(--nx-line));color:color-mix(in srgb,#2cab69 82%,var(--color-text))}.profile-tabs{display:flex;gap:.35rem;overflow-x:auto;padding:.35rem;border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel);scrollbar-width:thin}.profile-tabs a{flex:0 0 auto;padding:.55rem .8rem;border-radius:calc(var(--radius)*.7);color:var(--color-muted);font-size:.82rem;font-weight:750;text-decoration:none}.profile-tabs a.is-active{background:color-mix(in srgb,var(--color-accent) 11%,var(--color-surface));color:var(--color-accent)}.profile-card__kicker{display:block;color:var(--color-accent);font-size:.68rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.profile-dashboard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem}.profile-summary-card{display:grid;gap:.35rem;min-width:0;padding:1rem;border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel);box-shadow:var(--nx-shadow-soft)}.profile-summary-card strong{overflow-wrap:anywhere;font-size:1.05rem}.profile-summary-card p{margin:0;color:var(--color-muted);font-size:.82rem;line-height:1.45}.profile-summary-card a{width:max-content;max-width:100%;margin-top:.25rem;color:var(--color-accent);font-size:.78rem;font-weight:800;text-decoration:none}.profile-section{display:grid;gap:.65rem}.profile-section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem}.profile-section__head h2,.profile-panel header h2{margin:.12rem 0 0}.profile-section__head p,.profile-panel header p{margin:.3rem 0 0;color:var(--color-muted);font-size:.82rem}.profile-section__head>a{color:var(--color-accent);font-size:.78rem;font-weight:800;text-decoration:none}.profile-module-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem}.profile-module-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.85rem;border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel);color:var(--color-text);text-decoration:none;box-shadow:var(--nx-shadow-soft);transition:transform var(--nx-ease),border-color var(--nx-ease)}.profile-module-card:hover{transform:translateY(-2px);border-color:var(--nx-line-strong)}.profile-module-card__icon{display:grid;place-items:center;width:2.35rem;height:2.35rem;border-radius:50%;background:color-mix(in srgb,var(--color-accent) 10%,var(--color-surface));color:var(--color-accent);font-size:1.1rem}.profile-module-card__body{display:grid;min-width:0;gap:.08rem}.profile-module-card__body small,.profile-module-card__body span{color:var(--color-muted);font-size:.72rem}.profile-module-card__body strong{font-size:1.15rem}.profile-count{display:inline-grid;place-items:center;min-width:1.45rem;height:1.45rem;padding:0 .35rem;border-radius:999px;background:var(--color-accent);color:var(--color-accent-contrast,#fff);font-size:.72rem}.profile-notifications{display:grid;overflow:hidden;border:1px solid var(--nx-line);border-radius:var(--radius);background:var(--nx-panel)}.profile-notifications>a{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.65rem;align-items:start;padding:.75rem .85rem;border-bottom:1px solid var(--nx-line);color:inherit;text-decoration:none}.profile-notifications>a:last-child{border-bottom:0}.profile-notifications>a>span{width:.48rem;height:.48rem;margin-top:.38rem;border-radius:50%;background:var(--nx-line-strong)}.profile-notifications>a>span.is-unread{background:var(--color-accent)}.profile-notifications strong{font-size:.83rem}.profile-notifications p{margin:.18rem 0 0;color:var(--color-muted);font-size:.76rem}.profile-notifications time{white-space:nowrap;color:var(--color-muted);font-size:.68rem}.profile-empty{padding:1rem;border:1px dashed var(--nx-line-strong);border-radius:var(--radius);color:var(--color-muted);text-align:center}.profile-edit-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(17rem,23rem);gap:1rem;align-items:start}.profile-panel{padding:1rem}.profile-panel>header{margin-bottom:.9rem}.profile-two-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem}.profile-avatar-editor{display:grid;justify-items:start}.profile-file{display:inline-flex;position:relative;overflow:hidden;cursor:pointer;margin-top:.8rem}.profile-file>span{display:inline-flex;align-items:center;min-height:2.35rem;padding:.45rem .75rem;border:1px solid var(--nx-line-strong);border-radius:calc(var(--radius)*.7);background:var(--color-surface);font-size:.78rem;font-weight:800}.profile-file input{position:absolute;inset:0;opacity:0;cursor:pointer}.profile-switch{display:flex;gap:.65rem;padding:.72rem 0;border-bottom:1px solid var(--nx-line);cursor:pointer}.profile-switch:last-child{border-bottom:0}.profile-switch input{margin-top:.2rem}.profile-switch span{display:grid;gap:.15rem}.profile-switch strong{font-size:.82rem}.profile-switch small{color:var(--color-muted);font-size:.72rem;line-height:1.4}.profile-save-button{width:100%}.profile-security-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:start}.profile-autofill-user{position:absolute!important;inline-size:1px!important;block-size:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important}.profile-2fa-state{display:flex;align-items:center;gap:.7rem;padding:.75rem;border:1px solid var(--nx-line);border-radius:calc(var(--radius)*.75);background:color-mix(in srgb,var(--color-surface) 72%,transparent)}.profile-2fa-state>b{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:color-mix(in srgb,var(--color-accent) 10%,var(--color-surface));color:var(--color-accent)}.profile-2fa-state>div{display:grid;gap:.1rem}.profile-2fa-state span{color:var(--color-muted);font-size:.73rem}.profile-2fa-state.is-on{border-color:color-mix(in srgb,#2cab69 35%,var(--nx-line))}.profile-2fa-setup{display:grid;gap:.8rem}.profile-2fa-setup ol{margin:0;padding-inline-start:1.3rem;color:var(--color-muted);font-size:.8rem;line-height:1.6}.profile-secret{display:grid;gap:.3rem;padding:.7rem;border:1px solid var(--nx-line);border-radius:calc(var(--radius)*.7);background:var(--color-surface)}.profile-secret span{color:var(--color-muted);font-size:.7rem}.profile-secret code{overflow-wrap:anywhere;font-size:.82rem}.profile-backups{margin-bottom:.8rem;padding:.8rem;border:1px solid color-mix(in srgb,#d99b2b 42%,var(--nx-line));border-radius:calc(var(--radius)*.75);background:color-mix(in srgb,#d99b2b 7%,var(--nx-panel))}.profile-backups p{margin:.25rem 0 .65rem;color:var(--color-muted);font-size:.76rem}.profile-backups>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}.profile-backups code{padding:.35rem .45rem;border:1px solid var(--nx-line);border-radius:.35rem;background:var(--color-surface);text-align:center}.profile-danger-details, .profile-2fa details{margin-top:.7rem}.profile-2fa details summary{cursor:pointer;color:var(--color-muted);font-size:.78rem;font-weight:800}.profile-2fa details form{margin-top:.65rem}.profile-session-list{display:grid;gap:.5rem}.profile-session{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.7rem;padding:.75rem;border:1px solid var(--nx-line);border-radius:calc(var(--radius)*.75);background:var(--color-surface)}.profile-session.is-current{border-color:color-mix(in srgb,var(--color-accent) 34%,var(--nx-line))}.profile-session__icon{display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:color-mix(in srgb,var(--color-accent) 9%,var(--nx-panel));color:var(--color-accent)}.profile-session p{margin:.15rem 0 0;color:var(--color-muted);font-size:.72rem}.public-profile__hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:1.15rem;border:1px solid var(--nx-line);border-radius:var(--radius);background:linear-gradient(135deg,color-mix(in srgb,var(--color-accent) 9%,var(--nx-panel)),var(--nx-panel) 70%);box-shadow:var(--nx-shadow-soft)}.public-profile__identity{display:grid;gap:.25rem;min-width:0}.public-profile__about{padding:1rem}.public-profile__about p{margin:.4rem 0 0;max-width:76ch;line-height:1.65}.public-profile__links{display:flex;gap:.45rem;flex-wrap:wrap}.public-profile__links a{padding:.42rem .65rem;border:1px solid var(--nx-line);border-radius:999px;background:var(--nx-panel);color:var(--color-muted);font-size:.76rem;font-weight:750;text-decoration:none}.public-profile__links a:hover{border-color:var(--nx-line-strong);color:var(--color-accent)}.public-profile__lower{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem}.auth-card--2fa{max-width:30rem;margin-inline:auto}.comment-card__avatar img,.who-mark img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit}.comment-author-link,.forum-author-link{color:inherit;text-decoration:none}.comment-author-link:hover,.forum-author-link:hover{color:var(--color-accent)}
@media(max-width:64rem){.profile-dashboard-grid,.profile-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.profile-edit-layout,.profile-security-grid{grid-template-columns:minmax(0,1fr)}.public-profile__lower{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:44rem){.profile-identity{align-items:flex-start}.profile-avatar--xl{width:4rem;height:4rem}.profile-dashboard-grid,.profile-module-grid,.profile-two-fields,.public-profile__lower{grid-template-columns:minmax(0,1fr)}.profile-section__head{align-items:flex-start;flex-direction:column}.profile-notifications>a{grid-template-columns:auto minmax(0,1fr)}.profile-notifications time{grid-column:2}.profile-session{grid-template-columns:auto minmax(0,1fr)}.profile-session>form,.profile-session>.profile-badge{grid-column:2}.public-profile__hero{grid-template-columns:auto minmax(0,1fr)}.public-profile__hero>.button{grid-column:1/-1;width:100%}.profile-avatar--public{width:5.5rem;height:5.5rem}.profile-backups>div{grid-template-columns:minmax(0,1fr)}}
.profile-2fa-qr-wrap{display:grid;place-items:center;padding:.8rem;border:1px solid var(--nx-line);border-radius:calc(var(--radius)*.75);background:#fff}.profile-2fa-qr{display:block;width:min(15rem,100%);height:auto}
.nav__profile{display:inline-flex!important;align-items:center;gap:.42rem}.nav__profile-avatar{display:grid;place-items:center;overflow:hidden;width:1.7rem;height:1.7rem;flex:0 0 1.7rem;border:1px solid var(--nx-line);border-radius:50%;background:hsl(var(--hue,210) 58% 42% / .16);font-size:.58rem;font-weight:850;line-height:1}.nav__profile-avatar img{display:block;width:100%;height:100%;object-fit:cover}
/* ------------------------------------------- страница товара в руке

   Оформление этого слоя пришло от друга целиком, и его правила здесь не
   переписаны ни одно: ниже только добавка для телефона. Убрать её можно
   целиком, и вид вернётся ровно к тому, каким он был задуман.

   Зачем она. На телефоне первый экран страницы товара занимали шапка,
   заголовок в три строки и обложка в 358 точек, а цена с кнопкой
   начинались на 862-й — то есть человек открывал товар и цены не видел.
   Для страницы, которая существует ради покупки, это дороже любой
   красоты: прокрутки требует именно то, ради чего пришли.

   Обложка от ограничения не страдает: снимок остаётся целым и
   вписывается по большей стороне, просто перестаёт занимать пол-экрана.
   На широком экране ничего не меняется — там цена и так видна.

   Число подобрано счётом, а не на глаз. Сперва стояло 44vh — при экране
   в 844 точки это 371, а обложка и без того была 358: правило не делало
   ничего, и цена как начиналась на 862-й, так и осталась. 32vh дают 270
   точек, обложка теряет 88, и блок с ценой встаёт на 774-ю — внутри
   первого экрана, с запасом. */

@media (max-width: 720px) {
    .good-page__cover {
        max-height: 32vh;
    }

    .good-page__cover img,
    .good-page__cover .good-stub {
        max-height: 32vh;
        object-fit: contain;
    }

    /*
     * Подписи над заголовками — «участник», «профиль», «что нового». На
     * широком экране они уместно мелкие, на телефоне превращаются в серую
     * полоску. Одиннадцать точек — граница, где подпись ещё читают.
     */
    [class*="kicker"],
    [class*="eyebrow"] {
        font-size: 11px;
    }

    /*
     * Подписи в .68rem — из того же слоя оформления.
     *
     * На широком экране 10,88 точки читаются, в руке — уже нет: прогон
     * ловит их на «Загрузках» и «Новостях», а глаз замечает не размер, а
     * то, что подпись под карточкой почему-то не разобрать. Правило
     * поднимает до той же границы в одиннадцать точек и больше ничего не
     * трогает: ни цвет, ни отступы, ни вид на широком экране.
     */
    .downloads-card__meta span,
    .download-release__stats span,
    .news-archive__head small,
    .news-archive__months b,
    .news-article__author small,
    .news-badge,
    .news-category b,
    .news-home time,
    .news-neighbours span,
    .banner__label,
    .content-card__meta,
    .content-card__props span,
    .content-table th,
    .profile-notifications time {
        font-size: 11px;
    }

    /*
     * Разделы личного кабинета: обзор, профиль, безопасность, сеансы, а с
     * включённой рассылкой — ещё и она.
     *
     * Ряд у них прокручивается вбок, и формально всё помещается. На деле
     * человек видит обрезанное на полуслове «Сеан…» и решает, что сломано:
     * подсказки, что ряд листается, нет никакой, а угадывать это на
     * телефоне никто не станет.
     *
     * Пять коротких слов спокойно укладываются в две строки, и тогда видно
     * всё сразу — без прокрутки, без догадок. Прокрутку выключаем, иначе
     * перенос ей мешает.
     */
    .profile-tabs {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    .profile-tabs a {
        flex: 0 1 auto;
    }
}

/* ------------------------------------------------- личные сообщения

   Стили модуля лежат здесь, в общем слое, а не в каждой теме по разу.
   Форум в своё время развели по четырём файлам тем, и любая правка в нём
   теперь делается четырежды; повторять это ради переписки не стоит.
   Своего цвета тут нет вовсе — всё взято переменными темы, поэтому
   «Обычная», «Блог», «Бумага» и «Витрина» одинаково узнают своё.        */

.msg-to {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: var(--gap);
}

.msg-to label { flex: 0 0 auto; }
.msg-to .input { flex: 1 1 10rem; min-width: 0; }

/* подсказка занимает всю ширину и уходит под поле, а не жмёт его сбоку */
.msg-to .field__hint { flex: 1 0 100%; margin: 0; }

.msg-thread {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.msg-thread .feed-item__body {
    flex: 1 1 auto;
    min-width: 0;
}

.msg-thread__face,
.msg-head__face {
    display: grid;
    place-items: center;
    overflow: hidden;
    inline-size: 2.6rem;
    block-size: 2.6rem;
    flex: 0 0 2.6rem;
    border: 1px solid var(--nx-line);
    border-radius: 50%;
    background: hsl(var(--hue, 210) 58% 42% / .16);
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
}

.msg-thread__face img,
.msg-head__face img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
}

/*
 * Отрывок последнего письма — одна строка с многоточием.
 *
 * Без обрезки письмо на три абзаца растянуло бы строку списка на полэкрана,
 * и соседние беседы уехали бы за нижний край.
 */
.msg-thread__last {
    margin: 0.15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.msg-thread__who { color: var(--nx-muted); }
.msg-thread--new .feed-item__title a { font-weight: 800; }

.msg-head {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.msg-head__who { min-width: 0; }
.msg-head__who h1 { margin: 0; }

.msg-tape {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: var(--gap);
}

/*
 * Своё письмо прижато вправо, чужое влево — единственное, что отличает их
 * с одного взгляда. Подписывать каждое именем было бы вернее, но в
 * переписке двоих имя повторялось бы через строку и мешало читать.
 */
.msg-note {
    max-inline-size: 42rem;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--radius);
    background: var(--nx-panel);
}

.msg-note--mine {
    align-self: flex-end;
    border-color: color-mix(in srgb, var(--color-accent) 34%, transparent);
    background: color-mix(in srgb, var(--color-accent) 7%, var(--nx-panel));
}

/* длинное слово или ссылка без пробелов не должны распирать письмо */
.msg-note__body {
    margin: 0;
    overflow-wrap: anywhere;
}

.msg-note__when {
    margin: 0.3rem 0 0;
    color: var(--nx-muted);
    font-size: 0.78rem;
}

.msg-note__read { color: var(--color-success, var(--color-accent)); }

.msg-reply textarea { inline-size: 100%; resize: vertical; }
.msg-reply .button { margin-top: 0.6rem; }

.msg-tools hr {
    margin: 0.9rem 0;
    border: 0;
    border-top: 1px solid var(--nx-line);
}

.msg-tools form { margin: 0; }
.msg-receiving summary,
.msg-tools summary { cursor: pointer; }

@media (max-width: 720px) {
    /*
     * В руке письмо и так занимает почти всю ширину, и прижимать его к
     * краю нечем: разница между «своим» и «чужим» держится на цвете и на
     * небольшом отступе, который остаётся заметен.
     */
    .msg-note { max-inline-size: 88%; }

    .msg-thread__face,
    .msg-head__face {
        inline-size: 2.2rem;
        block-size: 2.2rem;
        flex-basis: 2.2rem;
    }

    .msg-to label { flex: 1 0 100%; }
}

/*
 * Число непрочитанного на вкладке кабинета.
 *
 * Тот же приём, что у колокольчика в шапке: маленький кружок рядом с
 * подписью. Отдельного цвета не берёт — только тот, которым тема и так
 * выделяет важное.
 */
.profile-tabs__count {
    display: inline-block;
    min-inline-size: 1.15rem;
    margin-inline-start: 0.3rem;
    padding: 0 0.28rem;
    border-radius: 999px;
    background: var(--color-accent);
    color: var(--color-on-accent, #fff);
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 1.15rem;
    text-align: center;
}

/*
 * Кнопки на странице человека: своя «Изменить» и те, что ставят модули.
 *
 * Раньше кнопка была одна и стояла третьим столбцом шапки прямо. Теперь их
 * может быть несколько, и столбец занимает ряд; правило для телефона,
 * которое растягивало ту одиночную кнопку, переехало на этот ряд.
 *
 * Ряда может не быть вовсе — гость смотрит чужую страницу, и делать ему с
 * ней нечего. Пустой столбец в таком случае не должен отбирать ширину у
 * имени, поэтому его убираем совсем.
 */
.public-profile__actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.public-profile__actions:not(:has(*)) { display: none; }

@media (max-width: 44rem) {
    .public-profile__actions {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .public-profile__actions .button { flex: 1 1 auto; }
}

/* ------------------------------------------------------- закладки

   Как и у писем, здесь только раскладка: цвет, кнопка и рамка берутся
   из словаря темы, поэтому все четыре темы оформляют звёздочку каждая
   по-своему, ничего о ней не зная.                                   */

.fav-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-block: var(--gap);
}

.fav-bar form { margin: 0; }
.fav-bar__count { color: var(--nx-muted); font-size: 0.82rem; }

/* отложенное — звёздочка цветом темы, чтобы состояние читалось без слов */
.fav-star.is-on { color: var(--color-accent); border-color: color-mix(in srgb, var(--color-accent) 40%, transparent); }

.fav-kinds {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
    margin-bottom: var(--gap);
}

.fav-kinds a {
    padding: 0.42rem 0.68rem;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    background: var(--nx-panel);
    color: var(--nx-muted);
    font-size: 0.8rem;
    font-weight: 750;
    text-decoration: none;
}

.fav-kinds a.is-active {
    border-color: color-mix(in srgb, var(--color-accent) 40%, transparent);
    color: var(--color-accent);
}

.fav-kinds b { font-weight: 850; }

.fav-item {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
}

.fav-item .feed-item__body { flex: 1 1 auto; min-width: 0; }
.fav-item__off { margin: 0; flex: 0 0 auto; }

.fav-item__kind {
    display: block;
    color: var(--color-accent);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 720px) {
    /*
     * В руке у кнопки «убрать» остаётся одна звёздочка: слово рядом с
     * ней отнимает у названия записи половину строки, а само название —
     * то единственное, ради чего в список и заходят.
     */
    .fav-item__off-word { display: none; }
}

/* --------------------------------------------------------- метки

   Облако, полоска под записью и страница всех меток.               */

.tag-cloud__body {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
    align-items: baseline;
}

/*
 * Размер приходит переменной от вида — по весу метки. Разброс узкий
 * нарочно: облако, где одна метка втрое крупнее соседней, читается как
 * узор, а мелкие в нём перестают нажимать.
 */
.tag-cloud__item {
    font-size: max(11px, var(--tag-size, 1rem));
    color: var(--nx-muted);
    text-decoration: none;
    line-height: 1.5;
}

.tag-cloud__item:hover { color: var(--color-accent); }

.tag-cloud__all {
    display: inline-block;
    margin-top: 0.7rem;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.tag-line {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-block: var(--gap);
}

.tag-line__label {
    color: var(--nx-muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.tag-line__item {
    padding: 0.24rem 0.55rem;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    color: var(--nx-muted);
    font-size: 0.8rem;
    text-decoration: none;
}

.tag-line__item:hover { border-color: var(--color-accent); color: var(--color-accent); }

/* поле правки занимает всю ширину: под ним подсказка в две строки */
.tag-line__edit { flex: 1 0 100%; }
.tag-line__edit summary { cursor: pointer; color: var(--nx-muted); font-size: 0.78rem; }
.tag-line__edit form { margin-top: 0.6rem; }
.tag-line__edit .input { inline-size: 100%; }
.tag-line__edit .button { margin-top: 0.5rem; }

.tag-all {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.tag-all__item {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 0.85rem;
    text-decoration: none;
}

.tag-all__item b { color: var(--nx-muted); font-size: 11px; }
.tag-all__item:hover { border-color: var(--color-accent); }

/* 0.9.2 — публичные дополнительные поля профиля. */
.public-profile__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1rem;margin:.75rem 0 0}.public-profile__facts>div{display:grid;gap:.18rem;padding:.6rem 0;border-top:1px solid var(--nx-line)}.public-profile__facts dt{color:var(--color-muted);font-size:.72rem;font-weight:750}.public-profile__facts dd{margin:0;overflow-wrap:anywhere;font-size:.84rem}.public-profile__facts a{color:var(--color-accent);text-decoration:none}
@media(max-width:40rem){.public-profile__facts{grid-template-columns:1fr}}

/* 0.9.3 — управляемый каркас официальных тем.
 * Значения объявляет редактор темы, а эти правила дают одинаковый смысл
 * каждому переключателю во всех четырёх оформлениях.
 *
 * У каждой переменной здесь стоит запасное значение, и это не
 * перестраховка. Свойство со ссылкой на несуществующую переменную браузер
 * отбрасывает целиком — молча, без ошибки в разборе. Пока умолчания
 * официального слоя не доходили до страницы, «padding: var(--content-density)»
 * означал не «обычная плотность», а «никаких отступов»: карточки, панели,
 * товары, комментарии и заказы стояли текстом вплотную к рамке на всём
 * сайте у любого, кто не заходил в «Оформление».
 *
 * Настоящая починка — в ядре (ThemeVariables::css), оно теперь выводит эти
 * значения всегда. Запасные оставляем вторым поясом: файл стилей должен
 * держаться сам, даже если его подключат отдельно — в предпросмотре темы
 * или в чужой сборке. */
html { font-size: var(--font-scale, 100%); }

.site-head .wrap { min-height: var(--header-height, 72px); }
.nav { gap: var(--nav-gap, 0.35rem); }

@media (min-width: 62rem) {
    main.has-side { grid-template-columns: minmax(0, 1fr) minmax(0, var(--sidebar-width, 18rem)); }
}

.region,
.cards,
.goods,
.feed,
.comments__list { gap: var(--section-gap, 2rem); }

.panel,
.card,
.block,
.feed-item,
.good,
.forum-category,
.forum-post,
.comment,
.order-card,
.checkout__summary {
    border-radius: var(--card-radius, var(--radius, 10px));
    box-shadow: var(--card-shadow, var(--shadow-panel, none));
}

.panel,
.card,
.block,
.feed-item,
.good__body,
.comment,
.order-card { padding: var(--content-density, 1rem); }

.button { border-radius: var(--button-radius, var(--radius, 10px)); }
.input,
select.input,
textarea.input { border-radius: var(--field-radius, var(--radius, 10px)); }
.site-foot { padding-block: var(--footer-spacing, 2rem); }

.button,
.input,
.card,
.panel,
.feed-item,
.good { transition-duration: var(--motion-speed, 180ms); }

/* Визуальная сетка конструктора главной. Без настроек каждый блок занимает
 * строку целиком, поэтому обновление не меняет существующую композицию. */
.region--home,
.region--home-stream {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--section-gap, var(--gap, 1rem));
}

.region--home > *,
.region--home-stream > * { min-width: 0; grid-column: 1 / -1; }
.region--home > .region-item--half,
.region--home-stream > .region-item--half { grid-column: span 6; }
.region--home > .region-item--third,
.region--home-stream > .region-item--third { grid-column: span 4; }

.region-item--soft,
.region-item--accent {
    padding: clamp(1rem, 3vw, 1.5rem);
    border: 1px solid var(--nx-line);
    border-radius: var(--card-radius, var(--radius));
}
.region-item--soft { background: color-mix(in srgb, var(--color-surface) 92%, var(--color-accent) 8%); }
.region-item--accent { background: color-mix(in srgb, var(--color-surface) 80%, var(--color-accent) 20%); }

@media (max-width: 48rem) {
    .region--home > .region-item,
    .region--home-stream > .region-item { grid-column: 1 / -1; }
}

/*
 * Подписи не мельче одиннадцати точек — на любом экране.
 *
 * Те же правила стоят выше, в телефонном блоке: там беда бросалась в глаза
 * первой, и я тогда написал, что «на широком экране они уместно мелкие».
 * Прогон на ширине 768 и 1440 показал, что это была отговорка: 10,88 точки
 * не читаются и за столом — кикеры в кабинете, подписи под карточками
 * загрузок и в ленте новостей.
 *
 * Довод про читаемость от ширины экрана не зависит, поэтому повторяем
 * список снаружи медиа-блока. Прежний не убираем: он ничему не мешает, а
 * вырезать работающее ради опрятности — лишний повод что-нибудь потерять.
 */
[class*="kicker"],
[class*="eyebrow"],
.downloads-card__meta span,
.download-release__stats span,
.news-archive__head small,
.news-archive__months b,
.news-article__author small,
.news-badge,
.news-category b,
.news-home time,
.news-neighbours span,
.banner__label,
.content-card__meta,
.content-card__props span,
.content-table th,
.profile-notifications time {
    font-size: 11px;
}

/*
 * Разделы сайта списком — блок для колонки.
 *
 * Строка со стрелкой во всю ширину, а не ссылка в потоке: по такой видно,
 * что нажимать можно всюду, и палец попадает без прицеливания. Стрелка
 * приглушена и подаётся вперёд только под курсором — в колонке десяток
 * строк, и десять ярких стрелок спорили бы с содержимым страницы.
 *
 * Имена общие с прочими блоками темы (.block, .block__title), поэтому
 * блок одевается в любое оформление и ничего своего не навязывает.
 */
.site-sections__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2px;
}

.site-sections__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: var(--field-radius, var(--radius, 10px));
    color: inherit;
    text-decoration: none;
    min-height: 2.25rem;
}

.site-sections__item b {
    color: var(--color-faint, var(--color-muted));
    font-weight: 400;
    transform: translateX(-0.2rem);
    opacity: 0;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.site-sections__item:hover,
.site-sections__item:focus-visible {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
}

.site-sections__item:hover b,
.site-sections__item:focus-visible b {
    color: inherit;
    transform: none;
    opacity: 1;
}

/*
 * Текущий раздел: подложка и насыщенность, а не цвет.
 *
 * Акцентным цветом на его же бледной подложке контраст выходил 4,39 при
 * нужных 4,5 — на светлой теме это заметно: подпись выглядит выцветшей
 * ровно там, где должна быть самой ясной. Цвет оставляем обычный
 * текстовый: «где я» и так видно по подложке и насыщенности.
 */
.site-sections__item.is-active {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-text);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    .site-sections__item b { transition: none; }
}

/*
 * Шапка — всегда одна строка.
 *
 * Ряд шапки переносился: модулей полтора десятка, каждый ставит себя в
 * меню, и к десятому строка разъезжалась на две-три полосы. Логотип при
 * этом оставался наверху сам по себе, корзина с языками уезжали вниз, и
 * шапка занимала четверть экрана ещё до того, как начнётся страница.
 *
 * Перенос убираем, а место отдаём меню: не влезло — прокручивается вбок,
 * как полоса вкладок. Логотип, корзина, языки и своя учётная запись при
 * этом стоят там же, где стояли, — их положение не зависит от того,
 * сколько модулей включено.
 *
 * Полосу прокрутки прячем: она тут лишняя подробность, а край меню и так
 * обрезан — видно, что там есть продолжение. На телефоне правило не
 * действует: там меню открывается кнопкой и стоит столбиком.
 */
/* по умолчанию обёртки как бы нет: меню на телефоне — простой столбик */
.nav__sections { display: contents; }

@media (min-width: 48rem) {
    .site-head .wrap {
        flex-wrap: nowrap;
    }

    .site-head .nav { flex-wrap: nowrap; min-width: 0; }

    /* прокручиваются только разделы; своё остаётся у правого края */
    .site-head .nav__sections {
        display: flex;
        align-items: center;
        gap: inherit;
        min-width: 0;
        overflow-x: auto;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .site-head .nav__sections::-webkit-scrollbar { height: 0; }

    /*
     * Затухание у обрезанного края.
     *
     * Ставится скриптом и только когда обрезано на самом деле: вечное
     * затухание на влезающем меню — это грязь на ровном месте. Маска, а
     * не накладка поверх: накладка закрыла бы ссылку от нажатия, а
     * человек целится ровно в тот пункт, который наполовину видно.
     */
    .site-head .nav__sections.is-cut {
        mask-image: linear-gradient(to left, transparent, #000 2.5rem);
    }

    .site-head .nav__sections.is-cut-start {
        mask-image: linear-gradient(to right, transparent, #000 2.5rem);
    }

    .site-head .nav__sections.is-cut.is-cut-start {
        mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    }

    .site-head .nav > *,
    .site-head .nav__sections > * { flex: 0 0 auto; }

    /*
     * Сжимается только полоса разделов — она одна умеет прокручиваться.
     * Без этого «своё» вылезало за край меню и рисовалось поверх корзины
     * и языков: места не хватило, а уступить было некому.
     */
    .site-head .nav__sections { flex: 1 1 auto; }

    /*
     * Подсказка, что полоса прокручивается.
     *
     * Приём из темы, где им подсвечены края меню на телефоне: два нижних
     * градиента — постоянные метки у краёв, два верхних привязаны к
     * содержимому (background-attachment: local) и закрывают метку с той
     * стороны, куда прокручивать уже некуда. Прокрутки нет — и подсказок
     * не видно, ничего отключать не нужно.
     */
    .site-head .nav__sections {
        background:
            linear-gradient(to right, var(--color-background, #05070d) 40%, transparent) left center / 1.6rem 100% no-repeat local,
            linear-gradient(to left,  var(--color-background, #05070d) 40%, transparent) right center / 1.6rem 100% no-repeat local,
            linear-gradient(to right, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent) left center / 1rem 100% no-repeat,
            linear-gradient(to left,  color-mix(in srgb, var(--color-accent) 22%, transparent), transparent) right center / 1rem 100% no-repeat;
    }
}

/*
 * В раскрытом меню телефона блок разделов не нужен.
 *
 * Колонка на узком экране переезжает внутрь меню, и блок оказывается
 * прямо под теми же ссылками, которые меню уже показало строкой выше.
 * Один и тот же список дважды подряд выглядит сбоем вёрстки, хотя это
 * всего лишь два места, сложившиеся в одно.
 *
 * В самой колонке — на широком экране — блок остаётся: там он и нужен.
 */
#site-nav .site-sections { display: none; }

/*
 * Метка баннера — тоже не мельче одиннадцати точек.
 *
 * Общее правило подписей её не удерживало: у темы метка описана точнее
 * («.banner--text .banner__label», и ещё раз в телефонном блоке), а при
 * равной силе выигрывает более точный отбор. Повторяем с той же точностью.
 *
 * Всплыло это только теперь: до образцов баннеров на страницах просто не
 * было, и прогону не на чем было споткнуться.
 */
.banner--text .banner__label,
.banners .banner__label {
    font-size: 11px;
}

/*
 * Поля записи в колонке: подпись над значением, без отступа вбок.
 *
 * Список переехал из середины записи в боковую колонку, а разметка у него
 * осталась прежней — «dl» с отступом у «dd», как принято в словарях. В
 * узкой колонке этот отступ выглядит сбоем вёрстки: значение будто
 * съехало вправо само по себе.
 */
.content-facts-block .content-detail__facts-list {
    display: grid;
    gap: 0.7rem;
    margin: 0;
}

.content-facts-block .content-detail__facts-list > div {
    display: grid;
    gap: 0.15rem;
}

.content-facts-block dt {
    color: var(--color-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.content-facts-block dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/*
 * Запись раздела — в одну колонку.
 *
 * Сетка была рассчитана на две: текст и «Детали» рядом. Детали переехали
 * в боковую колонку, и второй столбец остался пустым местом — текст
 * по-прежнему жался в половину ширины, а рядом ничего не было. Класс
 * «is-single» вид объявлял и раньше, но правила под него не было.
 */
.content-detail__grid.is-single {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Обложка карточки держит свою пропорцию, а не пропорцию картинки.
 *
 * Высота обложки ничем не была ограничена: картинка внутри стоит с
 * «height: 100%», но сама высота бралась из содержимого — то есть из
 * снимка. Для широкой фотографии это незаметно, а вертикальная растягивала
 * карточку на весь экран: на телефоне обложка занимала семьсот точек, и
 * до заголовка новости приходилось прокручивать страницу.
 *
 * Даём обложкам соотношение сторон. Картинка внутри по-прежнему
 * обрезается по «cover» — и обрезается вокруг точки фокуса, если владелец
 * её выбрал. У ведущей карточки на широком экране пропорция своя: там
 * обложка стоит колонкой во всю высоту карточки, и навязывать ей формат
 * нельзя.
 */
.news-card__cover,
.news-home__cover,
.downloads-card__cover,
.content-card__cover {
    aspect-ratio: 16 / 9;
}

@media (min-width: 43rem) {
    .news-card--lead.has-cover .news-card__cover,
    .news-home__lead.has-cover .news-home__cover {
        aspect-ratio: auto;
    }
}

/*
 * Лента новостей — во всю ширину.
 *
 * Сетка страницы держала две колонки: лента и архив рядом. Архив уехал
 * блоком в боковую колонку, а вторая колонка осталась — пустая полоса в
 * треть ширины, из-за которой лента по-прежнему жалась влево.
 *
 * Правило стоит в общем слое, а не в теме: вторая колонка была объявлена
 * в каждой из четырёх тем одинаково, и чинить это по четырём файлам
 * значило бы забыть о пятой, которую напишет покупатель.
 */
.news-layout {
    grid-template-columns: minmax(0, 1fr);
}

/*
 * Поля форм на сайте — по размеру того, что в них пишут.
 *
 * Имя, почта и тема письма тянулись во всю ширину содержимого: поле для
 * имени выходило в семьсот с лишним точек. Ширина поля — обещание: она
 * говорит, сколько от тебя ждут, и когда для имени и для письма она
 * одинакова, обещание пустое.
 *
 * Ограничиваем только сверху и только там, где поле стоит в обычной
 * форме. Поиск, фильтры и поля внутри рядов не трогаем: там ширину
 * задаёт раскладка, и она уже продумана.
 */
.field .input,
.form-row .input {
    max-width: 34rem;
}

.field textarea.input,
.form-row textarea.input {
    max-width: 46rem;
}

.field .input[type="number"],
.field .input[type="date"],
.field .input[type="time"] {
    max-width: 12rem;
}

/*
 * Полю, которому раскладка велела быть во всю ширину, ограничение ни к
 * чему. Но «маленькое» поле остаётся маленьким: цена в отборе не должна
 * растягиваться оттого, что стоит внутри поиска.
 */
.shop-search .input:not(.input--small),
.nav__form .input:not(.input--small),
.field--wide .input:not(.input--small),
.msg-to .input:not(.input--small) {
    max-width: none;
}

/*
 * Кнопка «наверх».
 *
 * Стоит над кнопкой обратного звонка, чтобы не спорить с ней за угол, и
 * ниже её по заметности: обратный звонок — действие, а это просто
 * возврат. Отсюда приглушённый вид и появление только после двух экранов
 * прокрутки.
 *
 * Размер — сорок четыре точки: столько нужно, чтобы попадать пальцем без
 * прицеливания.
 */
.to-top {
    position: fixed;
    right: 16px;
    bottom: 72px;
    z-index: 59;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--color-border, rgba(127, 127, 127, .3));
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    backdrop-filter: blur(8px);
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.to-top:hover,
.to-top:focus-visible {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .to-top { transition: none; }
    .to-top:hover { transform: none; }
}

/*
 * Значки у имени — читаемые на любой теме.
 *
 * «Почта подтверждена» шла зелёным с контрастом 3,89, роль — приглушённым
 * на полупрозрачной подложке: 3,96. Это подписи у самого имени человека,
 * их читают в первую очередь.
 *
 * Зелёный подмешиваем к цвету текста сильнее: на светлой теме он
 * темнеет, на тёмной светлеет — и остаётся зелёным в обоих случаях.
 * Подложке убираем прозрачность: сквозь неё просвечивал фон карточки и
 * съедал разницу.
 */
.profile-identity__roles span,
.profile-badge {
    background: var(--color-surface);
    color: var(--color-text);
}

.profile-badge--ok {
    color: color-mix(in srgb, #2cab69 58%, var(--color-text));
}

/*
 * Текущая вкладка кабинета и значок версии — тем же правилом, что и
 * текущий раздел в колонке.
 *
 * Акцентный цвет на своей же бледной подложке даёт около четырёх к одному
 * — чуть ниже нормы. Там, где подложка уже говорит «ты здесь», цвету
 * добавлять нечего: берём обычный текстовый и оставляем насыщенность.
 */
.profile-tabs a.is-active {
    color: var(--color-text);
}

.downloads-card__version,
.download-release__version {
    color: var(--color-text);
}

/*
 * Акцент как цвет мелкого текста — на полтона глубже.
 *
 * Один и тот же акцент работает по-разному: на кнопке он фон, и белая
 * надпись на нём читается; как цвет самой надписи на светлой странице он
 * уже на грани — четыре с четвертью к одному при нужных четырёх с
 * половиной. Чем мельче буквы, тем это заметнее.
 *
 * Не притемняем сам акцент — он задаёт характер темы. Заводим его
 * текстовый вариант: чуть подмешанный к цвету текста, поэтому на светлой
 * теме он темнеет, а на тёмной светлеет.
 */
:root {
    --color-accent-text: color-mix(in srgb, var(--color-accent) 84%, var(--color-text));
}

.news-rss,
.news-rss > span,
.news-category.is-active,
.news-category.is-active > span,
.downloads-card__version,
.download-release__version,
.notifications-filter.is-active,
.downloads-card__meta span:first-child,
[class*="filter"].is-active > span {
    color: var(--color-accent-text);
}


/*
 * Выбранный чип — подложкой и рамкой, а не сплошной заливкой.
 *
 * Со сплошной заливкой надпись приходится красить «противоположным»
 * цветом, а он у каждой темы свой: то, что читается на тёмной, сливается
 * на светлой, и наоборот. Оба раза я промахнулся именно на этом.
 *
 * Подложка в одну восьмую акцента с его же рамкой одинаково работает на
 * любой теме: видно, что выбрано, а надпись остаётся обычным текстом.
 */
.chip--on {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    color: var(--color-accent-text);
}

/* ------------------------------------------------------- переключатели */

/*
 * Настройка — переключатель, а не галочка.
 *
 * Галочка отвечает «отметить ли», настройка — «включено или выключено».
 * У переключателя состояние видно с одного взгляда: слева серый —
 * выключено, справа цветной — включено.
 *
 * Рисуем прямо на поле: разметка форм не меняется, клавиатура и чтение
 * с экрана работают как прежде — это по-прежнему обычный флажок.
 *
 * Согласие с правилами остаётся галочкой нарочно: человек ставит
 * отметку «я прочёл и согласен», а не включает у себя правила.
 */
.check input[type="checkbox"]:not([name="agree"]),
.profile-switch input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 2.3rem;
    height: 1.3rem;
    margin: 0.05rem 0 0;
    border: 1px solid var(--nx-line-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    cursor: pointer;
    transition: background-color var(--nx-ease), border-color var(--nx-ease);
}

.check input[type="checkbox"]:not([name="agree"])::before,
.profile-switch input[type="checkbox"]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.18rem;
    width: 0.92rem;
    height: 0.92rem;
    border-radius: 50%;
    background: var(--nx-faint);
    transform: translateY(-50%);
    transition: transform var(--nx-ease), background-color var(--nx-ease);
}

.check input[type="checkbox"]:not([name="agree"]):checked,
.profile-switch input[type="checkbox"]:checked {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 80%, transparent);
}

.check input[type="checkbox"]:not([name="agree"]):checked::before,
.profile-switch input[type="checkbox"]:checked::before {
    background: var(--color-accent-contrast, #fff);
    transform: translate(0.98rem, -50%);
}

.check input[type="checkbox"]:not([name="agree"]):focus-visible,
.profile-switch input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .check input[type="checkbox"],
    .check input[type="checkbox"]::before,
    .profile-switch input[type="checkbox"],
    .profile-switch input[type="checkbox"]::before { transition: none; }
}

/* ------------------------------------------------- закрытый сайт */

/*
 * Страницу закрытого сайта человек видит вместо всего сайта, и она
 * должна выглядеть как часть сайта, а не как сообщение об ошибке:
 * те же цвета темы, то же начертание, спокойная карточка по центру.
 */
.maintenance {
    display: grid;
    place-items: center;
    min-height: 100vh;
    padding: 1.5rem;
    background: var(--color-bg, var(--color-surface));
    color: var(--color-text);
}

.maintenance__card {
    width: min(38rem, 100%);
    padding: clamp(1.4rem, 4vw, 2.4rem);
    border: 1px solid var(--nx-line);
    border-radius: var(--radius, 14px);
    background: var(--nx-panel);
    box-shadow: var(--nx-shadow-soft);
    text-align: center;
}

.maintenance__site {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.maintenance__card h1 {
    margin: 0 0 0.7rem;
    line-height: 1.15;
    text-wrap: balance;
}

.maintenance__text {
    margin: 0 auto;
    max-width: 46ch;
    color: var(--color-muted);
    line-height: 1.65;
    text-align: left;
}

.maintenance__text :first-child { margin-top: 0; }
.maintenance__text :last-child { margin-bottom: 0; }

.maintenance__until {
    margin: 1.1rem 0 0;
    padding-top: 0.9rem;
    border-top: 1px solid var(--nx-line);
    color: var(--color-text);
    font-weight: 750;
}

/* ----------------------------------------------------------- рубрики */

/*
 * Список рубрик в колонке. Тот же вид, что у разделов сайта рядом: это
 * соседние списки, и разное оформление у них читалось бы как разные
 * вещи. Счётчик справа — бледный, он подсказка, а не заголовок.
 */
.site-rubrics__list {
    display: grid;
    gap: 0.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-rubrics__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.5rem 0.6rem;
    border-radius: calc(var(--radius) * 0.6);
    color: var(--color-text);
    text-decoration: none;
    transition: background-color var(--nx-ease), color var(--nx-ease);
}

.site-rubrics__item:hover {
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
}

.site-rubrics__item b {
    flex: 0 0 auto;
    min-width: 1.5rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-align: center;
}

.site-rubrics__item:hover b {
    background: color-mix(in srgb, var(--color-accent) 16%, transparent);
    color: var(--color-accent);
}

/* ------------------------------------------- фильтры публичных списков */

/*
 * Текстовый поиск теперь общий для сайта. Внутри каталогов остаются
 * только настоящие фильтры раздела и сортировка, поэтому панель всегда
 * видна и не прячется в отдельное окно.
 */
.site-filter {
    margin-bottom: 1rem;
    padding: 0.8rem;
    border: 1px solid var(--nx-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

.site-filter__line {
    display: flex;
    align-items: end;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.site-filter__search {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 17rem;
    min-width: min(17rem, 100%);
}

.site-filter__search > span {
    position: absolute;
    left: 0.65rem;
    color: var(--color-muted);
    pointer-events: none;
}

.site-filter__search .input { width: 100%; padding-left: 1.9rem; }

.site-filter__field {
    display: grid;
    flex: 0 1 10.5rem;
    gap: 0.28rem;
    min-width: 9rem;
}

/*
 * Поле не растягиваем на всю строку.
 *
 * «сначала свежие» в поле шириной в полстраницы читается как ошибка
 * вёрстки: глаз ищет, что там ещё написано справа, а там пусто. Поле
 * должно быть по своему содержимому — список коротких слов.
 */
.site-filter__field--sort { flex: 0 1 16rem; }

.site-filter__field > span {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.site-filter__field .input { width: 100%; }

.site-filter__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;

    /*
     * Кнопка стоит рядом с полями, а не у дальнего края.
     *
     * Прижатая вправо, она отрывалась от того, к чему относится: в
     * разделе с одним полем «Порядок» между списком и «Применить»
     * оставалась половина строки пустоты, и они читались как две
     * несвязанные вещи.
     */
}

.site-filter__reset {
    color: var(--color-muted);
    text-decoration: none;
}

.site-filter__reset:hover { color: var(--color-accent); }

@media (max-width: 48rem) {
    .site-filter { padding: 0.7rem; }
    .site-filter__line { align-items: stretch; }
    .site-filter__search,
    .site-filter__field { flex: 1 1 100%; min-width: 100%; }
    .site-filter__actions { width: 100%; margin-left: 0; }
    .site-filter__actions .button { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------- каталог магазина */

.shop-categories {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1rem;
}

.shop-categories__label,
.shop-catalog-tools__caption {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.shop-categories__track {
    display: flex;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0 0 0.2rem;
    scrollbar-width: thin;
}

.shop-categories__item {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.35rem;
    padding: 0.45rem 0.78rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 14%, transparent);
    border-radius: calc(var(--radius) * 0.8);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    color: var(--color-muted);
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color var(--nx-ease), background-color var(--nx-ease), color var(--nx-ease), transform var(--nx-ease);
}

.shop-categories__item:hover {
    border-color: color-mix(in srgb, var(--color-accent) 44%, transparent);
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
    color: var(--color-text);
}

.shop-categories__item.is-active {
    border-color: color-mix(in srgb, var(--color-accent) 52%, transparent);
    background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
    color: var(--color-accent);
}

.shop-catalog-tools {
    margin: 0 0 0.85rem;
    padding: clamp(0.8rem, 1.8vw, 1rem);
    border: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent);
    border-radius: var(--radius);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)),
            var(--color-surface) 48%,
            color-mix(in srgb, var(--color-accent-soft, var(--color-accent)) 3%, var(--color-surface)));
    box-shadow: var(--shadow-panel, 0 8px 28px rgb(0 0 0 / 0.06));
}

.shop-catalog-tools__form {
    display: grid;
    grid-template-columns: minmax(18rem, 1.25fr) minmax(12rem, 0.75fr) auto;
    align-items: end;
    gap: 0.7rem;
}

.shop-catalog-tools__search,
.shop-catalog-tools__sort,
.shop-catalog-tools__price label {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.shop-catalog-tools__searchbox {
    position: relative;
    display: flex;
    align-items: center;
}

.shop-catalog-tools__searchbox .input {
    width: 100%;
    padding-inline-start: 2.1rem;
}

.shop-catalog-tools__searchicon {
    position: absolute;
    inset-inline-start: 0.7rem;
    z-index: 1;
    color: var(--color-muted);
    pointer-events: none;
}

.shop-catalog-tools__price {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 0.42rem;
}

.shop-catalog-tools__price .input,
.shop-catalog-tools__sort .input {
    width: 100%;
}

.shop-catalog-tools__dash {
    padding-bottom: 0.65rem;
    color: var(--color-muted);
}

.shop-catalog-tools__actions {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.65rem;
}

.shop-catalog-tools__actions .button {
    white-space: nowrap;
}

.shop-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.2rem;
    margin: 0 0 0.8rem;
}

.shop-results-head__count {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.shop-results-head__chips {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.shop-filter-chip {
    display: inline-flex;
    align-items: center;
    min-height: 1.75rem;
    padding: 0.18rem 0.52rem;
    border: 1px solid color-mix(in srgb, var(--color-accent) 24%, transparent);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface));
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

@media (max-width: 68rem) {
    .shop-catalog-tools__form {
        grid-template-columns: minmax(18rem, 1.2fr) minmax(11rem, 0.8fr) auto;
    }

    .shop-catalog-tools__actions {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }
}

@media (max-width: 46rem) {
    .shop-catalog-tools__form {
        grid-template-columns: 1fr;
    }

    .shop-catalog-tools__actions {
        grid-column: auto;
        justify-content: stretch;
    }

    .shop-catalog-tools__actions .button {
        flex: 1 1 0;
        justify-content: center;
    }

    .shop-results-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .shop-results-head__chips {
        justify-content: flex-start;
    }
}

@media (max-width: 28rem) {
    .shop-catalog-tools__price {
        grid-template-columns: 1fr 1fr;
    }

    .shop-catalog-tools__dash {
        display: none;
    }
}


/* ------------------------------------------- единый поиск сайта */

.nav-search {
    display: inline-grid;
    grid-template-columns: minmax(7.5rem, 11rem) minmax(5.8rem, 7.2rem) 2rem;
    align-items: center;
    min-width: 0;
    margin-inline: 0.2rem;
    border: 1px solid color-mix(in srgb, var(--color-text) 13%, transparent);
    border-radius: calc(var(--radius) * 0.8);
    background: color-mix(in srgb, var(--color-surface) 90%, transparent);
    overflow: hidden;
}

.nav-search:focus-within,
.nav-search.is-active {
    border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 10%, transparent);
}

.nav-search__input,
.nav-search__source,
.nav-search__submit {
    min-width: 0;
    height: 2.05rem;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
}

.nav-search__input {
    width: 100%;
    padding: 0 0.55rem;
    outline: 0;
}

.nav-search__input::placeholder { color: var(--color-muted); }

.nav-search__source {
    width: 100%;
    padding: 0 1.35rem 0 0.4rem;
    border-inline-start: 1px solid var(--nx-line);
    color: var(--color-muted);
    font-size: 0.76rem;
    outline: 0;
}

.nav-search__submit {
    display: grid;
    place-items: center;
    border-inline-start: 1px solid var(--nx-line);
    cursor: pointer;
    color: var(--color-accent);
    font-weight: 800;
}

.nav-search__submit:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }

.site-search-form {
    display: grid;
    grid-template-columns: minmax(14rem, 1fr) minmax(10rem, 0.34fr) auto;
    align-items: end;
    gap: 0.7rem;
    margin: 0 0 1rem;
    padding: clamp(0.85rem, 2vw, 1.15rem);
    border: 1px solid var(--nx-line);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
}

.site-search-form__query,
.site-search-form__source {
    display: grid;
    gap: 0.3rem;
    min-width: 0;
}

.site-search-form__query > span,
.site-search-form__source > span {
    color: var(--color-muted);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.035em;
    text-transform: uppercase;
}

.site-search-form .input { width: 100%; }
.site-search-form__submit { min-height: var(--control-height, 2.65rem); }

.search-sources {
    display: flex;

    /*
     * Разделы поиска переносим, а не прокручиваем.
     *
     * Это отбор, а не меню: отбор, уехавший за край, не нажимают — его
     * просто не видят. «Страницы» обрезались последними и выглядели
     * опечаткой. Две строки кружков ничего не отодвигают.
     */
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 1rem;
    padding-bottom: 0.2rem;
}

.search-source {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 2.2rem;
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    color: var(--color-muted);
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 700;
}

.search-source.is-empty { opacity: 0.55; }
.search-source.is-empty:hover { opacity: 1; }

.search-source:hover,
.search-source.is-active {
    border-color: color-mix(in srgb, var(--color-accent) 42%, transparent);
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    color: var(--color-accent);
}

.search-source b {
    display: grid;
    place-items: center;
    min-width: 1.45rem;
    min-height: 1.45rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 0.7rem;
}

.search-results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.7rem;
}

.search-results-head p { margin: 0; }
.search-result__section { color: var(--color-accent); font-weight: 750; }
.search-state { display: grid; gap: 0.65rem; justify-items: start; }

.search-suggest__group {
    padding: 0.4rem 0.7rem 0.2rem;
    color: var(--color-muted);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.search-suggest__more {
    margin-top: 0.2rem;
    border-top: 1px solid var(--nx-line);
}

.search-suggest__more a {
    justify-content: center;
    color: var(--color-accent) !important;
    font-weight: 800;
}

@media (max-width: 72rem) {
    .nav-search {
        grid-template-columns: minmax(6.5rem, 9rem) 2rem;
    }
    .nav-search__source { display: none; }
}

@media (max-width: 48rem) {
    .nav-search {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(6rem, 0.45fr) 2.35rem;
        width: 100%;
        margin: 0.3rem 0;
    }
    .nav-search__source { display: block; }
    .site-search-form { grid-template-columns: 1fr; }
    .site-search-form__submit { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------- умная боковая колонка */
.sidebar-hub {
    display: grid;
    gap: 1rem;
}

.sidebar-hub__block {
    overflow: hidden;
}

.sidebar-hub__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.sidebar-hub__head .block__title { margin: 0; }

.sidebar-hub__eyebrow {
    display: block;
    margin-bottom: 0.18rem;
    color: var(--color-accent);

    /* ниже 11 точек подпись не читают, а угадывают по месту */
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.sidebar-hub__tabs {
    display: flex;

    /*
     * Вкладки переносим, а не прокручиваем.
     *
     * В шапке сайта прокрутка на месте: разделов там десяток, край
     * подсвечен, и видно, что есть продолжение. Здесь вкладок две-три, а
     * колонка узкая: вторая обрезалась на «Последние файл», и подсказки
     * об этом не было никакой — выглядело просто опечаткой.
     */
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 -0.15rem 0.75rem;
    padding: 0.15rem;
}

.sidebar-hub__tab {
    flex: 0 0 auto;
    appearance: none;

    /*
     * Высота не меньше 32 точек. В такую вкладку попадают пальцем; в
     * 26 точек попадают через раз, и человек думает, что вкладка не
     * работает, а она просто мимо.
     */
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    border: 1px solid var(--nx-line);
    border-radius: 999px;
    padding: 0.42rem 0.7rem;
    background: color-mix(in srgb, var(--color-surface) 88%, transparent);
    color: var(--color-muted);
    font: inherit;
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: border-color var(--nx-ease), background-color var(--nx-ease), color var(--nx-ease), transform var(--nx-ease);
}

.sidebar-hub__tab:hover {
    color: var(--color-text);
    border-color: color-mix(in srgb, var(--color-accent) 42%, var(--nx-line));
}

.sidebar-hub__tab.is-active {
    border-color: color-mix(in srgb, var(--color-accent) 55%, var(--nx-line));
    background: color-mix(in srgb, var(--color-accent) 13%, var(--color-surface));
    color: var(--color-accent);
}

.sidebar-hub__panel { display: none; }
.sidebar-hub__panel.is-active { display: block; animation: nx-sidebar-panel .16s ease-out; }

@keyframes nx-sidebar-panel {
    from { opacity: 0; transform: translateY(3px); }
    to { opacity: 1; transform: none; }
}

.sidebar-hub__links,
.sidebar-hub__feed {
    display: grid;
    gap: 0.22rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sidebar-hub__links a,
.sidebar-hub__feed a {
    color: var(--color-text);
    text-decoration: none;
}

.sidebar-hub__links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.56rem 0.62rem;
    border-radius: calc(var(--radius) * 0.62);
    transition: background-color var(--nx-ease), color var(--nx-ease), transform var(--nx-ease);
}

.sidebar-hub__links a:hover {
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
    color: var(--color-accent);
    transform: translateX(2px);
}

.sidebar-hub__links b {
    flex: 0 0 auto;
    min-width: 1.65rem;
    padding: 0.08rem 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-text) 7%, transparent);
    color: var(--color-muted);
    font-size: 0.7rem;
    font-weight: 800;
    text-align: center;
}

.sidebar-hub__feed li + li {
    border-top: 1px solid color-mix(in srgb, var(--nx-line) 78%, transparent);
}

.sidebar-hub__feed a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.68rem 0.2rem;
}

.sidebar-hub__feed a:hover strong { color: var(--color-accent); }

.sidebar-hub__feed-main {
    display: grid;
    min-width: 0;
    gap: 0.17rem;
}

.sidebar-hub__feed-main strong {
    overflow: hidden;
    color: var(--color-text);
    font-size: 0.86rem;
    line-height: 1.28;
    text-overflow: ellipsis;
    transition: color var(--nx-ease);
}

.sidebar-hub__feed-main small {
    overflow: hidden;
    color: var(--color-muted);
    font-size: 0.7rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-hub__feed em {
    flex: 0 0 auto;
    max-width: 6.5rem;
    padding: 0.2rem 0.42rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    color: var(--color-accent);
    font-size: 0.72rem;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-hub__more {
    display: inline-flex;
    margin-top: 0.65rem;
    color: var(--color-accent);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.sidebar-hub__more:hover { text-decoration: underline; }

@media (max-width: 760px) {
    .sidebar-hub { gap: 0.8rem; }
    .sidebar-hub__block { padding: 0.85rem; }
}


/* ------------------------------------------------------------- подвал сайта */
/*
 * Подвал — последнее, что человек видит, и первое место, куда он идёт за
 * ответом «а как с вами связаться». Столбцы сами решают, сколько их
 * поместится: сайт с одним разделом не обязан выглядеть недоделанным
 * сайтом с четырьмя.
 */
.site-foot__grid {
    /*
     * Не сетка, а строка с переносом: столбцов бывает от одного до трёх,
     * и заранее заданная сетка оставляла справа пустое место шириной в
     * ненужный столбец. Строка сама раздаёт ширину тем, кто есть.
     */
    display: flex;
    flex-wrap: wrap;
    gap: clamp(1.2rem, 3vw, 2.6rem);
    padding-block: clamp(1.6rem, 4vw, 2.8rem);
}

.site-foot__brand { flex: 1 1 18rem; min-width: 0; }
.site-foot__col { flex: 1 1 10rem; min-width: 0; max-width: 18rem; }

.site-foot__name {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: inherit;
    font-size: 1.05rem;
    font-weight: 800;
    text-decoration: none;
}

.site-foot__lead {
    max-width: 28rem;
    margin: 0.7rem 0 0;

    /*
     * Текст подвала и так приглушён темой: делать его ещё бледнее —
     * значит опустить читаемость ниже той черты, за которой подпись
     * угадывают по месту, а не читают. Берём цвет как есть.
     */
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.6;
}

.site-foot__langs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 1rem;
}

.site-foot__col h2 {
    margin: 0 0 0.7rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text);
}

.site-foot__col ul {
    display: grid;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-foot__col a {
    color: inherit;
    font-size: 0.92rem;
    text-decoration: none;
}

.site-foot__col a:hover { color: var(--color-accent); text-decoration: underline; }

.site-foot__line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1.2rem;
    padding-block: 1rem;
    border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    font-size: 0.85rem;
}

.site-foot__line p { margin: 0; }
.site-foot__line .engine a { color: var(--color-accent); text-decoration: none; }
.site-foot__line .engine a:hover { text-decoration: underline; }

@media (max-width: 40rem) {
    .site-foot__grid { grid-template-columns: minmax(0, 1fr); }
}

/*
 * Колонка страницы — мера для того, что в ней стоит.
 *
 * Ширина окна о содержимом не говорит ничего: при одном и том же
 * широком экране колонка у «Обычной» темы выходит на восемьдесят точек
 * шире, чем у «Бумаги», а в «Бумаге» приветствие уже сжимало поле
 * поиска до шести букв. Поэтому меряем саму колонку, а не окно.
 */
.main-col { container-type: inline-size; }

/*
 * Карточки разделов: раскладка по числу карточек, а не по остатку места.
 *
 * Сетка «сколько поместится» на четырёх карточках даёт три и одну — ряд
 * с отломанным углом. Четыре встают по две, а в широкой колонке — в
 * один ряд; три всегда втроём; две — по две. Меряем саму колонку:
 * ширина окна о её ширине не говорит ничего.
 */
@container (min-width: 30rem) {
    .welcome-cards[data-count="2"],
    .welcome-cards[data-count="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .welcome-cards[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (min-width: 62rem) {
    .welcome-cards[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@container (max-width: 44rem) {
    /*
     * Тесно — значит в один столбец и без украшения. Круг с буквами
     * стоит рядом с текстом, когда рядом есть место; когда его нет, он
     * отнимает место у того, ради чего страницу открыли.
     */
    .home-hero {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .home-hero__visual { display: none; }
    .welcome-hero__search { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------ заглушка вместо картинки */
/*
 * Первая буква названия на спокойном фоне. Оттенок приходит из самого
 * названия переменной --letter-turn: поворачиваем основной цвет темы, и
 * заглушка остаётся частью оформления, а не пятном рядом с ним.
 */
.letter-stub {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, hsl(from var(--color-accent) calc(h + var(--letter-turn, 0deg)) s l) 16%, transparent),
            transparent 65%
        ),
        /*
         * «Панель» есть не у всякой темы: «Обычная» её объявляет, а
         * «Блог», «Бумага» и «Витрина» — нет, и заглушка выходила
         * прозрачной. Берём общий запасной цвет, который ядро считает
         * из темы само.
         */
        var(--nx-panel);
    color: var(--color-muted);
    text-decoration: none;
}

.letter-stub--lead { aspect-ratio: 16 / 10; }

/*
 * Обёртка заглушки — ссылка, а в светлых темах ссылки подчёркнуты.
 * Под буквой это подчёркивание проступало чертой поперёк карточки.
 */
.news-card__cover,
.news-home__cover,
a:has(> .letter-stub) { text-decoration: none; }

.letter-stub__letter {
    font-family: var(--font-display, inherit);
    font-size: clamp(2.4rem, 18%, 6rem);
    font-weight: 700;
    line-height: 1;
    opacity: 0.45;
    user-select: none;
}

.letter-stub--lead .letter-stub__letter { font-size: clamp(3.2rem, 20%, 8rem); }

/*
 * Старые браузеры не умеют «hsl(from ...)»: там заглушка просто
 * останется ровного цвета панели, без поворота. Это не поломка — это
 * та же заглушка, только одноцветная.
 */
@supports not (color: hsl(from red h s l)) {
    .letter-stub {
        background: linear-gradient(135deg, color-mix(in srgb, var(--color-accent) 12%, transparent), transparent 65%), var(--nx-panel);
    }
}

/*
 * Четыре карточки в личном кабинете встают по две.
 *
 * Сетка на три столбца даёт им «три и одну» — тот же отломанный угол,
 * что был на главной. Сколько карточек, знает разметка: их приносят
 * модули, и число меняется от сайта к сайту.
 */
@media (min-width: 44rem) {
    .profile-module-grid[data-count="4"],
    .profile-module-grid[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}