/* Catalog style "demo25" — tags add-on (loaded instead of _tags.css): speciality-style chips with ring dots in the glass panel. Mirrors /demo25/. */
/*
 * List page: the tag cloud is the bottom of the left glass panel, chips like the speciality
 * filter with a ring dot in a cycling speciality colour and a muted count; the active tag turns
 * white like an "on" chip. Cards: the top tags read like a person's coloured speciality line.
 * Post: a surface inside the card slab; each tag is a chip button with a "+" badge, agreed = white
 * chip with a green tick badge; the add form is the city picker's dark input.
 */

/* list page: the cloud, in the panel */
.tagcloud__list { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.tagcloud__item { min-width: 0; max-width: 100%; }
.tagcloud__link {
    --c: #2f7d4f;
    display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 32px; padding: 5px 11px 5px 9px; border: 1px solid transparent; border-radius: 999px;
    background: var(--s2); color: var(--soft); font: 400 13px/1.25 var(--text); text-decoration: none; overflow-wrap: anywhere; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.tagcloud__item:nth-child(6n+2) .tagcloud__link { --c: #d6457a; }
.tagcloud__item:nth-child(6n+3) .tagcloud__link { --c: #e0753a; }
.tagcloud__item:nth-child(6n+4) .tagcloud__link { --c: #8a5cd6; }
.tagcloud__item:nth-child(6n+5) .tagcloud__link { --c: #2d8fb3; }
.tagcloud__item:nth-child(6n) .tagcloud__link { --c: #ffb500; }
.tagcloud__link::before { content: ""; flex: none; width: 10px; height: 10px; border: 2px solid var(--c); border-radius: 50%; }
.tagcloud__link:hover { border-color: var(--c); color: #fff; }
.tagcloud__link.is-active { background: #fff; color: var(--bg); font-weight: 700; }
.tagcloud__count { color: var(--muted); font-size: 11.5px; }
.tagcloud__link.is-active .tagcloud__count { color: #3f3e44; }
.tagcloud__empty { margin: 0; padding: 12px 14px; border: 1px dashed var(--line-2); border-radius: 12px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.listing__tag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--s1); color: var(--soft); font-size: 14.5px; }
.listing__tag strong { color: var(--yellow); }
.listing__tag a { padding: 4px 12px; border-radius: 999px; background: var(--s2); color: #fff; font: 500 12.5px/1.3 var(--label); text-decoration: none; }
.listing__tag a:hover { background: #fff; color: var(--bg); }

/* cards: a coloured speciality line */
.post__fits { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: -2px 0 10px; padding: 0; list-style: none; }
.post__fit a { color: #e58ab0; font: 500 13px/1.4 var(--label); text-decoration: none; }
.post__fit:nth-child(2) a { color: #7fc6e0; }
.post__fit:nth-child(3) a { color: #c3a6f0; }
.post__fit:nth-child(4) a { color: #f0a77a; }
.post__fit a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* post: the tag block */
.fits { margin-top: 44px; padding: 24px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line); }
.fits__title { margin: 0 0 6px; color: #fff; font: 700 30px/1.1 var(--serif); }
.fits__intro { max-width: 62ch; margin: 0 0 16px; color: var(--muted); }
.fits__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.fits__vote { margin: 0; }
.fits__tag {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 8px 6px 6px; border: 1px solid transparent; border-radius: 999px;
    background: var(--s2); color: var(--soft); font: 500 14px/1.25 var(--text); text-align: left; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.fits__tag::before { content: "+"; display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #3a393f; color: var(--yellow); font: 600 15px/1 var(--label); }
.fits__tag:hover { border-color: var(--green-text); color: #fff; }
.fits__tag.is-mine { background: #fff; color: var(--bg); font-weight: 700; }
.fits__tag.is-mine::before { content: "✓"; background: var(--green-fill); color: #fff; font-size: 13px; }
.fits__tag:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.fits__count { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--slab); color: var(--yellow); font: 600 12px/1 var(--label); }
.fits__tag.is-mine .fits__count { background: var(--bg); color: var(--yellow); }
.fits__empty { margin: 0 0 20px; color: var(--muted); }
.fits-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0; padding-top: 16px; border-top: 1px solid var(--line); }
.fits-form__label { width: 100%; color: var(--muted); font: 600 11px/1.3 var(--label); letter-spacing: 0.12em; text-transform: uppercase; }
.fits-form__input { flex: 1 1 220px; min-width: 0; max-width: 360px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--s2); color: #fff; font: 400 15px/1.3 var(--text); }
.fits-form__input::placeholder { color: #8e8e96; }
.fits-form__input:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 3px rgb(70 154 88 / 0.32); }
.fits-form__submit { min-height: 44px; }

@media (max-width: 520px) {
    .fits { padding: 18px 16px; }
}