:root {
  --spectrum: linear-gradient(
    90deg,
    #88e653,
    #d8f747 38%,
    #ffe35b 60%,
    #ff7280
  );
}
.shared-meter {
  --marker-size: 40px;
  position: relative;
  padding: 8px 0;
}
.shared-meter:not(:has(.community-marker)) .rating-rail { background: #dedfda; }
.community-marker {
  position: absolute;
  top: 0;
  left: calc(20px + (100% - 40px) * var(--position));
  transform: translateX(-50%);
  width: var(--marker-size);
  height: var(--marker-size);
  pointer-events: none;
  z-index: 1;
}
.community-marker img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 1px 1px #141b1f18); }

.you-position {
  position: absolute;
  bottom: 0;
  left: clamp(
    50px,
    calc(var(--thumb-radius) + 100% * var(--position) - 26px * var(--position)),
    calc(100% - 50px)
  );
  transform: translateX(-50%);
  font-size: 11px;
  white-space: nowrap;
}
.unchosen .you-position {
  color: var(--muted);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
#vote-hint {
  text-align: center;
  margin: 8px 0;
}
#inline-editor .choices {
  gap: 4px;
  margin: 8px 0 4px;
}
#inline-editor .choices label {
  padding: 5px 6px;
  min-height: 30px;
}
#inline-editor .choices label:has(:checked) {
  background: #effbcf;
  border-color: var(--ink);
}
#inline-editor legend {
  font-weight: 700;
  margin-bottom: 4px;
}
#inline-editor legend span {
  font-weight: 400;
}
.more-reasons summary {
  font-size: 12px;
  padding: 4px 0;
  cursor: pointer;
}
.vote-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.vote-actions #save {
  flex: 1;
}
input.vote-range {
  display: block;
  appearance: none;
  width: 100%;
  height: 40px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
input.vote-range:focus-visible {
  outline: none;
}
input.vote-range:focus-visible::-webkit-slider-thumb {
  outline: 3px solid #344bba;
  outline-offset: 4px;
}
input.vote-range::-webkit-slider-runnable-track {
  height: 20px;
  border-radius: 20px;
  background: var(--spectrum);
}
input.vote-range::-webkit-slider-thumb {
  appearance: none;
  width: var(--thumb-size);
  height: var(--thumb-size);
  margin-top: -3px;
  border: 8px solid var(--ink);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px #fff;
}
.unchosen input.vote-range::-webkit-slider-thumb {
  border: 2px dashed var(--ink);
  background: #fff;
  box-shadow: none;
}
.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border: 0;
  margin: 12px 0;
  padding: 0;
}
.choices legend {
  font-size: 13px;
  margin-bottom: 8px;
}
.choices label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
}
.choices input {
  accent-color: var(--ink);
}

input.vote-range {
  padding: 0;
  border: 0;
  border-radius: 0;
}
.rating-hero {
  text-align: center;
}
.rating-hero .result-eyes {
  width: 126px;
  height: 48px;
  object-fit: contain;
  margin: 0 auto;
}
.rating-hero h2 {
  margin: 8px 0;
}
.rating-panel {
  background: #fff;
}
.rating-panel .community-score {
  font-size: 14px;
}
.rating-panel #own-vote {
  margin-top: 16px;
}
.rating-panel .rating-details {
  margin-top: 16px;
}
.rating-panel .rating-details summary {
  cursor: pointer;
  font-size: 13px;
}
.rating-panel .shared-meter {
  margin-top: 8px;
}
.choices input {
  width: auto;
}
.demo-card .demo-art {
  height: 48px;
  min-height: 0;
  margin: 12px 0 6px;
}
.demo-card .example-eyes {
  margin: 0 auto;
  width: 126px;
  height: 48px;
}
.demo-card .example-domain {
  text-align: center;
}
.demo-card .example-domain span {
  display: block;
  margin: 4px 0;
}
.demo-card h3 {
  margin: 4px 0;
}
.demo-card .example-count {
  margin: 6px 0;
}
.demo-card .demo-editor {
  text-align: left;
  margin-top: 12px;
}
.demo-card .demo-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.demo-card .demo-actions button {
  font-size: 12px;
  padding: 9px;
}
.demo-card .demo-comments {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
  text-align: left;
}
.demo-card .demo-comments h4 {
  margin: 0;
}
.demo-card .choices label {
  text-align: left;
}
.demo-card .shared-meter {
  text-align: left;
}
input.vote-range:focus-visible::-moz-range-thumb {
  outline: 3px solid #344bba;
  outline-offset: 4px;
}
input.vote-range::-moz-range-track {
  height: 20px;
  border-radius: 20px;
  background: var(--spectrum);
}
input.vote-range::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 8px solid var(--ink);
  border-radius: 50%;
  background: white;
}
.unchosen input.vote-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 2px dashed var(--ink);
}

.ends {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
}
.rating-panel:has(#inline-editor:not([hidden])) .community-reasons {
  display: none;
}

.assessment-details { overflow-wrap: anywhere; }
.assessment-details > details { margin-block: 0.5rem; }

.assessment-score { display: inline-block; font-family: Looks, sans-serif; font-size: 15px; font-weight: 400; line-height: 1.4; letter-spacing: 0; vertical-align: top; margin-top: 4px; }

