/* lib/common.css — Shared base styles used across pages and component chrome
   Place general resets and small layout helpers here so multiple pages
   can include a single common stylesheet instead of repeating inline CSS. */

/* Restore the browser default root font-size so component rem sizing is consistent
   on pages that also include component styles. */
html {
  font-size: 100%;
}

/* Keep shared pages hidden until the bootstrap scripts finish applying
   branding, theme, and custom-element chrome. This prevents a flash of raw
   HTML before the styled shell is ready. */
html:not([data-app-ready="true"]) body {
  visibility: hidden;
}

/* Site-wide body base reset */
body {
  margin: 0;
}

:root {
  --site-content-max-width: 90rem;
}

/* Ensure pages using the header/footer chrome have an article wrapper
   that grows to fill the viewport like other pages. */
body>article {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/* Lightweight reusable content container used by many pages */
.main-content {
  padding: 2rem;
  max-width: var(--site-content-max-width);
  margin: 0 auto;
}

/* Rich text from the page editor (Quill) on published pages */
.main-content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.75rem 0;
}

.main-content .ql-font-serif {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.main-content .ql-font-monospace {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

.main-content .ql-font-linux-libertine {
  font-family: 'Linux Libertine', Hoefler Text, Georgia, 'Times New Roman', Times, serif;
}

.main-content .ql-font-arial {
  font-family: Arial, Helvetica, sans-serif;
}

.main-content .ql-font-georgia {
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.main-content .ql-font-verdana {
  font-family: Verdana, Geneva, sans-serif;
}

.main-content .ql-size-small {
  font-size: 0.85em;
}

.main-content .ql-size-large {
  font-size: 1.35em;
}

.main-content .ql-size-huge {
  font-size: 2em;
}

/* Enforce the site content width for pages that include the header/footer chrome
   (these pages wrap their content in `body > article`); this ensures any page
   that doesn't explicitly use `.main-content` still gets the same max-width as
   profile pages. The index page intentionally isn't wrapped in `article` and
   will not be affected. */
body>article>main,
body>article [role="main"],
body>article .main-content,
body>article .people-page__content,
body>article .people-page__inner,
body>article .profile-edit__panels,
body>article full-page-toolbar .people-page__inner,
body>article full-footer .page-footer__inner,
body>article>page-editor {
  max-width: var(--site-content-max-width);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  box-sizing: border-box;
}

.card,
.settings-page__card,
.settings-page__hero {
  background: var(--background-color-base);
  border: 1px solid var(--border-color-subtle);
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-small);
  box-sizing: border-box;
}

.home-page .card,
.search-page__panel {
  border-radius: var(--border-radius-base);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

body.theme-dark .home-page .card,
body.theme-dark .search-page__panel {
  box-shadow: inset 0 -1px 3px rgba(0, 0, 0, 0.08);
}

.home-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home-page__hero {
  padding: 2rem;
}

.home-page__hero-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.home-page__hero-title {
  margin: 0;
  font-family: var(--font-family-serif);
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 1.15;
}

.home-page__hero-text {
  margin: 0;
  color: var(--color-subtle);
  font-size: 1.05rem;
  line-height: 1.55;
}

.home-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.home-page__section {
  padding: 1rem;
}

.home-page__section-title {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.home-page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.home-page__grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.home-page__tile {
  padding: 0.75rem;
}

.home-page__tile-title {
  margin: 0 0 0.35rem;
  font-size: 1rem;
  font-weight: 600;
}

.home-page__tile-text {
  margin: 0;
  color: var(--color-subtle);
  line-height: 1.5;
}

.home-page__updates {
  margin: 0;
  padding: 0;
  list-style: none;
}

.home-page__updates li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color-subtle);
}

.home-page__updates li:last-child {
  border-bottom: 0;
}

.home-page__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.site-chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.375rem;
  padding: 0 0.85rem;
  border: 1px solid var(--border-color-subtle);
  border-radius: var(--border-radius-base);
  background: rgba(0, 0, 0, 0.03);
  color: var(--color-progressive);
  font: 0.875rem/1 var(--font-family-system-sans);
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.12s ease;
}

body.theme-dark .site-chip {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
  color: #6b9eff;
}

.site-chip:hover {
  background: rgba(0, 0, 0, 0.06);
  text-decoration: none;
}

body.theme-dark .site-chip:hover {
  background: rgba(255, 255, 255, 0.08);
}

.home-page__newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.home-page__newsletter-input {
  min-width: 220px;
  flex: 1 1 220px;
  padding: 0.8rem 1rem;
  border: var(--border-base);
  border-radius: var(--border-radius-base);
  background: var(--background-color-base);
  color: var(--color-base);
  font: inherit;
  box-sizing: border-box;
}

.home-page__section-text {
  margin: 0 0 0.5rem;
  color: var(--color-subtle);
  line-height: 1.55;
}

.page-changes__status,
.page-changes__hint {
  margin: 0 0 1rem;
  color: var(--color-subtle);
  line-height: 1.55;
}

.page-changes__hint {
  margin-bottom: 0;
  font-size: 0.95rem;
}

.page-changes {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.page-changes__subtabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0 0 1.25rem;
  padding: 0.25rem;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  background: var(--background-color-interactive-subtle);
}

.page-changes__subtab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  border: 0;
  border-radius: calc(var(--border-radius-base) - 2px);
  background: transparent;
  color: var(--color-base);
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.page-changes__subtab:hover,
.page-changes__subtab:focus-visible {
  background: var(--background-color-base);
}

.page-changes__subtab.is-active {
  background: var(--background-color-base);
  color: var(--color-progressive);
  box-shadow: var(--box-shadow-small);
}

.page-changes__subtab-count {
  min-width: 1.45rem;
  padding: 0.08rem 0.38rem;
  border-radius: 999px;
  background: var(--background-color-neutral-subtle);
  color: var(--color-subtle);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.page-changes__panel[hidden] {
  display: none !important;
}

.page-changes__pending,
.page-changes__history,
.page-changes__people {
  display: grid;
  gap: 0.85rem;
}

.page-changes__empty {
  margin: 0;
  color: var(--color-subtle);
  line-height: 1.55;
}

.page-changes__pending-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.page-changes__pending-item {
  border: 1px solid var(--color-border, rgba(0, 0, 0, 0.12));
  border-radius: var(--border-radius-base);
  background: var(--color-surface, #fff);
  overflow: hidden;
}

.page-changes__pending-summary {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.9rem 1rem;
  cursor: pointer;
  list-style: none;
}

.page-changes__pending-summary::-webkit-details-marker {
  display: none;
}

.page-changes__pending-title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
  font-weight: 600;
}

.page-changes__pending-number {
  color: var(--color-primary);
}

.page-changes__pending-meta,
.page-changes__pending-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  color: var(--color-subtle);
  font-size: 0.92rem;
}

.page-changes__pending-body {
  padding: 0 1rem 1rem;
  border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.page-changes__pending-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.page-changes__pending-button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--border-radius-base);
  padding: 0.55rem 0.9rem;
  font: inherit;
  cursor: pointer;
}

.page-changes__pending-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.page-changes__pending-button--approve {
  background: #1f7a3b;
  color: #fff;
}

.page-changes__pending-button--decline {
  background: transparent;
  border-color: rgba(0, 0, 0, 0.18);
  color: inherit;
}

body.theme-dark .page-changes__pending-item {
  background: #171b20;
}

body.theme-dark .page-changes__pending-button--decline {
  border-color: rgba(255, 255, 255, 0.18);
}

.page-changes__people-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.page-changes__people-group {
  min-width: 0;
}

.page-changes__people-group--full {
  grid-column: 1 / -1;
}

.page-changes__people-heading {
  margin: 0 0 0.5rem;
  color: var(--color-subtle);
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
}

