@font-face {
  font-family: IBM Plex Sans;
  src: url("../fonts/IBMPlexSans-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: IBM Plex Sans;
  src: url("../fonts/IBMPlexSans-Bold.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
}

*::-webkit-scrollbar {
  -webkit-appearance: none;
  /*display: none;*/
}

html {
  --min-ident: .2rem;

  --ident: .4rem;
  /*--different-ident: calc(var(--ident) * 2);*/
  --dif-ident: .6rem;
  /*--double-ident: calc(var(--ident) * 2);*/
  --double-ident: .8rem;
  /*--triple-ident: calc(var(--ident) * 3);*/
  --triple-ident: 1.2rem;

  --header-ident: .2rem;
  /*--double-header-ident: calc(var(--header-ident) * 2);*/
  --double-header-ident: .4rem;

  --header-height: 2.4rem;
  /*--layout-header-button-size: calc(var(--header-height) - var(--header-ident) * 2);*/

  /*--header-height: calc(1.1rem + var(--ident) * 2);*/
  /*--header-height: 2.2rem;*/
  /*--layout-ref-app-shift: calc(var(--header-height) * .9);*/
  /*--layout-ref-app-shift: 1.98rem;*/
  /*--layout-ref-app-shift: -2.2rem;*/
  /*--layout-ref-app-height-whith-shift: calc(100% + 2.2rem);*/
  /*--layout-ref-app-height-whith-shift: calc(2.2rem + 100%);*/

  /* INFO От полного размера отнимает отступы с обеих сторон. */
  /*--layout-ref-size-without-idents: calc(100% - var(--ident) * 2);*/
  /*--layout-scrollbar-padding: calc(var(--ident) * .7);*/
  /*--layout-scrollbar-padding: .35rem .4rem;*/
  /*--layout-tab-border-radius: calc(var(--ident) * .5);*/
  /*--layout-tab-border-radius: .25rem;*/

  --tr-clr: #0000;

  --sks-red-clr: #d22;
  --sks-red-hover-clr: #d55;
  --sks-red-active-clr: #711;

  --lilac-clr: #969;

  --green-clr: #5a5;
  --green-dif-clr: #2d2;

  --cyan-clr: #499;
  --cyan-dif-clr: #2aa;
  --cyan-hover-clr: #277;
  --cyan-focus-clr: #288;
  --cyan-active-clr: #355;

  /* blue color */
  --blue-clr: #26a;
  /* blue reverse color */
  --blue-rev-clr: #cde;

  /* red color */
  --red-clr: #c32;
  /* red reverse color */
  --red-rev-clr: #ebb;


  /* background color */
  --bg-clr: #eee;

  /* transparent background color */
  --tr-bg-clr: #fff7;

  /* stroke color */
  --str-clr: #111;
  /* stroke hover color */
  --str-hv-clr: #333;
  /* stroke active color */
  --str-act-clr: #555;

  /* stroke reverse color */
  --str-rev-clr: #eee;


  /* dropdown color */
  --dpdn-clr: #555;
  /* dropdown element color */
  --dpdn-el-clr: #333;


  /* card color */
  --crd-clr: #ccc;
  /* card element color */
  --crd-el-clr: #aaa;
  /* card dark color */
  --crd-el-drk-clr: #999;
  /* card element different color */
  --crd-el-dif-clr: #777;


  /* page */
  --pg-active: 767;
  --pg-fade: 759;
  --pg-default: 751;
  --pg-contained: 743;
  /* view */
  --vw-active: 511;
  --vw-fade: 503;
  --vw-default: 495;
  --vw-contained: 487;
  /* element */
  --el-active: 255;
  --el-fade: 247;
  --el-default: 239;
  --el-contained: 231;


  --text-line-height: 1.2;
  /* text line height ratio */
  --line-height-ratio: 1.2;
  --line-height: calc(1rem * var(--line-height-ratio));

  --text-font-scale: 1;


  --layout-basis-size: 1rem;
  --ident: .4rem;

  /**/
  --focus-shadow:
    0 0 0 .1rem var(--str-rev-clr),
    0 0 0 .2rem var(--cyan-focus-clr);

  --focus-shadow-transparent: 
    0 0 0 .1rem rgba(var(--str-rev-clr-rgb), 0),
    0 0 0 .2rem rgba(var(--cyan-focus-clr-rgb), 0);


  --str-width: .03em;

  /* Документ никогда не превысит размер экрана */
  height: 100%;
  width: 100%;

  font-size: 20px;
  line-height: var(--line-height);
  color: var(--str-clr);
  font-family: IBM Plex Sans, Arial, sans-serif;
}

:focus-visible {
  outline: none;
}

a {
  all: unset;
}

fieldset, legend {
  all: unset;
}

html, body, header, main, h4, h2, form, fieldset, legend, label, div, a {
  box-sizing: border-box;
  scrollbar-width: none;
}

h2, h3, h4, span, p {
  /* TEST */
  overflow-wrap: break-word;
  hyphens: auto;

  margin-block: 0;
}

h4 {
  z-index: 1;

  margin-block: var(--ident);

  font-weight: 900;
  text-align: center;
}

/*h4, legend {
  display: block;

  font-size: 1em;
  font-weight: bold;
}

legend {
  margin-block-start: var(--ident);
}*/

body {
  /* Свойство user-select: none; наследуется и будет работать на всех дочерних элементах,
    если не переопределно в них. */
  -webkit-user-select: none; /* Префикс для Safari */
  user-select: none;

  flex-direction: column;

  height: inherit;

  margin: unset;

  background-color: var(--bg-clr);
}


/* Регион main. Основной контент страницы. */
main.sp-cl {
  /*flex: <grow> <shrink> <basis>;*/

  flex: 1;

  overflow: auto;

  padding-inline: var(--header-height);
  padding-block: var(--ident);

  background-color: var(--bg-clr);

  transition: padding-inline .2s ease-in-out;

  isolation: isolate;
}

input, button, ul, li {
  all: unset;
  color: var(--str-clr);

  /* WARN */
  /*  Временное решение. */
  box-sizing: border-box;
  scrollbar-width: none;
  margin: 0;
  padding: 0;
}

/*a, a:link, a:visited, a:hover, a:active {
  text-decoration: none;
  color: var(--str-clr);
}*/


/* Регион 'Общие значения для input[type=checkbox], input[type=radio]'. */
[type=checkbox], [type=radio] {
  appearance: none;
  -moz-appearance: none;

  flex-shrink: 0;
  align-self: center;
}
/* Конец региона 'Общие значения для input[type=checkbox], input[type=radio]'. */


/* Регион input[type=checkbox]. */
[type=checkbox], .chbx {
  display: block;

  width: 1.9rem;
  height: 1rem;

  margin: var(--min-ident);

  border-radius: .5rem;

  background-color: var(--crd-el-clr);

  box-shadow: var(--focus-shadow-transparent);

  transition: background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}
  [type=checkbox]::after, .chbx::after {
    content: "";
    display: block;

    width: .7rem;
    height: .7rem;

    border-radius: 50%;

    background-color: var(--str-rev-clr);

    transition: background-color .2s ease-in-out, transform .2s ease-in-out;

    transform: translate(.15rem, .15rem);
  }

[type=checkbox]:disabled, [type=checkbox]:disabled ~ .chbx {
  background-color: var(--crd-el-dif-clr);
}
  [type=checkbox]:disabled::after, [type=checkbox]:disabled ~ .chbx::after {
    background-color: var(--crd-el-clr);
  }

[type=checkbox]:checked, [type=checkbox]:checked ~ .chbx {
  background-color: var(--cyan-clr);
}
  [type=checkbox]:checked::after, [type=checkbox]:checked ~ .chbx::after {
    transform: translate(1rem, .15rem);
  }

@media (hover: hover) {
  [type=checkbox]:checked:hover, [type=checkbox]:checked:hover ~ .chbx {
    background-color: var(--cyan-hover-clr);
  }

  [type=checkbox]:hover, [type=checkbox]:hover ~ .chbx {
    background-color: var(--crd-el-dif-clr);
  }
}

[type=checkbox]:focus-visible, [type=checkbox]:focus-visible ~ .chbx {
  /*  outline:.1rem solid var(--cyan-focus-clr);*/
  /*  outline-offset: .1rem;*/
  box-shadow: var(--focus-shadow);
}

[type=checkbox]:focus:not(:focus-visible), [type=checkbox]:focus:not(:focus-visible) ~ .chbx {
  outline: none;
}

[type=checkbox]:checked:active,
[type=checkbox]:active,
[type=checkbox]:checked:active ~ .chbx,
[type=checkbox]:active ~ .chbx {
  background-color: var(--cyan-active-clr);
}
/* Конец региона input[type=checkbox]. */




/* Регион input[type=radio] */
[type=radio] {
  display: grid;
  place-items: center;

  width: 1rem;
  height: 1rem;

  margin: var(--min-ident);

  border: .15rem solid var(--crd-el-clr);
  border-radius: 50%;

  background-color: var(--bg-clr);

  box-shadow: var(--focus-shadow-transparent);

  transition: border-color.2s ease-in-out, box-shadow .2s ease-in-out;
}
  [type=radio]::after {
    content: "";
    display: block;

    width: 100%;
    height: 100%;

    opacity: 0;

    border-radius: 50%;

    background-color: var(--cyan-clr);

    transition: opacity .2s ease-in-out, background-color .2s ease-in-out, transform .2s ease-in-out;
  }

[type=radio]:disabled {
  border-color: var(--crd-el-dif-clr);
  background-color: var(--crd-el-clr);
}

[type=radio]:checked {
  border-color: var(--cyan-clr);
}
  [type=radio]:checked::after {
    opacity: 1;

    transform: scale(55%, 55%);
  }

@media (hover: hover) {
  [type=radio]:checked:hover {
    border-color: var(--cyan-hover-clr);
  }
    [type=radio]:checked:hover::after {
      background-color: var(--cyan-hover-clr);
    }

  [type=radio]:hover {
    border-color: var(--crd-el-dif-clr);
  }
}

[type=radio]:focus-visible {
  /*outline: .1rem solid var(--cyan-focus-clr);*/
  /*outline-offset: .1rem;*/
  box-shadow: var(--focus-shadow);
}

[type=radio]:focus:not(:focus-visible) {
  outline: none;
}

[type=radio]:active, [type=radio]:checked:active {
  border-color: var(--cyan-active-clr);
}
  [type=radio]:checked:active::after, [type=radio]:active::after {
    background-color: var(--cyan-active-clr);
  }

/* Конец региона input[type=radio] */




/* Регион input[type=text], input[type=number], input[type=date] */
[type=text], [type=number], [type=date] {
  display: block;

  margin: var(--min-ident);

  padding-inline: var(--ident);
  padding-block: var(--min-ident);

  width: calc(100% - var(--min-ident) * 2);

  border: .15rem solid var(--crd-el-clr);
  border-radius: var(--ident);

  background-color: var(--bg-clr);

  box-shadow: var(--focus-shadow-transparent);

  transition: border-color .2s ease-in-out, background-color .2s ease-in-out, box-shadow .2s ease-in-out;
}

@media (hover: hover) {
  [type=text]:hover, [type=number]:hover, [type=date]:hover {
    border-color: var(--crd-el-dif-clr);
  }
}

[type=text]:active,
[type=number]:active,
[type=date]:active {
  border-color: var(--cyan-active-clr);
}

[type=text]:disabled, [type=number]:disabled, [type=date]:disabled {
  border-color: var(--crd-el-dif-clr);
  background-color: var(--crd-el-clr);
}

/*[type=text]:read-only, [type=number]:read-only, [type=date]:read-only {
  background-color: var(--blue-rev-clr);
}*/

[type=text]:invalid, [type=number]:invalid, [type=date]:invalid {
  background-color: var(--red-rev-clr);
}

[type=text]:focus-visible, [type=number]:focus-visible, [type=date]:focus-visible {
  /*outline: .1rem solid var(--cyan-focus-clr);*/
  /*outline-offset: .1rem;*/
  box-shadow: var(--focus-shadow);
}

[type=text]:focus:not(:focus-visible),
[type=number]:focus:not(:focus-visible),
[type=date]:focus:not(:focus-visible) {
  outline: none;
}

/* Конец региона input[type=text], input[type=number], input[type=date] */




/* Регион "Основная БЭМ-модель". */

/* INFO */
/*  Значения по-умолчанию. */
/*  Направление базовой оси (строка): flex-directional: row;. */
/*  Автоперенос при нехватке места (не переносить): flex-wrap: nowrap;. */
/*  Или укороченная версия (поток) flex-flow: row nowrap;. */
/*.row,*/
.rw {
  display: flex;

  /*overflow: auto;*/
}

/*.column,*/
.cl {
  display: flex;
  flex-flow: column;

  /*overflow: auto;*/
}

/* .icon, */
.ic {
  display: grid;
  place-items: center;
  height: calc(1em * var(--line-height-ratio));
  aspect-ratio: 1;
  align-self: center;
}

  .ic svg {
    height: 1em;
    width: 1em;
  }

/*.space-row,
.sp-rw,*/
.sp {
  display: flex;
  gap: var(--ident);

  /* WARN. Экспериментальное внедрение. */
  align-items: center;
}

/*.space-column,*/
.sp-cl {
  display: flex;
  flex-flow: column;
  gap: var(--ident);
}

/*.row-wrap, .row-shift,
.rw-sh,*/
.sh {
  display: flex;
  flex-wrap: wrap;
}

/*.column-wrap, .column-shift,*/
.cl-sh {
  display: flex;
  flex-flow: column wrap;
}

/*.space-row-shift,
.sp-rw-sh,*/
.sp-sh {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ident);
}

/*.space-column-shift,*/
.sp-cl-sh {
  display: flex;
  flex-flow: column wrap;
  gap: var(--ident);
}

/*.space-row-element, .space-element, .row-element, .element,
.space-row-elem, .space-elem, .row-elem, .elem,
.sp-rw-el, .sp-el, .rw-el,*/
.el {
  display: flex;
  margin: var(--min-ident);
  gap: var(--ident);
  padding: var(--ident);

  /* TEST */
  align-items: center;
}

/*.space-row-shift-element, .space-shift-element, .row-shift-element, .shift-element,
.space-row-shift-elem, .space-shift-elem, .row-shift-elem, .shift-elem,
.sp-rw-sh-el, .sp-sh-el, .rw-sh-el,*/
.sh-el {
  display: flex;
  flex-wrap: wrap;
  margin: var(--min-ident);
  gap: var(--ident);
  padding: var(--ident);
  /* TEST */
  align-items: center;
}

/* .icon-element, */
.ic-el {
  display: grid;
  place-items: center;
  height: calc(1em * var(--line-height-ratio) + var(--double-ident));
  aspect-ratio: 1;
  align-self: center;
  padding: var(--ident);
}

  .ic-el svg {
    height: 1em;
    width: 1em;
  }

/*.space-column-element, .column-element,
.space-col-elem, .col-elem,
.sp-cl-el,*/
.cl-el {
  display: flex;
  flex-flow: column;
  gap: var(--ident);
  padding: var(--ident);
}

/*.space-row-text-element, .row-text-element, .row-element .text-element, .text,
.space-row-text-elem, .row-text-elem, .row-elem, .text-elem,
.sp-rw-tx-el, .rw-tx-el, .rw-el, .tx-el,*/
.tx {
  display: flex;
  margin: var(--min-ident);
  gap: var(--ident);
  padding-inline: var(--dif-ident);
  padding-block: var(--ident);
  /* TEST */
  align-items: center;
}

/*.space-column-text-element, .space-column-text, .column-text-element, .column-text,
.space-col-text-elem, .space-col-text, .col-text-elem, .col-text,
.sp-cl-tx-el, .sp-cl-tx, .cl-tx-el,*/
.cl-tx {
  display: flex;
  flex-flow: column;
  gap: var(--ident);
  padding-block: var(--ident);
  padding-inline: var(--dif-ident);
}

/* Конец региона "Основная БЭМ-модель". */




/* Регион "Шаблон". */

header {
  z-index: var(--pg-active);
  /*align-items: center;*/

  height: var(--header-height);
  /*padding: var(--header-ident);*/

  background-color: var(--sks-red-clr);
  font-size: 1.2rem;
  line-height: calc(1em * var(--line-height-ratio));
}

header .rw.__tabs {
  flex: 1;
}

header .rw.__tab {
  margin: var(--header-ident);
}

/* Конец региона "Шаблон". */




/* Регион "Дизайн". */

/*._material,*/
._mt {
  border-radius: var(--ident);
  transition: background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;
}

/*._material path,*/
._mt svg,
._mt use::part(__all),
._mt-ic svg,
._mt-ic use::part(__all) {
  stroke: var(--str-clr);
  transition: stroke .2s ease-in-out, fill .2s ease-in-out, stroke-opacity .2s ease-in-out, fill-opacity .2s ease-in-out;
}

/*._material-area,*/
._mt-ar {
  border-radius: var(--ident);
  outline: .05rem dashed var(--str-clr);
  outline-offset: -.05rem;
  transition: background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;
}

/*._material-card,*/
._mt-crd {
  border-radius: var(--ident);
  background-color: var(--crd-clr);
  transition: background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;
}

/*._material-element-card,*/
._mt-el-crd {
  border-radius: var(--ident);
  background-color: var(--crd-el-clr);
  transition: background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;
}

/*._material-different-element-card,*/
._mt-dif-el-crd {
  border-radius: var(--ident);
  color: var(--str-rev-clr);
  background-color: var(--crd-el-dif-clr);
  transition: background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;
}

/*._material-different-green-element-card,*/
._mt-dif-green-el-crd {
  border-radius: var(--ident);
  color: var(--str-rev-clr);
  background-color: var(--green-clr);
  transition: background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;
}

/*._material-different-red-element-card,*/
._mt-dif-red-el-crd {
  border-radius: var(--ident);
  color: var(--str-rev-clr);
  background-color: var(--red-clr);
  transition: background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;
}

/*._material-different-blue-element-card,*/
._mt-dif-blue-el-crd {
  border-radius: var(--ident);
  color: var(--str-rev-clr);
  background-color: var(--blue-clr);
  transition: background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;
}


/* INFO */
/* actionable */
/*  Описывает состояние интерактивных элементов. */
/*._act:hover {
  background-color: var(--cyan-hover-clr);
}

._act:focus-visible, ._act:focus-visible {
  outline: ;
}

._act:focus:not(:focus-visible), _mt-act:focus:not(:focus-visible) {
  outline: none;

  color: var(--str-rev-clr);
  background-color: var(--cyan-focus-clr);
}

._act:active {
  background-color: var(--cyan-active-clr);
}*/

svg[fill=none] {
  stroke-width: .1rem;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* Конец региона "Дизайн". */




/* Регион field */

/*.fd {

}

.cl-fd {

}*/

/*
  .field-area, .checkbox-area, .select-area
*/
.fd-ar, .chbx-ar, .sct-ar, .fd {
  display: flex;
  flex-flow: column;
}

.fd-ar::after, .chbx-ar::after, .sct-ar::after {
  content: attr(data-validation);

  display: block;

  margin-inline-start: var(--double-ident);

  height: calc(.8rem * var(--line-height-ratio));

  opacity: 0;

  line-height: calc(.8rem * var(--line-height-ratio));
  font-size: .8rem;

  transition: opacity .2s ease-in-out, color .2s ease-in-out;
}

/*.fd-ar:has(input:required)::after {
  content: attr(data-required);
  opacity: 1;
  color: var(--red-clr);
}*/

.fd-ar:has(input:read-only)::after {
  content: attr(data-readonly);
  opacity: 1;
  color: var(--blue-clr);
}

.fd-ar:has(input:invalid)::after {
  content: attr(data-validation);
  opacity: 1;
  color: var(--red-clr);
}

/*
  [data-required].checkbox-area
  [data-required].select-area
*/
[data-rq].chbx-ar::after, [data-rq].sct-ar::after {
  content: attr(data-rq);
  opacity: 1;
  color: var(--red-clr);
}

.fd-ar:has([type=checkbox]:invalid, [type=radio]:invalid)::after {
  content: attr(data-required);
  opacity: 1;
  color: var(--red-clr);
}

.fd-ar:has(input:invalid:placeholder-shown)::after {
  content: attr(data-required);
  opacity: 1;
  color: var(--red-clr);
}

@starting-style {
  .fd-ar:has(input:read-only)::after,
  .fd-ar:has(input:invalid)::after,
  .fd-ar:has([type=checkbox]:invalid)::after,
  .fd-ar:has(input:invalid:placeholder-shown)::after {
    opacity: 0;
  }
}

/*.fd:has([type=checkbox], [type=radio]) {
  gap: var(--ident);
  align-items: center;
}*/

/*.fd:has([type=text], [type=number], [type=date], .sct) {
  flex-flow: column;
  gap: initial;
  align-items: initial;
}*/

/*.fd label {
  align-self: flex-start;
}*/

/*.fd:has([type=checkbox], [type=radio]) label {
}*/

.fd:has([type=text], [type=number], [type=date]) label, .sct-ar label {
  align-self: flex-start;

  margin-inline: var(--double-ident);

  line-height: calc(.8rem * var(--line-height-ratio));
  font-size: .8rem;
}

.fd-el, .chbx-el {
  position: relative;

  display: flex;
}

.chbx-el {
  align-items: center;
  justify-content: flex-start;

  gap: var(--ident);

  width: fit-content;
}

.chbx-el [type=checkbox], .chbx-el [type=checkbox]:checked {
  all: unset;

  position: absolute;

  width: 100%;
  height: 100%;
}
  .chbx-el [type=checkbox]::after {
    all: unset;
  }

.fd-el .chbx, .fd-el .chbx::after, [data-lbl].fd-el::after {
  pointer-events: none;
}

[data-lbl].chbx-el::after {
  content: attr(data-lbl);
  display: block;
  margin: var(--min-ident);
}

/* Конец региона field */




/* Регион "Общие правила для элементов". */
button, .btn, .sct {
  z-index: var(--el-default);

  display: flex;
  gap: var(--ident);

  margin: var(--min-ident);
  padding-inline: var(--dif-ident);
  padding-block: var(--ident);

  align-items: center;

  border-radius: var(--ident);

  background-color: var(--crd-el-clr);

  box-shadow: var(--focus-shadow-transparent);

  transition: box-shadow .2s ease-in-out, background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;
}


svg {
  display: grid;
  place-items: center;

  height: calc(1rem * var(--line-height-ratio));
  aspect-ratio: 1;

/*  height: 1.2rem;
  width: 1.2rem;*/

  flex-shrink: 0;
  align-self: center;
}
/* Конец региона "Общие правила для элементов". */


/* Регион button, .btn, .sct */
@media (hover: hover) {
  button:hover, .btn:hover, .sct:has([data-lbl]:hover):not(:disabled) {
    background-color: var(--cyan-clr);
    color: var(--str-rev-clr);
  }

  button:hover svg,
  button:hover use,
  button:hover use::part(__str),
  .btn:hover svg,
  .btn:hover use,
  .btn:hover use::part(__str),
  .sct:has([data-lbl]:hover):not(:disabled) svg,
  .sct:has([data-lbl]:hover):not(:disabled) use,
  .sct:has([data-lbl]:hover):not(:disabled) use::part(__str) {
    --str-clr: var(--str-rev-clr);
    stroke: var(--str-rev-clr);
  }
}

button:focus-visible, .btn:focus-visible, .sct:has([type=radio]:focus-visible) {
  z-index: var(--el-active);

  /*  outline: .1rem solid var(--cyan-focus-clr);*/
  /*  outline-offset: .1rem;*/
  box-shadow: var(--focus-shadow);
}

button:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
.sct:has([type=radio]:focus:not([type=radio]:focus-visible)) {
  z-index: var(--el-active);

  outline: none;
}

button:active, .btn:active, .sct:has([data-lbl] [type=radio]:active) {
  background-color: var(--cyan-active-clr);
}

@media (hover: hover) {
  a.btn:active:not(:hover) {
    background-color: var(--crd-el-clr);
  }
}

button:disabled, .btn:disabled, .sct:disabled {
  background-color: var(--crd-el-dif-clr);
}

/* Конец региона button, .btn, .sct */


/* Регион .sct. */
/* select */
.sct {
  position: relative;
}


/*
  .select .drop-down [data-option] [type=radio],
  .select .drop-down [data-label] [type=radio]
*/
.sct [type=radio] {
  position: absolute;

  left: 0;
  top: 0;

  display: block;

  width: 100%;
  height: 100%;

  /*align-self: initial;*/
  align-self: unset;

  margin: unset;
  padding-inline: unset;
  padding-block: unset;

  border: unset;
  border-radius: unset;

  background-color: unset;

  box-shadow: unset;
  transition: unset;
}
  .sct [type=radio]::after {
    all: unset;
  }


/* select [data-box] */
.sct [data-bx] {
  display: flex;
  gap: var(--ident);

  width: 100%;

  justify-content: end;
}
/*
  .sct [data-bx]::before {
    content: attr(data-bx);
    display: block;

    opacity: 0;
    pointer-events: none;
  }
*/
  .sct [data-bx] svg {
    rotate: 180deg;
  }

/* select drop-down */
.sct .dpdn {
  position: absolute;
  left: calc(-1 * var(--min-ident));
  top: calc(100% + var(--min-ident));

  display: flex;
  flex-flow: column;
  gap: .2rem;

  padding: var(--min-ident);
  width: calc(100% + var(--ident));
  border-radius: var(--dif-ident);

  transition: background-color .2s ease-in-out;

  pointer-events: none;
}
  .sct .dpdn::before {
    content: "";

    position: absolute;
    left: 0;
    top: 0;

    display: block;

    width: 100%;
    height: 100%;

    border-radius: var(--dif-ident);

    background-color: var(--dpdn-clr);

    transition: opacity .2s ease-in-out;

    opacity:0;
  }

/* select drop-down [data-label] */
.sct [data-lbl] {
  position: absolute;

  bottom: calc(100% + var(--min-ident));

  width: calc(100% - var(--ident));
  min-height: calc(var(--line-height) + var(--double-ident));

  padding-inline: var(--dif-ident);
  padding-block: var(--ident);

  transition: opacity .2s ease-in-out;

  opacity: 0;
  pointer-events: none;
}
  .sct [data-lbl]::before {
    content: attr(data-lbl);
    display: block;

    margin-inline-end: calc(var(--line-height) + var(--ident));

    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .sct [data-opt] [type=radio] {
    visibility: hidden;
  }

/* .select .drop-down [data-option] */
.sct [data-opt] {
  position: relative;

  padding-inline: var(--dif-ident);
  padding-block: var(--ident);

  border-radius: var(--min-ident);

  background-color: var(--dpdn-el-clr);

  color: var(--str-rev-clr);

  transition: background-color .2s ease-in-out, color .2s ease-in-out, opacity .2s ease-in-out;

  opacity: 0;
  pointer-events: none;
}
  .sct [data-opt]::before {
    content: attr(data-opt);
    display: block;

    min-height: var(--line-height);
  }
  .sct [data-opt] [type=radio] {
    visibility: hidden;
  }


.sct:focus-within .dpdn::before,
.sct:focus-within:has([data-lbl] [type=radio]:checked) .dpdn::before {
  opacity: 1;
}

.sct [data-lbl]:not(
  [data-lbl] ~ [data-lbl],
  [data-lbl]:has( ~ [data-lbl] [type=radio]:checked),
  [data-lbl]:has( ~ [data-opt] [type=radio]:checked)),
.sct [data-lbl]:has([type=radio]:checked),
.sct [data-lbl]:has( + [data-opt] [type=radio]:checked) {
  opacity: 1;
  pointer-events: all;
}
  .sct [data-lbl]:not(
    [data-lbl] ~ [data-lbl],
    [data-lbl]:has( ~ [data-lbl] [type=radio]:checked),
    [data-lbl]:has( ~ [data-opt] [type=radio]:checked)) [type=radio],
  .sct [data-lbl]:has([type=radio]:checked) [type=radio],
  .sct [data-lbl]:has( + [data-opt] [type=radio]:checked) [type=radio] {
    visibility: visible;
  }

.sct:focus-within [data-opt],
.sct:focus-within:has([data-lbl] [type=radio]:checked) [data-opt] {
  opacity: 1;
  pointer-events: all;
}

.sct:focus-within [data-opt] [type=radio],
.sct:focus-within:has([data-lbl] [type=radio]:checked) [data-opt] [type=radio] {
  visibility: visible;
}


.sct:has([data-opt] [type=radio]:checked) .dpdn::before {
  opacity: 0;
}

.sct:has([data-opt] [type=radio]:checked) [data-opt] {
  opacity: 0;
  pointer-events: none;
}


.sct [data-opt]:not([data-opt] ~ [data-opt]) {
  border-radius: var(--ident) var(--ident) var(--min-ident) var(--min-ident);
}
.sct [data-opt]:not([data-opt]:has( ~ [data-opt])) {
  border-radius: var(--min-ident) var(--min-ident) var(--ident) var(--ident);
}



/* hover стиль прописан в компоненте btn */




@media (hover: hover) {
/*  .sct .opt:has([type=radio]:hover)::before,
  .sct .opt:has([type=radio]:checked:hover)::before {
    background-color: var(--cyan-hover-clr);
  }*/
}

/*.sct .opt:has([type=radio]:focus-visible)::before,
.sct .opt:has([type=radio]:checked:focus-visible)::before {
  box-shadow: var(--focus-shadow);
}
.sct .opt:has([type=radio]:focus:not(:focus-visible))::before,
.sct .opt:has([type=radio]:checked:focus:not(:focus-visible))::before {
  outline: none;
}

.sct .opt:has([type=radio]:active)::before,
.sct .opt:has([type=radio]:checked:active)::before {
  background-color: var(--cyan-active-clr);
}*/

/*.dpdn .hlr {
  position: absolute;
  left: var(--double-ident);
  bottom: calc(100% + var(--dif-ident));

  transition: opacity .2s ease-in-out;

  opacity: 0;
}*/
  /* first */
/*  .dpdn .hlr._fst {
    opacity: 1;
  }
  .dpdn:has([type=radio]:checked) .hlr._fst {
    opacity: 0;
  }
  .sct .opt:has([type=radio]:checked) + .hlr {
    opacity: 1;
  }*/

/* Регион .sct. */




h2 {
  /*  margin-block-end: var(--ident);
  margin-inline-end: var(--ident);*/
  line-height: calc(1em * var(--line-height-ratio));
}

h2:last-child {
  margin: 0;
}



/* Чекбокс, фиксирующий состояние (свёрнутое/развёрнутое) навигационного меню страницы. */
#menu-is-open {
  display: none;
}


/* Регион #app. */
/* Конец региона #app. */




/* Регион header. Навигационное меню страницы, или "шапка". */
header .__tab {
  flex-shrink: 0;
  gap: var(--header-ident);
  align-items: center;
  padding-block: var(--header-ident);
  padding-inline: var(--double-header-ident);
  margin: var(--header-ident);
  background-color: unset;
  border-radius: var(--header-ident);
  color: var(--str-rev-clr);
  transition: background-color .2s ease-in-out, color .2s ease-in-out;

  path, circle {
    stroke: var(--str-rev-clr);
    transition: stroke .2s ease-in-out;
  }
}


  header .__tab._active {
    background-color: var(--sks-red-hover-clr);
  }

@media (hover: hover) {
  header .__tab:hover:not(._active) {
    /* TODO */
    /* Необходим рефакторинг. */

    background-color: var(--str-rev-clr);
    color: var(--sks-red-clr);

    path, circle {
      stroke: var(--sks-red-clr);
    }
  }

  header .__tab._active:hover {
    cursor: default;
  }
}

header .__tab:active:not(._active) {
  background-color: var(--sks-red-active-clr);
  color: var(--str-rev-clr);

  path, circle {
    stroke: var(--str-rev-clr);
  }
}

.__tab.__account {
  /* TODO */
  /* Необходим рефакторинг. */

  margin-inline-start: auto;
}
/* Конец региона header. */



/* Регион header [for=menu-is-open]. Кнопка сокрытия/разворачивания меню. */
header [for=menu-is-open] {
  z-index: 128;
  height: 2rem;
  padding: var(--header-ident);
  margin: var(--header-ident);
  border-radius: var(--header-ident);
  transition: transform .2s ease-in-out, background-color .2s ease-in-out;

  svg {
    height: 100%;
    width: 100%;
  }

  use {
    /*--str-width: .055rem;*/
    --str-width: 1.2px;
    --str-clr: var(--str-rev-clr);
  }
}

/*header [for=menu-is-open] use::part(__str) {
  stroke-width: .055rem;
  stroke: var(--str-rev-clr);
  transition: stroke .2s ease-in-out;
}*/

@media (hover: hover) {
  header [for=menu-is-open]:hover {
    background-color: var(--str-rev-clr);

    use {
      --str-clr: var(--sks-red-clr);
    }
  }

  /*header [for=menu-is-open]:hover use::part(__str) {
    stroke: var(--sks-red-clr);
  }*/
}

header [for=menu-is-open]:active {
  background-color: var(--sks-red-active-clr);

  use {
    --str-clr: var(--str-rev-clr);
  }
}
/* Конец региона header [for=menu-is-open]. Кнопка сокрытия/разворачивания меню. */




#menu {
  z-index: var(--el-default);

  display: flex;
  flex-flow: column nowrap;

  position: fixed;
  top: var(--header-height);
  right: 100%;

  height: calc(100% - var(--header-height));
  width: max-content;

  background-color: var(--str-clr);
  opacity: .8;

  transition: transform .2s ease-in-out, box-shadow .2s ease-in-out;
}

#menu-is-open:checked ~ #menu {
  z-index: var(--pg-active);
  transform: translateX(100%);
}

