:root {
  color-scheme: light;
  --muted: #68715f;
  --accent-button: #c33b2e;
  --accent-ink: #ffffff;
  --surface: #fff;
  --control: #fafbf7;
  --soft: #f0f1eb;
  --olive: #e9eddf;
  --olive-hover: #e4ead8;
  --olive-line: #d5dfc6;
  --blue-panel: #e9edf8;
  --blue-line: #dae0ef;
  --warm-panel: #f3ead9;
  --warm-line: #e4ddc4;
  --subtext: #59654f;
  --blue-text: #5e708e;
  --warm-text: #756342;
  --action: #23241f;
  --action-hover: #3c4035;
  --action-text: #fff;
  --vote-panel: #eeeee7;
  --vote-compact: #f1efe7;
  --yes: #50663c;
  --no: #806353;
  --yes-fill: #8ca276;
  --no-fill: #c6a195;
  --neutral-fill: #b7bdae;
  --yes-bg: #e0e7d4;
  --yes-border: #c2ceae;
  --no-border: #d6d7cb;
  --selected-yes: #526b3c;
  --selected-no: #83594b;
  --selected-text: #fff;
  --before: #f9eee8;
  --after: #edf2e4;
  --art-yandex: #f0ede2;
  --art-telegram: #dbeaf8;
  --art-shadow: #cbd3b9;
  --bubble: #ffffffaa;
  --hero-panel: #e8ecdf;
  --hero-feature-text: #4a5541;
}
.claim-number {
  color: var(--accent-button);
}
.argument-card > .eyebrow {
  color: var(--subtext);
}
.form-section-title > span {
  color: var(--accent-button);
}
.evidence-field {
  min-width: 0;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171c19;
  --paper: #222923;
  --ink: #edf0e7;
  --muted: #adb6a5;
  --line: #414b42;
  --red: #ff8e76;
  --blue: #91baff;
  --gold: #d9bb78;
  --surface: #222923;
  --control: #1b231e;
  --soft: #1c231e;
  --olive: #2a3428;
  --olive-hover: #35432f;
  --olive-line: #4b5b43;
  --blue-panel: #232f40;
  --blue-line: #415775;
  --warm-panel: #362f23;
  --warm-line: #66553b;
  --subtext: #b6c1ab;
  --blue-text: #b4c7e5;
  --warm-text: #dfc69a;
  --action: #e1e8d6;
  --action-hover: #f2f5eb;
  --action-text: #1d271a;
  --accent-button: #ff8e76;
  --accent-ink: #1d271a;
  --vote-panel: #252e24;
  --vote-compact: #2b2e23;
  --yes: #bedc9d;
  --no: #e5b29d;
  --yes-fill: #a5c788;
  --no-fill: #c49c89;
  --neutral-fill: #8b9883;
  --yes-bg: #35442c;
  --yes-border: #718961;
  --no-border: #776453;
  --selected-yes: #bedc9d;
  --selected-no: #e5b29d;
  --selected-text: #1d271a;
  --before: #3d2924;
  --after: #2b3c29;
  --art-yandex: #302f23;
  --art-telegram: #243a4b;
  --art-shadow: #45533a;
  --bubble: #222d35e6;
  --hero-panel: #2c3729;
  --hero-feature-text: #c0cdb1;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #171c19;
    --paper: #222923;
    --ink: #edf0e7;
    --muted: #adb6a5;
    --line: #414b42;
    --red: #ff8e76;
    --blue: #91baff;
    --gold: #d9bb78;
    --surface: #222923;
    --control: #1b231e;
    --soft: #1c231e;
    --olive: #2a3428;
    --olive-hover: #35432f;
    --olive-line: #4b5b43;
    --blue-panel: #232f40;
    --blue-line: #415775;
    --warm-panel: #362f23;
    --warm-line: #66553b;
    --subtext: #b6c1ab;
    --blue-text: #b4c7e5;
    --warm-text: #dfc69a;
    --action: #e1e8d6;
    --action-hover: #f2f5eb;
    --action-text: #1d271a;
    --accent-button: #ff8e76;
    --accent-ink: #1d271a;
    --vote-panel: #252e24;
    --vote-compact: #2b2e23;
    --yes: #bedc9d;
    --no: #e5b29d;
    --yes-fill: #a5c788;
    --no-fill: #c49c89;
    --neutral-fill: #8b9883;
    --yes-bg: #35442c;
    --yes-border: #718961;
    --no-border: #776453;
    --selected-yes: #bedc9d;
    --selected-no: #e5b29d;
    --selected-text: #1d271a;
    --before: #3d2924;
    --after: #2b3c29;
    --art-yandex: #302f23;
    --art-telegram: #243a4b;
    --art-shadow: #45533a;
    --bubble: #222d35e6;
    --hero-panel: #2c3729;
    --hero-feature-text: #c0cdb1;
  }
}
/* Theme controls share the site's native form and focus styles. */
.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  white-space: nowrap;
}
.theme-control select {
  width: auto;
  min-width: 86px;
  min-height: 40px;
  padding: 8px 10px;
  font-size: 12px;
}
.mobile-nav .theme-control {
  padding: 12px 0;
}
@media (max-width: 1150px) {
  .header-actions > .theme-control > span {
    display: none;
  }
}
@media (max-width: 900px) {
  .header-actions > .theme-control {
    display: none;
  }
  .mobile-nav .theme-control {
    justify-content: space-between;
  }
}

