/* Self-Evident: small custom styles layered on top of Tailwind (CDN). */

html { scroll-behavior: smooth; }

/* Tailwind's CDN build does not ship font-800 / font-700 utilities by name,
   so define them here for the display headings. */
.font-700 { font-weight: 700; }
.font-800 { font-weight: 800; }

/* "Why it's wrong" highlight: the exact wrong span inside a chosen distractor. */
mark.wrongspan {
  background: rgba(138, 28, 43, 0.18);
  color: #8a1c2b;
  border-radius: 3px;
  padding: 0 2px;
  text-decoration: line-through;
  text-decoration-color: #b8324a;
}

/* Quiz option buttons */
.opt:disabled { cursor: default; }
.opt { transition: border-color 0.15s ease, background-color 0.15s ease; }

/* Range inputs a touch taller for touch targets */
input[type='range'] { height: 1.5rem; }

/* Hide the default disclosure triangle on <summary>; we render our own chevron. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Clickable annotations on the full Declaration page (class "danno", kept
   separate from the home page's "annot" so the two never clash). */
.danno {
  color: #0f2a4a;
  background: none;
  border: 0;
  padding: 0 1px;
  font: inherit;
  display: inline;
  white-space: normal;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #c8a24a;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.danno:hover { background: rgba(200, 162, 74, 0.18); border-radius: 3px; }
.danno-key { color: #8a1c2b; text-decoration-color: #8a1c2b; }
.danno-key:hover { background: rgba(138, 28, 43, 0.12); }
.danno.active { background: rgba(200, 162, 74, 0.3); border-radius: 3px; }

/* Home-page annotated-sentence phrases (class "annot"): buttons are inline-block
   by default, so a long phrase cannot wrap and overflows on narrow screens. Make
   them flow as inline text, the same fix as .danno on the full-text page. */
.annot {
  display: inline;
  white-space: normal;
  text-align: left;
}

/* "explore the history" affordance appended to each grievance clause. */
.danno-explore {
  display: inline;
  font: inherit;
  font-size: 0.78em;
  font-weight: 600;
  color: #8a1c2b;
  background: rgba(138, 28, 43, 0.07);
  border: 0;
  border-radius: 999px;
  padding: 1px 9px;
  margin-left: 4px;
  cursor: pointer;
  white-space: nowrap;
  vertical-align: baseline;
}
.danno-explore::before { content: "\24D8\00A0"; } /* circled i + nbsp */
.danno-explore:hover { background: rgba(138, 28, 43, 0.15); }
.danno-explore.active { background: rgba(200, 162, 74, 0.28); color: #6b5618; }