/**
 * How much a creation moved, on the creation itself: the strip of chips on a card and the switch
 * that says which window the numbers mean. The panel above the grid is its own mechanism and its
 * own file (whatchanged.css).
 *
 * The rule this file exists to keep is that the strip never changes the height of a card. It
 * reserves its height before there is any data, so a card saying "Too new to compare" measures
 * exactly the same as one showing three chips and the grid does not move under a finger that is
 * already on the screen.
 */

/* ---------------------------------------------------------------- Period switch */

/* First in the header actions: it changes what every number below it means. */
.period-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.period-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
}

/* The pills are .date-range-preset, the same control the chart modals use, so the user
   recognises them. Their styling lives in charts.css and is self-contained. */

/* The second group of the sort select names the selected window, and its label is dark-on-dark
   without this: browsers paint optgroup labels with their own defaults. */
.sort-select optgroup {
    background-color: var(--card-background);
    color: var(--text-secondary);
}

/* ---------------------------------------------------------------- The change row of a card */

/* Which window, and then the numbers. The window is written here and not only in the tooltip of
   each chip: this row and the row of totals below it draw the same three icons, and on a phone
   there is no hover to tell them apart.

   The ROW is what reserves the height, and that reserve is the whole point: a card showing
   "Too new to compare" measures exactly the same as one showing three chips, so a grid with both
   kinds of card does not look like a broken comb.

   How much it reserves depends on the column, because whether the row wraps does. Measured in
   Chromium on /demo: the label is 35px wide and the widest real row needs 227px on one line,
   while a model with five-digit deltas needs 298px. A column narrower than that can wrap — and
   at the narrowest column the grid ever makes (219px of content, four columns at 1100px) the
   label was what pushed one card's third chip onto a second line, leaving that card 17px taller
   than its neighbours. So the narrow column reserves the second line for every card, whether or
   not that card uses it, and the wide one does not reserve what it cannot need. */

/* The card body is declared a container here and not in components.css because the width of a
   card matters to exactly one thing: how tall this row has to be. */
.creation-info {
    container-type: inline-size;
    container-name: creation-card;
}

.creation-delta-row {
    /* What the row reserves is arithmetic, not a measurement: `line-height` is pinned on the chip
       below, so a chip is always its text box plus its padding, and two wrapped lines are two of
       those plus the gap between them. It used to be a constant taken with a ruler (2.6rem, from a
       chip of 18.8px) and on another machine the same chip measured 19.3px — a reserve of 41.6px
       for 42.6px of chips, so the card that wrapped came out a pixel taller than the one beside it
       saying "Too new to compare". A number that depends on which font loaded cannot be right in
       both places; this one does not depend on it.

       One line keeps its 1.55rem, which is more than a chip needs: that extra reads as padding. */
    --delta-chip-text: 0.9rem;
    --delta-chip-padding-y: 0.15rem;
    --delta-chip-row-gap: 0.25rem;
    --delta-chip-height: calc(var(--delta-chip-text) + 2 * var(--delta-chip-padding-y));
    --delta-row-one-line: 1.55rem;
    --delta-row-two-lines: calc(2 * var(--delta-chip-height) + var(--delta-chip-row-gap));
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0.15rem 0 0.35rem;
    min-height: var(--delta-row-one-line);
}

/* 300px is where the widest row a real account can produce stops fitting on one line. Below it,
   every card reserves two lines; above it, none of them can need a second one. */
@container creation-card (max-width: 300px) {
    .creation-delta-row {
        min-height: var(--delta-row-two-lines);
    }
}

/* Grey and small: it names the row, it is not one of its numbers. It never wraps on its own —
   what wraps is the block of chips beside it. */
.creation-delta-period {
    flex-shrink: 0;
    color: var(--delta-flat);
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Wrapping, not clipping — in the narrowest column three five-digit chips and the label do not
   fit on one line, and they wrap during the same paint, so nothing moves later. */
.creation-deltas {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    /* The same gap the two-line reserve counts on: a wrapped row is two chips and one of these. */
    row-gap: var(--delta-chip-row-gap);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.creation-delta {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    /* Pinned, not left to the font: the height of a chip is what the row above reserves. */
    line-height: var(--delta-chip-text);
    padding: var(--delta-chip-padding-y) 0.4rem;
    border-radius: 0.35rem;
    background: rgba(255, 255, 255, 0.045);
    white-space: nowrap;
}

/* Grey, not purple: the row of totals underneath is the purple one, and two purple rows on the
   same card compete for the same glance. */
.creation-delta > .fa-eye,
.creation-delta > .fa-download,
.creation-delta > .fa-euro-sign {
    color: var(--text-secondary);
    opacity: 0.75;
}

.creation-delta.is-up {
    color: var(--delta-up);
}

.creation-delta.is-down {
    color: var(--delta-down);
}

.creation-delta.is-flat {
    color: var(--delta-flat);
}

/* No chips, no zeros and no hole: the same strip says why, at the same height. */
.creation-deltas-empty {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--delta-flat);
    font-size: 0.75rem;
}

/* ---------------------------------------------------------------- The same row in the modal */

/* Under the totals of all time, the change: the same row, the same classes, the same numbers.
   It is written before the modal opens, so it never appears after the fact. The card's own
   margins are dropped here — what spaces the strip in the modal is `.modal-totals`, the block it
   shares with the panel above it (modals.css), and two sources of spacing for the same edge is
   how it ended up nearer to the tags than to the numbers it talks about. */
.modal-deltas .creation-delta-row {
    margin: 0;
}

@media (max-width: 768px) {
    /* `.header-actions` is a single no-wrap row of links, pills and selects, so the toggle can
       only take the full width below if the row itself is allowed to break first. Without this
       the rule under it does nothing but fight the selects for space. */
    .creations-header .header-actions {
        flex-wrap: wrap;
    }

    .period-toggle {
        width: 100%;
    }

    .period-toggle .date-range-preset {
        flex: 1;
        justify-content: center;
        text-align: center;
    }
}