/* Evidence controls and source review sheet. Opaque surfaces retain contrast. */
.qi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 1px 3px;
  border: 1px solid var(--line, #c8b6d6);
  border-radius: 50%;
  background: var(--sunken, #f0eaf5);
  color: var(--mauve, #7a5c96);
  font: 800 16px var(--serif, Georgia, serif);
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
}
.qi:hover { border-color: var(--mauve); }
.qi:focus-visible,
.qi-body:focus-visible,
.qi-sheet :is(button, a):focus-visible {
  outline: 3px solid var(--mauve, #7a5c96);
  outline-offset: 3px;
}
.qi-sheet {
  position: fixed;
  inset: auto 0 0;
  margin: 0 auto;
  padding: 0;
  width: min(100%, 460px);
  max-width: 100%;
  max-height: min(88dvh, 900px);
  border: 1px solid var(--line, #c8b6d6);
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  background: var(--card-solid, #fff);
  color: var(--ink, #3d2f52);
  box-shadow: 0 -12px 48px -12px rgba(10, 5, 25, .4);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  overflow: hidden;
  z-index: 10001;
}
.qi-sheet:not([open]) { display: none; }
.qi-sheet[open] { display: flex; flex-direction: column; }
.qi-sheet::backdrop,
.qi-backdrop {
  background: rgba(10, 5, 25, .64);
  backdrop-filter: blur(3px);
}
.qi-backdrop { position: fixed; inset: 0; z-index: 10000; }
.qi-backdrop[hidden] { display: none; }
.qi-handle {
  width: 40px;
  height: 4px;
  background: var(--line, #c8b6d6);
  border-radius: 99px;
  margin: 10px auto 0;
  flex-shrink: 0;
}
.qi-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line, #c8b6d6);
  flex-shrink: 0;
}
.qi-header .qi-title {
  margin: 0;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.qi-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--sunken);
  color: var(--ink);
  font: 400 26px var(--sans, sans-serif);
  cursor: pointer;
  flex-shrink: 0;
}
.qi-body {
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  min-height: 0;
  /* Keep the content basis so auto-height WebKit dialogs do not collapse. */
  flex: 1 1 auto;
  color: var(--ink);
  font: 400 .9375rem/1.65 var(--sans, sans-serif);
  overflow-wrap: anywhere;
}
.qi-section { margin-top: 20px; }
.qi-label {
  margin: 0 0 8px;
  font: 800 .8125rem/1.5 var(--sans, sans-serif);
  color: var(--taupe);
}
.qi-claim {
  padding: 12px 14px;
  background: var(--sunken);
  border-radius: 12px;
  border-left: 3px solid var(--mauve);
  color: var(--ink);
  font-weight: 700;
}
.qi-evidence { color: var(--ink); white-space: pre-line; }
.qi-source-list { display: grid; gap: 12px; }
.qi-source {
  padding: 14px;
  background: var(--sunken);
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.6;
}
.qi-source h4 { margin: 0 0 6px; font-size: inherit; font-weight: 800; }
.qi-source p { margin: 0; }
.qi-source .qi-source-note { color: var(--taupe); margin-top: 8px; }
.qi-source-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 8px; }
.qi-source a {
  color: var(--mauve);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
}
.qi-review-status {
  display: inline-block;
  margin: 0;
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--sunken);
  color: var(--ink);
  font-size: .8125rem;
  font-weight: 800;
}
.qi-review-status.is-reviewed { border: 1px solid var(--mauve); }
.qi-checked-at { color: var(--taupe); font-size: .8125rem; margin: 8px 0 0; }
.qi-disclaimer {
  display: block;
  margin-top: 20px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--sunken);
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.6;
}
.qi-disclaimer strong { color: var(--ink); }
.qi-disclaimer p { margin: 5px 0 0; }
/* Override legacy translucent dark rules even on pages that load darkmode.css later. */
[data-theme="dark"] .qi-sheet,
[data-theme="dark"] .qi-source,
[data-theme="dark"] .qi-claim,
[data-theme="dark"] .qi-disclaimer { background: var(--card-solid); color: var(--ink); }
[data-theme="dark"] .qi-close { background: var(--sunken); color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .qi, .qi-sheet, .qi-sheet * { animation: none !important; transition: none !important; }
}