/* Catalog style "demo26" — tags add-on (loaded instead of _tags.css): a white pill rail of snap-scrolling chips, blue when agreed. Mirrors /demo26/. */
/*
 * List page: the tag cloud is a white pill rail under the style bar — the label on the left and
 * the chips in a snap-scrolling row that fades at its edge, like the people carousel of /demo26/.
 * Chips are soft grey with a white count badge; the active one turns ink. Cards: small grey chips
 * in blue text. Post: a white panel; each tag a pill button with a "+" squircle, agreed = Google
 * blue with a white tick squircle.
 */

/* list page: the rail */
.tagcloud { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 6px 6px 6px 20px; border-radius: 999px; background: var(--card); box-shadow: var(--sh-float); }
.tagcloud__title { flex: none; margin: 0; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.tagcloud__list {
    display: flex; flex: 1; gap: 6px; min-width: 0; margin: 0; padding: 2px 24px 2px 0; overflow-x: auto; list-style: none;
    scroll-snap-type: x proximity; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 40px), transparent);
}
.tagcloud__list::-webkit-scrollbar { display: none; }
.tagcloud__item { flex: none; scroll-snap-align: start; }
.tagcloud__link { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 4px 5px 4px 14px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 13.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background 0.15s, color 0.15s; }
.tagcloud__link:hover { background: var(--soft-2); }
.tagcloud__link.is-active { background: var(--ink); color: #fff; }
.tagcloud__count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 13px; background: #fff; color: var(--ink); font-size: 11.5px; font-weight: 800; box-shadow: 0 1px 2px rgb(0 0 0 / 0.14); }
.tagcloud__empty { margin: 0; padding: 8px 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.listing__tag { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 5px 5px 5px 16px; border-radius: 999px; background: var(--card); box-shadow: var(--sh-float); color: var(--muted); font-size: 14px; font-weight: 600; }
.listing__tag strong { color: var(--ink); font-weight: 800; }
.listing__tag a { padding: 6px 14px; border-radius: 999px; background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 800; text-decoration: none; }
.listing__tag a:hover { background: var(--ink); color: #fff; }

/* cards */
.post__fits { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.post__fit a { display: inline-block; padding: 4px 10px; border-radius: 999px; background: #e8f0fe; color: var(--blue-ink); font-size: 12px; font-weight: 800; text-decoration: none; }
.post__fit a:hover { background: var(--blue); color: #fff; }

/* post: the tag panel */
.fits { margin-top: 16px; padding: 32px 40px; background: var(--card); border-radius: var(--r); box-shadow: var(--sh); }
.fits__title { margin: 0 0 6px; font-size: 27px; font-weight: 800; line-height: 1.15; letter-spacing: -0.03em; }
.fits__intro { max-width: 60ch; 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__vote { margin: 0; }
.fits__tag {
    display: inline-flex; align-items: center; gap: 9px; min-height: 46px; padding: 6px 7px 6px 6px; border: 0; border-radius: 999px; background: var(--soft);
    color: var(--ink); font: 700 14.5px/1.25 var(--font); text-align: left; cursor: pointer; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fits__tag::before { content: "+"; display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 11px; background: var(--card); color: var(--blue); font-size: 18px; font-weight: 800; line-height: 1; box-shadow: 0 1px 2px rgb(0 0 0 / 0.12); }
.fits__tag:hover { background: var(--soft-2); }
.fits__tag.is-mine { background: var(--blue); color: #fff; }
.fits__tag.is-mine::before { content: "✓"; color: var(--blue); font-size: 14px; }
.fits__tag.is-mine:hover { background: var(--blue-hover); }
.fits__tag:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.fits__count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; background: var(--card); color: var(--ink); font-size: 12px; font-weight: 800; }
.fits__tag.is-mine .fits__count { background: rgb(255 255 255 / 0.2); color: #fff; }
.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: 18px; border-top: 1px solid var(--line); }
.fits-form__label { width: 100%; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.fits-form__input { flex: 1 1 220px; min-width: 0; max-width: 360px; min-height: 46px; padding: 10px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--soft); color: var(--ink); font: 600 15px/1.3 var(--font); }
.fits-form__input::placeholder { color: #6b7280; }
.fits-form__input:focus { border-color: var(--blue); outline: none; background: #fff; box-shadow: 0 0 0 3px rgb(26 115 232 / 0.22); }
.fits-form__submit { min-height: 46px; background: var(--ink); color: #fff; }
.fits-form__submit:hover { background: #000; }

@media (max-width: 860px) {
    .fits { padding: 24px; }
}
@media (max-width: 700px) {
    .tagcloud { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 6px 6px 16px; border-radius: 24px; }
}
@media (max-width: 520px) {
    .fits { padding: 22px 16px; border-radius: 24px; }
}