/*
 * Styles for the redesigned label detail view (see app/views/common/labelDetail.scala.html).
 *
 * The base `.label-detail` rules style a self-contained label-info card. Two host modes are supported:
 *   - Modal popup (LabelMap, Dashboard, Admin): the host is a <dialog id="label-modal" class="label-detail">.
 *     Modal-specific styling (fixed width, ::backdrop, opening transition, init-offscreen hack) lives below.
 *   - Inline (Gallery's expanded view): the host adds `.label-detail--inline`, which drops the dialog-fixed
 *     sizing and lets the parent grid drive the dimensions. Paging-arrow rules also live in the inline section.
 *
 * Scoped under `.label-detail` so nothing here leaks into Bootstrap-3-styled pages elsewhere.
 */

/* Many of the card's elements carry their own display: flex/inline-flex, which would beat the UA stylesheet's
   `[hidden] { display: none }` regardless of specificity. One guard so every hidden-toggled element actually hides. */
.label-detail [hidden] { display: none !important; }

.label-detail {
  box-sizing: border-box;
  width: 650px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  padding: 22px;
  border: none;
  border-radius: 12px;
  background: var(--color-neutral-white);
  color: var(--color-neutral-900);
  box-shadow: 0 20px 50px rgb(0 0 0 / 25%);
  font-family: var(--font-primary);
  overflow-y: auto;
  overscroll-behavior: contain;

  /* When content overflows (e.g. the Dashboard adds its mistake-response panel), a default opaque scrollbar
     track paints square over the right rounded corners. A thin thumb on a transparent track keeps them round. */
  scrollbar-width: thin;
  scrollbar-color: rgb(0 0 0 / 35%) transparent;
}

.label-detail::backdrop {
  background: rgb(0 0 0 / 45%);
}

/* LabelMap host: the map behind the dialog is the open label's context (the spotlight beacon sits beside the
   dialog), so keep the veil light enough that the spotlighted dot stays readable. */
.label-detail--map-host::backdrop {
  background: rgb(0 0 0 / 12%);
}

/* Used during pano-viewer init: dialog must be in the DOM and visible to lay out, but invisible to the user. */
.label-detail.label-detail--initializing,
.label-detail.label-detail--initializing::backdrop {
  visibility: hidden;
  transition: none;
}

/* Open / close transition. Requires @starting-style + transition-behavior: allow-discrete. Only applies to the
   modal host (Gallery's inline host doesn't use [open] / ::backdrop). */
dialog.label-detail,
dialog.label-detail::backdrop {
  opacity: 0;
  transition:
    opacity 180ms ease,
    overlay 180ms ease allow-discrete,
    display 180ms ease allow-discrete;
}

dialog.label-detail[open],
dialog.label-detail[open]::backdrop {
  opacity: 1;
}

@starting-style {
  dialog.label-detail[open],
  dialog.label-detail[open]::backdrop {
    opacity: 0;
  }
}

/* ─── Header ──────────────────────────────────────────────────────────── */

.label-detail__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.label-detail__title {
  flex: 1 0 0;
  margin: 0;
  font: var(--text-h3-bold);
  color: var(--color-neutral-black);
}

.label-detail__close {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  color: var(--color-neutral-black);
  cursor: pointer;
  border-radius: 4px;
}
.label-detail__close:hover { background: rgb(0 0 0 / 6%); }

.label-detail__close:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
}

.label-detail__close svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ─── Pano viewer ─────────────────────────────────────────────────────── */

/* Wrap holds the pano + the hover-reveal validation overlay, and clips both to the rounded corners. The ::after
   ring is the "selected validation" indicator (invisible by default, colored when a vote is set) — an overlay
   rather than a border so the image sits flush edge-to-edge and nothing shifts when the ring appears. */
.label-detail__pano-wrap {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 6px;
}

.label-detail__pano-wrap::after {
  content: "";
  position: absolute;
  inset: 0;

  /* The GSV widget's internal layers carry small positive z-indexes that leak into this stacking context, so the
     ring must sit above them (and above the z-index:1 hover overlay); the info popover stays higher at 10/11. */
  z-index: 5;
  border: 5px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  transition: border-color 150ms ease;
}
.label-detail__pano-wrap.is-agree::after    { border-color: var(--color-pine-500); }
.label-detail__pano-wrap.is-disagree::after { border-color: #eb734d; }
.label-detail__pano-wrap.is-unsure::after   { border-color: var(--color-asphalt-100); }

.label-detail__pano {
  position: relative;
  width: 100%;
  aspect-ratio: 720 / 480;
  background: #e9e9e9;
  overflow: hidden;
}

/* Standard pan affordance: open hand over the draggable imagery, closed while dragging. Applies wherever the
   viewer's own internals don't set a closer cursor (Pannellum brings its own; the crop fallback and any gaps
   inherit these). */
.label-detail__pano,
#pano-fallback-pz {
  cursor: grab;
}