.page-changes__people-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.page-changes__people-heading-row .page-changes__people-heading {
  margin: 0;
}

.page-changes__maintainer-invite-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.85rem;
  height: 1.85rem;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  background: transparent;
  color: var(--color-base);
  font-size: 1rem;
  cursor: pointer;
}

.page-changes__maintainer-invite-open:hover {
  background: var(--background-color-interactive, rgba(127, 127, 127, 0.12));
}

.page-changes__people-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-changes__maintainer-workflow {
  display: grid;
  gap: 0.65rem;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
  border-top: var(--border-subtle);
}

.page-changes__maintainer-toolbar,
.page-changes__maintainer-form,
.page-changes__maintainer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  align-items: center;
}

.page-changes__maintainer-form--dialog {
  display: grid;
  gap: 0.75rem;
}

.page-changes__maintainer-dialog {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 1rem;
  box-sizing: border-box;
}

.page-changes__maintainer-dialog[hidden] {
  display: none;
}

.page-changes__maintainer-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.page-changes__maintainer-dialog-panel {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 0.75rem;
  width: min(24rem, 100%);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  box-sizing: border-box;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  background: var(--background-color-base);
  box-shadow: var(--box-shadow-small);
  padding: 1rem;
}

.page-changes__maintainer-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.page-changes__maintainer-dialog-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.page-changes__maintainer-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.85rem;
  height: 1.85rem;
  border: 0;
  border-radius: var(--border-radius-base);
  background: transparent;
  color: var(--color-base);
  font-size: 1rem;
  cursor: pointer;
}

.page-changes__maintainer-dialog-close:hover {
  background: var(--background-color-interactive, rgba(127, 127, 127, 0.12));
}

.page-changes__maintainer-dialog-intro {
  margin: 0;
  color: var(--color-subtle, #6b7280);
  font-size: 0.92rem;
  line-height: 1.45;
}

.page-changes__maintainer-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
}

.page-changes__maintainer-form--dialog .page-changes__maintainer-search {
  flex: none;
  width: 100%;
  min-width: 0;
}

.page-changes__maintainer-input {
  min-width: 11rem;
  max-width: 100%;
  box-sizing: border-box;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  background: var(--background-color-base);
  color: var(--color-base);
  font: inherit;
  padding: 0.5rem 0.65rem;
}

.page-changes__maintainer-input:focus {
  border-color: var(--border-color-progressive);
  outline: 2px solid var(--border-color-progressive--focus);
  outline-offset: 1px;
}

.page-changes__maintainer-search {
  position: relative;
  flex: 1 1 11rem;
  min-width: 11rem;
}

.page-changes__maintainer-search-results {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.2rem);
  left: 0;
  right: 0;
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  background: var(--background-color-base);
  box-shadow: var(--box-shadow-small);
  max-height: 14rem;
  overflow: auto;
  box-sizing: border-box;
}

.page-changes__maintainer-search-option {
  display: grid;
  gap: 0.1rem;
  width: 100%;
  border: 0;
  border-radius: var(--border-radius-base);
  background: transparent;
  color: var(--color-base);
  font: inherit;
  text-align: left;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
}

.page-changes__maintainer-search-option:hover,
.page-changes__maintainer-search-option.is-active {
  background: var(--background-color-interactive, rgba(127, 127, 127, 0.12));
}

.page-changes__maintainer-search-option-name {
  font-weight: 600;
}

