/*
 * Лаборатория Кошмарского — nora.css
 * Общий вид страниц «кроличьей норы» (папка nora/): окна в духе Windows 7 на темном
 * «рабочем столе», диалоги «Служба безопасности», листы документов, плашки, печати.
 * За основу взят css/karantin.css (классы kq- переименованы в nora-).
 * Работает в паре с js/nora.js. Главы подключают этот файл первым, потом свой css/nora/<slug>.css.
 */

.nora,
.nora *,
.nora *::before,
.nora *::after {
    box-sizing: border-box;
}

/* ===== СТРАНИЦА ===== */
body.nora {
    min-height: 100vh;
    margin: 0;
    padding: 48px 16px 24px;
    /* страховка: если что-то шире экрана, прокрутка остается внутри окна, а не у всей страницы */
    overflow-x: hidden;
    background: #0E1010 radial-gradient(ellipse at center, #232828 0%, #0E1010 75%) fixed;
    color: #000000;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 13px;
    line-height: 1.4;
}

.nora img {
    max-width: 100%;
}

.nora-page {
    max-width: 1000px;
    margin: 0 auto;
    transition: opacity .3s ease-out, filter .3s ease-out;
}

/* Документ отозван: прячем содержимое, остается только диалог */
.nora--revoked .nora-page {
    display: none;
}

/* ===== УХОД НА СЛЕДУЮЩУЮ СТРАНИЦУ =====
   Окно засвечивается и гаснет, поверх пробегает белая вспышка */
.nora--leaving .nora-page {
    opacity: 0;
    filter: brightness(2.2);
}

.nora--leaving::after {
    content: '';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    background: #ffffff;
    pointer-events: none;
    animation: nora-flash .3s ease-out forwards;
}

@keyframes nora-flash {
    0%   { opacity: 0; }
    30%  { opacity: .55; }
    100% { opacity: 0; }
}

/* ===== ОКНО ===== */
.nora-window,
.nora-dialog {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 6px 6px;
    background: linear-gradient(#C9DAEE, #AFC6E0);
    border: 1px solid #4B6585;
    border-radius: 6px 6px 4px 4px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .7);
}

.nora-window--wide {
    max-width: 1000px;
}

.nora-window--narrow {
    max-width: 520px;
}

.nora-window__title {
    display: flex;
    align-items: center;
    height: 30px;
    color: #1E1E1E;
    /* «Стеклянная» подпись Windows 7: белое свечение вокруг букв */
    text-shadow: 0 0 8px #ffffff, 0 0 3px #ffffff;
}

.nora-window__title img {
    flex: 0 0 auto;
    margin: 0 8px 0 4px;
}

/* Длинный заголовок обрезается многоточием, а не раздвигает окно.
   min-width: 0 нужен flex-элементу, иначе он не сжимается уже своего текста */
