/* Catalog style "demo22" — tags add-on (loaded instead of _tags.css). */
/*
 * "Suits a site for …" in the darkroom: the cloud is the demo's legend row — dark pills, each with
 * a glowing dot in its own neon and a mono count; on cards the tags are small "#tag" pills; on the
 * post, agreeing lights your tag up in safelight red. Mirrors /demo22/ like demo22.css.
 */

/* list page: the legend row under the view switch */
.tagcloud { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 0; }
.tagcloud__title { margin: 0; font: 600 0.68rem/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.tagcloud__list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.tagcloud__item { --c: var(--red); min-width: 0; max-width: 100%; }
.tagcloud__item:nth-child(6n+2) { --c: var(--lilac); }
.tagcloud__item:nth-child(6n+3) { --c: var(--cyan); }
.tagcloud__item:nth-child(6n+4) { --c: var(--amber); }
.tagcloud__item:nth-child(6n+5) { --c: var(--pink); }
.tagcloud__item:nth-child(6n+6) { --c: var(--mint); }
.tagcloud__link {
    display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 36px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px;
    background: rgb(20 20 23 / 0.8); font: 400 0.82rem/1.25 var(--sans); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; transition: border-color 0.15s, box-shadow 0.2s;
}
.tagcloud__link::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.tagcloud__link:hover { border-color: var(--c); }
.tagcloud__link.is-active { border-color: var(--c); box-shadow: 0 0 18px -6px var(--c), inset 0 0 0 1px var(--c); }
.tagcloud__count { font: 400 0.72rem/1 var(--mono); color: var(--muted); }
.tagcloud__empty { margin: 0; font: 400 0.78rem/1.5 var(--mono); color: var(--muted); }
.listing__tag { font: 400 0.82rem/1.5 var(--mono); }
.listing__tag strong { font-weight: 600; color: var(--red); }
.listing__tag a { color: var(--cyan); text-underline-offset: 3px; }

/* cards: small mono pills under the read-out */
.post--card .post__fits { grid-area: fits; }
.post__fits { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 12px; padding: 0; list-style: none; }
.post__fit { min-width: 0; }
.post__fit a {
    display: inline-flex; padding: 4px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--well);
    font: 400 0.72rem/1.3 var(--mono); color: var(--muted); text-decoration: none; overflow-wrap: anywhere;
}
.post__fit a::before { content: "#"; color: var(--c, var(--red)); }
.post__fit a:hover { border-color: var(--c, var(--red)); color: var(--ink); }

/* post: a glass panel between the rating and the comments */
.fits { margin-top: 52px; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line); border-radius: 18px; background: rgb(20 20 23 / 0.9); }
.fits__title { margin: 0 0 8px; font: 500 clamp(1.6rem, 2.4vw, 2.1rem)/1.1 var(--sans); letter-spacing: -0.03em; }
.fits__intro { max-width: 62ch; margin: 0 0 18px; color: var(--muted); }
.fits__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; }
.fits__item { min-width: 0; max-width: 100%; }
.fits__vote { margin: 0; }
.fits__tag {
    display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 6px 7px 6px 14px; border: 1px solid var(--line-2); border-radius: 999px;
    background: var(--panel-2); color: var(--ink); font: 500 0.95rem/1.25 var(--sans); text-align: left; overflow-wrap: anywhere; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.2s, background 0.15s;
}
.fits__tag::before { content: "+"; font: 600 0.9rem/1 var(--mono); color: var(--red); }
.fits__tag:hover { border-color: rgb(255 75 54 / 0.6); }
.fits__tag:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.fits__count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 8px; border-radius: 999px; background: var(--well); font: 500 0.75rem/1 var(--mono); color: var(--muted); }
.fits__tag.is-mine { border-color: var(--red); background: rgb(255 75 54 / 0.16); box-shadow: 0 0 22px -6px var(--red); }
.fits__tag.is-mine::before { content: "✓"; }
.fits__tag.is-mine .fits__count { background: var(--red); color: var(--on-red); }
.fits__empty { margin: 0 0 22px; font: 400 0.85rem/1.5 var(--mono); color: var(--muted); }

.fits-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); }
.fits-form__label { width: 100%; font: 500 0.68rem/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.fits-form__input {
    flex: 1 1 240px; min-width: 0; max-width: 380px; min-height: 46px; padding: 10px 13px; border: 1px solid #34343c; border-radius: 10px;
    background: var(--well); color: var(--ink); font: 400 1rem/1.4 var(--sans); color-scheme: dark;
}
.fits-form__input::placeholder { color: #75747c; }
.fits-form__input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgb(255 75 54 / 0.28), 0 0 24px -8px var(--red); }
.fits-form__submit {
    min-height: 46px; padding: 0 22px; border: 0; border-radius: 10px; background: var(--red); color: var(--on-red); text-decoration: none; cursor: pointer;
    font: 600 0.82rem/1 var(--mono); box-shadow: 0 0 22px -6px rgb(255 75 54 / 0.8);
}
.fits-form__submit:hover { background: #ff624f; color: var(--on-red); }
.fits-form__submit:focus-visible { outline-color: var(--ink); }

@media (max-width: 420px) {
    .fits-form__input { flex-basis: 100%; max-width: none; }
}