/* The pages of the reels in the Analytics area: a reel's cover, the
   Instagram tab (its list, its condition window and What works), the top
   of IG Competitors' reel page (a post's page is posts.css', D113), and
   the Reels and Instagram sections of an account's numbers. The
   drawings themselves are analytics.css's (View\Charts), but the bars of
   What works; Compare's chart and table are a post's, posts.css's (M12.9),
   but the best of a row. [Phase 5, sections 9.2, 9.3
   and 9.5, M6 and D101; the mock's .rl-*, .th, .reel-*, .rrow, .minis and
   .add-reel, and the Instagram tab's mock's .rx-*]

   The classes:

     .rl-cover           a reel's cover, 9 by 16, nearly square corners, no
                         frame, a hairline ring and a soft shadow (D101, 4):
                         -sm in a table, -md in an account's row and a
                         post's head, -lg on a reel's page and a post's
                         poster, a little more lifted; .is-blank the neutral
                         tile with .rl-cover-cap, the caption's start, where
                         no cover was kept; .is-deleted fainter;
                         .rl-cover-mark a pin, link or bin in the corner;
                         .rl-cover-ext the external-link mark on the page
     .rl-card            the list's card, the container of its queries;
                         .is-picking while reels are chosen to compare
     .rl-top, .rl-tools, .rl-tool, .rl-tool-word, .rl-tool-age,
     .rl-tool-columns    its title with .card-count, and "Numbers now" and
                         Columns, two small buttons of one size
     .rl-menu, .rl-menu-list, .rl-menu-title, .rl-menu-note
                         the menus of the list and of What works, a
                         <details> with a .menu (data-row-menu), its groups'
                         names and its one line on why
     .rl-bar, .rl-views, .rl-view, .rl-add, .rl-views-rule
                         the views as pills, the thin rule, "+ Condition"
     .rl-chips, .rl-chip, .rl-chip-text, .rl-chip-x, .rl-and
                         the conditions as chips, "and" between them
     .rl-table, .rl-head, .rl-own, .rl-reel, .rl-text, .rl-caption,
     .rl-when, .rl-when-short, .rl-sound
                         the table: a head with its (i), a condition's own
                         column tinted, the reel's cell (cover, caption on
                         one line, two on a phone, and its line; a Threads
                         post's text two lines at every width,
                         .rl-text.is-wrapping), a sound
     .rl-typical, .rl-typical-name
                         the typical rows (.is-all the second, grey)
     .rl-pick, .rl-pick-mark
                         a cover as the box that chooses it to compare
                         (.is-chosen)
     .rl-more            "Show 15 more"
     .rl-hits            the hits beside New reels' figure
     .rl-ghost, .rl-ghost-cover, .rl-ghost-nums
                         the list's ghost: four rows as the real ones
                         stand, a cover, a name and its line, the figures
                         (one on a phone) [D77]
     .rl-compare, .rl-compare-covers, .rl-compare-cover, .rl-compare-text,
     .rl-compare-full    the bar at the bottom of the screen while reels are
                         chosen
     .rl-best            the best of a row of Compare's Side by side, whose
                         other parts are a post's (posts.css, M12.9)
     .rl-cond, .rl-cond-list, .rl-cond-open, .rl-cond-x, .rl-cond-set,
     .rl-cond-is, .rl-cond-caption, .rl-cond-values, .rl-cond-to,
     .rl-cond-and, .rl-cond-words, .rl-value, .rl-value-input, .rl-unit,
     .rl-fold, .rl-fold-text, .rl-fold-x, .rl-join
                         the condition window: its conditions folded so far
                         as soft boxes with their x, "and" between them, the
                         open one, its values with their units, From and To
                         while Between is chosen, and the words but for a
                         question; its segmented choices are every
                         window's (.segmented, D108)
     .rl-chart-card, .rl-chart-head, .rl-chart-tools, .rl-chart-add
                         the chart's card and its head: the title, the
                         legend and the + beside it (D106)
     .rl-works, .rl-works-head, .rl-works-tools, .rl-split, .rl-w,
     .rl-w-scale, .rl-w-scale-track, .rl-w-list, .rl-w-row, .rl-w-name,
     .rl-w-label, .rl-w-sub, .rl-w-track, .rl-w-fill, .rl-w-line,
     .rl-w-value, .rl-w-left, .rl-w-ghost
                         What works: its head, the line's name above the
                         bars, a group's row, its bar (.is-up, .is-down,
                         .is-neutral) against the dashed line, its figure,
                         the quiet line of the groups left out (D106); the
                         groups' ghost
     .an-account-name, .an-word
                         the Accounts tab's handle and its quiet word
                         (.is-danger for Not found)
     .reel-head, .reel-thumb, .reel-intro, .reel-caption, .reel-ext,
     .reel-meta, .reel-counts, .reel-explain
                         the top of a reel's page of IG Competitors and the
                         sentence under its chart (a post's page of the
                         Analytics area is posts.css', D113)
     .acc-reels, .acc-reel, .acc-reel-plays, .acc-reel-wait
                         an account's reels in one row that scrolls sideways;
                         .acc-ghost-covers the row's ghost in its room [D77]
     .acc-add, .acc-add-text, .acc-add-title, .acc-add-field
                         "Add a reel by link"
     .acc-minis, .acc-sub, .acc-drop
                         the Instagram section's two small figures, the
                         chart's heading (and its ghost under it before the
                         first read), the reach drop
     .acc-section, .acc-section-title
                         the Link page section, which holds cards of its own

   Black, white and grey from the tokens; colour only where it means
   something (D101): vs usual's and the typical rows' green and red, and
   What works' bars, which share their figure's colour. Nothing moves. */