.page-changes__maintainer-search-option-meta {
  color: var(--color-subtle, #6b7280);
  font-size: 0.85em;
}

.page-changes__maintainer-search-empty {
  margin: 0;
  padding: 0.45rem 0.55rem;
  color: var(--color-subtle, #6b7280);
  font-size: 0.92em;
}

.page-changes__maintainer-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.15rem;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  background: var(--background-color-base);
  color: var(--color-base);
  font: inherit;
  font-weight: 600;
  padding: 0.45rem 0.75rem;
  cursor: pointer;
}

.page-changes__maintainer-button--approve {
  border-color: transparent;
  background: #1f7a3b;
  color: #fff;
}

.page-changes__maintainer-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.page-changes__maintainer-list {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-changes__maintainer-item {
  display: grid;
  gap: 0.4rem;
}

.page-changes__maintainer-item .page-changes__person {
  border-bottom: 0;
  padding-bottom: 0.2rem;
}

.page-changes__person {
  display: grid;
  grid-template-columns: 2.15rem minmax(0, 1fr) auto;
  gap: 0.65rem;
  align-items: center;
  min-width: 0;
  padding: 0.55rem 0;
  border-bottom: var(--border-subtle);
}

.page-changes__person:last-child {
  border-bottom: 0;
}

.page-changes__person-avatar {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.15rem;
  height: 2.15rem;
  border-radius: 50%;
  background: var(--background-color-interactive-subtle);
  color: var(--color-subtle);
  font-weight: 700;
}

img.page-changes__person-avatar {
  display: block;
  object-fit: cover;
}

.page-changes__person-main {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.page-changes__person-name {
  overflow: hidden;
  color: var(--color-progressive, #36c);
  font-weight: 600;
  text-overflow: ellipsis;
  text-decoration: none;
  white-space: nowrap;
}

.page-changes__person-name:hover {
  text-decoration: underline;
}

.page-changes__person-login {
  overflow: hidden;
  color: var(--color-subtle);
  font-size: 0.86rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.page-changes__person-role {
  border: var(--border-subtle);
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  color: var(--color-subtle);
  font-size: 0.78rem;
  white-space: nowrap;
}

.page-changes__search {
  margin-bottom: 0.15rem;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

.page-changes__search-input[type="search"] {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  background: var(--background-color-base);
  padding: 0.65rem 0.85rem;
  color: var(--color-base);
  font: inherit;
}

.page-changes__search-input[type="search"]::placeholder {
  color: var(--color-placeholder);
}

.page-changes__search-input[type="search"]:focus {
  border-color: var(--border-color-progressive);
  outline: 2px solid var(--border-color-progressive--focus);
  outline-offset: 1px;
}

.page-changes__search-meta {
  margin: 0.45rem 0 0;
  color: var(--color-subtle);
  font-size: 0.9rem;
}

.page-changes__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.page-changes__item {
  margin: 0;
  padding: 0.85rem 0;
  border-bottom: var(--border-subtle);
}

.page-changes__item:last-child {
  border-bottom: 0;
}

.page-changes__subject {
  display: block;
  margin-bottom: 0.35rem;
  color: var(--color-progressive, #36c);
  font-weight: 600;
  text-decoration: none;
}

.page-changes__subject:hover {
  text-decoration: underline;
}

.page-changes__file-diff {
  margin: 0 0 1rem;
}

.page-changes__file-diff:last-child {
  margin-bottom: 0;
}

.page-changes__file-diff-title {
  margin: 0 0 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-subtle);
}

.page-changes__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  color: var(--color-subtle);
  font-size: 0.9rem;
}

.page-changes__author {
  color: var(--color-progressive, #36c);
  text-decoration: none;
}

.page-changes__author:hover {
  text-decoration: underline;
}

.page-changes__hash {
  color: var(--color-progressive, #36c);
  font-size: 0.85rem;
  text-decoration: none;
}

.page-changes__hash:hover {
  text-decoration: underline;
}

.page-changes__hash code {
  font-size: inherit;
}

.page-changes__details {
  margin-top: 0.75rem;
}

.page-changes__toggle {
  cursor: pointer;
  color: var(--color-progressive, #36c);
  font-size: 0.9rem;
  font-weight: 600;
  list-style: none;
}

.page-changes__toggle::-webkit-details-marker {
  display: none;
}

.page-changes__toggle::before {
  content: '▸ ';
}

.page-changes__details[open] > .page-changes__toggle::before {
  content: '▾ ';
}

.page-changes__diff-panel {
  margin-top: 0.75rem;
}

.page-changes__diff {
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  overflow: hidden;
  background: var(--background-color-neutral-subtle);
  color: var(--color-base);
}

.page-changes__diff-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  padding: 0.55rem 0.75rem;
  border-bottom: var(--border-subtle);
  background: var(--background-color-base);
  font-size: 0.85rem;
}

.page-changes__diff-status {
  text-transform: capitalize;
  color: var(--color-subtle);
}

.page-changes__diff-stats {
  display: inline-flex;
  gap: 0.65rem;
  font-variant-numeric: tabular-nums;
}

.page-changes__diff-add {
  color: var(--color-success);
}

.page-changes__diff-del {
  color: var(--color-destructive);
}

.page-changes__diff-views {
  padding: 0.5rem 0.75rem 0.75rem;
}

.page-changes__diff-view {
  margin: 0 0 0.65rem;
}

.page-changes__diff-view:last-child {
  margin-bottom: 0;
}

.page-changes__diff-view > summary {
  cursor: pointer;
  margin-bottom: 0.45rem;
  color: var(--color-progressive);
  font-size: 0.88rem;
  font-weight: 600;
  list-style: none;
}

.page-changes__diff-view > summary::-webkit-details-marker {
  display: none;
}

.page-changes__diff-view > summary::before {
  content: '▸ ';
}

.page-changes__diff-view[open] > summary::before {
  content: '▾ ';
}

.page-changes__diff-sidebyside {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-height: 26rem;
  overflow: auto;
  overscroll-behavior: contain;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  background: var(--background-color-base);
}

.page-changes__diff-columns {
  display: contents;
}

.page-changes__diff-column-label {
  padding: 0.4rem 0.65rem;
  border-bottom: var(--border-subtle);
  background: var(--background-color-interactive-subtle);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-subtle);
  position: sticky;
  top: 0;
  z-index: 1;
}

.page-changes__diff-column-label + .page-changes__diff-column-label {
  border-left: var(--border-subtle);
}

.page-changes__diff-rows {
  display: contents;
}

.page-changes__diff-row {
  display: contents;
}

.page-changes__diff-cell {
  display: flex;
  align-items: stretch;
  min-width: 0;
  border-bottom: 1px solid var(--border-color-muted);
  background: var(--background-color-base);
}

.page-changes__diff-row:last-child .page-changes__diff-cell {
  border-bottom: 0;
}

.page-changes__diff-cell.is-after {
  border-left: var(--border-subtle);
}

.page-changes__diff-row:nth-child(even) .page-changes__diff-cell.is-context {
  background: var(--background-color-neutral-subtle);
}

.page-changes__diff-cell.is-delete {
  background: var(--background-color-content-removed);
  box-shadow: inset 3px 0 0 var(--color-content-removed);
}

.page-changes__diff-cell.is-add {
  background: var(--background-color-content-added);
  box-shadow: inset 3px 0 0 var(--color-content-added);
}

.page-changes__diff-cell.is-empty {
  background: var(--background-color-interactive-subtle);
  opacity: 0.65;
}

.page-changes__diff-lno {
  flex: 0 0 2.75rem;
  padding: 0.12rem 0.45rem;
  border-right: var(--border-subtle);
  color: var(--color-placeholder);
  background: var(--background-color-interactive-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  text-align: right;
  user-select: none;
}

.page-changes__diff-sidebyside .page-changes__diff-line {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0.12rem 0.55rem;
  overflow: hidden;
  color: var(--color-base);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.76rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

.page-changes__diff-sidebyside .page-changes__diff-line code {
  display: block;
  padding: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  white-space: inherit;
  word-break: inherit;
}

.page-changes__diff-sidebyside .page-changes__diff-line code.hljs {
  background: transparent;
}

.page-changes__diff-sidebyside .hljs-tag,
.page-changes__diff-sidebyside .hljs-name {
  color: var(--color-success);
}

.page-changes__diff-sidebyside .hljs-attr {
  color: var(--color-progressive);
}

.page-changes__diff-sidebyside .hljs-string {
  color: var(--color-warning);
}

.page-changes__diff-unified {
  margin: 0;
  max-height: 22rem;
  overflow: auto;
  border: var(--border-subtle);
  border-radius: var(--border-radius-base);
  color: var(--color-base);
  background: var(--background-color-base);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  font-size: 0.76rem;
  line-height: 1.5;
}

.page-changes__diff-unified-line {
  padding: 0 0.65rem;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-base);
}

.page-changes__diff-unified-line.is-add {
  color: var(--color-content-added);
  background: var(--background-color-content-added);
}

.page-changes__diff-unified-line.is-del {
  color: var(--color-content-removed);
  background: var(--background-color-content-removed);
}

.page-changes__diff-unified-line.is-hunk,
.page-changes__diff-unified-line.is-meta {
  color: var(--color-subtle);
  background: var(--background-color-interactive-subtle);
}

.page-changes__diff-empty {
  margin: 0;
  padding: 0.65rem;
  color: var(--color-subtle);
  font-size: 0.85rem;
}

@media (max-width: 900px) {
  .page-changes__people-grid {
    grid-template-columns: 1fr;
  }

  .page-changes__diff-sidebyside {
    display: block;
    max-height: none;
    overflow: visible;
  }

  .page-changes__diff-columns {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-changes__diff-rows {
    display: block;
    max-height: 26rem;
    overflow: auto;
    overscroll-behavior: contain;
  }

  .page-changes__diff-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .page-changes__diff-cell.is-after {
    border-left: 0;
    border-top: var(--border-subtle);
  }

  .page-changes__diff-column-label + .page-changes__diff-column-label {
    border-left: 0;
    border-top: var(--border-subtle);
  }
}

.settings-page {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.settings-page__hero {
  padding: 1.75rem 1.75rem 1.5rem;
}

.settings-page__hero-title {
  margin: 0;
  font-size: 2rem;
  line-height: 1.1;
}

.settings-page__hero-description {
  margin: 0.85rem 0 0;
  max-width: 55rem;
  color: var(--color-subtle);
}

.settings-page__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1.5rem;
}

.settings-page__card {
  padding: 1.75rem;
}

.settings-page__section {
  display: grid;
  gap: 1rem;
}

.settings-page__section-heading {
  margin: 0 0 0.75rem;
  font-size: 1.15rem;
  font-weight: 700;
}

.form-group {
  display: grid;
  gap: 0.65rem;
}

.form-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--color-base);
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="search"],
.form-group textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-color-subtle);
  border-radius: var(--border-radius-base);
  background: var(--background-color-neutral-subtle);
  padding: 0.95rem 1rem;
  color: var(--color-base);
  font: inherit;
}

.form-group input[type="checkbox"] {
  accent-color: var(--color-progressive);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.settings-page__summary {
  display: grid;
  gap: 1rem;
  padding: 1.75rem;
  background: var(--background-color-neutral-subtle);
  border: 1px solid var(--border-color-subtle);
  border-radius: var(--border-radius-base);
  box-shadow: var(--box-shadow-small);
}

.settings-page__summary-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
}

.settings-page__summary-note {
  margin: 0;
  color: var(--color-subtle);
  line-height: 1.6;
}

.settings-page__summary ul {
  margin: 0;
  padding-left: 1.25rem;
  color: var(--color-base);
}

.settings-page__summary li {
  margin-bottom: 0.85rem;
  line-height: 1.75;
}

@media (max-width: 900px) {
  .settings-page__grid {
    grid-template-columns: 1fr;
  }
}

/* Moved common variables and base rules from index.css so other pages
   can include only this shared file instead of the full index stylesheet. */
:root {
  --color-base: #202122;
  --color-base-fixed: #202122;
  --color-base--hover: #404244;
  --color-emphasized: #101418;
  --color-neutral: #404244;
  --color-subtle: #54595d;
  --color-placeholder: #72777d;
  --color-disabled: #a2a9b1;
  --color-disabled-emphasized: #a2a9b1;
  --color-inverted: #fff;
  --color-inverted-fixed: #fff;
  --color-progressive: #36c;
  --color-progressive--hover: #3056a9;
  --color-progressive--active: #233566;
  --color-progressive--focus: #36c;
  --color-destructive: #bf3c2c;
  --color-destructive--hover: #9f3526;
  --color-destructive--active: #612419;
  --color-destructive--focus: #36c;
  --color-visited: #6a60b0;
  --color-visited--hover: #534fa3;
  --color-visited--active: #353262;
  --color-destructive--visited: #9f5555;
  --color-destructive--visited--hover: #854848;
  --color-destructive--visited--active: #512e2e;
  --color-error: #bf3c2c;
  --color-error--hover: #9f3526;
  --color-error--active: #612419;
  --color-warning: #886425;
  --color-success: #177860;
  --color-notice: #404244;
  --color-icon-error: #f54739;
  --color-icon-warning: #ab7f2a;
  --color-icon-success: #099979;
  --color-icon-notice: #72777d;
  --color-content-added: #006400;
  --color-content-removed: #8b0000;
  --opacity-base: 1;
  --opacity-medium: 0.65;
  --opacity-low: 0.3;
  --opacity-transparent: 0;
  --filter-invert-icon: 0;
  --filter-invert-primary-button-icon: 1;
  --background-position-base: center;
  --background-size-search-figure: cover;
  --z-index-bottom: -100;
  --z-index-base: 0;
  --z-index-above-content: 1;
  --z-index-toolbar: 2;
  --z-index-dropdown: 50;
  --z-index-sticky: 100;
  --z-index-fixed: 200;
  --z-index-off-canvas-backdrop: 300;
  --z-index-off-canvas: 350;
  --z-index-overlay-backdrop: 400;
  --z-index-overlay: 450;
  --z-index-popover: 700;
  --z-index-tooltip: 800;
  --z-index-toast-notification: 900;
  --z-index-top: 9999;
  --z-index-stacking-0: 0;
  --z-index-stacking-1: 1;
  --z-index-stacking-2: 2;
  --z-index-stacking-3: 3;
  --box-sizing-base: border-box;
  --size-0: 0;
  --size-6: 0.0625rem;
  --size-12: 0.125rem;
  --size-25: 0.25rem;
  --size-50: 0.5rem;
  --size-75: 0.75rem;
  --size-100: 1rem;
  --size-125: 1.25rem;
  --size-150: 1.5rem;
  --size-200: 2rem;
  --size-250: 2.5rem;
  --size-275: 2.75rem;
  --size-300: 3rem;
  --size-400: 4rem;
  --size-800: 8rem;
  --size-1200: 12rem;
  --size-1600: 16rem;
  --size-2400: 24rem;
  --size-2800: 28rem;
  --size-3200: 32rem;
  --size-4000: 40rem;
  --size-5600: 56rem;
  --size-viewport-width-full: 100vw;
  --size-viewport-height-full: 100vh;
  --size-absolute-1: 1px;
  --size-absolute-9999: 9999px;
  --size-content-min: min-content;
  --size-content-fit: fit-content;
  --size-content-max: max-content;
  --size-third: 33.33%;
  --size-half: 50%;
  --size-full: 100%;
  --size-double: 200%;
  --size-search-figure: 2.5rem;
  --max-width-base: none;
  --max-width-breakpoint-mobile: calc(640px - var(--size-absolute-1));
  --max-width-breakpoint-tablet: calc(1120px - var(--size-absolute-1));
  --max-width-breakpoint-desktop: calc(1680px - var(--size-absolute-1));
  --max-width-button: 28rem;
  --border-style-base: solid;
  --border-style-dashed: dashed;
  --box-shadow-inset-small: inset 0 0 0 1px;
  --box-shadow-inset-medium: inset 0 0 0 2px;
  --box-shadow-inset-medium-vertical: inset 0 -2px 0 0;
  --box-shadow-outset-small: 0 0 0 1px;
  --box-shadow-outset-small-top: 0 -1px 0 0;
  --box-shadow-outset-small-bottom: 0 1px 0 0;
  --box-shadow-outset-small-start: -1px 0 0 0;
  --box-shadow-outset-medium-below: 0 4px 4px 0;
  --box-shadow-outset-medium-around: 0 0 8px 0;
  --box-shadow-outset-large-below: 0 4px 8px 0;
  --box-shadow-outset-large-around: 0 0 16px 0;
  --box-shadow-color-base: #a2a9b1;
  --box-shadow-color-progressive--active: #233566;
  --box-shadow-color-progressive--focus: #36c;
  --box-shadow-color-progressive-selected: #36c;
  --box-shadow-color-progressive-selected--hover: #3056a9;
  --box-shadow-color-progressive-selected--active: #233566;
  --box-shadow-color-destructive--focus: #36c;
  --box-shadow-color-inverted: #fff;
  --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.06);
  --box-shadow-color-transparent: transparent;
  --font-family-base: sans-serif;
  --font-family-system-sans: -apple-system, "BlinkMacSystemFont", "Segoe UI", "Roboto", "Inter", "Helvetica", "Arial", sans-serif;
  --font-family-sans--fallback: sans-serif;
  --font-family-serif: "Linux Libertine", "Georgia", "Times", "Source Serif 4", serif;
  --font-family-serif--fallback: serif;
  --font-family-monospace: "Menlo", "Consolas", "Liberation Mono", "Fira Code", "Courier New", monospace;
  --font-family-monospace--fallback: monospace, monospace;
  --font-family-heading-main: "Linux Libertine", "Georgia", "Times", "Source Serif 4", serif;
  --font-size-x-small: 0.75rem;
  --font-size-small: 0.875rem;
  --font-size-medium: 1rem;
  --font-size-large: 1.125rem;
  --font-size-x-large: 1.25rem;
  --font-size-xx-large: 1.5rem;
  --font-size-xxx-large: 1.75rem;
  --font-weight-hairline: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semi-bold: 600;
  --font-weight-bold: 700;
  --line-height-x-small: 1.25rem;
  --line-height-small: 1.375rem;
  --line-height-medium: 1.625rem;
  --line-height-large: 1.75rem;
  --line-height-x-large: 1.875rem;
  --line-height-xx-large: 2.125rem;
  --line-height-xxx-large: 2.375rem;
  --line-height-content: 1.625;
  --text-decoration-none: none;
  --text-decoration-line-through: line-through;
  --text-decoration-underline: underline;
  --text-overflow-clip: clip;
  --text-overflow-ellipsis: ellipsis;
  --tab-size-base: 4;
  --transform-checkbox-tick--checked: rotate(45deg);
  --transform-progress-indicator-spinner-start: rotate(-45deg);
  --transform-progress-indicator-spinner-end: rotate(315deg);
  --transition-duration-base: 100ms;
  --transition-duration-medium: 250ms;
  --transition-property-base: background-color, color, border-color, box-shadow;
  --transition-property-fade: opacity;
  --transition-property-icon: color;
  --transition-property-icon-css-only: background-color;
  --transition-property-toast: opacity, transform;
  --transition-property-toggle-switch-grip: background-color, border-color, transform;
  --transition-timing-function-system: ease;
  --transition-timing-function-user: ease-out;
  --animation-delay-none: 0ms;
  --animation-delay-medium: -160ms;
  --animation-delay-slow: -320ms;
  --animation-duration-fast: 1000ms;
  --animation-duration-medium: 1600ms;
  --animation-duration-slow: 2000ms;
  --animation-timing-function-base: linear;
  --animation-timing-function-bouncing: ease-in-out;
  --animation-iteration-count-base: infinite;
  --cursor-base: default;
  --cursor-base--disabled: default;
  --cursor-base--hover: pointer;
  --cursor-grab: grab;
  --cursor-grabbing: grabbing;
  --cursor-help: help;
  --cursor-move: move;
  --cursor-not-allowed: not-allowed;
  --cursor-resize-nesw: nesw-resize;
  --cursor-resize-nwse: nwse-resize;
  --cursor-text: text;
  --cursor-zoom-in: zoom-in;
  --cursor-zoom-out: zoom-out;
  --mix-blend-mode-base: normal;
  --mix-blend-mode-blend: multiply;
  --background-color-base: #fff;
  --background-color-base-fixed: #fff;
  --background-color-neutral: #eaecf0;
  --background-color-neutral-subtle: #f8f9fa;
  --background-color-interactive: #eaecf0;
  --background-color-interactive--hover: #dadde3;
  --background-color-interactive--active: #c8ccd1;
  --background-color-interactive-subtle: #f8f9fa;
  --background-color-interactive-subtle--hover: #eaecf0;
  --background-color-interactive-subtle--active: #dadde3;
  --background-color-disabled: #dadde3;
  --background-color-disabled-subtle: #eaecf0;
  --background-color-inverted: #101418;
  --background-color-progressive: #36c;
  --background-color-progressive--hover: #3056a9;
  --background-color-progressive--active: #233566;
  --background-color-progressive--focus: #36c;
  --background-color-progressive-subtle: #e8eeff;
  --background-color-progressive-subtle--hover: #d9e2ff;
  --background-color-progressive-subtle--active: #b6d4fb;
  --background-color-destructive: #bf3c2c;
  --background-color-destructive--hover: #9f3526;
  --background-color-destructive--active: #612419;
  --background-color-destructive--focus: #36c;
  --background-color-destructive-subtle: #ffe9e5;
  --background-color-destructive-subtle--hover: #ffdad3;
  --background-color-destructive-subtle--active: #ffc8bd;
  --background-color-error: #f54739;
  --background-color-error--hover: #d74032;
  --background-color-error--active: #bf3c2c;
  --background-color-error-subtle: #ffe9e5;
  --background-color-error-subtle--hover: #ffdad3;
  --background-color-error-subtle--active: #ffc8bd;
  --background-color-warning-subtle: #fdf2d5;
  --background-color-success-subtle: #dff2eb;
  --background-color-notice-subtle: #eaecf0;
  --background-color-content-added: #a3d3ff;
  --background-color-content-removed: #ffe49c;
  --background-color-target-text: #ffead4;
  --background-color-transparent: transparent;
  --background-color-backdrop-light: hsla(0, 0%, 100%, 0.65);
  --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);
  --background-color-button-quiet--hover: rgba(0, 24, 73, 0.027);
  --background-color-button-quiet--active: rgba(0, 24, 73, 0.082);
  --background-color-input-binary--checked: #36c;
  --background-color-tab-list-item-framed--hover: hsla(0, 0%, 100%, 0.3);
  --background-color-tab-list-item-framed--active: hsla(0, 0%, 100%, 0.65);
  --opacity-icon-base: 0.87;
  --opacity-icon-base--hover: 0.74;
  --opacity-icon-base--selected: 1;
  --opacity-icon-base--disabled: 0.51;
  --opacity-icon-placeholder: 0.51;
  --opacity-icon-subtle: 0.67;
  --min-size-interactive-pointer: 32px;
  --min-size-interactive-touch: 44px;
  --min-size-search-figure: 40px;
  --min-size-icon-x-small: 10px;
  --min-size-icon-small: 14px;
  --min-size-icon-medium: 18px;
  --min-size-input-binary: 20px;
  --min-size-input-chip-clear-button: 20px;
  --min-size-toggle-switch-grip: 18px;
  --min-width-medium: 256px;
  --min-width-breakpoint-mobile: 320px;
  --min-width-breakpoint-tablet: 640px;
  --min-width-breakpoint-desktop: 1120px;
  --min-width-breakpoint-desktop-wide: 1680px;
  --min-width-toggle-switch: 42px;
  --spacing-0: 0;
  --spacing-6: 1px;
  --spacing-12: 2px;
  --spacing-25: 4px;
  --spacing-30: 5px;
  --spacing-35: 6px;
  --spacing-50: 8px;
  --spacing-65: 10px;
  --spacing-75: 12px;
  --spacing-100: 16px;
  --spacing-125: 20px;
  --spacing-150: 24px;
  --spacing-200: 32px;
  --spacing-250: 40px;
  --spacing-300: 48px;
  --spacing-400: 64px;
  --spacing-half: 50%;
  --spacing-full: 100%;
  --border-width-base: 1px;
  --border-width-thick: 2px;
  --border-width-input-radio--checked: 6px;
  --border-color-base: #a2a9b1;
  --border-color-emphasized: #202122;
  --border-color-subtle: #c8ccd1;
  --border-color-muted: #dadde3;
  --border-color-interactive: #72777d;
  --border-color-interactive--hover: #27292d;
  --border-color-interactive--active: #202122;
  --border-color-disabled: #c8ccd1;
  --border-color-inverted: #fff;
  --border-color-inverted-fixed: #fff;
  --border-color-progressive: #6485d1;
  --border-color-progressive--hover: #3056a9;
  --border-color-progressive--active: #233566;
  --border-color-progressive--focus: #36c;
  --border-color-destructive: #f54739;
  --border-color-destructive--hover: #9f3526;
  --border-color-destructive--active: #612419;
  --border-color-destructive--focus: #36c;
  --border-color-error: #f54739;
  --border-color-error--hover: #9f3526;
  --border-color-error--active: #612419;
  --border-color-warning: #ab7f2a;
  --border-color-warning--hover: #735421;
  --border-color-warning--active: #453217;
  --border-color-success: #099979;
  --border-color-notice: #72777d;
  --border-color-content-added: #a3d3ff;
  --border-color-content-removed: #ffe49c;
  --border-color-transparent: transparent;
  --border-color-divider: #a2a9b1;
  --border-radius-base: 2px;
  --border-radius-sharp: 0;
  --border-radius-pill: 9999px;
  --border-radius-circle: 50%;
  --outline-color-progressive--focus: #36c;
  --min-height-text-area: 64px;
  --min-height-table-header: 40px;
  --min-height-table-footer: 40px;
  --min-height-toggle-switch: 28px;
  --max-height-chip: 1.375rem;
  --color-link: var(--color-progressive);
  --color-link--hover: var(--color-progressive--hover);
  --color-link--active: var(--color-progressive--active);
  --color-link--focus: var(--color-progressive--focus);
  --color-link--visited: var(--color-visited);
  --color-link--visited--hover: var(--color-visited--hover);
  --color-link--visited--active: var(--color-visited--active);
  --color-link-red: var(--color-destructive);
  --color-link-red--hover: var(--color-destructive--hover);
  --color-link-red--active: var(--color-destructive--active);
  --color-link-red--focus: var(--color-destructive--focus);
  --color-link-red--visited: var(--color-destructive--visited);
  --color-link-red--visited--hover: var(--color-destructive--visited--hover);
  --color-link-red--visited--active: var(--color-destructive--visited--active);
  --size-icon-x-small: calc(var(--font-size-medium) - 4px);
  --size-icon-small: var(--font-size-medium);
  --size-icon-medium: calc(var(--font-size-medium) + 4px);
  --size-toggle-switch-grip: calc(var(--font-size-medium)*1.25);
  --box-shadow-small: var(--box-shadow-outset-small) var(--box-shadow-color-base);
  --box-shadow-small-top: var(--box-shadow-outset-small-top) var(--box-shadow-color-base);
  --box-shadow-small-bottom: var(--box-shadow-outset-small-bottom) var(--box-shadow-color-base);
  --box-shadow-medium: var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base);
  --box-shadow-large: var(--box-shadow-outset-large-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-large-around) var(--box-shadow-color-alpha-base);
  --accent-color-base: #36c;
  --position-offset-border-width-base: -var(--border-width-base);
  --spacing-horizontal-button: var(--spacing-75) - var(--border-width-base);
  --spacing-horizontal-button-icon-only: var(--spacing-35) - var(--border-width-base);
  --spacing-horizontal-button-small-icon-only: var(--spacing-12) - var(--border-width-base);
  --spacing-horizontal-button-small: var(--spacing-35) - var(--border-width-base);
  --spacing-horizontal-button-large: var(--spacing-100) - var(--border-width-base);
  --spacing-horizontal-input-text-two-end-icons: calc(var(--spacing-50)*2 + var(--size-icon-small));
  --spacing-start-typeahead-search-figure: var(--spacing-75);
  --spacing-toggle-switch-grip-start: calc(var(--font-size-medium)*0.375);
  --spacing-toggle-switch-grip-end: calc(var(--font-size-medium)*1.25);
  --border-color-input--hover: var(--border-color-interactive);
  --border-color-input-binary: var(--border-color-interactive);
  --border-color-input-binary--hover: var(--border-color-progressive--hover);
  --border-color-input-binary--active: var(--border-color-progressive--active);
  --border-color-input-binary--focus: var(--border-color-progressive--focus);
  --border-color-input-binary--checked: var(--border-color-progressive);
  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
  --border-subtle: var(--border-width-base) var(--border-style-base) var(--border-color-subtle);
  --border-progressive: var(--border-width-base) var(--border-style-base) var(--border-color-progressive);
  --border-destructive: var(--border-width-base) var(--border-style-base) var(--border-color-destructive);
  --border-transparent: var(--border-width-base) var(--border-style-base) var(--border-color-transparent);
  --outline-base--focus: var(--border-width-base) solid transparent;
  --width-toggle-switch: calc(var(--font-size-medium)*3);
  --height-toggle-switch: calc(var(--font-size-medium)*2);
  --spacing-start-typeahead-search-icon: calc(var(--spacing-start-typeahead-search-figure) + var(--min-size-search-figure)/2 - var(--min-size-icon-medium)/2);
  --spacing-typeahead-search-focus-addition: calc(var(--spacing-start-typeahead-search-figure) + var(--min-size-search-figure) - var(--min-size-icon-medium) - var(--spacing-50));
  --color-base--subtle: #54595d;
  --box-shadow-drop-xx-large: 0 20px 48px 0 rgba(0, 0, 0, 0.2);
  --font-family-sans: "Helvetica Neue", "Helvetica", "Liberation Sans", "Arial", sans-serif;
  --line-height-xxx-small: 1.4285714rem;
  --line-height-xx-small: 1.5714285rem;
  --box-shadow-drop-small: var(--box-shadow-outset-small) var(--box-shadow-color-base);
  --box-shadow-drop-medium: var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base)
}