/* Keep the footer at the viewport edge on short server pages. */
.site-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
.site-page > .site-header,
.site-page > #main,
.site-page > .site-footer {
  flex-shrink: 0;
}
.site-page > #main {
  margin-block: 0;
}
.site-page > #main:not(.shell) {
  width: 100%;
}
.site-page > .site-footer {
  margin-top: auto;
}

/* Semantic surfaces apply to both the server site and saved design prototype. */
.floating-label,
.catalog-search,
.material-card,
.source-card,
.related-link,
.review-card,
.submission-form,
.submission-item,
.editor-inspector,
.editor-empty,
.radio-option,
.review-quote,
.code-preview span {
  background: var(--surface);
  border-color: var(--line);
}
input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  background: var(--control);
  border-color: var(--line);
}
.catalog-search input:not([type="checkbox"]):not([type="radio"]) {
  background: transparent;
}
.button.dark,
.category-tabs button.active,
.skip-link,
.toast {
  background: var(--action);
  color: var(--action-text);
}
.button.dark:hover {
  background: var(--action-hover);
}
.button.outlined {
  border-color: var(--line);
}
.button.outlined:hover,
.icon-button:hover,
.category-tabs button:hover,
.search-submit:hover {
  background: var(--olive-hover);
}
.search-submit,
.site-footer {
  background: var(--soft);
}
.hero-feature {
  background: var(--hero-panel);
  border-color: var(--olive-line);
}
.hero-feature-top,
.hero-feature-bottom > div > span {
  color: var(--subtext);
}
.feature-pill {
  background: var(--surface);
  color: var(--hero-feature-text);
}
.hero-yandex {
  text-shadow: 8px 10px 0 var(--art-shadow);
}
.hero-cursor {
  text-shadow: 3px 4px 0 var(--surface);
}
.hero-feature-search,
.search-object {
  background: var(--surface);
}
.hero-feature-search > span:last-child,
.search-object-button {
  color: var(--action-text);
}
.hero-orbit,
.round-arrow,
.orb,
.orbit {
  border-color: var(--line);
}
.proof-stamp {
  background: var(--olive);
  color: var(--yes);
}
.yandex-art {
  background: var(--art-yandex);
}
.telegram-art {
  background: var(--art-telegram);
}
.y-letter {
  text-shadow: 5px 6px var(--art-shadow);
}
.message-bubble,
.year-label {
  background: var(--bubble);
  border-color: var(--line);
  color: var(--blue-text);
}
.art-caption,
.art-star,
.telegram-art .art-caption {
  color: var(--subtext);
}
.art-grid {
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
}
.suggest-card,
.extra-filters,
.filter-button[aria-expanded="true"],
.pill,
.argument-card,
.editor-note,
.verify-emblem,
.avatar,
.count-bubble,
.editor-checklist,
.preview-claim {
  background: var(--olive);
  border-color: var(--olive-line);
}
.suggest-card:hover {
  background: var(--olive-hover);
}
.suggest-graphic i {
  background: var(--olive);
  border-color: var(--olive-line);
}
.suggest-graphic .sg-two {
  background: var(--olive-hover);
}
.suggest-graphic > span,
.verify-emblem,
.note-star {
  color: var(--yes);
}
.participate,
.origin-card.roots {
  background: var(--blue-panel);
  border-color: var(--blue-line);
}
.participate-actions > .outlined {
  border-color: var(--blue-line);
}
.participate-mark,
.participate-mark > span {
  color: var(--blue-text);
}
.caveat-box,
.prototype-notice,
.origin-card.heritage {
  background: var(--warm-panel);
  border-color: var(--warm-line);
}
.caveat-box p,
.caveat-box h3,
.prototype-notice,
.origin-card.heritage p {
  color: var(--warm-text);
}
.origin-card {
  background: var(--soft);
  border-color: var(--line);
}
.notice,
.source-card div > span,
.review-product {
  background: var(--olive);
  color: var(--subtext);
}
.review-product.telegram {
  background: var(--blue-panel);
  color: var(--blue-text);
}
.submission-item.active,
.editor-sidebar nav a.active,
.editor-sidebar nav button.active {
  background: var(--olive);
  border-color: var(--olive-line);
}
.diff-field del,
.comparison-before {
  background: var(--before);
}
.comparison-after {
  background: var(--after);
}
.hero-description,
.lead-text,
.manifesto-inner,
.badge,
.category-tabs button,
.card-body > p,
.card-title svg,
.card-bottom > span,
.principles p,
.origin-note,
.origin-note a,
.suggest-card p,
.suggest-top,
.editor-note p,
.editor-note li,
.origin-card p,
.review-meta,
.footer-bottom,
.footer-top > p > span,
.footer-links,
.visual-note,
.argument-caveat p,
.argument-caveat strong,
.source-card p,
.source-card div > span,
.source-inline,
.copy-hint,
.field-hint,
label .field-hint,
.optional,
.form-disclaimer,
dialog .form-disclaimer,
.submission-item > div,
.submission-item p,
.inspector-tabs button,
.preview-claim strong {
  color: var(--subtext);
}
.participate-copy p,
.participate-copy .eyebrow,
.participate-actions > span,
.origin-card.roots p {
  color: var(--blue-text);
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
}
.catalog-search > svg,
.catalog-search input::placeholder {
  color: var(--muted);
}
:focus-visible {
  outline-color: var(--blue);
}
::selection {
  background: var(--warm-panel);
  color: var(--ink);
}
dialog {
  border-color: var(--line);
}
dialog::backdrop {
  background: #080d0bb3;
}
.vote-global {
  background: var(--vote-panel);
  border-color: var(--line);
}
.vote-compact {
  background: var(--vote-compact);
  border-color: var(--line);
}
.vote-intro .eyebrow,
.vote-global .vote-intro p,
.vote-compact .vote-intro p,
.vote-global .vote-demo,
.vote-compact .vote-demo,
.vote-global .vote-disclaimer,
.vote-compact .vote-disclaimer,
.vote-meter-captions,
.vote-global .vote-meter-captions {
  color: var(--subtext);
}
.vote-meter-labels > strong {
  color: var(--yes);
}
.vote-meter-captions > span:last-child,
.meter-opposite {
  color: var(--no);
}
.vote-widget .meter-yes {
  background: repeating-linear-gradient(
    90deg,
    var(--yes-fill) 0,
    var(--yes-fill) 6px,
    transparent 6px,
    transparent 9px
  );
}
.vote-widget .meter-no {
  background: repeating-linear-gradient(
    90deg,
    var(--no-fill) 0,
    var(--no-fill) 6px,
    transparent 6px,
    transparent 9px
  );
}
.vote-widget[data-empty="true"] .meter-no {
  background: repeating-linear-gradient(
    90deg,
    var(--neutral-fill) 0,
    var(--neutral-fill) 6px,
    transparent 6px,
    transparent 9px
  );
}
.vote-yes {
  background: var(--yes-bg);
  border-color: var(--yes-border) !important;
  color: var(--yes);
}
.vote-no {
  border-color: var(--no-border) !important;
  color: var(--no);
}
.vote-yes:hover,
.vote-yes[aria-pressed="true"] {
  background: var(--selected-yes);
  border-color: var(--selected-yes) !important;
  color: var(--selected-text);
}
.vote-no:hover,
.vote-no[aria-pressed="true"] {
  background: var(--selected-no);
  border-color: var(--selected-no) !important;
  color: var(--selected-text);
}
.card-bottom,
.argument-caveat {
  border-color: var(--line);
}
.pill,
.add-source,
.source-index,
.source-card > svg,
.verification-title svg,
.inspector-tabs span,
.code-preview span {
  color: var(--subtext);
}
.caveat-icon {
  color: var(--warm-text);
}
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--yes);
}
.theme-control {
  flex-direction: row;
  margin: 0;
}

