/* Catalog style "demo14" — tags add-on (loaded instead of _tags.css). */
/* tags as console switches in Instrument Serif: each has its LED; the lit (warm) one is the tag you agreed with, glowing under the key light */

/* list page: a second row of the console, under the category switches */
.tagcloud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 0; padding: 14px 20px; border-radius: 20px; border: 1px dashed var(--line); }
.tagcloud__title { margin: 0; color: var(--warm); font: italic 400 22px/1 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: 42px; padding: 0 16px 0 14px; border-radius: 999px;
    background: var(--ground); border: 1px solid var(--line); color: var(--ink); font: italic 400 20px/1 var(--serif); text-decoration: none;
    transition: border-color 200ms ease, background 200ms ease;
}
.tagcloud__link::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3a453e; transition: background 200ms ease, box-shadow 200ms ease; }
.tagcloud__link:hover { border-color: var(--soft); }
.tagcloud__link.is-active { background: var(--raise); border-color: var(--warm); color: var(--warm); }
.tagcloud__link.is-active::before { background: var(--warm); box-shadow: 0 0 10px var(--warm); }
.tagcloud__count { color: var(--soft); font: 400 13px/1 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.tagcloud__empty { margin: 0; color: var(--soft); font-size: 15px; }
.listing__tag strong { color: var(--warm); font: italic 400 1.35em/1 var(--serif); }
.listing__tag a { color: var(--ink); text-decoration-color: rgb(255 207 148 / 0.6); text-underline-offset: 5px; }
.listing__tag a:hover { color: var(--warm); }

/* cards: the top tags as small unlit switches under the counters */
.post__fits { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.post__fit a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 30px; padding: 0 13px 0 11px; border-radius: 999px; border: 1px solid var(--line);
    background: rgb(12 17 15 / 0.6); color: var(--ink); font: italic 400 17px/1 var(--serif); text-decoration: none; transition: border-color 200ms ease, color 200ms ease;
}
.post__fit a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgb(255 207 148 / 0.55); }
.post__fit a:hover { border-color: var(--warm); color: var(--warm); }

/* post: on the studio wall between the rating card and the comments */
.fits { max-width: 720px; margin: clamp(56px, 6vw, 88px) auto 0; }
.fits__title { margin: 0 0 10px; font: 400 clamp(40px, 4vw, 60px)/1 var(--serif); letter-spacing: -0.015em; }
.fits__title::before { content: ""; display: block; width: 36px; height: 2px; margin-bottom: 22px; border-radius: 2px; background: var(--warm); box-shadow: 0 0 12px var(--warm); }
.fits__intro { max-width: 48ch; margin: 0 0 26px; color: var(--soft); font-size: 16px; }
.fits__list { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; padding: 0; list-style: none; }
.fits__vote { margin: 0; }
.fits__tag {
    display: inline-flex; align-items: center; gap: 12px; min-height: 54px; padding: 0 20px 0 16px; border-radius: 12px; border: 1px solid var(--line);
    background: var(--wall); color: var(--ink); font: 400 25px/1.1 var(--serif); text-align: left; cursor: pointer;
    transition: border-color 250ms ease, background 250ms ease, color 250ms ease, box-shadow 400ms var(--ease);
}
.fits__tag::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #3a453e; transition: background 250ms ease, box-shadow 250ms ease; }
.fits__tag:hover { border-color: var(--soft); }
.fits__tag:hover::before { background: rgb(255 207 148 / 0.55); }
.fits__tag.is-mine { border-color: var(--warm); background: var(--warm); color: var(--dark); font-style: italic; box-shadow: 0 0 36px -6px rgb(255 207 148 / 0.7); }
.fits__tag.is-mine::before { background: var(--dark); box-shadow: none; }
.fits__tag:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.fits__count { color: var(--soft); font: 700 13px/1 var(--sans); font-style: normal; font-variant-numeric: tabular-nums; }
.fits__tag.is-mine .fits__count { color: var(--dark); }
.fits__empty { margin: 0 0 26px; color: var(--soft); font: italic 400 24px/1.3 var(--serif); }
.fits-form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin: 0; padding: clamp(18px, 2.6vw, 26px); border-radius: 16px; border: 1px solid var(--line); background: rgb(19 26 22 / 0.6); }
.fits-form__label { width: 100%; color: var(--soft); font-size: 14px; font-weight: 700; }
.fits-form__input {
    flex: 1 1 240px; min-width: 0; min-height: 50px; padding: 12px 16px; border: 1px solid #3a453e; border-radius: 10px;
    background: var(--ground); color: var(--ink); font: 400 17px/1.5 var(--sans); transition: border-color 200ms ease, box-shadow 300ms ease;
}
.fits-form__input::placeholder { color: #8a867d; }
.fits-form__input:hover { border-color: var(--soft); }
.fits-form__input:focus { outline: none; border-color: var(--warm); box-shadow: 0 0 0 3px rgb(255 207 148 / 0.3), 0 0 32px -8px rgb(255 207 148 / 0.5); }
.fits-form__submit { min-height: 50px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--yellow); color: var(--dark); text-decoration: none; cursor: pointer; }
.fits-form__submit:hover { background: #ffc83d; color: var(--dark); transform: translateY(-2px); }
@media (max-width: 640px) {
    .tagcloud { padding: 14px; }
    .tagcloud__title { width: 100%; }
    .fits__tag { font-size: 23px; }
    .fits-form__submit { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .fits-form__submit:hover { transform: none; }
}