/* Visible evidence overview, using the existing typography and lime palette. */
.indicator-overview { --indicator-border: #dce1dc; margin: 24px 0 18px; text-align: left; }
.indicator-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.indicator-heading h3 { margin: 0; font-size: 19px; }
.indicator-heading > span { font-size: 11px; color: #52616a; }
.indicator-intro, .indicator-footnote { font-size: 12px; line-height: 1.5; color: #52616a; }
.indicator-intro { margin: 6px 0 12px; }
.indicator-list { border: 1px solid var(--indicator-border); border-radius: 16px; overflow: hidden; }
.indicator-row + .indicator-row { border-top: 1px solid var(--indicator-border); }
.indicator-row > summary { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 12px; align-items: center; gap: 10px; padding: 15px 12px; cursor: pointer; list-style: none; }
.indicator-row > summary::-webkit-details-marker { display: none; }
.indicator-row > summary:focus-visible { outline: 2px solid #141b1f; outline-offset: -3px; border-radius: 8px; }
.indicator-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #edf4e0; color: #243514; line-height: 1; }
.indicator-icon svg { display: block; width: 18px; height: 18px; flex: none; }
.indicator-main { display: grid; gap: 3px; min-width: 0; }
.indicator-label { font-size: 11px; color: #52616a; }
.indicator-finding { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.indicator-status { font-size: 10px; padding: 4px 6px; border-radius: 5px; background: #edf4e0; color: #34471e; white-space: nowrap; }
.indicator-toggle { position: relative; display: block; width: 12px; height: 12px; line-height: 1; color: #52616a; justify-self: center; }
.indicator-toggle::before, .indicator-toggle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); }
.indicator-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.indicator-row[open] .indicator-toggle { transform: rotate(45deg); }
.indicator-row[data-state="concern"] .indicator-icon, .indicator-row[data-state="concern"] .indicator-status { background: #fff0d5; color: #704300; }
.indicator-row[data-state="unavailable"] .indicator-icon, .indicator-row[data-state="unavailable"] .indicator-status { background: #f0f1f2; color: #52616a; }
.indicator-explanation { padding: 0 14px 14px; font-size: 12px; line-height: 1.5; overflow-wrap: anywhere; }
.indicator-explanation p { margin: 0 0 12px; }
.indicator-explanation dl { margin: 0 0 12px; }
.indicator-explanation dl > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 8px; padding: 5px 0; border-top: 1px solid #edf0ed; }
.indicator-explanation dt { color: #52616a; }
.indicator-explanation dd { margin: 0; }
@media (max-width: 420px) {
  .indicator-row > summary { grid-template-columns: 24px minmax(0, 1fr) 12px; gap: 8px; padding: 13px 10px; }
  .indicator-icon { width: 24px; height: 24px; }
  .indicator-status { grid-column: 2; justify-self: start; }
  .indicator-toggle { grid-column: 3; grid-row: 1 / 3; }
}
.indicator-row { margin: 0; padding: 0; }

/* Read-only spectrum and explicit binary voting choices. */

.rating-rail { height: 24px; margin: 0; border-radius: 999px; background: linear-gradient(90deg, #7ee44c, #d4fa3e 35%, #ffe251 60%, #ff6679); }
.vote-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 8px; }
.vote-choices button { min-height: 44px; padding: 10px 8px; border: 1px solid #727c76; border-radius: 12px; background: white; color: #18201b; font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; }
.vote-choices button[aria-pressed="true"] { border: 2px solid #18201b; background: #effbcf; font-weight: 700; }
.vote-choices button[data-vote="100"][aria-pressed="true"] { background: #ffe3e6; }
.vote-choices button:focus-visible { outline: 3px solid #344bba; outline-offset: 3px; }
.vote-choices button:disabled { opacity: .6; cursor: wait; }

/* Result first, optional explanations on demand. */
.optional-reasons { margin: 8px 0; padding: 0; text-align: left; }
.optional-reasons > summary { cursor: pointer; font-size: 13px; padding: 7px 0; min-height: 32px; }
.optional-reasons > summary:focus-visible { outline: 3px solid #344bba; outline-offset: 3px; border-radius: 4px; }
.assessment-score .score-help { display: inline-grid; place-items: center; width: 24px; height: 24px; min-height: 24px; padding: 0; margin-left: 3px; border: 1px solid #596268; border-radius: 50%; background: #fff; color: #34434b; font: 700 12px Looks, sans-serif; vertical-align: middle; cursor: pointer; }
.score-help:focus-visible { outline: 3px solid #344bba; outline-offset: 3px; }
.score-explanation { max-width: min(320px, calc(100vw - 32px)); padding: 16px; border: 1px solid #596268; border-radius: 14px; background: #fff; color: #141b1f; font: 400 14px/1.5 Looks, sans-serif; letter-spacing: 0; text-align: left; box-shadow: 0 8px 30px #141b1f26; }
.score-explanation::backdrop { background: #141b1f20; }

/* Website reasons editor for an existing extension vote. */
#add-reasons { padding-top: 12px; }
#add-reasons h3 { margin-top: 0; }
#add-reasons .choices { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; padding: 0; border: 0; }
#add-reasons .choices legend { margin-bottom: 12px; font-weight: 700; }
#add-reasons .choices label { display: flex; align-items: center; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 12px; }
#add-reasons button { margin: 12px 8px 0 0; }
@media (max-width: 480px) { #add-reasons .choices { grid-template-columns: 1fr; } }