/* Visited tick for sight cards. Additive only: it styles the toggle injected by
   visited-checklist.js and does not change any existing component rule. */
.visited-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  flex: none;
  margin: 4px 6px 0 0 !important;
  padding: 4px 10px 4px 8px !important;
  border: 1px solid var(--color-rule, rgba(41, 62, 54, .18)) !important;
  border-radius: 999px !important;
  background: var(--color-surface, rgba(255, 255, 255, .82)) !important;
  font-family: var(--font-body, 'Microsoft YaHei', sans-serif) !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  letter-spacing: .01em !important;
  color: var(--color-muted, #62675c) !important;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}
.visited-toggle:hover { border-color: var(--color-accent, #2f6b58) !important; }
.visited-toggle-input {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  margin: 0 !important;
  accent-color: var(--color-accent, #2f6b58);
  cursor: pointer;
}
.visited-toggle-input:disabled { cursor: progress; opacity: .55; }
.visited-toggle-text { white-space: nowrap !important; }
.visited-toggle-input:checked + .visited-toggle-text { color: var(--color-accent, #2f6b58) !important; font-weight: 600 !important; }

.sight-card.is-visited .sight-copy { opacity: .74; }
.sight-card.is-visited .visited-toggle {
  border-color: var(--color-accent, #2f6b58) !important;
  background: color-mix(in srgb, var(--color-accent, #2f6b58) 12%, transparent) !important;
}
.route-stop.is-visited { opacity: .72; }

.visited-summary {
  margin: 14px 0 6px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--color-rule, rgba(41, 62, 54, .16)) !important;
  border-radius: 14px !important;
  background: var(--color-surface, rgba(255, 255, 255, .76)) !important;
}
.visited-summary[hidden] { display: none !important; }
.visited-summary-head {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.visited-summary-text {
  margin: 0 !important;
  font-family: var(--font-body, 'Microsoft YaHei', sans-serif) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--color-muted, #62675c) !important;
}
.visited-summary-reset {
  flex: none;
  padding: 6px 12px !important;
  border: 1px solid var(--color-rule, rgba(41, 62, 54, .18)) !important;
  border-radius: 999px !important;
  background: transparent !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  color: var(--color-muted, #62675c) !important;
  cursor: pointer;
}
.visited-summary-reset:hover { color: var(--color-rust, #a14a2b) !important; border-color: var(--color-rust, #a14a2b) !important; }
.visited-summary-track {
  margin-top: 10px !important;
  height: 6px !important;
  border-radius: 999px !important;
  background: var(--color-sand, rgba(41, 62, 54, .1)) !important;
  overflow: hidden;
}
.visited-summary-fill {
  display: block !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: var(--color-accent, #2f6b58) !important;
  transition: width 220ms cubic-bezier(.16, 1, .3, 1);
}
@media (max-width: 560px) {
  .visited-toggle { padding: 3px 9px 3px 7px !important; font-size: 11.5px !important; }
  .visited-toggle-input { width: 16px !important; height: 16px !important; min-width: 16px !important; }
}