/* Netwar. Оформление v4 (примерка): второй слой поверх netwar.css.
   Плоско: глубина - ступенями тона и волосяной линией, без градиентов и фасок. */

:root, html.dark {
	--bg:          #1B1B1B;
	--panel:       #262626;
	--well:        #1E1E1E;
	--head:        #313131;
	--line:        #333333;
	--edge:        #404040;
	--frame:       #383838;
	--text:        #D4D4D4;
	--muted:       #AFAFAF;   /* подписи: 7:1 к плите */
	--quiet:       #8E8E8E;   /* нули и пустое: 4,6:1 к плите */
	--strong:      #FFFFFF;
	--head-ink:    #FFFFFF;
	--gold:        #FFC42E;
	--gold-ink:    #FFC42E;
	--num:         #FFFFFF;
	--gold-hover:  #FFD970;
	--gold-active: #E6A812;
	--on-gold:     #1A1A1A;
	--prose:       Tahoma, Verdana, "DejaVu Sans", sans-serif;
	--machine:     Tahoma, Verdana, "DejaVu Sans", sans-serif;
	--pad: 14px;
	--status-done:     #2E7D32;
	--status-taken:    #9A6D00;
	--status-declined: #A33A3A;
	--status-stale:    #4A4A4A;
	--fight:           #9E2F2F;
	--fight-ink:       #FF9A8E;
	color-scheme: dark;
}