#menu + [for=menu-is-open] {
  z-index: var(--el-contained);

  position: absolute;
  top: 0rem;
  right: 100%;

  height: 100%;
  width: 100%;

  background-color: rgba(2,2,2,0);

  transform: translateX(0);

  transition: background-color .2s ease-in-out, backdrop-filter .2s ease-in-out, transform 0s ease .2s;
}

#menu-is-open:checked ~ #menu + [for=menu-is-open] {
  z-index: var(--pg-contained);

/*  background-color: rgba(2,2,2,.5);*/
  background-color: #2227;
  backdrop-filter: blur(.5rem);

  transform: translateX(100%);

  transition: background-color .2s ease-in-out, backdrop-filter .2s ease-in-out, transform 0s ease;
}

#menu .__tab {
  padding: var(--ident);

  color: var(--str-rev-clr);

  transition: background-color .2s ease-in-out, color .2s ease-in-out;
}

#menu .__tab._active {
  background-color: var(--str-rev-clr);
  color: var(--str-clr);
}

#menu .__tab .__title {
  margin-inline-start: calc(2rem + var(--ident));
  margin-inline-end: 1rem;
}

  #menu .__tab .ic {
    height: 100%;
    margin-inline-start: 1rem;
  }

  #menu .__tab .ic + .__title {
  margin-inline-start: var(--ident);
  margin-inline-end: 1rem;
}



