[data-menu-panel][hidden] { display: none; }
.focus-ring:focus-visible { outline: 2px solid #0076B6; outline-offset: 2px; }
dialog::backdrop { background: rgba(0, 31, 64, 0.55); }

/* Answer options shared by the image challenge, case poll and quiz */
.option {
  display: flex; width: 100%; align-items: flex-start; gap: .75rem;
  border: 1px solid #D1D5DB; border-radius: .375rem; background: #fff;
  padding: .75rem 1rem; text-align: left; font-size: 15px; color: #333;
  transition: border-color .15s, background-color .15s;
}
.option:hover:not(:disabled) { border-color: #007398; background: #F0F8FF; }
.option:focus-visible { outline: 2px solid #0076B6; outline-offset: 2px; }
.option[aria-pressed="true"] { border-color: #007398; background: #EBF5FA; }
.option .key {
  display: grid; place-items: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem;
  border-radius: 9999px; border: 1px solid #D1D5DB; font-size: 12px; font-weight: 700; color: #5F6368;
}
.option[aria-pressed="true"] .key { border-color: #007398; background: #007398; color: #fff; }
.option.is-correct { border-color: #1E7B4A; background: #EEF8F2; }
.option.is-correct .key { border-color: #1E7B4A; background: #1E7B4A; color: #fff; }
.option.is-wrong { border-color: #B42318; background: #FEF3F2; }
.option.is-wrong .key { border-color: #B42318; background: #B42318; color: #fff; }
.option:disabled { cursor: default; }

/* Long-form text pages (about, guide for authors, policies, etc.) */
.prose-page .lead { margin-top: .75rem; font-size: 18px; line-height: 1.65; color: #333; }
.prose-page section { margin-top: 2.5rem; padding-top: 2rem; border-top: 1px solid #E0E0E0; }
.prose-page h2 { font-size: 1.375rem; font-weight: 700; color: #222; }
.prose-page h3 { margin-top: 1.5rem; font-size: 1.0625rem; font-weight: 600; color: #222; }
.prose-page p { margin-top: .75rem; font-size: 16px; line-height: 1.7; color: #333; }
.prose-page ul { margin-top: .75rem; padding-left: 1.25rem; list-style: disc; font-size: 16px; line-height: 1.7; color: #333; }
.prose-page li + li { margin-top: .35rem; }
.prose-page a { color: #006699; font-weight: 600; }
.prose-page a:hover { text-decoration: underline; }
.prose-page .table-wrap { margin-top: 1rem; overflow-x: auto; border: 1px solid #E0E0E0; border-radius: .375rem; }
.prose-page table { width: 100%; border-collapse: collapse; font-size: 15px; text-align: left; }
.prose-page thead { background: #F7F8FA; color: #5F6368; font-size: 14px; }
.prose-page th, .prose-page td { padding: .6rem 1rem; vertical-align: top; border-top: 1px solid #E0E0E0; }
.prose-page thead th { border-top: 0; font-weight: 600; }
.prose-page tbody th { font-weight: 600; color: #222; white-space: nowrap; }