/* A post's page and Compare (Phase 5, M12; D113, D114): a reel's page and a
   Threads post's, the posts compared, and what both share, named for a
   post, so a later platform's post takes the same parts. Built from the
   admin's own components (.card, .table, .btn, the page head's page-*, the
   menus, the analytics' drawings and definitions); what only these pages
   need is here. The agreed mocks are docs/mockups/post-page.html and
   docs/mockups/threads-screens.html; Phase 5's M12.11 and M12.24 say which
   admin part stands for each of their parts.

   The classes:

     .post-age-aside     what an age of the age's menu waits for, on its
                         right: "25 Oct, 19:41", "2 of 3", "Not yet"
                         (partials/posts/age-menu)
     .post-drawing and its parts
                         a fact's small drawing (FactDrawing): a box in the
                         ghost's fill, its shapes in the ghost line
                         (.post-drawing-base, -groove, -hole, -ring), the
                         value's part in the muted ink (-mark, -ask), the
                         post's weekday lighter (-day) [D77, D113, 6]
     .post-fact-link, .post-fact-group, .post-fact-quiet
                         a fact's value as a way to every post that shares
                         it, the length's group in the quiet grey, and the
                         dot between (partials/posts/fact)
     .post-caption, .post-caption-text
                         a caption on one line, cut with an ellipsis, a
                         button that opens all of it, its line breaks kept,
                         in a wide .an-def under it (M12.5, M12.7)
     .post-picture, .post-picture-none
                         a Threads post's first picture at 4 by 5, the
                         width of a reel's cover (.rl-cover-sm or -md), on
                         the ghost grey with its text's start where it has
                         none (.is-blank), or its place kept empty
                         (partials/posts/picture, M12.17), a box of 4 by 5
                         only as a box that chooses it to compare
                         (.rl-pick) or in the compare tray; and
                         .acc-ghost-posts, a Threads account's row of posts
                         as ghosts of 4 by 5

   Black, white and grey from the tokens; colour only where M12 says so:
   Compare's posts each in their tone, on their key, line and ring alone
   (D113, 6). Nothing moves. */

/* ------------------------------------------------------------------------
   What both share: the age's menu, a fact's drawing and value, a caption
   ------------------------------------------------------------------------ */

.post-age-aside {
    flex: none;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
}

.post-drawing {
    display: grid;
    flex: none;
    place-items: center;
    width: 48px;
    height: 40px;
    border-radius: 10px;
    background: var(--color-ghost);
}

.post-drawing svg {
    display: block;
    overflow: visible;
}

.post-drawing-base {
    fill: var(--color-ghost-line);
}

.post-drawing-day {
    fill: var(--color-chart-prev);
    fill-opacity: 0.55;
}

.post-drawing-groove {
    fill: none;
    stroke: var(--color-ghost);
    stroke-width: 0.9;
}

.post-drawing-hole,
.post-drawing-ring {
    fill: var(--color-ghost);
}

.post-drawing-mark {
    fill: var(--color-text-muted);
}

.post-drawing-ask {
    fill: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 700;
}

/* A group as a way to every post that shares it: the value's colour, ink
   and underlined on hover alone. */
.post-fact-link {
    color: inherit;
    text-decoration: none;
}

.post-fact-quiet,
.post-fact-group {
    color: var(--color-text-subtle);
}

@media (hover: hover) {
    .post-fact-link:hover {
        color: var(--color-text);
        text-decoration: underline;
        text-decoration-color: var(--color-text-subtle);
        text-underline-offset: 3px;
    }
}

.post-caption {
    display: block;
    max-width: 100%;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: default;
}

.post-caption-text {
    color: var(--color-text);
    white-space: pre-line;
}

/* A Threads post's first picture, 4 by 5 at a reel's cover's width; a text
   post's start on the ghost grey where a row asks for it; or nothing, its
   place kept, so the texts beside stay in line (M12.17). */
.rl-cover.post-picture {
    aspect-ratio: 4 / 5;
}

.rl-cover.post-picture.is-blank {
    background: var(--color-ghost);
}

.post-picture-none {
    display: block;
    flex: none;
    width: 30px;
}

