/*
 * "Fylgja" at an article's foot (newsletters/_follow_foot.html, site/fylgja/fylgja.js), in Efnisorð's place while Fylgja
 * is open. Its rules:
 *   the names    are Efnisorð's labels as the site draws them (article.scss .article__tags--bottom .article-tags__item a:
 *                28px, small corners, the text's weight, the outlet's grey); a writer's has their round grey picture in it;
 *   the toggles  are the article's buttons (site/article-head: round, bold, in the grey, darker on hover) at the labels'
 *                height, so a name never reads as a button nor a button as a name; one followed is filled in the ink;
 *   the pairs    a name and its toggle close together, the pairs further apart, wrapping; a long name gives way first;
 *   the words    a muted line under them all, and what came of a press.
 * Its colours from the text's (currentColor) and the outlet's grey (--st-fill), so the dark look is right as it is.
 */
.fylgja {
    --fylgja-tint: var(--st-fill, color-mix(in srgb, currentColor 6%, transparent));
    --fylgja-tint-hover: var(--st-fill-hover, color-mix(in srgb, currentColor 12%, transparent));
    --fylgja-muted: color-mix(in srgb, currentColor 66%, transparent);
    --fylgja-ground: var(--base-bg, var(--st-bg, #fff));
}
.fylgja *, .fylgja *::before, .fylgja *::after { box-sizing: border-box; }
.fylgja .fylgja__group + .fylgja__group { margin-top: 14px; }
.fylgja .fylgja__list { gap: 8px 14px; }
.fylgja .fylgja__item { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; margin: 0; }

/* The names: Efnisorð's labels (article.scss), a long one cut short rather than pushed out of the column */
.fylgja .fylgja__item a { min-width: 0; max-width: 100%; }
.fylgja .fylgja__item a > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; padding: .25em 0; margin: -.25em 0; }  /* (room for the descenders the cut would take) */
.fylgja .fylgja__item a.fylgja__person { gap: 7px; }
.fylgja .fylgja__item a.fylgja__person:has(img) { padding-left: 4px; }
.fylgja .fylgja__person img {
    display: block; flex: none; width: 20px; height: 20px; max-width: none; border-radius: 50%; object-fit: cover;
    filter: grayscale(100%) contrast(108%);
}

/* The toggles */
.fylgja__btn {
    display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 4px;
    height: 28px; margin: 0; padding: 0 11px 0 8px; border: 0; border-radius: 999px;
    background: var(--fylgja-tint); color: inherit; font: inherit; font-size: 13px; font-weight: 700; line-height: 1;
    white-space: nowrap; cursor: pointer; transition: background .12s, filter .12s;
}
.fylgja__btn[hidden] { display: none; }
.fylgja__btn > svg, .fylgja__btn [data-follow-label] { position: relative; top: 1px; }  /* (on the names' line: the bold sits a pixel higher in its box) */
.fylgja__btn:hover { background: var(--fylgja-tint-hover); }
.fylgja__btn:focus { outline: none; }
.fylgja__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.fylgja__btn:disabled { cursor: progress; opacity: .6; }
.fylgja__btn svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fylgja__btn .fylgja__check, .fylgja__btn[aria-pressed="true"] .fylgja__plus { display: none; }
.fylgja__btn[aria-pressed="true"] .fylgja__check { display: block; }
/* Followed: the ink, its words in the ground */
.fylgja__btn[aria-pressed="true"] { background: currentColor; }
.fylgja__btn[aria-pressed="true"] > * { color: var(--fylgja-ground); }
.fylgja__btn[aria-pressed="true"] svg { stroke: var(--fylgja-ground); }
.fylgja__btn[aria-pressed="true"]:hover { filter: brightness(1.25); }
.fylgja__sr {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0);
    white-space: nowrap; border: 0;
}

/* The words */
.fylgja__hint, .fylgja__note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--fylgja-muted); }
.fylgja__hint[hidden], .fylgja__note[hidden] { display: none; }
.fylgja__hint a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 3px; }
.fylgja__hint a:hover { color: var(--base-ink, currentColor); text-decoration-color: currentColor; }
.fylgja__note { margin-top: 6px; font-size: 14px; font-weight: 600; color: inherit; }