.label-detail__pano:active,
#pano-fallback-pz:active {
  cursor: grabbing;
}

/* Halo pulse draws the eye to the label marker when the card opens; the marker icon alone is small and often
   low-contrast against pavement. The background sizing scales the SVG marker to whatever box PanoMarker sets. */
@keyframes label-detail-marker-pulse {
  from { box-shadow: 0 0 0 0 rgb(255 255 255 / 90%); }
  to { box-shadow: 0 0 0 18px rgb(255 255 255 / 0%); }
}

.label-detail__marker-pulse {
  border-radius: 50%;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  animation: label-detail-marker-pulse 1.4s ease-out 1;

  /* Visual only: let a click-and-drag pass through to the pano so the streetscape still pans when the drag
     starts over the marker (#4574, Mikey #6) — matching the crop fallback marker, which is already pass-through. */
  pointer-events: none;
}

/* The AI-generated badge keeps its own hover tooltip; it's a tiny corner target, so panning is barely affected. */
.label-detail__marker-pulse .admin-ai-icon-marker { pointer-events: auto; }

/* One-time "pannable" hint chip over the imagery; LabelDetail toggles is-visible briefly on first open. Sits at
   the top of the image, clear of the hover validation overlay at the bottom. */
.label-detail__pan-hint {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6; /* Above the validation ring (5), below the info popover (10). */
  padding: 5px 14px;
  border-radius: 999px;
  background: rgb(0 0 0 / 65%);
  color: var(--color-neutral-white);
  font: var(--text-caption-medium);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 400ms ease;
}

.label-detail__pan-hint.is-visible { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .label-detail__marker-pulse { animation: none; }

  .label-detail__pan-hint { transition: none; }
}

/* GSV sets a plain cursor inline on its own drag surface, so it needs !important to lose. */
.label-detail__pano .widget-scene,
.label-detail__pano .widget-scene-canvas {
  cursor: grab !important;
}

.label-detail__pano .widget-scene:active,
.label-detail__pano .widget-scene-canvas:active {
  cursor: grabbing !important;
}

/* No-imagery / expired-label panel (#4483): shown by PopupPanoManager when a pano fails to load and there is no crop
   fallback. Absolutely fills svHolder (kept position:relative in JS) and centers a branded logo, one concise message,
   and a button CTA. Shared by every LabelDetail surface (Gallery expanded, LabelMap popup, Admin, share page). */
.pano-not-avail {
  position: absolute;
  inset: 0;
  display: none; /* PopupPanoManager toggles this to flex */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 200px; /* floor so the panel is visible even if svHolder momentarily has no resolved height */
  padding: 24px;
  background: var(--color-asphalt-100);
  text-align: center;
}

.pano-not-avail__logo {
  width: 64px;
  height: 64px;
}

.pano-not-avail__msg {
  max-width: 480px; /* wide enough to keep the message on one line on a full-size pano; wraps on narrow surfaces */
  margin: 0;
  font-weight: 600;
  font-size: 18px;
  font-family: Raleway, sans-serif;
  color: var(--color-neutral-black);
}

.pano-not-avail__cta {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 9px 22px;
  border-radius: 999px;
  background: var(--color-pine-500);
  color: var(--color-neutral-black);
  font-weight: 600;
  font-size: 15px;
  font-family: Raleway, sans-serif;
  text-decoration: none;
  transition: opacity 120ms ease;
}

.pano-not-avail__cta:hover { opacity: 0.9; }

.pano-not-avail__cta:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
}

/* Hover-reveal validation buttons at bottom of pano. Modeled after Gallery's old expanded-view validation buttons. */
.label-detail__pano-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  gap: 1px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}

.label-detail__pano-wrap:hover .label-detail__pano-overlay,
.label-detail__pano-overlay:focus-within {
  opacity: 1;
  pointer-events: auto;
}

.label-detail__pano-overlay-button {
  flex: 1 0 0;
  height: 56px;
  padding: 16px;
  border: none;
  color: var(--color-neutral-black);
  font-family: Raleway, sans-serif;
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 120ms ease;
}
.label-detail__pano-overlay-button:hover { opacity: 0.95; }

.label-detail__pano-overlay-button:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: -2px;
}
.label-detail__pano-overlay-button[disabled] { cursor: wait; }