/* ============ ОСНОВА ============ */
body { font: 12px/17px var(--machine); background: var(--bg); color: var(--text); -webkit-font-smoothing: auto }
p { margin: 0 0 9px 0 }
a { color: var(--gold-ink) }
a:hover { color: var(--gold-hover); text-decoration: underline }
a:focus-visible, .button:focus-visible, summary:focus-visible, .field:focus-visible { outline: 1px dotted var(--gold); outline-offset: 2px }
p a, .list a, .lead a, .excerpt a, .fine a, .foot a, .article a, .msg-text a { text-decoration: none }
p a:hover, .list a:hover, .fine a:hover, .foot a:hover, .article a:hover, .msg-text a:hover { color: var(--gold-hover); text-decoration: underline }
::selection { background: var(--gold); color: var(--on-gold) }
.muted { color: var(--muted) }
.wrap { width: 1000px; max-width: 100% }
body.game .wrap { width: 1000px }
/* уровень не отрывается от имени: знак-сцепка перед скобкой */
.lvl { color: inherit; font-weight: normal; opacity: .72 }
.lvl::before { content: "\2060" }
.hint { cursor: help; border-bottom: 1px dotted #5A5A5A }
.bonus { color: var(--muted) }

/* ============ ШАПКА ============ */
.header { background: #121212; border-bottom: 0 }
.header .wrap, .header.game-top .wrap { align-items: center; padding-top: 0; padding-bottom: 0; gap: 0 16px }
.logo, .header.game-top .logo, a.logo, .header a.logo {
	padding: 14px 0 12px;
	font: bold 22px/1 Verdana, Tahoma, sans-serif;
	letter-spacing: .03em;
	color: #FFFFFF;
}
.logo b { color: var(--gold); font-weight: bold }
a.logo:hover { color: #FFFFFF; text-decoration: none }
.motto { margin-right: auto; margin-top: 7px; font: 11px var(--machine); color: var(--muted); white-space: nowrap }
.header .right { margin-top: 7px; font: 11px var(--machine); color: var(--muted) }
.header.game-top .tools { margin-left: auto; gap: 0 16px; font: 12px var(--machine); align-self: center }
.header.game-top .tools > a { color: var(--muted) }
.header.game-top .tools > a:hover { color: var(--strong) }
.awake-top { font: 11px var(--machine); color: var(--muted) }
.awake-top b a { color: var(--gold) }
.search > summary, .bell > summary {
	padding: 4px 0; border-bottom: 0;
	font: 12px var(--machine); letter-spacing: 0; text-transform: none; color: var(--muted);
}
.search > summary, .bell > summary { white-space: nowrap }
.search > summary::after, .bell > summary::after { color: var(--gold) }
.search[open] > summary, .bell[open] > summary { border-bottom: 0; color: var(--gold) }
.search .search-band, .bell .bell-band, .meters .shelf, .subnav .shelf {
	background: #202020;
	border-top: 1px solid var(--edge);
	border-bottom: 1px solid #0E0E0E;
	box-shadow: 0 8px 16px rgba(0,0,0,.5);
}

/* ============ ГЛАВНОЕ МЕНЮ: ВКЛАДКИ ============ */
.menubar, .nav { background: #121212; border: 0; padding-top: 2px }
.nav { border-bottom: 1px solid #4A4A4A }
.menubar .wrap, .nav .wrap { display: flex; flex-wrap: nowrap; align-items: flex-end; gap: 3px; padding-top: 0; padding-bottom: 0 }
.menubar .wrap > a, .nav .wrap > a {
	display: block;
	flex: none;
	padding: 6px 14px;
	background: #2B2B2B;
	border: 1px solid #383838;
	border-bottom: 0;
	font: bold 12px/16px var(--machine);
	letter-spacing: 0; text-transform: none;
	color: #D8D8D8;
	white-space: nowrap;
}
.menubar .wrap > a:first-child, .nav .wrap > a:first-child { padding-left: 14px }
.menubar .wrap > a:hover, .nav .wrap > a:hover { color: #FFFFFF; background: #333333; text-decoration: none }
.menubar .wrap > a.here, .nav .wrap > a.here {
	position: relative; z-index: 1;
	background: #262626;
	border-color: #4A4A4A;
	border-top: 2px solid var(--gold);
	color: var(--gold);
	padding-top: 5px;
	padding-bottom: 7px;
	margin-bottom: -1px;
}
.menubar + .meters { border-top: 1px solid #4A4A4A }

/* ============ ПОЛОСА ПОСЕЛЕНЦА ============ */
.meters { background: #262626; border-bottom: 1px solid #141414 }
.meters .meter-list { align-items: stretch }
.meters .meter-list > div, .meters .more {
	display: flex; flex-direction: row; align-items: center; gap: 5px;
	padding: 6px 12px 6px 0; margin-right: 12px;
	border-right: 1px solid var(--edge);
}
.meters .meter-list > div:last-child, .meters .meter-list > div:has(+ .state), .meters .meter-list > div.state { border-right: 0 }
.meters .caption, .tape .caption { font: 12px var(--machine); letter-spacing: 0; text-transform: none; color: var(--muted) }
.meters .num, .meters .money .num { font: bold 12px/16px var(--machine); color: var(--strong); white-space: nowrap }
.meters .money .num a { color: var(--gold) }
.meters .unit { font-size: 11px; font-weight: normal; color: var(--muted) }
.meters .num.word { font-size: 12px; line-height: 16px; max-width: none; overflow: visible }
.meters .zero .num, .meters .zero .num a { color: var(--muted); font-weight: normal }
.meters .me { font: bold 12px/16px var(--machine) }
.meters .me a { color: var(--strong) }
.meters .me a:hover { color: var(--gold) }
.meters .more { align-self: stretch }
.meters .more > summary { font: 12px var(--machine); letter-spacing: 0; text-transform: none; color: var(--gold) }
.meters .state .num { font-size: 12px; line-height: 16px }
.meters .meter-list > div.state { margin-left: auto; margin-right: 0; padding-right: 0 }
.meters .meter-list > div.state.fight {
	position: relative;
	margin: 3px 0 3px auto; padding: 2px 10px;
	background: var(--fight); border: 1px solid #C04444;
}
.meters .state.fight .caption { color: #F6CFCA }
.meters .state.fight .num a { color: #FFFFFF }
.meters .state.fight .num a::after { content: ""; position: absolute; inset: 0 }
.meters .state.wait .num a, .meters .state.work-now .num a, .meters .state.done .num a { color: var(--gold) }

/* ============ ВТОРОЕ МЕНЮ ============ */
.subnav { background: #1F1F1F; border-bottom: 1px solid #111 }
.subnav .wrap { flex-wrap: nowrap }
.subnav .wrap > a, .subnav .wrap > .menu-item, .subnav .wrap > span.here, .subnav .more {
	flex: none;
	padding: 6px 10px; border-bottom: 0; border-right: 1px solid #333;
	font: 12px/16px var(--machine); color: #C8C8C8; white-space: nowrap;
}
.subnav .wrap > a:hover, .subnav .menu-item a:hover { color: var(--gold); text-decoration: none }
.subnav .wrap > span.here { color: var(--gold); font-weight: bold; border-bottom: 0 }
.subnav b { color: var(--gold) }

/* ============ РАБОЧЕЕ ПОЛЕ ============ */
.work .wrap { gap: 10px; padding-top: 12px; padding-bottom: 22px }
@media (min-width: 961px) {
	.work .wrap { grid-template-columns: 236px minmax(0, 1fr) }
	.work .wrap.solo { grid-template-columns: minmax(0, 1fr) }
}
.side, .main { gap: 10px }
.band .wrap { gap: 12px }
.crumbs { font: 12px var(--machine); margin-bottom: 10px }
.crumbs .acts { border-left: 0 }

/* ============ ПЛИТА ============ */
.panel { background: var(--panel); border: 1px solid var(--frame) }
.panel > .head {
	position: relative;
	padding: 5px 10px 5px 22px;
	background: var(--head);
	border-bottom: 1px solid #1A1A1A;
	font: bold 12px/16px var(--machine);
	letter-spacing: 0; text-transform: none;
	color: var(--head-ink);
	align-items: baseline;
}
/* Золотой квадрат шапки - по центру ПЕРВОЙ строки заголовка, и положение
   его выведено из тех же величин, что задают строку, а не подобрано на глаз:
   отступ шапки + (высота строки - сторона квадрата) / 2. Сторона чётная -
   центр ложится ровно на пиксель; при переносе заголовка квадрат остаётся
   у первой строки. */
.panel > .head { --head-pad: 5px; --head-lh: 16px; --mark: 6px; padding-left: calc(10px + var(--mark) + 7px) }
.panel > .head::before {
	content: ""; position: absolute; left: 10px;
	top: calc(var(--head-pad) + (var(--head-lh) - var(--mark)) / 2);
	width: var(--mark); height: var(--mark); background: var(--gold);
}
.panel > .head .tally { color: #C4C4C4; font-weight: normal; letter-spacing: 0 }
.panel > .head .tally a, .panel > .head a.tally { color: var(--gold) }
.panel > .body { padding: 10px }
.panel > .body > :first-child, .panel > .body > .section:first-child { margin-top: 0 }
.panel > .body > .section:first-child { padding-top: 0; border-top: 0 }
.panel > .body > :last-child { margin-bottom: 0 }
.panel.power { border-left: 1px solid var(--frame) }
.panel.power .body a { color: var(--gold); font-weight: bold; font-size: 12px }
/* строка текста не длиннее ~80 знаков */
.panel > .body > p, .panel > .body > .fine, .section > p, .section > .fine, .station > .facts > p { max-width: 78ch }
.lead, .story { max-width: 40em }

.section { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--edge) }
.section-head { margin-bottom: 6px; font: bold 12px var(--machine); letter-spacing: 0; text-transform: none; color: var(--strong) }
.section-head .tally, .section-head .tally.text { color: var(--muted); font-weight: normal; letter-spacing: 0 }
.section-head.spaced { margin-top: 14px }

/* свод «подпись - значение» */
.stats > div { padding: 3px 0; border-bottom: 1px solid var(--line); font: 12px/16px var(--machine) }
.stats .label, .stats .caption { color: var(--muted) }
.stats .value, .stats .num { color: var(--strong); font-size: 12px; font-weight: bold }
.stats .value a { color: var(--gold) }
.stats .value .muted { color: var(--muted); font-weight: normal }
.stats + p, .stats + .fine, .stats + .notice { margin-top: 10px }
.panel.wide > .body > .stats { max-width: 460px }

/* клетки чисел */
.figures { gap: 4px }
.figures > div { background: var(--well); border: 1px solid #303030; padding: 5px 8px 6px }
.figures .caption { font: 11px/14px var(--machine); letter-spacing: 0; text-transform: none; color: var(--muted) }
.figures .num { margin-top: 2px; font: bold 14px/18px var(--machine); color: var(--strong) }
.figures .num .unit { font-size: 11px; font-weight: normal; color: var(--muted) }
.figures .num.word { font-size: 12px; line-height: 18px }
.figures .zero .num, .figures .zero .num .muted, .figures .zero .num .unit { color: var(--quiet); font-weight: normal }
.figures:has(> div:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) }
@media (min-width: 561px) {
	.figures:has(> div:nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)) }
	.figures:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)) }
}

/* таблицы: край текста - вровень с текстом плиты */
table.numbers { font: 12px/16px var(--machine) }
.panel > .body > table.numbers, .panel > .body > .section > table.numbers { width: calc(100% + 20px); margin-left: -10px; margin-right: -10px }
table.numbers th {
	padding: 4px 8px; background: #303030; border-bottom: 1px solid #1A1A1A;
	font: bold 11px/15px var(--machine); letter-spacing: 0; text-transform: none; color: #D0D0D0;
}
table.numbers td { padding: 5px 8px; border-bottom: 1px solid var(--line) }
table.numbers th:first-child, table.numbers td:first-child { padding-left: 10px }
table.numbers th:last-child, table.numbers td:last-child { padding-right: 10px }
table.numbers tr:last-child td { padding-bottom: 5px }
table.numbers tr:hover > td { background: #2C2C2C }
td.figure { font-size: 12px; color: var(--strong) }
td.figure.zero { color: var(--quiet); font-weight: normal }
table.numbers th.figure { white-space: nowrap }
table.numbers tr.rod > td { background: #2A2A2A }
table.numbers tr.rod .section-head { margin: 0 }
table.numbers .under { font: 11px/15px var(--machine); color: var(--muted) }
table.rank th.figure, table.rank td.figure { border-left: 1px solid var(--line); padding-left: 8px }
table.rank th.place, table.rank td.place { border-left: 0 }

/* поля и кнопки: одна высота - 27 */
.field, select.field, textarea.field {
	padding: 5px 6px; background-color: #141414; border: 1px solid #444444;
	font: 12px/15px var(--machine); color: #EEEEEE;
}
select.field {
	padding-right: 24px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%);
	background-position: right 13px top 50%, right 8px top 50%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.field:hover { border-color: #5A5A5A }
.field:focus, select.field:focus { border: 1px solid var(--gold); outline: 0 }
.field::placeholder { color: var(--quiet); opacity: 1 }
.row { grid-template-columns: 110px minmax(0, 1fr); column-gap: 14px; row-gap: 2px; margin-bottom: 9px; align-items: start }
.row > label { color: var(--muted); padding-top: 5px }
.row > .fine { grid-column: 2; margin-top: 2px }
.under-field { padding-left: 124px }
.button {
	padding: 4px 14px 5px; background: var(--gold); border: 1px solid var(--gold); color: #1A1A1A;
	font: bold 12px/16px var(--machine); letter-spacing: 0; text-transform: none;
}
.button:hover { background: var(--gold-hover); border-color: var(--gold-hover) }
.button:active { background: var(--gold-active); border-color: var(--gold-active) }
.button.quiet { background: none; border: 0; box-shadow: none; color: var(--gold); font-weight: normal; padding-left: 0; padding-right: 0 }
.button.quiet:hover { background: none; color: var(--gold-hover); text-decoration: underline }
a.plus { background: var(--gold); height: 16px; line-height: 16px }
label.check { color: var(--text); padding-left: 19px; text-indent: -19px }
.check input { margin: 0 6px 0 0; vertical-align: -2px }
.check .under { margin-top: 1px; font: 11px/15px var(--machine); color: var(--muted) }

/* мелкий текст и врезки */
.fine { margin-top: 9px; font: 11px/16px var(--machine); color: var(--muted) }
.fine b { color: var(--text) }
.notice, .note {
	margin-top: 10px; padding: 6px 9px;
	background: #202020; border: 1px solid var(--line); border-left: 3px solid var(--gold);
	font: 12px/17px var(--machine); color: var(--text); max-width: none;
}
.panel > .body > .notice:first-child, .panel > .body > .note:first-child { margin-top: 0 }
.story { border-left: 3px solid var(--gold); padding-left: 10px; font: 13px/19px var(--prose) }
.eyebrow { font: bold 12px var(--machine); letter-spacing: 0; text-transform: none; color: var(--muted); margin-bottom: 10px }

/* шкалы */
.service { font: 12px var(--machine); grid-template-columns: 76px minmax(0, 1fr) 110px; column-gap: 10px }
.service .bar { height: 10px; background: #111; border: 1px solid #484848 }
.service .bar i { height: 8px; background: var(--gold) }
.services { gap: 4px }

/* гнёзда стола */
.slots { gap: 6px }
.slot { background: #202020; border: 1px solid var(--line); padding: 6px; gap: 4px; align-content: start }
.slot .where { font: 11px var(--machine); letter-spacing: 0; text-transform: none; color: var(--muted) }
.slot > a { display: block; line-height: 0 }
.slot .empty, .slots .slot img { box-sizing: border-box; width: 80px; height: 80px; background: var(--well); border: 1px solid #444 }
.slot .empty { color: var(--quiet); font-size: 11px }
.slot img { object-fit: contain }
.slot .thing.muted, .slot .empty ~ .thing { color: var(--muted); font-size: 11px }

/* имя поселенца */
.who { border-bottom: 1px solid var(--edge); padding-bottom: 10px; margin-bottom: 10px; gap: 10px 12px; align-items: center }
.who .id h1 { font: bold 15px/19px var(--machine) }
.you .who { align-items: center }
.you .who .id h1 { font: bold 13px/17px var(--machine) }
.who .face, .you .who .face { width: 64px; height: 64px; border: 1px solid #484848 }
.who .under { font: 11px/15px var(--machine) }
.who .state { padding: 5px 9px; background: var(--well); border: 1px solid var(--line) }
.who .state .caption { font: 11px var(--machine); letter-spacing: 0; text-transform: none }
.who .state.fight { background: var(--fight); border-color: #C04444 }
.who .look figcaption { font: 11px var(--machine); letter-spacing: 0; text-transform: none }
.who .look figcaption span { display: inline; margin-left: 3px }

.tape { background: var(--well); border: 1px solid var(--line); padding: 0 10px; margin-bottom: 10px }
.tape > div { flex-direction: row; align-items: baseline; gap: 5px; padding: 5px 12px 5px 0; margin-right: 12px }
.tape .num { font: bold 12px var(--machine) }
.tape .money .num { font-size: 12px; color: var(--strong) }

.gear { background: var(--well); border: 1px solid var(--line); padding: 5px 8px }
.gear .caption { font: 11px var(--machine); letter-spacing: 0; text-transform: none }
.gear .model, .rig .model, .foe-name { font: bold 13px/18px var(--machine) }
.tags > li { background: var(--well); border: 1px solid var(--line); padding: 2px 7px; font-size: 12px }

/* журналы */
.log-row { padding: 4px 0; border-bottom: 1px solid var(--line) }
.log-row .what { font-size: 12px }
.log-row .when { font-size: 11px; color: var(--muted) }
.log-row .sum { font-size: 12px }
@media (min-width: 961px) { .log-row { grid-template-columns: 144px minmax(0, 1fr) auto } .log-row .when { white-space: nowrap } }
.log-turn { margin: 8px 0 3px; padding: 3px 8px; border-top: 0; background: #303030; font: bold 11px var(--machine); letter-spacing: 0; text-transform: none; color: #E0E0E0 }
.log-turn::first-letter { text-transform: uppercase }
.log-turn:first-child { padding-top: 3px }
.log.battle { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--edge) }
.log.battle .what { font: 12px/17px var(--machine) }

/* форум */
.board { padding: 7px 0; border-bottom: 1px solid var(--line) }
.board .name { font: bold 13px var(--machine) }
.board .name a { color: var(--gold) }
.board .about, .board .last, .board .count { font: 11px/15px var(--machine) }
.board .mark.loud { color: var(--strong); font-weight: bold }
.topic .name { font-size: 12px; font-weight: bold; color: var(--strong) }
.topic.fresh .name { color: var(--gold) }
.topic.head-row, .bugs > .bug.head-row {
	margin: 0 -10px; padding: 4px 10px;
	font: bold 11px var(--machine); letter-spacing: 0; text-transform: none; color: #D0D0D0;
	background: #303030; border-bottom: 1px solid #1A1A1A;
}
.topic .what .mark { margin-left: 8px; padding: 0 5px; border: 1px solid #555; color: #D0D0D0 }
.msg { border-bottom: 1px solid var(--edge) }
.msg-head { font-size: 11px }
.msg-head .author { font-size: 12px }
.msg-text { font: 13px/19px var(--prose); max-width: 72ch }
.panel > .body .msg-face img { height: 100px }
.msg-face .fight-mark { display: block; margin: 6px 0 0 0 }

/* справка */
.article p, .article li { font: 13px/19px var(--prose) }
.article > h1, .article > h2 { font: bold 15px/20px var(--prose); color: var(--strong); margin: 22px 0 6px }
.article > h1:first-child, .article > h2:first-child, .article > h1 + h2 { margin-top: 0 }
.article h2.plain, .article h3.plain { font: bold 13px/19px var(--prose); margin: 18px 0 6px }
.article p.fine { font: 11px/16px var(--machine); margin-top: 16px }
.article th, .article td.tdoriginal, .article td.tdorig { font: bold 11px var(--machine); letter-spacing: 0; text-transform: none; color: #D0D0D0; background: #303030 }
.article li::before { top: auto }
.article .spravka-perechen > li { padding: 3px 0 3px 17px; margin: 0; font: 12px/17px var(--machine) }
.poyasneniya p { font: 12px/19px var(--machine) }
.help-list > a, .help-list > details > a { font: 12px/16px var(--machine); padding: 4px 0 }
.help-list > details > a { padding-left: 13px }
.help-list > details > summary { font: bold 12px/16px var(--machine); letter-spacing: 0; text-transform: none; color: var(--text) }
.help-list > details > summary > i { font-weight: normal; color: var(--muted) }

.panel .more > summary { font: 12px var(--machine); letter-spacing: 0; text-transform: none; color: var(--gold) }
.depts > a, .depts > .here { font: 12px var(--machine); padding: 4px 10px }
.depts > .here { color: var(--gold); font-weight: bold; border-bottom-color: var(--gold) }
.citizen-mark {
	font: 11px/14px var(--machine); letter-spacing: 0; text-transform: none;
	padding: 0 5px; background: none; color: var(--gold); border: 1px solid #6B5412;
}
.rank .citizen-mark, .citizen-mark.znak { padding: 0 3px; vertical-align: -1px; line-height: 0 }
.fight-mark, .power-mark { font: 11px var(--machine); letter-spacing: 0; text-transform: lowercase }
.under .repute-mark, .fine .repute-mark { font-size: inherit; line-height: inherit; vertical-align: baseline; margin-left: 4px }
.status { font: 11px var(--machine); letter-spacing: 0; text-transform: none; border: 1px solid rgba(255,255,255,.16) }
.say label { font: 11px var(--machine); letter-spacing: 0; text-transform: none }
.switch button { font: 12px var(--machine); letter-spacing: 0; text-transform: none; padding: 5px 12px }

.panel > .body img.site-photo { float: left; width: 120px; height: 90px; object-fit: cover; margin: 2px 12px 6px 0; border: 1px solid #484848 }
.panel > .body img.site-photo ~ .stats, .panel > .body img.site-photo ~ .section { clear: both }
.rig img { background: var(--well); border: 1px solid #444 }
.station img { border: 1px solid #484848 }
.station > .facts { align-self: stretch }
.mail .letter { margin: 0; padding: 5px 0; border-bottom: 1px solid var(--line); font: 12px/16px var(--machine) }
.mail .letter:first-child { padding-top: 0 }
.you .say { flex-wrap: nowrap }
.you .say .field { flex: 1 1 0; width: 0; min-width: 0 }
.you .say .button { padding: 4px 12px 5px }
.news .replies { white-space: nowrap }
.post .name { font: bold 13px/17px var(--machine) }
.who-list { max-width: 560px }
.log.chat .what img { height: 15px; width: auto; vertical-align: -3px }

/* ============ ПОДВАЛ ============ */
.foot { background: #121212; border-top: 1px solid #333 }
.foot .wrap { display: block; padding-top: 12px; padding-bottom: 16px; font: 11px/17px var(--machine); color: var(--muted) }
.foot .test, .foot .test b { font: inherit; color: inherit }
.foot-links, .foot-meta { overflow: hidden }
.foot-links > div, .foot-meta > div { display: flex; flex-wrap: wrap; margin-left: -13px }
.foot-links a, .foot-meta > div > span { padding: 0 6px; border-left: 1px solid #3A3A3A; margin-left: 6px; white-space: nowrap }
.foot-links a { font-size: 12px }
.foot-meta { margin-top: 5px }
.foot-meta .time, .foot-meta .copy { white-space: normal }
.foot-meta b { font-weight: normal; color: var(--text) }

/* ============ ВНЕШНИЕ СТРАНИЦЫ ============ */
h1 { font: bold 22px/1.25 Verdana, Tahoma, sans-serif; letter-spacing: 0; color: var(--strong) }
.lead { font: 13px/20px var(--prose) }
.lead-line { font: 13px/20px var(--prose); color: var(--strong) }
.rules > li { font: 13px/19px var(--prose); max-width: 640px }
.rules > li::before { font: bold 13px/19px var(--machine) }
.list > li { text-wrap: pretty }

/* ============ ПЛАНШЕТ И ТЕЛЕФОН ============ */
@media (max-width: 960px) {
	:root { --pad: 12px }
	.wrap, body.game .wrap { width: auto; max-width: none }
	/* меню не переносится рваными рядами: лента прокручивается */
	.menubar .wrap, .nav .wrap, .subnav .wrap { overflow-x: auto; overflow-y: hidden; scrollbar-width: none }
	.menubar .wrap::-webkit-scrollbar, .nav .wrap::-webkit-scrollbar, .subnav .wrap::-webkit-scrollbar { display: none }
	.menubar .wrap > a.here, .nav .wrap > a.here { margin-bottom: 0 }
	.help-layout { display: flex; flex-direction: column }
	.help-layout > .article { order: -1; margin-top: 0; padding-top: 0; border-top: 0 }
	.help-layout > .help-list { order: 1; margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--edge) }
	.log.chat .log-row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 0 8px }
	.log.chat .log-row .when { grid-column: auto; margin-bottom: 0 }
	.topic .tally-line { display: block; margin: 2px 0 0 }
	.crumbs .acts { padding-left: 16px }
}
@media (max-width: 560px) {
	:root { --pad: 10px }
	.motto, .awake-top .long { display: none }
	.header.game-top .tools > a, .search > summary, .bell > summary { display: inline-block; padding: 9px 2px }
	.menubar .wrap > a, .nav .wrap > a { padding: 9px 12px }
	.subnav .wrap > a, .subnav .wrap > .menu-item, .subnav .wrap > span.here, .subnav .more { padding: 9px 12px }
	/* полоса: без черт, просто промежутки */
	.meters .meter-list { column-gap: 14px }
	.meters .meter-list > div, .meters .more { border-right: 0; margin-right: 0; padding: 7px 0 }
	.meters .meter-list > div.state, .meters .meter-list > div.state.fight { margin-left: 0 }
	.meters .meter-list > div.state.fight { padding: 6px 12px }
	/* формы складываются в столбец, цели нажатия не меньше 32 */
	.row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; margin-bottom: 12px }
	.row > label { padding-top: 0 }
	.row > .fine { grid-column: 1 }
	.under-field { padding-left: 0 }
	.field, select.field, textarea.field, .field:focus { font-size: 16px; line-height: 18px; padding: 7px 8px }
	.button { width: auto; padding: 8px 16px }
	.you .say .button { padding: 8px 12px }
	.figures:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)) }
	.service, .services.foes .service { grid-template-columns: 60px minmax(0, 1fr) auto; column-gap: 8px }
	.services.foes .service .value { grid-column: auto; text-align: right }
	.slots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px }
	.slots.four { grid-template-columns: repeat(2, minmax(0, 1fr)) }
	.slot { grid-template-columns: 1fr; justify-items: center; text-align: center }
	.slot .where, .slot a, .slot .empty, .slot .thing { grid-column: auto; grid-row: auto }
	.slot .empty, .slots .slot img { width: 64px; height: 64px }
	.who .look { order: 2; width: 64px }
	.who .look img { width: 64px; height: 64px }
	.who .look figcaption { display: none }
	.who .state { order: 3; width: auto; max-width: none; flex: 1 1 100% }
	.rig { grid-template-columns: 64px minmax(0, 1fr); gap: 0 10px }
	.rig img { width: 64px; height: 64px; margin-bottom: 0 }
	.panel > .body .msg-face img { height: 56px }
	.panel > .body img.site-photo { width: 96px; height: 72px }
	.depts > a, .depts > .here { padding: 8px 18px 8px 0; border-right: 0 }
	.foot-links a { padding: 7px 6px }
	.fight-mark { padding: 6px 4px; margin: -6px 0 }
	.log.chat .drop { min-width: 32px; min-height: 32px }
}

/* ============ ЛИСТ ПОСЕЛЕНЦА (info.new.php) ============ */
.button.ghost { background: transparent; color: var(--gold); border-color: #6B5412 }
.button.ghost:hover { background: var(--gold); color: #1A1A1A; border-color: var(--gold); text-decoration: none }
a.button:hover { text-decoration: none }
.deeds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px }
.card .who { border-bottom: 0; margin: 0; padding: 0; align-items: flex-start }
.card .who .face { width: 96px; height: 96px }
.card .who .id h1 { font: bold 17px/21px var(--machine) }
.card .who .motto { margin-top: 6px; font: 13px/18px var(--prose); color: var(--text) }
.card .who .state { align-self: flex-start }
.sheet { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 10px; margin-top: 10px; align-items: start }
.sheet-side, .sheet-main { display: grid; gap: 10px; min-width: 0 }
.stats.two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 20px }
.kit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 16px; align-items: start }
.kit .slots { grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (max-width: 760px) {
	.sheet { grid-template-columns: minmax(0, 1fr) }
	.sheet-main { order: -1 }
	.kit { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 560px) {
	.card .who .face { width: 64px; height: 64px }
	.card .who .id { flex: 1 1 60% }
	.card .who .deeds .button { flex: 1 1 auto; text-align: center }
}

/* ============ КАРТА СЕКТОРА (map.new.php) ============ */
.sector-top { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; align-items: start }
.sector-top .photo img { display: block; width: 200px; height: auto; border: 1px solid #484848 }
.sector-facts { min-width: 0 }
.sectors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-bottom: 10px }
.sectors > a { display: block; padding: 6px 9px 7px; background: var(--well); border: 1px solid #303030; color: var(--text) }
.sectors > a:hover { border-color: #5A5A5A; text-decoration: none }
.sectors > a b { display: block; font: bold 13px/17px var(--machine); color: var(--gold) }
.sectors > a span { display: block; font: 11px/15px var(--machine); color: var(--muted) }
.sectors > a.here { background: #2E2E2E; border-color: var(--gold) }
.sectors > a.here b { color: var(--strong) }
.figures.five { grid-template-columns: repeat(5, minmax(0, 1fr)) }
.sector .legend { margin-top: 10px; font: 12px/18px var(--prose); color: var(--text) }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 10px; align-items: start }
.split-main, .split-side { display: grid; gap: 10px; min-width: 0 }
.split-side .row { grid-template-columns: minmax(0, 1fr) }
.split-side .row > label { padding-top: 0 }
.split-side .row > .fine { grid-column: 1 }
.split-side select.field { width: 100% }
.panel > .head .tally a.here { color: var(--strong) }
table.numbers .under.zp { margin-right: 6px; font-size: 11px }
@media (max-width: 960px) {
	.split { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 700px) {
	.sector-top { grid-template-columns: minmax(0, 1fr) }
	.sector-top .photo { display: none }
	.figures.five { grid-template-columns: repeat(2, minmax(0, 1fr)) }
	.figures.five > div:last-child { grid-column: 1 / -1 }
	.sectors > a span + span { display: none }
}
table.numbers .half { display: inline-block; width: 12px; margin-left: 3px; color: var(--gold); font-weight: bold; text-align: left }
table.numbers td.figure .hint { border-bottom: 0 }

/* ============ КАБИНЕТ КОМПАНИИ (comp.php) ============ */
.tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--edge) }
.tabs > a, .tabs > span { padding: 6px 14px; font: 12px/16px var(--machine); color: var(--text); border-bottom: 2px solid transparent; margin-bottom: -1px }
.tabs > a:hover { color: var(--gold); text-decoration: none }
.tabs > .here { color: var(--gold); font-weight: bold; border-bottom-color: var(--gold) }
.figures.stack { grid-template-columns: minmax(0, 1fr) }
a.alarm { margin-left: 6px; font-size: 11px; color: var(--fight-ink) }
details.more.fold { margin-top: 12px; padding-top: 9px; border-top: 1px solid var(--edge) }
details.more.fold > summary { font: bold 12px var(--machine); color: var(--strong) }
details.more.fold > summary::after { color: var(--gold) }
.split-side .row .field { max-width: 120px }
.split-side select.field { max-width: none }
.split-side .row > span { display: flex; flex-wrap: wrap; align-items: center; gap: 6px }
.split-side select.field { width: 100% !important }
.panel .row > input.field[type="text"], .panel .row > span > input.field[type="text"] { max-width: 360px }

/* ============ ОГЛАВЛЕНИЕ ДЛИННОЙ СТРАНИЦЫ ============ */
.toc { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 0 }
.toc > a { padding: 4px 10px; background: var(--well); border: 1px solid #303030; font: 12px/16px var(--machine); color: var(--text) }
.toc > a:hover { border-color: var(--gold); color: var(--gold); text-decoration: none }
.tabs + .toc, .tabs + .panel, .tabs + .split { margin-top: 0 }
/* клетки чисел в узкой колонке - строками «подпись - число» */
.split-side .figures { grid-template-columns: minmax(0, 1fr); gap: 0 }
.split-side .figures > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; background: none; border: 0; border-bottom: 1px solid var(--line); padding: 3px 0 }
.split-side .figures .caption { font-size: 12px }
.split-side .figures .num { margin-top: 0; font-size: 12px; text-align: right }
details.more > summary { cursor: pointer }
details.more[open] > summary { margin-bottom: 4px }

/* ============ ГЛАВНАЯ ГОСТЯ ============ */
.opening.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: start; padding-top: 34px; padding-bottom: 26px }
.hero h1 { font-size: 28px; margin-top: 4px }
.hero .lead { margin-top: 14px; font-size: 14px; line-height: 22px; color: var(--text) }
.hero .deeds { margin-top: 20px; gap: 10px }
.button.big { padding: 8px 22px 9px; font-size: 13px }
.hero .deeds + .fine { margin-top: 8px }
.census { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--edge); font: 12px/18px var(--machine); color: var(--muted); max-width: none }
.census b { color: var(--strong) }
.census { display: flex; flex-wrap: wrap; overflow: hidden }
.census span { margin-left: -1px; padding: 0 9px; border-left: 1px solid var(--edge); white-space: nowrap }
.census span:first-child { padding-left: 0; border-left: 0 }
.hero-side .row.solo { grid-template-columns: minmax(0, 1fr); margin-bottom: 10px }
.hero-side .row.solo > label { padding-top: 0; margin-bottom: 3px }
.hero-side .field, .panel.hero-side .row > input.field[type="text"] { width: 100%; max-width: none }
.hero-side .button { margin-top: 2px }
.hero-side .forgot { margin-left: 12px; font-size: 11px }
.post .name { display: block; font: bold 14px/19px var(--machine) }
.post .when { margin-top: 3px }
.post .excerpt { margin-top: 8px }
@media (max-width: 760px) {
	.opening.hero .wrap { grid-template-columns: minmax(0, 1fr) }
	.census { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px }
	.census span, .census span:first-child { margin: 0; padding: 0; border: 0 }
}

/* ============ ВХОД ============ */
.single .wrap { display: block; padding-top: 30px; padding-bottom: 40px }
.panel.entry { max-width: 380px }
.row.solo { display: block; margin-bottom: 10px }
.row.solo > label { display: block; padding-top: 0; margin-bottom: 3px }
.entry .field, .panel.entry .row > input.field[type="text"] { width: 100%; max-width: none }
.entry .forgot { margin-left: 12px; font-size: 11px }
.entry .notice { margin-bottom: 12px }
.panel.entry > .body > .entry-new { margin: 14px -10px -10px; padding: 10px; border-top: 1px solid var(--line); color: var(--muted); display: flex; align-items: center; justify-content: space-between; gap: 10px }

/* ============ ЗАЯВКИ НА БОЙ ============ */
.split-side .under-field { padding-left: 0 }
.split-side .row + .under-field.fine { margin-top: -6px; margin-bottom: 8px }
table.fights td.act { white-space: nowrap; width: 1% }
table.fights td.act .muted { font-weight: normal; white-space: normal; display: inline-block; max-width: 110px; text-align: right }
table.fights td.act .button { padding: 3px 12px 4px; font-size: 11px }
table.fights tr.mine td { background: var(--well) }
.panel > .body > p.after { margin-top: 10px }
.header .bell > summary { display: inline-flex; align-items: center }
#novaya .field { width: 100%; max-width: none }

/* ============ ФОРУМ ============ */
.crumbs .acts .button:not(.quiet) { padding: 3px 12px 4px; font-size: 11px }
.msg-head .n { color: var(--muted) }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px }
.send .kbd-hint { font-size: 11px }
.send label.check { margin: 0 0 0 auto }
label.check input { margin: 0 6px 0 0; vertical-align: -2px }
@media (hover: none) { .kbd-hint { display: none } }
.field.short-title { max-width: 420px }
.row.solo > .field + .fine { display: block; margin-top: 3px }
.topic .last > a:not(.when) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.topic .last a.when { color: var(--muted); text-decoration: none }
.topic .last a.when:hover { color: var(--gold); text-decoration: underline }
.panel > .body > p.about-line { max-width: none }

/* ============ ИНВЕНТАРЬ ============ */
table.numbers td.act { white-space: nowrap; width: 1% }
table.numbers td.act .button { padding: 3px 12px 4px; font-size: 11px }
.services + p, .services + .fine { margin-top: 6px }
table.homefix + .deeds { margin-top: 10px }

/* ============ ПОИСК ============ */
ul.names { columns: 5 150px; column-gap: 24px; list-style: none; margin: 0; padding: 0 }
ul.names li { break-inside: avoid; padding: 4px 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere }
ul.names li .under { display: block; font-size: 11px; color: var(--muted) }
.row > .short + .fine { align-self: center }

/* ============ ИСТОРИЯ ВЕРСИЙ И ЛИСТАЛКИ ============ */
@media (min-width: 561px) {
	.versions .section { display: grid; grid-template-columns: 130px minmax(0, 88ch); column-gap: 16px }
	.versions .section-head { display: block; margin: 0 }
	.versions .section-head .tally { display: block; margin: 2px 0 0; font-size: 11px }
}
.pager b { padding: 0 5px; border: 1px solid var(--edge); color: var(--strong) }
@media (max-width: 560px) {
	.pager a, .pager b { display: inline-block; min-width: 28px; padding: 6px 4px; text-align: center }
}

/* ============ РЕЙТИНГ ============ */
table.rank td.zero, table.rank td.zero .muted { color: var(--quiet); font-weight: normal }
table.rank th.sorted { color: var(--strong); box-shadow: inset 0 -2px var(--gold) }
table.rank th.sorted b::after { content: " \25BE"; color: var(--gold) }
.sort-narrow { display: none }
@media (max-width: 560px) { .sort-narrow { display: block } .sort-narrow a { display: inline-block; padding: 6px 2px } }
.log-row .what > b + .why { display: block; font: 11px/15px var(--machine) }

/* ============ ЧАТ ============ */
.log.chat .about { display: inline-block; width: 13px; height: 13px; margin: 0; border: 1px solid #555; border-radius: 50%; font: bold 9px/13px var(--machine); text-align: center; color: var(--muted); vertical-align: 1px; text-decoration: none }
.log.chat .about:hover { border-color: var(--gold); color: var(--gold) }
.log.chat .speaker.gone { color: var(--text) }
@media (max-width: 560px) { .log.chat .about { width: 18px; height: 18px; font-size: 11px; line-height: 18px } }

/* ============ НАСТРОЙКИ ============ */
.row > .field.short, .row > select.field.short, .panel .row > input.field.short[type="text"] { max-width: 220px }
.row:has(> textarea) { align-items: start }
.row:has(> textarea) > label { padding-top: 5px }
table.numbers.logins td .tally-line { display: block; margin: 1px 0 0; font-size: 11px; color: var(--muted) }

/* ============ СПРАВКА ============ */
.help-layout.index { grid-template-columns: minmax(0, 1fr) }
.help-layout.index > .article { padding-left: 0; border-left: 0 }
.article > h2 { font: bold 13px/18px var(--prose); margin: 22px 0 6px }
.panel > .head .sep { color: var(--quiet); margin: 0 4px }

/* ============ ЗАГРУЗКИ ============ */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px }
.gallery .section { margin: 0; padding: 8px; border: 1px solid var(--line); background: var(--well) }
.gallery .section img { display: block; width: 100%; height: 120px; object-fit: contain; background: #151515 }
.gallery .lost { height: 120px; display: flex; align-items: center; justify-content: center; margin: 0; background: #151515 }
.panel > .head .path a { color: var(--gold); text-decoration: none }
p.tags { display: flex; flex-wrap: wrap; gap: 4px 18px }
.row.solo > .field, .panel .row.solo > input.field[type="text"] { width: 100%; max-width: none }
.forgot { margin-left: 12px; font-size: 11px }
/* Запись и вход рядом - в той же колонке, что шапка, и той же парой, что на главной:
   дело шире, вход - узкой плитой справа. */
@media (min-width: 761px) { .pair .wrap { width: 1000px; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; padding-top: 30px } }
.panel .row:not(.solo) > input.field:not(.short) { max-width: 360px }

/* ---- Узкий экран: колонки-обёртки не берут ширину по содержимому ---- */
.sheet-side, .sheet-main, .split-main, .split-side { grid-template-columns: minmax(0, 1fr) }
@media (max-width: 560px) {
	.panel > .head { flex-wrap: wrap; row-gap: 2px; height: auto; min-height: 27px }
	.panel > .head .tally { white-space: normal; min-width: 0; text-align: right; margin-left: auto }
}

/* ---- Лист поселенца: главные числа под именем ---- */
.card .vitals { display: flex; flex-wrap: wrap; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); row-gap: 8px }
.card .vitals > div { padding: 0 18px; border-left: 1px solid var(--line); min-width: 0 }
.card .vitals > div:first-child { padding-left: 0; border-left: 0 }
.card .vitals .caption { display: block; font: 11px/14px var(--machine); color: var(--muted) }
.card .vitals .num { display: block; margin-top: 2px; font: bold 13px/19px var(--machine); color: var(--strong); white-space: nowrap }
.card .vitals .num a { color: var(--gold); text-decoration: none }
.card .vitals .money .num { font-size: 19px; line-height: 19px; color: var(--gold) }
.card .vitals .unit { font-size: 11px; font-weight: normal; color: var(--muted) }
.card .who .deeds { margin-top: 12px }
@media (max-width: 560px) {
	.card .vitals { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px }
	.card .vitals > div, .card .vitals > div:first-child { padding: 0; border: 0 }
	.card .vitals .money { grid-column: 1 / -1 }
}

/* ---- Действия с вещами: формы POST, на вид - строкой ---- */
form.inline { display: inline; margin: 0 }
button.act { padding: 0; border: 0; background: none; font: inherit; color: var(--gold); cursor: pointer; text-decoration: none }
button.act:hover { text-decoration: underline; color: var(--gold) }
.slot .thing button.act { font-size: 11px; color: var(--muted) }
.slot .thing button.act:hover { color: var(--gold) }
details.give { display: inline-block }
details.give > summary { display: inline; list-style: none; color: var(--gold); cursor: pointer }
details.give > summary::-webkit-details-marker { display: none }
details.give > summary:hover { text-decoration: underline }
details.give[open] > summary { color: var(--strong) }
details.give form { display: flex; gap: 6px; margin-top: 6px }
details.give .field { width: 160px }

/* ============ ОБЩЕЕ: современные мелочи, действующие на все экраны ============ */
/* Флажки и переключатели - золотом, а не браузерным синим. */
input[type="checkbox"], input[type="radio"] { accent-color: var(--gold) }
/* Заголовки не оставляют слово-сироту, абзацы - висячий предлог (где браузер умеет). */
h1, h2, .panel > .head, .section-head { text-wrap: balance }
p, .fine, .notice, .under { text-wrap: pretty }
/* Числа стоят столбиком: разряды под разрядами. */
table.numbers td.figure, .figures .num, .stats .value, .meters .num, .vitals .num, .service .value { font-variant-numeric: tabular-nums }
/* Переход по якорю не прячет шапку плиты под краем окна. */
.panel[id], [id].section { scroll-margin-top: 12px }
/* Кнопки на касание - без задержки двойного нажатия; фокус с клавиатуры виден у всех. */
a, button, summary, .button { touch-action: manipulation }
button:focus-visible, button.act:focus-visible, details > summary:focus-visible { outline: 1px dotted var(--gold); outline-offset: 2px }

/* Главные числа под именем - и на своей странице («Вы»). */
.you .vitals { display: flex; flex-wrap: wrap; margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line) }
.you .vitals > div { padding: 0 14px; border-left: 1px solid var(--line) }
.you .vitals > div:first-child { padding-left: 0; border-left: 0 }
.you .vitals .caption { display: block; font: 11px/14px var(--machine); color: var(--muted) }
.you .vitals .num { display: block; margin-top: 2px; font: bold 13px/19px var(--machine); color: var(--strong); white-space: nowrap }
.you .vitals .num a { color: var(--gold); text-decoration: none }
.you .vitals .money .num { font-size: 19px; line-height: 19px }
.you .vitals .unit { font-size: 11px; font-weight: normal; color: var(--muted) }
/* Плюс навыка - кнопкой формы, на вид прежний квадрат. */
button.plus { display: inline-block; width: 16px; height: 16px; margin-left: 6px; padding: 0; border: 0; background: var(--gold); color: var(--on-gold); font: bold 12px/16px var(--machine); text-align: center; cursor: pointer; vertical-align: 1px }
button.plus:hover { background: var(--gold-hover) }
/* Главная: три плиты под зачином - об игре, новость, что нового. */
@media (min-width: 961px) { .band.three .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)) } }
.band.three .panel .list { margin: 6px 0 0; padding: 0; list-style: none }
.band.three .panel .list li { position: relative; padding: 0 0 6px 14px; font: 12px/17px var(--machine) }
.band.three .panel .list li::before { content: "\2014"; position: absolute; left: 0; color: var(--quiet) }
.band.three .panel .when { margin-top: 0 }
.band.three .panel.now { grid-column: 1 / -1 }
.band.three .now .figures .num.word { font: bold 14px/18px var(--machine) }
@media (min-width: 761px) { .band.three .now .figures { grid-template-columns: repeat(6, minmax(0, 1fr)) } }
/* Плиты ряда - одной высоты; последняя строка плиты («и ещё…», «пишем в Телеграме»)
   прижата к низу, и воздух стоит между текстом и подписью, а не под ней. */
.band.three .panel:not(.now) { display: flex; flex-direction: column }
.band.three .panel:not(.now) > .body { flex: 1 1 auto; display: flex; flex-direction: column }
.band.three .panel:not(.now) > .body > p.fine:last-child { margin-top: auto; padding-top: 9px }
@media (min-width: 761px) {
	.opening.hero .wrap { row-gap: 0 }
	.opening.hero .hero-text { grid-column: 1; grid-row: 1 }
	.opening.hero .hero-side { grid-column: 2; grid-row: 1 }
	.opening.hero .census { grid-column: 1 / -1; grid-row: 2 }
}
/* Своя страница: «Государство» во всю полосу, строки в две колонки,
   высоту колонок выравнивает браузер. «Хозяйство»: свод налога - по мере. */
.panel.gos-moe > .body > .stats { max-width: none }
@media (min-width: 561px) {
	.panel.gos-moe > .body > .stats { display: block; columns: 2; column-gap: 28px }
	.panel.gos-moe > .body > .stats > div { break-inside: avoid }
}
.panel.econ > .body > .stats { max-width: 460px }
/* «Хозяйство»: три ровных столбца - снимок, что с работой, два числа. */
.econ-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 200px; column-gap: 16px; align-items: start }
.econ-row.no-foto { grid-template-columns: minmax(0, 1fr) 200px }
/* Снимок - ЦЕЛИКОМ, по своей пропорции: у шахт он 4:3, у заводов и станций -
   2,5:1, и рамка 4:3 с обрезкой отрезала от АЭС больше половины. Не выше 100
   и не шире 200, столбец берёт ширину самого снимка. */
.econ-row > img { display: block; width: auto; height: auto; max-width: 200px; max-height: 100px; border: 1px solid var(--line) }
.econ-row .econ-tekst > p { margin: 0 0 6px; max-width: none }
.econ-row .econ-tekst > p:last-child { margin-bottom: 0 }
.econ-row .econ-delo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px }
.econ-row > .figures, .econ-row > .figures:has(> div:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr); gap: 4px }
.panel.econ > .body > .econ-row + .fine { margin-top: 10px }
@media (max-width: 760px) {
	.econ-row { grid-template-columns: auto minmax(0, 1fr); row-gap: 10px }
	.econ-row > img { max-width: 120px; max-height: 66px }
	.econ-row.no-foto { grid-template-columns: minmax(0, 1fr) }
	.econ-row > .figures, .econ-row > .figures:has(> div:nth-child(2):last-child) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
/* Навыки на своей странице - строкой во всю плиту «Бой», в три столбца. */
#navyki { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--edge) }
@media (min-width: 561px) { #navyki .skills { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px } }
/* Своя страница: левая колонка прилипает при прокрутке - рядом с «Боем»
   и новостями она не оставляет пустоты. Только на широком экране. */
@media (min-width: 961px) {
	.work .wrap > .side { position: sticky; top: 8px; align-self: start }
}

/* ---- Формы боковой колонки: одна раскладка на всех ----
   Подпись, поле с единицей во всю ширину, кнопка своей строкой - всегда.
   Прежде поле, единица и кнопка стояли в одной строке с переносом, и длинная
   кнопка падала вниз, а короткая - нет (замечание владельца 29 сентября). */
.split-side .row > .summa { display: flex; align-items: center; gap: 8px; min-width: 0 }
.split-side .row > .summa > .field { flex: 1 1 auto; width: auto; min-width: 0; max-width: none }
.split-side .row > .summa > .unit { flex: none; color: var(--muted); font-size: 11px; width: 22px }
.split-side .row > select.field { width: 100%; max-width: none }
.split-side form .knopka { margin: 2px 0 12px }
.split-side form:last-of-type .knopka { margin-bottom: 0 }
/* Числа «Денег» и прочих плит сбоку - строками «подпись - число» на любой ширине. */
.split > .split-side .panel .figures, .split > .split-side .panel .figures:has(> div:nth-child(2):last-child) { grid-template-columns: minmax(0, 1fr) }

/* «Забыли пароль? | Регистрация» у входа на главной (сеанс 82): пара
   держится вместе, черта - тихая и с воздухом по обе стороны. */
span.forgot { white-space: nowrap }
span.forgot .sep { margin: 0 7px; color: var(--quiet) }

/* Полоса вестей под вторым меню: что сегодня с выборами (1 октября 2026).
   Та же плита по тону, тот же золотой квадрат 6x6, что в шапке плиты, -
   знак «это о деле», а не второй акцент; ссылка в конце строки. */
.vest { background: var(--panel); border-bottom: 1px solid #111 }
.vest .wrap { padding-top: 8px; padding-bottom: 8px }
.vest p { position: relative; margin: 0; padding-left: 14px; font: 12px/17px var(--machine); color: var(--text) }
.vest p::before { content: ""; position: absolute; left: 0; top: calc((17px - var(--mark, 6px)) / 2); width: var(--mark, 6px); height: var(--mark, 6px); background: var(--gold) }
.vest b { color: var(--strong) }
.vest a { font-weight: bold; white-space: nowrap; margin-left: 4px }