@media only screen and (prefers-color-scheme:dark) {
  :root {
    --color-base: #eaecf0;
    --color-base--hover: #f8f9fa;
    --color-emphasized: #f8f9fa;
    --color-neutral: #c8ccd1;
    --color-subtle: #a2a9b1;
    --color-disabled: #54595d;
    --color-disabled-emphasized: #72777d;
    --color-inverted: #101418;
    --color-progressive: #88a3e8;
    --color-progressive--hover: #a6bbf5;
    --color-progressive--active: #b6d4fb;
    --color-destructive: #fd7865;
    --color-destructive--hover: #fea898;
    --color-destructive--active: #ffc8bd;
    --color-visited: #a799cd;
    --color-visited--hover: #c5b9dd;
    --color-visited--active: #d9d0e9;
    --color-destructive--visited: #c99391;
    --color-destructive--visited--hover: #dcb5b3;
    --color-destructive--visited--active: #e8cecd;
    --color-error: #fd7865;
    --color-error--hover: #fea898;
    --color-error--active: #ffc8bd;
    --color-warning: #ca982e;
    --color-success: #2cb491;
    --color-notice: #a2a9b1;
    --color-content-added: #80cdb3;
    --color-content-removed: #fd7865;
    --color-base--subtle: #a2a9b1;
    --box-shadow-color-base: #72777d;
    --box-shadow-color-progressive--focus: #6485d1;
    --box-shadow-color-progressive-selected: #88a3e8;
    --box-shadow-color-progressive-selected--hover: #a6bbf5;
    --box-shadow-color-progressive-selected--active: #b6d4fb;
    --box-shadow-color-destructive--focus: #6485d1;
    --box-shadow-color-inverted: #000;
    --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.87);
    --mix-blend-mode-blend: screen;
    --background-color-base: #101418;
    --background-color-neutral: #27292d;
    --background-color-neutral-subtle: #202122;
    --background-color-interactive: #27292d;
    --background-color-interactive--hover: #404244;
    --background-color-interactive--active: #54595d;
    --background-color-interactive-subtle: #202122;
    --background-color-interactive-subtle--hover: #27292d;
    --background-color-interactive-subtle--active: #404244;
    --background-color-disabled: #404244;
    --background-color-disabled-subtle: #27292d;
    --background-color-inverted: #f8f9fa;
    --background-color-progressive--focus: #6485d1;
    --background-color-progressive-subtle: #1b223d;
    --background-color-progressive-subtle--hover: #233566;
    --background-color-progressive-subtle--active: #3056a9;
    --background-color-destructive--focus: #6485d1;
    --background-color-destructive-subtle: #3c1a13;
    --background-color-destructive-subtle--hover: #612419;
    --background-color-destructive-subtle--active: #9f3526;
    --background-color-error-subtle: #3c1a13;
    --background-color-error-subtle--hover: #612419;
    --background-color-error-subtle--active: #9f3526;
    --background-color-warning-subtle: #2d2212;
    --background-color-success-subtle: #132821;
    --background-color-notice-subtle: #27292d;
    --background-color-content-added: #233566;
    --background-color-content-removed: #453217;
    --background-color-target-text: #572c19;
    --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
    --background-color-backdrop-dark: hsla(0, 0%, 100%, 0.65);
    --border-color-base: #72777d;
    --border-color-emphasized: #eaecf0;
    --border-color-subtle: #54595d;
    --border-color-muted: #404244;
    --border-color-interactive--hover: #a2a9b1;
    --border-color-interactive--active: #c8ccd1;
    --border-color-disabled: #54595d;
    --border-color-inverted: #101418;
    --border-color-progressive--hover: #88a3e8;
    --border-color-progressive--active: #a6bbf5;
    --border-color-progressive--focus: #6485d1;
    --border-color-destructive--hover: #fd7865;
    --border-color-destructive--active: #fea898;
    --border-color-destructive--focus: #6485d1;
    --border-color-error--hover: #fd7865;
    --border-color-error--active: #fea898;
    --border-color-warning--hover: #ca982e;
    --border-color-warning--active: #edb537;
    --border-color-content-added: #233566;
    --border-color-content-removed: #987027
  }
}

