/*
 * DOUT / NEWS desktop "default" package -- SHARED presentation CSS (Prompt 1466).
 *
 * Loaded by every desktop page in this package (editorial homepage, Article
 * detail, Topic, operational discovery, and compatibility tag list) via
 * {% dout_news_asset "css/common.css" ui_variant %}. Owns only what is genuinely
 * reused across more than one of those pages: presentation tokens/fonts, the
 * desktop publication width and shell (masthead/footer), and shared editorial
 * primitives (kicker, byline/metadata text, region headings, editorial action
 * links, link resets).
 *
 * Page-specific composition lives in the page's own stylesheet instead:
 *   - home.css           (editorial homepage: lead/briefing/secondary/latest)
 *   - article-detail.css (Article-detail reading surface)
 *   - browse.css          (shared Topic/operational filter and article list)
 *   - topic-page.css      (dedicated Topic identity/sidebar composition)
 *   - operational-page.css (generic discovery rail/sidebar composition)
 *   - news-list.css       (remaining compatibility tag presentation)
 *
 * This split exists so a page never downloads another page's irrelevant CSS
 * (e.g. Article detail no longer loads Homepage Latest/lead rules, and the homepage
 * no longer loads Article metadata-rail/hero rules) -- see
 * news_frontend/presentations/desktop/default/pages/*.html for the per-page
 * `{% dout_news_asset %}` link tags this produces.
 *
 * Prompt 1470 briefly also kept reusable `{% widget %}` visual rules here
 * (reasoning: a widget is meant for more than one page, so its CSS "belongs"
 * wherever every page already loads). Prompt 1471 corrected that: a widget
 * that is NOT present on a page must not cost that page a CSS download either
 * -- so widget CSS now lives in its own package-owned stylesheet
 * (css/widgets/<name>.css), requested by the widget's own template only when
 * the widget actually renders. common.css owns no widget-specific rules.
 */

/* =========================================================================
 * 1. Presentation tokens / fonts
 *
 * These are ALIASES layered on top of the platform-wide semantic tokens
 * (static/css/src/news-frontend/tokens.css, scoped to `.dout-news`) -- package-
 * local roles this desktop package needs (a Cyrillic-safe UI font stack, an
 * editorial serif role) that are not part of the platform-wide contract. Both
 * the editorial homepage (`.dn-editorial-home`/`.dn-home`, set by
 * pages/news_list.html's body class + `.dn-home` wrapper) and Article detail
 * (`.dn-article`, pages/article_detail.html's content wrapper) need the exact
 * same values, so they are defined ONCE here rather than duplicated per page
 * stylesheet -- the compatibility list does not opt in, so it keeps the
 * platform-wide Latin-first fonts unchanged.
 * ========================================================================= */

/* The currently vendored Space Grotesk/IBM Plex files are Latin subsets. Putting
 * those faces first makes mixed Russian strings switch font inside a word or
 * metadata line (verified with CSS.getPlatformFontsForNode). Platform UI fonts
 * supply one Cyrillic-capable face for the whole string, while the Latin-only
 * display face remains available for the DOUT / NEWS wordmark. */
.dn-editorial-home,
.dn-article,
.dn-topic-page,
.dn-operational-page,
.dn-newsroom {
    --dn-font-body: Arial, "Noto Sans", "Liberation Sans", sans-serif;
    --dn-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Mono", "Liberation Mono", monospace;
}

/* Package-local editorial-serif role: no serif webfont is vendored in this
 * repository (static/vendor/fonts/ only carries Space Grotesk/IBM Plex Sans/IBM
 * Plex Mono -- see static/css/src/base/fonts.css) and this must not add an
 * external CDN font, so the role is a plain system serif stack -- zero network
 * requests -- used only for editorial reading/headline roles (masthead/nav/
 * utilities stay on the grotesk --dn-font-heading; kickers/time/meta stay on
 * --dn-font-mono, unchanged). */
.dn-home,
.dn-article,
.dn-topic-page,
.dn-operational-page,
.dn-newsroom {
    --dn-font-serif: Georgia, "Times New Roman", "Noto Serif", serif;
}

/* Link reset shared by both editorial reading surfaces: an anchor inside the
 * homepage's or Article's own content inherits the surrounding text color and
 * never shows the browser default underline (each element still sets its own
 * hover color where it wants one). */
