/**
 * The "What changed" panel above the creations grid: the biggest gains on the left, the biggest
 * drops on the right.
 *
 * Everything here is about the panel not moving the grid. Its shell ships in index.html and this
 * file reserves its height before there is any data — the subtitle reserves its line while it is
 * still empty, the skeleton rows are exactly as tall as the rows that replace them, and a half
 * with no movers is as tall as a half with three.
 */

/* The height is reserved here, on the shell that ships in index.html, so filling the panel in
   later never pushes the grid down. */
#whatChanged {
    /* One row of the panel, named once: the skeleton that ships in the static page and the rows
       that replace it are built from this same number, so they cannot end up different heights
       and shift the grid at the moment the data lands. */
    --whatchanged-row-height: 1.55rem;
    /* The column heading and the gap under it, named the same way and for the same reason: a
       half of the panel is a heading plus three rows, and the block that stands in for both
       halves has to reserve exactly that. Left to `normal`, the heading measured 19.6px against
       a hand-written 1.25rem reserve, and the panel grew 0.4px the moment the data landed. */
    --whatchanged-colhead-height: 1.25rem;
    --whatchanged-colhead-gap: 0.35rem;
    /* Half of the panel: a column heading and the three rows under it. It has a name because two
       rules a click apart reserve it -- the half that fills PARTIALLY
       (`.whatchanged-cols > div`, the Views tab) and the block that stands in for a half with
       nothing to show (`.whatchanged-none`, the Sales tab) -- and until now they were the same
       expression written twice. Equal by coincidence is not equal: the day the reserve goes to
       four rows and only one of the two is touched, the panel changes height when the metric tab
       is clicked and pushes the grid, which is the one thing this panel exists not to do. */
    --whatchanged-half-height: calc(var(--whatchanged-row-height) * 3 + var(--whatchanged-colhead-height) + var(--whatchanged-colhead-gap));
    min-height: 176px;
    box-sizing: border-box;
    background: var(--card-background);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

#whatChanged.is-collapsed {
    min-height: 44px;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

#whatChanged.is-collapsed .whatchanged-sub,
#whatChanged.is-collapsed .whatchanged-tabs,
#whatChanged.is-collapsed .whatchanged-body {
    display: none;
}

.whatchanged-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    /* The three metric pills plus the chevron measure about 250px together. Without wrapping
       they take that width out of the title's on a narrow screen: the heading breaks in two,
       the subtitle spills past the two lines reserved for it below, and the panel grows the
       moment the data lands — the one thing this panel exists not to do. Wrapping lets the
       actions drop to their own row and gives the title the width back. */
    flex-wrap: wrap;
}

/* The title and its subtitle are one block: they share the row while there is room for both
   and take the whole width when there is not, never the leftovers. `min-width: 0` because a
   flex item otherwise refuses to shrink below its longest word and pushes the actions out. */
.whatchanged-head > div:first-child {
    flex: 1 1 200px;
    min-width: 0;
}

.whatchanged-title {
    margin: 0;
    font-size: 1.05rem;
    color: var(--text-primary);
}

.whatchanged-sub {
    margin: 0.15rem 0 0;
    color: var(--text-secondary);
    font-size: 0.85rem;
    /* It ships empty and is written at the first render. Without a reserved line, that write
       adds a line of text and pushes the grid down.
       `lh` and not a guessed multiple of the font size: it IS this element's line box, so the
       reserved height and the written line are the same number and the browser resolves it. A
       hand-written 1.2em against an inherited line-height of 1.25 reserved 0.68px too little,
       which the grid felt as a 1px jump the moment the subtitle got its text. */
    min-height: 1lh;
}

.whatchanged-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.whatchanged-tabs {
    display: flex;
    gap: 0.35rem;
}

.whatchanged-tab {
    padding: 0.3rem 0.7rem;
    border-radius: 0.4rem;
    border: 1px solid var(--text-secondary);
    background: var(--background-color);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.whatchanged-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.whatchanged-tab.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.whatchanged-collapse {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
    transition: transform 0.2s ease, color 0.2s ease;
}

.whatchanged-collapse:hover {
    color: var(--primary-color);
}

#whatChanged.is-collapsed .whatchanged-collapse i {
    transform: rotate(-90deg);
}

.whatchanged-body {
    margin-top: 0.75rem;
}

.whatchanged-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem 2rem;
}

/* A half of the panel: the column heading and the three rows under it.

   `min-width: 0` is NOT optional: grid children default to min-width:auto, and one long model
   title widens its column until the panel runs off the side of a phone.

   `min-height` is the same reserve `.whatchanged-none` makes, and it is here for the half that
   fills PARTIALLY. An empty half already reserves its three rows (`.whatchanged-empty`), but a
   half with one or two movers reserved nothing, so it stood exactly one row short — 24.797px.
   Stacked on a phone the two halves are two rows of the grid, so that missing row is height the
   panel does not have, and the grid moved by it the moment the data landed: measured at 390px on
   the Sales tab, gridTop 1762.953 -> 1736.156. The `min-height` of the section itself does not
   cover this — it is sized for the two halves side by side and never bites once they stack. */
.whatchanged-cols > div {
    min-width: 0;
    min-height: var(--whatchanged-half-height);
}

.whatchanged-colhead {
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: var(--whatchanged-colhead-height);
    margin-bottom: var(--whatchanged-colhead-gap);
}

.whatchanged-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    /* `height`, not `min-height`: this is THE row height, the number the skeleton above is also
       built from, and the whole reason it has a name. Left as a minimum, the row was as tall as
       whatever the caret's line box happened to measure — 25px against a skeleton of 24.797px —
       and the panel grew a fifth of a pixel per row the moment the data landed. Three rows in
       each of two columns, stacked on a phone, and the grid moved 1.22px under a finger already
       on the screen. */
    height: var(--whatchanged-row-height);
    box-sizing: border-box;
    padding: 0.25rem 0.35rem;
    border: none;
    border-radius: 0.35rem;
    background: none;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.85rem;
    text-align: left;
    cursor: pointer;
}

.whatchanged-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

.whatchanged-row.is-up i,
.whatchanged-row.is-up .whatchanged-val {
    color: var(--delta-up);
}

.whatchanged-row.is-down i,
.whatchanged-row.is-down .whatchanged-val {
    color: var(--delta-down);
}

.whatchanged-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.whatchanged-val {
    font-variant-numeric: tabular-nums;
}

.whatchanged-empty {
    color: var(--text-secondary);
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Exactly the three rows it replaces. */
    min-height: calc(var(--whatchanged-row-height) * 3);
}

.whatchanged-none {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    /* Exactly the half it stands in for, asked for by name so it cannot drift from the half
       that fills partially. */
    min-height: var(--whatchanged-half-height);
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

.whatchanged-none strong {
    color: var(--text-primary);
}

/* The skeleton that ships in the static page. It is replaced whole by the first render, and it
   exists so the reserved height is visibly the panel and not an empty gap. */
.whatchanged-skeleton {
    min-height: var(--whatchanged-row-height);
    box-sizing: border-box;
    padding: 0.25rem 0.35rem;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.05);
    background-clip: content-box;
}

@media (max-width: 768px) {
    .whatchanged-cols {
        grid-template-columns: 1fr;
    }

    /* The subtitle takes two lines on a narrow screen, and it has to take them before it says
       anything, not once the data arrives. */
    .whatchanged-sub {
        min-height: 2lh;
    }
}