/* Catalog style "demo34" — tags add-on (loaded instead of _tags.css). Mirrors /demo34/ like demo34.css. */
/*
 * "Suits a site for …" as the sign-up form's checkboxes: every tag is a white row with a square
 * box, an agreed tag is a ticked deep green box (like "I agree to the Terms"); on cards the tags
 * are cover-line places with a lime-ringed dot.
 */

/* list page: the cloud is a form row of checkboxes under the categories */
.tagcloud { grid-column: 2; grid-row: 4; margin-top: 22px; }
.tagcloud__title { margin: 0 0 8px; font: 700 13px/1.2 var(--font); letter-spacing: 0.04em; text-transform: uppercase; }
.tagcloud__list { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.tagcloud__item { min-width: 0; }
.tagcloud__link {
    display: inline-flex; align-items: center; gap: 9px; max-width: 100%; min-height: 40px; padding: 6px 12px 6px 10px;
    border: 1.5px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font: 500 14px/1.25 var(--font);
    text-decoration: none; overflow-wrap: anywhere; transition: border-color 200ms ease;
}
.tagcloud__link::before { content: ""; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--white); }
.tagcloud__link:hover { border-color: var(--green); }
.tagcloud__link.is-active { border-color: var(--green); font-weight: 700; }
.tagcloud__link.is-active::before { content: "✓"; display: grid; place-items: center; border-color: var(--green); background: var(--green); color: var(--lime); font: 900 12px/1 var(--font); }
.tagcloud__count { color: var(--muted); font-size: 12px; font-weight: 700; }
.tagcloud__empty { margin: 0; color: var(--muted); font-size: 15px; }
.listing__tag strong { padding: 1px 6px; background: var(--lime); color: var(--green); }
.listing__tag a { color: var(--green); font-weight: 700; text-underline-offset: 3px; }

/* cards: places on the cover — small text with a dot, inside the field */
.post__fits { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0 0 10px; padding: 0; list-style: none; }
.post__fit a { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.post__fit a::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 1.5px var(--green); }
.post__fit a:hover { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }

/* post: a form step of checkboxes + the add field */
.fits { margin-top: 56px; padding-top: 30px; border-top: 2px solid var(--green); }
.fits__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0 0 10px; font: 900 clamp(34px, 3.2vw, 52px)/0.95 var(--font); letter-spacing: -0.05em; }
.fits__title::before { content: "Tick"; align-self: center; padding: 6px 9px; background: var(--lime); color: var(--green); font: 700 12px/1 var(--font); letter-spacing: 0.12em; text-transform: uppercase; }
.fits__intro { max-width: 60ch; margin: 0 0 20px; color: var(--muted); font-size: 17px; }
.fits__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.fits__vote { margin: 0; }
.fits__tag {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 10px 12px 10px 14px; border: 1.5px solid var(--line); border-radius: var(--r);
    background: var(--white); color: var(--ink); font: 500 15.5px/1.25 var(--font); text-align: left; cursor: pointer; transition: border-color 200ms ease, box-shadow 200ms ease;
}
.fits__tag::before { content: ""; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--line-2); border-radius: 5px; background: var(--white); }
.fits__tag:hover { border-color: var(--green); }
.fits__tag.is-mine { border-color: var(--green); font-weight: 700; }
.fits__tag.is-mine::before { content: "✓"; display: grid; place-items: center; border-color: var(--green); background: var(--green); color: var(--lime); font: 900 13px/1 var(--font); }
.fits__tag:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; box-shadow: 0 0 0 4px var(--lime); }
.fits__count { margin-left: auto; padding: 3px 8px; border-radius: 10px; background: var(--ground); color: var(--green); font-size: 13px; font-weight: 700; }
.fits__tag.is-mine .fits__count { background: var(--lime); }
.fits__empty { margin: 0 0 22px; color: var(--muted); }
.fits-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; margin: 0; }
.fits-form__label { grid-column: 1 / -1; font: 700 13px/1.2 var(--font); letter-spacing: 0.04em; text-transform: uppercase; }
.fits-form__label::before { content: "+"; margin-right: 8px; padding: 2px 6px; background: var(--lime); color: var(--green); font-size: 11px; }
.fits-form__input {
    min-width: 0; height: 54px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink);
    font: 500 17px/1 var(--font); transition: border-color 200ms ease, box-shadow 200ms ease;
}
.fits-form__input::placeholder { color: #6b786f; }
.fits-form__input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 4px rgb(200 240 106 / 0.85); }
.fits-form__submit {
    justify-content: center; height: 54px; min-height: 54px; padding: 0 26px; border: 2px solid var(--green); border-radius: var(--r); background: transparent;
    color: var(--green); font: 700 16px/1 var(--font); text-decoration: none; cursor: pointer;
}
.fits-form__submit:hover { background: var(--lime); border-color: var(--lime); }

@media (max-width: 900px) {
    .tagcloud { grid-column: 1; grid-row: auto; }
}