/* Door.ru / forum icon system -- v1.0, 2026-11-10.
   Install alongside /design/forum/icons/f_0.svg..f_9.svg.
   GIF assets are intentionally NOT deleted: other old pages might still reference them.
*/
:root {
  --door-forum-color-0: #677084;
  --door-forum-color-1: #a07900;
  --door-forum-color-2: #a07900;
  --door-forum-color-3: #c35048;
  --door-forum-color-4: #a07900;
  --door-forum-color-5: #a07900;
  --door-forum-color-6: #8b7380;
  --door-forum-color-7: #677084;
  --door-forum-color-8: #a07900;
  --door-forum-color-9: #8b7380;
  --door-forum-accent: #ae8700;
}

/* Auto dark mode; explicit light-theme switches take precedence later. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not(.light):not(.theme-light) {
  --door-forum-color-0: #cdd0d5;
  --door-forum-color-1: #ffcf24;
  --door-forum-color-2: #ffcf24;
  --door-forum-color-3: #ff8278;
  --door-forum-color-4: #ffcf24;
  --door-forum-color-5: #ffcf24;
  --door-forum-color-6: #c5c0c1;
  --door-forum-color-7: #d3d6db;
  --door-forum-color-8: #ffcf24;
  --door-forum-color-9: #c5c0c1;
  --door-forum-accent: #ffcf24;
  }
}

/* Common switches supported (body or html). Add site's custom class here if needed. */
html.dark, body.dark,
html.dark-mode, body.dark-mode,
html.theme-dark, body.theme-dark,
html[data-theme="dark"], body[data-theme="dark"],
html[data-color-scheme="dark"], body[data-color-scheme="dark"] {
  --door-forum-color-0: #cdd0d5;
  --door-forum-color-1: #ffcf24;
  --door-forum-color-2: #ffcf24;
  --door-forum-color-3: #ff8278;
  --door-forum-color-4: #ffcf24;
  --door-forum-color-5: #ffcf24;
  --door-forum-color-6: #c5c0c1;
  --door-forum-color-7: #d3d6db;
  --door-forum-color-8: #ffcf24;
  --door-forum-color-9: #c5c0c1;
  --door-forum-accent: #ffcf24;
}
html.light, body.light,
html.theme-light, body.theme-light,
html[data-theme="light"], body[data-theme="light"],
html[data-color-scheme="light"], body[data-color-scheme="light"] {
  --door-forum-color-0: #677084;
  --door-forum-color-1: #a07900;
  --door-forum-color-2: #a07900;
  --door-forum-color-3: #c35048;
  --door-forum-color-4: #a07900;
  --door-forum-color-5: #a07900;
  --door-forum-color-6: #8b7380;
  --door-forum-color-7: #677084;
  --door-forum-color-8: #a07900;
  --door-forum-color-9: #8b7380;
  --door-forum-accent: #ae8700;
}

/* One shared mask per class for list markers and the choose-icon forms. */
.s0 {
  --door-forum-svg: url("/design/forum/icons/f_0.svg");
  --door-forum-icon-color: var(--door-forum-color-0);
}
.s1 {
  --door-forum-svg: url("/design/forum/icons/f_1.svg");
  --door-forum-icon-color: var(--door-forum-color-1);
}
.s2 {
  --door-forum-svg: url("/design/forum/icons/f_2.svg");
  --door-forum-icon-color: var(--door-forum-color-2);
}
.s3 {
  --door-forum-svg: url("/design/forum/icons/f_3.svg");
  --door-forum-icon-color: var(--door-forum-color-3);
}
.s4 {
  --door-forum-svg: url("/design/forum/icons/f_4.svg");
  --door-forum-icon-color: var(--door-forum-color-4);
}
.s5 {
  --door-forum-svg: url("/design/forum/icons/f_5.svg");
  --door-forum-icon-color: var(--door-forum-color-5);
}
.s6 {
  --door-forum-svg: url("/design/forum/icons/f_6.svg");
  --door-forum-icon-color: var(--door-forum-color-6);
}
.s7 {
  --door-forum-svg: url("/design/forum/icons/f_7.svg");
  --door-forum-icon-color: var(--door-forum-color-7);
}
.s8 {
  --door-forum-svg: url("/design/forum/icons/f_8.svg");
  --door-forum-icon-color: var(--door-forum-color-8);
}
.s9 {
  --door-forum-svg: url("/design/forum/icons/f_9.svg");
  --door-forum-icon-color: var(--door-forum-color-9);
}

