/* IG Competitors (Phase 5, M5.6 to M5.8; D99): the tabs Top reels, Accounts
   and Saved, an account's and a reel's pages, and their windows. Built from
   the admin's own components (.card, .table, .btn, the filter row, the
   tiles, the reel's head of reels.css) and the analytics' drawings
   (analytics.css), with what only this area needs here. The agreed mock is
   docs/mockups/ig-competitors.html.

   The classes:

     .cp-fact, .cp-fact-since
                         the fact above the tabs' content while the accounts
                         are not read, and its since
     .cp-table           a table of reels or accounts (D83)
     .cp-reel, .cp-reel-cell, .cp-reel-text, .cp-caption, .cp-sub-followers,
     .cp-new
                         a reel's first cell: its cover 30 pixels wide, its
                         caption on one line (two on a phone), the line under
                         it, the followers hidden on a phone, and the dot of
                         new since yesterday
     .cp-vs, .cp-under, .cp-pct
                         the main figure of a row, the plays a multiple
                         stands for under it, a share in grey
     .cp-act, .cp-row-actions, .cp-bookmark, .cp-bookmark-form,
     .cp-bookmark-mark   a row's last cell: Mark as posted and the bookmark,
                         filled while pressed
     .cp-version-wait, .cp-her
                         "At 3 days" in grey, and her version's link
     .cp-missed, .cp-quiet
                         the quiet line under a table, and a table's quiet
                         empty line
     .cp-word, .cp-notice
                         a word of an account's state (.is-danger for Not
                         found), and the notice of it on its page
     .cp-ghost, .cp-ghost-rows, .cp-ghost-thumb, .cp-ghost-nums,
     .cp-ghost-words     a table's ghost and its words, centred [D77]
     .cp-scatter and its parts
                         the chart of Top reels (View\Charts\RivalScatter):
                         the axis titles, the values, the plot stretched
                         with its field, lines and grid, the dots and their
                         links over it, the ticks; .cp-ghost-scatter its
                         ghost
     .cp-guide, .cp-axis the dotted lines and the axis of the drawings
     .cp-follower-chart  the followers per day of a reel's page
     .cp-sound-line, .cp-note-line, .cp-actions-row, .cp-copy, .cp-facts
                         a reel's page: its music, its notes, its actions,
                         the account's three facts
     .cp-category, .cp-category-new
                         the category's dropdown and the name field that
                         shows while "New category…" is chosen
     .cp-for, .cp-model-picks, .cp-model-pick, .cp-model-pick-mark,
     .cp-save-do, .cp-save-off
                         Save to recreate: the models as faces, several
                         chosen, and the button that applies
     .cp-pick, .cp-pick-reel, .cp-pick-meta
                         Mark as posted: her reels as covers, one chosen

   Black, white and grey from the tokens, the loss red for a loss and Not
   found alone; nothing moves. */

/* ------------------------------------------------------------------------
   The fact above the tabs' content
   ------------------------------------------------------------------------ */

.cp-fact {
    margin-bottom: var(--space-6);
}

.cp-fact-since {
    opacity: 0.8;
}

/* ------------------------------------------------------------------------
   The tables
   ------------------------------------------------------------------------ */

/* The reel's cell takes the room the figures leave, at least 15rem, so a
   long caption is cut rather than widening the table (as .cell-truncate). */
.table td.cp-reel {
    width: 100%;
    min-width: 15rem;
    max-width: 0;
}