.dn-home a,
.dn-article a {
    text-decoration: none;
    color: inherit;
}

/* =========================================================================
 * 2. Shared editorial primitives
 *
 * Real cross-page visual/editorial concepts, not a generic utility framework:
 * kicker/section labels, metadata text (byline), region headings, and the
 * editorial action/arrow link. Each is reused verbatim by at least the
 * homepage AND Article detail -- see each rule's own comment for exactly where.
 * ========================================================================= */

/* --- Kicker / small uppercase section label -----------------------------
 * Used by the homepage lead story ("Top story"/"Главная тема") and Article
 * detail's "Original source" heading
 * (news_frontend/…/components/article_original_source.html) -- identical markup
 * contract: a `<p class="dn-kicker">` with a trailing hairline rendered via
 * ::after. (Until Prompt 1491 Article detail's Topic context also used this
 * primitive as a kicker; that context is now the shared Topic breadcrumb
 * below.) */
.dn-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    margin: 0 0 var(--space-2, 8px);
    font-family: var(--dn-font-mono);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dn-text-secondary);
}

.dn-kicker::after {
    content: "";
    flex: 0 0 52px;
    height: 1px;
    background: var(--dn-rule-subtle);
}

/* Prompt 1495.2: section-eyebrow variant (13px). The base 11px is the approved size of the
 * homepage lead kicker and the Article-detail original-source heading, so the larger size is an
 * opt-in modifier (currently the newsroom's section eyebrows) rather than a change to every
 * `.dn-kicker`. Everything else -- font role, casing, tracking, trailing hairline -- is the
 * shared primitive. */
.dn-kicker--section {
    font-size: 13px;
}

/* --- Topic breadcrumb: "Темы › <тема>" ----------------------------------
 * Prompt 1491: the shared Topic-context navigation rendered by
 * components/topic_breadcrumb.html, used by BOTH the dedicated Topic page
 * (Topic is the current page) and Article detail (Topic links to that Topic
 * surface). Moved here from topic-page.css because it is now genuinely
 * cross-page, not Topic-page-only. */
.dn-topic-crumbs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 18px;
    color: var(--dn-text-secondary);
    font-family: var(--dn-font-body);
    font-size: 13px;
}

.dn-topic-crumbs a {
    color: inherit;
    text-decoration: none;
}

.dn-topic-crumbs a:hover {
    color: var(--dn-text-primary);
    text-decoration: underline;
}

.dn-topic-crumbs span[aria-hidden] {
    color: var(--dn-rule-subtle);
}

/* --- Page heading: the publication's page-level H1 treatment --------------
 * Prompt 1492: the dedicated Topic page's H1 rule was the one already
 * visually approved page-title treatment; rather than copy it into the
 * operational/discovery surface as a second, independently-tuned rule, it is
 * promoted here as THE shared page-heading primitive (common.css owns genuinely
 * cross-page primitives). `.dn-topic-heading` and `.dn-operational-heading` both
 * opt in via the `dn-page-heading` class; each keeps only its own
 * margin/eyebrow/subtitle layout. Casing is part of the treatment (uppercase), so
 * a page title reads consistently across the desktop publication surfaces; the one
 * deliberate exception is the `--natural-case` modifier below (newsroom). */
.dn-page-heading h1 {
    margin: 0;
    color: var(--dn-text-primary);
    font-family: var(--dn-font-serif);
    font-weight: 700;
    font-size: clamp(42px, 5.4vw, 68px);
    line-height: 0.96;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

/* Prompt 1495.1: opt-out of the uppercase casing for pages whose approved
 * title is ordinary title case (the newsroom's "Редакция DOUT / NEWS"). Only the
 * casing/rhythm differ; the serif role, weight and clamped size stay the shared
 * treatment above. */
.dn-page-heading--natural-case h1 {
    text-transform: none;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* --- Metadata text (byline): source/date/time presentation ---------------
 * The homepage's lead/secondary teasers use this directly for "From <source>
 * <date>". Article detail's metadata rail (article-detail.css's
 * `.dn-article__meta`) is multi-classed onto the SAME `.dn-byline` element
 * (see article_meta.html) so its typography (mono/12px/secondary) is never
 * redeclared -- only the rail's own border/padding/wrap/action-button
 * additions live in article-detail.css. */
.dn-byline {
    margin: 0;
    display: flex;
    gap: var(--space-3, 12px);
    font-family: var(--dn-font-mono);
    font-size: 12px;
    line-height: 1.3;
    color: var(--dn-text-secondary);
}

.dn-byline--compact {
    font-size: 11px;
}

/* --- Region heading: "SECTION LABEL ———— [All link]" ---------------------
 * Used by the homepage's Latest/Focus region headings AND Article detail's
 * "Related materials" heading (article_context_region.html reuses this
 * unchanged, with no `__all` link since Related has no "see all" destination). */
.dn-region-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3, 12px);
    padding-bottom: 20px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--dn-rule-subtle);
}