/* The empty place stays nothing but where it is a box: a text post's box
   that chooses it to compare on the Threads tab (.rl-pick) and its tile in
   the compare tray take the picture's 4 by 5 and its hairline ring, so the
   box and its check mark show; the tray's at its covers' 22 pixels, a box
   of the ghost grey, so a chosen text post shows among the covers. */
.rl-pick .post-picture-none,
.rl-compare-cover .post-picture-none {
    aspect-ratio: 4 / 5;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px var(--color-cover-ring);
}

.rl-compare-cover .post-picture-none {
    width: 22px;
    background: var(--color-ghost);
    box-shadow: inset 0 0 0 1px var(--color-ghost-line), 0 0 0 2px var(--color-surface-raised);
}

/* A Threads account's row of posts on its numbers page waits in ghosts of
   its pictures' 4 by 5, not a reel's 9 by 16 (M12.22). */
.acc-ghost-posts .ghost-cover-frame {
    aspect-ratio: 4 / 5;
}

/* ------------------------------------------------------------------------
   A post's page (M12.2 to M12.7)
   ------------------------------------------------------------------------ */

/* analytics/post: the head of the page-* classes, the poster beside one
   card of how it does, About and More, every width the page's own (the
   container post), so the record panel's 880 pixels lay it out as a page
   of that width (D76):

     .post               the page, the container of its queries
     .post-head, .post-head-main, .post-head-cover, .post-head-text,
     .post-title-end, .post-head-item, .post-head-note
                         the head: the title, three lines at most, its last
                         character and its mark after it in one piece
                         (.post-title-end), beside the post's small picture
                         and over a reel's counts under 720 pixels; a part
                         of the context line; the line under a Compare
                         refused for a fifth
     .post-top, .post-side
                         two columns of one height from 720 pixels, the
                         post on the left (204 pixels, 220 from 1040);
                         .has-lanes-1 and -2 with lanes under the chart
     .post-poster, .post-poster-mark
                         the poster, a link to Instagram, and its mark on
                         hover and keyboard focus
     .post-counts, .post-engagement
                         Instagram's counts as last read, the engagement a
                         button that opens its definition (M12.3, M12.7)
     .post-perf, .post-perf-head, .post-figures, .post-figure (.is-main),
     .post-figure-label, .post-figure-value, .post-vs
                         the card: its figures and the age's menu, Plays
                         large with vs usual under it (the container
                         post-perf)
     .post-chart-bar, .post-chart
                         the chart's legend and its + (#post-chart-add, the
                         tab's .rl-chart-add), and "Plays over time" filling
                         the card's height, sideways where it is narrower
     .post-about, .post-facts, .post-fact
                         About: each fact's drawing beside its label and
                         its value
     .post-more, .post-more-row, .post-more-chevron, .post-more-body
                         More's folded rows, their tables to the card's
                         edges */

