/* Статьи (docs/design/admin/Adm_Article.dc.html): список, редактор (.ed-grid), адрес (.slug), сниппет поиска. */
@layer pages {
  /* .ed-grid */
  .admin-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
  .admin-editor-grid__main, .admin-editor-grid__side { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  .admin-editor-grid__side { gap: 16px; }

  .admin-heading-panel { display: flex; flex-direction: column; gap: 12px; padding: 24px 28px; }
  .admin-heading-panel__label { color: var(--ink-3); font-size: 15px; font-weight: 600; }
  .admin-heading-panel__label--lead { margin-top: 8px; }
  /* .title-inp / .lead-inp — без рамки, как текст на странице */
  .admin-title-input {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 600 40px/1.15 var(--font);
    letter-spacing: -0.012em;
    resize: none;
    field-sizing: content;
  }
  .admin-title-input--case { font-size: 28px; }
  .admin-lead-input {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink-2);
    font: 400 20px/1.55 var(--font);
    resize: none;
    field-sizing: content;
  }
  .admin-title-input:focus, .admin-lead-input:focus { outline: none; }
  .admin-heading-panel:focus-within { box-shadow: var(--shadow), 0 0 0 2px var(--focus-soft); }

  .admin-readonly { font-size: 16px; }

  /* «Заглавное фото» (.cv-ed): превью 2:1 и поля в две колонки; без фото — строка-загрузчик (.drop в строку) */
  .admin-article-cover__optional { color: var(--ink-3); font-size: 15px; font-weight: 400; }
  .admin-article-cover .admin-panel__head .btn { flex: none; white-space: nowrap; }
  .admin-article-cover__editor {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
  }
  .admin-article-cover__frame { position: relative; aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--r-img); background: var(--ph-a); }
  .admin-article-cover__frame > img, .admin-article-cover__picked {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Поле файла спрятано: фокус с клавиатуры показываем на рамке или строке-загрузчике */
  .admin-article-cover:has(#page_cover:focus-visible) :is(.admin-article-cover__frame, .admin-article-cover__drop) { outline: 3px solid var(--focus); }
  .admin-article-cover__picked { aspect-ratio: 2 / 1; height: auto; border-radius: var(--r-img); }
  .admin-article-cover__fields { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
  .admin-article-cover__drop {
    position: static;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 16px;
    padding: 22px 20px;
    text-align: left;
  }
  .admin-article-cover__drop .icon { flex: none; }
  .admin-article-cover__drop-text { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; }
  #page_cover_error:empty { display: none; }

  /* .slug — адрес с хостом слева */
  .admin-slug {
    display: flex;
    align-items: center;
    overflow: hidden;
    border: 1.5px solid var(--ctl);
    border-radius: var(--r-ctl);
    background: var(--surface);
  }
  .admin-slug:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-soft); }
  .admin-slug__host { padding: 0 10px 0 14px; color: var(--ink-3); font-size: 15px; white-space: nowrap; }
  .admin-slug__input {
    flex: 1;
    min-width: 0;
    min-height: 52px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font: 500 16px var(--font-mono);
  }
  .admin-slug__input:focus { outline: none; }
  .admin-slug__input:read-only { color: var(--ink-2); }
  .admin-slug__unlock { font-size: 15px; }
  .admin-slug__unlock input { width: 20px; height: 20px; }

  .admin-count { color: var(--ink-3); font-size: 13px; text-align: right; }
  .admin-count--over { color: var(--danger-ink); font-weight: 600; }

  /* Превью в выдаче поиска */
  .admin-serp {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border-radius: var(--r-ctl);
    background: var(--soft-2);
    font-size: 15px;
    line-height: 1.4;
  }
  .admin-serp__title { color: var(--serp-title); font-size: 17px; }
  .admin-serp__url { color: var(--serp-url); overflow-wrap: anywhere; }
  .admin-serp__text { color: var(--ink-3); }

  .admin-publication-meta { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

  /* Список статей */
  .admin-page-list { display: flex; flex-direction: column; overflow: hidden; }
  .admin-page-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    text-decoration: none;
  }
  .admin-page-row:last-child { border-bottom: 0; }
  .admin-page-row:hover { background: var(--soft-2); }
  .admin-page-row__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
  .admin-page-row__title { font-size: 17px; font-weight: 600; }
  .admin-page-row__meta { display: flex; flex-wrap: wrap; gap: 6px 14px; color: var(--ink-3); font-size: 14px; }
  .admin-page-row__path { font-family: var(--font-mono); overflow-wrap: anywhere; }

  .admin-new-page { max-width: 640px; padding: 24px 28px; }

  /* Баннер над превью статьи в оформлении сайта */
  .admin-preview-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-bottom: 24px;
    padding: 14px 18px;
    border-radius: var(--r-ctl);
    background: var(--sand);
    color: var(--sand-ink);
    font-size: 16px;
  }
  .admin-preview-banner .link { margin-left: auto; }

  @media (max-width: 820px) {
    .admin-editor-grid { grid-template-columns: minmax(0, 1fr); }
    .admin-heading-panel { padding: 20px 16px; }
    .admin-article-cover__editor { grid-template-columns: minmax(0, 1fr); }
    .admin-title-input { font-size: 28px; }
    .admin-lead-input { font-size: 18px; }
    .admin-page-row { align-items: flex-start; flex-direction: column; gap: 8px; }
  }
}