.label-detail__pano-overlay-button--agree    { background: var(--color-pine-500); }
.label-detail__pano-overlay-button--disagree { background: #eb734d; }
.label-detail__pano-overlay-button--unsure   { background: var(--color-asphalt-100); }

.label-detail__pano-overlay-button.is-selected { opacity: 1; }

/* Read-only mode: validating/commenting is blocked (the viewer's own label, or no imagery is available for it).
   Elements remain visible but appear disabled. */
.label-detail--readonly .label-detail__pano-overlay-button {
  opacity: 0.8;
  background: #E2E2E2;
  cursor: default;
  color: rgb(0 0 0 / 40%);
}
.label-detail--readonly .label-detail__pano-overlay-button:hover { opacity: 0.8; }
.label-detail--readonly .label-detail__vote[disabled] { cursor: default; }

.label-detail--readonly .label-detail__comment-input:disabled {
  background: #f5f5f5;
  color: #999999;
  cursor: default;
}

.label-detail--readonly .label-detail__comment-submit:disabled {
  cursor: default;
  opacity: 0.5;
}

/* ─── Metadata strip (labeled / image date / address / details, #4572) ── */

/* One quiet caption line of facts under the pano, clustered left with even gaps; Details sits alone at the
   right edge (spreading the facts edge-to-edge read awkwardly at wide card widths). nowrap: the row never breaks
   to a second line — the address (the sole shrinkable cell below) ellipsizes instead (#4572, Mikey #4). */
.label-detail__meta-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px 14px;
  margin-bottom: 16px;
}

.label-detail__meta-cell {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  flex-shrink: 0; /* Fixed facts hold their size; only the address cell below opts back into shrinking. */
  font: var(--text-caption-medium);
  color: var(--color-neutral-700);
}

/* Dividers are their own flex items, centered in the row's even gaps; slightly shorter than the 18px text line
   and self-centered vertically. LabelDetail toggles the address's divider together with its cell. */
.label-detail__meta-divider {
  align-self: center;
  flex-shrink: 0;
  width: 1px;
  height: 13px;
  background: var(--color-neutral-300);
}

.label-detail__meta-value {
  font: var(--text-caption-semibold);
  color: var(--color-neutral-900);
}

/* The address is the row's only shrinkable cell: it absorbs all the tightening and ellipsizes, so the fixed
   facts and the Details action stay put on one line. #fitMetaRow drops the timestamp's clock time, then the
   "Details" word, when the address is being clipped — handing it more room before it shortens too far. */
.label-detail__meta-cell--address { flex-shrink: 1; }

.label-detail__meta-row--no-time .label-detail__timestamp-time { display: none; }
.label-detail__meta-row--compact-details .label-detail__meta-cell--details > span:first-child { display: none; }

/* Addresses can be long; ellipsize instead of widening the row. */
.label-detail__address {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: inherit;
  text-decoration: none;
}

/* Linked state (live imagery available): read as a link, open the provider's viewer. */
.label-detail__address[href] { color: var(--color-link-200); }
.label-detail__address[href]::after { content: " ↗"; }
.label-detail__address[href]:hover { text-decoration: underline; }

.label-detail__address[href]:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Details is an action, not a fact: a quiet text button at the row's right edge (no divider). */
button.label-detail__meta-cell {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: var(--text-caption-medium);
  color: var(--color-neutral-700);
}
button.label-detail__meta-cell:hover { color: var(--color-neutral-900); }

button.label-detail__meta-cell:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The lone action at the row's right edge, apart from the fact cluster. */
.label-detail__meta-cell--details { margin-left: auto; }


/* Vertically center the PanoInfoPopover info button (img) with the surrounding text. The (i) is the "value" of
   the Details: control; the size hook main.css's `#pano-info-button` rule exposes fits it to the text line. */
.label-detail__info-button-host {
  display: inline-flex;
  align-items: center;
  --pano-info-button-size: 16px;
}

/* ─── Three-column row: Validations / Severity / Tags ─────────────────── */

.label-detail__columns {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  margin-bottom: 16px;
}