/* Theme override
  The base palette supports `prefers-color-scheme`, but the site also allows an explicit
   user-selected theme via `body.theme-dark` (stored in localStorage).
   Re-apply the palette on `body` so the user's choice always wins over OS preference. */
body:not(.theme-dark) {
  color-scheme: light;

  /* Core palette variables (light) mirrored from the default `:root` values. */
  --color-base: #202122;
  --color-base--hover: #404244;
  --color-emphasized: #101418;
  --color-neutral: #404244;
  --color-subtle: #54595d;
  --color-disabled: #a2a9b1;
  --color-disabled-emphasized: #a2a9b1;
  --color-inverted: #fff;
  --color-progressive: #36c;
  --color-progressive--hover: #3056a9;
  --color-progressive--active: #233566;
  --color-progressive--focus: #36c;
  --color-destructive: #bf3c2c;
  --color-destructive--hover: #9f3526;
  --color-destructive--active: #612419;
  --color-destructive--focus: #36c;
  --color-visited: #6a60b0;
  --color-visited--hover: #534fa3;
  --color-visited--active: #353262;
  --color-destructive--visited: #9f5555;
  --color-destructive--visited--hover: #854848;
  --color-destructive--visited--active: #512e2e;
  --color-error: #bf3c2c;
  --color-error--hover: #9f3526;
  --color-error--active: #612419;
  --color-warning: #886425;
  --color-success: #177860;
  --color-notice: #404244;
  --color-content-added: #006400;
  --color-content-removed: #8b0000;
  --color-base--subtle: #54595d;

  --box-shadow-color-base: #a2a9b1;
  --box-shadow-color-progressive--focus: #36c;
  --box-shadow-color-progressive-selected: #36c;
  --box-shadow-color-progressive-selected--hover: #3056a9;
  --box-shadow-color-progressive-selected--active: #233566;
  --box-shadow-color-destructive--focus: #36c;
  --box-shadow-color-inverted: #fff;
  --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.06);
  --mix-blend-mode-blend: multiply;

  --background-color-base: #fff;
  --background-color-neutral: #eaecf0;
  --background-color-neutral-subtle: #f8f9fa;
  --background-color-interactive: #eaecf0;
  --background-color-interactive--hover: #dadde3;
  --background-color-interactive--active: #c8ccd1;
  --background-color-interactive-subtle: #f8f9fa;
  --background-color-interactive-subtle--hover: #eaecf0;
  --background-color-interactive-subtle--active: #dadde3;
  --background-color-disabled: #dadde3;
  --background-color-disabled-subtle: #eaecf0;
  --background-color-inverted: #101418;
  --background-color-progressive--focus: #36c;
  --background-color-progressive-subtle: #e8eeff;
  --background-color-progressive-subtle--hover: #d9e2ff;
  --background-color-progressive-subtle--active: #b6d4fb;
  --background-color-destructive--focus: #36c;
  --background-color-destructive-subtle: #ffe9e5;
  --background-color-destructive-subtle--hover: #ffdad3;
  --background-color-destructive-subtle--active: #ffc8bd;
  --background-color-error-subtle: #ffe9e5;
  --background-color-error-subtle--hover: #ffdad3;
  --background-color-error-subtle--active: #ffc8bd;
  --background-color-warning-subtle: #fdf2d5;
  --background-color-success-subtle: #dff2eb;
  --background-color-notice-subtle: #eaecf0;
  --background-color-content-added: #a3d3ff;
  --background-color-content-removed: #ffe49c;
  --background-color-target-text: #ffead4;
  --background-color-backdrop-light: hsla(0, 0%, 100%, 0.65);
  --background-color-backdrop-dark: rgba(0, 0, 0, 0.65);

  --border-color-base: #a2a9b1;
  --border-color-emphasized: #202122;
  --border-color-subtle: #c8ccd1;
  --border-color-muted: #dadde3;
  --border-color-interactive: #72777d;
  --border-color-interactive--hover: #27292d;
  --border-color-interactive--active: #202122;
  --border-color-disabled: #c8ccd1;
  --border-color-inverted: #fff;
  --border-color-progressive--hover: #3056a9;
  --border-color-progressive--active: #233566;
  --border-color-progressive--focus: #36c;
  --border-color-destructive--hover: #9f3526;
  --border-color-destructive--active: #612419;
  --border-color-destructive--focus: #36c;
  --border-color-error--hover: #9f3526;
  --border-color-error--active: #612419;
  --border-color-warning--hover: #735421;
  --border-color-warning--active: #453217;
  --border-color-content-added: #a3d3ff;
  --border-color-content-removed: #ffe49c;
}