/* Replace the GIF markers without touching the forum's nested <ul> tree. */
li.forum {
  list-style-type: none !important;
  list-style-image: none !important;
  position: relative;
}
li.forum::marker { content: "" !important; }
li.forum::before,
.door-forum-choice-icon {
  display: inline-block;
  width: 21px;
  height: 21px;
  background-color: var(--door-forum-icon-color, var(--door-forum-color-0));
  -webkit-mask-image: var(--door-forum-svg);
  mask-image: var(--door-forum-svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
li.forum::before {
  content: "";
  position: absolute;
  left: -27px;
  top: .16em;
  pointer-events: none;
}
li.forum.door-forum-admin-line::before { left: -26px; }

/* Radio choices are real form controls; only their icons change. */
.door-forum-choices {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  justify-content: center;
  align-items: center;
  gap: 9px 12px;
  margin: 4px auto;
}
.door-forum-choice {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 48px;
  padding: 3px 1px;
  margin: 0;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}
.door-forum-choice input[type="radio"] {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  accent-color: var(--door-forum-accent);
  cursor: pointer;
}
.door-forum-choice-icon {
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  opacity: .84;
  transition: opacity .14s ease, transform .14s ease;
}
.door-forum-choice:hover .door-forum-choice-icon,
.door-forum-choice input[type="radio"]:checked + .door-forum-choice-icon {
  opacity: 1;
  transform: scale(1.08);
}
.door-forum-choice:focus-within { outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .door-forum-choice-icon { transition: none; }
}
@media (max-width: 420px) {
  .door-forum-choices { gap: 8px 5px; }
  .door-forum-choice { min-width: 40px; gap: 3px; }
  .door-forum-choice-icon { width: 19px; height: 19px; flex-basis: 19px; }
}


/* --------------------------------------------------------------
   Door.ru public discussion form -- light + dark appearance.
   Scoped to #yosh so other site forms keep their existing styles.
   The old {LL_COLOR} inline styles are removed in lenta_sendform.html.
   -------------------------------------------------------------- */
#yosh {
  --door-form-field-bg: #ffffff;
  --door-form-field-fg: #252525;
  --door-form-field-border: #cfd1d4;
  --door-form-hint: #63676c;
  --door-form-placeholder: #7b8085;
  --door-form-focus: #b58b00;
  --door-form-focus-ring: rgba(181, 139, 0, .16);
  --door-form-button-bg: #e5b725;
  --door-form-button-fg: #221e12;
  color-scheme: light;
  width: min(100%, 1140px);
  margin: 32px auto 38px;
  box-sizing: border-box;
}

/* Mirror the existing icon color scheme switches. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]):not(.light):not(.theme-light):not(.light-mode):not(.dark-off):not([data-color-scheme="light"])
  body:not([data-theme="light"]):not(.light):not(.theme-light):not(.light-mode):not([data-color-scheme="light"]) #yosh {
    --door-form-field-bg: #2b2a27;
    --door-form-field-fg: #f3f2ee;
    --door-form-field-border: #55534e;
    --door-form-hint: #c4c0b8;
    --door-form-placeholder: #a7a39a;
    --door-form-focus: #ffcf24;
    --door-form-focus-ring: rgba(255, 207, 36, .18);
    --door-form-button-bg: #ffcf24;
    --door-form-button-fg: #242014;
    color-scheme: dark;
  }
}
html.dark #yosh, body.dark #yosh,
html.dark-mode #yosh, body.dark-mode #yosh,
html.theme-dark #yosh, body.theme-dark #yosh,
html[data-theme="dark"] #yosh, body[data-theme="dark"] #yosh,
html[data-color-scheme="dark"] #yosh, body[data-color-scheme="dark"] #yosh {
  --door-form-field-bg: #2b2a27;
  --door-form-field-fg: #f3f2ee;
  --door-form-field-border: #55534e;
  --door-form-hint: #c4c0b8;
  --door-form-placeholder: #a7a39a;
  --door-form-focus: #ffcf24;
  --door-form-focus-ring: rgba(255, 207, 36, .18);
  --door-form-button-bg: #ffcf24;
  --door-form-button-fg: #242014;
  color-scheme: dark;
}
/* Explicit light appearance wins over the user's OS setting. */
html.light #yosh, body.light #yosh,
html.light-mode #yosh, body.light-mode #yosh,
html.theme-light #yosh, body.theme-light #yosh,
html[data-theme="light"] #yosh, body[data-theme="light"] #yosh,
html[data-color-scheme="light"] #yosh, body[data-color-scheme="light"] #yosh {
  --door-form-field-bg: #ffffff;
  --door-form-field-fg: #252525;
  --door-form-field-border: #cfd1d4;
  --door-form-hint: #63676c;
  --door-form-placeholder: #7b8085;
  --door-form-focus: #b58b00;
  --door-form-focus-ring: rgba(181, 139, 0, .16);
  --door-form-button-bg: #e5b725;
  --door-form-button-fg: #221e12;
  color-scheme: light;
}