@media (hover:hover) {
  #menu .__tab:hover {
    background-color: var(--str-hv-clr);
  }

  #menu .__tab._active:hover {
    color: var(--str-rev-clr);
  }
}

#menu ul {
  width: fit-content;
  gap: unset;
}

  /* #menu li {*/
    /*display: inline-flex;*/
    /*position: relative;*/
    /*margin-block-start: var(--header-ident);*/
    /*border-radius: var(--header-ident);*/
    /*transition: background-color .2s ease-in-out;
  }

    #menu li a {*/
      /*display: flex;*/
      /*height: 100%;*/
      /*padding: var(--ident);*/
      /*align-items: center;*/
      /*font-size: 1.2rem;*/
      /*font-weight: bold;*/
      /*color: var(--str-rev-clr);
    }*/

    /*#menu li:before, #menu li:after {
      display: block;
      position: absolute;
      bottom: 0;
      width: var(--header-ident);
      height: var(--header-ident);
      content: "";*/
      /*mask-composite: subtract;*/
      /*transition: background-color .2s ease-in-out;
    }*/

    /*#menu li:before {
      right: 100%;*/
      /*background: radial-gradient(circle at top left, transparent 71%, var(--bg-clr) 72%);*/
      /*mask-image: linear-gradient(to top, #fff, #fff), radial-gradient(circle var(--layout-tab-border-radius) at top left, #fff 100%, transparent 101%);*/
      /*mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMiAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+PHBhdGggZD0ibTAgMmMxIDAgMi0xIDItMnYyeiIvPjwvc3ZnPg==");*/
      /*mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOCA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+PHBhdGggZD0iTTggOFYwUTcgNyAwIDhaIi8+PC9zdmc+");*/
      /*mask-image: url("../images/common/left-rounded-tail.svg");
    }*/

    /*#menu li:after {
      left: 100%;*/
      /*background: radial-gradient(circle at top left, transparent 70.7%, var(--bg-clr) 71%);*/
      /*mask-image: linear-gradient(to top, #fff, #fff), radial-gradient(circle var(--layout-tab-border-radius) at top right, #fff 100%, transparent 101%);*/
      /*mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMiAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+PHBhdGggZD0ibTAgMGMwIDEgMSAyIDIgMmgtMnoiLz48L3N2Zz4=");*/
      /*mask-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgOCA4IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSI+PHBhdGggZD0iTTAgOFYwUTAgNyA4IDhaIi8+PC9zdmc+");*/
      /* TODO Использовать один и тот же файл, поворачивая его на 90 градусов. */
      /*mask-image: url("../images/common/right-rounded-tail.svg");
    }*/

    /*#menu li._selected {
      z-index: 3;
      background-color: var(--bg-clr);
    }

      #menu li._selected:before, #menu li._selected:after {
        background-color: var(--bg-clr);
      }

      #menu li._selected a {
        color: var(--sks-red-clr);
      }*/

