.pi-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.pi-head h1 { font-size:1.4rem; margin:0 0 4px; }
.pi-head .sub { color:var(--eve-text-dim); font-size:0.85rem; }

/* Tier tabs (P0–P4) */
.pi-tier-tabs { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.pi-tier-tab {
  padding:8px 16px; border:1px solid var(--eve-border); border-radius:4px;
  background:var(--eve-panel); color:var(--eve-text-dim); text-decoration:none;
  font-weight:700; font-size:0.85rem; transition:border-color .15s,color .15s,background .15s;
}
.pi-tier-tab:hover { border-color:var(--eve-accent); color:var(--eve-accent); }
.pi-tier-tab.active { background:var(--eve-accent); color:#000; border-color:var(--eve-accent); }
.pi-tier-tab small { display:block; font-weight:400; font-size:0.68rem; opacity:.8; }

/* Filter bar + hub switch */
.filter-bar {
  background:var(--eve-panel); border:1px solid var(--eve-border); border-radius:4px;
  padding:12px 18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:18px;
}
.market-tabs { display:flex; gap:4px; }
.market-tab {
  padding:6px 12px; border:1px solid var(--eve-border); border-radius:4px;
  background:var(--eve-bg); color:var(--eve-text-dim); text-decoration:none; font-size:0.8rem; font-weight:600;
}
.market-tab:hover { border-color:var(--eve-accent); color:var(--eve-accent); }
.market-tab.active { background:var(--eve-accent); color:#000; border-color:var(--eve-accent); }
.filter-sep { width:1px; height:22px; background:var(--eve-border); }
.filter-stat { font-size:0.82rem; color:var(--eve-text-dim); }

/* Page wrapper: every block shares one width and is centered on the page. */
.pi-page { max-width:1200px; margin:0 auto; }
.pi-table-wrap { overflow-x:auto; border:1px solid var(--eve-border); border-radius:4px; }
.pi-table { width:100%; border-collapse:collapse; font-size:0.85rem; }
.pi-table thead th {
  position:sticky; top:0; background:var(--eve-panel); color:var(--eve-text-dim);
  text-align:left; padding:10px 12px; font-size:0.72rem; text-transform:uppercase;
  letter-spacing:.04em; border-bottom:1px solid var(--eve-border); white-space:nowrap;
}
.pi-table thead th.r { text-align:right; }
.pi-table thead th.sortable { cursor:pointer; user-select:none; }
.pi-table thead th.sortable:hover { color:var(--eve-accent); }
.pi-table thead th .sort-ind { font-size:.7rem; margin-left:3px; color:var(--eve-border); }
.pi-table thead th.sort-asc  .sort-ind::after { content:"▲"; color:var(--eve-accent); }
.pi-table thead th.sort-desc .sort-ind::after { content:"▼"; color:var(--eve-accent); }
.pi-table thead th.sortable:not(.sort-asc):not(.sort-desc) .sort-ind::after { content:"⇅"; }
.pi-table tbody tr { border-bottom:1px solid var(--eve-border); }
.pi-table tbody tr:last-child { border-bottom:none; }
.pi-table tbody tr.producible { cursor:pointer; }
.pi-table tbody tr.producible:hover { background:var(--eve-highlight); }
.pi-table tbody tr.selected { background:rgba(79,195,247,0.08) !important; }
.pi-table td { padding:9px 12px; white-space:nowrap; }
.pi-table td.r { text-align:right; font-family:var(--font-mono); }
.pi-table td.item-name a { color:#fff; text-decoration:none; font-weight:600; }
.pi-table td.item-name a:hover { color:var(--eve-accent); text-decoration:underline; }
.margin-pos { color:var(--eve-green); }
.margin-neg { color:var(--eve-red,#ef5350); }
.sb-buy { color:var(--eve-text-dim); }   /* buy half of the combined Sell / Buy cell */
.b-locked { filter:blur(5px); user-select:none; pointer-events:none; }

/* Column tooltips (same pattern as station_trading / arbitrage tables) */

/* Calculator (drill-down C) */
.pi-calc {
  margin-top:20px; border:1px solid var(--eve-accent); border-radius:6px;
  background:var(--eve-panel); padding:18px 20px;
}
.pi-calc.hidden { display:none; }
/* Заголовок калькулятора. Был h3 при H1 страницы и без h2 между ними —
   пропущенный уровень иерархии; тег сменился на h2, поэтому размер и отступы
   заданы здесь явно, а не унаследованы от браузерного дефолта. */
.pi-calc h2 { margin:0 0 4px; font-size:1.05rem; }
.pi-calc .calc-sub { color:var(--eve-text-dim); font-size:0.8rem; margin-bottom:14px; }
.pi-calc-controls { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:16px; }
.pi-calc-controls label { display:flex; flex-direction:column; gap:4px; font-size:0.75rem; color:var(--eve-text-dim); }
.pi-calc-controls input {
  width:130px; padding:7px 9px; background:var(--eve-bg); border:1px solid var(--eve-border);
  border-radius:4px; color:#fff; font-family:var(--font-mono); font-size:0.9rem;
  /* dark scheme → browser draws the number spinner arrows light, visible on dark bg */
  color-scheme:dark;
}
.pi-calc-controls input:focus { border-color:var(--eve-accent); outline:none; }
/* Always show the up/down spinners (some engines hide them until hover). */
.pi-calc-controls input[type=number]::-webkit-inner-spin-button,
.pi-calc-controls input[type=number]::-webkit-outer-spin-button { opacity:1; }
.calc-break { width:100%; border-collapse:collapse; font-size:0.85rem; }
.calc-break td { padding:6px 10px; border-bottom:1px solid var(--eve-border); }
.calc-break td.r { text-align:right; font-family:var(--font-mono); }
.calc-break tr.calc-input td { color:var(--eve-text-dim); }
.calc-break tr.calc-total td { font-weight:700; border-top:2px solid var(--eve-border); border-bottom:none; }
.calc-break tr.calc-cost td { color:var(--eve-red,#ef5350); }
.calc-break tr.calc-revenue td { color:var(--eve-green); }
.calc-profit { display:flex; gap:24px; flex-wrap:wrap; margin-top:14px; padding-top:14px; border-top:1px solid var(--eve-border); }
.calc-profit .big { font-size:1.5rem; font-weight:800; font-family:var(--font-mono); }
.calc-profit .lbl { font-size:0.72rem; color:var(--eve-text-dim); text-transform:uppercase; letter-spacing:.04em; }
/* Production tree (D) */
.pi-tree { font-size:0.82rem; margin-top:8px; }
.tn { display:flex; align-items:center; gap:8px; padding:3px 0; border-bottom:1px solid rgba(255,255,255,0.04); }
.tn-name { color:#fff; font-weight:600; }
.tn-qty { color:var(--eve-text-dim); font-family:var(--font-mono); font-size:0.76rem; }
.tn-cost { color:var(--eve-text-dim); font-family:var(--font-mono); font-size:0.76rem; margin-left:auto; white-space:nowrap; }
.tn-badge { font-size:0.66rem; font-weight:700; text-transform:uppercase; padding:1px 6px; border-radius:3px; letter-spacing:.03em; flex-shrink:0; }
.tn-build { background:rgba(0,230,118,0.15); color:var(--eve-green); }
.tn-buy { background:rgba(79,195,247,0.15); color:var(--eve-accent); }

/* Иконка и тир в узле дерева.

   Голое «P4 Broadcast Node» текстом читается как ещё одна строка таблицы, а
   дерево должно читаться как схема — за этим его и открывают. Иконка даёт
   якорь глазу, цветной тир показывает, на каком уровне передела ты сейчас. */
.tn-ico { border-radius:3px; background:rgba(255,255,255,0.03); flex-shrink:0; }
.tn-tier {
  flex-shrink:0; min-width:24px; text-align:center; font-weight:700;
  font-size:0.66rem; padding:1px 5px; border-radius:3px;
  color:var(--tn-c); background:rgba(255,255,255,0.04);
  border:1px solid var(--tn-c);
}
/* Цвета тиров идут от сырья к высокотеху — те же, что у остальных акцентов
   сайта, чтобы страница не завела собственную палитру. */
.tn-t0 { --tn-c:#5d7a99; }
.tn-t1 { --tn-c:var(--eve-accent); }
.tn-t2 { --tn-c:var(--eve-green); }
.tn-t3 { --tn-c:var(--eve-gold); }
.tn-t4 { --tn-c:var(--eve-red); }

/* ── Цепочка под строкой таблицы схем ──────────────────────────────────
   Вставляется скриптом как <tr class="pi-chain-row"> сразу за раскрытой
   строкой. Отдельный фон нужен, чтобы дерево не сливалось с таблицей: без
   него узлы читаются как обычные строки, а это ровно то, от чего уходим. */
.pi-chain-row > td { background:rgba(0,0,0,0.28); padding:0 0 10px; white-space:normal; }
.pi-chain-head {
  color:var(--eve-text-dim); font-size:0.74rem; text-transform:uppercase;
  letter-spacing:0.06em; padding:9px 14px 7px;
}
.pi-chain .tn { padding-left:14px; padding-right:14px; }
.pi-table tbody tr.expanded { background:rgba(79,195,247,0.07); }

/* Кнопка разворота цепочки — последняя колонка таблицы схем.

   До неё разворот обозначал тусклый треугольник 9px у имени продукта плюс
   курсор-рука на строке, и пользователи его не находили: строка читалась
   как обычная. Кнопка называет действие словом. Треугольник — через
   ::before, а не символом в разметке: он декоративный и не должен попадать
   в текст страницы (карточка предмета рядом, «▸» уехало бы в выдачу).

   Цвет текста задан явно в ОБОИХ состояниях и на :hover — общий a:hover /
   .btn:hover в base.css уже дважды делали надпись невидимой на кнопках. */
.pi-chain-col { text-align:right; width:1%; }
.pi-chain-btn {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 10px; border:1px solid var(--eve-border); border-radius:4px;
  background:var(--eve-bg); color:var(--eve-accent);
  font:inherit; font-size:0.78rem; font-weight:600; line-height:1.2; cursor:pointer;
  white-space:nowrap;
}
.pi-chain-btn::before { content:"\25B8"; display:inline-block; font-size:0.7rem; transition:transform 0.12s; }
.pi-chain-btn:hover,
.pi-table tbody tr.producible:hover .pi-chain-btn {
  border-color:var(--eve-accent); background:var(--eve-highlight); color:var(--eve-accent);
}
.pi-chain-btn:focus-visible { outline:2px solid var(--eve-accent); outline-offset:1px; }
/* Раскрытое состояние обязано побеждать подсветку строки под курсором:
   без второго селектора наведение на раскрытую строку возвращало кнопке
   контурный вид, и «Скрыть» выглядело как «Показать». */
.pi-table tbody tr.expanded .pi-chain-btn,
.pi-table tbody tr.expanded:hover .pi-chain-btn { background:var(--eve-accent); color:#000; border-color:var(--eve-accent); }
.pi-table tbody tr.expanded .pi-chain-btn::before { transform:rotate(90deg); }

/* Подсказка над таблицей: одно предложение о том, что строки раскрываются.
   Внизу страницы то же сказано подробнее, но туда доходит поисковик, а не
   человек. */
.pi-hint {
  display:flex; align-items:center; gap:7px; margin:0 0 10px;
  color:var(--eve-text-dim); font-size:0.82rem;
}
.pi-hint svg { flex-shrink:0; color:var(--eve-accent); }
.no-data-box { text-align:center; padding:48px 20px; border:1px dashed var(--eve-border); border-radius:6px; }


/* Колонка входов на странице схем.

   Входов в строке три-четыре, и акцентным цветом это превращается в стену
   оранжевого текста — первое, на что пожаловался владелец, увидев страницу.
   Ссылками они остаются (по ним ходят на карточки), но цвет обычный, а
   акцент включается только под курсором. */
.pi-inputs { line-height: 1.6; }

/* Те же правила, что у `.item-link` в base.css (без подчёркивания, акцент под
   курсором) — но цветом приглушённее: имя продукта в строке одно и должно
   быть якорем для глаза, а входов три-четыре. Пунктирного подчёркивания
   здесь нет намеренно: на сайте ссылки в таблицах не подчёркиваются нигде. */
.pi-inputs a { color: var(--eve-text-dim); text-decoration: none; }
.pi-inputs a:hover { color: var(--eve-accent); }

/* Выход цикла рядом с именем продукта: «× 3». Не инлайновым стилем — их и
   так 452 в разметке, и они держат 'unsafe-inline' в style-src. */
.pi-out-qty { font-size: 0.75rem; color: var(--eve-text-dim); white-space: nowrap; }

/* Шапка фильтров таблицы схем. Классами, а не инлайновыми стилями: страница
   новая, и заводить в ней долг по style-src, который проект как раз
   выплачивает, было бы странно. */
.pi-filters { margin-bottom: 16px; }
.pi-tier-row { margin-top: 10px; }
.pi-rates { margin-top: 8px; font-size: 0.8rem; color: var(--eve-text-dim); }

/* Колонка входов — самая широкая в таблице схем: три-четыре имени предметов
   в строке разгоняли её до 460px, и таблица требовала 1401px при доступных
   1150 (замер на живой странице). Фиксируем ширину и разрешаем перенос:
   строки становятся выше примерно на треть, зато горизонтальная прокрутка
   уходит совсем — на 1280px ширины таблица укладывается в 1230.

   `white-space: normal` нужен САМОЙ ячейке, а не только ссылкам. Когда
   каждый вход стал `inline-flex` (ради чипов планет), переносить стало
   можно только внутри входа, а МЕЖДУ входами — нельзя: ячейка наследует
   `nowrap` от `.pi-table td`. Таблица при этом считала колонку по
   минимальной ширине (слова ссылок переносятся), а строка ложилась целиком —
   и до 19.09.2026 входы P4 на 200px лезли поверх соседних колонок.
   Стережёт e2e `test_schematics_inputs_never_overlap_neighbours`. */
.pi-table td.pi-inputs { width: 300px; max-width: 300px; white-space: normal; }
.pi-table td.pi-inputs a { white-space: normal; }

/* ── Страница типов планет ─────────────────────────────────────────────
   Восемь карточек по пять строк: сеткой они читаются лучше, чем одной
   таблицей с повторяющимся именем планеты в первой колонке. */
.planet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  margin-bottom: 26px;
}
.planet-card {
  border: 1px solid var(--eve-border);
  border-radius: 4px;
  background: var(--eve-panel);
  overflow: hidden;
}
.planet-card-h {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-bottom: 1px solid var(--eve-border);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--eve-accent);
}
.planet-res { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
.planet-res td { padding: 6px 12px; border-top: 1px solid rgba(255,255,255,0.04); }
.planet-res tr:first-child td { border-top: none; }
.planet-res td.r { text-align: right; }

/* Заголовок второй половины страницы. Размер и отступы явно — h2 берёт
   браузерный дефолт, а рядом стоят таблицы с собственными отступами. */
.section-h {
  margin: 0 0 10px;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--eve-text);
}

/* Сколько планет из восьми дают этот ресурс. Число само по себе и есть
   ответ на «насколько сырьё редкое», поэтому оно выделено. */
.planet-count { font-family: var(--font-mono); color: var(--eve-text); }
.planet-list { color: var(--eve-text-dim); white-space: normal; }

/* Чипы планет рядом с сырьём — в таблице схем и в дереве цепочки.

   Иконки, а не имена: у Aqueous Liquids планет шесть, и «Barren · Gas · Ice ·
   Oceanic · Storm · Temperate» рядом с каждым входом превращает колонку в
   стену текста. Имена остаются в `title` и целиком — на странице планет. */
.pi-input { display: inline-flex; align-items: center; gap: 5px; }
/* Разделитель живёт ВНУТРИ входа, после него: перенос возможен только между
   входами, и строка никогда не начинается с «·». Слева отступ даёт `gap`
   входа, поэтому свой margin слева — символический. */
.pi-sep { color: var(--eve-text-dim); margin: 0 6px 0 1px; }
.planet-chip { display: inline-flex; gap: 2px; align-items: center; }
.planet-dot, .tn-planet {
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,0.04); flex-shrink: 0;
  opacity: 0.85; transition: opacity 0.12s;
}
.planet-chip:hover .planet-dot { opacity: 1; }
.tn-planets { display: inline-flex; gap: 2px; align-items: center; margin-left: 2px; }

/* Отступ узла дерева по глубине (data-depth ставит pi_chain.js; раньше это
   был инлайновый padding-left, который строгий style-src запрещает).
   Стоит В КОНЦЕ файла намеренно: `.pi-chain .tn` выше задаёт свои 14px с
   той же специфичностью, и побеждает тот, кто позже — как инлайновый
   стиль побеждал раньше. Цепочка PI не глубже четырёх уровней, восемь с
   запасом; глубже скрипт не рисует. */
.tn[data-depth="0"] { padding-left:0; }
.tn[data-depth="1"] { padding-left:20px; }
.tn[data-depth="2"] { padding-left:40px; }
.tn[data-depth="3"] { padding-left:60px; }
.tn[data-depth="4"] { padding-left:80px; }
.tn[data-depth="5"] { padding-left:100px; }
.tn[data-depth="6"] { padding-left:120px; }
.tn[data-depth="7"] { padding-left:140px; }
.tn[data-depth="8"] { padding-left:160px; }