/* Catalog style "demo4" — tags add-on (loaded instead of _tags.css). */
/*
 * DEPO brand, improved: tags are the cover wall's filter chips (surface pills, Poppins) with the
 * green dot of the doc lists and the guest book; the visitor's own tag turns yellow with a tick.
 * The cloud opens the main column beside the sticky role switcher (which now spans its row too).
 */

/* list page: the cloud at the top of the main column */
.categories { grid-row: 3 / span 2; }
.tagcloud { grid-column: 2; grid-row: 3; min-width: 0; margin: 0 0 clamp(32px, 4vw, 48px); padding-right: var(--edge); }
.content { grid-row: 4; }
.tagcloud__title { margin: 0 0 12px; color: var(--muted); font: 700 15px/1.3 var(--serif); }
.tagcloud__list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tagcloud__link { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; padding: 6px 16px 6px 14px; border-radius: 999px; background: var(--surface); color: var(--text); font: 500 14px/1.3 var(--head); text-decoration: none; transition: background 200ms ease, color 200ms ease; }
.tagcloud__link::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.tagcloud__link:hover { background: var(--surface-3); }
.tagcloud__link.is-active { background: var(--yellow); color: #18171a; }
.tagcloud__link.is-active::before { background: #18171a; }
.tagcloud__count { color: var(--muted); font: 700 15px/1 var(--serif); }
.tagcloud__link.is-active .tagcloud__count { color: #18171a; }
.tagcloud__empty { margin: 0; color: var(--muted); font: 700 18px/1.3 var(--serif); }
.listing__tag strong { color: var(--yellow); }
.listing__tag a { color: #fff; text-decoration-color: rgb(255 255 255 / 0.4); text-underline-offset: 5px; }
.listing__tag a:hover { text-decoration-color: currentColor; }

/* cards: small chips with the green dot under the score */
.post__fits { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding: 0; list-style: none; }
.post__fit a { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 3px 12px 3px 10px; border-radius: 999px; background: var(--surface); color: #fff; font: 500 13px/1.3 var(--head); text-decoration: none; transition: background 200ms ease, color 200ms ease; }
.post__fit a::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.post__fit a:hover { background: var(--yellow); color: #18171a; }
.post__fit a:hover::before { background: #18171a; }

/* post: a surface panel like the rating */
.fits { margin-top: clamp(56px, 6vw, 88px); padding: clamp(24px, 3.4vw, 44px); border-radius: 6px; background: var(--surface); }
.fits__title { margin: 0 0 10px; color: #fff; font: 700 clamp(28px, 3vw, 44px)/1.05 var(--serif); }
.fits__intro { max-width: 60ch; margin: 0 0 22px; color: #d6d6da; font-size: 16px; line-height: 1.6; }
.fits__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 0; list-style: none; }
.fits__vote { margin: 0; }
.fits__tag {
    display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 18px 8px 16px; border: 0; border-radius: 999px;
    background: var(--surface-3); color: #fff; font: 500 15px/1.25 var(--head); text-align: left; cursor: pointer;
    transition: background 200ms ease, color 200ms ease, transform 150ms ease;
}
.fits__tag::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.fits__tag:hover { background: #3b3a40; }
.fits__tag:active { transform: scale(0.97); }
.fits__tag.is-mine { background: var(--yellow); color: #18171a; font-weight: 600; }
.fits__tag.is-mine::before { content: "✓"; width: auto; height: auto; border-radius: 0; background: none; color: #18171a; font: 700 16px/1 var(--head); }
.fits__tag.is-mine:hover { background: #ffc633; }
.fits__tag:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.fits__count { color: var(--yellow); font: 700 18px/1 var(--serif); }
.fits__tag.is-mine .fits__count { color: #18171a; }
.fits__empty { margin: 0 0 28px; color: var(--muted); font: 700 20px/1.3 var(--serif); }
.fits-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }
.fits-form__label { width: 100%; color: #fff; font: 600 14px/1.2 var(--head); }
.fits-form__input { flex: 1 1 240px; min-width: 0; max-width: 380px; min-height: 48px; padding: 12px 18px; border: 1px solid #45444b; border-radius: 999px; background: var(--bg); color: #fff; font: 400 16px/1.5 var(--font); transition: border-color 200ms ease, box-shadow 200ms ease; }
.fits-form__input::placeholder { color: #8e8e96; }
.fits-form__input:focus { border-color: var(--yellow); outline: none; box-shadow: 0 0 0 3px rgb(255 181 0 / 0.28); }
.fits-form__submit { padding: 0 26px; border: 0; border-radius: 999px; background: var(--green-btn); color: #fff; font-family: var(--head); text-decoration: none; cursor: pointer; transition: background 200ms ease, transform 150ms ease; }
.fits-form__submit:hover { background: #276836; }
.fits-form__submit:active { transform: scale(0.97); }

@media (max-width: 991px) {
    .categories, .tagcloud, .content { grid-row: auto; }
    .tagcloud { grid-column: 1; padding: 0 var(--edge); }
}