/*
@media (hover:hover) {
  #menu li._unselected:hover {
    background-color: var(--sks-red-hover-clr);
  }

  #menu li._unselected:hover:before, #menu li._unselected:hover:after {
    background-color: var(--sks-red-hover-clr);
  }
}
*/

/* Конец региона header. Навигационное меню страницы, или "шапка". */
/* Полоса прокрутки. */
/* Начало региона. */
/*
  TODO Следить за статусом документа [https://drafts.csswg.org/css-scrollbars-1/].
  TODO В случае установления договорённости, стилизовать скроллбар, и пересмотреть использование кастомного скрипта для этого.
*/
.__scrollbar {
  opacity: 0;
  position: absolute;
  z-index: 2;
  transition: top .2s ease-in-out, right .2s ease-in-out;
  /*transition: height .2s ease-in-out; не нужно,
    так как выбран подход цикличного обновления размера полосы прокрутки через setInterval. */
  /*transition: height .2s ease-in-out;*/
}
  .__scrollbar .__scroll-slider {
    touch-action: none;

    position: relative;
    padding: var(--ident);
    /*transition: height .2s ease-in-out;*/
    transition: height .1s ease-in-out;
  }
    .__scrollbar .__scroll-slider div {
      height: 100%;
      padding: var(--ident);
      border-radius: var(--ident);
      /*background-color: #a55;*/
      /*background-color: #5a9;*/
      background-color: var(--str-clr);
      transition: opacity .2s ease-in-out;
    }

