/* The reaction bar. One rounded row: the five reactions as a tally, then the
   personal actions. Every pill shares the same neutral surface and hairline
   outline; the only colour is the glyph, which is what lets five chips read as
   a tally rather than as five buttons competing for the eye. */

.gi-reactions { margin: 0; }
.gi-reactions__bar {
    --gi-reactions-line: color-mix(in oklch, var(--gi-cat-line) 80%, var(--gi-brand-paper));
    align-items: center;
    background: var(--gi-brand-paper);
    border: 1px solid var(--gi-reactions-line);
    border-radius: 999px;
    box-shadow: 0 1px 2px color-mix(in oklch, var(--gi-cat-ground) 7%, transparent);
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .7rem;
    justify-content: space-between;
    padding: .4rem .5rem;
}
/* The two groups are told apart by the gap, not by a rule between them: a
   divider inside a pill reads as a seam. */
.gi-reactions__set { align-items: center; display: flex; flex-wrap: wrap; gap: .3rem; }

/* Scoped through .gi-reactions on purpose: discussion.css normalises
   `.gi-community button { font: inherit }`, and that shorthand outranks a
   single class, so an unscoped rule here loses its font-size, weight and
   line-height and the chips render at the body size in uneven heights. */
.gi-reactions .gi-reactions__chip,
.gi-reactions .gi-reactions__tool,
.gi-reactions .gi-reactions__more > summary {
    align-items: center;
    background: var(--gi-brand-paper);
    border: 1px solid var(--gi-reactions-line);
    border-radius: 999px;
    color: var(--gi-ink);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: .875rem;
    font-weight: 650;
    gap: .32rem;
    line-height: 1;
    min-height: 2.5rem;
    padding: .5rem .68rem;
    transition: background-color 160ms var(--gi-ease), border-color 160ms var(--gi-ease), color 160ms var(--gi-ease);
}
.gi-reactions__chip svg,
.gi-reactions__tool svg,
.gi-reactions__menu svg { flex: 0 0 auto; height: 1.0625rem; width: 1.0625rem; }

/* Each reaction owns a hue, held to the garden palette rather than UI
   primaries. The hue lives in the glyph; the surface and the text stay neutral
   so five chips in a row read as one tally instead of a paint chart. */
.gi-reactions__chip--vote      { --gi-reaction: oklch(47% .09 232); }
.gi-reactions__chip--love      { --gi-reaction: oklch(47% .13 18); }
.gi-reactions__chip--useful    { --gi-reaction: oklch(47% .095 84); }
.gi-reactions__chip--inspiring { --gi-reaction: oklch(45% .1 145); }
.gi-reactions__chip--curious   { --gi-reaction: oklch(47% .105 60); }
.gi-reactions__chip svg { color: var(--gi-reaction); }
.gi-reactions__chip:hover:not(:disabled) {
    background: color-mix(in oklch, var(--gi-reaction) 7%, var(--gi-brand-paper));
    border-color: color-mix(in oklch, var(--gi-reaction) 34%, var(--gi-reactions-line));
}
/* Selected is a tint and a hue-matched outline, never a filled dark pill: the
   bar sits inside the reading column and a solid block interrupts it. */
.gi-reactions__chip[aria-pressed='true'] {
    background: color-mix(in oklch, var(--gi-reaction) 13%, var(--gi-brand-paper));
    border-color: color-mix(in oklch, var(--gi-reaction) 52%, transparent);
    color: var(--gi-reaction);
}
/* A signed-out reader still reads the tally, so an unavailable chip keeps its
   glyph and its number at full strength and only drops the affordance. Dimming
   the whole bar to 55% hid the counts from everyone who is not logged in. */
.gi-reactions .gi-reactions__chip:disabled,
.gi-reactions .gi-reactions__tool:disabled {
    border-color: color-mix(in oklch, var(--gi-reactions-line) 60%, transparent);
    cursor: not-allowed;
    opacity: 1;
}
.gi-reactions__count { font-size: .875rem; font-variant-numeric: tabular-nums; font-weight: 750; }
/* A reaction shows its tally once it has one; until then it names itself. */
.gi-reactions__chip:has(.gi-reactions__count:not(:empty)) .gi-reactions__label { display: none; }
.gi-reactions__chip .gi-reactions__count:empty { display: none; }