/* Section eyebrows: quiet, uppercase, muted — the section's *content* carries the visual weight, not its label. */
.label-detail__col-title {
  margin: 0 0 8px;
  font: var(--text-caption-semibold);
  color: var(--color-neutral-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.label-detail__col--validations { flex: 0 0 auto; }
.label-detail__col--severity    { flex: 0 0 auto; }

.label-detail__col--tags        {
  flex: 1 1 auto;
  min-width: 0;
}

/* Validation count display — non-interactive icon + count groups, modeled on the Figma redesign
   (LabelMap-Redesign frame 537:17). The actual validate action lives on the pano hover overlay. */
.label-detail__vote-display {
  display: flex;
  gap: 8px;
}

/* Icon + count over the action word, mirroring the severity faces' icon-over-word rhythm. */
.label-detail__vote {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: calc(5px * var(--ui-scale, 1));
  padding: 0;
  background: none;
  border: none;
  color: var(--color-neutral-black);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}

/* Icon size and row gap match the severity faces (24px icons, 5px gap) so the word rows under the two
   columns align perfectly. */
.label-detail__vote-top {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  height: calc(24px * var(--ui-scale, 1));
}

.label-detail__vote-label {
  font: var(--text-caption-medium);
  text-align: center;
  white-space: nowrap;
}

.label-detail__vote:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
  border-radius: 4px;
}

.label-detail__vote[disabled] {
  cursor: wait;
  opacity: 0.5;
}

.label-detail__vote-icon {
  width: calc(24px * var(--ui-scale, 1));
  height: calc(24px * var(--ui-scale, 1));
  flex-shrink: 0;
  display: block;
}

.label-detail__vote-count {
  font-variant-numeric: tabular-nums;
}

/* Severity faces — the inner faces use the shared .severity-button (--static) styles in main.css. Content-sized
   columns with start alignment keep the first face flush with the SEVERITY eyebrow (1fr columns all take the
   widest word's width, which centers "Low" — and its face — visibly right of the header). */
.label-detail__severity-faces {
  display: inline-grid;
  grid-template-columns: repeat(3, auto);
  place-items: flex-start start;
  gap: 8px;
}

/* Tag pills — base styles are in tag-pills.css (.tag-pill class). */
.label-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ─── Comment row ─────────────────────────────────────────────────────── */

/* Leads the Validator Comments section; newest comments render right beneath it. Collapsed until a
   Disagree/Unsure vote adds .is-open; the max-height transition slides it out rather than popping. */
.label-detail__comment-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 2px 0 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;

  /* visibility keeps the collapsed input/button out of the tab order and accessibility tree; its 220ms delay
     holds the row visible until the collapse transition finishes. */
  visibility: hidden;
  transition: max-height 220ms ease, opacity 180ms ease, margin-bottom 220ms ease, visibility 0s 220ms;
}

.label-detail__comment-row.is-open {
  max-height: 60px; /* Anything comfortably above the input's 34px; the transition end point. */
  margin-bottom: 8px;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s; /* Reveal immediately on open; the delay above only applies to the collapse. */
}

@media (prefers-reduced-motion: reduce) {
  .label-detail__comment-row { transition: none; }
}

/* While the input is up, it replaces the list's "None" placeholder rather than stacking with it. */
.label-detail__comment-row.is-open ~ .label-detail__validator-comments.label-detail__empty { display: none; }

/* Explicit border-box + flex centering keep the input and button the same height with the text dead-center —
   fixed heights plus vertical padding drift apart under the two elements' different default box models. */
.label-detail__comment-input {
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 0 18px;
  border: 1px solid var(--color-neutral-400);
  border-radius: 999px;
  font: var(--text-caption-regular);
  color: var(--color-neutral-900);
}

.label-detail__comment-input:focus {
  outline: none;
  border-color: var(--color-link-100);
}

/* neutral-700 (not -600) so the placeholder clears WCAG AA (4.5:1) on the white input. */
.label-detail__comment-input::placeholder { color: var(--color-neutral-700); }

.label-detail__comment-submit {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 18px;
  border: none;
  border-radius: 999px;
  background: var(--color-neutral-200);

  /* neutral-800 (not -600): the button is clickable even in this resting state, so its label must clear WCAG AA
     (4.5:1) on the neutral-200 fill. The green .is-active state still reads as the clear "ready to send" change. */
  color: var(--color-neutral-800);
  font: var(--text-caption-semibold);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.label-detail__comment-submit.is-active {
  background: var(--color-pine-600);
  color: var(--color-neutral-white);
}

.label-detail__comment-submit:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
}

.label-detail__comment-confirmation {
  font: var(--text-caption-regular);
  color: var(--color-pine-700);
}

/* ─── Description / comments ──────────────────────────────────────────── */

/* The top border groups the community-input zone (description, comments, comment box, share) apart from the
   label facts above — the card's single divider. */
.label-detail__desc-comments {
  padding-top: 14px;
  border-top: 1px solid var(--color-neutral-200);
}

.label-detail__description-section {
  margin: 0 0 16px;
}

/* Room for ~4 lines before scrolling; both wells share the same shape so the two sources read as siblings. */
.label-detail__description,
.label-detail__validator-comments {
  display: block;
  max-height: 72px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font: var(--text-small-regular);
  color: var(--color-neutral-900);
}