.hero-feature-search > span:last-child,
.search-object-button,
.filter-button #filter-count:not(:empty) {
  background: var(--accent-button);
  color: var(--accent-ink);
}
.text-button.red,
.eyebrow.red {
  color: var(--accent-button);
}
:root:not([data-theme]) .theme-control {
  display: none;
}

/* Shared form standard. Keep native semantics, validation and keyboard input. */
:root {
  --control-height: 46px;
  --control-radius: 9px;
  --control-font-size: 14px;
  --control-padding-x: 14px;
  --control-hover-line: var(--muted);
  --control-selected: var(--olive);
  --control-selected-line: var(--olive-line);
  --control-error: var(--accent-button);
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
textarea,
select {
  min-width: 0;
  min-height: var(--control-height);
  max-width: 100%;
  padding: 11px var(--control-padding-x);
  border: 1px solid var(--line);
  border-radius: var(--control-radius);
  background: var(--control);
  color: var(--ink);
  font-size: var(--control-font-size);
  font-weight: 400;
  line-height: 1.5;
  transition:
    border-color 0.15s,
    background-color 0.15s;
}
textarea {
  min-height: 112px;
}
input::placeholder,
textarea::placeholder {
  color: var(--muted);
  font-size: inherit;
  opacity: 1;
}
input:not([type="hidden"]):not(:disabled):not([readonly]):hover,
textarea:not(:disabled):not([readonly]):hover,
select:not(:disabled):hover {
  border-color: var(--control-hover-line);
}
input:not([type="checkbox"]):not([type="radio"]):not(
    [type="hidden"]
  ):focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
textarea:focus-visible,
textarea:not(:disabled):not([readonly]):focus-visible,
select:not(:disabled):focus-visible {
  border-color: var(--blue);
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
):is(:user-invalid, [aria-invalid="true"]) {
  border-color: var(--control-error);
  border-style: dashed;
}
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea,
  select
):disabled {
  background: var(--soft);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.65;
}
:is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  textarea
)[readonly] {
  background: var(--soft);
  border-style: dashed;
}
select {
  cursor: pointer;
}