.dn-region-heading h2 {
    margin: 0;
    font-family: var(--dn-font-mono);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--dn-text-primary);
}

.dn-region-heading h2::after {
    content: "";
    display: inline-block;
    width: 48px;
    height: 1px;
    margin-left: var(--space-4, 16px);
    vertical-align: middle;
    background: var(--dn-text-secondary);
}

/* --- Editorial action link: an inline icon+text "read more"/"go to X" link -
 * The shared shape (`.btn-read-more`/`.btn-go-further`-style duplication this
 * consolidates): homepage's lead "Читать дальше", the editorial-briefing
 * "Читать дальше", the region heading's "All news", and Article
 * detail's "Перейти к оригиналу" are the SAME conceptual arrow-link component
 * with only size/weight/color/hover differing per context. This primitive
 * carries only the truly shared layout (inline-flex + centered + icon gap);
 * each specific class (`.dn-lead__more`/`.dn-briefing__more` in home.css,
 * `.dn-region-heading__all` below, `.dn-article__original-source-link` in
 * article-detail.css) keeps only its own differentiating declarations. */
.dn-editorial-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dn-region-heading__all {
    font-family: var(--dn-font-body);
    font-size: 13px;
    color: var(--dn-text-secondary);
    white-space: nowrap;
}

.dn-region-heading__all:hover {
    color: var(--dn-accent-primary);
}

/* --- Empty/neutral small text -------------------------------------------- */

.dn-empty {
    color: var(--dn-text-secondary);
    font-size: 14px;
}

/* =========================================================================
 * 3. Desktop publication width + shell: masthead + footer
 *
 * `.dn-publication--desktop` is the narrow NEWS-only publication-container
 * primitive used by Homepage, Topic, and Article Detail. It deliberately does
 * not alter the compatibility list, separate mobile templates, account/staff
 * surfaces, or the DoutLab corporate site.
 * ========================================================================= */

.dn-publication--desktop {
    --dn-publication-desktop-width: 1360px;
    --dn-publication-desktop-gutter: 80px;
}

.dn-publication--desktop .content-wide,
.dn-publication--desktop .dn-masthead__row,
.dn-publication--desktop .dn-footer__row {
    width: min(
        calc(100vw - var(--dn-publication-desktop-gutter)),
        var(--dn-publication-desktop-width)
    );
}

.dn-masthead {
    border-bottom: 1px solid var(--dn-rule-subtle);
    background: var(--dn-surface-page);
}

/* Every masthead link sets its own color below, but color alone never removes the
 * browser's default underline -- without this, "DOUT / NEWS", the tagline, and
 * every nav item render underlined like plain unstyled hyperlinks, which is
 * exactly the "looks like an application" signal the visual review is about. One
 * reset here covers the whole masthead rather than repeating it per element. */
.dn-masthead a {
    text-decoration: none;
}

.dn-masthead__row {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--space-5, 24px);
    min-height: 84px;
    padding: 18px 0;
}

.dn-masthead__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex: 0 0 auto;
}