.label-detail__empty {
  color: var(--color-neutral-700);
  font-weight: 400;
}

/* Comments eyebrow + its count badge. */
.label-detail__comments-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.label-detail__comments-count {
  padding: 1px 8px;
  border-radius: 999px;
  background: var(--color-neutral-200);
  font: var(--text-caption-semibold);
  color: var(--color-neutral-800);
}

/* Marks the signed-in user's own comment in the list. */
.label-detail__comment-you {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-pine-200);
  font: var(--text-tiny-semibold);
  color: var(--color-pine-900);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Anonymous per-commenter avatar; the color class comes from the backend's per-label commenter index. */
.label-detail__comment-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: 50%;
  color: var(--color-neutral-white);
  vertical-align: middle;
}

.label-detail__comment-avatar svg {
  width: 13px;
  height: 13px;
  display: block;
}

.label-detail__comment-avatar--0 { background: var(--color-asphalt-400); }
.label-detail__comment-avatar--1 { background: var(--color-pine-600); }
.label-detail__comment-avatar--2 { background: var(--color-orange-400); }
.label-detail__comment-avatar--3 { background: var(--color-link-100); }
.label-detail__comment-avatar--4 { background: var(--color-banana-700); }
.label-detail__comment-avatar--5 { background: var(--color-asphalt-200); }

/* When the comment was left (relative time; exact date in the tooltip). */
.label-detail__comment-when {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--color-neutral-100);
  font: var(--text-tiny-medium);
  color: var(--color-neutral-700);
}

.label-detail__validator-comments hr {
  border: none;
  border-top: 1px solid var(--color-neutral-200);
  margin: 4px 0;
}

/* ─── Collapsible details / admin sections ───────────────────────────── */

.label-detail__details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-neutral-200);
  font-size: 13px;
}

.label-detail__details-summary {
  cursor: pointer;
  font: var(--text-caption-semibold);
  color: var(--color-neutral-700);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.label-detail__details-summary:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
}

.label-detail__details-list {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr;
  gap: 4px 12px;
  margin: 8px 0 0;
}

.label-detail__details-list dt {
  font-weight: 600;
  color: var(--color-neutral-700);
}
.label-detail__details-list dd { margin: 0; }

/* Admin flag controls */
.label-detail__flag-controls h4 {
  margin: 12px 0 4px;
  font-size: 13px;
  font-weight: 600;
}

.label-detail__flag-controls p {
  margin: 0 0 8px;
  font-size: 12px;
  color: #555555;
}

.label-detail__flag-buttons {
  display: flex;
  gap: 6px;
}

.label-detail__flag-button {
  padding: 6px 12px;
  border: 1px solid #999999;
  border-radius: 4px;
  background: var(--color-neutral-white);
  font-size: 12px;
  cursor: pointer;
}

.label-detail__flag-button.is-active {
  background: var(--color-neutral-300);
}

/* ─── Inline mode (Gallery expanded view) ──────────────────────────────
 * Drops the modal-style fixed sizing and adds prev/next paging buttons. The host element supplies its own
 * width/height via the parent grid; we just stretch and lay out children to fit. */

/* The host panel (.gallery-expanded-view) owns the size caps; inside, the card styles exactly like the modal
   (same padding, spacing, and pano aspect) so the shared component reads identically on every surface. The
   paging arrows float over the pano's edges, so no side gutters are needed for them. */
.label-detail--inline {
  padding: 22px;
}

/* Paging arrows (only rendered when @withPaging = true): translucent carousel-style chips floating over the
   pano's left/right edges. */
.label-detail__paging {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 85%);
  box-shadow: 0 1px 4px rgb(0 0 0 / 25%);
  color: var(--color-asphalt-500);
  cursor: pointer;

  /* Hover-revealed like the vote overlay, so the imagery stays clean at rest; keyboard focus reveals too. */
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}

.label-detail__pano-wrap:hover .label-detail__paging,
.label-detail__paging:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.label-detail__paging svg { display: block; }

.label-detail__paging:hover {
  background: var(--color-neutral-white);
  color: var(--color-neutral-black);
}

.label-detail__paging:disabled {
  background: rgb(255 255 255 / 55%);
  color: var(--color-neutral-500);
  box-shadow: none;
  cursor: default;
}

.label-detail__paging:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
}
.label-detail__paging--prev { left: 10px; }
.label-detail__paging--next { right: 10px; }

/* ─── Share control (#456) ────────────────────────────────────────────────
   Subtle, YouTube-style share button anchored bottom-right, with an accessible popover. */
.label-detail__footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Cross-surface hop to the LabelMap; styled as a sibling of the share pill. Hidden until LabelDetail fills the
   href (hosts opt in) — explicit so the attribute beats display: inline-flex. */
