/* testbesplatno.ru — знаки разделов на обложках. После site.css.
   Разметка: <span class="tb-cover"><span class="tb-mark" data-geo="ladder" data-frame="1"><i></i>…7 шт…</span></span>
   Геометрия задаётся в единицах контейнера (cqh), поэтому один и тот же знак
   работает на обложке 76 px и 340 px без правок. Требуется container-type:size у .tb-cover. */
.tb-mark{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  --u:11.5cqh;              /* толщина полосы = 0,115 высоты обложки */
  --g:calc(var(--u)*.6);     /* зазор */
  --step:calc(var(--u) + var(--g));
  opacity:.15}
.tb-mark i{position:absolute;display:block;background:#fff;width:var(--u);height:100cqh}
.tb-mark[data-geo="ladder"]{opacity:.16}
.tb-mark[data-geo="fan"]{opacity:.17}
.tb-mark[data-geo="shear"]{opacity:.14}

/* точка входа знака: 1 — снизу слева, 2 — снизу справа, 3 — сверху справа, 4 — сверху слева */
.tb-mark{--x:left;--y:bottom}
.tb-mark[data-frame="2"],.tb-mark[data-frame="3"]{--x:right}
.tb-mark[data-frame="3"],.tb-mark[data-frame="4"]{--y:top}

/* ЛЕСТНИЦА — «разместить себя на шкале» (Личность) */
.tb-mark[data-geo="ladder"] i{inset-block-end:auto}
.tb-mark[data-geo="ladder"]{--o:0}
.tb-mark[data-geo="ladder"] i{bottom:-20cqh}
.tb-mark[data-geo="ladder"][data-frame="3"] i,
.tb-mark[data-geo="ladder"][data-frame="4"] i{bottom:auto;top:-20cqh}
.tb-mark[data-geo="ladder"] i:nth-child(1){inset-inline-start:calc(var(--step)*0 - var(--u)*.7);height:42cqh}
.tb-mark[data-geo="ladder"] i:nth-child(2){inset-inline-start:calc(var(--step)*1 - var(--u)*.7);height:70cqh}
.tb-mark[data-geo="ladder"] i:nth-child(3){inset-inline-start:calc(var(--step)*2 - var(--u)*.7);height:54cqh}
.tb-mark[data-geo="ladder"] i:nth-child(4){inset-inline-start:calc(var(--step)*3 - var(--u)*.7);height:98cqh}
.tb-mark[data-geo="ladder"] i:nth-child(5){inset-inline-start:calc(var(--step)*4 - var(--u)*.7);height:76cqh}
.tb-mark[data-geo="ladder"] i:nth-child(6){inset-inline-start:calc(var(--step)*5 - var(--u)*.7);height:122cqh}
.tb-mark[data-geo="ladder"] i:nth-child(7){inset-inline-start:calc(var(--step)*6 - var(--u)*.7);height:60cqh}
.tb-mark[data-geo="ladder"][data-frame="2"] i,
.tb-mark[data-geo="ladder"][data-frame="3"] i{inset-inline-start:auto}
.tb-mark[data-geo="ladder"][data-frame="2"] i:nth-child(1),.tb-mark[data-geo="ladder"][data-frame="3"] i:nth-child(1){inset-inline-end:calc(var(--step)*0 - var(--u)*.7)}
.tb-mark[data-geo="ladder"][data-frame="2"] i:nth-child(2),.tb-mark[data-geo="ladder"][data-frame="3"] i:nth-child(2){inset-inline-end:calc(var(--step)*1 - var(--u)*.7)}
.tb-mark[data-geo="ladder"][data-frame="2"] i:nth-child(3),.tb-mark[data-geo="ladder"][data-frame="3"] i:nth-child(3){inset-inline-end:calc(var(--step)*2 - var(--u)*.7)}
.tb-mark[data-geo="ladder"][data-frame="2"] i:nth-child(4),.tb-mark[data-geo="ladder"][data-frame="3"] i:nth-child(4){inset-inline-end:calc(var(--step)*3 - var(--u)*.7)}
.tb-mark[data-geo="ladder"][data-frame="2"] i:nth-child(5),.tb-mark[data-geo="ladder"][data-frame="3"] i:nth-child(5){inset-inline-end:calc(var(--step)*4 - var(--u)*.7)}
.tb-mark[data-geo="ladder"][data-frame="2"] i:nth-child(6),.tb-mark[data-geo="ladder"][data-frame="3"] i:nth-child(6){inset-inline-end:calc(var(--step)*5 - var(--u)*.7)}
.tb-mark[data-geo="ladder"][data-frame="2"] i:nth-child(7),.tb-mark[data-geo="ladder"][data-frame="3"] i:nth-child(7){inset-inline-end:calc(var(--step)*6 - var(--u)*.7)}

/* ПЕРЕСЕЧЕНИЕ — «два человека и то, что между ними» (Отношения):
   полосы 1–4 вертикальные, 5–7 горизонтальные, накладываются в одном углу */
.tb-mark[data-geo="cross"] i:nth-child(-n+4){height:95cqh}
.tb-mark[data-geo="cross"] i:nth-child(1){inset-inline-start:calc(12cqh + var(--step)*0);top:-34cqh}
.tb-mark[data-geo="cross"] i:nth-child(2){inset-inline-start:calc(12cqh + var(--step)*1);top:-34cqh}
.tb-mark[data-geo="cross"] i:nth-child(3){inset-inline-start:calc(12cqh + var(--step)*2);top:-34cqh}
.tb-mark[data-geo="cross"] i:nth-child(4){inset-inline-start:calc(12cqh + var(--step)*3);top:-34cqh}
.tb-mark[data-geo="cross"] i:nth-child(n+5){width:115cqh;height:var(--u);inset-inline-start:-30cqh}
.tb-mark[data-geo="cross"] i:nth-child(5){top:calc(32cqh + var(--step)*0)}
.tb-mark[data-geo="cross"] i:nth-child(6){top:calc(32cqh + var(--step)*1)}
.tb-mark[data-geo="cross"] i:nth-child(7){top:calc(32cqh + var(--step)*2)}
.tb-mark[data-geo="cross"][data-frame="2"] i,.tb-mark[data-geo="cross"][data-frame="3"] i{transform:scaleX(-1);transform-origin:center}
.tb-mark[data-geo="cross"][data-frame="3"] i,.tb-mark[data-geo="cross"][data-frame="4"] i{transform:scale(-1,-1)}

/* СДВИГ — «ход мысли, вывод из посылки» (Интеллект): равные полосы ступенями */
.tb-mark[data-geo="shear"] i{height:150cqh}
.tb-mark[data-geo="shear"] i:nth-child(1){inset-inline-start:calc(var(--step)*0 - var(--u));top:calc(-55cqh + var(--u)*0)}
.tb-mark[data-geo="shear"] i:nth-child(2){inset-inline-start:calc(var(--step)*1 - var(--u));top:calc(-55cqh + var(--u)*.9)}
.tb-mark[data-geo="shear"] i:nth-child(3){inset-inline-start:calc(var(--step)*2 - var(--u));top:calc(-55cqh + var(--u)*1.8)}
.tb-mark[data-geo="shear"] i:nth-child(4){inset-inline-start:calc(var(--step)*3 - var(--u));top:calc(-55cqh + var(--u)*2.7)}
.tb-mark[data-geo="shear"] i:nth-child(5){inset-inline-start:calc(var(--step)*4 - var(--u));top:calc(-55cqh + var(--u)*3.6)}
.tb-mark[data-geo="shear"] i:nth-child(6){inset-inline-start:calc(var(--step)*5 - var(--u));top:calc(-55cqh + var(--u)*4.5)}
.tb-mark[data-geo="shear"] i:nth-child(7){display:none}
.tb-mark[data-geo="shear"][data-frame="2"],.tb-mark[data-geo="shear"][data-frame="3"]{transform:scaleX(-1)}
.tb-mark[data-geo="shear"][data-frame="3"],.tb-mark[data-geo="shear"][data-frame="4"]{transform:scale(-1,-1)}

/* ВЕЕР — «разброс, игра» (Развлечения): вращение вокруг общей точки */
.tb-mark[data-geo="fan"] i{transform-origin:bottom center;inset-inline-start:18cqh;bottom:-10cqh;height:85cqh}
.tb-mark[data-geo="fan"] i:nth-child(1){transform:rotate(-54deg);height:75cqh}
.tb-mark[data-geo="fan"] i:nth-child(2){transform:rotate(-30deg);height:97cqh}
.tb-mark[data-geo="fan"] i:nth-child(3){transform:rotate(-6deg);height:119cqh}
.tb-mark[data-geo="fan"] i:nth-child(4){transform:rotate(18deg);height:75cqh}
.tb-mark[data-geo="fan"] i:nth-child(5){transform:rotate(42deg);height:97cqh}
.tb-mark[data-geo="fan"] i:nth-child(n+6){display:none}
.tb-mark[data-geo="fan"][data-frame="2"]{transform:scaleX(-1)}
.tb-mark[data-geo="fan"][data-frame="3"]{transform:scale(-1,-1)}
.tb-mark[data-geo="fan"][data-frame="4"]{transform:scaleY(-1)}

/* РАМКИ — «замер вокруг замера» (Здоровье): контур в контуре из box-shadow */
.tb-mark[data-geo="frames"] i:first-child{width:100cqh;height:100cqh;background:none;top:0;inset-inline-start:-42cqh;
  box-shadow:0 0 0 var(--u) #fff, 0 0 0 calc(var(--u)*2.4) transparent, 0 0 0 calc(var(--u)*3.4) #fff, 0 0 0 calc(var(--u)*4.8) transparent, 0 0 0 calc(var(--u)*5.8) #fff}
.tb-mark[data-geo="frames"] i:nth-child(n+2){display:none}
.tb-mark[data-geo="frames"][data-frame="2"] i:first-child,.tb-mark[data-geo="frames"][data-frame="3"] i:first-child{inset-inline-start:auto;inset-inline-end:-42cqh}
.tb-mark[data-geo="frames"][data-frame="3"] i:first-child{top:-30cqh}
.tb-mark[data-geo="frames"][data-frame="4"] i:first-child{top:30cqh}

/* ВОЛНА — «состояние, которое меняется» (Психика): смещение по гребню */
.tb-mark[data-geo="wave"] i{height:92cqh}
.tb-mark[data-geo="wave"] i:nth-child(1){inset-inline-start:calc(var(--step)*0 - var(--u));top:-30cqh}
.tb-mark[data-geo="wave"] i:nth-child(2){inset-inline-start:calc(var(--step)*1 - var(--u));top:-8cqh}
.tb-mark[data-geo="wave"] i:nth-child(3){inset-inline-start:calc(var(--step)*2 - var(--u));top:3cqh}
.tb-mark[data-geo="wave"] i:nth-child(4){inset-inline-start:calc(var(--step)*3 - var(--u));top:-6cqh}
.tb-mark[data-geo="wave"] i:nth-child(5){inset-inline-start:calc(var(--step)*4 - var(--u));top:-28cqh}
.tb-mark[data-geo="wave"] i:nth-child(6){inset-inline-start:calc(var(--step)*5 - var(--u));top:-52cqh}
.tb-mark[data-geo="wave"] i:nth-child(7){inset-inline-start:calc(var(--step)*6 - var(--u));top:-58cqh}
.tb-mark[data-geo="wave"][data-frame="2"]{transform:scaleX(-1)}
.tb-mark[data-geo="wave"][data-frame="3"]{transform:scale(-1,-1)}
.tb-mark[data-geo="wave"][data-frame="4"]{transform:scaleY(-1)}

/* мелкий знак 28 px — меню, крошки, списки: четыре полосы, цвет тона, без кадрирования */
.tb-mark--sm{position:static;width:28px;height:28px;opacity:1;display:flex;align-items:flex-end;justify-content:center;gap:3px;overflow:visible;--u:4px}
.tb-mark--sm i{position:static;width:4px;background:var(--tb-tone)}
.tb-mark--sm i:nth-child(1){height:10px}
.tb-mark--sm i:nth-child(2){height:22px}
.tb-mark--sm i:nth-child(3){height:15px}
.tb-mark--sm i:nth-child(4){height:19px}
.tb-mark--sm i:nth-child(n+5){display:none}