/* --- Shared publication brand mark: wordmark + slash + divider + slogan ---
 * Prompt 1467 corrected this typography; Prompt 1468 promotes it out of
 * `.dn-masthead__*` into its own `.dn-brand__*` primitive so the footer's brand
 * (shell/footer.html) is the SAME identity system, not a second, independently
 * -tuned copy (design/news.doutlab/main_page.png shows an identical footer
 * treatment). `.dn-masthead__brand`/`.dn-footer__brand` remain each container's
 * OWN row-level layout (gap/alignment) only -- never the identity itself.
 *
 * The approved reference sets "DOUT/NEWS" as one tight mark -- no visible space
 * around the slash -- at a denser overall mass than the previous spaced-out
 * "DOUT&nbsp;/&nbsp;NEWS". Space Grotesk Bold (the only weight available locally
 * -- static/vendor/fonts/space-grotesk/ has no heavier cut, and adding one would
 * be a new font asset, out of scope) is naturally wider/rounder than the
 * reference's condensed mark; tightening the slash spacing and letter-spacing
 * closes most of the visible gap without introducing a new font family/CDN. */
.dn-brand__logotype {
    font-family: var(--dn-font-heading);
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--dn-text-primary);
    white-space: nowrap;
}

.dn-brand__logotype-slash {
    margin: 0 1px;
    font-weight: 400;
}

.dn-brand__divider {
    display: none;
    width: 1px;
    height: 34px;
    background: var(--dn-rule-subtle);
}

.dn-brand__tagline {
    display: none;
    font-family: var(--dn-font-mono);
    font-size: 10px;
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--dn-text-secondary);
    max-width: 10em;
}

@media (min-width: 1040px) {
    .dn-brand__divider,
    .dn-brand__tagline {
        display: block;
    }
}

.dn-masthead__nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5, 24px);
    margin-right: auto;
    font-family: var(--dn-font-body);
    font-size: 13px;
    line-height: 1.25;
    min-width: 0;
}

.dn-masthead__nav a {
    color: var(--dn-text-primary);
    white-space: nowrap;
}

.dn-masthead__nav a:hover {
    color: var(--dn-accent-primary);
}

/* Prompt 1495.1: current-page marker for a nav destination that is itself a
 * page (currently "О редакции" on the newsroom); Topic links never carry
 * aria-current, so their treatment is unchanged. Matches the approved
 * about_us reference: the active item keeps its ink color and gains the
 * accent underline. */
.dn-masthead__nav a[aria-current="page"] {
    box-shadow: 0 2px 0 var(--dn-accent-primary);
    padding-bottom: 6px;
}

.dn-masthead__search {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    margin-left: 2px;
    padding-left: 20px;
    border-left: 1px solid var(--dn-rule-subtle);
}

.dn-masthead__search button {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--dn-text-primary);
    font-size: 16px;
    cursor: pointer;
}

.dn-masthead__search button:hover {
    color: var(--dn-accent-primary);
}

.dn-masthead__search input[type="search"] {
    width: 92px;
    border: 0;
    border-bottom: 1px solid transparent;
    background: transparent;
    color: var(--dn-text-primary);
    font-family: var(--dn-font-body);
    font-size: 13px;
    padding: 2px 0;
    transition: border-color 0.15s ease;
}

.dn-masthead__search input[type="search"]:focus {
    outline: none;
    border-bottom-color: var(--dn-rule-subtle);
}

.dn-masthead__search input[type="search"]::placeholder {
    color: var(--dn-text-secondary);
}

.dn-masthead__utilities {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    flex: 0 0 auto;
}

.dn-masthead__lang {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: var(--space-3, 12px);
    border-left: 1px solid var(--dn-rule-subtle);
}

.dn-masthead__lang button {
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--dn-text-primary);
    font-family: var(--dn-font-mono);
    font-size: 12px;
    cursor: pointer;
}

.dn-masthead__lang button[aria-current="true"] {
    font-weight: 700;
}

.dn-masthead__lang button:hover {
    color: var(--dn-accent-primary);
}

.dn-masthead__lang span {
    color: var(--dn-rule-subtle);
}

/* --- Utility dropdown (Prompt 1467): guest/account menu behind the burger ---
 * Replaces the former permanently-visible `.dn-masthead__account` row (this
 * masthead never included the shared includes/auth_nav.html partial -- its
 * two-row "primary"/"actions" markup, plus its own always-present "News" link
 * duplicating "Latest" above, produced an app-header look). The same real
 * login/register/profile/admin/logout URLs and forms now render inside this
 * collapsed panel instead (components/utility_menu.html) -- only WHERE they
 * render moved, freeing the row for identity/nav/search/locale per the
 * approved reference's information priority (design/news.doutlab/
 * header_dropdown_menu.png). The shared includes/auth_nav.html partial itself
 * is untouched and keeps serving accounts pages and any other surface that
 * includes it. */
