/*
  Стили общего модуля вкладок — DGT-UX-01, см. docs/sdd/portal-one-viewport.md.

  Здесь ровно три вещи, и все они следствия одного решения: атрибут hidden
  навешивает скрипт, а не шаблон.

    1) печать разворачивает скрытые панели обратно;
    2) страница без JavaScript перестаёт быть обрезанной;
    3) страница с JavaScript не успевает мигнуть всеми панелями сразу.

  Плюс оформление вкладок-ссылок Workbench и панель «Фреймворк»: правила для
  них лежат здесь, а не в static/css/workbench.css, потому что вкладки стали
  ссылками именно из-за контракта деградации.
*/

/* --------------------------------------------------- Печать: всё видно */

/*
  Атрибут hidden убирает панель и из печати тоже, а на бумаге вкладок нет:
  печатается длинный документ, то есть ровно та портянка, от которой мы уходим
  на экране. !important нужен, чтобы перебить UA-правило [hidden]{display:none}.

  Правило только для хаба Workbench, где вкладки делят разное содержимое. Шаги
  главной прячутся классом, а не hidden, и без JavaScript печатаются все.
  Список и граф тем — два представления одних и тех же тегов: разворачивать оба
  на бумаге значило бы напечатать их дважды, причём граф — пустой оболочкой,
  ведь рисует его скрипт.
*/
@media print {
  [data-workbench-hub-panel][hidden] {
    display: block !important;
  }
}

/* ------------------------------------------- Без JavaScript: всё видно */

/*
  Хаб Workbench живёт в одном экране: body держит 100svh, рамка — сетку в три
  строки, панель — height:100% с overflow:hidden. Пока панель была ровно одна,
  это работало. Теперь сервер печатает все пять, и без скрипта, который прячет
  лишние, содержимое обрезалось бы рамкой.

  Поэтому в режиме .no-js (класс снимает инлайновый скрипт в head.html, то есть
  он остаётся только при полностью выключенном JavaScript) хаб превращается в
  обычную страницу с вертикальной прокруткой: пять панелей подряд и рабочая
  якорная навигация по ним.
*/
.no-js .courses-body--workbench,
.no-js .workbench-hub.portal-main,
.no-js .workbench-hub__frame,
.no-js .workbench-hub__panels,
.no-js .workbench-hub__panel {
  height: auto;
  min-height: 0;
  overflow: visible;
}

.no-js .workbench-hub__frame {
  grid-template-rows: auto;
}

.no-js .workbench-hub__panel + .workbench-hub__panel {
  border-top: 1px solid var(--course-line);
}

/* Якорь-цель панели: прыжок по #framework не должен прятать заголовок под
   липкой шапкой портала. */
.workbench-hub__anchor {
  scroll-margin-top: calc(var(--course-header-height, 64px) + 12px);
}

/* ---------------------------------------- С JavaScript: без мигания */

/*
  Между разбором HTML и запуском модуля страница успевает нарисовать все панели
  подряд. Отложенный скрипт выполняется быстро, но «быстро» — не «никогда»,
  поэтому до первого применения состояния показываем только первую панель.
  Атрибут data-portal-panels-ready ставит portal-tabs.js, и дальше видимостью
  управляет уже он.
*/
.js .workbench-hub__panels:not([data-portal-panels-ready]) > .workbench-hub__panel:not(:first-of-type) {
  display: none;
}

/* ------------------------------------------- Вкладки Workbench-ссылками */

/*
  Повторяет .workbench-hub__tabs button из static/css/workbench.css: сами
  переключатели стали ссылками (без JS кнопка не делает ничего, а ссылка ведёт
  к панели), но выглядеть обязаны так же. Кнопочное правило не тронуто — им
  пользуются другие наборы вкладок Workbench.
*/
.workbench-hub__tabs a {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--course-muted);
  cursor: pointer;
  display: inline-flex;
  font: 650 12px/1 var(--course-sans);
  justify-content: center;
  letter-spacing: 0;
  min-height: 44px;
  padding: 0 16px;
  position: relative;
  text-decoration: none;
  white-space: nowrap;
}

.workbench-hub__tabs a:hover {
  color: var(--course-text);
  text-decoration: none;
}

.workbench-hub__tabs a[aria-selected="true"] {
  border-bottom-color: var(--wb-accent);
  color: var(--course-text);
}

.workbench-hub__tabs a:focus-visible {
  outline: 2px solid var(--wb-accent);
  outline-offset: -3px;
}

/* -------------------------------------------- Панель «Фреймворк» (Digit) */

