/* The community tag control — /balloon/{reg}, /log/{id} and the gallery modal.
   One stylesheet because one renderer (Tools::tagControl) feeds all three.

   Every size here is declared rather than inherited. The site-wide `input`
   rule in style.css sets line-height:40px and margin-bottom:30px on every text
   field on the site, and buttons inherit body's 24px line box — left alone,
   that turns the add row into a tall field with a black lozenge beside it. The
   control states its own line-height, margin, padding and font on both the
   input and the button so the global rules cannot reshape it. */

.tagControl {
   /* Orange is the site accent (custom.css --theme-color) and carries focus
      here. Green and red stay reserved for the vote states, where they mean
      agreement and disagreement rather than brand. */
   --tag-accent: #ff9533;
   --tag-line: #e4e9e6;
   --tag-ink: #2b3230;
   --tag-muted: #7c8783;
   --tag-agree: #1c7a4d;
   --tag-against: #b02a37;

   margin: 1.25rem 0;
   font-family: "Gluten", sans-serif;
}

/* The page surfaces frame the control so it reads as one block rather than
   three loose rows under the stat cards. The gallery modal already has a title
   and a card of its own, so it opts out. */
.tagControl--framed {
   background: #f7f9f8;
   border: 1px solid #edf1ef;
   border-radius: 16px;
   padding: 1rem 1.15rem 1.05rem;
}

.tagControl--compact {
   margin: 0;
}

.tagControl-head {
   margin-bottom: .8rem;
}

.tagControl-title {
   display: flex;
   align-items: center;
   gap: .45rem;
   font-family: "Baloo 2", sans-serif;
   font-weight: 700;
   font-size: 1.05rem;
   line-height: 1.2;
   color: var(--tag-ink);
}

.tagControl-title i {
   font-size: .9rem;
   color: var(--tag-accent);
}

.tagControl-count {
   font-family: "Gluten", sans-serif;
   font-size: .7rem;
   font-weight: 600;
   font-variant-numeric: tabular-nums;
   line-height: 1;
   color: var(--tag-muted);
   background: #fff;
   border: 1px solid var(--tag-line);
   border-radius: 100px;
   padding: 3px 7px;
}

.tagControl-hint {
   display: block;
   font-size: .8rem;
   line-height: 1.4;
   color: var(--tag-muted);
   margin-top: .2rem;
}

.tagControl-chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: .85rem;
}

/* An empty control should still show the shape of the thing it is missing, so
   the placeholder is a chip outline rather than a line of grey text. */
.tagControl-empty {
   display: inline-flex;
   align-items: center;
   border: 1px dashed #ccd5d0;
   border-radius: 100px;
   background: #fff;
   padding: 5px 13px;
   font-size: .82rem;
   line-height: 1.4;
   color: var(--tag-muted);
}

.tagChip {
   display: inline-flex;
   align-items: center;
   gap: 1px;
   border: 1px solid var(--tag-line);
   border-radius: 100px;
   padding: 3px 4px 3px 0;
   font-size: .85rem;
   line-height: 1.4;
   background: #fff;
   transition: background .12s, border-color .12s, box-shadow .12s;
}

.tagChip:hover,
.tagChip:focus-within {
   border-color: #cfd8d3;
   box-shadow: 0 1px 3px rgba(16, 24, 20, .07);
}

.tagChip-link {
   padding: 2px 6px 2px 13px;
   color: var(--tag-ink);
   text-decoration: none;
}