.dn-utility-menu {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: var(--space-3, 12px);
    border-left: 1px solid var(--dn-rule-subtle);
}

.dn-utility-menu__trigger {
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0;
    color: var(--dn-text-primary);
    font-size: 20px;
    cursor: pointer;
}

.dn-utility-menu__trigger:hover,
.dn-utility-menu__trigger[aria-expanded="true"] {
    color: var(--dn-accent-primary);
}

/* Anchored to the trigger, right-aligned to the utility area's own right edge
 * (never full-width/full-screen -- a desktop popover, not a mobile drawer).
 * Warm paper background (the same page-surface token every editorial panel on
 * this site uses), a thin hairline border, restrained corners, and a soft
 * elevation shadow -- never a SaaS-pill or a filled/dark account panel. */
.dn-utility-menu__panel {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 20;
    width: 220px;
    padding: var(--space-4, 16px);
    background: var(--dn-surface-page);
    border: 1px solid var(--dn-rule-subtle);
    border-radius: 2px;
    box-shadow: 0 12px 24px -12px rgba(18, 20, 26, 0.28);
}

.dn-utility-menu__heading {
    margin: 0 0 var(--space-3, 12px);
    font-family: var(--dn-font-mono);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--dn-text-secondary);
}

.dn-utility-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    width: 100%;
    padding: 8px 0;
    border: 0;
    background: none;
    font-family: var(--dn-font-body);
    font-size: 14px;
    color: var(--dn-text-primary);
    text-align: left;
    cursor: pointer;
}

.dn-utility-menu__item:hover {
    color: var(--dn-accent-primary);
}

/* Separates the destructive/session action (Logout) from navigation items,
 * per the approved reference's grouping. */
.dn-utility-menu__divider {
    height: 1px;
    margin: var(--space-2, 8px) 0;
    background: var(--dn-rule-subtle);
}

/* --- Footer: same publication language as the masthead ------------------ */

.dn-footer {
    border-top: 1px solid var(--dn-rule-subtle);
    background: var(--dn-surface-page);
}

/* Same reasoning as the masthead's own reset above -- color alone does not
 * remove the browser's default link underline. */
.dn-footer a {
    text-decoration: none;
}

.dn-footer__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    padding: var(--space-5, 24px) 0;
}

.dn-footer__brand {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-3, 12px);
}

.dn-footer__utilities,
.dn-footer__lang {
    display: flex;
    align-items: center;
}

.dn-footer__utilities {
    gap: var(--space-5, 24px);
}

.dn-footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4, 16px);
    font-family: var(--dn-font-body);
    font-size: 13px;
    line-height: 1.25;
}

.dn-footer__lang {
    gap: 6px;
    padding-left: var(--space-5, 24px);
    border-left: 1px solid var(--dn-rule-subtle);
    font-family: var(--dn-font-mono);
    font-size: 12px;
}

.dn-footer__lang button {
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--dn-text-secondary);
    font: inherit;
    cursor: pointer;
}

.dn-footer__lang button[aria-current="true"] {
    color: var(--dn-text-primary);
    font-weight: 700;
}

.dn-footer__lang span {
    color: var(--dn-rule-subtle);
}

.dn-footer__links a {
    color: var(--dn-text-secondary);
}

.dn-footer__links a:hover {
    color: var(--dn-accent-primary);
}

/* =========================================================================
 * 4. Shared responsive behavior
 * ========================================================================= */

@media (max-width: 1080px) {
    .dn-masthead__row {
        gap: var(--space-4, 16px);
    }

    .dn-masthead__nav {
        gap: var(--space-4, 16px);
    }
}

/* Prompt 1471: the "Reusable Widgets / Horizontal Slider" section Prompt 1470
 * added here was removed -- a widget is now fully self-contained (HTML + CSS
 * + JS, all requested by its own widget.html), so its rules moved to
 * static/news_frontend/presentations/desktop/default/css/widgets/
 * horizontal-slider.css, loaded ONLY when a page actually declares
 * `{% widget "horizontal_slider" ... %}`. common.css no longer carries any
 * per-widget rules -- see this file's own header comment. */