.cp-reel-cell {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

/* The cover's own look, everywhere the same (reels.css, D101); here only
   its width. */
.cp-reel-cell .rl-cover-sm {
    width: 30px;
}

.cp-reel-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cp-caption {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--color-text);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cp-caption.an-none {
    color: var(--color-text-subtle);
    font-weight: var(--weight-normal);
}

.cp-reel-cell .cell-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 639px) {
    .cp-sub-followers {
        display: none;
    }

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

/* New since yesterday: a quiet dot before the account. */
.cp-new {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 6px;
    border-radius: var(--radius-full);
    background: var(--color-text);
    vertical-align: 1px;
}

.table td.cp-vs {
    font-size: var(--text-md);
    font-weight: var(--weight-semibold);
}

.cp-under {
    display: block;
    margin-top: 1px;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
}

.cp-pct {
    margin-left: 4px;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
    font-weight: var(--weight-normal);
}

.table td.cp-act,
.table th.cp-act {
    width: 1%;
    text-align: right;
}

.cp-row-actions {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.cp-bookmark-form {
    display: inline-flex;
}

.cp-bookmark[aria-pressed="true"],
.cp-bookmark.is-pressed,
.cp-bookmark-mark {
    color: var(--color-text);
}

.cp-bookmark[aria-pressed="true"] .icon,
.cp-bookmark.is-pressed .icon,
.cp-bookmark-mark .icon {
    fill: currentColor;
}

.cp-bookmark-mark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 var(--space-2);
}

.cp-bookmark-mark.is-page {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.cp-version-wait {
    color: var(--color-text-subtle);
    font-weight: var(--weight-normal);
}

.cp-her {
    color: inherit;
    text-decoration: none;
}

@media (hover: hover) {
    .cp-her:hover {
        text-decoration: underline;
    }
}

.cp-missed,
.cp-quiet {
    margin: 0;
    padding: var(--space-3) var(--space-6) var(--space-5);
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
}

.cp-word {
    color: var(--color-text-muted);
    font-weight: var(--weight-medium);
}

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

.cp-notice {
    margin: 0 0 var(--space-6);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.cp-notice .cp-word {
    margin-right: 6px;
}

/* ------------------------------------------------------------------------
   Ghosts (D77): rows as the real ones stand, the words exactly centred
   ------------------------------------------------------------------------ */

.cp-ghost-rows {
    margin: 0;
    padding: var(--space-1) 0 0;
    list-style: none;
}

.cp-ghost-rows > li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: 64px;
    padding: 0 var(--space-6);
    border-top: 1px solid var(--color-ghost);
}

.cp-ghost-rows > li:first-child {
    border-top: 0;
}

.cp-ghost-thumb {
    flex: none;
    width: 30px;
    aspect-ratio: 9 / 16;
    border-radius: 3px;
    background: var(--color-ghost-strong);
}

.cp-ghost-rows .ghost-lines {
    max-width: 260px;
}

.cp-ghost-nums {
    display: flex;
    gap: var(--space-8);
    margin-left: auto;
}

.cp-ghost-nums > .ghost-bar {
    width: 48px;
}

@media (max-width: 639px) {
    .cp-ghost-nums > .ghost-bar + .ghost-bar {
        display: none;
    }

    .cp-ghost-rows > li {
        padding: 0 var(--space-5);
    }
}

.cp-ghost-words {
    width: min(440px, calc(100% - 32px));
    margin: calc(-1 * var(--space-4)) auto 0;
    padding-bottom: var(--space-10);
    text-align: center;
}

.cp-ghost-words .ghost-text {
    margin-right: auto;
    margin-left: auto;
}

.cp-ghost-scatter {
    display: block;
    width: 100%;
    height: auto;
    padding: 0 var(--space-6) var(--space-6);
}

.cp-ghost-scatter circle {
    fill: var(--color-ghost-strong);
}

/* ------------------------------------------------------------------------
   The chart of Top reels: the plot's margins are 44 pixels for the values
   on the left, 12 on the right, 12 above and 26 below for the ticks
   ------------------------------------------------------------------------ */

.cp-chart-card .home-choice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.cp-axis-title {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
}

.cp-axis-title-x {
    margin-top: var(--space-1);
    text-align: right;
}

.cp-scatter-chart {
    position: relative;
    height: 260px;
    margin-top: var(--space-2);
}

@container an-chart (min-width: 560px) {
    .cp-scatter-chart {
        height: 300px;
    }

    .cp-x-wide {
        display: inline;
    }
}

.cp-scatter-y {
    position: absolute;
    top: 12px;
    bottom: 26px;
    left: 0;
    width: 36px;
}

.cp-scatter-plot,
.cp-scatter-over {
    position: absolute;
    top: 12px;
    left: 44px;
    width: calc(100% - 56px);
    max-width: none;
    height: calc(100% - 38px);
    overflow: visible;
}

.cp-scatter-x {
    position: absolute;
    bottom: 0;
    left: 44px;
    width: calc(100% - 56px);
    max-width: none;
    height: 26px;
    overflow: visible;
}

.cp-zone {
    fill: var(--color-chart-wash);
}

.cp-guide {
    fill: none;
    stroke: var(--color-border-strong);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    vector-effect: non-scaling-stroke;
}

.cp-axis {
    stroke: var(--color-border-strong);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.cp-zone-label,
.cp-guide-label {
    font-family: var(--font-sans);
    font-size: 12px;
}

.cp-zone-label {
    fill: var(--color-text);
    font-weight: var(--weight-semibold);
}

.cp-guide-label {
    fill: var(--color-text-subtle);
    font-size: 11px;
}

/* Dots under 3x faint, hits below the middle half, hits above it full ink. */
.cp-dot {
    fill: var(--color-chart-ink);
}

.cp-dot-rest {
    fill-opacity: 0.2;
}

.cp-dot-hit {
    fill-opacity: 0.45;
}

.cp-dot-best {
    fill-opacity: 0.95;
    stroke: var(--color-surface);
    stroke-width: 1.5;
}

.cp-pt:hover .cp-dot,
.cp-pt:has(.is-panel-open) .cp-dot {
    fill-opacity: 1;
    stroke: var(--color-surface);
    stroke-width: 2;
}

.cp-dot-link {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: var(--radius-full);
    cursor: pointer;
}

.cp-scatter-none {
    margin: 0;
    padding: var(--space-10) 0;
    color: var(--color-text-subtle);
    font-size: var(--text-sm);
    text-align: center;
}

/* ------------------------------------------------------------------------
   A reel's page and an account's page
   ------------------------------------------------------------------------ */

.cp-sound-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-1);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.cp-sound-line .icon {
    flex: none;
    width: 14px;
    height: 14px;
}

.cp-note-line {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.cp-actions-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.cp-copy {
    display: inline-flex;
}

.cp-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
}

.cp-facts dt {
    display: flex;
    align-items: center;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.cp-facts dd {
    margin: 0;
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------------
   The windows: the category, the models to save for, her reels
   ------------------------------------------------------------------------ */

.cp-category {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* The name of a new category only while "New category…" is chosen, so it
   needs no script; shown again with its error, as the choice still is. */
.cp-category:not(:has(option[value="new"]:checked)) .cp-category-new {
    display: none;
}

.cp-for {
    margin: 0;
    padding: 0;
    border: 0;
}

.cp-model-picks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.cp-model-pick {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.cp-model-pick .cp-pick-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.cp-model-pick .inv-avatar {
    width: 30px;
    height: 30px;
}

.cp-model-pick-mark {
    display: none;
    place-items: center;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--color-on-primary);
}

.cp-model-pick-mark .icon {
    width: 12px;
    height: 12px;
    stroke-width: 3;
}

.cp-model-pick:has(.cp-pick-input:checked) {
    border-color: var(--color-primary);
    background: var(--color-surface-selected);
}

.cp-model-pick:has(.cp-pick-input:checked) .cp-model-pick-mark {
    display: grid;
}

.cp-model-pick:has(.cp-pick-input:focus-visible),
.cp-pick-reel:has(.cp-pick-input:focus-visible) {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
}

/* Save, or Remove from saved while every model is unchosen and it is saved:
   the window's foot holds both, the one that applies shows. */
:is(.dialog, .form-card):has(.cp-pick-input:checked) .cp-save-off,
:is(.dialog, .form-card):not(:has(.cp-pick-input:checked)):has(.cp-save-off) .cp-save-do {
    display: none;
}

.cp-pick {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

@media (min-width: 640px) {
    .cp-pick {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

.cp-pick-reel {
    position: relative;
    display: block;
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.cp-pick-reel .cp-pick-input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* The chosen cover outlined inside its edge in the ink, as a cover has no
   frame (D101). */
.cp-pick-reel:has(.cp-pick-input:checked) .rl-cover {
    outline: 3px solid var(--color-primary);
    outline-offset: -3px;
}

.cp-pick-meta {
    display: block;
    margin-top: 4px;
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}