body.theme-dark {
  color-scheme: dark;

  /* Core palette variables (dark) mirrored from the `prefers-color-scheme: dark` values. */
  --color-base: #eaecf0;
  --color-base--hover: #f8f9fa;
  --color-emphasized: #f8f9fa;
  --color-neutral: #c8ccd1;
  --color-subtle: #a2a9b1;
  --color-disabled: #54595d;
  --color-disabled-emphasized: #72777d;
  --color-inverted: #101418;
  --color-progressive: #88a3e8;
  --color-progressive--hover: #a6bbf5;
  --color-progressive--active: #b6d4fb;
  --color-destructive: #fd7865;
  --color-destructive--hover: #fea898;
  --color-destructive--active: #ffc8bd;
  --color-visited: #a799cd;
  --color-visited--hover: #c5b9dd;
  --color-visited--active: #d9d0e9;
  --color-destructive--visited: #c99391;
  --color-destructive--visited--hover: #dcb5b3;
  --color-destructive--visited--active: #e8cecd;
  --color-error: #fd7865;
  --color-error--hover: #fea898;
  --color-error--active: #ffc8bd;
  --color-warning: #ca982e;
  --color-success: #2cb491;
  --color-notice: #a2a9b1;
  --color-content-added: #80cdb3;
  --color-content-removed: #fd7865;
  --color-base--subtle: #a2a9b1;

  --box-shadow-color-base: #72777d;
  --box-shadow-color-progressive--focus: #6485d1;
  --box-shadow-color-progressive-selected: #88a3e8;
  --box-shadow-color-progressive-selected--hover: #a6bbf5;
  --box-shadow-color-progressive-selected--active: #b6d4fb;
  --box-shadow-color-destructive--focus: #6485d1;
  --box-shadow-color-inverted: #000;
  --box-shadow-color-alpha-base: rgba(0, 0, 0, 0.87);
  --mix-blend-mode-blend: screen;

  --background-color-base: #101418;
  --background-color-neutral: #27292d;
  --background-color-neutral-subtle: #202122;
  --background-color-interactive: #27292d;
  --background-color-interactive--hover: #404244;
  --background-color-interactive--active: #54595d;
  --background-color-interactive-subtle: #202122;
  --background-color-interactive-subtle--hover: #27292d;
  --background-color-interactive-subtle--active: #404244;
  --background-color-disabled: #404244;
  --background-color-disabled-subtle: #27292d;
  --background-color-inverted: #f8f9fa;
  --background-color-progressive--focus: #6485d1;
  --background-color-progressive-subtle: #1b223d;
  --background-color-progressive-subtle--hover: #233566;
  --background-color-progressive-subtle--active: #3056a9;
  --background-color-destructive--focus: #6485d1;
  --background-color-destructive-subtle: #3c1a13;
  --background-color-destructive-subtle--hover: #612419;
  --background-color-destructive-subtle--active: #9f3526;
  --background-color-error-subtle: #3c1a13;
  --background-color-error-subtle--hover: #612419;
  --background-color-error-subtle--active: #9f3526;
  --background-color-warning-subtle: #2d2212;
  --background-color-success-subtle: #132821;
  --background-color-notice-subtle: #27292d;
  --background-color-content-added: #233566;
  --background-color-content-removed: #453217;
  --background-color-target-text: #572c19;
  --background-color-backdrop-light: rgba(0, 0, 0, 0.65);
  --background-color-backdrop-dark: hsla(0, 0%, 100%, 0.65);

  --border-color-base: #72777d;
  --border-color-emphasized: #eaecf0;
  --border-color-subtle: #54595d;
  --border-color-muted: #404244;
  --border-color-interactive--hover: #a2a9b1;
  --border-color-interactive--active: #c8ccd1;
  --border-color-disabled: #54595d;
  --border-color-inverted: #101418;
  --border-color-progressive--hover: #88a3e8;
  --border-color-progressive--active: #a6bbf5;
  --border-color-progressive--focus: #6485d1;
  --border-color-destructive--hover: #fd7865;
  --border-color-destructive--active: #fea898;
  --border-color-destructive--focus: #6485d1;
  --border-color-error--hover: #fd7865;
  --border-color-error--active: #fea898;
  --border-color-warning--hover: #ca982e;
  --border-color-warning--active: #edb537;
  --border-color-content-added: #233566;
  --border-color-content-removed: #987027;
}