@media (hover: hover) {
  .__scrollbar .__scroll-slider div:hover {
    opacity: .4;
  }

  .__scrollbar .__scroll-slider:hover div {
    opacity: .8;
  }
}
/* Полоса прокрутки. */
/* Конец региона. */




/*.__has-been-read-mark {
  width: 100%;
}*/

  /*.__has-been-read-mark path {
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5px;
  }*/

/*@media screen and (min-width: 16rem) and (max-width: 44rem) and (min-resolution: 1.5dppx) {
  html {
    font-size: 14px;
  }

  main {
    padding-inline: 0;
  }
}*/

@media (hover: hover) {
  a:disabled,
  button:disabled,
  .btn:disabled,
  .sct:disabled,
  input:disabled,
  textarea:disabled,
  label:has(input:disabled) {
    cursor: not-allowed;
  }

  a,
  button,
  .btn,
  .sct,
  [type=radio],
  [type=checkbox],
  label,
  header .__tab,
  header [for=menu-is-open],
  .__scrollbar .__scroll-slider {
    cursor: pointer;
  }

  textarea, [type=text], [type=number], [type=date] {
    cursor: text;
  }
}

/* WARN Разобраться. как универсализировать условия под разрешения на логический пиксель, либо определить модель для всех устройств. */
@media screen and (min-resolution: 1.5dppx) {
  /*body {
    font-size: .8rem;
  }
    */

  html {
    --text-font-scale: .9;
  }
}

@media screen and (min-width: 1rem) and (min-resolution: 1.5dppx) {
  main.sp-cl {
    padding-inline: var(--ident);
  }
}

@media screen and (min-width: 1rem) and (max-width: 52rem) and (max-resolution: 1dppx) {
  main.sp-cl {
    padding-inline: var(--ident);
  }
}

@media screen and (min-width: 52rem) and (max-width: 74rem) and (max-resolution: 1dppx) {
  main.sp-cl {
    padding-inline: var(--header-height);
  }
}

@media screen and (min-width: 74rem) and (max-width: 102rem) and (max-resolution: 1dppx) {
  main.sp-cl {
    padding-inline: var(--header-height);
  }
}

@media screen and (min-width: 102rem) and (max-resolution: 1dppx) {
  main.sp-cl {
    padding-inline: calc(var(--header-height) * 2);
  }
}
/* Конец региона main. Основной контент страницы. */