.label-detail__labelmap-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-300);
  border-radius: 18px;
  font: var(--text-small-medium);
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.label-detail__labelmap-link:hover {
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-400);
}

.label-detail__labelmap-link:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
}

.label-detail__labelmap-link img {
  width: 14px;
  height: 14px;
  display: block;
}

/* Anchor for the absolutely-positioned popover. */
.label-detail__share {
  position: relative;
}

.label-detail__share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-300);
  border-radius: 18px;
  font: var(--text-small-medium);
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.label-detail__share-trigger:hover {
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-400);
}

.label-detail__share-trigger:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
}

.label-detail__share-trigger svg {
  display: block;
  flex-shrink: 0;
}

/* Popover: opens above the trigger, right-aligned. */
.label-detail__share-popover {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  z-index: 10;
  min-width: 200px;
  padding: 6px;
  background: var(--color-neutral-white);
  border: 1px solid var(--color-neutral-300);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
}

.label-detail__share-heading {
  margin: 4px 8px 6px;
  font: var(--text-caption-semibold);
  color: var(--color-neutral-700);
}

.label-detail__share-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  font: var(--text-small-medium);
  color: var(--color-neutral-900);
  text-align: left;
  cursor: pointer;
}

.label-detail__share-item:hover {
  background: var(--color-neutral-100);
}

.label-detail__share-item:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: -2px;
}

.label-detail__share-item.is-copied {
  color: var(--color-success-200);
}

.label-detail__share-item-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--color-neutral-700);
}

.label-detail__share-item.is-copied .label-detail__share-item-icon {
  color: var(--color-success-200);
}

.label-detail__share-item-icon svg {
  display: block;
}

/* ─── Lived-experience stories (#4054) ────────────────────────────────────
   Collapsed disclosure with a count badge; expanding reveals the story list (text, optional photo thumbnail that
   opens the enlarge dialog, own-story delete). The composer + lightbox dialogs are rendered by the same partial. */
.label-detail__stories {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eeeeee;
}

.label-detail__stories-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 16px;
  color: var(--color-neutral-black);
  list-style: none;
}

.label-detail__stories-summary::-webkit-details-marker { display: none; }

.label-detail__stories-summary:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.label-detail__stories-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--color-asphalt-500);
  color: var(--color-neutral-white);
  font-size: 12px;

  /* Tight line box so the digit sits on the flex center instead of high in an inherited ~1.5 line-height. */
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.label-detail__stories-count[hidden] { display: none; }

/* Outline pill CTA (Variant B placement on the C.2 disclosure). Deliberately NOT pine green: on this card green
   already means "Agree" on the validation buttons right above, so the CTA stays neutral to keep that meaning. */
.label-detail__story-share {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  border: 1px solid var(--color-neutral-500);
  border-radius: 999px;
  background: var(--color-neutral-white);
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-neutral-900);
  transition: background-color 120ms ease;
}

.label-detail__story-share img {
  width: 15px;
  height: 15px;
  display: block;
}

.label-detail__story-share[hidden] { display: none; }

.label-detail__story-share:hover { background: var(--color-neutral-100); }

.label-detail__story-share:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Zero-story CTA in the footer row (the stories section is hidden until a story exists): dressed to match its
   labelmap-link/share-trigger siblings so the three read as one row (per Jon: uniform light gray for now), but
   pushed to the left edge so the share-this-page actions keep their own group on the right. */
.label-detail__story-share--footer {
  margin-right: auto;
  gap: 6px;
  padding: 5px 12px;
  background: var(--color-neutral-100);
  color: var(--color-neutral-800);
  border: 1px solid var(--color-neutral-300);
  border-radius: 18px;
  font: var(--text-small-medium);
}

.label-detail__story-share--footer:hover {
  background: var(--color-neutral-200);
  border-color: var(--color-neutral-400);
}

.label-detail__stories-arrow {
  margin-left: auto;
  color: #555555;
  transition: transform 150ms ease;
}

.label-detail__stories-details[open] .label-detail__stories-arrow { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .label-detail__stories-arrow { transition: none; }
}

.label-detail__stories-list {
  max-height: 220px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.label-detail__story {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-top: 10px;
}

.label-detail__story--hidden { opacity: 0.75; }

.label-detail__story-photo-btn {
  flex: none;
  padding: 0;
  border: none;
  background: none;
  border-radius: 6px;
  cursor: zoom-in;
}

.label-detail__story-photo-btn:hover .label-detail__story-thumb { box-shadow: 0 2px 8px rgb(0 0 0 / 25%); }

.label-detail__story-photo-btn:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.label-detail__story-thumb {
  display: block;
  width: 110px;
  height: 82px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-neutral-300);
}

