/* ── Самохостинг шрифтов. Подсети cyrillic + latin, latin нужен для ключа и цифр ── */
/* Bitter — вариативный, один файл на подсеть (заголовки) */
@font-face {
	font-family: 'Bitter'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url('/quest_generator/source/fonts/bitter-cyrillic.woff2') format('woff2');
	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
	font-family: 'Bitter'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url('/quest_generator/source/fonts/bitter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;
}
/* JetBrains Mono — вариативный, один файл на подсеть (даты, счётчики, ключ) */
@font-face {
	font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url('/quest_generator/source/fonts/jetbrainsmono-cyrillic.woff2') format('woff2');
	unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
	font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
	src: url('/quest_generator/source/fonts/jetbrainsmono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212;
}
/* Spectral — статический: отдельные файлы под каждое начертание и курсив */
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('/quest_generator/source/fonts/spectral-400-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:400; font-display:swap; src:url('/quest_generator/source/fonts/spectral-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url('/quest_generator/source/fonts/spectral-500-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:500; font-display:swap; src:url('/quest_generator/source/fonts/spectral-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('/quest_generator/source/fonts/spectral-600-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Spectral'; font-style:normal; font-weight:600; font-display:swap; src:url('/quest_generator/source/fonts/spectral-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('/quest_generator/source/fonts/spectral-400italic-cyrillic.woff2') format('woff2'); unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family:'Spectral'; font-style:italic; font-weight:400; font-display:swap; src:url('/quest_generator/source/fonts/spectral-400italic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
/* ── Токены темы. Смена темы = подмена этого блока, вёрстка не трогается ── */
[data-theme="notebook"] {
	--paper:      #E6DFCE;   /* фон листа — тёплый манильский */
	--vellum:     #F1ECDE;   /* вставки, карточки, поля ввода */
	--ink:        #242019;   /* текст — тёпло-чёрный, графит/умбра */
	--graphite:   #726B58;   /* маргиналии, моно-метки, засечки */
	--stamp:      #953528;   /* оксфордный красный печати — провал, штампы */
	--field:      #3F5A46;   /* хвойный — закрыто, выполнено */

	--rule:  color-mix(in srgb, var(--graphite) 34%, transparent); /* линовка */
	--edge:  color-mix(in srgb, var(--ink) 15%, transparent);      /* рамки */
	--tint:  color-mix(in srgb, var(--graphite) 8%, transparent);  /* заливка-намёк */

	--f-display: 'Bitter', Georgia, serif;
	--f-text:    'Spectral', Georgia, serif;
	--f-mono:    'JetBrains Mono', ui-monospace, 'Courier New', monospace;

	--radius: 2px;   /* бумага, не пластик */
	--col: 640px;    /* узкая колонка дневника */
	--shadow: 0 24px 60px -28px rgba(0,0,0,.75);
}

/* ── Тёмный стол сайта (шапка/подвал остаются тёмными) ── */
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
	background: #06090f;
	color: #cdd6e4;
	font-family: 'DM Sans', system-ui, sans-serif;
}
.desk { padding: env(safe-area-inset-top) max(20px, env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }

/* ── Мок тёмной шапки сайта — чтобы был виден стык ── */
.site-head {
	max-width: 980px; margin: 0 auto; padding: 22px 4px 18px;
	display: flex; align-items: center; justify-content: space-between;
	font-family: system-ui, sans-serif;
}
.site-head .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .01em; color: #e8edf6; }
.site-head .brand i { width: 9px; height: 9px; border-radius: 50%; background: #3b82f6; display: inline-block; }
.site-head nav { display: flex; gap: 22px; font-size: 14px; color: #7c869a; }


/* ── Лист бумаги на тёмном столе (.sheet). Токены темы — на <html data-theme> ── */
.sheet {
	max-width: 980px; margin: 0 auto; background: var(--paper); color: var(--ink);
	font-family: var(--f-text); font-size: 17px; line-height: 1.62;
	border-radius: var(--radius); box-shadow: var(--shadow); position: relative;
	background-image:
		radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--graphite) 5%, transparent), transparent 60%),
		radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--stamp) 3%, transparent), transparent 55%);
}
/* подшивка: перфорация по верхней кромке листа */
.binding {
	height: 26px; border-bottom: 1px solid var(--rule);
	background:
		radial-gradient(circle at 24px 13px, #06090f 3.5px, transparent 4px) 0 0 / 40px 26px repeat-x;
	opacity: .9;
}
.sheet-in { padding: 40px clamp(20px, 6vw, 72px) 56px; }

/* колонка текста с полем слева под маргиналии.
   БАЗА = телефон: одна колонка, поле-маргиналия сворачивается в строку-шапку
   формуляра над записью (филинг-каптион), а не в обрубленную боковую колонку.
   Двухколоночный лист достраивается на ширине ≥720px. */
.leaf { display: block; }
.leaf > .margin { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-bottom: 22px; }
.leaf > .margin .note br { display: none; }
.leaf > .margin .note { text-transform: uppercase; letter-spacing: .1em; }
.note {
	font-family: var(--f-mono); font-size: 11px; line-height: 1.5; color: var(--graphite);
	letter-spacing: .04em; margin: 0; text-align: left;
}

/* ── Типографика ── */
[data-theme="notebook"] h1, [data-theme="notebook"] h2, [data-theme="notebook"] h3 {
	font-family: var(--f-display); font-weight: 600; line-height: 1.12; margin: 0 0 .4em; color: var(--ink);
}
[data-theme="notebook"] h1 { font-size: clamp(30px, 5vw, 46px); letter-spacing: -.01em; }
[data-theme="notebook"] h2 { font-size: 26px; }
[data-theme="notebook"] h3 { font-size: 18px; }
[data-theme="notebook"] p { margin: 0 0 1em; }
[data-theme="notebook"] a { color: var(--stamp); text-underline-offset: 3px; text-decoration-thickness: 1px; }
[data-theme="notebook"] a:hover { color: color-mix(in srgb, var(--stamp) 75%, var(--ink)); }
.mono { font-family: var(--f-mono); }
.lede { font-size: 19px; color: color-mix(in srgb, var(--ink) 82%, var(--paper)); }
.eyebrow {
	font-family: var(--f-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
	color: var(--graphite); margin: 0 0 18px;
}

/* ── Штемпель — signature-мотив. Все состояния несёт печать, различима без цвета ── */
.stamp {
	display: inline-flex; align-items: center; gap: 8px;
	font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
	padding: 6px 12px; border: 2.5px solid currentColor; border-radius: 3px;
	transform: rotate(-4deg); opacity: .82; user-select: none;
	-webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.72) 82%, #000 100%);
	mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0,0,0,.72) 82%, #000 100%);
}
.stamp::before {
	content: ""; width: 11px; height: 11px; flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0L7.3 4.7L12 6L7.3 7.3L6 12L4.7 7.3L0 6L4.7 4.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0L7.3 4.7L12 6L7.3 7.3L6 12L4.7 7.3L0 6L4.7 4.7Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.stamp.done   { color: var(--field); }
.stamp.fail   { color: var(--stamp); }
.stamp.refuse { color: var(--graphite); transform: rotate(3deg); }

/* ── Кнопки — «называются тем, что произойдёт» ── */
.btn {
	font-family: var(--f-mono); font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
	padding: 12px 20px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
	border-radius: var(--radius); cursor: pointer; transition: background .15s, color .15s;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn.primary { background: var(--ink); color: var(--paper); }
.btn.primary:hover { background: color-mix(in srgb, var(--ink) 82%, var(--stamp)); }
.btn.ghost { border-color: var(--edge); color: var(--graphite); }
.btn.ghost:hover { background: var(--tint); color: var(--ink); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Поля ввода ── */
.field label { display: block; font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--graphite); margin: 0 0 8px; }
.field input {
	width: 100%; font-family: var(--f-text); font-size: 17px; color: var(--ink);
	background: var(--vellum); border: 1px solid var(--edge); border-bottom-width: 2px;
	border-radius: var(--radius); padding: 12px 14px;
}
.field input::placeholder { color: color-mix(in srgb, var(--graphite) 70%, transparent); }
.field + .field { margin-top: 22px; }

/* ── Витрина: герой = живой пример квеста ── */
.hero-quest {
	border: 1px solid var(--edge); background: var(--vellum); border-radius: var(--radius);
	padding: 26px 28px; position: relative; margin: 8px 0 30px;
}
.hero-quest .tag { position: absolute; top: -11px; left: 20px; background: var(--paper); padding: 0 10px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
.hero-quest .qtext { font-family: var(--f-display); font-size: 23px; line-height: 1.32; font-weight: 500; }

/* три шага без иконок-кружочков. База: стопкой; ряд из трёх — на десктопе */
.steps { display: grid; grid-template-columns: 1fr; margin: 8px 0 6px; border-top: 1px solid var(--rule); }
.step { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.step:last-child { border-bottom: 0; }
.step .n { font-family: var(--f-mono); font-size: 12px; color: var(--stamp); letter-spacing: .1em; }
.step p { margin: 8px 0 0; font-size: 15.5px; }

/* лента ачивок всех пользователей */
.feed { border-top: 1px solid var(--rule); }
/* База (телефон): строки стопкой. Двухколоночная сетка — на десктопе */
.feed .row { display: grid; grid-template-columns: 1fr; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.feed .who { font-family: var(--f-mono); font-size: 12px; color: var(--graphite); letter-spacing: .04em; text-align: left; }
.feed .ach { font-family: var(--f-display); font-size: 18px; font-weight: 600; }
.feed .ach small { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-left: 10px; padding: 2px 7px; border: 1px solid var(--edge); border-radius: 3px; color: var(--graphite); vertical-align: middle; }
.feed .ach small.unique { color: var(--stamp); border-color: color-mix(in srgb, var(--stamp) 45%, transparent); }
.feed .desc { font-size: 15px; color: color-mix(in srgb, var(--ink) 78%, var(--paper)); }
.feed .cnt { font-family: var(--f-mono); font-size: 12px; color: var(--graphite); text-align: left; white-space: nowrap; }

/* ── Счётчики лимитов — на виду, без объяснений ── */
.limits { display: flex; gap: 26px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .04em; color: var(--graphite); padding: 12px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.limits b { color: var(--ink); font-weight: 700; }

/* ── Календарь — штемпельный формуляр. Состояния читаются не только цветом ── */
.cal-head { display: flex; align-items: center; justify-content: space-between; margin: 4px 0 16px; }
.cal-head .mo { font-family: var(--f-display); font-size: 22px; font-weight: 600; }
.cal-nav { display: flex; gap: 8px; }
.cal-nav button { font-family: var(--f-mono); font-size: 17px; min-width: 44px; min-height: 44px; border: 1px solid var(--edge); background: var(--vellum); color: var(--ink); border-radius: var(--radius); cursor: pointer; }ursor: pointer; }
.cal-nav button:disabled { opacity: .35; cursor: not-allowed; }
.cal-dow { display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); border-bottom: 1px solid var(--rule); padding-bottom: 6px; }
.cal-dow span { text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 1px; }
.day { background: var(--paper); aspect-ratio: 1 / .92; padding: 7px 8px; position: relative; cursor: pointer; }
.day .d { font-family: var(--f-mono); font-size: 13px; color: var(--ink); }
.day .mk { position: absolute; right: 7px; bottom: 6px; line-height: 1; }
.day .mk svg { width: 15px; height: 15px; display: block; }
.day.void { background: color-mix(in srgb, var(--paper) 92%, var(--ink)); cursor: default; }
.day.void .d { color: color-mix(in srgb, var(--graphite) 60%, transparent); }
.day.empty .d { color: color-mix(in srgb, var(--ink) 55%, var(--paper)); }         /* не заходил */
.day.started { background: var(--tint); }
.day.started .mk { color: var(--graphite); }                                        /* засечка / */
.day.closed { background: color-mix(in srgb, var(--field) 12%, var(--paper)); }
.day.closed .mk { color: var(--field); }                                            /* штамп ✓ */
.day.failed { background: color-mix(in srgb, var(--stamp) 9%, var(--paper)); }
.day.failed .mk { color: var(--stamp); }                                            /* штамп ✕ */
.day.today { box-shadow: inset 0 0 0 2px var(--ink); }
.day.today .d { font-weight: 700; }

/* ── Карточка квеста ── */
.quest-card { border: 1px solid var(--edge); background: var(--vellum); border-radius: var(--radius); padding: 22px 24px; position: relative; overflow: hidden; }
.quest-card + .quest-card { margin-top: 18px; }
.quest-card .qhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.qtype { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
/* значок типа — masked SVG на currentColor, не глиф шрифта */
.qtype::before { content: ""; width: 11px; height: 11px; flex: none; background: currentColor; -webkit-mask: var(--ico) center/contain no-repeat; mask: var(--ico) center/contain no-repeat; }
.qtype { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Crect x='1.5' y='5' width='9' height='2' rx='1'/%3E%3C/svg%3E"); }
.qtype.main { color: var(--ink); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0.5L11.5 6L6 11.5L0.5 6Z'/%3E%3C/svg%3E"); }
.qtype.secret { color: var(--graphite); --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0L7.3 4.7L12 6L7.3 7.3L6 12L4.7 7.3L0 6L4.7 4.7Z'/%3E%3C/svg%3E"); }
.quest-card .qbody { font-family: var(--f-display); font-size: 20px; font-weight: 500; line-height: 1.34; color: var(--ink); }
.quest-card.is-done, .quest-card.is-fail, .quest-card.is-refuse { background: var(--paper); }
.quest-card.is-done .qbody, .quest-card.is-fail .qbody, .quest-card.is-refuse .qbody { color: color-mix(in srgb, var(--ink) 60%, var(--paper)); font-size: 17px; }
.card-stamp { position: absolute; top: 16px; right: 18px; }
/* на узкой карточке штемпель не наезжает на метку типа — разводим отступом */
.quest-card:has(.card-stamp) .qhead { padding-right: 96px; min-height: 34px; }
.report { margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--rule); font-family: var(--f-text); }
.report .q { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--graphite); }
.report .a { font-size: 16px; font-style: italic; color: var(--ink); margin-top: 4px; }
.report-input { margin-top: 14px; }
.report-input .cnt { float: right; font-family: var(--f-mono); font-size: 11px; color: var(--graphite); }

/* строка микро-отчёта — одна строка, минимальное трение */
.oneline { width: 100%; font-family: var(--f-text); font-style: italic; font-size: 16px; color: var(--ink); background: transparent; border: 0; border-bottom: 1.5px solid var(--rule); padding: 6px 2px; }
.oneline:focus { border-bottom-color: var(--ink); outline: none; }

/* ── Генерация: сверка с архивом вместо спиннера (signature) ── */
.streaming .archive-check { font-family: var(--f-mono); font-size: 12px; line-height: 1.7; color: var(--graphite); margin-bottom: 14px; min-height: 60px; }
.streaming .archive-check .line { opacity: 0; animation: fadein .4s forwards; }
.streaming .qbody .cursor { display: inline-block; width: 9px; height: 1.05em; background: var(--ink); vertical-align: -2px; margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes fadein { to { opacity: 1; } }

/* ── Выдача ачивки — редко, без конфетти ── */
.grant { border: 2px solid var(--field); background: color-mix(in srgb, var(--field) 8%, var(--vellum)); border-radius: var(--radius); padding: 20px 24px; position: relative; }
.grant .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--field); }
.grant h3 { margin: 8px 0 4px; }
.grant .meta { font-family: var(--f-mono); font-size: 12px; color: var(--graphite); }

/* ── Настройки ── */
.set-block { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.set-block > h3 { display: flex; align-items: baseline; gap: 12px; }
.set-note { font-family: var(--f-mono); font-size: 12px; color: var(--graphite); margin: 2px 0 16px; }

/* ── Резервный адрес: три состояния статуса ── */
.mail-state { border: 1px solid var(--edge); background: var(--vellum); border-radius: var(--radius); padding: 14px 16px; margin-bottom: 12px; }
.mail-state .top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mail-addr { font-family: var(--f-mono); font-size: 14px; color: var(--ink); }
.mail-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mail-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mail-status.ok       { color: var(--field); }
.mail-status.ok::before { background: var(--field); }
.mail-status.pending  { color: var(--stamp); }
.mail-status.pending::before { background: none; border: 2px solid var(--stamp); box-sizing: border-box; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 8px; }
.mail-actions a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--f-mono); font-size: 13px; }
.mail-field { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.mail-field input { flex: 1 1 180px; }
.mail-field .btn { min-height: 44px; }
.opts { display: grid; grid-template-columns: 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.opt { display: flex; align-items: center; gap: 10px; background: var(--vellum); padding: 12px 14px; font-family: var(--f-mono); font-size: 13px; color: var(--ink); cursor: pointer; }
.opt input { accent-color: var(--stamp); }
.opt.sel { background: var(--paper); box-shadow: inset 3px 0 0 var(--ink); }
.opt.lock { color: color-mix(in srgb, var(--graphite) 80%, transparent); cursor: not-allowed; background: repeating-linear-gradient(-45deg, var(--vellum), var(--vellum) 7px, color-mix(in srgb, var(--graphite) 6%, var(--vellum)) 7px, color-mix(in srgb, var(--graphite) 6%, var(--vellum)) 14px); }
.opt.lock .mono { margin-left: auto; font-size: 10px; letter-spacing: .1em; }

/* ключ доступа. База (телефон): ключ переносится, кнопка снизу на всю ширину */
.keybox { display: flex; flex-direction: column; align-items: stretch; border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; background: var(--vellum); }
.keybox code { font-family: var(--f-mono); font-size: 15px; line-height: 1.5; letter-spacing: .04em; color: var(--ink); padding: 13px 15px; white-space: normal; word-break: break-all; }
.keybox button { border: 0; border-top: 1px solid var(--edge); background: var(--paper); color: var(--ink); font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; min-height: 44px; padding: 0 18px; cursor: pointer; }
.keybox button:hover { background: var(--ink); color: var(--paper); }
.warn { font-family: var(--f-text); font-size: 16px; color: var(--stamp); border-left: 2px solid var(--stamp); padding-left: 14px; margin: 18px 0; }
.confirm { display: flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-size: 13px; color: var(--ink); margin: 16px 0; cursor: pointer; }
.confirm input { width: 17px; height: 17px; accent-color: var(--ink); }

/* ── Ачивки пользователя ── */
.ach-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.ach-item { border: 1px solid var(--edge); background: var(--vellum); border-radius: var(--radius); padding: 16px 18px; }
.ach-item h3 { margin-bottom: 2px; }
.ach-item .meta { font-family: var(--f-mono); font-size: 11.5px; color: var(--graphite); }
.ach-item.locked { background: repeating-linear-gradient(-45deg, var(--paper), var(--paper) 8px, color-mix(in srgb, var(--graphite) 5%, var(--paper)) 8px, color-mix(in srgb, var(--graphite) 5%, var(--paper)) 16px); }
.ach-item.locked h3 { color: color-mix(in srgb, var(--graphite) 70%, transparent); font-family: var(--f-mono); font-size: 22px; letter-spacing: .1em; }
.rare-tag { font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--graphite); }
.rare-tag.uniq { color: var(--stamp); }

/* ── Служебные состояния ── */
.svc { border: 1px dashed var(--edge); background: var(--vellum); border-radius: var(--radius); padding: 26px 28px; text-align: left; }
.svc .s-title { font-family: var(--f-display); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.svc p { margin: 0; color: color-mix(in srgb, var(--ink) 80%, var(--paper)); }
.svc.empty-first { text-align: center; padding: 48px 28px; border-style: solid; }
.svc.empty-first .btn { margin-top: 20px; }
.svc-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }

/* ── Карточка-ярлык: формуляр в карман. Инструкция под платформу, без кнопок установки ── */
.install { border: 1px solid var(--edge); background: var(--vellum); border-radius: var(--radius); padding: 22px 24px; position: relative; }
.install .lbl { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--graphite); }
.install h3 { margin: 8px 0 6px; }
.install .why { color: color-mix(in srgb, var(--ink) 80%, var(--paper)); margin: 0 0 18px; }
.install-steps { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.install-steps li { display: flex; align-items: center; gap: 14px; }
.install-steps .ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--edge); border-radius: var(--radius); background: var(--paper); color: var(--ink); }
.install-steps .ico svg { width: 22px; height: 22px; }
.install-steps .txt { font-family: var(--f-text); font-size: 16px; line-height: 1.4; }
.install-steps .txt b { font-family: var(--f-mono); font-size: 13px; font-weight: 700; }
.install-dismiss { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--graphite); background: none; border: 0; cursor: pointer; }
.install-dismiss:hover { color: var(--ink); }

/* ── Явный путь назад (в standalone нет кнопки «назад») ── */
.backnav { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); text-decoration: none; }
.backnav:hover { color: var(--ink); }
.backnav svg { width: 16px; height: 16px; }

/* ── Десктоп — достраиваем поверх мобильной базы (mobile-first) ── */
@media (min-width: 720px) {
	.leaf { display: grid; grid-template-columns: 128px minmax(0, var(--col)); }
	.leaf > .margin { display: block; border-right: 1px solid var(--rule); padding-right: 18px; margin-bottom: 0; }
	.leaf > .margin .note { margin: 0 0 14px; text-align: right; text-transform: none; letter-spacing: .01em; }
	.leaf > .margin .note br { display: inline; }
	.leaf > .body { padding-left: 26px; }
	.steps { grid-template-columns: repeat(3, 1fr); }
	.step { padding: 20px 22px; border-right: 1px solid var(--rule); border-bottom: 0; }
	.step:first-child { padding-left: 0; }
	.step:last-child { border-right: 0; padding-right: 0; }
	.opts, .ach-grid { grid-template-columns: repeat(2, 1fr); }
	.svc-2 { grid-template-columns: 1fr 1fr; }
	.feed .row { grid-template-columns: 1fr auto; column-gap: 18px; row-gap: 6px; }
	.feed .ach { grid-area: 1 / 1; }
	.feed .desc { grid-area: 2 / 1; }
	.feed .who { grid-area: 1 / 2; text-align: right; align-self: center; }
	.feed .cnt { grid-area: 2 / 2; text-align: right; align-self: center; }
	.keybox { flex-direction: row; }
	.keybox code { flex: 1; white-space: nowrap; word-break: normal; overflow-x: auto; font-size: 14px; }
	.keybox button { border-top: 0; border-left: 1px solid var(--edge); }
}

/* ── Видимый фокус с клавиатуры ── */
[data-theme="notebook"] :focus-visible { outline: 2px solid var(--stamp); outline-offset: 2px; }

/* ── Уважаем prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.streaming .qbody .cursor { animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   Добавлено на шаге 4 (сверх доски): живой фронт — переключение экранов,
   textarea отчёта, флеш-плашки, поле своей роли
   ══════════════════════════════════════════════════════════════════════ */

/* Экраны-состояния внутри index: показываем ровно один */
[data-screen] { display: none; }
[data-screen].on { display: block; }

/* Шапка раздела для вошедшего: путь в настройки и реестр */
.topnav { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; margin-bottom: 20px; }
.topnav a { font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--graphite); text-decoration: none; }
.topnav a:hover { color: var(--ink); }
.topnav .grow { flex: 1; }

/* Отчёт: textarea вместо однострочного input, растёт по содержимому.
   300 символов в одну строку уползали бы вбок мимо глаз */
textarea.oneline { resize: none; overflow: hidden; min-height: 2.4em; line-height: 1.5; display: block; }

/* Флеш-плашка (настройки: mail=ok|busy|bad, и служебные сообщения) */
.flash { border-left: 2px solid var(--field); background: color-mix(in srgb, var(--field) 8%, var(--vellum)); padding: 12px 16px; margin: 0 0 20px; font-family: var(--f-text); font-size: 16px; color: var(--ink); border-radius: var(--radius); }
.flash.bad { border-color: var(--stamp); background: color-mix(in srgb, var(--stamp) 8%, var(--vellum)); color: var(--stamp); }

/* Поле «свой вариант» роли — раскрывается при выборе */
.role-own { margin-top: 12px; }
.role-own[hidden] { display: none; }
.role-own textarea { width: 100%; font-family: var(--f-text); font-size: 16px; color: var(--ink); background: var(--vellum); border: 1px solid var(--edge); border-bottom-width: 2px; border-radius: var(--radius); padding: 11px 14px; resize: vertical; min-height: 64px; }

/* Реакция системы после закрытия — отдельная запись, не карточка квеста */
.reaction { border-left: 2px solid var(--graphite); padding: 4px 0 4px 16px; margin: 18px 0; font-family: var(--f-text); font-size: 17px; font-style: italic; color: var(--ink); }

/* Пустое/загрузочное состояние блока */
.muted { font-family: var(--f-mono); font-size: 12px; color: var(--graphite); }

/* Метка отложенного стиля в настройках */
.pending-note { color: var(--stamp); }