.nora-window__title span {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.nora-window__controls {
    display: flex;
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 8px;
    align-self: flex-start;
}

.nora-window__controls button {
    width: 28px;
    height: 19px;
    padding: 0;
    border: 1px solid #5C7698;
    border-top: 0;
    background: linear-gradient(#DCE7F4, #B3C8E2);
    color: #2B3F5C;
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}

.nora-window__controls button + button {
    border-left: 0;
}

.nora-window__controls button:first-child {
    border-radius: 0 0 0 4px;
}

.nora-window__controls .nora-window__close {
    width: 44px;
    border-radius: 0 0 4px 0;
    background: linear-gradient(#E3A08F, #C7442B 50%, #B32E14);
    border-color: #7A2210;
    color: #ffffff;
}

.nora-window__controls .nora-window__close:hover {
    background: linear-gradient(#F0B4A3, #DA563B 50%, #C73A1E);
}

.nora-window__body {
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #8DA2BD;
}

/* Окна, идущие друг за другом (правило стоит после .nora-window, чтобы перебить его margin) */
.nora-page > * + * {
    margin-top: 18px;
}

/* Панель инструментов и вкладки прилегают к телу окна сверху */
.nora-toolbar + .nora-list,
.nora-tabs + .nora-window__body {
    border-top: 0;
}

/* ===== ГЛУБИНА: тело окна темнеет от главы к главе =====
   Класс nora--dN ставит у body сама глава (1–9), генератор — через Nora.depth (10–14).
   «Бумага» .nora-paper остается белой. Тот же цвет у активной вкладки, чтобы она сливалась с телом */
.nora--d1 .nora-window__body, .nora--d1 .nora-tabpanel, .nora--d1 .nora-dialog__body,
.nora--d1 .nora-tab.is-active { background: #FFFFFF; }
.nora--d2 .nora-window__body, .nora--d2 .nora-tabpanel, .nora--d2 .nora-dialog__body,
.nora--d2 .nora-tab.is-active { background: #FDFCFB; }
.nora--d3 .nora-window__body, .nora--d3 .nora-tabpanel, .nora--d3 .nora-dialog__body,
.nora--d3 .nora-tab.is-active { background: #FBFAF8; }
.nora--d4 .nora-window__body, .nora--d4 .nora-tabpanel, .nora--d4 .nora-dialog__body,
.nora--d4 .nora-tab.is-active { background: #F8F6F2; }
.nora--d5 .nora-window__body, .nora--d5 .nora-tabpanel, .nora--d5 .nora-dialog__body,
.nora--d5 .nora-tab.is-active { background: #F5F2ED; }
.nora--d6 .nora-window__body, .nora--d6 .nora-tabpanel, .nora--d6 .nora-dialog__body,
.nora--d6 .nora-tab.is-active { background: #F2EFE9; }
.nora--d7 .nora-window__body, .nora--d7 .nora-tabpanel, .nora--d7 .nora-dialog__body,
.nora--d7 .nora-tab.is-active { background: #EFECE6; }
.nora--d8 .nora-window__body, .nora--d8 .nora-tabpanel, .nora--d8 .nora-dialog__body,
.nora--d8 .nora-tab.is-active { background: #ECE8E1; }
.nora--d9 .nora-window__body, .nora--d9 .nora-tabpanel, .nora--d9 .nora-dialog__body,
.nora--d9 .nora-tab.is-active { background: #E9E4DC; }
/* генератор glubzhe.html: этажи глубже девятой главы */
.nora--d10 .nora-window__body, .nora--d10 .nora-tabpanel, .nora--d10 .nora-dialog__body,
.nora--d10 .nora-tab.is-active { background: #E6E0D6; }
.nora--d11 .nora-window__body, .nora--d11 .nora-tabpanel, .nora--d11 .nora-dialog__body,
.nora--d11 .nora-tab.is-active { background: #E3DDD2; }
.nora--d12 .nora-window__body, .nora--d12 .nora-tabpanel, .nora--d12 .nora-dialog__body,
.nora--d12 .nora-tab.is-active { background: #E0D9CE; }
.nora--d13 .nora-window__body, .nora--d13 .nora-tabpanel, .nora--d13 .nora-dialog__body,
.nora--d13 .nora-tab.is-active { background: #DCD5CA; }
.nora--d14 .nora-window__body, .nora--d14 .nora-tabpanel, .nora--d14 .nora-dialog__body,
.nora--d14 .nora-tab.is-active { background: #D9D2C6; }

/* ===== ПАНЕЛЬ ИНСТРУМЕНТОВ ===== */
.nora-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 4px 6px;
    background: linear-gradient(#F6F9FD, #DDE7F3);
    border: 1px solid #8DA2BD;
    border-bottom: 0;
}

.nora-toolbar + .nora-window__body {
    border-top: 1px solid #C5D2E2;
}

.nora-toolbar__right {
    margin-left: auto;
    padding: 4px 6px;
    color: #5A6E86;
    font-size: 12px;
}

.nora-tool {
    margin-right: 2px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    background: transparent;
    color: #1E395B;
    font: inherit;
    cursor: pointer;
}

.nora-tool:hover {
    border-color: #A6C6E8;
    background: linear-gradient(#F2F8FE, #D6E8FA);
}

.nora-tool i {
    margin-right: 4px;
    color: #4A6C94;
}

.nora-tool[disabled],
.nora-tool[disabled] i,
.nora-tool[aria-disabled="true"],
.nora-tool[aria-disabled="true"] i {
    color: #A0A0A0;
    cursor: default;
}

.nora-tool[disabled]:hover,
.nora-tool[aria-disabled="true"]:hover {
    border-color: transparent;
    background: transparent;
}

/* ===== АДРЕСНАЯ СТРОКА ПРОВОДНИКА =====
   <div class="nora-address"><i class="fas fa-folder"></i><span class="nora-address__crumb">CKB-787</span>…</div> */
.nora-address {
    display: flex;
    flex: 1 1 260px;
    align-items: center;
    min-width: 0;
    height: 24px;
    margin: 2px 4px;
    padding: 0 6px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #A9B8CC;
    border-radius: 2px;
    color: #1E1E1E;
    white-space: nowrap;
}

.nora-address i {
    margin-right: 6px;
    color: #D4A017;
}

.nora-address__crumb {
    padding: 1px 3px;
    border: 1px solid transparent;
    border-radius: 2px;
}

.nora-address__crumb:hover {
    border-color: #A6C6E8;
    background: #E5F3FB;
}

/* ▸ между «крошками» адреса: \25B8 — код символа ▸ */
.nora-address__crumb + .nora-address__crumb::before {
    content: '\25B8';
    margin: 0 6px 0 -1px;
    color: #6A7B91;
}

/* ===== ВКЛАДКИ (как в окне «Свойства») =====
   Переключает js/nora.js: <button class="nora-tab" data-nora-tab="id-панели"> */
.nora-tabs {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4px;
    border-bottom: 1px solid #898C95;
}

.nora-tab {
    position: relative;
    margin: 2px -1px -1px 0;
    padding: 3px 10px;
    background: linear-gradient(#F3F3F3, #E1E1E1);
    border: 1px solid #898C95;
    border-radius: 3px 3px 0 0;
    color: #000000;
    font: inherit;
    cursor: pointer;
}

.nora-tab:hover {
    background: linear-gradient(#EAF6FD, #BEE6FD);
}

/* Активная вкладка выше соседних и «сливается» с телом: нижняя граница цвета фона */
.nora-tab.is-active {
    z-index: 1;
    margin-top: 0;
    padding-bottom: 5px;
    background: #ffffff;
    border-bottom-color: transparent;
    cursor: default;
}

/* aria-disabled="true" вместо disabled: по настоящей disabled-кнопке браузер не присылает клик,
   и движок не сможет ответить отказом в строке состояния */
.nora-tab[disabled],
.nora-tab[aria-disabled="true"],
.nora-tab[aria-disabled="true"]:hover {
    background: linear-gradient(#F3F3F3, #E1E1E1);
    color: #A0A0A0;
    cursor: default;
}

.nora-tabpanel {
    display: none;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid #898C95;
    border-top: 0;
}

.nora-tabpanel.is-active {
    display: block;
}

/* ===== СВОЙСТВА: «Имя — значение» ===== */
.nora-props {
    margin: 0;
}

.nora-props + .nora-props {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #DDE2E8;
}

.nora-prop {
    display: flex;
    padding: 2px 0;
}

.nora-prop__name {
    flex: 0 0 170px;
    padding-right: 8px;
    color: #5A6E86;
}

.nora-prop__value {
    flex: 1;
    min-width: 0;
    word-wrap: break-word;
}

/* ===== СПИСОК И ТАБЛИЦА ===== */
.nora-list {
    max-height: 340px;
    overflow: auto;
    background: #ffffff;
    border: 1px solid #8DA2BD;
}

/* Обертка для таблиц вне .nora-list: таблица прокручивается внутри, страница — нет */
.nora-scroll {
    overflow-x: auto;
}

.nora-table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
}

.nora-table th {
    padding: 5px 8px;
    border-right: 1px solid #E2E5EA;
    border-bottom: 1px solid #D5D5D5;
    background: linear-gradient(#FFFFFF, #F1F2F4);
    color: #4C607A;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
}

.nora-table td {
    padding: 4px 8px;
    border: 1px solid transparent;
    white-space: nowrap;
    cursor: default;
}

.nora-table tr:hover td {
    background: #E5F3FB;
}

/* Выделение строки как в проводнике Windows 7 */
.nora-table tr.is-selected td {
    background: linear-gradient(#DCEBFC, #C1DBFC);
    border-top-color: #7DA2CE;
    border-bottom-color: #7DA2CE;
}

.nora-table tr:focus {
    outline: 1px dotted #000000;
}

.nora-table__num {
    text-align: right;
}

.nora-row--accent td {
    color: #6B1A1E;
}

/* ===== ЖУРНАЛ ===== */
.nora-log__title {
    margin: 14px 0 6px;
    padding-top: 10px;
    border-top: 1px solid #DDE2E8;
    color: #1E395B;
    font-size: 14px;
    font-weight: normal;
}

.nora-log {
    max-height: 220px;
    overflow-y: auto;
    padding: 8px 10px;
    background: #ffffff;
    border: 1px solid #D5DBE3;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12px;
}

.nora-log__line {
    display: flex;
    padding: 3px 0;
    animation: nora-appear .6s ease-out both;
}

.nora-log__date {
    flex: 0 0 96px;
    color: #8A94A0;
}

.nora-log__text {
    flex: 1;
    min-width: 0;
}

.nora-log__line--accent .nora-log__text {
    color: #6B1A1E;
}

@keyframes nora-appear {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===== ЛИСТ ДОКУМЕНТА ===== */
.nora-paper {
    max-width: 760px;
    margin: 0 auto;
    padding: 36px 44px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
    color: #111111;
    font-family: 'Times New Roman', Georgia, serif;
    font-size: 14px;
    line-height: 1.5;
}

.nora-paper--tilt {
    transform: rotate(-.4deg);
}

.nora-paper h1,
.nora-paper h2,
.nora-paper h3 {
    margin: 0 0 .6em;
    font-family: 'Times New Roman', Georgia, serif;
    line-height: 1.3;
}

.nora-paper h1 {
    font-size: 17px;
    text-align: center;
}

.nora-paper h2 {
    font-size: 15px;
}

.nora-paper h3 {
    font-size: 14px;
}

.nora-paper p {
    margin: 0 0 .7em;
}

.nora-mono {
    font-family: Consolas, 'Courier New', monospace;
}

/* Рукописная резолюция синими чернилами */
.nora-hand {
    display: inline-block;
    color: #2B4C9B;
    font-family: 'Segoe Print', 'Comic Sans MS', cursive;
    font-size: 15px;
    transform: rotate(-2deg);
}

/* Карандаш: почти не виден на белом, проступает при выделении текста мышью */
.nora-pencil {
    color: #E4E4E4;
    font-family: 'Segoe Print', 'Comic Sans MS', cursive;
}

.nora-pencil::selection {
    background: #C9DAEE;
    color: #555555;
}

/* ===== ПЛАШКИ-РЕДАКЦИИ =====
   Текст внутри того же цвета, что и фон: ширина плашки по тексту, а прочитать нельзя */
.nora-redact {
    padding: 0 2px;
    background: #000000;
    color: #000000;
    cursor: default;
    /* при переносе строки каждый кусок плашки получает свои поля */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    transition: background .25s, color .25s;
}

/* Выделение мышью тоже не выдает текст */
.nora-redact::selection {
    background: #000000;
    color: #000000;
}

.nora-redact--light,
.nora-redact--light::selection {
    background: #1A1A1A;
    color: #1A1A1A;
}

.nora-redact.is-open {
    background: #E0E0E0;
    color: #555555;
}

.nora-redact.is-open::selection {
    background: #C9DAEE;
    color: #333333;
}

/* ===== ШТАМП И ПЕЧАТЬ =====
   Nora.stamp(): внешний элемент повернут, внутренний — рамка с текстом и анимация.
   Так анимация масштаба не сбивает поворот, заданный в style */
.nora-stamp {
    display: inline-block;
    vertical-align: middle;
    pointer-events: none;
}

.nora-stamp__inner {
    display: block;
    padding: 5px 12px;
    border: 3px double #A3262C;
    border-radius: 3px;
    color: #A3262C;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.35;
    text-align: center;
    text-transform: uppercase;
    opacity: .9;
}

.nora-stamp__line {
    display: block;
    white-space: nowrap;
}

.nora-stamp--land .nora-stamp__inner {
    animation: nora-stamp-land .25s ease-in both;
}

@keyframes nora-stamp-land {
    from { opacity: 0; transform: scale(1.6); }
    to   { opacity: .9; transform: scale(1); }
}

.nora-seal {
    display: inline-block;
    /* во flex-строке печать не сжимается */
    flex: 0 0 auto;
    vertical-align: middle;
    opacity: .82;
    pointer-events: none;
}

/* ===== ФЛАЖКИ И ПЕРЕКЛЮЧАТЕЛИ =====
   <label class="nora-check"><input type="checkbox"> Подпись</label>
   appearance: none убирает системный вид флажка, дальше рисуем свой */
.nora-check,
.nora-radio {
    display: inline-flex;
    align-items: center;
    margin: 2px 14px 2px 0;
    cursor: default;
}

.nora-check input,
.nora-radio input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    margin: 0 6px 0 0;
    background: linear-gradient(135deg, #DCDCDC, #FFFFFF);
    border: 1px solid #8E8F8F;
    background-position: center;
    background-repeat: no-repeat;
}

.nora-radio input {
    border-radius: 50%;
}

.nora-check input:hover,
.nora-radio input:hover {
    border-color: #3C7FB1;
    background-color: #DEF3FD;
}

/* Галочка — маленькая SVG прямо в адресе картинки; %23 — это «#» в адресе */
.nora-check input:checked {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M2 5.5l2.5 2.5L9 2.5' fill='none' stroke='%231E395B' stroke-width='1.8'/%3E%3C/svg%3E"), linear-gradient(135deg, #DCDCDC, #FFFFFF);
}

.nora-radio input:checked {
    background-image: radial-gradient(circle, #2E6DB3 0, #4B9BE0 2px, #4B9BE0 3px, transparent 3.5px), linear-gradient(135deg, #DCDCDC, #FFFFFF);
}

.nora-check input[disabled],
.nora-radio input[disabled] {
    border-color: #B1B1B1;
    background-color: #F4F4F4;
}

.nora-check input[disabled] + span,
.nora-radio input[disabled] + span {
    color: #838383;
}

/* ===== ПОЛОСА ПРОГРЕССА (зеленая, Windows 7) =====
   <div class="nora-progress"><div class="nora-progress__bar" style="width: 40%"></div></div> */
.nora-progress {
    position: relative;
    height: 15px;
    overflow: hidden;
    background: linear-gradient(#F3F3F3, #E2E2E2 50%, #D6D6D6 51%, #E6E6E6);
    border: 1px solid #B2B2B2;
    border-radius: 2px;
}

.nora-progress__bar {
    position: relative;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(#97E09E, #63D46F 45%, #37B44A 50%, #4CC05B);
    transition: width .4s ease-out;
}

/* Бегущий блик по полосе */
.nora-progress__bar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 40%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0));
    animation: nora-gleam 2.2s linear infinite;
}

@keyframes nora-gleam {
    from { left: -40%; }
    to   { left: 100%; }
}

.nora-progress--error .nora-progress__bar {
    background: linear-gradient(#F0A6A6, #E06060 45%, #C33030 50%, #D04848);
}

/* ===== ПОЛЕ ВВОДА ===== */
.nora-field {
    display: block;
    margin: 0 0 10px;
}

.nora-field__label {
    display: block;
    margin-bottom: 3px;
    color: #1E1E1E;
}

.nora-field input,
.nora-field textarea,
.nora-field select,
.nora-field__input {
    width: 100%;
    padding: 3px 5px;
    background: #ffffff;
    border: 1px solid #ABADB3;
    border-top-color: #A3A3A3;
    border-radius: 2px;
    color: #000000;
    font: inherit;
}

.nora-field input:focus,
.nora-field textarea:focus,
.nora-field__input:focus {
    border-color: #3D7BAD;
    outline: 0;
}

.nora-field input[readonly],
.nora-field input[disabled],
.nora-field textarea[readonly] {
    background: #F4F4F4;
    color: #555555;
}

/* ===== НИЗ ОКНА: КНОПКИ ===== */
.nora-foot,
.nora-dialog__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: 10px 12px;
    background: #F0F0F0;
    border: 1px solid #8DA2BD;
    border-top: 1px solid #DFDFDF;
}

.nora-foot__left {
    margin-right: auto;
    color: #5A6E86;
}

.nora-btn {
    display: inline-block;
    min-width: 86px;
    margin: 2px 0 2px 8px;
    padding: 4px 14px;
    border: 1px solid #707070;
    border-radius: 3px;
    background: linear-gradient(#F2F2F2, #EBEBEB 50%, #DDDDDD 51%, #CFCFCF);
    color: #000000;
    font: inherit;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    cursor: default;
}

.nora-btn:hover {
    border-color: #3C7FB1;
    background: linear-gradient(#EAF6FD, #D9F0FC 50%, #BEE6FD 51%, #A7D9F5);
}

.nora-btn:active {
    background: linear-gradient(#E5F4FC, #C4E5F6 50%, #98D1EF 51%, #68B3DB);
}

.nora-btn:focus {
    outline: 1px dotted #000000;
    outline-offset: -4px;
}

/* Кнопка по умолчанию: синяя обводка, как у основной кнопки в диалогах Windows 7 */
.nora-btn--default {
    border-color: #3C7FB1;
    box-shadow: inset 0 0 0 1px #A9D9F7;
}

.nora-btn[disabled],
.nora-btn[disabled]:hover,
.nora-btn[aria-disabled="true"],
.nora-btn[aria-disabled="true"]:hover {
    border-color: #ADB2B5;
    background: #F4F4F4;
    box-shadow: none;
    color: #838383;
}

/* ===== СТРОКА СОСТОЯНИЯ ===== */
.nora-status {
    min-height: 24px;
    margin-top: 6px;
    padding: 4px 8px;
    background: #F0F0F0;
    border: 1px solid #8DA2BD;
    color: #333333;
    font-size: 12px;
}

.nora-status--error {
    color: #A3262C;
}

/* ===== ДИАЛОГ «СЛУЖБА БЕЗОПАСНОСТИ» ===== */
.nora-overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
    overflow-y: auto;
    /* без анимации появления: диалоги Windows 7 возникают сразу */
    background: rgba(0, 0, 0, .45);
}

/* Немодальный диалог: слой прозрачный и пропускает клики к странице */
.nora-overlay--clear {
    background: transparent;
    pointer-events: none;
}

.nora-overlay--clear .nora-dialog {
    pointer-events: auto;
}

.nora-dialog {
    width: 100%;
    max-width: 440px;
    margin: 0;
}

.nora-dialog__body {
    display: flex;
    padding: 18px 18px 14px;
    background: #ffffff;
    border: 1px solid #8DA2BD;
    border-bottom: 0;
}

.nora-dialog__icon {
    flex: 0 0 auto;
    margin-right: 16px;
    color: #C7442B;
    font-size: 32px;
}

.nora-dialog__icon--warn {
    color: #D4A017;
}

.nora-dialog__icon--info,
.nora-dialog__icon--question {
    color: #3C7FB1;
}

.nora-dialog__icon--shield {
    color: #6B1A1E;
}

.nora-dialog__content {
    flex: 1;
    min-width: 0;
}

.nora-dialog__head {
    margin-bottom: 6px;
    color: #1E395B;
    font-size: 16px;
}

.nora-dialog__body p {
    margin: 0 0 6px;
    line-height: 1.45;
}

.nora-dialog__foot .nora-btn {
    min-width: 86px;
}

/* ===== ССЫЛКА НАЗАД ===== */
.nora-back {
    display: block;
    width: max-content;
    margin: 22px auto 0;
    color: #6F7877;
    font-size: 12px;
    text-decoration: none;
}

.nora-back:hover {
    color: #B5B5B5;
}

/* ===== СКРЫТЫЙ ЭЛЕМЕНТ (по желанию автора главы) =====
   Выглядит как обычный текст, выдает себя только при наведении */
.nora-secret {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

.nora-secret:hover {
    cursor: pointer;
}

.nora-secret:focus {
    outline: 1px dotted #6A7B91;
}

/* ===== ВИДЕОКАМЕРЫ И «СНИМКИ» ===== */
.nora-osd {
    color: #ffffff;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 13px;
    letter-spacing: 1px;
    text-shadow: 1px 1px 0 #000000, 0 0 3px #000000;
}

/* Шум поверх кадра: ::after с зерном (SVG-шум прямо в адресе картинки) и строками развертки,
   которое дергается шагами — steps(6) переключает положение рывками, без плавности */
.nora-grain {
    position: relative;
    overflow: hidden;
}

.nora-grain::after {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;
    pointer-events: none;
    background:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0, rgba(0, 0, 0, .16) 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    animation: nora-grain .5s steps(6) infinite;
}

@keyframes nora-grain {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-7px, 4px); }
    40%  { transform: translate(5px, -6px); }
    60%  { transform: translate(-4px, -3px); }
    80%  { transform: translate(6px, 5px); }
    100% { transform: translate(0, 0); }
}

/* ===== ТЕЛЕФОН ===== */
@media (max-width: 600px) {
    body.nora {
        padding: 16px 8px 24px;
    }

    .nora-window,
    .nora-dialog {
        padding: 0 3px 3px;
    }

    .nora-window__body,
    .nora-tabpanel {
        padding: 10px;
    }

    .nora-toolbar__right {
        display: none;
    }

    .nora-prop {
        display: block;
    }

    .nora-prop__name {
        display: block;
        font-size: 11px;
    }

    .nora-log__line,
    .nora-log__date {
        display: block;
    }

    .nora-paper {
        padding: 20px 16px;
    }

    .nora-dialog__body {
        padding: 14px 12px 10px;
    }

    .nora-dialog__icon {
        margin-right: 10px;
        font-size: 26px;
    }

    .nora-btn {
        min-width: 72px;
    }
}

/* ===== БЕЗ АНИМАЦИИ =====
   Если в системе включено «уменьшить движение» — все появляется сразу */
@media (prefers-reduced-motion: reduce) {
    .nora *,
    .nora *::before,
    .nora *::after,
    .nora-page {
        animation: none !important;
        transition: none !important;
    }

    .nora--leaving::after {
        display: none;
    }
}