.label-detail__story-body {
  flex: 1 1 auto;
  min-width: 0;
}

.label-detail__story-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

.label-detail__story-byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
  font-size: 12px;
  color: #595959;
}

.label-detail__story-who {
  font-weight: 600;
  color: var(--color-neutral-900);
}

.label-detail__story-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  line-height: 1;
}

.label-detail__story-chip--own {
  background: var(--color-pine-100);
  border: 1px solid var(--color-pine-500);
  color: var(--color-pine-800);
}

.label-detail__story-chip--hidden {
  background: var(--color-banana-100);
  border: 1px solid var(--color-banana-700);
  color: var(--color-banana-900);
}

.label-detail__story-edit,
.label-detail__story-delete {
  padding: 2px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  text-decoration: underline;
}

.label-detail__story-edit { color: var(--color-link-200); }

.label-detail__story-delete { color: var(--color-orange-700); }

.label-detail__story-edit:focus-visible,
.label-detail__story-delete:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
  border-radius: 4px;
}

.label-detail__story-dashboard-link {
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 11px;
  color: var(--color-link-200);
  text-decoration: underline;
}

.label-detail__story-dashboard-link:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── Story composer dialog (#4054) ─────────────────────────────────────── */
dialog.story-composer {
  box-sizing: border-box;
  position: relative;
  width: 520px;
  max-width: calc(100vw - 32px);
  border: none;
  border-radius: 12px;
  padding: 24px;
  background: var(--color-neutral-white);
  color: var(--color-neutral-black);
  box-shadow: 0 20px 50px rgb(0 0 0 / 30%);
  font-family: var(--font-primary);
  font-size: 14px;
}

dialog.story-composer::backdrop,
dialog.story-lightbox::backdrop { background: rgb(0 0 0 / 45%); }

/* Weight hierarchy (deliberate, and defended against Bootstrap 3's globals — `label { font-weight: bold }` and
   normalize's `textarea/input { font: inherit }` would otherwise bolden option rows and typed text): title 600,
   field labels 600, everything the user reads or types 400. */
.story-composer__title {
  margin: 0 0 4px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
}

.story-composer__intro {
  margin: 0 0 16px;
  color: #595959;
  font-size: 13px;
}

.story-composer__field {
  display: block;
  margin-bottom: 0;
  font-weight: 400;
}

.story-composer__field-label {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
}

.story-composer__text {
  box-sizing: border-box;
  width: 100%;
  min-height: 110px;
  resize: vertical;
  padding: 10px 12px;
  border: 1px solid #807f7f;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-neutral-black);
}

.story-composer__text:focus,
.story-composer__alt-input:focus {
  outline: none;
  border-color: #4a90e2;
}

.story-composer__counter {
  margin: 2px 0 14px;
  text-align: right;
  font-size: 11px;
  color: var(--color-neutral-600);
  font-variant-numeric: tabular-nums;
}

.story-composer__photo-row { margin-bottom: 14px; }

.story-composer__photo-attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
  padding: 10px 14px;
  border: 1px dashed #999999;
  border-radius: 8px;
  background: #fafafa;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-asphalt-400);
}

.story-composer__photo-attach[hidden] { display: none; }

.story-composer__photo-attach:hover {
  border-color: var(--color-pine-700);
  color: var(--color-pine-800);
}

.story-composer__photo-attach:focus-within {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

.story-composer__photo-preview {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.story-composer__photo-preview[hidden] { display: none; }

.story-composer__photo-thumb {
  width: 120px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid var(--color-neutral-300);
}

.story-composer__photo-fields {
  flex: 1 1 auto;
  min-width: 0;
  display: grid;
  gap: 8px;
}

.story-composer__alt-input {
  box-sizing: border-box;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #807f7f;
  border-radius: 6px;
  font-family: inherit;
  font-weight: 400;
  font-size: 13px;
}

.story-composer__check-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 0;
  font-weight: 400;
  font-size: 13px;
}

.story-composer__check-row[hidden] { display: none; }

.story-composer__check-row input { margin-top: 2px; }

/* The identity ("Anonymous" / the username) leads both post-as rows as a pill, so the two options read
   symmetrically: <pill> then <what shows publicly>. The selected row's pill takes the same green treatment
   as the "Your story" chip — the card's established "yours/active" style — rather than a solid pine fill,
   which would mimic the Share story button below and read as tappable. The transparent border reserves the
   selected state's border width, so toggling never shifts layout. */
.story-composer__name-pill {
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--color-neutral-100);
  font-weight: 600;
}