.post {
    container: post / inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.post-head {
    margin-bottom: var(--space-1);
}

.post-head-main {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-width: 0;
}

.post-head-text {
    min-width: 0;
}

/* The title opens the post on its platform; a small mark after its last
   word, ink on hover. */
.post-head .page-title a,
.post-head .page-context a {
    color: inherit;
}

/* At most three lines, cut with an ellipsis at every width: the link is an
   inline box clamped to three lines, its words and the mark inline in it,
   the last character and the mark one piece that never breaks, so the mark
   follows the last word also where the title wraps and never stands alone
   on a line, while a long last word, an address, still breaks before them;
   where the title is cut, the mark goes with the cut words (M12.18). The
   whole text stays in About's popover or the post's card. */
.post-head .page-title a {
    display: -webkit-box;
    overflow: hidden;
    text-decoration: none;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.post-title-end {
    white-space: nowrap;
}

/* Each part of the context line in one piece, its dot kept with the part
   before it, so a wrapped line starts with a word. */
.post-head-item {
    white-space: nowrap;
}

.post-head .page-title .icon {
    display: inline-block;
    width: 0.55em;
    height: 0.55em;
    margin-left: 0.3em;
    vertical-align: baseline;
    color: var(--color-text-subtle);
}

@media (hover: hover) {
    .post-head .page-title a:hover .icon {
        color: var(--color-text);
    }
}

/* Under 720 pixels the cover (a Threads post's first picture) stands
   beside the title, small, and a reel's counts under its line; from 720
   both leave for the post's side. */
.post-head-cover {
    display: block;
    flex: none;
    width: 52px;
    margin-top: 4px;
}

.post-head-cover .rl-cover-cap {
    display: none;
}

.post-head .post-counts {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
}

.post-head-note {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

/* The note under a Compare refused, as the head's actions stand. */
@media (min-width: 640px) {
    .post-head .page-actions {
        flex-direction: column;
        align-items: flex-end;
    }
}

@container post (min-width: 720px) {
    .post-head-cover,
    .post-head .post-counts {
        display: none;
    }
}

/* On top: the card alone, then from 720 pixels the post and the card side
   by side, both as tall as the taller; nothing stays put while the page
   scrolls. */
.post-top {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.post-side {
    display: none;
}

@container post (min-width: 720px) {
    .post-top {
        display: grid;
        grid-template-columns: 204px minmax(0, 1fr);
        align-items: stretch;
    }

    .post-side {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        min-width: 0;
    }
}

@container post (min-width: 1040px) {
    .post-top {
        grid-template-columns: 220px minmax(0, 1fr);
    }
}

/* With lanes the main plot keeps its height and the card grows: the side
   grows by the lanes' height, less the time axis the last lane takes from
   the plot (18 pixels), as analytics.css draws them: a lane 104 pixels and
   8 above it, the last 122, each 8 more from a chart of 520 pixels, which
   the card's chart is from a page of 782 (204 + 16 + 2 + 40 + 520). */
@container post (min-width: 720px) {
    .post-top.has-lanes-1 .post-side {
        padding-bottom: 112px;
    }

    .post-top.has-lanes-2 .post-side {
        padding-bottom: 224px;
    }
}

@container post (min-width: 782px) {
    .post-top.has-lanes-1 .post-side {
        padding-bottom: 120px;
    }

    .post-top.has-lanes-2 .post-side {
        padding-bottom: 240px;
    }
}

/* The poster: the large cover's ring and shadow (.rl-cover-lg), its mark
   on the picture shown on hover and keyboard focus alone. */
.post-poster {
    position: relative;
    display: block;
    border-radius: 4px;
    color: inherit;
}

.post-poster-mark {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-picture-mark);
    color: var(--color-on-picture-mark);
    opacity: 0;
}

.post-poster-mark .icon {
    width: 14px;
    height: 14px;
}

@media (hover: hover) {
    .post-poster:hover .post-poster-mark {
        opacity: 1;
    }
}

.post-poster:focus-visible .post-poster-mark {
    opacity: 1;
}

/* Instagram's counts as last read: its icons in the muted grey, the
   figures in ink. */
.post-counts {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: 0;
    padding: 0 2px;
    list-style: none;
    line-height: 1.25;
}

.post-counts li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted);
}

.post-counts .icon {
    width: 18px;
    height: 18px;
}

.post-counts b {
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

.post-counts .is-hidden b {
    color: var(--color-text-subtle);
    font-weight: var(--weight-medium);
}

.post-engagement {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: -4px;
    padding: 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

@media (hover: hover) {
    .post-engagement:hover {
        color: var(--color-text);
    }
}

/* How it does: one card, its figures and the age's menu on top, the chart
   filling the rest of its height. */
.post-perf {
    container: post-perf / inline-size;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.post-perf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-5) 0;
}

.post-perf-head .rl-menu {
    flex: none;
}

/* Room for the day an age comes beside its name. */
.post-perf-head .rl-menu-list {
    width: 300px;
}

.post-figures {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-4) 0;
    min-width: 0;
    margin: 0;
}

.post-figure {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 0 var(--space-6);
    border-left: 1px solid var(--color-border);
}

.post-figure:first-child {
    padding-left: 0;
    border-left: 0;
}

.post-figure-label {
    display: flex;
    align-items: center;
    gap: 2px;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.post-figure-value {
    margin: 0;
    font-size: 24px;
    font-weight: var(--weight-semibold);
    letter-spacing: -0.02em;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.post-figure.is-main .post-figure-value {
    font-size: 32px;
    line-height: 1.1;
}

/* An incomplete estimate's triangle after its number, centred on it. */
.post-figure-value .an-inc {
    margin: 0 0 0 4px;
    vertical-align: middle;
}

.post-vs {
    margin: 4px 0 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    white-space: nowrap;
}

.post-vs .an-pill {
    padding: 1px 8px;
}

/* A narrower card, the record panel's: the age alone on the menu's
   button, named whole by its aria-label, and less room between figures. */
@container post-perf (max-width: 659.98px) {
    .post-perf-head .rl-tool-word {
        display: none;
    }

    .post-perf-head .rl-tool-age {
        display: inline-block;
    }

    .post-perf-head .rl-tool-age::first-letter {
        text-transform: uppercase;
    }

    .post-figure {
        padding: 0 var(--space-5);
    }
}

/* A phone's card: Plays on its own line, the two estimates side by side
   under it, the second after a line. */
@container post-perf (max-width: 539.98px) {
    .post-figures {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-4);
    }

    .post-figure.is-main {
        grid-column: 1 / -1;
    }

    .post-figure,
    .post-figure:first-child {
        padding: 0;
        border-left: 0;
    }

    .post-figure.is-main + .post-figure + .post-figure {
        padding-left: var(--space-4);
        border-left: 1px solid var(--color-border);
    }
}

.post-chart-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) 0;
}