/* Derived variables (borders/shadows) must also be redefined on `body`.
   Otherwise they can inherit resolved values from the OS `prefers-color-scheme` palette. */
body:not(.theme-dark),
body.theme-dark {
  --border-base: var(--border-width-base) var(--border-style-base) var(--border-color-base);
  --border-subtle: var(--border-width-base) var(--border-style-base) var(--border-color-subtle);
  --border-progressive: var(--border-width-base) var(--border-style-base) var(--border-color-progressive);
  --border-destructive: var(--border-width-base) var(--border-style-base) var(--border-color-destructive);
  --border-transparent: var(--border-width-base) var(--border-style-base) var(--border-color-transparent);
  --outline-base--focus: var(--border-width-base) solid transparent;

  --box-shadow-small: var(--box-shadow-outset-small) var(--box-shadow-color-base);
  --box-shadow-small-top: var(--box-shadow-outset-small-top) var(--box-shadow-color-base);
  --box-shadow-small-bottom: var(--box-shadow-outset-small-bottom) var(--box-shadow-color-base);
  --box-shadow-medium: var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base);
  --box-shadow-large: var(--box-shadow-outset-large-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-large-around) var(--box-shadow-color-alpha-base);
  --box-shadow-drop-small: var(--box-shadow-outset-small) var(--box-shadow-color-base);
  --box-shadow-drop-medium: var(--box-shadow-outset-medium-below) var(--box-shadow-color-alpha-base), var(--box-shadow-outset-medium-around) var(--box-shadow-color-alpha-base);
}