.story-composer__check-row input:checked + .story-composer__name-pill {
  background: var(--color-pine-100);
  border-color: var(--color-pine-500);
  color: var(--color-pine-800);
}

/* Same secondary gray as the composer intro, so the pill carries the emphasis. */
.story-composer__name-desc { color: #595959; }

.story-composer__photo-remove {
  justify-self: start;
  padding: 2px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 12px;
  color: var(--color-orange-700);
  text-decoration: underline;
}

.story-composer__post-as {
  display: grid;
  gap: 6px;
  margin: 0 0 6px;
  padding: 0;
  border: none;
}

.story-composer__post-as legend {
  width: auto;
  padding: 0;
  margin-bottom: 4px;
  border: 0;
}

.story-composer__signin-cta {
  margin: 10px 0 0;
  font-size: 13px;
  color: var(--color-asphalt-400);
}

.story-composer__signin-btn {
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
  color: var(--color-link-200);
  text-decoration: underline;
  cursor: pointer;
}

.story-composer__signin-btn:hover { opacity: 0.85; }

.story-composer__signin-btn:focus-visible {
  outline: 2px solid var(--color-link-100);
  outline-offset: 2px;
  border-radius: 2px;
}

.story-composer__privacy {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--color-neutral-100);
  font-size: 12px;
  color: var(--color-asphalt-400);
}

.story-composer__error {
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-error-200);
}

.story-composer__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.story-composer__cancel {
  padding: 9px 18px;
  border: 1px solid var(--color-neutral-400);
  border-radius: 999px;
  background: var(--color-neutral-white);
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-neutral-900);
}

/* Quiet corner X, matching the card header's close (the lightbox's floating circle is for sitting over a photo). */
.story-composer__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.story-composer__close:hover { background: rgb(0 0 0 / 6%); }

.story-composer__close img {
  width: 100%;
  height: 100%;
  display: block;
}

.story-composer__submit {
  padding: 9px 22px;
  border: none;
  border-radius: 999px;
  background: var(--color-pine-500);
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-neutral-black);
}

.story-composer__submit:hover { opacity: 0.9; }

.story-composer__submit:disabled {
  opacity: 0.6;
  cursor: wait;
}

.story-composer__cancel:focus-visible,
.story-composer__close:focus-visible,
.story-composer__submit:focus-visible,
.story-composer__photo-remove:focus-visible,
.story-lightbox__close:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* ─── Story photo lightbox (#4054) ──────────────────────────────────────── */
dialog.story-lightbox {
  box-sizing: border-box;
  position: relative;
  max-width: min(560px, calc(100vw - 32px));
  border: none;
  border-radius: 12px;
  padding: 16px;
  background: var(--color-neutral-white);
  box-shadow: 0 20px 50px rgb(0 0 0 / 35%);
  font-family: var(--font-primary);
}

/* Floats over the image's top-right corner — the standard lightbox dismiss spot. */
.story-lightbox__close {
  position: absolute;
  top: 24px;
  right: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 85%);
  box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--color-neutral-900);
}

.story-lightbox__close:hover { background: var(--color-neutral-white); }

.story-lightbox__figure { margin: 0; }

.story-lightbox__img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.story-lightbox__caption {
  margin-top: 10px;
  max-width: 60ch;
  font-size: 13px;
  color: var(--color-asphalt-400);
}

/* ─── App-styled confirmation dialog (common/ConfirmDialog.js) ──────────── */
dialog.ps-confirm {
  box-sizing: border-box;
  width: 360px;
  max-width: calc(100vw - 32px);
  border: none;
  border-radius: 12px;
  padding: 20px;
  background: var(--color-neutral-white);
  color: var(--color-neutral-black);
  box-shadow: 0 20px 50px rgb(0 0 0 / 30%);
  font-family: var(--font-primary);
  font-size: 14px;
}

dialog.ps-confirm::backdrop { background: rgb(0 0 0 / 45%); }

.ps-confirm__message {
  margin: 0;
  line-height: 1.45;
}

.ps-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.ps-confirm__cancel,
.ps-confirm__confirm {
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: 600;
  font-size: 13px;
}

.ps-confirm__cancel {
  border: 1px solid var(--color-neutral-400);
  background: var(--color-neutral-white);
  color: var(--color-neutral-900);
}

.ps-confirm__confirm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: none;
  background: var(--color-asphalt-500);
  color: var(--color-neutral-white);
}

.ps-confirm__confirm--danger { background: var(--color-error-200); }

.ps-confirm__confirm-icon {
  width: 14px;
  height: 14px;
}

.ps-confirm__cancel:focus-visible,
.ps-confirm__confirm:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}