/* RHW База компонентов. Цвета — переменные темы RHW (есть запасные значения). */

/* ---------- Таблица плат (1.2.0: единая по сокету, фильтры, сравнение) ---------- */
.hwdb { margin: 0 0 clamp(32px, 4vw, 48px); }
.hwdb__head { margin-bottom: 12px; }
.hwdb__title { margin: 0 0 6px; font-weight: 800; font-size: clamp(21px, 2vw, 27px); }
.hwdb__lead { margin: 0; color: var(--muted, #566573); max-width: 80ch; }

.hwdb__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 10px; }
.hwdb__search { flex: 1 1 260px; max-width: 380px; }
.hwdb__search input {
	width: 100%; min-height: 38px; padding: 6px 10px; border-radius: 6px; border: 1px solid var(--line-strong, #aab6c1);
	background: var(--surface, #fff); color: var(--fg, #14202b); font: 400 15px/1.2 var(--font-body, system-ui, sans-serif);
}
.hwdb__count { margin: 0 0 0 auto; color: var(--muted, #566573); font: 500 12px/1.3 var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .05em; }
.hwdb__cols { position: relative; }
.hwdb__btn {
	min-height: 38px; padding: 6px 14px; border-radius: 6px; cursor: pointer;
	border: 1px solid var(--line-strong, #aab6c1); background: var(--surface, #fff); color: var(--fg, #14202b); font: 600 14px/1.2 var(--font-body, system-ui, sans-serif);
}
.hwdb__btn:hover { border-color: var(--rhw-blue-ink, #0a66b2); }
.hwdb__btn:disabled { opacity: .5; cursor: default; }
.hwdb__btn[hidden] { display: none; }
.hwdb__btn--primary { background: var(--rhw-blue-btn, #0a66b2); border-color: var(--rhw-blue-btn, #0a66b2); color: #fff; }
.hwdb__btn--small { min-height: 30px; padding: 4px 10px; font-size: 13px; margin-top: 6px; }
.hwdb__colmenu {
	position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; display: grid; gap: 6px; min-width: 240px; padding: 12px 14px;
	border: 1px solid var(--line, #d6dde4); border-radius: var(--radius, 8px); background: var(--surface, #fff); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); font-size: 14px;
}
.hwdb__colmenu[hidden] { display: none; }
.hwdb__colmenu label { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.hwdb__scroll {
	overflow: auto; max-height: calc(100vh - var(--header-h, 64px) - 24px);
	border: 1px solid var(--line, #d6dde4); border-radius: var(--radius, 8px); background: var(--surface, #fff);
}
.hwdb__end { display: block; height: 1px; }
/* Своя полоса прокрутки — прилипает к низу окна, пока настоящая не видна. */
.hwdb__hbar {
	position: sticky; bottom: 0; z-index: 25; overflow-x: auto; overflow-y: hidden; height: 16px; margin-top: -17px;
	background: var(--surface-2, #f3f6f9); border-top: 1px solid var(--line, #d6dde4);
}
.hwdb__hbar[hidden] { display: none; }
.hwdb__hbar > div { height: 1px; }

.hwdb__table { border-collapse: separate; border-spacing: 0; font-size: 13.5px; white-space: nowrap; }
.hwdb__table th, .hwdb__table td { padding: 7px 10px; border-bottom: 1px solid var(--line, #d6dde4); text-align: left; vertical-align: top; line-height: 1.35; }
.hwdb__table thead th { position: sticky; z-index: 3; background: var(--surface-2, #f3f6f9); }
.hwdb__table .hwdb__r1 th { top: 0; }
.hwdb__table .hwdb__r2 th { top: var(--r2, 30px); }
.hwdb__table .hwdb__r3 th { top: var(--r3, 60px); }
/* Заголовки групп — по центру и в цвете группы, как в исходной таблице. */
.hwdb__gcell {
	text-align: center !important; background: var(--gc, #ccc) !important; color: #1a1a1a;
	font: 700 12px/1.2 var(--font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .06em;
}
.hwdb__r2 th { background: var(--gl, var(--surface-2, #f3f6f9)) !important; color: #2b2f33; font: 600 11.5px/1.25 var(--font-body, system-ui, sans-serif); }
.hwdb__fcell { padding: 4px 6px !important; background: var(--surface, #fff) !important; }
.hwdb__fcell select, .hwdb__fcell input {
	width: 100%; min-width: 64px; max-width: 170px; height: 28px; padding: 2px 4px; border-radius: 4px; box-sizing: border-box;
	border: 1px solid var(--line-strong, #aab6c1); background: var(--surface, #fff); color: var(--fg, #14202b); font: 400 12.5px/1.2 var(--font-body, system-ui, sans-serif);
}
/* Граница между группами — такая же заметная, как между моделью и остальной таблицей. */
.hwdb__table .gs { border-left: 2px solid var(--line-strong, #aab6c1); }
.hwdb__sticky { position: sticky; z-index: 2; background: var(--surface, #fff); }
.hwdb__c0 { left: 0; width: 34px; min-width: 34px; text-align: center !important; padding: 7px 6px !important; }
.hwdb__c1 { left: 34px; box-shadow: inset -2px 0 0 var(--line-strong, #aab6c1); }
.hwdb__table thead .hwdb__sticky { z-index: 4; }
.hwdb__table tbody th { font-weight: 700; white-space: normal; min-width: 190px; max-width: 250px; }
.hwdb__table tbody th a { color: var(--fg, #14202b); text-decoration: none; }
.hwdb__table tbody th a:hover { color: var(--rhw-blue-ink, #0a66b2); text-decoration: underline; }
.hwdb__table tbody tr:hover > * { background: var(--surface-2, #f3f6f9); }
.hwdb__table tbody tr:hover > .hwdb__sticky { background: var(--surface-2, #f3f6f9); }
.hwdb__table .is-none { color: var(--muted, #566573); opacity: .55; }
.hwdb__table .is-yes { color: #1d7a3a; font-weight: 600; }
.hwdb__table .is-no { color: var(--muted, #566573); }
.hwdb__badge { display: inline-block; padding: 1px 7px; border-radius: 4px; font-size: 12.5px; font-weight: 600; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .14); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hwdb__badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); } }
:root[data-theme="dark"] .hwdb__badge { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.hwdb__g { display: inline-block; padding: 0 4px; border-radius: 3px; font-weight: 700; }
.hwdb__g5 { background: #cfe2f3; color: #0b3d6b; }
.hwdb__g4 { background: #d9ead3; color: #1f4d16; }
.hwdb__g3 { background: #fff2cc; color: #5c4400; }
.hwdb__g2, .hwdb__g1 { background: #eee; color: #444; }
.hwdb__sort {
	all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; font: inherit; color: inherit;
}
.hwdb__sort:hover, .hwdb__sort:focus-visible { text-decoration: underline; }
.hwdb__sort:focus-visible { outline: 2px solid var(--rhw-blue, #1d8fe1); outline-offset: 2px; }
.hwdb__sort.is-asc::after { content: "↑"; }
.hwdb__sort.is-desc::after { content: "↓"; }

/* Тёмная тема: цвета групп приглушаем, текст светлый. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .hwdb__gcell { background: color-mix(in srgb, var(--gc) 40%, #151c23) !important; color: #e5ebf0; }
	:root:not([data-theme="light"]) .hwdb__r2 th { background: color-mix(in srgb, var(--gl) 18%, #1b242d) !important; color: #c9d3dc; }
	:root:not([data-theme="light"]) .hwdb__table .is-yes { color: #6fd08c; }
	:root:not([data-theme="light"]) .hwdb__g5 { background: #173a5c; color: #cfe2f3; }
	:root:not([data-theme="light"]) .hwdb__g4 { background: #1f3d1a; color: #d9ead3; }
	:root:not([data-theme="light"]) .hwdb__g3 { background: #4a3a10; color: #fff2cc; }
}
:root[data-theme="dark"] .hwdb__gcell { background: color-mix(in srgb, var(--gc) 40%, #151c23) !important; color: #e5ebf0; }
:root[data-theme="dark"] .hwdb__r2 th { background: color-mix(in srgb, var(--gl) 18%, #1b242d) !important; color: #c9d3dc; }
:root[data-theme="dark"] .hwdb__table .is-yes { color: #6fd08c; }
:root[data-theme="dark"] .hwdb__g5 { background: #173a5c; color: #cfe2f3; }
:root[data-theme="dark"] .hwdb__g4 { background: #1f3d1a; color: #d9ead3; }
:root[data-theme="dark"] .hwdb__g3 { background: #4a3a10; color: #fff2cc; }

/* Сравнение */
.hwdb__cmpbar {
	position: sticky; bottom: 18px; z-index: 26; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: fit-content; max-width: 100%;
	margin: 10px 0 0 auto; padding: 10px 14px; border-radius: var(--radius, 8px); background: var(--surface, #fff);
	border: 1px solid var(--rhw-blue, #1d8fe1); box-shadow: 0 8px 24px rgba(0, 0, 0, .18); font-weight: 600;
}
.hwdb__cmpbar[hidden] { display: none; }
.hwdb__dialog { width: min(96vw, 1200px); max-width: none; max-height: 90vh; padding: 0; border: 1px solid var(--line, #d6dde4); border-radius: var(--radius, 8px); background: var(--surface, #fff); color: var(--fg, #14202b); }
.hwdb__dialog::backdrop { background: rgba(5, 10, 15, .6); }
.hwdb__dialog-head { position: sticky; top: 0; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 12px 16px; background: var(--surface-2, #f3f6f9); border-bottom: 1px solid var(--line, #d6dde4); }
.hwdb__dialog-head strong { margin-right: auto; font-size: 17px; }
.hwdb__dialog-body { padding: 0 16px 16px; overflow-x: auto; }
.hwdb__cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.hwdb__cmp th, .hwdb__cmp td { padding: 7px 10px; border-bottom: 1px solid var(--line, #d6dde4); text-align: left; vertical-align: top; }
.hwdb__cmp thead th { position: sticky; top: 0; background: var(--surface, #fff); font-size: 15px; }
.hwdb__cmp tbody th { color: var(--muted, #566573); font-weight: 500; width: 24%; }
.hwdb__cmpg th { background: var(--gc, #ccc); color: #1a1a1a; font: 700 12px/1.2 var(--font-body, system-ui, sans-serif); text-transform: uppercase; letter-spacing: .06em; }
.hwdb__dialog.diff-only .is-same { display: none; }
.hwdb__cmpnone { display: none; margin: 16px 0 0; color: var(--muted, #667); }
.hwdb__dialog.diff-only .no-diff .hwdb__cmpnone { display: block; }
.hwdb__cmp tr:not(.is-same):not(.hwdb__cmpg) td { background: color-mix(in srgb, var(--rhw-blue, #1d8fe1) 7%, transparent); }

@media (max-width: 640px) {
	.hwdb__table { font-size: 13px; }
	.hwdb__table tbody th { min-width: 130px; max-width: 150px; }
	.hwdb__count { margin-left: 0; width: 100%; }
}

/* ---------- Страница платы ---------- */
.mb__head { margin-bottom: 18px; }
.mb__kicker { margin: 0 0 6px; color: var(--rhw-blue-ink, #0a66b2); font: 500 12px/1.3 var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .06em; }
.mb__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; }
.mb__back { font-weight: 500; text-decoration: none; }
.mb__back:hover { text-decoration: underline; }
.mb__facts {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 10px;
	margin: 0 0 24px; padding: 0; list-style: none;
}
.mb__facts li {
	display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--line, #d6dde4); border-radius: var(--radius, 8px);
	border-left: 3px solid var(--rhw-blue, #1d8fe1); background: var(--surface, #fff);
}
.mb__facts span { color: var(--muted, #566573); font: 500 11px/1.3 var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .05em; }
.mb__facts strong { font: 700 17px/1.3 var(--font-display, inherit); }
.mb__photo { margin: 0 0 24px; max-width: 760px; }
.mb__photo img { width: 100%; height: auto; border-radius: var(--radius, 8px); }
.mb__text { max-width: var(--col, 780px); margin-bottom: 24px; }
.mb__specs-title { margin: 8px 0 14px; font-weight: 800; font-size: clamp(21px, 2vw, 27px); }
.mb__specs { columns: 3 340px; column-gap: 18px; }
.mb__group {
	break-inside: avoid; margin: 0 0 18px; padding: 14px 16px 10px; border: 1px solid var(--line, #d6dde4);
	border-radius: var(--radius, 8px); background: var(--surface, #fff);
}
.mb__group h3 { margin: 0 0 8px; font: 700 16px/1.25 var(--font-display, inherit); }
.mb__group dl { margin: 0; }
.mb__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; padding: 6px 0; border-top: 1px solid var(--line, #d6dde4); font-size: 14px; }
.mb__row:first-child { border-top: 0; }
.mb__row dt { color: var(--muted, #566573); }
.mb__row dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.mb__row.is-none dd { font-weight: 400; color: var(--muted, #566573); }
.mb__note { margin: 4px 0 0; color: var(--muted, #566573); font-size: 13px; max-width: 90ch; }

/* ---------- Фото платы ---------- */
.mb-photos { margin: 0 0 24px; max-width: 900px; }
.mb-photos__main {
	display: block; border: 1px solid var(--line, #d6dde4); border-radius: var(--radius, 8px); background: #fff; cursor: zoom-in; overflow: hidden;
}
.mb-photos__main img { display: block; width: 100%; height: clamp(240px, 42vw, 480px); object-fit: contain; padding: 12px; box-sizing: border-box; }
.mb-photos__thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
.mb-photos__thumbs a { display: block; width: 84px; height: 64px; border: 1px solid var(--line, #d6dde4); border-radius: 6px; background: #fff; overflow: hidden; }
.mb-photos__thumbs a[aria-current="true"] { border-color: var(--rhw-blue, #1d8fe1); box-shadow: 0 0 0 1px var(--rhw-blue, #1d8fe1); }
.mb-photos__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.mb-photos__src { margin: 8px 0 0; color: var(--muted, #566573); font-size: 13px; }
.mb-viewer { width: min(96vw, 1400px); max-width: none; height: min(92vh, 1000px); padding: 0; border: 0; border-radius: var(--radius, 8px); background: #fff; }
.mb-viewer::backdrop { background: rgba(5, 10, 15, .82); }
.mb-viewer[open] { display: flex; align-items: center; justify-content: center; }
.mb-viewer__img { max-width: 100%; max-height: 100%; object-fit: contain; }
.mb-viewer__close, .mb-viewer__nav {
	position: absolute; border: 0; border-radius: 50%; width: 44px; height: 44px; cursor: pointer;
	background: rgba(0, 0, 0, .6); color: #fff; font-size: 26px; line-height: 1;
}
.mb-viewer__close { top: 10px; right: 10px; }
.mb-viewer__prev { left: 10px; top: 50%; margin-top: -22px; }
.mb-viewer__next { right: 10px; top: 50%; margin-top: -22px; }
.mb-viewer__nav[hidden] { display: none; }

/* ---------- Комментарий RHW ---------- */
.mb-comment {
	max-width: var(--col, 780px); margin: 0 0 24px; padding: 16px 20px; border-radius: var(--radius, 8px);
	border: 1px solid var(--line, #d6dde4); border-left: 4px solid var(--rhw-red, #e1373d); background: var(--surface, #fff);
}
.mb-comment__who { margin: 0 0 6px; color: var(--rhw-red, #e1373d); font: italic 700 13px/1.2 var(--font-display, inherit); text-transform: uppercase; letter-spacing: .08em; }
.mb-comment__text p { margin: 0 0 .6em; }
.mb-comment__text p:last-child { margin-bottom: 0; }

/* ---------- Обзоры ---------- */
.mb-reviews { margin-top: 32px; }
.mb-reviews__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.mb-review a {
	display: grid; height: 100%; border: 1px solid var(--line, #d6dde4); border-radius: var(--radius, 8px); background: var(--surface, #fff);
	color: var(--fg, #14202b); text-decoration: none; overflow: hidden;
}
.mb-review a:hover { border-color: var(--rhw-blue, #1d8fe1); }
.mb-review__thumb { position: relative; display: block; aspect-ratio: 16 / 9; background: #0b0f14; }
.mb-review__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mb-review__play { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; background: rgba(0, 0, 0, .65); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.mb-review__play::after { content: ""; position: absolute; left: 18px; top: 14px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #fff; }
.mb-review__body { display: grid; gap: 4px; padding: 12px 14px 14px; align-content: start; }
.mb-review__src { color: var(--rhw-blue-ink, #0a66b2); font: 500 11px/1.3 var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .05em; }
.mb-review__title { font-weight: 700; line-height: 1.3; }

/* ---------- Предложения ---------- */
.mb-suggest { margin-top: 36px; max-width: 860px; }
.mb-suggest__lead { margin: 0 0 14px; color: var(--muted, #566573); }
.mb-suggest__msg { padding: 10px 14px; border-radius: 6px; font-weight: 500; }
.mb-suggest__msg--ok { background: rgba(31, 158, 85, .12); color: var(--fg, #14202b); border: 1px solid rgba(31, 158, 85, .45); }
.mb-suggest__msg--err { background: rgba(225, 55, 61, .1); color: var(--fg, #14202b); border: 1px solid rgba(225, 55, 61, .45); }
.mb-suggest__form {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 18px 20px;
	border: 1px solid var(--line, #d6dde4); border-radius: var(--radius, 8px); background: var(--surface, #fff);
}
.mb-suggest__form label { display: block; font-size: 14px; font-weight: 500; }
.mb-suggest__form label > input, .mb-suggest__form label > select, .mb-suggest__form label > textarea { display: block; margin-top: 5px; }
.mb-suggest__form input[type=text], .mb-suggest__form input[type=url], .mb-suggest__form select, .mb-suggest__form textarea {
	width: 100%; min-height: 40px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--line-strong, #aab6c1);
	background: var(--bg, #fff); color: var(--fg, #14202b); font: 400 15px/1.35 var(--font-body, system-ui, sans-serif); box-sizing: border-box;
}
.mb-suggest__kind { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; border: 0; }
.mb-suggest__kind legend { width: 100%; margin-bottom: 6px; font-weight: 600; }
.mb-suggest__kind label { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; }
.mb-suggest__row { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.mb-suggest__row[hidden], .mb-suggest__hint[hidden] { display: none; }
.mb-suggest__wide { grid-column: 1 / -1; }
.mb-suggest__hint, .mb-suggest__req { color: var(--muted, #566573); font-weight: 400; font-size: 12px; }
.mb-suggest__req { color: var(--rhw-red, #e1373d); }
.mb-suggest__actions { grid-column: 1 / -1; margin: 4px 0 0; }
.mb-suggest__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) {
	.mb-suggest__form, .mb-suggest__row { grid-template-columns: 1fr; }
}