/* ГОСТ-декодер РИНДОР и справочник обозначений (/docs/abbreviations/, /docs/oboznachenie-dverey-na-plane/).
   Добавить в конец /templates/rin/css/css.css или подключить отдельным файлом после него.
   Цвета — из css.css сайта: --teal-dark, --gold, --line; запасные значения на случай, если переменные не объявлены. */

.rd {
  margin: 20px 0 28px;
  padding: 22px 24px 18px;
  background: #fff;
  border: 1px solid var(--line, #dde3e5);
  border-top: 4px solid #558996;
  border-radius: 4px;
}
.rd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 12px; }
.rd-brand { font-weight: 600; font-size: 18px; color: var(--teal-dark, #2f5f6b); letter-spacing: .01em; }
.rd-sub { font-size: 13px; color: #6b7a7e; }
.rd-label { display: block; margin-bottom: 6px; font-size: 14px; color: #444; }
.rd-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 56px;
  padding: 12px 14px;
  border: 1px solid #b9c7cb;
  border-radius: 4px;
  font: 500 17px/1.4 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  color: #1f2a2d;
  background: #fbfcfc;
  resize: vertical;
}
.rd-input:focus { outline: 2px solid #558996; outline-offset: 1px; border-color: #558996; background: #fff; }
.rd-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.rd-btn {
  padding: 8px 14px;
  border: 1px solid #558996;
  border-radius: 4px;
  background: #fff;
  color: var(--teal-dark, #2f5f6b);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.rd-btn:hover:not([disabled]) { background: #eef4f6; }
.rd-btn:focus-visible, .rd-chip:focus-visible { outline: 2px solid var(--gold, #c9a34a); outline-offset: 2px; }
.rd-btn[disabled] { opacity: .45; cursor: default; }
.rd-status { font-size: 13px; color: #3c7d4a; }
.rd-examples { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 0; }
.rd-examples__label { font-size: 13px; color: #6b7a7e; margin-right: 2px; }
.rd-chip {
  padding: 5px 10px;
  border: 1px solid #d5dfe2;
  border-radius: 14px;
  background: #f4f8f9;
  color: #2f5f6b;
  font: 500 13px/1.4 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  text-align: left;
  cursor: pointer;
}
.rd-chip:hover { background: #e6eff2; border-color: #b9c7cb; }
.rd-chip--simple { background: #fdf6e3; border-color: #e5d3a1; color: #7a5c14; }

.rd-out:empty { display: none; }
.rd-result { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--line, #dde3e5); }
.rd-std { margin: 0 0 10px; font-size: 15px; }
.rd-std a { color: #558996; font-weight: 600; }
.rd-std--old a { color: #8a6a1f; }
.rd-std--none { color: #6b7a7e; }
.rd-why { color: #6b7a7e; font-size: 13px; }
.rd-warning {
  margin: 0 0 10px;
  padding: 10px 14px;
  border-left: 4px solid #8e2a20;
  background: #fbefed;
  font-size: 14px;
  line-height: 1.45;
}
.rd-rows { list-style: none; margin: 0; padding: 0; }
.rd-row { display: flex; gap: 14px; padding: 11px 0; border-bottom: 1px solid #eef1f2; }
.rd-row:last-child { border-bottom: 0; }
.rd-code {
  flex: 0 0 auto;
  min-width: 64px;
  max-width: 40%;
  padding: 3px 8px;
  align-self: flex-start;
  border-radius: 3px;
  background: #eef4f6;
  color: var(--teal-dark, #2f5f6b);
  font: 600 14px/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  overflow-wrap: anywhere;
}
.rd-row--fire .rd-code { background: #fbefed; color: #8e2a20; }
.rd-row--lead .rd-code { background: #f1eefb; color: #4b3b8a; }
.rd-row--unknown .rd-code { background: #fdf6e3; color: #7a5c14; }
.rd-row--warn .rd-code { background: #fbefed; color: #8e2a20; }
.rd-body { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.5; }
.rd-meaning strong { color: #1f2a2d; font-weight: 600; }
.rd-axis { display: inline-block; padding: 0 6px; border-radius: 3px; background: #f2f4f5; color: #5d6b6f; font-size: 12px; }
.rd-src { font-size: 12px; color: #6b7a7e; }
.rd-src a { color: #558996; }
.rd-src--factory { color: #8a6a1f; }
.rd-note, .rd-alt { margin-top: 3px; font-size: 13px; color: #5d6b6f; }
.rd-warn-inline { margin-top: 4px; font-size: 13px; color: #8e2a20; font-weight: 600; }
.rd-limits, .rd-glass { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: #3a4649; }
.rd-glass code { font-size: 13px; }
.rd-more { margin: 14px 0 0; font-size: 14px; }
.rd-more summary { cursor: pointer; color: #558996; }
.rd-more ol { margin: 6px 0; padding-left: 22px; }
.rd-catalog { margin: 12px 0 0; font-size: 14px; }
.rd-catalog a { color: #558996; }
.rd-summary { margin: 12px 0 0; font-size: 12px; color: #6b7a7e; }

/* Расшифровка для заявки — готовый текст под копирование */
.rd-copy {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #e5d3a1;
  border-left: 4px solid var(--gold, #c9a34a);
  border-radius: 0 4px 4px 0;
  background: #fffaf0;
}
.rd-copy__label { display: block; font-weight: 600; color: var(--teal-dark, #2f5f6b); font-size: 15px; }
.rd-copy__text {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  padding: 10px 12px;
  border: 1px solid #d9cfae;
  border-radius: 4px;
  background: #fff;
  color: #1f2a2d;
  font: 13px/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  resize: vertical;
}
.rd-copy__text:focus { outline: 2px solid var(--gold, #c9a34a); outline-offset: 1px; }
.rd-btn--main { background: #558996; border-color: #558996; color: #fff; }
.rd-btn--main:hover:not([disabled]) { background: #47778a; }

/* Справочник обозначений — статичная часть страницы */
.ab-codes { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: 14px; }
.ab-codes th, .ab-codes td { padding: 6px 10px; border-bottom: 1px solid #e6eaeb; text-align: left; vertical-align: top; }
.ab-codes th { background: #eef4f6; color: var(--teal-dark, #2f5f6b); font-weight: 600; }
.ab-codes td:first-child { white-space: nowrap; font: 600 14px/1.5 "SFMono-Regular", Consolas, "Liberation Mono", monospace; color: var(--teal-dark, #2f5f6b); }
.ab-codes.ab-plain td:first-child { font: inherit; color: inherit; }
.ab-term { margin: 18px 0 6px; scroll-margin-top: 100px; }
.ab-term + p { margin-top: 0; }
.ab-old { display: inline-block; margin-left: 6px; padding: 0 8px; border-radius: 10px; background: #fdf6e3; color: #8a6a1f; font-size: 12px; font-weight: 400; vertical-align: 2px; }
.ab-try { font-size: 13px; }
.ab-try a { color: #558996; }

/* Условные обозначения дверей на плане */
.ab-symbols { width: 100%; border-collapse: collapse; margin: 10px 0 18px; }
.ab-symbols td, .ab-symbols th { padding: 10px 12px; border-bottom: 1px solid #e6eaeb; vertical-align: middle; text-align: left; }
.ab-symbols th { background: #eef4f6; color: var(--teal-dark, #2f5f6b); font-weight: 600; font-size: 14px; }
.ab-symbols td:first-child { width: 42%; font-size: 15px; }
.ab-symbols svg { display: block; width: 100%; max-width: 360px; height: auto; color: #1f2a2d; }
.ab-symbols svg.ab-sym-1 { max-width: 280px; }
.ab-symbols svg.ab-sym-2 { max-width: 520px; }
.ab-symbol-note { display: block; margin-top: 3px; font-size: 13px; color: #6b7a7e; }

@media (max-width: 600px) {
  .rd { padding: 16px 12px 14px; }
  .rd-input { font-size: 16px; }
  .rd-row { flex-direction: column; gap: 6px; }
  .rd-code { max-width: 100%; }
  .ab-codes { display: block; overflow-x: auto; }
  /* знаки на плане: название сверху, рисунок под ним на всю ширину */
  .ab-symbols, .ab-symbols tbody, .ab-symbols tr, .ab-symbols td { display: block; width: auto; }
  .ab-symbols thead { display: none; }
  .ab-symbols td { border-bottom: 0; padding: 6px 4px; }
  .ab-symbols tr { padding: 8px 0; border-bottom: 1px solid #e6eaeb; }
  .ab-symbols td:first-child { width: auto; }
  .ab-symbols svg { max-width: 100%; }
}