/* ============================================================
   BASE — сброс/типографика общих HTML-тегов и базовые layout-
   примитивы (обёртки, отступы, футер, баннер). Грузится на ВСЕХ
   страницах сайта, до подключения компонентов и page-специфики.
   ============================================================ */

body {
    font-family: 'PT Sans', sans-serif;
}

/* Нативные чекбоксы/радио по всему сайту — фирменный синий (#557a95, тот
   же, что у кнопок-пилюль/ссылок/фокус-рамки .pure-form выше) вместо
   дефолтного синего акцента браузера/ОС. accent-color — единственное, что
   красит именно ЗАЛИВКУ галочки нативного чекбокса; так делаем один раз
   здесь (base.css грузится на всех страницах), а не на каждой странице
   отдельно. */
input[type=checkbox], input[type=radio] {
    accent-color: #557a95;
}

/* Локальный саб-сет Material Symbols Outlined: только глифы, нужные для
   иконок assignment_turned_in и support_agent (карточки на главной).
   При добавлении новой иконки на сайт файл нужно пересобрать под новый
   набор символов (запрос к Google Fonts с параметром text=<имена иконок>). */
@font-face {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-weight: 400;
    src: url("/static/users/fonts/material-symbols-outlined-subset.77dbcdc5c32b.woff2") format('woff2');
}

.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    line-height: 1;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

html {
    color: #444444;
}

html::-webkit-scrollbar {
    display: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Ubuntu', sans-serif;
}

h1 {
  /* Задаем градиент слева направо */
  background: linear-gradient(to right, #557a95 0%, #79aec8 100%);

  /* Магия: обрезаем фон строго по контуру букв */
  -webkit-background-clip: text;
  background-clip: text;

  /* Делаем сам текст прозрачным, чтобы сквозь него был виден градиент */
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

h2 {
   color: #444444;
}

h3 {
   color: #444444;
}

/* Единственное место, где задаётся вид <mark> — используется только для
   подсветки найденного текста в поиске (ts_headline, _mosaic_queryset),
   больше нигде в проекте не встречается, так что один глобальный стиль,
   без страничных переопределений. Плоская сплошная заливка (без градиента,
   без скругления) — настоящий маркер-хайлайтер по бумаге, а не бейдж.

   Полоса ФИКСИРОВАННОЙ высоты (2rem, от корневого font-size, не от
   локального) рисуется псевдоэлементом ::before, абсолютно
   спозиционированным — он вне потока и поэтому НЕ раздувает родителя: если
   бы высоту 2rem задавали на самом <mark> (как было раньше, display:inline-
   flex), внутри узкого чипа вроде "Исполнитель:" он раздувал бы сам чип
   выше соседних. Текст <mark> лежит поверх полосы по z-index, сам <mark> —
   display:inline-block (не inline): проценты/height у абсолютно
   спозиционированного ::before считаются от бокса ближайшего
   спозиционированного предка (тут — самого mark), а высота обычного inline-
   бокса в разных контекстах (голый текст vs baseline-выровненный флекс-чип)
   определяется по-разному — inline-block даёт однозначный content-box.

   Единственное известное исключение — однострочный адрес в шапке карточки
   (.f-addr, pages/feed.css): у него свой overflow:hidden под многоточие
   длинных адресов, и он же обрезает полосу до высоты строки — без
   overflow:hidden там не работало бы многоточие, так что здесь это
   неизбежный компромисс, не баг. */
mark {
    position: relative;
    display: inline-block;
    background: none;
    color: inherit;
    z-index: 0;
}
mark::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    left: -.5em;
    right: -.5em;
    height: 2rem;
    transform: translateY(-50%);
    /* Полупрозрачная заливка + multiply — краска маркера просвечивает текст
       и фон под собой, а не глушит их сплошным цветом, тот же эффект, что
       у настоящего фломастера-хайлайтера. */
    background-color: rgba(247, 255, 0, .6);
    mix-blend-mode: multiply;
}

details {
    background-color: whitesmoke;
}

code {
    margin-right: 1em;
    padding-left: 1em;
    padding-right: 1em;
    border: 1px solid #cbcbcb;
    border-radius: .5em;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

code_non {
    padding-left: .5em;
    padding-right: .5em;
    border: 1px solid #cbcbcb;
    border-radius: .5em;
    background-color: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

code_text {
    border: 1px solid #557a95;
    background-color: transparent;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
    display: inline-block;
}

code_text a {
    text-decoration: none;
    color: #557a95;
    padding: 0.15em 0.2em;
    transition: background-color 0.5s ease;
}

code_text a:hover {
    background-color: #d0e8f2;
}

table {
    font-size: small;
}

/* Общий класс "растянутого" описательного текста — используется
   и на публичных страницах, и в карточке заявки в дашборде */
.description {
    font-size: 1.2em;
    line-height: 1.5em;
}

/* --- Layout-примитивы (обёртки, отступы, футер) --- */

.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.l-box-my {
    padding-top: 1em;
    padding-left: 1em;
    padding-right: 1em;
}

.l-box-button {
    padding-top: 1em;
    padding-bottom: 1em;

    padding-right: 1em;
}

.l-box-my2 {
    padding-left: 2em;
    padding-right: 2em;
}

.l-box-sm {
    padding-top: 1em;
    padding-left: 2em;
    padding-right: 1em;
}

.l-box-md {
    padding: 2em;
}

.l-box-lg {
    padding: 3em;
}

.l-box {
    padding: 0.5em 2em;
}

aside {
    background: whitesmoke;
    color: #444444;
    border: 1px solid #ccc;
    font-style: italic;
    line-height: 1.5em;
    padding: 1em 1em;
    margin-bottom: 1em;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
}

.content_center {
    margin-left: auto;
    margin-right: auto;
    max-width: 768px;
    padding-left: 1em;
    padding-right: 1em;
    line-height: 1.5em;
}

.header_center {
    text-align: center;
    line-height: 2em;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-family: "Roboto Light", sans-serif;
    letter-spacing: .05em;
    margin-left: auto;
    margin-right: auto;
    max-width: 768px
}

.button_center {
    text-align: center;
}

.container_my { display: flex; justify-content: center; }

.content_my { text-align: center; }

.blog {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* Пустой декоративный баннер под шапкой — используется на всех
   публичных страницах (home/dispatch/crm/login/registration/changelog/
   personal_data_policy) как часть общего каркаса */
.banner {
    background: transparent url("/static/users/img/home_fill_scale.ad0efc329eea.jpg") no-repeat top center fixed;
    height: 350px;
    width: 100%;
    margin-bottom: 2em;
    display: table;
}

.footer {
    background: #557a95;
    color: whitesmoke;
    text-align: center;
    line-height: 1.75em;
    margin-top: auto;
}

.footer a {
    color: whitesmoke;
}