/* ─────────────────────────────────────────────────────────────────────────
   Инструментите под /instrumenti/ (inc/tools.php, tools/*.php, tools.js).
   Зарежда се само на страница с инструмент.

   Нищо ново като език: полетата са от формата за контакт (.bbh-formcard,
   .bbh-f), бутоните са билетът, а резултатът е баджът от събитията,
   черната карта на връв с ръкописните цифри. Атанас, 2026-10-02: новият
   елемент взима езика на сайта, не нов стил.
   ───────────────────────────────────────────────────────────────────── */

/* ── Рамката: полетата вляво, баджът вдясно и върви с превъртането ─── */
.bbh-tool { position: relative; }
.bbh-tool__grid { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; }
@media (min-width: 1000px) {
	.bbh-tool__grid { grid-template-columns: minmax(0, 1.3fr) minmax(340px, .7fr); }
	.bbh-tool__out { position: sticky; top: 118px; }
}
.bbh-tool__form { display: grid; gap: 22px; }
/* На телефон картите на инструментите са с по-тесен ръб: вътре има
   карти в картата и всеки пиксел ширина отива за числата. */
@media (max-width: 559px) { .bbh-tool .bbh-formcard { padding: 24px 18px; } }
.bbh-tool__form .bbh-formcard__head { margin-bottom: 4px; }
.bbh-tmode { display: grid; gap: 22px; }
.bbh-tmode[hidden], .bbh-tool [data-panel][hidden] { display: none; }

/* Полето с число: мярката стои вътре вдясно, помощта е под него. */
/* Полетата в един ред започват от горе: помощта под едното не бута
   кутията на съседното надолу. */
.bbh-tool .bbh-f { align-content: start; }
.bbh-tf { cursor: text; }
.bbh-tf__box { position: relative; display: block; }
.bbh-tool .bbh-formcard input[type="text"] { font-weight: 700; font-variant-numeric: tabular-nums; }
.bbh-tf__box:has(.bbh-tf__unit) input { padding-right: 64px; }
.bbh-tf__unit {
	position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none;
	font-size: 16px; font-weight: 800; color: var(--dim);
}
.bbh-tf__help { display: block; font-size: 14.5px; line-height: 1.45; color: var(--dim); }

/* Да или не: две половини на едно хапче, избраното е тъмнозелено, като
   разделите на „За нас“. */
.bbh-tsw { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 10px; }
.bbh-tsw legend { padding: 0; margin-bottom: 10px; }
.bbh-tsw__opts { display: inline-flex; width: fit-content; padding: 5px; border-radius: 16px; background: var(--cool); }
.bbh-tsw label { position: relative; cursor: pointer; }
.bbh-tsw input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bbh-tsw span { display: block; min-width: 78px; padding: 11px 20px; border-radius: 12px; text-align: center; font-size: 16px; font-weight: 800; color: var(--body); transition: background var(--t), color var(--t); }
.bbh-tsw input:checked + span { background: var(--deep); color: #fff; box-shadow: 0 8px 16px -8px rgba(14, 74, 62, .6); }
.bbh-tsw input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }

/* Какво продаваш: двата начина като големи плочки над формата. */
.bbh-tseg { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 clamp(26px, 3vw, 38px); }
.bbh-tseg button {
	display: inline-flex; align-items: center; gap: 12px; padding: 14px 24px 14px 16px; border-radius: 18px;
	background: #fff; box-shadow: var(--shadow); font-size: 18px; font-weight: 800; color: var(--ink);
	transition: background var(--t), color var(--t), transform var(--t), box-shadow var(--t);
}
.bbh-tseg button svg { width: 38px; height: 38px; padding: 8px; border-radius: 12px; background: var(--mint); color: var(--deep); stroke-width: 1.9; transition: background var(--t), color var(--t); }
.bbh-tseg button:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.bbh-tseg button[aria-selected="true"] { background: var(--deep); color: #fff; }
.bbh-tseg button[aria-selected="true"] svg { background: linear-gradient(145deg, #f7ad5a, var(--orange) 70%); color: var(--ink); }
/* На телефон плочките застават една под друга с еднаква ширина. */
@media (max-width: 559px) {
	.bbh-tseg { flex-direction: column; align-items: center; }
	.bbh-tseg button { width: min(100%, 300px); }
}

/* ── Плъзгачът: оранжевото топче по светлозелена писта ─────────────── */
.bbh-range { display: flex; align-items: center; gap: 14px; }
.bbh-range input[type="range"] {
	-webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 30px; margin: 0; background: none; cursor: pointer;
	--fill: 20%;
}
.bbh-range input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 8px; background: linear-gradient(90deg, var(--orange) var(--fill), #dce7e3 var(--fill)); }
.bbh-range input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: #dce7e3; }
.bbh-range input[type="range"]::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--orange); }
.bbh-range input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%;
	background: #fff; border: 6px solid var(--orange); box-shadow: 0 4px 10px -2px rgba(184, 104, 15, .55);
	transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.bbh-range input[type="range"]::-moz-range-thumb {
	width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 6px solid var(--orange); box-shadow: 0 4px 10px -2px rgba(184, 104, 15, .55);
}
.bbh-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.bbh-range input[type="range"]:focus-visible { outline: 3px solid var(--orange); outline-offset: 4px; border-radius: 8px; }
.bbh-range output {
	flex: none; min-width: 64px; padding: 6px 12px; border-radius: 999px; text-align: center;
	background: var(--orange-soft); color: var(--orange-ink); font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.bbh-range--sm output { min-width: 56px; padding: 4px 10px; font-size: 14.5px; }

/* ── Баджът с резултата ──────────────────────────────────────────────
   Същият бадж като на „Кого ще срещнеш“ (main.css, раздел 14), по-голям,
   защото носи цифрите. Главният ред е най-едрият. */
.bbh-tbadge { max-width: 440px; margin: 30px auto 0; transform: rotate(-1deg); }
.bbh-tbadge:hover { transform: rotate(0) translateY(-3px); }
.bbh-tbadge .bbh-badge__card { gap: 10px; padding: 24px 20px 0; border-radius: 10px; }
.bbh-tbadge .bbh-badge__top img { height: 26px; }
.bbh-tbadge .bbh-badge__event { font-size: 11px; }
.bbh-tbadge .bbh-badge__field { padding: 9px 14px 10px; border-radius: 5px; }
.bbh-tbadge .bbh-badge__field small { font-size: 10.5px; }
.bbh-tbadge .bbh-badge__field b { min-height: 0; font-size: 32px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bbh-tbadge .bbh-badge__field--main b { font-size: clamp(46px, 4.4vw, 60px); line-height: 1.05; color: var(--orange-ink); }
.bbh-tbadge .bbh-badge__field[hidden] { display: none; }
.bbh-tbadge .bbh-badge__strip { height: 12px; margin: 12px -20px 0; }
.bbh-badge__field b.is-new { animation: bbh-tnum .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bbh-tnum { from { transform: translateY(-4px) scale(1.04); opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .bbh-badge__field b.is-new { animation: none; } .bbh-tbadge, .bbh-tbadge:hover { transform: none; } }

/* Изводите под баджа: по едно изречение с числото в него. */
.bbh-tool__notes { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.bbh-tool__notes li, .bbh-tool__note {
	position: relative; margin: 0; padding: 16px 18px 16px 50px; border-radius: 16px; background: #fff; box-shadow: var(--shadow);
	font-size: 16.5px; line-height: 1.55; color: var(--body);
}
.bbh-tool__notes li::before, .bbh-tool__note::before {
	content: ""; position: absolute; left: 18px; top: 19px; width: 18px; height: 18px; border-radius: 6px;
	background: linear-gradient(145deg, #f7ad5a, var(--orange) 70%); transform: rotate(-8deg);
}
.bbh-tool__notes b, .bbh-tool__note b { color: var(--ink); font-weight: 800; }
.bbh-tool__note:empty { display: none; }
.bbh-tool__note { margin-top: 22px; }

/* ── Петте лоста: веригата от числа ──────────────────────────────────
   Всеки лост е бял ред с икона; между тях стои знакът ×, а след
   групите идва сборът със знак =. Последният сбор, печалбата, е
   тъмнозелен: това е числото, заради което е цялата сметка. */
/* Колоната е minmax(0, 1fr): иначе плъзгачът разтяга клетката до своята
   естествена ширина и процентът излиза от картата на телефон. */
.bbh-lv-all { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 20px; border-radius: 18px; background: var(--orange-soft); }
.bbh-lv { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.bbh-lv__lever {
	position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px 18px; align-items: start;
	padding: 20px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
}
.bbh-lv__lever .bbh-box__ico { width: 52px; height: 52px; border-radius: 15px; margin-top: 26px; animation: none; }
.bbh-lv__lever .bbh-box__ico svg { width: 26px; height: 26px; }
.bbh-lv__lever:nth-child(3n+2) .bbh-box__ico { background: linear-gradient(145deg, #f7ad5a, var(--orange) 70%); color: var(--ink); }
.bbh-lv__move { grid-column: 2; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bbh-lv__to { font-size: 15px; color: var(--dim); }
.bbh-lv__to b { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
@media (min-width: 700px) {
	.bbh-lv__lever { grid-template-columns: 52px minmax(0, 1fr) 210px; }
	.bbh-lv__move { grid-column: 3; padding-top: 30px; }
}
/* На телефон иконата сяда в горния десен ъгъл и полето взима цялата
   ширина, за да не се чупи помощта на пет реда. */
@media (max-width: 559px) {
	.bbh-lv__lever { grid-template-columns: minmax(0, 1fr); padding: 18px; }
	.bbh-lv__lever .bbh-box__ico { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; margin: 0; border-radius: 12px; }
	.bbh-lv__lever .bbh-box__ico svg { width: 21px; height: 21px; }
	.bbh-lv__lever .bbh-f__label { display: flex; align-items: center; min-height: 40px; padding-right: 52px; }
	.bbh-lv__move { grid-column: 1; }
}
.bbh-lv__op {
	position: absolute; left: 50%; top: -22px; z-index: 1; transform: translate(-50%, -50%);
	display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
	background: #fff; box-shadow: 0 0 0 1.5px var(--line), 0 4px 10px -4px rgba(21, 32, 29, .2);
	font-size: 20px; font-weight: 800; line-height: 1; color: var(--orange-ink);
}
.bbh-lv__lever .bbh-lv__op { top: -11px; }
.bbh-lv__sum {
	position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
	padding: 16px 20px 16px 22px; border-radius: 18px; background: var(--mint);
	font-size: 18px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.bbh-lv__sum .bbh-lv__op { top: -11px; }
.bbh-lv__sum b { margin-right: auto; font-weight: 800; }
.bbh-lv__now { font-weight: 700; color: var(--body); }
.bbh-lv__arrow { width: 22px; height: 2px; background: currentColor; position: relative; opacity: .45; }
.bbh-lv__arrow::after { content: ""; position: absolute; right: -1px; top: -4px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.bbh-lv__new { font-weight: 800; color: var(--orange-ink); }
.bbh-lv__sum--profit { background: var(--deep); color: #fff; font-size: 20px; }
.bbh-lv__sum--profit .bbh-lv__now { color: rgba(255, 255, 255, .78); }
.bbh-lv__sum--profit .bbh-lv__new { color: #f7b468; }
.bbh-lv__sum--profit .bbh-lv__op { color: var(--orange-ink); }
/* На телефон името на сбора е отгоре, а „сега → после“ на реда под него. */
@media (max-width: 559px) {
	.bbh-lv__sum { gap: 4px 10px; padding: 14px 16px; font-size: 17px; }
	.bbh-lv__sum b { flex: 1 1 100%; }
	.bbh-lv__sum--profit { font-size: 18px; }
}

/* Двата стълба под баджа: печалбата сега и след подобрението. */
.bbh-lv-bars { display: flex; align-items: flex-end; justify-content: center; gap: 22px; height: 150px; margin: 30px auto 0; max-width: 300px; }
.bbh-lv-bars__b { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 8px; }
.bbh-lv-bars__b i { display: block; width: 100%; height: 50%; border-radius: 12px 12px 4px 4px; background: linear-gradient(180deg, #1b6d5a, var(--deep)); transition: height .6s cubic-bezier(.2, .8, .3, 1); }
.bbh-lv-bars__b--new i { background: linear-gradient(180deg, #f7ad5a, var(--orange) 70%); }
.bbh-lv-bars__b small { font-size: 14px; font-weight: 800; color: var(--dim); text-transform: uppercase; letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) { .bbh-lv-bars__b i { transition: none; } }

/* Скритите надписи на полетата: четецът на екрана ги чете, окото не. */
.bbh-tool .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Дата, час и падащ списък: същите като текстовите полета на формата. */
.bbh-tool .bbh-formcard :is(input[type="date"], input[type="time"], select) {
	display: block; width: 100%; height: 56px; margin: 0; padding: 0 16px; border: 1.5px solid #d5dedb; border-radius: 14px; background: #fbfdfc;
	font: 700 17px/1.2 var(--sans); color: var(--ink); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.bbh-tool .bbh-formcard :is(input[type="date"], input[type="time"], select):focus { outline: 0; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(47, 138, 115, .16); }
.bbh-tool .bbh-formcard textarea { display: block; width: 100%; min-height: 84px; padding: 14px 18px; border: 1.5px solid #d5dedb; border-radius: 14px; background: #fbfdfc; font: 500 17px/1.45 var(--sans); color: var(--ink); resize: vertical; }
.bbh-tool .bbh-formcard textarea:focus { outline: 0; border-color: var(--teal); background: #fff; box-shadow: 0 0 0 4px rgba(47, 138, 115, .16); }
.bbh-tool .bbh-formcard input::placeholder, .bbh-tool .bbh-formcard textarea::placeholder { color: #9aa5a1; font-weight: 500; }

/* ── 90-дневният план (второто издание, Атанас, 2026-10-03) ──────────
   Три таба като в цената. „Планът“ са три карти една под друга с номер
   на мястото на иконата: целите в тях са пясъчни блокове, проектите са
   бели карти, стъпките са редове със седмица и текст. „Седмицата“ е
   отчетът с точките на 13-те седмици, „13-те седмици“ е картата. */
.bbh-pl { max-width: 920px; margin-inline: auto; }
.bbh-pl-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(22px, 2.6vw, 30px); }
.bbh-pl-step { display: grid; gap: 20px; }
.bbh-pl-step .bbh-formcard__head { margin-bottom: 0; }
.bbh-pl-step__n {
	flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 17px; transform: rotate(-6deg);
	background: linear-gradient(145deg, #1b6d5a, var(--deep)); color: #fff; font-size: 28px; font-weight: 800;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 12px 22px -10px rgba(14, 74, 62, .6);
}
.bbh-pl-step:nth-child(even) .bbh-pl-step__n { background: linear-gradient(145deg, #f7ad5a, var(--orange) 70%); color: var(--ink); }
.bbh-pl-hint { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.bbh-pl-span { justify-self: start; margin: 0; padding: 12px 18px; border-radius: 14px; background: var(--orange-soft); color: var(--orange-ink); font-size: 16px; font-weight: 800; line-height: 1.35; }

.bbh-pl-fromto { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1fr); align-items: end; gap: 10px; }
.bbh-pl-fromto__arrow { height: 56px; position: relative; }
.bbh-pl-fromto__arrow::before { content: ""; position: absolute; left: 2px; right: 4px; top: 50%; height: 2.5px; background: var(--orange); }
.bbh-pl-fromto__arrow::after { content: ""; position: absolute; right: 3px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-top: 2.5px solid var(--orange); border-right: 2.5px solid var(--orange); transform: rotate(45deg); }

/* По желание: целта за годината е сгъната като пунктиран бутон. */
.bbh-pl-more > summary {
	list-style: none; cursor: pointer; padding: 15px 20px; border-radius: 16px; border: 2px dashed #c9d6d2;
	font-size: 17px; font-weight: 800; color: var(--deep); transition: border-color var(--t), background var(--t);
}
.bbh-pl-more > summary::-webkit-details-marker { display: none; }
.bbh-pl-more > summary::before { content: "+"; display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 12px; border-radius: 8px; background: var(--orange); color: var(--ink); font-weight: 800; }
.bbh-pl-more > summary:hover { border-color: var(--orange); background: var(--orange-soft); }
.bbh-pl-more[open] > summary { margin-bottom: 18px; border-style: solid; border-color: transparent; background: var(--cool); }
.bbh-pl-more[open] > summary::before { content: "×"; }
.bbh-p9-year[open] { display: grid; gap: 16px; }
.bbh-p9-year[open] > summary { margin-bottom: 0; }
.bbh-pl-when { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: end; gap: 12px; }
@media (max-width: 559px) { .bbh-pl-when { grid-template-columns: minmax(0, 1fr); } }

/* На телефон трите таба на плана са в един ред, без иконите: иначе
   застават един под друг и бутат плана под екрана. */
@media (max-width: 559px) {
	.bbh-tseg.bbh-p9-tabs { flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 6px; }
	.bbh-p9-tabs button { flex: 1 1 0; width: auto; justify-content: center; padding: 12px 6px; border-radius: 14px; font-size: 14.5px; line-height: 1.2; }
	.bbh-p9-tabs button svg { display: none; }
}

/* Примерът: лента над табовете с бутон за свой план. */
.bbh-p9-ex { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; max-width: 920px; margin: 0 auto clamp(20px, 2.4vw, 28px); padding: 18px 22px; border-radius: 20px; background: var(--orange-soft); }
.bbh-p9-ex[hidden] { display: none; }
.bbh-p9-ex p { flex: 1 1 420px; margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.55; color: var(--ink); }

/* Числата: последните 90 дни и целта една до друга. */
.bbh-p9-nums { display: grid; gap: 16px; }
@media (min-width: 700px) { .bbh-p9-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bbh-p9-nums fieldset { display: grid; gap: 14px; min-width: 0; margin: 0; padding: 16px 18px 20px; border: 0; border-radius: 18px; background: var(--cool); }
.bbh-p9-nums fieldset + fieldset { background: var(--mint); }
.bbh-p9-nums legend { float: left; width: 100%; margin: 0 0 2px; padding: 0; font-size: 16px; font-weight: 800; color: var(--deep); }
.bbh-p9-calc { margin: 0; padding: 14px 18px; border-radius: 14px; background: var(--orange-soft); font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--orange-ink); }
.bbh-p9-calc:empty { display: none; }

/* Хората по плана: тъмни хапчета, от тях се избира кой движи проекта. */
.bbh-p9-team { display: grid; gap: 10px; }
.bbh-p9-team > .bbh-f__label { margin: 0; }
.bbh-p9-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bbh-p9-chips li { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 4px 5px 4px 16px; border-radius: 999px; background: var(--deep); font-size: 15.5px; font-weight: 700; color: #fff; }
.bbh-p9-chips li > span:last-child { padding-right: 11px; }
.bbh-p9-chips .bbh-p9-x { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .14); }
.bbh-p9-chips .bbh-p9-x::before, .bbh-p9-chips .bbh-p9-x::after { background: #fff; }
.bbh-p9-addname { display: flex; align-items: center; gap: 10px; max-width: 440px; }
.bbh-p9-addname[hidden] { display: none; }
.bbh-tool .bbh-formcard .bbh-p9-addname input[type="text"] { flex: 1; min-width: 0; height: 48px; }

/* Бутоните: кръстчето маха, пунктирът добавя. */
.bbh-p9-x { position: relative; flex: none; width: 36px; height: 36px; border-radius: 11px; background: var(--cool); transition: background var(--t); }
.bbh-p9-x::before, .bbh-p9-x::after {
	content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px;
	border-radius: 2px; background: var(--dim); transform: rotate(45deg);
}
.bbh-p9-x::after { transform: rotate(-45deg); }
.bbh-p9-x:hover { background: #fdecea; }
.bbh-p9-x:hover::before, .bbh-p9-x:hover::after { background: #a3261e; }
.bbh-p9-add {
	display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 20px; border: 2px dashed #c9d6d2; border-radius: 16px;
	font-size: 16.5px; font-weight: 800; color: var(--deep); text-align: left; transition: border-color var(--t), background var(--t);
}
.bbh-p9-add::before { content: "+"; display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--orange); font-weight: 800; color: var(--ink); }
.bbh-p9-add:hover { border-color: var(--orange); background: var(--orange-soft); }
.bbh-p9-add[hidden] { display: none; }
.bbh-p9-add--sm { width: auto; flex: none; padding: 8px 14px 8px 10px; border-radius: 12px; font-size: 15px; }
.bbh-p9-add--sm::before { width: 22px; height: 22px; border-radius: 7px; }

/* Целите: пясъчен блок с числото от-до и точките по пътя. */
.bbh-p9-goals { display: grid; gap: 18px; }
.bbh-p9-goal { display: grid; gap: 16px; padding: clamp(16px, 2.2vw, 24px); border-radius: 20px; background: var(--sand); }
.bbh-p9-goal__head, .bbh-p9-proj__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bbh-p9-goal__head h4 { margin: 0; padding: 5px 14px; border-radius: 10px; background: var(--deep); font-size: 15px; font-weight: 800; color: #fff; }
.bbh-p9-marks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.bbh-p9-marks:empty { display: none; }
.bbh-p9-marks__l { margin-right: 4px; font-size: 14.5px; font-weight: 800; color: var(--dim); }
.bbh-p9-mark { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border-radius: 10px; background: #fff; font-size: 13.5px; font-weight: 700; color: var(--dim); }
.bbh-p9-mark b { font-size: 17px; font-weight: 800; color: var(--orange-ink); font-variant-numeric: tabular-nums; }

/* Проектите: бели карти; стъпките са седмица от-до и какво се прави. */
.bbh-p9-projs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.bbh-p9-proj { display: grid; gap: 14px; padding: clamp(16px, 2vw, 22px); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.bbh-p9-proj__head b { font-size: 15px; font-weight: 800; color: var(--orange-ink); }
@media (min-width: 560px) { .bbh-p9-proj__row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } }
/* Текстът на целите, проектите и стъпките е textarea с един ред, който
   расте с текста (tools.js): на телефон дългата стъпка се пренася, не се реже. */
.bbh-tool .bbh-formcard textarea.bbh-p9-ta { min-height: 56px; padding: 15px 18px; resize: none; overflow: hidden; }
.bbh-tool .bbh-formcard .bbh-p9-steps textarea.bbh-p9-ta { min-height: 48px; padding-block: 11px; }
.bbh-p9-steps__head { display: grid; grid-template-columns: 184px minmax(0, 1fr); gap: 10px; margin-bottom: -6px; font-size: 13.5px; font-weight: 800; color: var(--dim); }
.bbh-p9-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bbh-p9-steps li { display: grid; grid-template-columns: 184px minmax(0, 1fr) 36px; align-items: start; gap: 10px; }
.bbh-p9-wk { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--dim); }
.bbh-tool .bbh-formcard .bbh-p9-wk select { width: 66px; height: 48px; padding: 0 6px 0 12px; }
/* Второто поле е „веднъж“ или „до 13“. */
.bbh-tool .bbh-formcard .bbh-p9-wk label + label select { width: 112px; }
.bbh-p9-steps li > .bbh-p9-x { margin-top: 6px; }
.bbh-p9-proj__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.bbh-p9-strip { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 3px; width: min(100%, 220px); }
.bbh-p9-strip i { height: 10px; border-radius: 3px; background: var(--cool); }
.bbh-p9-strip i.is-on { background: var(--teal); }
@media (max-width: 559px) {
	.bbh-p9-steps__head { display: none; }
	.bbh-p9-steps li { grid-template-columns: minmax(0, 1fr) 36px; grid-template-areas: "cap x" "wk wk" "n n"; align-items: center; padding: 10px; border-radius: 14px; background: var(--cool); }
	/* Надписът над колоната го няма на телефон, затова думата стои в свой
	   ред до бутона за махане: до двете полета не се събираше на 390 px. */
	.bbh-p9-steps li::before { content: "Седмица"; grid-area: cap; font-size: 13.5px; font-weight: 800; color: var(--dim); }
	.bbh-p9-wk { grid-area: wk; }
	.bbh-p9-steps li > .bbh-f { grid-area: n; }
	.bbh-p9-steps li > .bbh-p9-x { grid-area: x; margin-top: 0; background: #fff; }
}
.bbh-p9-cal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 28px; }
.bbh-p9-cal span { flex-basis: 100%; font-size: 15px; line-height: 1.5; color: var(--dim); }
/* Под 380 px подсказките в полетата („Името на фирмата или обекта“,
   „Добави човек“) не се събираха: по-тесен отстъп и 16 px, под които
   телефонът не уголемява страницата. */
@media (max-width: 379px) {
	.bbh-tool--plan90 .bbh-formcard input[type="text"] { padding-inline: 12px; font-size: 16px; }
}

/* Седмицата: 13 точки отгоре, под тях една седмица. */
.bbh-pl-empty { margin: 0; padding: 22px 24px; border-radius: 16px; background: var(--cool); font-size: 17px; font-weight: 600; color: var(--body); }
.bbh-pl-dots { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 699px) {
	.bbh-pl-dots { grid-template-columns: repeat(7, minmax(0, 1fr)); }
	.bbh-pl-dots button small { white-space: nowrap; font-size: 10.5px; }
}
.bbh-pl-dots button {
	position: relative; display: grid; gap: 1px; padding: 8px 2px 7px; border-radius: 12px; background: var(--cool);
	text-align: center; color: var(--ink); transition: transform var(--t), box-shadow var(--t);
}
.bbh-pl-dots button b { font-size: 16px; font-weight: 800; line-height: 1.1; }
.bbh-pl-dots button small { font-size: 11.5px; font-weight: 700; color: var(--dim); font-variant-numeric: tabular-nums; }
.bbh-pl-dots button:hover { transform: translateY(-2px); }
.bbh-pl-dots .is-good { background: var(--teal); color: #fff; }
.bbh-pl-dots .is-good small { color: rgba(255, 255, 255, .85); }
.bbh-pl-dots .is-mid { background: #fbd9b0; }
.bbh-pl-dots .is-low { background: #f6d5d1; }
.bbh-pl-dots .is-check { box-shadow: inset 0 -4px 0 var(--orange); }
.bbh-pl-dots .is-on { box-shadow: 0 0 0 3px var(--deep); }
.bbh-pl-dots .is-on.is-check { box-shadow: 0 0 0 3px var(--deep), inset 0 -4px 0 var(--orange); }
.bbh-pl-dots .is-now::after { content: ""; position: absolute; left: 50%; top: -5px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 2px #fff; }

.bbh-pl-week { display: grid; gap: 18px; margin-top: 20px; padding: clamp(18px, 2.4vw, 26px); border-radius: 20px; background: var(--sand); }
.bbh-pl-week__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: center; }
.bbh-pl-week__head b { display: block; font-size: 22px; font-weight: 800; color: var(--ink); }
@media (max-width: 559px) { .bbh-pl-week__head b { font-size: 19px; } }
.bbh-pl-week__head span { font-size: 15.5px; color: var(--body); }
.bbh-pl-week__head button { position: relative; flex: none; width: 46px; height: 46px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.bbh-pl-week__head button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -3px; border-left: 3px solid var(--ink); border-bottom: 3px solid var(--ink); transform: rotate(45deg); }
.bbh-pl-week__head button[data-go="1"]::before { margin-left: -7px; transform: rotate(-135deg); }
.bbh-pl-week__head button:disabled { opacity: .35; cursor: default; }
.bbh-pl-score { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 16px; background: #fff; font-size: 16.5px; font-weight: 600; color: var(--body); }
.bbh-pl-score__n { flex: none; min-width: 90px; font-size: 40px; font-weight: 800; line-height: 1; color: var(--dim); font-variant-numeric: tabular-nums; }
.bbh-pl-score.is-good .bbh-pl-score__n { color: var(--teal); }
.bbh-pl-score.is-mid .bbh-pl-score__n { color: var(--orange-ink); }
.bbh-pl-score.is-low .bbh-pl-score__n { color: #a3261e; }
@media (max-width: 559px) {
	.bbh-pl-score { gap: 12px; padding: 14px 16px; }
	.bbh-pl-score__n { min-width: 0; font-size: 34px; }
}

/* Стъпките на седмицата: изостаналите отгоре, после по една карта на човек. */
.bbh-p9-late { display: grid; gap: 4px; padding: 14px 18px 6px; border-radius: 16px; background: #fdecea; }
.bbh-p9-late h4 { margin: 0; font-size: 16px; font-weight: 800; color: #a3261e; }
.bbh-p9-due { display: grid; gap: 12px; }
@media (min-width: 760px) { .bbh-p9-due { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } }
.bbh-p9-who { display: grid; align-content: start; gap: 4px; padding: 14px 16px 6px; border-radius: 16px; background: #fff; }
.bbh-p9-who header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bbh-p9-who h4 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.bbh-p9-send { padding: 4px 0; font-size: 14.5px; font-weight: 800; color: var(--teal); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.bbh-p9-send:hover { color: var(--deep); }
.bbh-p9-items { list-style: none; margin: 0; padding: 0; display: grid; }
.bbh-p9-item { position: relative; }
.bbh-p9-item + .bbh-p9-item { border-top: 1px solid var(--line); }
.bbh-p9-item input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.bbh-p9-item label { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; cursor: pointer; }
.bbh-p9-item label::before {
	content: ""; grid-row: span 2; width: 22px; height: 22px; margin-top: 1px; border-radius: 7px; border: 2px solid #b9c8c3; background: #fff;
	transition: background var(--t), border-color var(--t);
}
.bbh-p9-item input:checked + label::before { border-color: var(--teal); background: var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.bbh-p9-item input:focus-visible + label::before { outline: 3px solid var(--orange); outline-offset: 2px; }
.bbh-p9-item label span { font-size: 16.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.bbh-p9-item.is-done label span { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(21, 32, 29, .35); }
.bbh-p9-item small { grid-column: 2; font-size: 13.5px; font-weight: 700; color: var(--dim); }
.bbh-p9-flash { margin: 0; font-size: 15px; font-weight: 700; color: var(--teal); }
.bbh-p9-flash:empty { display: none; }

/* Числата на седмицата: какво е сега, колко по план и лента до целта. */
.bbh-p9-nw { display: grid; gap: 10px; }
.bbh-p9-nw h4, .bbh-p9-check h4 { margin: 0; font-size: 18px; font-weight: 800; color: var(--ink); }
.bbh-p9-nw ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bbh-p9-num {
	display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t in" "bar plan"; align-items: center; gap: 10px 16px;
	padding: 14px 16px; border-radius: 16px; background: #fff;
}
.bbh-p9-num > div { grid-area: t; display: grid; gap: 2px; }
.bbh-p9-num > div b { font-size: 16.5px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.bbh-p9-num > div span { font-size: 14px; font-weight: 600; color: var(--dim); }
.bbh-p9-num > label { grid-area: in; }
.bbh-p9-num > small { grid-area: plan; justify-self: end; font-size: 14px; font-weight: 700; color: var(--dim); }
.bbh-p9-num > .bbh-p9-prog { grid-area: bar; }
@media (max-width: 559px) {
	.bbh-p9-num { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "t t" "in plan" "bar bar"; }
}
.bbh-pl-log__now { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--body); }
/* Тези полета са в .bbh-formcard и main.css им дава цялата ширина: тук
   селекторът е по-тежък, за да останат малки кутии за число. */
.bbh-tool .bbh-formcard .bbh-pl-log__now input[type="text"] {
	width: 96px; height: 46px; padding: 0 8px; border: 1.5px solid #d5dedb; border-radius: 12px; background: #fff;
	font: 800 18px/1 var(--sans); color: var(--ink); text-align: center; font-variant-numeric: tabular-nums;
}
.bbh-tool .bbh-formcard .bbh-pl-log__now input[type="text"]:focus { outline: 0; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(47, 138, 115, .16); }
.bbh-pl-prog { flex: 1 1 160px; height: 10px; border-radius: 10px; background: #fff; overflow: hidden; }
.bbh-pl-prog i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--teal), var(--orange)); transition: width .5s ease; }
.bbh-p9-prog { position: relative; overflow: visible; background: var(--cool); }
.bbh-p9-prog em { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--ink); }

/* Проверката на ден 30, 60 и 90: оранжева рамка, точка с цвят за всяка цел. */
.bbh-p9-check { display: grid; gap: 12px; padding: 18px 20px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 2.5px var(--orange); }
.bbh-p9-check p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--body); }
.bbh-p9-check .bbh-p9-check__lead { font-weight: 700; color: var(--ink); }
.bbh-p9-check ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bbh-p9-check li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.55; color: var(--body); }
.bbh-p9-check li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 13px; height: 13px; border-radius: 50%; background: #b9c8c3; }
.bbh-p9-check li.is-good::before { background: var(--teal); }
.bbh-p9-check li.is-mid::before { background: var(--orange); }
.bbh-p9-check li.is-low::before { background: #c0392b; }
.bbh-p9-check li b { color: var(--ink); }
.bbh-p9-check .bbh-p9-add { width: auto; justify-self: start; }

/* 13-те седмици: стъпките са редове, седмиците колони. */
/* position: relative държи скритите надписи в клетките вътре в кутията,
   иначе те разширяват страницата на телефон. */
.bbh-p9-mapwrap { position: relative; overflow-x: auto; margin: -4px; padding: 4px; }
.bbh-p9-map { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.bbh-p9-map thead th { padding: 4px 0 6px; font-size: 14px; font-weight: 800; line-height: 1.1; color: var(--ink); text-align: center; }
.bbh-p9-map thead th:first-child { width: 36%; text-align: left; font-size: 14.5px; color: var(--dim); }
.bbh-p9-map thead th small { display: block; margin-top: 2px; font-size: 11.5px; font-weight: 700; color: var(--dim); }
.bbh-p9-map thead th.is-now { color: var(--orange-ink); }
.bbh-p9-map tbody th { text-align: left; }
.bbh-p9-map tbody th[scope="row"] { padding: 6px 10px 6px 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.bbh-p9-map__goal th { padding: 18px 0 4px; font-size: 17px; font-weight: 800; color: var(--deep); }
.bbh-p9-map__goal:first-child th { padding-top: 4px; }
.bbh-p9-map__goal span { margin-left: 6px; font-size: 14px; color: var(--orange-ink); }
.bbh-p9-map__proj th { padding: 8px 0 2px; font-size: 15.5px; font-weight: 800; color: var(--ink); }
.bbh-p9-map__proj span { margin-left: 6px; padding: 2px 8px; border-radius: 7px; background: var(--mint); font-size: 13px; color: var(--deep); }
.bbh-p9-map__proj small { display: block; margin-top: 2px; font-size: 13.5px; font-weight: 600; color: var(--dim); }
.bbh-p9-map td { height: 30px; border-radius: 7px; background: var(--cool); text-align: center; font-size: 15px; font-weight: 800; color: #fff; }
/* Когато таблицата се плъзга, колоната със стъпките стои, а имената на
   целите и проектите остават във видимата ширина (--vis идва от tools.js). */
.bbh-p9-swipe { margin: 0; font-size: 14px; font-weight: 700; color: var(--dim); }
.bbh-p9-map thead th:first-child, .bbh-p9-map tbody th[scope="row"] { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 3px 0 0 #fff; }
.bbh-p9-map__lab { position: sticky; left: 0; display: block; max-width: var(--vis, 100%); }
@media (max-width: 699px) {
	.bbh-p9-map { min-width: 620px; }
	.bbh-p9-map thead th:first-child { width: 150px; }
	.bbh-p9-map tbody th[scope="row"] { font-size: 13.5px; }
	.bbh-p9-map__goal span { display: block; margin: 2px 0 0; }
}
.bbh-p9-map td.is-on { background: #bfe0d5; }
.bbh-p9-map td.is-done { background: var(--teal); }
.bbh-p9-map td.is-late { background: #f3b98a; }
.bbh-p9-map td.is-now { box-shadow: inset 0 0 0 2px var(--deep); }
.bbh-p9-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; font-weight: 700; color: var(--dim); }
.bbh-p9-legend li { display: inline-flex; align-items: center; gap: 8px; }
.bbh-p9-legend li::before { content: ""; width: 18px; height: 14px; border-radius: 4px; background: var(--cool); }
.bbh-p9-legend .is-on::before { background: #bfe0d5; }
.bbh-p9-legend .is-done::before { background: var(--teal); }
.bbh-p9-legend .is-late::before { background: #f3b98a; }
.bbh-p9-legend .is-now::before { box-shadow: inset 0 0 0 2px var(--deep); }

.bbh-pl-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 30px; margin-top: clamp(28px, 3vw, 40px); }
.bbh-pl-link {
	min-height: 48px; display: inline-flex; align-items: center; cursor: pointer; padding: 0 2px;
	font-size: var(--btn-fs); font-weight: 800; color: var(--ink);
	text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--orange); text-underline-offset: 7px;
}
.bbh-pl-link:hover { color: var(--orange-ink); }
.bbh-pl-link--dim { color: var(--dim); text-decoration-color: #c9d6d2; }
.bbh-pl-link[hidden] { display: none; }
.bbh-pl-saved { max-width: 640px; margin: 18px auto 0; text-align: center; font-size: 15px; color: var(--dim); }

/* ── Обосновка на поскъпване: всеки разход е бяла карта като лостовете ──
   Когато има място, какво поскъпна, беше и стана са в един ред, а
   документът е под тях (Атанас, 2026-10-05: четирите полета едно под
   друго правеха всеки разход висок колкото екран). Решава ширината на
   списъка, не на екрана: до баджа той е по-тесен, отколкото сам. */
.bbh-ob-head { margin-top: 14px; }
.bbh-ob-costs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; container-type: inline-size; }
.bbh-ob-cost {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 14px;
	padding: 18px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--line);
}
.bbh-ob-cost__name, .bbh-ob-cost__doc { grid-column: 1 / -1; }
@container (min-width: 560px) {
	.bbh-ob-cost { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); }
	.bbh-ob-cost__name { grid-column: auto; }
}
.bbh-ob-actions { margin-top: 24px; }

/* ── Листът за PDF: планът, toolkit-ът и обосновката ─────────────────
   „Свали PDF“ рисува листа в скрития .bbh-pdf-stage и го сваля като файл
   (savePdf в tools.js); същите стилове важат и при печат, ако PDF-ът не
   може да се направи. Атанас, 2026-10-04: „пдф-а да е красив, сега е
   супер грозен“: без решетка от линии, тъмна глава на таблиците, седмиците
   като ленти, областите като полета. */
.bbh-pl-print { display: none; }
.bbh-pl-saved:empty { display: none; }
.bbh-pdf-stage { position: absolute; left: -12000px; top: 0; width: 720px; background: #fff; }
.bbh-pdf-stage--wide { width: 1050px; }
.bbh-pp { font: 400 12px/1.5 var(--sans); color: var(--ink); background: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.bbh-pp *, .bbh-pp *::before, .bbh-pp *::after { box-sizing: border-box; }
.bbh-pp a { color: inherit; text-decoration: none; }
.bbh-pp header { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; padding: 0 0 14px; border-bottom: 3px solid var(--orange); }
.bbh-pp header img { height: 46px; width: auto; }
.bbh-pp h1 { margin: 0; font-size: 25px; line-height: 1.15; font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.bbh-pp header p { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; color: #5a6561; }
.bbh-pp section { margin: 0 0 20px; }
.bbh-pp h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; font-size: 15.5px; line-height: 1.25; font-weight: 800; color: var(--deep); }
.bbh-pp h2::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 3px; background: var(--orange); }
.bbh-pp h3 { margin: 0 0 4px; font-size: 13.5px; line-height: 1.3; font-weight: 800; color: var(--ink); }
.bbh-pp p { margin: 0; }
.bbh-pp ul { margin: 0; padding-left: 16px; }
.bbh-pp li { margin: 3px 0; }
.bbh-pp-blank { display: inline-block; width: 70%; height: 1em; border-bottom: 1px solid #9aa5a1; vertical-align: bottom; }
.bbh-pp table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 11px; }
.bbh-pp th, .bbh-pp td { padding: 7px 6px; border-bottom: 1px solid #e3ebe8; text-align: center; vertical-align: middle; }
.bbh-pp th:first-child, .bbh-pp td:first-child { width: 34%; padding-left: 10px; text-align: left; }
.bbh-pp thead th { border-bottom: 0; background: var(--deep); box-shadow: 1px 0 0 var(--deep); font-weight: 700; color: #fff; }
.bbh-pp thead th:first-child { border-radius: 9px 0 0 9px; }
.bbh-pp thead th:last-child { border-radius: 0 9px 9px 0; }
.bbh-pp th small { display: block; font-size: 9px; font-weight: 500; color: #6a7470; }
.bbh-pp thead th small { color: rgba(255, 255, 255, .72); }
.bbh-pp tbody th { font-weight: 700; text-align: left; }
.bbh-pp-score td { background: var(--sand); font-weight: 800; }
.bbh-pp footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 8px; border-top: 1px solid #e3ebe8; font-size: 10px; color: #6a7470; }
.bbh-pp footer::before { content: "Burgas Business Hub"; font-weight: 700; }
.bbh-pp-box { flex: none; width: 12px; height: 12px; margin-top: 2px; border: 1.5px solid currentColor; border-radius: 3px; }

/* Обосновката: стойностите на светло поле, подписите отдолу. */
.bbh-pp-kv { display: grid; grid-template-columns: 34% 1fr; gap: 0; margin: 0; padding: 4px 14px; border-radius: 12px; background: #f4f8f7; }
.bbh-pp-kv dt, .bbh-pp-kv dd { margin: 0; padding: 7px 0; border-bottom: 1px solid #e3ebe8; }
.bbh-pp-kv dt:last-of-type, .bbh-pp-kv dd:last-of-type { border-bottom: 0; }
.bbh-pp-kv dt { color: #3f4945; }
.bbh-pp-kv dd { font-weight: 700; }
.bbh-pp-costs th:last-child, .bbh-pp-costs td:last-child { width: 28%; padding-left: 8px; text-align: left; }
.bbh-pp-costs td { height: 30px; }
.bbh-pp-sign { display: flex; gap: 28px; margin-top: 44px; }
.bbh-pp-sign span { flex: 1; padding-top: 6px; border-top: 1px solid #9aa5a1; font-size: 10.5px; color: #6a7470; }
.bbh-pp-fine { margin: 22px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--orange-soft); font-size: 10.5px; color: #5a4a37; }
.bbh-pp-lines span { display: block; height: 30px; border-bottom: 1px solid #9aa5a1; }

/* 90-дневният план: легнал лист. Горе числата и целите, после седмиците
   като ленти: светла е планирана седмица, зелена с отметка е свършена. */
.bbh-pp--p90 .bbh-pp-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 18px; align-items: start; }
.bbh-pp--p90 .bbh-pp-nums td, .bbh-pp--p90 .bbh-pp-goals td { font-size: 12px; font-weight: 700; }
.bbh-pp--p90 .bbh-pp-goals td:last-child { color: var(--deep); }
.bbh-pp--p90 .bbh-pp-map th:first-child, .bbh-pp--p90 .bbh-pp-map td:first-child { width: 27%; }
.bbh-pp--p90 .bbh-pp-map th:nth-child(2), .bbh-pp--p90 .bbh-pp-map td:nth-child(2) { width: 7%; }
.bbh-pp--p90 .bbh-pp-map thead th { padding: 6px 2px; font-size: 11.5px; }
.bbh-pp--p90 .bbh-pp-map thead th:first-child { padding-left: 10px; }
.bbh-pp--p90 .bbh-pp-map td { height: 28px; padding: 4px 0; border-bottom-color: #eef3f1; }
.bbh-pp--p90 .bbh-pp-map td:first-child { padding-left: 22px; color: #3f4945; }
.bbh-pp--p90 .bbh-pp-map td i { display: block; height: 14px; margin: 0 2px; border-radius: 7px; font-style: normal; font-size: 10px; font-weight: 800; line-height: 14px; color: #fff; text-align: center; }
.bbh-pp--p90 .bbh-pp-map td.is-on i { background: #cfe7de; }
.bbh-pp--p90 .bbh-pp-map td.is-done i { background: var(--teal); }
.bbh-pp--p90 .bbh-pp-g th { padding: 8px 10px; border-bottom: 0; border-radius: 9px; background: var(--orange-soft); font-size: 12px; font-weight: 800; color: var(--orange-ink); }
.bbh-pp--p90 .bbh-pp-p th { padding-top: 12px; font-size: 12.5px; color: var(--ink); }
.bbh-pp--p90 .bbh-pp-p td:nth-child(2) span { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--mint); font-size: 10.5px; font-weight: 700; color: var(--deep); }
.bbh-pp--p90 .bbh-pp-weeks { margin-bottom: 0; page-break-before: always; break-before: page; }
.bbh-pp--p90 footer { margin-top: 10px; }
.bbh-pp--p90 .bbh-pp-hint { margin: -4px 0 10px; font-size: 11px; color: #6a7470; }
.bbh-pp--p90 .bbh-pp-log th, .bbh-pp--p90 .bbh-pp-log td { height: 30px; padding: 4px 6px; line-height: 1.25; vertical-align: top; }
.bbh-pp--p90 .bbh-pp-log thead th { vertical-align: middle; }
.bbh-pp--p90 .bbh-pp-log th:first-child { width: 9%; }
.bbh-pp--p90 .bbh-pp-log th:last-child { width: 30%; }
.bbh-pp--p90 .bbh-pp-log td b { display: block; font-size: 12px; }
.bbh-pp--p90 .bbh-pp-log td small { display: block; font-size: 9.5px; color: #6a7470; }
.bbh-pp--p90 .bbh-pp-log .bbh-pp-note { font-size: 10.5px; text-align: left; }
.bbh-pp--p90 .bbh-pp-log tr.is-check > * { background: var(--orange-soft); }
.bbh-pp--p90 .bbh-pp-line { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; background: #f4f8f7; font-size: 12px; }

/* Toolkit-ът: първите три неща са номерирани полета със стъпка на тъмно,
   програмите са в две колони, името на програмата е връзка в PDF-а. */
.bbh-pp--tk .bbh-pp-first { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: tkp; }
.bbh-pp--tk .bbh-pp-first > li { margin: 0; padding: 12px 14px 10px; border: 1px solid #e3ebe8; border-radius: 12px; counter-increment: tkp; }
.bbh-pp--tk .bbh-pp-first h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; }
.bbh-pp--tk .bbh-pp-first h3::before { content: counter(tkp); display: inline-block; width: 22px; height: 22px; border-radius: 7px; background: var(--orange); font-size: 12px; line-height: 22px; text-align: center; color: var(--ink); }
.bbh-pp--tk .bbh-pp-do { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 8px 10px; border-radius: 9px; background: var(--deep); font-size: 11.5px; color: #fff; }
.bbh-pp--tk .bbh-pp-do b { color: #f7ad5a; }
.bbh-pp--tk .bbh-pp-progs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.bbh-pp--tk .bbh-pp-progs li { margin: 0; }
.bbh-pp--tk .bbh-pp-progs b { font-size: 12.5px; }
.bbh-pp--tk .bbh-pp-progs small, .bbh-pp--tk .bbh-pp-skills small { display: block; font-size: 10.5px; line-height: 1.4; color: #3f4945; }
.bbh-pp--tk .bbh-pp-url { font-size: 10px; font-weight: 600; color: var(--teal); }
.bbh-pp--tk .bbh-pp-area { margin: 0 0 10px; padding: 10px 14px; border-radius: 12px; background: #f4f8f7; }
.bbh-pp--tk .bbh-pp-area h3 { margin-bottom: 6px; }
.bbh-pp--tk .bbh-pp-skills { display: grid; gap: 8px; padding: 0; list-style: none; }
.bbh-pp--tk .bbh-pp-skills li { margin: 0; padding: 8px 12px; border-radius: 10px; background: var(--orange-soft); }
.bbh-pp--tk .bbh-pp-todo { display: grid; gap: 6px; margin: 0 0 10px; padding: 0; list-style: none; }
.bbh-pp--tk .bbh-pp-todo li { display: flex; gap: 8px; align-items: flex-start; margin: 0; }

/* Печатът, ако PDF-ът не може да се направи: само листът на страницата. */
@media print {
	@page { size: A4 portrait; margin: 12mm; }
	@page p90 { size: A4 landscape; margin: 10mm 10mm 13mm; }
	html.bbh-printing body { background: #fff; }
	html.bbh-printing body > *:not(.bbh-pl-print--on) { display: none !important; }
	html.bbh-printing body > .bbh-pl-print--on { display: block !important; }
	.bbh-pp--p90 { page: p90; }
	.bbh-pp tr, .bbh-pp li, .bbh-pp-area { break-inside: avoid; }
}

/* ── Срокове и документи: сроковете ───────────────────────────────────
   Всеки срок е карта: горе кога (правилото и колко дни остават), под него
   какво. На широк екран картите са по две в ред (Атанас, 2026-10-05:
   шестнайсет срока един под друг бяха дълга тясна колона). Редът е отляво
   надясно, после надолу: най-близкият е горе вляво; до седмица е с
   оранжев ръб. */
.bbh-due__who { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 0 26px; padding: 0; border: 0; }
.bbh-due__who legend { width: 100%; margin-bottom: 12px; text-align: center; font-size: 15px; font-weight: 800; color: var(--ink); }
.bbh-due__who label { position: relative; cursor: pointer; }
.bbh-due__who input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bbh-due__who span {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px 10px 12px; border-radius: 999px; background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--line); font-size: 15.5px; font-weight: 700; color: var(--body); transition: background var(--t), color var(--t);
}
.bbh-due__who span::before { content: ""; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #b9c8c3; background: #fff; transition: background var(--t), border-color var(--t); }
.bbh-due__who input:checked + span { background: var(--deep); color: #fff; box-shadow: none; }
.bbh-due__who input:checked + span::before { border-color: #fff; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315201d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.bbh-due__who input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
.bbh-due__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .bbh-due__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bbh-due__list li {
	display: grid; gap: 12px; align-content: start;
	padding: 22px 24px; border-radius: 18px; background: #fff; box-shadow: var(--shadow);
}
.bbh-due__list li[hidden] { display: none; }
.bbh-due__list li.is-soon { box-shadow: inset 0 0 0 2.5px var(--orange), var(--shadow); }
.bbh-due__when { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bbh-due__when b { font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--deep); }
.bbh-due__when small { font-size: 14.5px; font-weight: 700; color: var(--dim); }
.bbh-due__list li.is-soon .bbh-due__when small { color: var(--orange-ink); }
.bbh-due__what b { display: block; font-size: 18px; font-weight: 800; line-height: 1.35; color: var(--ink); }
.bbh-due__what > span { display: block; margin-top: 4px; font-size: 16px; line-height: 1.55; color: var(--body); }
.bbh-due__src { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.bbh-due__note { max-width: 760px; margin: 22px auto 0; text-align: center; font-size: 15px; color: var(--dim); }
@media (max-width: 599px) {
	.bbh-due__list li { padding: 20px; }
	.bbh-due__who { gap: 8px; }
	.bbh-due__who span { gap: 7px; padding: 8px 13px 8px 10px; font-size: 14.5px; }
	.bbh-due__who span::before { width: 16px; height: 16px; border-radius: 5px; }
}

/* ── Срокове и документи: чеклистите ─────────────────────────────────
   Картите от формата за контакт с отметката от съгласието; свършеният
   списък става светлозелен. */
.bbh-checks { display: grid; gap: clamp(20px, 2.6vw, 30px); }
@media (min-width: 900px) { .bbh-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Нечетен брой карти: последната не стои сама на реда, а заема целия
   и точките ѝ вървят в две колони. */
@media (min-width: 900px) {
	.bbh-check:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.bbh-check:last-child:nth-child(odd) ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; }
}
.bbh-check { padding: 34px 30px 28px; border-radius: 24px; background: #fff; box-shadow: var(--shadow); transition: background var(--t); }
.bbh-check.is-done { background: var(--mint); }
.bbh-check .bbh-h3 { margin: 22px 0 8px; }
.bbh-check > p { margin: 0 0 14px; font-size: 16.5px; line-height: 1.6; }
.bbh-check ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bbh-check label { display: flex; align-items: flex-start; gap: 12px; padding: 9px 6px; border-radius: 10px; cursor: pointer; font-size: 16.5px; line-height: 1.5; color: var(--ink); }
.bbh-check label:hover { background: var(--cool); }
.bbh-check input[type="checkbox"] {
	appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0;
	border: 1.5px solid #b9c8c3; border-radius: 7px; background: #fff; cursor: pointer;
	display: grid; place-items: center; transition: background .2s ease, border-color .2s ease;
}
.bbh-check input[type="checkbox"]::after {
	content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid #fff; border-width: 0 0 2.5px 2.5px;
	transform: rotate(-45deg) scale(0); transition: transform .2s cubic-bezier(.3, 1.6, .5, 1);
}
.bbh-check input[type="checkbox"]:checked { background: var(--teal); border-color: var(--teal); }
.bbh-check input[type="checkbox"]:checked::after { transform: rotate(-45deg) scale(1); }
.bbh-check input[type="checkbox"]:checked + span { color: var(--dim); text-decoration: line-through; text-decoration-color: rgba(21, 32, 29, .35); }
.bbh-check input[type="checkbox"]:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.bbh-check__done { margin: 12px 0 0; font-size: 14.5px; font-weight: 800; color: var(--teal); }
.bbh-check__done:empty { display: none; }

/* ── Срокове и документи: къде да се обърнеш ───────────────────────── */
/* Описанието е веднага под името, а адресът е долу в картата: в мрежата
   картите са еднакво високи и разликата отива над адреса, не над текста. */
.bbh-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 640px) { .bbh-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .bbh-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.bbh-links a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 22px 22px 20px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); transition: transform var(--t), box-shadow var(--t); }
.bbh-links a:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.bbh-links b { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.bbh-links span { font-size: 16px; line-height: 1.55; color: var(--body); }
.bbh-links small { margin-top: auto; padding-top: 6px; font-size: 14px; font-weight: 700; color: var(--teal); }
.bbh-links a:hover small { color: var(--orange-ink); }

/* ── BBH Toolkit: въпросите като хапчета, отговорът като карти ──────
   Хапчетата са като отметките на сроковете: бели с тънък ръб, избраното
   тъмнозелено. Отговорът е под формата на цялата ширина, защото е дълъг:
   на какво да наблегнеш, програмите по области, уменията, стъпките. */
.bbh-tk-form { display: grid; gap: 18px; }
.bbh-tk-form .bbh-pl-hint { margin: 0; }
/* Всеки въпрос е свой ред, отделен с линия: въпросът отгоре, хапчетата
   под него на всяка ширина (Атанас, 2026-10-05: „на десктоп не е добре
   подредено“: въпросите по два един до друг бяха с различна височина; после
   и въпросът вляво с отговорите вдясно не стана, „всичко да се измести
   надолу, не само заглавието“).
   Хапчетата остават кръгли и с ширината на текста: плочките в еднакви
   колони бяха „много квадратни“ и пренасяха текста на два реда. */
.bbh-tk-qs { display: grid; }
/* Между последния отговор и следващия въпрос има повече въздух, отколкото
   вътре в реда, за да се вижда къде почва новият въпрос (Атанас, 2026-10-05). */
.bbh-tk-q { display: grid; gap: 12px; margin: 0; padding: 30px 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.bbh-tk-q:first-child { padding-top: 4px; border-top: 0; }
/* Въпросите на друга сфера и отметките, които не важат за нея, не се виждат. */
.bbh-tk-q[hidden], .bbh-tk-opt[hidden] { display: none; }
/* Плаващата легенда е обикновена клетка в решетката, не надпис в ръба.
   Въпросът е по-едър от отговорите, за да се вижда кой ред какво пита
   (Атанас, 2026-10-05: „губи ми се заглавието на реда“). */
.bbh-tk-q legend { float: left; padding: 0; font-size: 18px; font-weight: 800; line-height: 1.35; }
.bbh-tk-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.bbh-tk-opt { position: relative; cursor: pointer; }
.bbh-tk-opt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bbh-tk-opt span {
	display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--line); font-size: 15.5px; font-weight: 700; line-height: 1.3; color: var(--body);
	transition: background var(--t), color var(--t);
}
.bbh-tk-opt:hover span { background: var(--cool); }
.bbh-tk-opt--checkbox span { padding-left: 12px; }
.bbh-tk-opt--checkbox span::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid #b9c8c3; background: #fff; transition: background var(--t), border-color var(--t); }
.bbh-tk-opt input:checked + span { background: var(--deep); color: #fff; box-shadow: none; }
.bbh-tk-opt--checkbox input:checked + span::before { border-color: #fff; background: var(--orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2315201d' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 13px no-repeat; }
.bbh-tk-opt input:focus-visible + span { outline: 3px solid var(--orange); outline-offset: 2px; }
/* На телефон хапчетата са по две на ред, а дългият текст се пренася:
   по едно на ред формата ставаше висока колкото три екрана. */
@media (max-width: 559px) {
	.bbh-tk-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
	.bbh-tk-opt span { display: flex; height: 100%; padding: 10px 12px; border-radius: 14px; font-size: 15px; }
	.bbh-tk-opt--checkbox span { padding-left: 10px; }
}

/* Отговорът (Атанас, 2026-10-03: разпределението да не е стена от карти):
   лента с името и целта; трите неща за начало като редове, в които областта,
   програмите и стъпката стоят една до друга; останалите области и умения в
   еднакви карти; стъпките за после до грешките на нивото. Нищо не се повтаря. */
.bbh-tk-res { display: grid; gap: clamp(36px, 4vw, 54px); margin-top: clamp(28px, 3vw, 40px); }
.bbh-tk-res:empty { display: none; }
.bbh-tk-empty { margin: 0; text-align: center; font-size: 18px; font-weight: 700; color: var(--body); }
/* Заглавията на блоковете са най-едрото в отговора, за да се вижда къде
   започва всеки (Атанас, 2026-10-04: „всичко е с еднаква тежест“). */
.bbh-tk-block > .bbh-h3 { margin: 0 0 22px; font-size: clamp(26px, 2.8vw, 34px); font-weight: 800; line-height: 1.2; }
.bbh-tk-res a { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: rgba(234, 138, 35, .55); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bbh-tk-res a:hover { color: var(--orange-ink); }

/* Лентата: за кого е toolkit-ът и на какво да наблегне. */
.bbh-tk-head {
	display: grid; gap: 10px; padding: clamp(24px, 3vw, 34px) clamp(22px, 3.4vw, 40px); border-radius: 24px;
	background: linear-gradient(145deg, #1b6d5a 0%, var(--deep) 70%); color: rgba(255, 255, 255, .88); box-shadow: var(--shadow-up);
}
.bbh-tk-head h3 { margin: 0; font-size: clamp(24px, 2.6vw, 32px); font-weight: 800; line-height: 1.2; color: #fff; text-wrap: balance; }
.bbh-tk-head p { max-width: 72ch; margin: 0; font-size: 17px; line-height: 1.6; }

/* С какво да започнеш: горе областта и стъпката една до друга, отдолу
   програмите по две в ред. Редовете на двете съседни програми (име, какво
   прави, етикети) са на една височина (Атанас, 2026-10-03: „по-подредено в
   колони, еднаква височина на съседни елементи“). */
.bbh-tk-first { list-style: none; margin: 0; padding: 14px 0 0; display: grid; gap: 34px; }
.bbh-tk-row { position: relative; display: grid; gap: 22px; padding: 32px 28px 22px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.bbh-tk-row__top { display: grid; gap: 18px 32px; }
/* Две равни колони, като програмите отдолу: стъпката стои над дясната. */
@media (min-width: 900px) { .bbh-tk-row__top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; } }
.bbh-tk-num {
	position: absolute; left: 24px; top: -16px; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 12px;
	background: linear-gradient(145deg, #f7ad5a, var(--orange) 70%); font-size: 17px; font-weight: 800; color: var(--ink);
	transform: rotate(-6deg); box-shadow: 0 8px 16px -8px rgba(184, 104, 15, .7);
}
.bbh-tk-row__what { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-content: start; }
.bbh-tk-row__what .bbh-tk-ico { grid-row: span 2; }
.bbh-tk-row__what h4 { margin: 2px 0 0; font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.bbh-tk-row__what p { grid-column: 2; margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }
/* Стъпката е действието в реда, затова е най-тъмното в картата: бледият
   фон се губеше върху бялото (Атанас, 2026-10-04: „в дясно не се вижда“). */
.bbh-tk-row__step { display: grid; gap: 8px; align-content: start; padding: 20px 22px; border-radius: 18px; background: linear-gradient(145deg, #1b6d5a 0%, var(--deep) 70%); box-shadow: var(--shadow); }
.bbh-tk-row__step b { font-size: 13.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #f7ad5a; }
.bbh-tk-row__step p { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.55; color: #fff; }
.bbh-tk-row > .bbh-tk-progs { border-top: 1px solid var(--line); }
@media (min-width: 700px) {
	.bbh-tk-row > .bbh-tk-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
	.bbh-tk-row > .bbh-tk-progs li { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 0; }
	.bbh-tk-row > .bbh-tk-progs li:nth-child(2) { border-top: 0; }
	.bbh-tk-row > .bbh-tk-progs li > * + * { margin-top: 6px; }
	.bbh-tk-row > .bbh-tk-progs .bbh-tk-foot { align-self: end; }
}

/* Програмата: име, какво прави, етикети и връзка към помощта. */
.bbh-tk-ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(145deg, #1b6d5a 0%, var(--deep) 70%); color: #fff; }
.bbh-tk-ico--skill, .bbh-tk-cat:nth-child(even) .bbh-tk-ico { background: linear-gradient(145deg, #f7ad5a, var(--orange) 70%); color: var(--ink); }
.bbh-tk-ico svg { width: 25px; height: 25px; stroke-width: 1.9; }
.bbh-tk-progs { list-style: none; margin: 0; padding: 0; display: grid; }
.bbh-tk-progs li { display: flex; flex-direction: column; gap: 6px; padding: 16px 0; border-top: 1px solid var(--line); }
.bbh-tk-progs li:first-child { border-top: 0; }
.bbh-tk-progs h5 { margin: 0; font-size: 17.5px; line-height: 1.35; }
.bbh-tk-progs p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.bbh-tk-progs .bbh-tk-meta { font-size: 13.5px; font-weight: 700; color: var(--dim); }
.bbh-tk-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: auto; }
.bbh-tk-foot:empty { display: none; }
.bbh-tk-tag { font-size: 13.5px; font-weight: 700; color: var(--dim); }
.bbh-tk-tag + .bbh-tk-tag::before { content: "·"; margin-right: 8px; color: var(--dim); }
.bbh-tk-tag--free { padding: 3px 9px; border-radius: 8px; background: var(--mint); font-weight: 800; color: var(--deep); }
.bbh-tk-tag--free + .bbh-tk-tag::before { content: none; }
.bbh-tk-res .bbh-tk-learn a { font-size: 14.5px; color: var(--teal); }
.bbh-tk-learn small { margin-left: 4px; font-size: 13.5px; font-weight: 700; color: var(--dim); }

/* Още програми: по една карта за област, две на ред. Двете карти в реда
   делят редовете си: заглавието и всяка програма са на една височина, а
   етикетите стоят долу в клетката. */
.bbh-tk-cats { display: grid; gap: 20px; }
.bbh-tk-cat { padding: 26px 24px 10px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.bbh-tk-cat header { display: flex; gap: 16px; align-items: flex-start; padding-bottom: 8px; }
.bbh-tk-cat h4 { margin: 2px 0 4px; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.bbh-tk-cat header p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }
@media (min-width: 900px) {
	.bbh-tk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
	.bbh-tk-cat { display: grid; grid-template-rows: subgrid; margin-bottom: 20px; }
	.bbh-tk-cat > .bbh-tk-progs { grid-template-rows: subgrid; }
	.bbh-tk-cats--k1 .bbh-tk-cat { grid-row: span 2; } .bbh-tk-cats--k1 .bbh-tk-cat > .bbh-tk-progs { grid-row: span 1; }
	.bbh-tk-cats--k2 .bbh-tk-cat { grid-row: span 3; } .bbh-tk-cats--k2 .bbh-tk-cat > .bbh-tk-progs { grid-row: span 2; }
	.bbh-tk-cats--k3 .bbh-tk-cat { grid-row: span 4; } .bbh-tk-cats--k3 .bbh-tk-cat > .bbh-tk-progs { grid-row: span 3; }
	.bbh-tk-cats--k4 .bbh-tk-cat { grid-row: span 5; } .bbh-tk-cats--k4 .bbh-tk-cat > .bbh-tk-progs { grid-row: span 4; }
	/* Сама на последния ред: цялата ширина, програмите по две. */
	.bbh-tk-cat:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.bbh-tk-cat:last-child:nth-child(odd) > .bbh-tk-progs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 36px; }
	.bbh-tk-cat:last-child:nth-child(odd) > .bbh-tk-progs li:nth-child(2) { border-top: 0; }
}

/* Още умения: по една колона за умение. Заглавията, ползите и източниците
   на съседните умения започват на една височина. */
.bbh-tk-skills { display: grid; gap: 20px; }
.bbh-tk-skill { padding: 24px 24px 20px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.bbh-tk-skill header { display: flex; gap: 14px; align-items: center; }
.bbh-tk-skill h4 { margin: 0; font-size: 19px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.bbh-tk-skill > p { margin: 6px 0 0; font-size: 16px; line-height: 1.55; color: var(--body); }
/* Без ползата (казана вече от област) източниците тръгват под заглавието. */
.bbh-tk-skill > p:empty { display: none; }
.bbh-tk-skill > p:empty + ul { grid-row: span 2; }
.bbh-tk-skill ul { list-style: none; margin: 14px 0 0; padding: 14px 0 0; display: grid; gap: 10px; align-content: start; border-top: 1px solid var(--line); }
.bbh-tk-skill li { display: grid; gap: 2px; font-size: 16px; line-height: 1.45; }
.bbh-tk-skill small { font-size: 13.5px; font-weight: 700; color: var(--dim); }
@media (min-width: 1000px) {
	.bbh-tk-skills { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-rows: repeat(3, auto); gap: 0 20px; }
	.bbh-tk-skill { display: grid; grid-row: span 3; grid-template-rows: subgrid; }
}

/* След първите стъпки: карти в един ред, всяка със своя икона. Грешките
   са топли, за да не изглеждат като още една задача. */
.bbh-tk-next { display: grid; gap: 18px; }
@media (min-width: 900px) { .bbh-tk-next { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.bbh-tk-next__card { display: grid; align-content: start; gap: 10px; padding: 26px 26px 24px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.bbh-tk-next__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; background: linear-gradient(145deg, #1b6d5a 0%, var(--deep) 70%); color: #fff; }
.bbh-tk-next__ico svg { width: 24px; height: 24px; }
.bbh-tk-next__card h4 { margin: 4px 0 0; font-size: 20px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.bbh-tk-next__card p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--body); }
.bbh-tk-next__card--avoid { background: var(--orange-soft); box-shadow: none; }
.bbh-tk-next__card--avoid .bbh-tk-next__ico { background: linear-gradient(145deg, #f7ad5a, var(--orange) 70%); color: var(--ink); }
.bbh-tk-next__card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bbh-tk-next__card li { position: relative; padding-left: 20px; font-size: 16px; line-height: 1.55; color: var(--body); }
.bbh-tk-next__card li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }

/* Всеки блок на отговора има свой вид, за да се вижда къде свършва един и
   започва друг (Атанас, 2026-10-04: „всичко е с еднаква тежест, еднакви
   елементи и цветове и се слива“). Началото са белите карти с тъмната
   стъпка; уменията са топъл лист; още програмите са един бял лист със
   списък по области, без карта за всяка; после са номерираните стъпки. */
.bbh-tk-block--skills, .bbh-tk-block--more { padding: clamp(24px, 3.2vw, 44px); border-radius: var(--sheet-r); }
.bbh-tk-block--skills { background: var(--orange-soft); }
.bbh-tk-block--skills .bbh-tk-skill { box-shadow: none; }
.bbh-tk-block--more { background: #fff; box-shadow: var(--shadow); }
/* Всяка област е свое светло поле: границата между две области се вижда
   (Атанас, 2026-10-04: „не се разбира къде свършва една опция“). */
.bbh-tk-block--more .bbh-tk-cat { padding: 24px 24px 6px; border-radius: 20px; background: var(--cool); box-shadow: none; }
.bbh-tk-block--more .bbh-tk-cat header { padding-bottom: 12px; border-bottom: 2px solid #fff; }
.bbh-tk-block--more .bbh-tk-progs li { border-top-color: rgba(21, 32, 29, .08); }
.bbh-tk-block--more .bbh-tk-cats { gap: 0 20px; }
.bbh-tk-block--more .bbh-tk-ico { width: 40px; height: 40px; border-radius: 12px; }
.bbh-tk-block--more .bbh-tk-ico svg { width: 21px; height: 21px; }
.bbh-tk-block--more .bbh-tk-cat h4 { font-size: 18px; }
.bbh-tk-block--more .bbh-tk-progs h5 { font-size: 16.5px; }
.bbh-tk-block--more .bbh-tk-progs p { font-size: 15px; }
@media (min-width: 900px) { .bbh-tk-block--more .bbh-tk-cat { margin-bottom: 20px; } }
.bbh-tk-block--more .bbh-tk-cat + .bbh-tk-cat { margin-top: 0; }
@media (max-width: 899px) { .bbh-tk-block--more .bbh-tk-cats { gap: 16px; } }

/* Телефон: по-тесни полета. */
@media (max-width: 559px) {
	.bbh-tk-row { padding: 30px 18px 18px; }
	.bbh-tk-num { left: 16px; }
	.bbh-tk-cat, .bbh-tk-skill { padding: 22px 18px 16px; }
}