/* The picker is in the top layer: it cannot be clipped by a card or dialog.
   Browsers without base-select retain their accessible native picker. */
@supports (appearance: base-select) {
  select:not([multiple]):not([size]),
  select:not([multiple]):not([size])::picker(select) {
    appearance: base-select;
  }
  select:not([multiple]):not([size]) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: start;
  }
  select::picker-icon {
    content: "";
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    margin: 0;
    background-color: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m2 4 4 4 4-4' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
    rotate: none;
    color: var(--muted);
  }
  select:open:not(:disabled) {
    border-color: var(--blue);
  }
  select:open::picker-icon {
    rotate: 180deg;
    color: var(--ink);
  }
  select::picker(select) {
    inset: auto;
    top: anchor(bottom);
    left: anchor(left);
    position-try-fallbacks: flip-block;
    position-try-order: normal;
    min-width: anchor-size(width);
    max-width: calc(100vw - 24px);
    max-height: min(360px, 60dvh);
    margin-block: 6px;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--ink) 12%, transparent);
    font-family: inherit;
    font-size: var(--control-font-size);
    font-weight: 400;
    line-height: 1.5;
    overflow: auto;
    overscroll-behavior: contain;
  }
  select option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid transparent;
    border-radius: 7px;
    background: var(--surface);
    color: var(--ink);
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }
  select option:checked {
    background: var(--control-selected);
    border-color: var(--control-selected-line);
    font-weight: 550;
  }
  select option:not(:disabled):hover {
    background: var(--soft);
  }
  select option:checked:hover {
    background: var(--olive-hover);
  }
  select option:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: -2px;
  }
  select option::checkmark {
    order: 1;
    margin-left: auto;
    color: var(--yes);
  }
  select option:disabled {
    color: var(--muted);
    cursor: not-allowed;
  }
}

