/* Article metadata sidebar — auto-loaded for the article-meta snippet (site/snippets/article/article-meta.php) */

.article-meta {
    padding: var(--space-xs) var(--space-s);
    border-right: var(--border);
    font-size: var(--fs-body);
    --fa-serif: 0;

    /* Pin the sidebar in view while the reading column scrolls (mirrors the right
       author panel). Sticky, not fixed, so it keeps its grid track and the
       three-column layout holds; .article's `overflow-x: clip` is not a scroll
       container, so sticky still resolves. max-height + overflow-y lets a long TOC
       scroll on its own rather than overflowing the viewport. */
    position: sticky;
    top: var(--menubar-h);
    max-height: calc(100vh - var(--menubar-h));
    overflow-y: auto;
    overscroll-behavior: contain;

    /* Label column width, shared by every meta row (Figma: value starts ~133px). */
    --meta-label-col: 6.5rem;
}

.article-meta__back {
    font-size: var(--fs-heading);
    display: flex;
    align-items: baseline;
    gap: var(--space-xs);
    padding: 0 var(--space-s) var(--space-3xs);
    margin-inline: calc(-1 * var(--space-s));
    border-bottom: var(--border);
}
.article-meta__back:hover {
    text-decoration: none;
}
.article-meta__back .icon {
    width: 1.5rem;
    height: 1.5rem;
}

/* Table: rules run full-bleed to the panel edges (the table stretches into the
   aside's padding; the rows re-inset their content with matching padding). A
   solid rule closes the block; thin rules between the rows (Figma: border-b
   on block, thin rules between rows). */
.article-meta__table {
    margin-inline: calc(-1 * var(--space-s));
    border-bottom: var(--border);
}
/* A list item (ui/list-item) with the panel's padding, text size and gap; the
   vertical padding gives back half the optical shift, as in every list item.
   Qualified by the table so it wins over the list item's own rules. */
.article-meta__table .article-meta__row {
    gap: var(--space-xs);
    padding: calc(var(--space-xs) - var(--optical-shift) / 2) var(--space-s);
    font-size: inherit;
}
/* Term and definition side by side; the label takes the row's width up to the
   end part (the TITLE row's bookmark). */
.article-meta__row > .list-item__label {
    flex: 1;
    display: grid;
    grid-template-columns: var(--meta-label-col) 1fr;
    gap: var(--space-xs);
}

/* Terms: bold, full-strength ink, uppercase (Figma: Times New Arial Bold). */
.article-meta__key {
    --fa-weight: 100;
    text-transform: uppercase;
    /* A long term (ORIGINALSPRACHE) breaks with a hyphen in the narrow label
       column, by the page language's rules. */
    hyphens: auto;
}

/* Value links read as links (underlined), matching the AUTHOR row in Figma. */
.article-meta__value a {
    text-decoration: underline;
}
.article-meta__value a:hover {
    text-decoration: none;
}
/* The author whose panel is currently open reads as selected. */
.article-meta__value a.is-active {
    --fa-weight: 100;
    text-decoration: none;
}

/* TITLE row carries the bookmark toggle, in the row's end part. */
.article-meta__bookmark {
    flex: none;
    line-height: 0;
    color: var(--color-fg);
}
.article-meta__bookmark .bookmark__ico {
    /*width: 1rem;*/
}

/* height auto → ~20px, keeping the glyph's 12:16 ratio */
.article-meta__bookmark:hover {
    color: var(--color-muted);
}

.article-meta__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
}
/* .tag styles live in assets/css/ui/tag.snippet.css */

/* SHARE: the share control (ui/share) styles itself. */

/* The article navigation (Figma 312:12374): a dash and the text of each
   part, h3 and h4 stepped in by level; the current part's row (marked by
   article-meta.snippet.js) slants its text back like a content link and
   darkens its dash. */
.article-meta__nav {
    margin-top: var(--space-s);
}
.article-meta__nav-title {
    --fa-weight: 100;
    text-transform: uppercase;
    color: var(--color-fg);
    margin-bottom: calc(var(--article-nav-pitch) - 1lh);
}
.article-meta__nav-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--article-nav-pitch) - 1lh);
}
.article-meta__nav-item--h3 {
    padding-left: var(--article-nav-indent);
}
.article-meta__nav-item--h4 {
    padding-left: calc(2 * var(--article-nav-indent));
}
/* The dash hangs before the text, so a long row's later lines align with the
   text, not the dash; it sits at the middle of the first line's lowercase,
   which the font sets high in its line (--optical-shift). */
.article-meta__nav-link {
    position: relative;
    display: grid;
    padding-left: var(--article-nav-text-offset);
}
/* The text and its hidden copy in the current row's setting share the
   link's one cell, so a row is as tall as its bold, slanted text from the
   start and doesn't rewrap when it becomes current. */
.article-meta__nav-text,
.article-meta__nav-reserve {
    grid-area: 1 / 1;
}
.article-meta__nav-text {
    /* The current row's weight and slant ease in and out. */
    transition: font-variation-settings var(--type-duration);
}
.article-meta__nav-reserve {
    visibility: hidden;
    --fa-weight: 100;
    --fa-italic: var(--link-slant);
}
.article-meta__nav-link::before {
    content: "";
    position: absolute;
    left: 0;
    /* From the line's middle (0.5lh) up by one --optical-shift, for the
       glyphs sitting high in their line (what a centred label corrects for). */
    top: calc(0.5lh - var(--optical-shift));
    width: var(--article-nav-dash);
    border-top: var(--article-nav-dash-stroke) solid var(--color-faint);
}
.article-meta__nav-link:hover {
    text-decoration: none;
}
.article-meta__nav-link--current {
    --fa-weight: 100;
    --fa-italic: var(--link-slant);
}
@media (prefers-reduced-motion: reduce) {
    .article-meta__nav-text {
        transition: none;
    }
}
.article-meta__nav-link--current::before {
    border-top-color: var(--color-fg);
}

/* --- Mobile: the article info drawer (Figma 322:16151) --------------------- */
/* Fixed under the menubar, over the article, without a backdrop. It drops
   from under the bar (a stacking level just below it) a short way, not its
   whole height, fading as it comes — as the site menu and the author panel
   do — while the route has `open:info` (article-meta--open,
   article-view.snippet.js); closed, it is hidden once the slide has run, so
   its links leave the tab order. A tall one
   scrolls on its own and keeps its overscroll from the page, whose scroll
   would close it. */
@media (max-width: 60rem) {
    .article-meta {
        position: fixed;
        top: var(--menubar-h);
        inset-inline: 0;
        z-index: var(--z-drawer);
        max-height: calc(100dvh - var(--menubar-h));
        padding-block: 0;
        border-right: 0;
        background: var(--color-bar);
        transform: translateY(calc(-1 * var(--slide-nudge)));
        opacity: 0;
        visibility: hidden;
        transition:
            transform var(--slide-duration) var(--ease-panel),
            opacity var(--slide-duration) var(--ease-panel),
            visibility 0s linear var(--slide-duration);
    }
    .article-meta--open {
        transform: none;
        opacity: 1;
        visibility: visible;
        transition:
            transform var(--slide-duration) var(--ease-panel),
            opacity var(--slide-duration) var(--ease-panel);
    }
    /* The drawer stays short: no Back row and no article navigation. */
    .article-meta__back,
    .article-meta__nav {
        display: none;
    }
    /* The bookmark sits beside the article title instead (article-view). */
    .article-meta__bookmark {
        display: none;
    }
}
@media (max-width: 60rem) and (prefers-reduced-motion: reduce) {
    .article-meta,
    .article-meta--open {
        transition: none;
    }
}