.gi-reactions__tool:hover:not(:disabled),
.gi-reactions__more > summary:hover,
.gi-reactions__more[open] > summary {
    background: var(--gi-cat-wash);
    border-color: color-mix(in oklch, var(--gi-cat-ground) 30%, var(--gi-reactions-line));
    color: var(--gi-cat-ground);
}
.gi-reactions__tool[aria-pressed='true'] {
    background: var(--gi-cat-wash);
    border-color: color-mix(in oklch, var(--gi-cat-ground) 55%, transparent);
    color: var(--gi-cat-ground);
}

.gi-reactions__more { position: relative; }
.gi-reactions__more > summary { justify-content: center; letter-spacing: .08em; list-style: none; min-width: 2.75rem; padding-inline: .75rem; }
.gi-reactions__more > summary::-webkit-details-marker { display: none; }
.gi-reactions__menu {
    background: var(--gi-brand-paper);
    border: 1px solid var(--gi-cat-line);
    border-radius: .75rem;
    box-shadow: var(--gi-shadow);
    display: grid;
    gap: .1rem;
    inset-inline-end: 0;
    min-width: 15rem;
    padding: .35rem;
    position: absolute;
    top: calc(100% + .4rem);
    z-index: 20;
}
.gi-reactions__menu button,
.gi-reactions__menu a {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: .5rem;
    color: var(--gi-ink);
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: .8125rem;
    font-weight: 650;
    gap: .55rem;
    min-height: 2.5rem;
    padding: .5rem .65rem;
    text-align: start;
    text-decoration: none;
    width: 100%;
}
.gi-reactions .gi-reactions__menu button:disabled { cursor: not-allowed; opacity: 1; }
.gi-reactions__menu button:hover,
.gi-reactions__menu a:hover { background: var(--gi-cat-wash); color: var(--gi-cat-ground); }
.gi-reactions__menu button[aria-pressed='true'] { background: var(--gi-cat-wash); color: var(--gi-cat-ground); }

.gi-reactions__note { color: var(--gi-muted); font-size: .75rem; margin: .6rem 0 0; }
.gi-reactions__note:empty { display: none; }
.gi-reactions .gi-community__status { color: var(--gi-muted); font-size: .8125rem; margin: .6rem 0 0; }
.gi-reactions .gi-community__status:empty { display: none; }

/* Above the article it introduces the tally; below it invites the action. */
.gi-reactions--top { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.gi-reactions--bottom { margin-top: clamp(2rem, 4vw, 3rem); }



/* The bar sizes to its column, not the viewport: it sits in the article body on
   one page and could sit in a narrower one on another. Both thresholds below
   are measured against the rendered row, not guessed, and both are widened by
   about a pill of slack because the article grid does not give the column a
   width that grows with the viewport: it settles between 864px and 1025px on
   large screens, so a threshold sitting inside that band would show the labels
   at 1600px and hide them at 1800px.

   Step one, below the width five labelled chips need: the chips fall back to
   glyph and tally, each keeping its accessible name and its tooltip. */
.gi-article__primary { container-type: inline-size; }
@container (max-width: 53rem) {
    .gi-reactions__chip .gi-reactions__label { display: none; }
}

/* Step two, below the width the glyph row and the labelled tools need
   together: the line is broken where it means something, the tally over the
   personal actions, instead of letting the flex line snap in the middle of the
   reactions and leave the rest of the pill empty. */
@container (max-width: 45.5rem) {
    .gi-reactions__bar { border-radius: 1.25rem; gap: 0; padding: .35rem .4rem; }
    .gi-reactions__set { flex: 1 0 100%; flex-wrap: nowrap; justify-content: space-between; padding: .25rem; }
    .gi-reactions__set--tools {
        border-block-start: 1px solid var(--gi-reactions-line);
        justify-content: space-evenly;
        margin-block-start: .25rem;
        padding-block-start: .5rem;
    }
    .gi-reactions .gi-reactions__chip { padding-inline: .5rem; }
    .gi-reactions .gi-reactions__tool { flex: 0 1 auto; justify-content: center; }
}