/* «Ember Workspace»: пять входов шапки, палитра, рабочий стол урока на главной.
   Токены — MD3 темы (md3-tokens.css); запасные значения нужны, чтобы файл не рассыпался,
   если тема подключит его без токенов. Подключается после hellfire.css. */

/* ── шапка ────────────────────────────────────────────────────────────────── */
.pb-nav__count { display: inline-block; margin-inline-start: 4px; padding: 0 6px; border-radius: 999px; font-size: 11px; line-height: 18px; font-variant-numeric: tabular-nums; background: color-mix(in srgb, var(--md-sys-color-on-surface, #fff) 10%, transparent); color: var(--md-sys-color-on-surface-variant, #bbb); }
/* Цветовой индикатор входа: цвет раздела не несёт смысла сам по себе — читать его
   помогает подпись, поэтому это точка, а не заливка. */
.pb-nav__item[data-pb-dot] > a::before, .pb-nav__item[data-pb-dot] > details > summary::before {
	content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 7px; border-radius: 50%; background: var(--pb-dot, #888);
}
[data-pb-dot="blue"] { --pb-dot: #4c8dff; } [data-pb-dot="green"] { --pb-dot: #3fb96b; } [data-pb-dot="purple"] { --pb-dot: #a56cff; }
[data-pb-dot="yellow"] { --pb-dot: #f2b134; } [data-pb-dot="gray"] { --pb-dot: #8d8d8d; }

.pb-palette-trigger {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px; cursor: pointer;
	border: 1px solid var(--md-sys-color-outline-variant, #555); border-radius: 999px; font: inherit; font-size: 14px;
	background: var(--md-sys-color-surface-container, #222); color: var(--md-sys-color-on-surface-variant, #bbb);
}
.pb-palette-trigger:hover { border-color: var(--md-sys-color-primary, #f90); color: var(--md-sys-color-on-surface, #fff); }
.pb-palette-trigger:focus-visible, .pb-passport-btn:focus-visible { outline: 2px solid var(--md-sys-color-primary, #f90); outline-offset: 2px; }
.pb-palette-trigger .pb-search__ic { position: static; }
.pb-palette-trigger kbd { font: 11px/1 ui-monospace, monospace; padding: 3px 6px; border-radius: 6px; border: 1px solid var(--md-sys-color-outline-variant, #555); }
@media (max-width: 1440px) and (min-width: 1161px) { .pb-palette-trigger__txt { display: none; } }
.pb-drawer__search { width: 100%; justify-content: flex-start; margin-block: 8px; }
.pb-passport-btn {
	display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600;
	border: 1px solid transparent; border-radius: 999px; background: var(--md-sys-color-primary, #f90); color: var(--md-sys-color-on-primary, #000);
}
.pb-passport-btn .pb-passport-chip { color: inherit; }
.pb-passport-btn small { font-size: 10px; padding: 1px 6px; border-radius: 999px; background: color-mix(in srgb, currentColor 18%, transparent); }
.pb-passport-btn svg { border-radius: 4px; }

.pb-ws-flag {
	display: grid; gap: 6px; padding: 14px; border-radius: var(--md-sys-shape-corner-large, 16px); text-decoration: none; color: inherit;
	background: color-mix(in srgb, var(--md-sys-color-primary, #f90) 14%, var(--md-sys-color-surface, #161616));
	border: 1px solid color-mix(in srgb, var(--md-sys-color-primary, #f90) 35%, transparent);
}
.pb-ws-flag__ic { font-size: 30px; color: var(--md-sys-color-primary, #f90); }
.pb-ws-flag b { font-size: 18px; } .pb-ws-flag span { font-size: 13px; color: var(--md-sys-color-on-surface-variant, #bbb); }
.pb-ws-flag em { font-style: normal; font-weight: 600; color: var(--md-sys-color-primary, #f90); }

/* ── полосы главной ───────────────────────────────────────────────────────── */
.pb-ws { display: block; }  /* grid сжимал .pb-wrap по содержимому — полосы выходили разной ширины */
.pb-ws-strip { scroll-margin-top: 84px; }
.pb-ws-recent { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-block: 12px; }
.pb-ws-recent[hidden] { display: none; }
.pb-ws-chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-size: 14px; color: inherit;
	background: var(--md-sys-color-surface-container, #222); border: 1px solid var(--md-sys-color-outline-variant, #444); }
.pb-ws-chip:hover { border-color: var(--md-sys-color-primary, #f90); }

.pb-ws-btn, .pb-ws-teacher button, .pb-ws-tabs button, .pb-ws-view button, .pb-ws-link {
	min-height: 44px; padding: 0 16px; border-radius: 12px; font: inherit; cursor: pointer; color: inherit;
	border: 1px solid var(--md-sys-color-outline-variant, #555); background: var(--md-sys-color-surface-container, #222);
}
.pb-ws-btn { background: var(--md-sys-color-primary, #f90); color: var(--md-sys-color-on-primary, #000); border-color: transparent; font-weight: 600; }
.pb-ws-btn:focus-visible, .pb-ws-teacher button:focus-visible, .pb-ws-tabs button:focus-visible, .pb-ws-view button:focus-visible, .pb-ws-link:focus-visible { outline: 2px solid var(--md-sys-color-primary, #f90); outline-offset: 2px; }
.pb-ws-msg { min-height: 1.3em; margin: 6px 0 0; font-size: 14px; color: var(--md-sys-color-on-surface-variant, #bbb); }

.pb-ws-disp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch; }
.pb-ws-join, .pb-ws-ticket, .pb-ws-teacher { display: grid; gap: 10px; padding: 18px; border-radius: var(--md-sys-shape-corner-large, 16px);
	background: var(--md-sys-color-surface-container, #1f1f1f); border: 1px solid var(--md-sys-color-outline-variant, #444); align-content: start; }
.pb-ws-teacher { display: grid; } .pb-ws-teacher[hidden], .pb-ws-disp[hidden] { display: none; }
.pb-ws-join label, .pb-ws-teacher label { display: grid; gap: 4px; font-size: 14px; }
.pb-ws-join input, .pb-ws-teacher input, .pb-ws-teacher select, .pb-ws-teacher textarea {
	min-height: 44px; padding: 0 12px; border-radius: 10px; font: inherit; color: inherit; box-sizing: border-box;
	border: 1px solid var(--md-sys-color-outline, #666); background: var(--md-sys-color-surface, #161616); }
.pb-ws-teacher textarea { padding: 10px 12px; width: 100%; }
.pb-ws-bar { height: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--md-sys-color-on-surface, #fff) 12%, transparent); }
.pb-ws-bar i { display: block; height: 100%; width: 0; background: var(--md-sys-color-primary, #f90); transition: width .3s; }
.pb-ws-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pb-ws-check { display: flex !important; grid-auto-flow: column; align-items: center; gap: 8px !important; }
.pb-ws-check input { min-height: 0; width: 20px; height: 20px; }
.pb-ws-code { font-size: clamp(3rem, 12vw, 7rem); font-weight: 800; letter-spacing: .12em; font-variant-numeric: tabular-nums; line-height: 1; color: var(--md-sys-color-primary, #f90); }
.pb-ws-code:fullscreen { display: grid; place-items: center; background: var(--md-sys-color-surface, #111); font-size: 28vw; }
.pb-ws-matrix { overflow-x: auto; }
.pb-ws-matrix table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pb-ws-matrix th, .pb-ws-matrix td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--md-sys-color-outline-variant, #444); }
.pb-ws-matrix .g5 { color: #3fb96b; } .pb-ws-matrix .g4 { color: #8fd16b; } .pb-ws-matrix .g3 { color: #f2b134; } .pb-ws-matrix .g2 { color: #ff6b6b; }

/* витрина */
.pb-ws-tabs, .pb-ws-view { display: flex; flex-wrap: wrap; gap: 8px; }
.pb-ws-tabs { margin-block: 12px 16px; }
.pb-ws-tabs button[aria-selected="true"], .pb-ws-view button[aria-pressed="true"] {
	background: var(--md-sys-color-primary-container, #432); color: var(--md-sys-color-on-primary-container, #fdb); border-color: var(--md-sys-color-primary, #f90); }
.pb-wsgrid { display: grid; gap: 14px; }
.pb-wsgrid[data-view="bento"] { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.pb-wsgrid[data-view="list"] { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 14px; }
/* Фильтр табов — только CSS: вся витрина отдана сервером, поисковик видит все ссылки. */
.pb-wsgrid[data-tab="home"] .pb-wsc:not([data-tabs~="home"]),
.pb-wsgrid[data-tab="train"] .pb-wsc:not([data-tabs~="train"]),
.pb-wsgrid[data-tab="teach"] .pb-wsc:not([data-tabs~="teach"]),
.pb-wsgrid[data-tab="craft"] .pb-wsc:not([data-tabs~="craft"]) { display: none; }
.pb-wsc { border-radius: var(--md-sys-shape-corner-large, 16px); background: var(--md-sys-color-surface-container, #1f1f1f); border: 1px solid var(--md-sys-color-outline-variant, #444); overflow: hidden; }
.pb-wsc:hover { border-color: var(--md-sys-color-primary, #f90); }
.pb-wsc__main { display: grid; grid-template-columns: 44px 1fr; gap: 12px; padding: 16px; text-decoration: none; color: inherit; align-items: start; }
.pb-wsc__ic { display: grid; place-items: center; width: 44px; height: 44px; font-size: 24px; border-radius: 12px; color: var(--md-sys-color-primary, #f90); background: color-mix(in srgb, var(--md-sys-color-primary, #f90) 14%, transparent); }
.pb-wsc__tx b { display: block; font-size: 16px; } .pb-wsc__tx span { display: block; margin-top: 2px; font-size: 13px; color: var(--md-sys-color-on-surface-variant, #bbb); }
.pb-wsc__cta { grid-column: 2; font-style: normal; font-size: 13px; font-weight: 600; color: var(--md-sys-color-primary, #f90); }
.pb-wsgrid[data-view="list"] .pb-wsc { border-radius: 10px; }
.pb-wsgrid[data-view="list"] .pb-wsc__main { grid-template-columns: 28px 1fr; padding: 8px 10px; gap: 8px; align-items: center; }
.pb-wsgrid[data-view="list"] .pb-wsc__ic { width: 28px; height: 28px; font-size: 16px; border-radius: 8px; }
.pb-wsgrid[data-view="list"] .pb-wsc__tx span, .pb-wsgrid[data-view="list"] .pb-wsc__cta, .pb-wsgrid[data-view="list"] .pb-ws-stand { display: none; }
.pb-wsgrid[data-view="list"] .pb-wsc__tx b { font-size: 14px; font-weight: 500; }
.pb-wsgrid[data-view="bento"] .pb-wsc--stand { grid-column: span 2; }
@media (max-width: 640px) { .pb-wsgrid[data-view="bento"] .pb-wsc--stand { grid-column: auto; } .pb-ws-disp { grid-template-columns: 1fr; } }

.pb-ws-stand { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px 16px; font-size: 13px; }
.pb-ws-stand__code { list-style: none; margin: 0; padding: 8px; border-radius: 10px; background: #0d0d0d; color: #e8e8e8; }
.pb-ws-stand__code li { padding: 2px 6px; border-radius: 6px; } .pb-ws-stand__code li.is-cur { background: color-mix(in srgb, var(--md-sys-color-primary, #f90) 35%, transparent); }
.pb-ws-stand__mem p { margin: 6px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--md-sys-color-on-surface-variant, #bbb); }
.pb-ws-stand__mem code { font-size: 12px; }
.pb-ws-stand__btn { grid-column: 1 / -1; min-height: 44px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; border: 0; background: var(--md-sys-color-primary, #f90); color: var(--md-sys-color-on-primary, #000); }

/* перемена */
.pb-ws-games { list-style: none; margin: 12px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pb-ws-game { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; border: 1px solid var(--md-sys-color-outline-variant, #444); background: var(--md-sys-color-surface-container, #1f1f1f); }
.pb-ws-game b { display: block; } .pb-ws-game span span { display: block; font-size: 13px; color: var(--md-sys-color-on-surface-variant, #bbb); }
.pb-ws-game__ic { font-size: 26px; color: #f2b134; flex: none; } .pb-ws-game em { margin-inline-start: auto; font-size: 12px; opacity: .7; }
.pb-ws-status { font-variant-numeric: tabular-nums; font-weight: 600; }

/* дайджест и поиск */
.pb-ws-newslist, .pb-ws-apps__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pb-ws-news { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--md-sys-color-outline-variant, #444); }
.pb-ws-news__t { color: inherit; text-decoration: none; font-weight: 500; flex: 1 1 18rem; } .pb-ws-news__t:hover { text-decoration: underline; }
.pb-ws-news__tool { display: inline-flex; gap: 6px; align-items: center; min-height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--md-sys-color-primary, #f90); border: 1px solid var(--md-sys-color-primary, #f90); }
.pb-ws-apps__list { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 12px; }
.pb-ws-apps__list a { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: inherit; border: 1px solid var(--md-sys-color-primary, #f90); background: color-mix(in srgb, var(--md-sys-color-primary, #f90) 8%, transparent); }
.pb-ws-apps__list span { font-size: 13px; color: var(--md-sys-color-on-surface-variant, #bbb); }

@media (prefers-reduced-motion: reduce) { .pb-ws-bar i { transition: none; } }

/* Шапка: пять входов + палитра + Паспорт в одну строку. Переносы внутри пунктов ломали высоту панели. */
.pb-appbar .pb-nav__list a, .pb-palette-trigger, .pb-passport-btn, .pb-palette-trigger kbd { white-space: nowrap; }
.pb-appbar .pb-nav__list a { padding-inline: 10px; }
.pb-passport-btn { max-width: 13rem; }
.pb-passport-btn .pb-passport-chip { max-width: 100%; }
.pb-passport-btn .pb-passport-chip > span { overflow: hidden; text-overflow: ellipsis; max-width: 8.5rem; }
.pb-appbar__actions { flex: none; gap: 8px; }

/* Флагман в ведущей колонке: общий `.pb-mega a` делает ссылки строкой, а здесь нужна карточка. */
.pb-mega a.pb-ws-flag { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* 1161–1500px: пять входов + палитра + Паспорт не помещаются рядом с названием проекта.
   Эмблема «ПО» остаётся — по ней и так узнают сайт, а строка названия дублирует вкладку браузера. */
@media (max-width: 1500px) and (min-width: 1161px) {
	.pb-appbar .pb-brand__text { display: none; }
	.pb-appbar .pb-nav__list a { font-size: 14px; padding-inline: 8px; }
}
.pb-mega a.pb-ws-flag { border-radius: 14px; }
.pb-passport-btn { overflow: hidden; }
.pb-passport-btn [data-pb-passport-badge] { min-width: 0; overflow: hidden; display: block; }
.pb-passport-btn .pb-passport-chip { display: flex; min-width: 0; }
.pb-passport-btn .pb-passport-chip svg { flex: none; }
.pb-passport-btn .pb-passport-chip > span { min-width: 0; white-space: nowrap; }
/* Узкие экраны: в шапке остаются иконки; полные подписи — в шторке и в самом окне. */
@media (max-width: 1160px) {
	.pb-appbar__actions .pb-palette-trigger kbd, .pb-appbar__actions .pb-palette-trigger__txt { display: none; }
}
@media (max-width: 640px) {
	.pb-appbar .pb-brand__text { display: none; }
	.pb-passport-btn { padding: 0 8px; }
	.pb-passport-btn .pb-passport-chip > span, .pb-passport-btn .pb-passport-chip small { display: none; }
	.pb-appbar__actions { gap: 4px; }
}

/* ── игровая комната /recess/ ─────────────────────────────────────────────── */
.pb-rc__timer { font: 700 1.6rem/1 ui-monospace, monospace; font-variant-numeric: tabular-nums; padding: 6px 14px; border-radius: 999px; background: var(--md-sys-color-primary-container, #432); color: var(--md-sys-color-on-primary-container, #fdb); }
.pb-rc__timer[hidden] { display: none; }
.pb-rc__timer.is-low { background: #7a1f1f; color: #fff; }
.pb-rc__gate { display: grid; gap: 12px; max-width: 40rem; }
.pb-rc__gate[hidden], .pb-rc__room[hidden], .pb-rc__end[hidden] { display: none; }
.pb-rc__picker { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.pb-rc__picker button { display: grid; gap: 3px; width: 100%; height: 100%; min-height: 44px; padding: 12px 14px; text-align: left; font: inherit; color: inherit; cursor: pointer;
	border-radius: 14px; border: 1px solid var(--md-sys-color-outline-variant, #444); background: var(--md-sys-color-surface-container, #1f1f1f); }
.pb-rc__picker button:hover, .pb-rc__picker button:focus-visible { border-color: var(--md-sys-color-primary, #f90); outline: none; }
.pb-rc__picker span { font-size: 13px; color: var(--md-sys-color-on-surface-variant, #bbb); } .pb-rc__picker em { font-style: normal; font-size: 12px; color: var(--md-sys-color-primary, #f90); }
/* touch-action и overscroll: на телефоне палец в игре не должен тянуть за собой страницу. */
.pb-rc__frame { aspect-ratio: 16 / 10; max-height: 78vh; width: 100%; border-radius: 14px; overflow: hidden; background: #0b0b10; touch-action: none; overscroll-behavior: contain; outline: none; }
.pb-rc__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.pb-rc__end { text-align: center; padding: 40px 12px; display: grid; gap: 12px; justify-items: center; }