.post-chart-bar .rl-chart-add {
    margin: -6px -6px -6px auto;
}

/* "Plays over time" fills the rest of the card's height, at least 236
   pixels; narrower than its minimum it slides sideways in the card. Its
   lanes keep their own heights under it. */
.post-chart {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 236px;
    padding: var(--space-2) var(--space-5) var(--space-4);
    overflow-x: auto;
    overflow-y: hidden;
}

.post-chart > .an-chart-frame {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 280px;
}

.post-chart .an-curve-chart {
    flex: 1 0 212px;
    height: auto;
    margin-top: 0;
}

/* With lanes the time axis leaves it for the last lane: 18 pixels less
   keep its plot as tall. */
.post-chart .an-curve-chart.has-lanes {
    flex-basis: 194px;
}

/* About: no title, the facts are the card; columns of at least 210 pixels
   that fill the line, each fact's drawing in a column of 48 beside its
   label and value, centred on them. */
.post-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--space-5) var(--space-6);
    margin: 0;
    padding: var(--space-5);
}

.post-fact {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    min-height: 40px;
    padding-left: 60px;
}

.post-fact .post-drawing {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.post-fact dt {
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

/* A value on one line, cut with an ellipsis, so the card keeps its height;
   4 pixels of room round it for a link's keyboard ring. */
.post-fact dd {
    min-width: 0;
    margin: -4px;
    padding: 4px;
    overflow: hidden;
    color: var(--color-text);
    font-size: var(--text-base);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* More: three folded rows, a line between them; inside a row its tables run
   to the card's edges, its paragraphs in the muted grey. */
.post-more-row + .post-more-row {
    border-top: 1px solid var(--color-border);
}

.post-more-row > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: 52px;
    padding: 0 var(--space-5);
    font-weight: var(--weight-medium);
    list-style: none;
    cursor: pointer;
}

.post-more-row > summary::-webkit-details-marker {
    display: none;
}

@media (hover: hover) {
    .post-more-row > summary:hover {
        background: var(--color-surface-muted);
    }
}

.post-more-chevron {
    flex: none;
    width: 18px;
    height: 18px;
    color: var(--color-text-subtle);
}

.post-more-row[open] .post-more-chevron {
    transform: rotate(180deg);
}

.post-more-body {
    padding: 0 var(--space-5) var(--space-5);
}

.post-more-body > p {
    max-width: 68ch;
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
}

.post-more-body > .table-wrap {
    margin-inline: calc(-1 * var(--space-5));
}

.post-more-body .table th:first-child,
.post-more-body .table td:first-child {
    padding-left: var(--space-5);
}

.post-more-body .table th:last-child,
.post-more-body .table td:last-child {
    padding-right: var(--space-5);
}

.post-more-body .table td {
    height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.post-more-body .table td.cell-primary {
    font-size: var(--text-base);
}

/* A hit's pill within its row's 40 pixels, as every other row. */
.post-more-body .table .an-pill {
    line-height: 1.25;
}

/* ------------------------------------------------------------------------
   A Threads post's page (M12.18; D114, 2)
   ------------------------------------------------------------------------ */

/* analytics/post with PostKind::thread(): the post's side is its card as
   Threads shows it (partials/posts/thread), wider than a reel's poster:

     .post-top.is-thread the two columns, the post 288 pixels (304 from
                         1040); under 720 pixels its card after the numbers
                         card, at its own height (the grid's order, never a
                         second copy)
     .post-side.has-pictures
                         a card with pictures takes the numbers card's
                         height (the side stretches and adds none of its
                         own, contain: size), its pictures what its text
                         leaves, so the chart keeps its own height; a text
                         post's card keeps its own
     .post-thread        the card, 16 pixels in, its parts 12 apart
     .post-thread-byline, .post-thread-name, .post-thread-day,
     .post-thread-open   its by-line: the handle, the day and time, and the
                         ghost button that opens it on Threads
     .post-thread-text   its text, its line breaks kept, cut after six
                         lines, a button that opens all of it (M12.7)
     .post-pictures, .post-pictures-1 to -4, .post-pictures-item,
     .post-pictures-more its pictures as Threads lays them out, "+3" over
                         the fourth of seven
     .post-thread-counts its counts across its foot (.post-counts) */

.post-top.is-thread .post-side {
    display: flex;
    flex-direction: column;
    order: 1;
}

@container post (min-width: 720px) {
    .post-top.is-thread {
        grid-template-columns: 288px minmax(0, 1fr);
    }

    .post-top.is-thread .post-side {
        order: 0;
        align-self: start;
        padding-bottom: 0;
    }

    .post-top.is-thread .post-side.has-pictures {
        align-self: stretch;
        contain: size;
    }

    .post-side.has-pictures .post-thread {
        min-height: 0;
        overflow: hidden;
    }

    .post-side.has-pictures .post-pictures {
        flex: 1 1 0;
        min-height: 96px;
        aspect-ratio: auto;
    }
}

@container post (min-width: 1040px) {
    .post-top.is-thread {
        grid-template-columns: 304px minmax(0, 1fr);
    }
}

.post-thread {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
    padding: var(--space-4);
}

.post-thread-byline {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    margin: -4px -6px -2px 0;
    font-size: var(--text-sm);
}

.post-thread-name {
    min-width: 0;
    overflow: hidden;
    color: var(--color-text);
    font-weight: var(--weight-semibold);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-thread-day {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.post-thread-open {
    flex: none;
    margin-left: auto;
    color: var(--color-text-subtle);
}

.post-thread-open .icon {
    width: 16px;
    height: 16px;
}

/* Its text as written, cut after six lines; all of it in the popover under
   it, on a tap, the keyboard or a resting mouse. */
.post-thread-text {
    display: -webkit-box;
    flex: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-text);
    font: inherit;
    font-size: 15px;
    line-height: 1.45;
    text-align: left;
    white-space: pre-line;
    overflow-wrap: anywhere;
    cursor: pointer;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    line-clamp: 6;
}

/* Its pictures: one 4 by 5, two side by side, one large beside two (three
   fifths and two fifths), four in a square; alone (a phone, a text that
   leaves them no room) they keep these proportions. */
.post-pictures {
    display: grid;
    gap: 4px;
    min-height: 0;
}

.post-pictures-1 {
    aspect-ratio: 4 / 5;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
}

.post-pictures-2 {
    aspect-ratio: 8 / 5;
    grid-template: minmax(0, 1fr) / repeat(2, minmax(0, 1fr));
}

.post-pictures-3 {
    aspect-ratio: 1;
    grid-template: repeat(2, minmax(0, 1fr)) / 3fr 2fr;
}

.post-pictures-3 .post-pictures-item:first-child {
    grid-row: span 2;
}

.post-pictures-4 {
    aspect-ratio: 1;
    grid-template: repeat(2, minmax(0, 1fr)) / repeat(2, minmax(0, 1fr));
}

.post-pictures-item {
    position: relative;
    display: block;
    min-height: 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--color-surface-muted);
    box-shadow: 0 0 0 1px var(--color-cover-ring);
}

.post-pictures-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.post-pictures-more {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: var(--color-picture-mark);
    color: var(--color-on-picture-mark);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
}

/* Its counts across its foot. */
.post-thread-counts {
    justify-content: space-between;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-1);
    font-size: var(--text-sm);
}

.post-thread-counts .icon {
    width: 16px;
    height: 16px;
}

/* ------------------------------------------------------------------------
   Compare (M12.9)
   ------------------------------------------------------------------------ */

/* analytics/compare, "Plays by age" (ReelCompareChart) and "Side by side",
   in the record panel (880 pixels) or as a page; every width is a
   container's, the chart's frame's or the card's:

     .post-series-1 to -4
                         a post's tone, in the order chosen: the chart's
                         blue, Add event's amber and green, then the violet,
                         as --post-series, on its key, its line and its ring
                         alone, never on a figure (D113, 6)
     .post-compare-key   its key, a line of 16 by 2.5 pixels: in the chart's
                         legend (.an-legend), its tooltip and its column's
                         head
     .post-compare-chart, .post-compare-line, .post-compare-end,
     .post-compare-ring  the chart, 260 pixels high, each post's solid line,
                         its point at its last read and its ring at the age
                         shown (AgeMarks::ring())
     .post-compare-card, .post-compare-wrap, .post-compare-table,
     .post-compare-cols-2 to -4, .post-compare-corner
                         Side by side's card, the container of its queries,
                         and its table, which fills the card: the names'
                         column fixed, the posts sharing the rest, each at
                         least as wide as two to four posts need, so on a
                         phone they slide sideways under the admin's sticky
                         first cell
     .post-compare-post, .post-compare-head, .post-compare-name,
     .post-compare-top, .post-compare-caption, .post-compare-handle,
     .post-compare-x     a post as a column's head: its cover or picture,
                         its key with its x on the right, and under them
                         its text and @account
     .post-compare-group a group's name, "Numbers at 3 h" and "About"
     .post-compare-label, .post-compare-cell, .post-compare-when
                         a row's name, a figure, and the day a "Not yet"
                         comes
     .post-compare-facts, .post-compare-fact, .post-compare-value
                         About's rows, a fact's drawing, in a smaller box,
                         and its value, which may wrap but for a caption */

.post-series-1 {
    --post-series: var(--color-chart-line);
}

.post-series-2 {
    --post-series: var(--color-event-status);
}

.post-series-3 {
    --post-series: var(--color-event-verification);
}

.post-series-4 {
    --post-series: var(--color-series-violet);
}

.post-compare-key {
    display: inline-block;
    flex: none;
    width: 16px;
    height: 2.5px;
    border-radius: 2px;
    background: var(--post-series);
}

.an-tip .post-compare-key {
    width: 12px;
}

.an-chart.post-compare-chart {
    height: 260px;
}

.post-compare-line {
    fill: none;
    stroke: var(--post-series);
    stroke-width: 2.25;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* The point at a post's last read: radius 3.5 in the surface's ring of 1.5
   (.an-dot-halo, 10 across). */
.post-compare-end,
.post-compare-ring {
    stroke: var(--post-series);
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.post-compare-end {
    stroke-width: 7;
}

/* The ring at the age shown: radius 4.5 and a stroke of 2.25, the tone 11.25
   across round the surface's 6.75. */
.post-compare-ring {
    stroke-width: 11.25;
}

.post-compare-chart .an-age-ring-hole {
    stroke-width: 6.75;
}

.post-compare-card {
    container: post-compare / inline-size;
}

.post-compare-card > .card-header {
    flex-wrap: nowrap;
    align-items: center;
}

.post-compare-wrap {
    margin-top: var(--space-3);
}

/* The table fills its card, so its rows' lines reach the card's edges: 132
   pixels for the figures' names, the posts sharing the rest, each at least
   216 pixels; in a card under 720 pixels 124 (so "Est. followers" keeps
   to one line) and 176. The first cell keeps the admin's stickiness and its
   surface, which covers what slides under it, but not its least width. */
.post-compare-table {
    table-layout: fixed;
}

.post-compare-cols-2 {
    min-width: calc(132px + 2 * 216px);
}

.post-compare-cols-3 {
    min-width: calc(132px + 3 * 216px);
}

.post-compare-cols-4 {
    min-width: calc(132px + 4 * 216px);
}

.post-compare-corner {
    width: 132px;
}

.table.post-compare-table th:first-child,
.table.post-compare-table td:first-child {
    min-width: 0;
}

@container post-compare (max-width: 719.98px) {
    .post-compare-cols-2 {
        min-width: calc(124px + 2 * 176px);
    }

    .post-compare-cols-3 {
        min-width: calc(124px + 3 * 176px);
    }

    .post-compare-cols-4 {
        min-width: calc(124px + 4 * 176px);
    }

    .post-compare-corner {
        width: 124px;
    }

    .post-compare-table .post-compare-head {
        gap: var(--space-2);
    }
}

/* A narrow card: the age's button says the age alone ("At 3 h"), as the
   Instagram tab's does; its aria-label names it whole. */
@container post-compare (max-width: 319.98px) {
    .post-compare-card .rl-tool-word {
        display: none;
    }

    .post-compare-card .rl-tool-age {
        display: inline-block;
    }

    .post-compare-card .rl-tool-age::first-letter {
        text-transform: uppercase;
    }
}

/* The posts as the columns' heads, without a line under them. */
.post-compare-table thead th {
    padding-top: 0;
    padding-bottom: var(--space-2);
    border-bottom: 0;
    color: var(--color-text);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
}

.post-compare-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.post-compare-name {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

/* The key and the x on one line of 12 pixels, the x's target reaching
   past it, so the caption and @account have the whole width beside the
   cover. */
.post-compare-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    height: 12px;
}

.post-compare-caption,
.post-compare-handle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.post-compare-caption {
    font-weight: var(--weight-medium);
    text-decoration: none;
}

@media (hover: hover) {
    .post-compare-caption:hover {
        text-decoration: underline;
        text-underline-offset: 2px;
    }
}

.post-compare-handle {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.post-compare-x {
    flex: none;
    margin: calc((12px - var(--control-height-sm)) / 2) -8px calc((12px - var(--control-height-sm)) / 2) 0;
    color: var(--color-text-subtle);
}

/* A group's name is no row of data: no line above it, 16 pixels above and
   8 below; the line of its first row opens its rows. It stays in place in
   the admin's first cell, its words running on over the empty rest. */
.table.post-compare-table .post-compare-group > * {
    height: auto;
    padding-top: var(--space-4);
    padding-bottom: var(--space-2);
    border: 0;
}

.table.post-compare-table tbody .post-compare-group td {
    background: none;
}

.post-compare-table tbody td {
    height: 44px;
}

.post-compare-label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.post-compare-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}

.post-compare-when {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

/* A hit's pill within the row's 44 pixels. */
.post-compare-cell .an-pill {
    line-height: var(--leading-tight);
}

/* A fact: its drawing in a box of 40 by 34, radius 8, the drawing 27 by 20,
   its value beside it, wrapping where the column is narrow, a date too; a
   caption stays on one line with its popover (.post-caption). */
.post-compare-fact {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.post-compare-fact .post-drawing {
    width: 40px;
    height: 34px;
    border-radius: 8px;
}

.post-compare-fact .post-drawing svg {
    width: 27px;
    height: 20px;
}

/* A fact's row keeps the rows' 44 pixels with a value on one line: the
   drawing's 34, the row's line above it and 9 around it. */
.post-compare-facts td {
    padding-top: 4px;
    padding-bottom: 5px;
}

.post-compare-value {
    min-width: 0;
    white-space: normal;
}

.post-compare-value time {
    white-space: normal;
}

/* ------------------------------------------------------------------------
   All reads (M12.8)
   ------------------------------------------------------------------------ */

/* partials/posts/reads: a .table with the admin's cells (.cell-num, a
   note's .cell-wrap), a read not counted in .an-none, "Show all" in .rl-more:

     .post-read-note     a row between the reads, across the counts, in the
                         muted grey; .is-gap a gap's, the post deleted's
                         and the account not found's, on the muted surface
                         (rule 28) */

.post-read-note td {
    color: var(--color-text-muted);
}

.post-read-note.is-gap td {
    background: var(--color-surface-muted);
}