/**
 * @file base.css — базовая типографика и ритм движка (то, что Tailwind-сброс Mercury обнуляет и не возвращает).
 *
 * Зачем файл. Скомпилированный CSS Mercury (build/main.min.css) начинается со «сброса» Tailwind: у заголовков нет размера,
 * у абзацев и списков — отступов и маркеров, у таблиц и цитат — вида. Возвращают это только классы-утилиты внутри
 * собственных компонентов Mercury. Всё, что выводят Views, поля и текстовые форматы Drupal (обычная разметка без классов),
 * без этого файла плоское. Здесь — единая основа для такой разметки.
 *
 * Как устроено. Всё внутри `@layer base`: слой ниже утилит Tailwind (компоненты Mercury с классами не меняются)
 * и выше сброса (наши правила его перебивают). Размеры, цвета, радиусы, ритм — только через токены (src/theme.css:
 * --ee-*, --foreground, --border и др.): сайт меняет токены, а не этот файл. Правила «по компонентам» (карточки, шапка,
 * шторки, формы заявок) — в css/engine.css и components/*; они не в слое и выигрывают у этого файла.
 * Область применения: main, подвал и класс .ee-prose; тело меню и шапки не затрагивается.
 */
@layer base {
  /* ---------- страница ---------- */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body {
    font-family: var(--font-body);
    font-size: var(--ee-text);
    line-height: var(--ee-leading);
    color: var(--foreground);
    background: var(--background);
    overflow-wrap: break-word;
    text-rendering: optimizeLegibility;
  }
  ::selection { background: var(--accent); color: var(--accent-foreground); }
  main { display: block; min-width: 0; }
  .ee-container { max-width: var(--ee-container); margin-inline: auto; padding-inline: var(--ee-gutter); }
  .ee-section { margin-block: var(--ee-section-gap); }
  .ee-section--tight { margin-block: calc(var(--ee-section-gap) / 2); }

  /* ---------- заголовки ---------- */
  main :is(h1, h2, h3, h4, h5, h6), footer :is(h1, h2, h3, h4, h5, h6), .ee-prose :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--font-sans);
    font-weight: var(--ee-heading-weight);
    line-height: var(--ee-heading-leading);
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--foreground);
    margin-block: 1.6em 0.5em;
    scroll-margin-top: calc(var(--ee-header-height) + 1rem);
  }
  main h1, .ee-prose h1 { font-size: var(--ee-h1); letter-spacing: -0.02em; }
  main h2, footer h2, .ee-prose h2 { font-size: var(--ee-h2); letter-spacing: -0.015em; }
  main h3, footer h3, .ee-prose h3 { font-size: var(--ee-h3); }
  main h4, footer h4, .ee-prose h4 { font-size: var(--ee-h4); }
  main h5, footer h5, .ee-prose h5 { font-size: var(--ee-h5); }
  main h6, footer h6, .ee-prose h6 { font-size: var(--ee-h6); text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); }
  :is(main, footer, .ee-prose) :is(h1, h2, h3, h4, h5, h6):first-child { margin-top: 0; }
  :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0.5em; }
  /* заголовок единственный в обёртке-шапке секции (Canvas: <header class="mb-6…">): отступ задаёт обёртка */
  :is(main, footer) header > :is(h1, h2, h3, h4, h5, h6):only-child { margin: 0; }

  /* Малая надпись-рубрика над заголовком секции и подзаголовок (как «eyebrow» в макете) */
  .ee-eyebrow { display: block; margin: 0 0 0.5rem; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary); }
  .ee-section-head { max-width: 40rem; margin: 0 0 clamp(1.25rem, 1rem + 1.2vw, 2rem); }
  .ee-section-head > :is(h1, h2, h3) { margin: 0; }
  .ee-section-head > p { margin: 0.5rem 0 0; color: var(--muted-foreground); font-size: 1.0625rem; }
  .ee-lead { font-size: 1.1875rem; line-height: 1.55; color: var(--muted-foreground); }

  /* ---------- текст: то, что пишет редактор и выводят поля (без классов) ---------- */
  :is(.ee-prose, .field__item, .field-content, .text-formatted, .font-body, .view-header, .view-footer, .view-empty, .messages) p {
    margin-block: 0 var(--ee-space);
  }
  :is(.ee-prose, .field__item, .field-content, .text-formatted, .font-body) > :is(p, ul, ol, dl, blockquote):last-child { margin-bottom: 0; }
  :is(.ee-prose, .text-formatted, .field--type-text-long .field__item, .field--type-text-with-summary .field__item, .layout-content .font-body) > :is(p, ul, ol, dl, blockquote, h2, h3, h4, h5, h6) { max-width: var(--ee-measure); }
  strong, b { font-weight: 700; }
  small, .ee-small { font-size: 0.875rem; }
  mark { background: var(--accent); color: var(--accent-foreground); padding: 0 0.2em; border-radius: 0.2em; }
  abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }
  sub, sup { font-size: 0.75em; line-height: 0; }
  :is(main, footer, .ee-prose) a:not([class]) { text-decoration: underline; text-decoration-thickness: 1px; }
  :is(main, footer, .ee-prose) a:not([class]):hover { text-decoration-thickness: 2px; }

  /* ---------- списки (у «классных» списков — меню, пагинация, чипы — сброс остаётся) ---------- */
  :is(main, footer, .ee-prose) :is(ul, ol):not([class]) { margin-block: 0 var(--ee-space); padding-left: 1.4em; }
  :is(main, footer, .ee-prose) ul:not([class]) { list-style: disc; }
  :is(main, footer, .ee-prose) ol:not([class]) { list-style: decimal; }
  :is(main, footer, .ee-prose) :is(ul, ol):not([class]) :is(ul, ol):not([class]) { margin-block: 0.35em 0; }
  :is(main, footer, .ee-prose) ul:not([class]) ul:not([class]) { list-style: circle; }
  :is(main, footer, .ee-prose) ul:not([class]) ul:not([class]) ul:not([class]) { list-style: square; }
  :is(main, footer, .ee-prose) :is(ul, ol):not([class]) > li { margin-bottom: 0.35em; padding-left: 0.2em; }
  :is(main, footer, .ee-prose) li::marker { color: var(--muted-foreground); }
  :is(main, footer, .ee-prose) dl:not([class]) { margin-block: 0 var(--ee-space); }
  :is(main, footer, .ee-prose) dl:not([class]) dt { font-weight: 700; margin-top: 0.75em; }
  :is(main, footer, .ee-prose) dl:not([class]) dd { margin: 0.15em 0 0; color: var(--muted-foreground); }

  /* ---------- цитата, линия, код ---------- */
  :is(main, footer, .ee-prose) blockquote:not([class]) {
    margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 4px solid var(--primary);
    font-size: 1.1875rem; line-height: 1.55; color: var(--foreground); font-style: italic;
  }
  :is(main, footer, .ee-prose) blockquote > :last-child { margin-bottom: 0; }
  :is(main, footer, .ee-prose) blockquote cite, :is(main, footer, .ee-prose) blockquote footer { display: block; margin-top: 0.5rem; font-size: 0.875rem; font-style: normal; color: var(--muted-foreground); }
  :is(main, footer, .ee-prose) hr { margin-block: 2rem; border: 0; border-top: 1px solid var(--border); height: 0; }
  code, kbd, samp, pre { font-family: var(--font-mono); font-size: 0.9em; }
  :not(pre) > code, kbd, samp { padding: 0.12em 0.4em; border-radius: 0.35em; background: var(--muted); border: 1px solid var(--border); }
  kbd { box-shadow: 0 1px 0 var(--border); font-weight: 600; }
  pre {
    margin-block: 0 var(--ee-space); padding: 1rem 1.15rem; overflow-x: auto; max-width: 100%;
    background: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); line-height: 1.5; tab-size: 2;
  }
  pre code { padding: 0; background: none; border: 0; font-size: inherit; }

  /* ---------- картинки и подписи ---------- */
  :is(main, footer, .ee-prose) img, :is(main, footer, .ee-prose) video { max-width: 100%; height: auto; }
  :is(.ee-prose, .field__item, .text-formatted, .font-body) :is(img, video):not([class]) { border-radius: var(--radius); }
  :is(main, footer, .ee-prose) figure { margin: 1.5rem 0; max-width: 100%; }
  :is(main, footer, .ee-prose) figure img { display: block; }
  :is(main, footer, .ee-prose) figcaption { padding-top: 0.5rem; font-size: 0.875rem; color: var(--muted-foreground); }

  /* ---------- таблицы: границы, зебра, прокрутка на узких экранах ---------- */
  :is(.ee-prose, .field__item, .text-formatted, .font-body, .view-content, .view-header) table:not(.ee-table) {
    width: 100%; margin-block: 1.5rem; border-collapse: collapse; font-size: 0.9375rem;
  }
  /* на узких экранах таблица прокручивается сама (обёртки в разметке Drupal нет) */
  @media (max-width: 47.99rem) {
    :is(.ee-prose, .field__item, .text-formatted, .font-body, .view-content, .view-header) table:not(.ee-table) { display: block; max-width: 100%; overflow-x: auto; }
  }
  :is(.ee-prose, .field__item, .text-formatted, .font-body, .view-content, .view-header) table:not(.ee-table) :is(th, td) { padding: 0.65rem 0.9rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); }
  :is(.ee-prose, .field__item, .text-formatted, .font-body, .view-content, .view-header) table:not(.ee-table) thead th { background: var(--muted); border-bottom: 1px solid var(--input); font-weight: 700; white-space: nowrap; }
  :is(.ee-prose, .field__item, .text-formatted, .font-body, .view-content, .view-header) table:not(.ee-table) tbody tr:nth-child(even) { background: color-mix(in oklab, var(--muted) 55%, transparent); }
  :is(.ee-prose, .field__item, .text-formatted, .font-body, .view-content, .view-header) table:not(.ee-table) caption { caption-side: top; padding: 0 0 0.5rem; text-align: left; font-weight: 700; }

  /* ---------- формы: подписи, поля, состояния (основа полей и кнопки — в engine.css) ---------- */
  fieldset { margin: 0 0 1.25rem; padding: 1rem 1.15rem 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); min-width: 0; }
  legend { padding: 0 0.5rem; font-weight: 700; }
  fieldset.form-composite > legend, fieldset > legend.fieldset-legend { font-size: 1rem; }
  input, select, textarea, button { font: inherit; color: inherit; }
  select { appearance: none; padding-right: 2.5rem; }   /* стрелка списка — в engine.css (там фон полей, вне слоя) */
  textarea { resize: vertical; }
  input::placeholder, textarea::placeholder { color: var(--muted-foreground); opacity: 1; }
  input[type="file"] { max-width: 100%; }
  input:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus) { border-color: var(--foreground); }
  input:disabled, select:disabled, textarea:disabled, button:disabled, .is-disabled { opacity: 0.55; cursor: not-allowed; background-color: var(--muted); }
  input.error, select.error, textarea.error, [aria-invalid="true"] { border-color: var(--ee-danger); box-shadow: 0 0 0 1px var(--ee-danger); }
  .form-item--error-message, .form-item__error-message, .error-message { margin-top: 0.35rem; font-size: 0.875rem; color: var(--ee-danger); font-weight: 600; }
  .form-item__label.has-error, label.error { color: var(--ee-danger); }
  .form-item .description, .form-item__description { margin-top: 0.3rem; }
  .form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.25rem; }
  .form-actions .button, .form-actions input[type="submit"] { margin: 0; }
  /* кнопки: основная (по умолчанию в engine.css), вторичная, контурная, опасная */
  .button--secondary, .ee-btn--secondary { background: var(--secondary) !important; color: var(--secondary-foreground) !important; }
  .button--outline, .ee-btn--outline { background: transparent !important; color: var(--primary) !important; box-shadow: inset 0 0 0 1.5px var(--primary); }
  .button--danger, .ee-btn--danger { background: var(--ee-danger) !important; color: var(--destructive-foreground) !important; }
  .button:disabled, input[type="submit"]:disabled, .button.is-disabled { filter: none; transform: none; }

  /* ---------- аккордеон: details / summary ---------- */
  :is(main, footer, .ee-prose) details:not([class]) { margin: 0 0 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); }
  :is(main, footer, .ee-prose) details:not([class]) > summary { cursor: pointer; padding: 0.85rem 1.1rem; font-weight: 600; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
  :is(main, footer, .ee-prose) details:not([class]) > summary::-webkit-details-marker { display: none; }
  :is(main, footer, .ee-prose) details:not([class]) > summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; margin-top: -0.2rem; }
  :is(main, footer, .ee-prose) details:not([class])[open] > summary::after { transform: rotate(-135deg); margin-top: 0.2rem; }
  :is(main, footer, .ee-prose) details:not([class])[open] > summary { border-bottom: 1px solid var(--border); }
  :is(main, footer, .ee-prose) details:not([class]) > :not(summary) { margin-inline: 1.1rem; }
  :is(main, footer, .ee-prose) details:not([class]) > summary + * { margin-top: 0.85rem; }
  :is(main, footer, .ee-prose) details:not([class]) > :last-child { margin-bottom: 1rem; }

  /* ---------- сообщения (встроенные блоки, .messages; плавающие сообщения Drupal остаются как у Mercury) ---------- */
  /* варианты .messages--status/warning/error — в engine.css (там же базовое правило .messages; оно вне слоя и перебило бы эти) */
  .messages ul { margin: 0.25rem 0 0; padding-left: 1.2rem; list-style: disc; }

  /* ---------- бейджи и теги ---------- */
  .ee-badge {
    display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15rem 0.7rem; border-radius: var(--ee-radius-pill);
    background: var(--secondary); color: var(--secondary-foreground); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; text-decoration: none; white-space: nowrap;
  }
  .ee-badge--ok { background: color-mix(in oklab, var(--ee-status-ok) 12%, var(--background)); color: var(--ee-status-ok); }
  .ee-badge--warn { background: color-mix(in oklab, var(--ee-status-warn) 12%, var(--background)); color: var(--ee-status-warn); }
  .ee-badge--bad { background: color-mix(in oklab, var(--ee-status-bad) 10%, var(--background)); color: var(--ee-status-bad); }
  .ee-badge--done { background: var(--muted); color: var(--ee-status-done); }
  .ee-badge--solid { background: var(--primary); color: var(--primary-foreground); }
  a.ee-badge:hover { background: var(--accent); color: var(--accent-foreground); }

  /* ---------- карточки (для ручной вёрстки; карточки Views оформлены в engine.css теми же токенами) ---------- */
  .ee-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--ee-card-bg); border: 1px solid var(--ee-card-border); border-radius: var(--ee-radius-card); box-shadow: var(--ee-card-shadow); }
  .ee-card__body { display: flex; flex-direction: column; gap: 0.35rem; padding: 1rem 1.1rem 1.15rem; }
  .ee-card__title { margin: 0; font-size: 1.05rem; font-weight: 600; line-height: 1.3; }
  .ee-card__meta { margin: 0; font-size: 0.9rem; color: var(--muted-foreground); }
  .ee-card__media { position: relative; background: var(--muted); }
  .ee-card__media img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
  .ee-card__media .ee-badge { position: absolute; top: 0.75rem; left: 0.75rem; }
  .ee-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--ee-card-min)), 1fr)); }
  @media (min-width: 40rem) { .ee-grid { gap: 1.5rem; } }
  @media (min-width: 80rem) { .ee-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  /* широкая полоса призыва к действию */
  .ee-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: var(--ee-radius-card); background: var(--accent); color: var(--accent-foreground); }
  .ee-cta > :first-child { flex: 1 1 18rem; min-width: 0; }
  .ee-cta :is(h2, h3) { margin: 0 0 0.35rem; }
  .ee-cta p { margin: 0; color: var(--muted-foreground); max-width: 34rem; }
  .ee-cta a.button, .ee-cta .ee-btn { flex: none; }

  /* ---------- хлебные крошки и пагинация (см. также engine.css) ---------- */
  nav[aria-label="Breadcrumb"] ol, .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0; padding: 0; }
}