#yosh h2.center {
  margin: 0 0 18px;
  padding: 0;
  text-align: left;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.3;
}
#yosh table.door-forum-fields {
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-spacing: 0 11px !important;
  border-collapse: separate !important;
  table-layout: fixed;
  background: transparent !important;
}
#yosh .door-forum-fields td {
  padding: 0 6px;
  border: 0 !important;
  background: transparent !important;
  vertical-align: top;
}
#yosh .door-forum-fields td:first-child:not([colspan]) {
  width: 190px;
  padding-top: 13px;
  text-align: right;
}
#yosh .door-forum-fields td:nth-child(2) {
  width: auto;
}
#yosh .door-forum-fields td .small:not(.door-forum-hint) {
  color: inherit;
}
#yosh .door-forum-fields input.door-forum-control,
#yosh .door-forum-fields textarea.door-forum-control {
  display: block;
  width: 100% !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 11px 14px;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  background: var(--door-form-field-bg) !important;
  color: var(--door-form-field-fg) !important;
  -webkit-text-fill-color: var(--door-form-field-fg);
  border: 1px solid var(--door-form-field-border) !important;
  border-radius: 9px;
  box-shadow: none !important;
  outline: none;
  caret-color: var(--door-form-focus);
  transition: border-color .15s ease, box-shadow .15s ease;
}
#yosh .door-forum-fields input.door-forum-control {
  min-height: 48px;
}
#yosh .door-forum-fields textarea.door-forum-control {
  min-height: 280px;
  resize: vertical;
}
#yosh .door-forum-control::placeholder {
  color: var(--door-form-placeholder) !important;
  opacity: 1;
}
#yosh .door-forum-control:focus-visible,
#yosh .door-forum-control:focus {
  border-color: var(--door-form-focus) !important;
  box-shadow: 0 0 0 3px var(--door-form-focus-ring) !important;
}
#yosh .door-forum-fields .door-forum-hint {
  display: block;
  margin-top: 6px;
  color: var(--door-form-hint) !important;
  font-size: 13px;
  line-height: 1.5;
}
#yosh .door-forum-choices {
  justify-content: center;
  margin: 6px auto 8px;
}
#yosh .door-forum-fields .door-forum-icon-cell {
  padding-top: 2px;
}
#yosh .door-forum-fields input[type="submit"] {
  display: inline-block;
  min-height: 45px;
  padding: 10px 26px;
  background: var(--door-form-button-bg) !important;
  color: var(--door-form-button-fg) !important;
  border: 1px solid transparent !important;
  border-radius: 9px;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  cursor: pointer;
}
#yosh .door-forum-fields input[type="submit"]:hover { filter: brightness(1.06); }
#yosh .door-forum-fields input[type="submit"]:focus-visible {
  outline: 2px solid var(--door-form-focus);
  outline-offset: 3px;
}
@media (max-width: 700px) {
  #yosh { width: 100%; margin-top: 24px; }
  #yosh table.door-forum-fields, #yosh .door-forum-fields tbody,
  #yosh .door-forum-fields tr, #yosh .door-forum-fields td {
    display: block;
    width: 100% !important;
    box-sizing: border-box;
  }
  #yosh .door-forum-fields tr { margin-bottom: 16px; }
  #yosh .door-forum-fields td:first-child {
    padding: 0 6px 5px;
    text-align: left;
  }
  #yosh .door-forum-fields td:nth-child(2) { padding: 0 6px; }
  #yosh .door-forum-fields .door-forum-icon-row td:first-child { display: none; }
  #yosh .door-forum-choices { justify-content: start; }
  #yosh .door-forum-fields textarea.door-forum-control { min-height: 220px; }
}


/* Door.ru: forum table and forum links must follow the active theme. */
#main table.forum,
#main table.forum td,
#main table.forum th {
  color: inherit !important;
  background-color: transparent;
}
#main a.forumlink:link,
#main a.forumlink:visited { color: inherit !important; }
#main a.forumlink:hover,
#main a.forumlink:focus-visible { color: var(--door-forum-accent, #ae8700) !important; }

/* Legacy GIF divider embedded by the parent Door.ru page layout.
   Only remove the divider that explicitly refers to dotline2.gif. */
#main div[style*="dotline2.gif"],
#main div[style*="dotline2"],
div[style*="/design/elm/dotline2.gif"] {
  display: none !important;
  background: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}