:root {
  --color-print--visited: #520;
  --ss-pos-top: 1rem;
  --ss-pos-right: 1.2rem;
  --ss-pos-bottom: 1.2rem;
  --ss-width: 9.5rem;
  --ss-height: 2.4rem;
  --ss-select-width: 11rem;
  --ss-select-z-index: 1;
  --ss-button-z-index: 2
}

html {
  font-family: sans-serif;
  text-size-adjust: 100%;
}

details,
summary {
  display: block
}

audio,
canvas,
progress,
video {
  vertical-align: baseline
}

audio:not([controls]) {
  display: none;
  height: 0
}

a:active,
a:hover {
  outline: 0
}

abbr[title] {
  border-bottom: 1px dotted
}

b,
strong {
  font-weight: 700
}

dfn {
  font-style: italic
}

h1 {
  font-size: 3.2rem;
  margin: 1.2rem 0
}

small {
  font-size: 1.3rem
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}

sup {
  top: -.5em
}

sub {
  bottom: -.25em
}

figure {
  margin: 1.6rem 4rem
}

hr {
  box-sizing: content-box
}

pre {
  overflow: auto
}

code,
kbd,
pre,
samp {
  font-family: var(--font-family-monospace--fallback);
  font-size: 1.4rem
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0
}

button,
select {
  text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  appearance: button;
  cursor: pointer
}

button[disabled],
html input[disabled] {
  cursor: default
}

button::focus-inner,
input::focus-inner {
  border: 0;
  padding: 0
}

input {
  line-height: normal
}

input[type=number]::inner-spin-button,
input[type=number]::outer-spin-button {
  height: auto
}

input[type=search] {
  appearance: none;
  box-sizing: content-box
}

input[type=search]::search-cancel-button,
input[type=search]::search-decoration {
  appearance: none
}

input[type=search]:focus {
  outline-offset: -2px
}

fieldset {
  border: var(--border-base);
  margin: 0 .2rem;
  padding: .6rem 1rem 1.2rem
}

legend {
  padding: 0
}

optgroup {
  font-weight: 700
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

td,
th {
  padding: 0
}

.hidden {
  display: none !important
}

.screen-reader-text {
  display: block;
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  overflow: hidden
}

body {
  background-color: var(--background-color-base);
  color: var(--color-base);
  font-family: var(--font-family-system-sans);
  font-size: 1rem;
  line-height: 1.5;
  margin: .4rem 0 1.6rem;

  a {
    touch-action: manipulation
  }

  a,
  a:active,
  a:focus {
    unicode-bidi: embed;
    outline: 0;
    color: var(--color-progressive);
    text-decoration: none
  }

  a:focus {
    outline: 1px solid var(--outline-color-progressive--focus)
  }

  a:hover {
    text-decoration: underline
  }

  img {
    vertical-align: middle
  }

  hr,
  img {
    border: 0
  }

  hr {
    clear: both;
    height: 0;
    border-bottom: var(--border-subtle);
    margin: .26rem 0
  }

  .pure-button {
    display: inline-block;
    line-height: normal;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    user-select: none;
    box-sizing: border-box;
    background-color: var(--background-color-interactive-subtle);
    color: var(--color-base);
    position: relative;
    min-height: 1.92rem;
    min-width: 1.6rem;
    margin: .16rem 0;
    border: var(--border-base);
    border-radius: var(--border-radius-base);
    padding: .8rem 1.6rem;
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    text-decoration: none;
    vertical-align: top;
    transition: background .1s ease, color .1s ease, border-color .1s ease, box-shadow .1s ease
  }

  .pure-button::focus-inner {
    padding: 0;
    border: 0
  }

  .pure-button-hover,
  .pure-button:hover {
    background-color: var(--background-color-base);
    border-color: var(--border-color-base);
    color: var(--color-base--hover)
  }

  .pure-button-active,
  .pure-button:active {
    background-color: var(--background-color-interactive);
    border-color: var(--border-color-interactive);
    color: var(--color-emphasized)
  }

  .pure-button:focus {
    outline: var(--outline-base--focus);
    border-color: var(--border-color-progressive--focus);
    box-shadow: var(--box-shadow-inset-small) var(--box-shadow-color-progressive--focus)
  }

  .pure-button-primary-progressive {
    background-color: var(--background-color-progressive);
    border-color: var(--border-color-progressive);
    color: var(--color-inverted)
  }

  .pure-button-primary-progressive:hover {
    background: var(--background-color-progressive--hover);
    border-color: var(--border-color-progressive--hover)
  }

  .pure-button-primary-progressive:active {
    background-color: var(--background-color-progressive--active);
    border-color: var(--border-color-progressive--active);
    box-shadow: none;
    color: var(--color-inverted)
  }

  .pure-button-primary-progressive:focus {
    box-shadow: var(--box-shadow-inset-small) var(--box-shadow-color-progressive--focus), var(--box-shadow-inset-medium) var(--box-shadow-color-inverted);
    border-color: var(--border-color-progressive--focus)
  }

  .pure-form input[type=search] {
    background-color: var(--background-color-base);
    display: inline-block;
    box-sizing: border-box;
    border: var(--border-base);
    border-radius: var(--border-radius-base);
    padding: .8rem;
    box-shadow: var(--box-shadow-inset-small) var(--box-shadow-color-inverted);
    vertical-align: middle
  }

  .pure-form input:focus:invalid {
    color: var(--color-error);
    border-color: var(--border-color-error)
  }

  .pure-form fieldset {
    margin: 0;
    padding: .56rem 0 1.2rem;
    border: 0
  }

  @media only screen and (max-width:480px) {
    .pure-form input[type=search] {
      display: block
    }
  }