/* Catalog style "depo0" — tags add-on (loaded instead of _tags.css): tags as plain words with the FAQ "+" (a "−" once you agreed), the post block as hairline rows. Mirrors /depo0/. */

/* list page: one hairline line under the categories */
.tagcloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 22px; padding-block: 14px; }
.tagcloud::after { content: ""; position: absolute; left: var(--edge); right: var(--edge); bottom: 0; border-bottom: 1px solid var(--line); }
.tagcloud__title { margin: 0; color: var(--yellow); font: 700 12px/1 var(--text); letter-spacing: 0.24em; text-transform: uppercase; }
.tagcloud__list { display: flex; flex-wrap: wrap; gap: 4px 20px; min-width: 0; margin: 0; padding: 0; list-style: none; }
.tagcloud__link { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 0; color: var(--soft); font-size: 15px; text-decoration: none; }
.tagcloud__link::before { content: "+"; color: var(--yellow); font-weight: 900; }
.tagcloud__link:hover { color: var(--ink); }
.tagcloud__link.is-active { color: var(--yellow); box-shadow: inset 0 -2px 0 var(--yellow); }
.tagcloud__link.is-active::before { content: "−"; }
.tagcloud__count { color: var(--mute); font-size: 11px; font-weight: 700; }
.tagcloud__empty { margin: 0; color: var(--mute); font-size: 14px; }
.listing__tag { margin: 22px 0 0; color: var(--soft); }
.listing__tag strong { color: var(--yellow); }
.listing__tag a { color: var(--ink); text-underline-offset: 3px; }

/* cards: the top tags as small "+ word" */
.post__fits { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 10px 0 0; padding: 0; list-style: none; }
.post__fit a { color: var(--soft); font-size: 13px; text-decoration: none; }
.post__fit a::before { content: "+ "; color: var(--yellow); font-weight: 900; }
.post__fit a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* post: the tag block — FAQ head + rows */
.fits { max-width: 1120px; margin-top: clamp(56px, 6vw, 96px); padding-top: 28px; border-top: 1px solid var(--line); }
.fits__title { margin: 0 0 18px; font: 900 clamp(34px, 4.4vw, 68px)/0.92 var(--display); letter-spacing: -0.035em; text-transform: uppercase; }
.fits__title::before { content: "Who is it for"; display: block; margin-bottom: 14px; color: var(--yellow); font: 700 12px/1 var(--text); letter-spacing: 0.24em; }
.fits__intro { max-width: 56ch; margin: 0 0 24px; color: var(--soft); }
.fits__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 0 32px; margin: 0 0 28px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.fits__item { border-bottom: 1px solid var(--line); }
.fits__vote { margin: 0; }
.fits__tag {
    display: grid; grid-template-columns: minmax(0, 1fr) auto var(--sign); align-items: center; gap: 12px;
    width: 100%; min-height: 56px; padding: 12px 0; border: 0; background: none; color: var(--ink);
    font: 700 18px/1.25 var(--display); text-align: left; cursor: pointer; transition: color 0.3s var(--ease);
}
.fits__tag::after {
    content: ""; grid-column: 3; grid-row: 1; width: var(--sign); height: var(--sign);
    background:
        linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
    transition: background-size 0.42s var(--ease);
}
.fits__tag:hover { color: var(--yellow); }
.fits__tag.is-mine, .fits__tag[aria-pressed="true"] { color: var(--yellow); }
.fits__tag.is-mine::after, .fits__tag[aria-pressed="true"]::after { background-size: 100% 2px, 2px 0; }
.fits__tag:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.fits__count { grid-column: 2; grid-row: 1; color: var(--mute); font: 500 14px/1 var(--text); letter-spacing: 0.08em; }
.fits__tag.is-mine .fits__count { color: var(--yellow); }
.fits__empty { margin: 0 0 24px; color: var(--soft); }
.fits-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; }
.fits-form__label { width: 100%; color: var(--yellow); font: 700 12px/1 var(--text); letter-spacing: 0.22em; text-transform: uppercase; }
.fits-form__input { flex: 1 1 220px; min-width: 0; max-width: 380px; min-height: 46px; padding: 12px 16px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--field); color: var(--ink); font: 400 16px/1.4 var(--text); }
.fits-form__input::placeholder { color: var(--mute); }
.fits-form__input:focus { border-color: var(--yellow); outline: none; box-shadow: 0 0 0 3px rgb(255 181 0 / 0.3); }
.fits-form__submit { min-height: 46px; font-family: var(--text); }