/* Compact header control is the sole size variant. */
.theme-control select {
  min-height: 40px;
  min-width: 110px;
  padding: 8px 12px;
  font-size: 12px;
}
.editor-note-form textarea,
.editor-note-form select {
  font-size: var(--control-font-size);
}
.catalog-search:focus-within {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.catalog-search input:not([type="checkbox"]):not([type="radio"]) {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  outline: none;
}
.catalog-search
  input:not([type="hidden"]):not(:disabled):not([readonly]):focus-visible {
  border: 0;
  outline: none;
}
.catalog-search input::placeholder {
  font-size: inherit;
}
input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  display: inline-grid;
  place-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--control-hover-line);
  border-radius: 5px;
  background: var(--control);
  vertical-align: middle;
  cursor: pointer;
}
input[type="radio"] {
  border-radius: 50%;
}
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--action);
  border-color: var(--action);
  color: var(--action-text);
}
input[type="checkbox"]:checked::before {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -3px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: -45deg;
}
input[type="radio"]:checked::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
  background: var(--soft);
  border-color: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}
.choice-label,
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
}
.radio-option:has(input:checked) {
  border-color: var(--control-selected-line);
  background: var(--control-selected);
}

/* Administrative forms use stable columns and persistent labels. */
.admin-user {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(220px, 2fr) auto;
  gap: 16px;
  align-items: end;
  padding: 20px;
  border-radius: 12px;
  background: var(--surface);
}
.admin-user-heading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.admin-user-heading strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 15px;
}
.admin-user label {
  min-width: 0;
  margin: 0;
  gap: 8px;
  font-size: 12px;
}
.admin-user select,
.admin-user input {
  max-width: 100%;
}
.admin-user > .button {
  min-height: var(--control-height);
  padding-block: 11px;
}
@media (max-width: 900px) {
  .admin-user {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .admin-user > .button {
    grid-column: 2;
    justify-self: end;
  }
}
@media (max-width: 620px) {
  :root {
    --control-font-size: 16px;
  }
  .admin-user {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px;
  }
  .admin-user > .button {
    grid-column: 1;
    justify-self: stretch;
  }
  .admin-user-heading {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .theme-control select {
    min-height: 44px;
    font-size: var(--control-font-size);
  }
}
@media (prefers-reduced-motion: reduce) {
  input,
  textarea,
  select {
    transition: none !important;
  }
}
@media (forced-colors: active) {
  input[type="checkbox"],
  input[type="radio"] {
    appearance: auto;
  }
}