.tagChip-link:hover { color: #000; text-decoration: underline; }

.tagChip.is-mine { border-color: #c3dccc; background: #f1f9f4; }
.tagChip.is-mine .tagChip-link { color: #15613c; }
.tagChip.state-proposed { border-style: dashed; background: #fffaf0; }
.tagChip.state-suppressed { background: #f4f5f5; color: var(--tag-muted); }
.tagChip.state-suppressed .tagChip-link { color: var(--tag-muted); text-decoration: line-through; }

.tagChip-flag {
   font-size: .62rem;
   text-transform: uppercase;
   letter-spacing: .06em;
   line-height: 1.5;
   color: #8a6512;
   background: #fdf3dd;
   border-radius: 100px;
   padding: 0 6px;
   margin-right: 3px;
}

.tagChip-flag--new { color: var(--tag-agree); background: #e7f3ec; }

/* Round, evenly sized targets: the arrows and the × sat on different metrics
   before and made the chip look assembled from spare parts. */
.tagChip-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   margin: 0;
   padding: 0;
   border: none;
   border-radius: 100px;
   background: none;
   font-family: inherit;
   font-size: .7rem;
   line-height: 1;
   color: #9aa5a0;
   transition: color .12s, background .12s;
}

.tagChip-btn:hover { color: var(--tag-ink); background: #e9eeeb; }
.tagChip-btn.is-on { color: var(--tag-agree); font-weight: 700; background: #e7f3ec; }
.tagChip-btn[data-act="down"].is-on { color: var(--tag-against); background: #fbeaec; }
.tagChip-btn[data-act="remove"] { font-size: 1rem; }
.tagChip-btn[data-act="remove"]:hover { color: var(--tag-against); background: #fbeaec; }
.tagChip-btn:disabled { opacity: .4; }

/* style.css clears `button:focus { outline: none }` for the whole site, which
   leaves keyboard users with nothing to follow. Focus is drawn back on here. */
.tagChip-btn:focus-visible,
.tagChip-link:focus-visible,
.tagControl-go:focus-visible {
   outline: 2px solid var(--tag-accent);
   outline-offset: 2px;
}

.tagChip-score {
   font-size: .72rem;
   font-variant-numeric: tabular-nums;
   min-width: 14px;
   text-align: center;
   color: var(--tag-muted);
}

.tagChip-score.is-negative { color: var(--tag-against); }

/* One pill holding the field and its button, rather than two controls that
   have to be talked into matching heights. The border and the focus ring live
   on the wrapper, so focus lights the whole thing. */
.tagControl-add {
   display: flex;
   align-items: center;
   gap: 6px;
   max-width: 360px;
   background: #fff;
   border: 1px solid var(--tag-line);
   border-radius: 100px;
   padding: 4px 4px 4px 6px;
   transition: border-color .12s, box-shadow .12s;
}

.tagControl-add:focus-within {
   border-color: var(--tag-accent);
   box-shadow: 0 0 0 3px rgba(255, 149, 51, .18);
}

.tagControl-input {
   flex: 1 1 auto;
   min-width: 0;
   width: 100%;
   margin: 0;
   padding: 4px 10px;
   border: none;
   border-radius: 100px;
   background: transparent;
   font-family: inherit;
   font-size: .88rem;
   line-height: 1.6;
   color: var(--tag-ink);
}

.tagControl-input:focus {
   outline: none;
   border: none;
   box-shadow: none;
}

.tagControl-input::placeholder { color: #9aa5a0; opacity: 1; }

.tagControl-go {
   flex: 0 0 auto;
   margin: 0;
   padding: 8px 16px;
   border: none;
   border-radius: 100px;
   background: var(--tag-ink);
   color: #fff;
   font-family: inherit;
   font-size: .8rem;
   font-weight: 600;
   line-height: 1;
   transition: background .12s, transform .08s;
}

.tagControl-go:hover { background: #000; }
.tagControl-go:active { transform: scale(.97); }

.tagControl-msg {
   font-size: .8rem;
   line-height: 1.4;
   margin-top: .5rem;
   min-height: 1.1em;
   color: var(--tag-muted);
}

.tagControl-msg.is-error { color: var(--tag-against); }
.tagControl-msg.is-ok { color: var(--tag-agree); }

/* The wrapper around just the thumbnail, so the tag launcher below can sit
   on the image's own corner without overlapping the registration link. */
.balloonGalleryItem-media {
   position: relative;
   display: inline-block;
}

/* The gallery grid's launcher: an icon pinned to the image's bottom-right
   corner. Grey means untagged, accent-coloured means tags already exist —
   both readable without needing a label. */
.galleryTagBtn {
   position: absolute;
   bottom: 6px;
   right: 6px;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   border: none;
   border-radius: 50%;
   background: rgba(0, 0, 0, .55);
   color: #fff;
   font-size: .7rem;
   padding: 0;
   opacity: 0;
   transition: opacity .12s, background .12s;
}

.galleryTagBtn.has-tags {
   background: var(--tag-accent);
}

.balloonGalleryItem:hover .galleryTagBtn,
.balloonGalleryItem:focus-within .galleryTagBtn { opacity: 1; }

/* Remove-photo, on your own gallery only. Bottom *left*, opposite the tag
   button, so the destructive one is never where the muscle memory for the
   harmless one is — they appear on the same hover, on the same tile, and a
   mis-tap costs a photograph. Red on hover rather than red always: it should be
   findable, not shouted. */
.galleryDeleteBtn {
   position: absolute;
   bottom: 6px;
   left: 6px;
   z-index: 3;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 22px;
   height: 22px;
   border: none;
   border-radius: 50%;
   background: rgba(0, 0, 0, .55);
   color: #fff;
   font-size: .7rem;
   padding: 0;
   opacity: 0;
   transition: opacity .12s, background .12s;
}

.galleryDeleteBtn:hover,
.galleryDeleteBtn:focus-visible { background: #a4341f; }

.galleryDeleteBtn:disabled { opacity: .5; cursor: progress; }

/* The administrator's version of the same control, on somebody else's tile.
   A shield rather than a bin, and amber rather than red, because the two are
   not the same act and an admin working through a gallery should never be in
   doubt about which one is under the cursor. */
.galleryDeleteBtn--admin { background: rgba(120, 63, 4, .65); }

.galleryDeleteBtn--admin:hover,
.galleryDeleteBtn--admin:focus-visible { background: #b5730c; }

/* "You have three of this one." Top-right, clear of the tag button at the
   bottom-right and the remove button at the bottom-left, and always visible
   rather than revealed on hover: it is information about the tile, not a
   control on it, and a count nobody sees until they hover is a count that has
   not been shown. */
.galleryMoreBadge {
   position: absolute;
   top: 6px;
   right: 6px;
   z-index: 3;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 22px;
   height: 18px;
   padding: 0 5px;
   border-radius: 9px;
   background: rgba(0, 0, 0, .6);
   color: #fff;
   font-size: .65rem;
   font-weight: 700;
   line-height: 1;
   text-decoration: none;
}

.galleryMoreBadge:hover,
.galleryMoreBadge:focus-visible { background: var(--tag-accent, #ca6200); color: #fff; }

/* On /balloon/{reg} the control is a direct child of the tile, which also
   carries a visible caption under the picture; in the gallery grid it sits
   inside .balloonGalleryItem-media, which is the picture and nothing else. So
   the balloon page needs the button lifted clear of its caption, and the child
   selector is what tells the two apart without a second class on the tile.
   Matched to .adminPhotoAdd, which sits opposite it on the same row. */
.balloonGalleryItem > .galleryDeleteBtn {
   bottom: 30px;
   left: 10px;
}

.balloonGalleryItem:hover .galleryDeleteBtn,
.balloonGalleryItem:focus-within .galleryDeleteBtn { opacity: 1; }

@media (hover: none) {
   .galleryTagBtn { opacity: 1; }
   .galleryDeleteBtn { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
   .galleryTagBtn,
   .galleryDeleteBtn,
   .tagChip,
   .tagChip-btn,
   .tagControl-add,
   .tagControl-go { transition: none; }

   .tagControl-go:active { transform: none; }
}