/* Public metadata system: content is read as documentation metadata, never
   as a collection of dashboard pills. This file is deliberately loaded after
   theme assets so light and dark themes share the same semantics. */
body[data-theme-area="frontend"] :is(
    .chip,
    .soft-badge,
    .badge,
    .event-chip,
    .q-tag,
    .option-badge,
    .df-status,
    .contest-status,
    [class*="status-chip-"]
) {
    display: inline !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    letter-spacing: 0 !important;
}

body[data-theme-area="frontend"] :is(.chip, .soft-badge, .badge, .event-chip, .q-tag, .option-badge, [class*="status-chip-"]).success {
    color: var(--success-text, var(--accent, #2563eb)) !important;
}

body[data-theme-area="frontend"] :is(.chip, .soft-badge, .badge, .event-chip, .q-tag, .option-badge, [class*="status-chip-"]).warning {
    color: var(--warning-text, var(--ink-muted, #64748b)) !important;
}

body[data-theme-area="frontend"] :is(.chip, .soft-badge, .badge, .event-chip, .q-tag, .option-badge, [class*="status-chip-"]).danger {
    color: var(--danger-text, var(--ink-muted, #64748b)) !important;
}

body[data-theme-area="frontend"] :is(.chip, .soft-badge, .badge, .event-chip, .q-tag, .option-badge, [class*="status-chip-"]).muted {
    color: var(--ink-muted, #64748b) !important;
}

body[data-theme-area="frontend"] :is(.catalog-head, .comp-hero-chips, .package-row-meta, .meta-text-list) > :is(.chip, .soft-badge, .badge, .event-chip, .q-tag, .option-badge, [class*="status-chip-"]) + :is(.chip, .soft-badge, .badge, .event-chip, .q-tag, .option-badge, [class*="status-chip-"])::before {
    content: '·';
    margin: 0 8px;
    color: var(--border, #cbd5e1);
}

body[data-theme-area="frontend"] .meta-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 .55rem;
    color: var(--accent, #2563eb);
    font-size: .84rem;
    line-height: 1.5;
}

body[data-theme-area="frontend"] .meta-tag {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: none;
}

body[data-theme-area="frontend"] .meta-tag::before {
    content: '#';
}

body[data-theme-area="frontend"] .meta-tag + .meta-tag::before {
    margin-left: 0;
}

body[data-theme-area="frontend"] .meta-tag + .meta-tag::after {
    content: '';
}

body[data-theme-area="frontend"] .meta-tag:not(:last-child)::after {
    content: ', ';
    color: var(--ink-muted, #64748b);
}

body[data-theme-area="frontend"] a.meta-tag:hover {
    color: var(--link-hover, var(--accent, #2563eb));
    text-decoration: underline;
    text-underline-offset: 3px;
}

body[data-theme-area="frontend"] a.meta-tag:focus-visible {
    outline: 2px solid var(--accent, #2563eb);
    outline-offset: 2px;
}

body[data-theme-area="frontend"] .recommended-mark {
    display: inline;
    margin-left: 9px;
    color: var(--warning-text, var(--ink-muted, #64748b));
    font-size: .76rem;
    font-weight: 650;
    white-space: nowrap;
}

body[data-theme-area="frontend"] .df-entry-kicker {
    color: var(--ink-muted, var(--text-muted));
    font-size: .78rem;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
}

body[data-theme-area="frontend"] .package-row-meta,
body[data-theme-area="frontend"] .meta-text-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0 0 .55rem;
    color: var(--ink-muted, var(--text-muted));
    font-size: .84rem;
    line-height: 1.5;
}

body[data-theme-area="frontend"] .package-row-meta > span + span::before,
body[data-theme-area="frontend"] .meta-text-list > span + span::before {
    content: '·';
    margin: 0 .45rem;
    color: var(--border, #cbd5e1);
}

/* A parent surface owns the boundary. List rows only own spacing and one
   divider; no row gets an independent card, radius or elevation. */
body[data-theme-area="frontend"].route-challenges-index .package-archive,
body[data-theme-area="frontend"].route-contests-index .contest-archive,
body[data-theme-area="frontend"].route-calendar-index .df-cal-archive {
    display: block !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    background: var(--surface, var(--df-ui-panel, #fff)) !important;
    border: 1px solid var(--border, var(--df-ui-border, rgba(148, 163, 184, .22))) !important;
    border-radius: var(--radius-lg, var(--df-ui-radius, 12px)) !important;
    box-shadow: none !important;
}

body[data-theme-area="frontend"].route-downloads-index .resource-ledger,
body[data-theme-area="frontend"].route-wiki-index .wiki-index-list .catalog,
body[data-theme-area="frontend"].route-learning-paths-index .timeline-list {
    gap: 0 !important;
}

/* The same hierarchy applies to smaller public lists embedded in a surface:
   the panel owns the container; its records are rows, not miniature cards. */
body[data-theme-area="frontend"] :is(.surface, .surface-plain, .surface-muted, .df-panel) > :is(.catalog, .timeline-list, .feature-bands, .bulletin-list) {
    gap: 0 !important;
}

body[data-theme-area="frontend"] :is(.surface, .surface-plain, .surface-muted, .df-panel) > :is(.catalog, .timeline-list, .feature-bands, .bulletin-list) > :is(.catalog-line, .timeline-item, .feature-band, .bulletin-item) {
    margin: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-theme-area="frontend"] :is(.surface, .surface-plain, .surface-muted, .df-panel) > :is(.catalog, .timeline-list, .feature-bands, .bulletin-list) > :is(.catalog-line, .timeline-item, .feature-band, .bulletin-item) + :is(.catalog-line, .timeline-item, .feature-band, .bulletin-item) {
    border-top: 1px solid var(--border, rgba(148, 163, 184, .22)) !important;
}

body[data-theme-area="frontend"]:is(
    .route-home,
    .route-challenges-index,
    .route-contests-index,
    .route-downloads-index,
    .route-writeups-index,
    .route-tools-index,
    .route-wiki-index,
    .route-learning-tracks-index,
    .route-learning-paths-index,
    .route-announcements-index,
    .route-leaderboard-index,
    .route-search-index,
    .route-search-go
) :is(.query-bar, .query-bar-light, .compact-query-bar, .surface, .surface-plain, .surface-muted, .df-panel, .package-archive) {
    background: var(--surface, var(--df-ui-panel, #fff)) !important;
    border: 1px solid var(--border, var(--df-ui-border, rgba(148, 163, 184, .22))) !important;
    border-radius: var(--radius-lg, var(--df-ui-radius, 12px)) !important;
    box-shadow: none !important;
}

body[data-theme-area="frontend"]:is(
    .route-challenges-index,
    .route-contests-index,
    .route-downloads-index,
    .route-writeups-index,
    .route-tools-index,
    .route-wiki-index,
    .route-learning-tracks-index,
    .route-learning-paths-index,
    .route-announcements-index,
    .route-leaderboard-index,
    .route-search-index,
    .route-search-go
) :is(.query-bar, .package-archive) {
    overflow: hidden;
}

/* Theme files historically reintroduced elevation on the same rows. Keep the
   dark system on the exact Surface rule rather than letting route-specific
   legacy skins fork the hierarchy again. */
body.theme-dark[data-theme-area="frontend"]:is(
    .route-home,
    .route-challenges-index,
    .route-contests-index,
    .route-downloads-index,
    .route-writeups-index,
    .route-tools-index,
    .route-wiki-index,
    .route-learning-tracks-index,
    .route-learning-paths-index,
    .route-announcements-index,
    .route-leaderboard-index,
    .route-search-index,
    .route-search-go
) :is(.query-bar, .query-bar-light, .compact-query-bar, .surface, .surface-plain, .surface-muted, .df-panel, .package-archive) {
    background: var(--surface, var(--df-ui-panel, #141a26)) !important;
    border: 1px solid var(--border, var(--df-ui-border, rgba(148, 163, 184, .22))) !important;
    border-radius: var(--radius-lg, var(--df-ui-radius, 12px)) !important;
    box-shadow: none !important;
}

/* Search is a documentation index: query context, scope links and result
   metadata use typography and dividers instead of a second dashboard UI. */
body[data-theme-area="frontend"].route-search-go .search-result-meta {
    margin-bottom: 16px;
}

body[data-theme-area="frontend"].route-search-go :is(.search-term-row, .search-suggestion-row) {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
}

body[data-theme-area="frontend"].route-search-go .search-term-row {
    margin: 0;
    padding: 10px 0;
    border-top: 1px solid var(--border, rgba(148, 163, 184, .22));
    background: transparent;
}

body[data-theme-area="frontend"].route-search-go .search-term-row > span {
    margin-right: .65rem;
    color: var(--ink-muted, var(--text-muted));
    font-size: .84rem;
}

body[data-theme-area="frontend"].route-search-go .search-term-link {
    color: var(--link-color, var(--accent));
    font-size: .84rem;
    line-height: 1.55;
    text-decoration: none;
}

body[data-theme-area="frontend"].route-search-go .search-term-link:not(:last-child)::after {
    content: '，';
    color: var(--ink-muted, var(--text-muted));
}

body[data-theme-area="frontend"].route-search-go .search-term-link:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

body[data-theme-area="frontend"].route-search-go .search-term-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body[data-theme-area="frontend"] .search-recent-link {
    display: inline;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--link-color, var(--accent));
    font: inherit;
    cursor: pointer;
    text-decoration: none;
}

body[data-theme-area="frontend"] .search-recent-link:not(:last-child)::after {
    content: '，';
    color: var(--ink-muted, var(--text-muted));
}

body[data-theme-area="frontend"] .search-recent-link:hover,
body[data-theme-area="frontend"] .search-recent-link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* This is a quiet inline action, not a Bootstrap text button. Keeping its
   color on the shared link token makes light and dark themes identical in
   hierarchy and avoids the low-contrast `.text-secondary` dark override. */
body[data-theme-area="frontend"] .search-recent-clear {
    display: inline;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--link-color, var(--accent));
    font: inherit;
    font-weight: 600;
    line-height: inherit;
    cursor: pointer;
    text-decoration: none;
}

body[data-theme-area="frontend"] .search-recent-clear:hover,
body[data-theme-area="frontend"] .search-recent-clear:focus-visible {
    color: var(--link-hover, var(--accent));
    text-decoration: underline;
    text-underline-offset: 3px;
}

body[data-theme-area="frontend"] .search-recent-clear:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body[data-theme-area="frontend"].route-search-go .search-breakdown {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 6px 0 0;
    padding: 12px 0;
    border-top: 1px solid var(--border, rgba(148, 163, 184, .22));
    border-bottom: 1px solid var(--border, rgba(148, 163, 184, .22));
    background: transparent;
}

body[data-theme-area="frontend"].route-search-go .search-breakdown-item {
    display: inline-flex;
    align-items: baseline;
    gap: .38rem;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--ink-muted, var(--text-muted));
    font-size: .86rem;
    text-decoration: none;
}

body[data-theme-area="frontend"].route-search-go .search-breakdown-item + .search-breakdown-item::before {
    content: '·';
    margin: 0 .65rem;
    color: var(--border, rgba(148, 163, 184, .22));
}

body[data-theme-area="frontend"].route-search-go .search-breakdown-item strong {
    color: inherit;
    font-size: inherit;
    font-weight: 500;
}

body[data-theme-area="frontend"].route-search-go .search-breakdown-item.active {
    color: var(--link-color, var(--accent));
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}

body[data-theme-area="frontend"].route-search-go .search-breakdown-item.is-empty {
    opacity: .58;
}

body.theme-dark[data-theme-area="frontend"].route-search-go .search-breakdown-item,
body.theme-dark[data-theme-area="frontend"].route-search-go .search-breakdown-item.active,
body.theme-dark[data-theme-area="frontend"].route-search-go .search-breakdown-item.is-empty {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-theme-area="frontend"].route-search-go .search-result-guidance {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--border, rgba(148, 163, 184, .22));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

body[data-theme-area="frontend"].route-search-go .search-results .catalog-side.meta-text-list {
    display: flex;
    justify-content: flex-end;
    margin: 0;
    color: var(--ink-muted, var(--text-muted));
    font-size: .8rem;
}

@media (max-width: 640px) {
    body[data-theme-area="frontend"].route-search-go .search-result-guidance {
        display: block;
    }

    body[data-theme-area="frontend"].route-search-go .search-result-guidance-actions {
        margin-top: 12px;
    }

    body[data-theme-area="frontend"].route-search-go .search-results .catalog-side.meta-text-list {
        justify-content: flex-start;
        margin-top: 8px;
    }
}

/* Community is a first-class public module. Give its document canvas the
   same token-backed background as the rest of the public reading surfaces. */
body[data-theme-area="frontend"]:is(
    .route-community-index,
    .route-contributors-index,
    .route-contributions-home,
    .route-contributions-index,
    .route-contributions-create
) .dfb-page {
    min-height: 100vh;
    background: var(--surface, #fff) !important;
}

/* On phones, the terminal is the homepage's first recognisable element.
   The desktop brand copy is intentionally removed rather than competing with
   the terminal and the search task in a narrow column. */
@media (max-width: 720px) {
    body[data-theme-area="frontend"].route-home .df-hero-visual {
        order: -1;
        width: 100%;
        justify-self: stretch;
    }

    body[data-theme-area="frontend"].route-home :is(.df-hero-tag, .df-hero-title, .df-hero-lead) {
        display: none !important;
    }
}

/* The mobile header is one surface. Its expanded navigation and actions must
   inherit dark tokens instead of falling back to the light system stylesheet. */
@media (max-width: 768px) {
    body.theme-dark[data-theme-area="frontend"] .dfb-header.is-open :is(.dfb-nav, .dfb-header-actions) {
        background: var(--surface, #141a26) !important;
        border-color: var(--border, rgba(148, 163, 184, .24)) !important;
        color: var(--ink, #e5e7eb) !important;
    }

    body.theme-dark[data-theme-area="frontend"] .dfb-header.is-open .dfb-nav-link {
        background: transparent !important;
        color: var(--ink, #e5e7eb) !important;
    }

    body.theme-dark[data-theme-area="frontend"] .dfb-header.is-open .dfb-header-actions :is(.btn, .dfb-theme-switcher-toggle) {
        background-color: var(--surface-alt, rgba(148, 163, 184, .08)) !important;
        border-color: var(--border, rgba(148, 163, 184, .24)) !important;
        color: var(--ink, #e5e7eb) !important;
    }
}

body.theme-dark[data-theme-area="frontend"] .dfb-footer {
    background: var(--surface, #141a26) !important;
    border-top-color: var(--border, rgba(148, 163, 184, .24)) !important;
    color: var(--ink-muted, #aab4c5) !important;
}

body.theme-dark[data-theme-area="frontend"] .dfb-footer :is(h2, h3, strong, a) {
    color: var(--ink, #e5e7eb);
}

body.theme-dark[data-theme-area="frontend"] .dfb-footer :is(.dfb-footer-contact-card, .dfb-footer-partner-item, .dfb-record-item) {
    background: var(--surface-alt, rgba(148, 163, 184, .08)) !important;
    border-color: var(--border, rgba(148, 163, 184, .24)) !important;
}

/* Contest rows are siblings in one archive surface. Theme compatibility
   layers may add spacing back, so this final route rule remains explicit. */
body[data-theme-area="frontend"].route-contests-index .contest-archive > .contest-package-line + .contest-package-line {
    margin-top: 0 !important;
}

body[data-theme-area="frontend"].route-challenges-index .package-line,
body[data-theme-area="frontend"].route-contests-index .contest-package-line,
body[data-theme-area="frontend"].route-downloads-index .resource-ledger > .catalog-line,
body[data-theme-area="frontend"].route-wiki-index .wiki-index-list .catalog-line,
body[data-theme-area="frontend"].route-learning-paths-index .timeline-list > .timeline-item,
body[data-theme-area="frontend"].route-calendar-index .df-cal-archive > .df-cal-line {
    margin: 0 !important;
    padding: 20px 24px !important;
    border: 0 !important;
    border-top: 1px solid var(--border, rgba(148, 163, 184, .22)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-theme-area="frontend"].route-challenges-index .package-line:first-child,
body[data-theme-area="frontend"].route-contests-index .contest-package-line:first-child,
body[data-theme-area="frontend"].route-downloads-index .resource-ledger > .catalog-line:first-child,
body[data-theme-area="frontend"].route-wiki-index .wiki-index-list .catalog-line:first-child,
body[data-theme-area="frontend"].route-learning-paths-index .timeline-list > .timeline-item:first-child,
body[data-theme-area="frontend"].route-calendar-index .df-cal-archive > .df-cal-line:first-child {
    border-top: 0 !important;
}

@media (hover: hover) and (pointer: fine) {
    body[data-theme-area="frontend"].route-challenges-index .package-line:hover,
    body[data-theme-area="frontend"].route-contests-index .contest-package-line:hover,
    body[data-theme-area="frontend"].route-downloads-index .resource-ledger > .catalog-line:hover,
    body[data-theme-area="frontend"].route-wiki-index .wiki-index-list .catalog-line:hover,
    body[data-theme-area="frontend"].route-learning-paths-index .timeline-list > .timeline-item:hover,
    body[data-theme-area="frontend"].route-calendar-index .df-cal-archive > .df-cal-line:hover {
        background: var(--surface-alt, rgba(15, 23, 42, .025)) !important;
    }
}

body[data-theme-area="frontend"].route-downloads-index .resource-list-surface,
body[data-theme-area="frontend"].route-wiki-index .wiki-index-list,
body[data-theme-area="frontend"].route-learning-paths-index .learning-path-list-surface {
    padding: 0 !important;
    overflow: hidden;
    box-shadow: none !important;
}

/* Learning routes use the same archive rule: the route list owns the
   boundary, while each route is a readable row with one progress action. */
body[data-theme-area="frontend"].route-learning-tracks-index .learning-track-archive.package-archive {
    padding: 0 !important;
    overflow: hidden;
    border: 1px solid var(--border, rgba(148, 163, 184, .22)) !important;
    border-radius: var(--radius-lg, 12px) !important;
    background: var(--surface, #fff) !important;
    box-shadow: none !important;
}

body[data-theme-area="frontend"].route-learning-tracks-index .learning-track-row.package-line {
    margin: 0 !important;
    padding: 24px !important;
    border: 0 !important;
    border-top: 1px solid var(--border, rgba(148, 163, 184, .22)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body[data-theme-area="frontend"].route-learning-tracks-index .learning-track-row.package-line:first-child {
    border-top: 0 !important;
}

body[data-theme-area="frontend"].route-learning-tracks-index .learning-track-row .package-line-aside {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

/* The legacy dark theme raises each route row as a second panel. The archive
   remains the only surface; route rows are separated with a divider. */
body.theme-dark-new.theme-dark[data-theme-area="frontend"].route-learning-tracks-index .learning-track-row.package-line,
body.theme-dark[data-theme-area="frontend"].route-learning-tracks-index .learning-track-row.package-line {
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--border, rgba(148, 163, 184, .2)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.theme-dark-new.theme-dark[data-theme-area="frontend"].route-learning-tracks-index .learning-track-row.package-line:first-child,
body.theme-dark[data-theme-area="frontend"].route-learning-tracks-index .learning-track-row.package-line:first-child {
    border-top: 0 !important;
}

@media (max-width: 640px) {
    body[data-theme-area="frontend"].route-learning-tracks-index .learning-track-row.package-line {
        padding: 18px 16px !important;
    }
}

@media (max-width: 640px) {
    body[data-theme-area="frontend"].route-challenges-index .package-line,
    body[data-theme-area="frontend"].route-contests-index .contest-package-line,
    body[data-theme-area="frontend"].route-downloads-index .resource-ledger > .catalog-line,
    body[data-theme-area="frontend"].route-wiki-index .wiki-index-list .catalog-line,
    body[data-theme-area="frontend"].route-learning-paths-index .timeline-list > .timeline-item,
    body[data-theme-area="frontend"].route-calendar-index .df-cal-archive > .df-cal-line {
        padding: 18px 16px !important;
    }
}