/* ------------------------------------------------------------------
   A reel's cover (D101, 4)
   ------------------------------------------------------------------ */

.rl-cover {
    position: relative;
    display: block;
    flex: none;
    aspect-ratio: 9 / 16;
    overflow: hidden;
    border-radius: 3px;
    background: var(--color-surface-muted);
    box-shadow: 0 0 0 1px var(--color-cover-ring), var(--shadow-cover);
}

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

.rl-cover-sm {
    width: 30px;
}

.rl-cover-md {
    width: 100%;
}

.rl-cover-lg {
    width: 100%;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--color-cover-ring), var(--shadow-cover-lg);
}

.rl-cover.is-deleted {
    opacity: 0.45;
}

.rl-cover-cap {
    position: absolute;
    inset: auto 8% 34% 8%;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rl-cover-sm .rl-cover-cap {
    display: none;
}

.rl-cover-mark,
.rl-cover-ext {
    position: absolute;
    top: 6px;
    right: 6px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    box-shadow: var(--shadow-xs);
}

.rl-cover-mark .icon,
.rl-cover-ext .icon {
    width: 13px;
    height: 13px;
}

/* ------------------------------------------------------------------
   The Instagram tab: the tiles and the list's head
   ------------------------------------------------------------------ */

/* The period's hits beside New reels' figure, smaller and grey. */
.rl-hits {
    margin-left: var(--space-1);
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    letter-spacing: 0;
    white-space: nowrap;
}

.rl-card {
    container: rl / inline-size;
}

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

.rl-top .card-title {
    min-width: 0;
}

.rl-tools {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
}

.rl-menu > summary {
    list-style: none;
}

.rl-menu > summary::-webkit-details-marker {
    display: none;
}

.rl-tool {
    gap: 6px;
}

.rl-tool .icon {
    width: 16px;
    height: 16px;
    color: var(--color-text-subtle);
}

.rl-tool-word {
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
}

.rl-menu[open] > .rl-tool {
    background: var(--color-surface-selected);
}

.rl-menu-list {
    width: 248px;
    max-height: min(560px, calc(100vh - 32px));
    overflow-y: auto;
}

.rl-menu-title {
    margin: var(--space-2) var(--space-3) 2px;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.rl-menu-title:first-child {
    margin-top: var(--space-1);
}

.rl-menu-note {
    margin: var(--space-1) var(--space-3) var(--space-2);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.rl-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: var(--space-4) var(--space-5);
}

.rl-views {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.rl-views-rule {
    flex: none;
    width: 1px;
    height: 20px;
    margin: 0 4px;
    background: var(--color-border);
}

.rl-view {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
}

.rl-view .icon {
    width: 14px;
    height: 14px;
}

@media (hover: hover) {
    .rl-view:hover {
        border-color: var(--color-border-strong);
        color: var(--color-text);
    }
}

.rl-view[aria-current] {
    border-color: transparent;
    background: var(--color-canvas-selected);
    color: var(--color-text);
    font-weight: var(--weight-semibold);
}

.rl-add {
    border-style: dashed;
    border-color: var(--color-border-strong);
}

.rl-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-chips > li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rl-and {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.rl-chip {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface-muted);
}

.rl-chip-text {
    padding: 0 4px 0 12px;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

@media (hover: hover) {
    a.rl-chip-text:hover {
        text-decoration: underline;
        text-underline-offset: 3px;
    }
}

.rl-chip-x {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    margin-right: 2px;
    border-radius: var(--radius-full);
    color: var(--color-text-subtle);
}

.rl-chip-x .icon {
    width: 14px;
    height: 14px;
}

@media (hover: hover) {
    .rl-chip-x:hover {
        background: var(--color-surface-hover);
        color: var(--color-text);
    }
}

@media (min-width: 640px) {
    .rl-top {
        padding: var(--space-6) var(--space-6) 0;
    }

    .rl-bar {
        padding: var(--space-4) var(--space-6);
    }
}

/* A phone: both buttons stay beside the title, the age alone ("Now", "At
   3 days") and Columns its icon, each named whole by its aria-label; the
   views slide sideways in their own line and the chips stand under them. */
@container rl (max-width: 639px) {
    .rl-tool-word {
        display: none;
    }

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

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

    .rl-tool-columns {
        width: var(--control-height-sm);
        padding: 0;
    }

    .rl-bar {
        padding: var(--space-3) 0;
    }

    .rl-views {
        flex-basis: 100%;
        flex-wrap: nowrap;
        padding: 0 var(--space-5);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .rl-views::-webkit-scrollbar {
        display: none;
    }

    .rl-chips {
        padding: 0 var(--space-5);
    }
}

/* ------------------------------------------------------------------
   The Instagram tab: the table
   ------------------------------------------------------------------ */

.rl-head {
    display: inline-flex;
    align-items: center;
}

th.cell-num .rl-head {
    justify-content: flex-end;
}

/* A condition's own column, tinted, its head naming its age. [M6.4] */
.rl-table .rl-own {
    background: color-mix(in srgb, var(--color-surface-muted) 60%, var(--color-surface));
}

.rl-reel {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rl-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 20rem;
}

.rl-caption {
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* A Threads post's text, longer than a reel's caption, wraps to two lines,
   so its column shrinks with the card and the figures beside it keep their
   place at every width, the record panel's too (M12.17). */
.rl-text.is-wrapping .rl-caption {
    display: -webkit-box;
    white-space: normal;
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.rl-when-short {
    display: none;
}

.rl-sound {
    display: inline-block;
    max-width: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
}

@container rl (max-width: 639px) {
    .rl-text {
        max-width: 8.5rem;
    }

    .rl-caption {
        display: -webkit-box;
        white-space: normal;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.3;
    }

    .rl-when {
        display: none;
    }

    .rl-when-short {
        display: inline;
    }
}

/* The typical reel of these and of all, on the grey of a row set apart. */
.rl-table .rl-typical td {
    height: 44px;
    background: var(--color-surface-muted);
    font-weight: var(--weight-semibold);
}

.rl-table .rl-typical.is-all td {
    border-top: 0;
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
}

.rl-table .rl-typical + tr:not(.rl-typical) td {
    border-top-color: var(--color-border-strong);
}

@media (hover: hover) {
    .rl-table tbody .rl-typical:hover td {
        background: var(--color-surface-muted);
    }
}

.rl-typical-name {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-sm);
}

/* A cover as the box that chooses its reel to compare: a ring a click
   ticks, the chosen one darker; none shows before a reel is chosen.
   [M6.7] */
.rl-pick {
    position: relative;
    display: block;
    flex: none;
    border-radius: 3px;
}

.rl-pick-mark {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: inherit;
}

.rl-pick-mark .icon {
    width: 16px;
    height: 16px;
    padding: 2px;
    border: 1.5px solid var(--color-surface);
    border-radius: var(--radius-full);
    background: color-mix(in srgb, var(--color-surface) 35%, transparent);
    box-shadow: var(--shadow-sm);
    stroke: transparent;
}

.rl-pick.is-chosen .rl-pick-mark {
    background: var(--color-overlay-panel);
}

.rl-pick.is-chosen .rl-pick-mark .icon {
    border-color: var(--color-primary);
    background: var(--color-primary);
    stroke: var(--color-on-primary);
}

.rl-pick[aria-disabled="true"] {
    cursor: not-allowed;
}

.rl-table tbody tr.is-chosen td {
    background: var(--color-canvas-selected);
}

.rl-more {
    display: flex;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-border);
}

/* The list's ghost before the first read [D77]: rows with the real rows'
   paddings and cover, a name and its line as bars, and the three figures
   as short bars on the right, the first alone on a phone. */
.rl-ghost {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-ghost > li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    align-items: center;
    gap: 0 10px;
    min-height: 60px;
    padding: 10px var(--space-5);
    border-top: 1px solid var(--color-border);
}

.rl-ghost-cover {
    aspect-ratio: 9 / 16;
    border-radius: 3px;
    background: var(--color-ghost);
}

.rl-ghost-nums {
    display: flex;
    gap: 64px;
}

.rl-ghost-nums > .ghost-bar {
    width: 40px;
}

.rl-ghost-nums > .ghost-bar + .ghost-bar {
    display: none;
}

@container rl (min-width: 640px) {
    .rl-ghost > li {
        padding-right: var(--space-6);
        padding-left: var(--space-6);
    }

    .rl-ghost-nums > .ghost-bar + .ghost-bar {
        display: block;
    }
}

/* ------------------------------------------------------------------
   Compare: the bar while reels are chosen, and the comparison [M6.7]
   ------------------------------------------------------------------ */

/* At the foot of the screen while the page runs on, and after its last
   card at its end, so it never hides what lies under it. */
.rl-compare {
    position: sticky;
    bottom: calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-panel);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: fit-content;
    max-width: 100%;
    margin: var(--space-6) auto 0;
    padding: 6px 6px 6px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-lg);
}

/* Above the phone's tab bar. */
@media (max-width: 639px) {
    .rl-compare {
        bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    }
}

.rl-compare-covers {
    display: flex;
    flex: none;
}

.rl-compare-cover .rl-cover {
    width: 22px;
    box-shadow: 0 0 0 2px var(--color-surface-raised);
}

.rl-compare-cover + .rl-compare-cover {
    margin-left: -8px;
}

.rl-compare-text {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

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

.rl-compare-text,
.rl-compare-full {
    min-width: 0;
}

/* The best of a row of Compare's Side by side, semibold (M12.9): never vs
   usual, whose colours say it. */
.rl-best {
    font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------------
   The condition window [M6.4]
   ------------------------------------------------------------------ */

.rl-cond-open {
    position: relative;
}

/* The open one's x while others are folded above it. */
.rl-cond-x,
.rl-fold-x {
    display: grid;
    flex: none;
    place-items: center;
    border-radius: var(--radius-sm);
    color: var(--color-text-subtle);
}

.rl-cond-x {
    position: absolute;
    top: -6px;
    right: -6px;
    z-index: 1;
    width: 28px;
    height: 28px;
}

.rl-cond-x .icon,
.rl-fold-x .icon {
    width: 15px;
    height: 15px;
}

@media (hover: hover) {
    .rl-cond-x:hover,
    .rl-fold-x:hover {
        background: var(--color-surface-muted);
        color: var(--color-text);
    }
}

.rl-cond-set > legend {
    margin-bottom: var(--space-2);
}

.rl-cond-values,
.rl-cond-words {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.rl-cond-words {
    flex-direction: column;
    align-items: stretch;
}

/* The words go while the caption asks a question; To shows with Between. */
.rl-cond-caption:has(.segmented-input[value="question"]:checked) .rl-cond-words {
    display: none;
}

.rl-cond-to {
    display: none;
    flex: 1;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
}

.rl-cond-is:has(.segmented-input[value="between"]:checked) .rl-cond-to {
    display: flex;
}

.rl-cond-and {
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.rl-value {
    position: relative;
    flex: 1;
    min-width: 0;
}

.rl-value-input {
    padding-right: 84px;
    font-variant-numeric: tabular-nums;
}

.rl-unit {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    transform: translateY(-50%);
    pointer-events: none;
}

.rl-cond-is .field-error {
    margin-top: var(--space-2);
}

/* A condition folded into its sentence, which opens it again, with its x. */
.rl-fold {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-left: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-muted);
}

.rl-fold-text {
    flex: 1;
    min-width: 0;
    padding: 10px 0;
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.rl-fold-x {
    width: 36px;
    height: 36px;
    margin-right: 4px;
}

.rl-join {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: calc(-1 * var(--space-2)) 0;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.rl-join::before,
.rl-join::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--color-border);
}

/* ------------------------------------------------------------------
   The chart's head (D106): the title on the left, the + on the far right,
   the legend between them on the right, its items wrapping there where
   the line is short. On a narrow card the + stays on the title's line and
   the legend runs under both.
   ------------------------------------------------------------------ */

.rl-chart-card {
    container: rlc / inline-size;
}

.rl-chart-head {
    display: grid;
    grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) auto;
    align-items: center;
}

.rl-chart-tools {
    display: contents;
}

.rl-chart-tools > .an-legend {
    justify-content: flex-end;
}

.rl-chart-add {
    flex: none;
}

/* The plus alone, without the frame of a button, a little larger than the
   menus' icons (D106). */
.rl-chart-plus .icon {
    width: 20px;
    height: 20px;
    color: var(--color-text-muted);
}

@media (hover: hover) {
    .rl-chart-plus:hover .icon {
        color: var(--color-text);
    }
}

@container rlc (max-width: 560px) {
    .rl-chart-head {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .rl-chart-tools > .an-legend {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
    }
}

/* ------------------------------------------------------------------
   What works [M6.8]
   ------------------------------------------------------------------ */

.rl-works-head {
    align-items: center;
}

.rl-works-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

/* The split as tall as the button beside it, here only. */
.rl-split .an-seg-item {
    min-height: calc(var(--control-height-sm) - 8px);
}

.rl-w {
    padding: var(--space-3) var(--space-3) var(--space-4);
    container: rlw / inline-size;
}

.rl-w-scale,
.rl-w-row {
    display: grid;
    grid-template-columns: minmax(9rem, 13rem) minmax(0, 1fr) 5.5rem;
    align-items: center;
    gap: var(--space-5);
    padding: 0 var(--space-3);
}

.rl-w-scale {
    height: 18px;
}

.rl-w-scale-track {
    grid-column: 2;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.rl-w-scale-track text {
    fill: var(--color-text-subtle);
    font-family: var(--font-sans);
    font-size: 11px;
}

.rl-w-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.rl-w-row {
    min-height: 56px;
    border-radius: var(--radius-sm);
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    a.rl-w-row:hover {
        background: var(--color-surface-hover);
    }
}

.rl-w-name {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.rl-w-label,
.rl-w-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rl-w-label {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.rl-w-sub {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

/* The groups left out, too few to say anything, in one quiet line under
   the bars (D106). */
.rl-w-left {
    margin: var(--space-2) 0 0;
    padding: 0 var(--space-3);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    line-height: 1.45;
}

.rl-w-track {
    display: block;
    width: 100%;
    height: 8px;
    overflow: visible;
    border-radius: 4px;
    background: var(--color-surface-muted);
}

.rl-w-fill {
    fill: var(--color-chart-prev);
}

.rl-w-fill.is-up {
    fill: var(--color-success-text);
    fill-opacity: 0.7;
}

.rl-w-fill.is-down {
    fill: var(--color-danger-text);
    fill-opacity: 0.7;
}

.rl-w-line {
    stroke: var(--color-text-subtle);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.rl-w-value {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.rl-w-value .an-none {
    font-weight: var(--weight-normal);
}

/* The groups' ghost: their rows, a name and a bar in the ghost greys. */
.rl-w-ghost {
    padding: var(--space-3) var(--space-3) var(--space-4);
}

.rl-w-ghost .rl-w-track {
    background: var(--color-ghost);
}

.rl-w-ghost .rl-w-row > .ghost-bar {
    width: 40px;
    justify-self: end;
}

/* Narrow: the name and the figure on one line, the bar under them. */
@container rlw (max-width: 560px) {
    .rl-w-scale {
        display: none;
    }

    .rl-w-row {
        grid-template-columns: minmax(0, 1fr) auto;
        row-gap: var(--space-2);
        padding: var(--space-3);
    }

    .rl-w-track {
        grid-column: 1 / -1;
        grid-row: 2;
    }
}

/* ------------------------------------------------------------------
   The Accounts tab's quiet word
   ------------------------------------------------------------------ */

.an-account-name {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px var(--space-2);
    min-width: 0;
}

.an-word {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: 500;
}

.an-word.is-danger {
    color: var(--color-danger-text);
}

/* ------------------------------------------------------------------
   A reel's page of IG Competitors
   ------------------------------------------------------------------ */

.reel-head {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
}

.reel-thumb {
    display: block;
    width: 72px;
    border-radius: 4px;
    color: inherit;
}

.reel-intro {
    min-width: 0;
}

.reel-caption {
    font-size: clamp(var(--text-lg), 1rem + 1vw, var(--text-2xl));
    line-height: 1.25;
}

.reel-caption a {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .reel-caption a:hover {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }
}

.reel-ext {
    display: inline-block;
    width: 0.62em;
    height: 0.62em;
    margin-left: var(--space-2);
    vertical-align: 0.12em;
    color: var(--color-text-subtle);
}

.reel-meta {
    margin-top: 6px;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.reel-counts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.reel-counts li {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-base);
    font-variant-numeric: tabular-nums;
}

.reel-counts .icon {
    width: 18px;
    height: 18px;
    color: var(--color-text);
}

.reel-counts b {
    font-weight: 600;
}

.reel-counts li.is-hidden b {
    color: var(--color-text-subtle);
    font-weight: 500;
}

@media (min-width: 640px) {
    .reel-head {
        grid-template-columns: 96px minmax(0, 1fr);
    }

    .reel-thumb {
        width: 96px;
    }

    .reel-counts {
        gap: 6px 18px;
    }

    .reel-counts li {
        gap: 6px;
        font-size: var(--text-md);
    }

    .reel-counts .icon {
        width: 20px;
        height: 20px;
    }
}

.reel-explain {
    max-width: 70ch;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

/* Alone under the chart's ghost. [D77] */
.reel-explain:first-child {
    margin-top: 0;
}

/* ------------------------------------------------------------------
   An account's numbers: Reels and Instagram
   ------------------------------------------------------------------ */

/* Positioned, so the row clips what its covers place absolutely, the screen
   reader's words among them, instead of the page growing sideways. */
.acc-reels {
    position: relative;
    display: flex;
    gap: 4px;
    margin: 0 calc(-1 * var(--space-5));
    padding: 0 var(--space-5) 4px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--space-5);
    scrollbar-width: thin;
    list-style: none;
}

.acc-reels > li {
    flex: none;
    width: 112px;
    scroll-snap-align: start;
}

@media (min-width: 640px) {
    .acc-reels > li {
        width: 128px;
    }
}

/* The row's ghost before the first read, in the row's own room. [D77] */
.acc-ghost-covers {
    margin: 0 calc(-1 * var(--space-5));
    padding: 0 var(--space-5) 4px;
}

.acc-reel {
    display: block;
    color: inherit;
    border-radius: 3px;
}

/* A reel that opens answers the pointer as Home's top reels do: its ring
   darkens, as a field's border does. */
@media (hover: hover) {
    a.acc-reel:hover .rl-cover {
        --color-cover-ring: var(--color-control-border-hover);
    }
}

.acc-reel-plays {
    position: absolute;
    bottom: 6px;
    left: 7px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 6px 1px 4px;
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    box-shadow: var(--shadow-xs);
}

.acc-reel-plays .icon {
    width: 11px;
    height: 11px;
    fill: currentColor;
}

/* Waiting for its first read: no ring and no shadow yet, a dashed edge. */
.acc-reel.is-waiting .rl-cover {
    box-shadow: none;
    outline: 1px dashed var(--color-control-border);
    outline-offset: -1px;
}

.acc-reel-wait {
    position: absolute;
    inset: auto 8px 10px;
    color: var(--color-text-muted);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    text-align: center;
}

.acc-add {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-2);
    max-width: 560px;
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.acc-add-text {
    flex: 1 1 100%;
}

.acc-add-title {
    font-size: var(--text-base);
    font-weight: 600;
}

.acc-add-field {
    display: flex;
    flex: 1 1 14rem;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.acc-minis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
}

.acc-minis div {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.acc-minis dt {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.acc-minis dd {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.acc-minis small {
    color: var(--color-text-subtle);
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    font-weight: 500;
}

.acc-sub {
    margin-bottom: var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
}

/* Before the first read the chart's ghost stands under its heading,
   within the card's padding. [D77] */
.acc-sub + .ghost-chart {
    min-height: 280px;
    padding: var(--space-6) 0;
}

.acc-sub + .ghost-chart .ghost-chart-plot {
    right: 0;
    bottom: 0;
    left: 0;
}

.acc-drop {
    margin-top: var(--space-4);
}

.acc-section-title {
    margin-bottom: var(--space-3);
    font-size: var(--text-lg);
    letter-spacing: -0.015em;
}