.workbench-hub__panel--framework {
  align-items: center;
  display: grid;
  gap: 34px;
  grid-template-columns: minmax(360px, 1fr) minmax(380px, 1fr);
}

.wb-framework__copy {
  max-width: 620px;
  min-width: 0;
}

.workbench-hub__panel--framework h2 {
  color: var(--course-text);
  font: 800 30px/1.12 var(--course-sans);
  letter-spacing: -0.02em;
  margin: 10px 0 0;
}

.wb-framework__lead {
  color: var(--course-muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 10px 0 0;
}

.wb-framework__lead code,
.wb-framework__install code {
  font-family: var(--course-mono);
}

.workbench-hub__panel--framework .workbench-hub__metrics {
  grid-template-columns: repeat(3, 1fr);
  margin: 16px 0 14px;
}

.wb-framework__install {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wb-framework__install li {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 20px minmax(0, 1fr);
  min-width: 0;
}

.wb-framework__install b {
  color: var(--course-subtle);
  font: 700 10px/1 var(--course-mono);
}

/* Команда переносится, а не обрезается многоточием: обрезанный установщик
   нельзя ни прочитать, ни проверить глазами перед запуском. */
.wb-framework__install code {
  background: var(--course-control);
  border: 1px solid var(--course-line);
  border-radius: 5px;
  color: var(--course-text);
  display: block;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
  padding: 7px 9px;
}

.wb-framework__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.wb-framework__aside {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.wb-framework__terminal {
  background: #05080c;
  border: 1px solid var(--course-line-strong);
  border-radius: 12px;
  overflow: hidden;
}

.wb-framework__terminal-bar {
  align-items: center;
  background: #0b1118;
  border-bottom: 1px solid #1b2b34;
  display: flex;
  gap: 7px;
  height: 32px;
  padding: 0 12px;
}

.wb-framework__terminal-bar span {
  background: #33414a;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

.wb-framework__terminal-bar span:first-child { background: #ff6b72; }
.wb-framework__terminal-bar span:nth-child(2) { background: #f5bd4f; }
.wb-framework__terminal-bar span:nth-child(3) { background: #62c876; }

.wb-framework__terminal-bar small {
  color: #71818c;
  font-family: var(--course-mono);
  font-size: 10px;
  margin-left: auto;
}

.wb-framework__terminal pre {
  background: transparent;
  border: 0;
  color: #a6b4bd;
  font-size: 11px;
  line-height: 1.65;
  margin: 0;
  overflow: auto;
  padding: 14px 16px;
}

.wb-framework__terminal i { color: #00e5e5; font-style: normal; }
.wb-framework__terminal b { color: #f0f7fa; }
.wb-framework__terminal em { color: #d4a9ff; font-style: normal; }

.wb-framework__fts {
  border: 1px solid var(--course-line);
  border-radius: 10px;
  padding: 14px 16px;
}

.wb-framework__fts h3 {
  color: var(--course-text);
  font: 700 13px/1.4 var(--course-sans);
  margin: 0 0 10px;
}

.wb-framework__tools {
  display: grid;
  gap: 6px 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.wb-framework__tools li {
  align-items: baseline;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.wb-framework__tools code {
  color: var(--wb-accent);
  font-family: var(--course-mono);
  font-size: 11px;
  white-space: nowrap;
}

.wb-framework__fts .workbench-hub__text-link {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

.wb-framework__tools span {
  color: var(--course-subtle);
  font-size: 10.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 1120px) {
  .workbench-hub__tabs a { padding-inline: 10px; }
  .workbench-hub__panel--framework { gap: 24px; grid-template-columns: minmax(320px, 1fr) minmax(340px, 1fr); }
  .workbench-hub__panel--framework h2 { font-size: 26px; }
}

@media (min-width: 901px) and (max-height: 800px) {
  .workbench-hub__panel--framework h2 { font-size: 25px; }
  .wb-framework__terminal pre { font-size: 10px; padding: 12px 14px; }
}

@media (max-width: 900px) {
  .workbench-hub__tabs a { flex: 1; min-width: 0; padding: 0 6px; }
  .workbench-hub__panel--framework { align-items: start; grid-template-columns: 1fr; }
  .wb-framework__copy { max-width: none; }
}

@media (max-width: 620px) {
  .workbench-hub__tabs a { font-size: 9.5px; }
  .workbench-hub__panel--framework h2 { font-size: 22px; }
  .wb-framework__tools { grid-template-columns: minmax(0, 1fr); }
}