/* "Fix this listing" (web/claim). Uses only site.css tokens: --newsprint, --sheet, --program-ink,
   --track-red, --hairline, --caption, --open-green, --head, --body, --data. Light only, like the site. */
.claim { border-top: 2px solid var(--program-ink); background: var(--sheet); border-radius: 2px; }
.claim > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 14px; min-height: 44px; }
.claim > summary::-webkit-details-marker { display: none; }
.claim > summary span { font: 900 22px/1 var(--head); text-transform: uppercase; letter-spacing: .01em; }
.claim > summary span::before { content: "+"; display: inline-block; width: 1em; font-family: var(--data); font-weight: 500; color: var(--track-red); }
.claim[open] > summary span::before { content: "\2212"; }
.claim > summary small { font: 400 11.5px/1.3 var(--data); color: var(--caption); }
.claim > summary:hover span { color: var(--track-red); }

.claim-form { display: grid; gap: 14px; padding: 4px 14px 16px; }
.fx-lede { margin: 0; font-size: 14px; line-height: 1.5; }
.fx-set { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.fx-set legend, .fx-field label { font: 700 13px/1.3 var(--body); padding: 0; margin-bottom: 6px; }
.fx-set legend { margin-bottom: 8px; }
.fx-opt { font-weight: 400; color: var(--caption); }
.fx-field { display: grid; gap: 0; }
.fx-field label { margin-bottom: 6px; }

/* Choices look like the board's .chip, sized for a thumb */
.fx-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fx-chip { position: relative; display: inline-flex; }
.fx-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.fx-chip span { font: 500 14px/1.2 var(--body); padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; border: 1.5px solid var(--program-ink); border-radius: 2px; background: var(--newsprint); color: var(--program-ink); }
.fx-chip input:checked + span { background: var(--program-ink); color: var(--newsprint); }
.fx-chip input:focus-visible + span { outline: 3px solid var(--track-red); outline-offset: 2px; }
.fx-chip:hover span { border-color: var(--track-red); }
.fx-set:has([aria-invalid="true"]) .fx-chip span { border-color: var(--track-red); }

.claim-form input[type=text], .claim-form input[type=url], .claim-form input[type=email], .claim-form textarea {
  width: 100%; font: 400 16px/1.4 var(--body); color: var(--program-ink); background: var(--newsprint);
  border: 1.5px solid var(--program-ink); border-radius: 2px; padding: 10px 12px; min-height: 44px;
}
.claim-form textarea { resize: vertical; min-height: 88px; }
.claim-form input:focus-visible, .claim-form textarea:focus-visible { outline: 3px solid var(--track-red); outline-offset: 2px; }
.claim-form [aria-invalid="true"]:not([type=radio]) { border-color: var(--track-red); border-width: 2px; }
.claim-form ::placeholder { color: var(--caption); }

.fx-hint { margin: 6px 0 0; font: 400 12px/1.45 var(--data); color: var(--caption); }
.fx-err { margin: 6px 0 0; font: 600 13.5px/1.4 var(--body); color: var(--track-red); }
.fx-err:empty { display: none; }

.fx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; border-top: 1px solid var(--hairline); padding-top: 14px; }
.claim-form button { font: 800 18px/1 var(--head); text-transform: uppercase; letter-spacing: .03em; background: var(--track-red); color: var(--newsprint); border: 0; padding: 12px 16px; border-radius: 2px; cursor: pointer; min-height: 44px; }
.claim-form button:hover { background: var(--program-ink); }
.claim-form button[disabled] { opacity: .6; cursor: wait; }
.fx-status { margin: 0; font-size: 14px; min-height: 1.4em; flex: 1 1 200px; }
.fx-status.ok { color: var(--open-green); font-weight: 600; }
.fx-status.err { color: var(--track-red); font-weight: 600; }
.claim [hidden] { display: none !important; }