/* Почта Alpost. Базовый скин подключается целиком и правится точечно —
   так обновления Roundcube приходят сами, а наших правок остаётся немного.
   Его стили подключены ссылкой перед этим файлом (templates/includes/layout.html
   и страница второго шага в плагине), а не @import: импорт начинал грузиться
   только после этого файла. */

/* Тот же шрифт, что на сайте: почта и портал должны читаться как одно.
   Файлы лежат в скине — обращений к чужим серверам нет. Plex переменной
   толщины: один файл на подмножество даёт 400–700 (диапазон в font-weight). */
@font-face{font-family:Plex;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/plex-400-cyrillic-ext.woff2) format('woff2');unicode-range:U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F}
@font-face{font-family:Plex;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/plex-400-cyrillic.woff2) format('woff2');unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116}
@font-face{font-family:Plex;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/plex-400-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:Plex;font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/plex-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  --al-red:#da291c;
  --al-red-dark:#a81f14;
  --al-ink:#000;
  --al-line:#e5e5e5;
  --al-fill:#ededed;
  --al-soft:#767676;
}

html, body, .propform, input, select, textarea, button{
  font-family:Plex,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

/* Левая панель задач — чёрная, как тёмные блоки портала. */
#layout > .menu, #taskmenu{ background:var(--al-ink); }
#taskmenu a{ color:#fff; }
#taskmenu a:hover{ background:#1c1c1c; color:#fff; }
#taskmenu a.selected{ background:var(--al-red); color:#fff; }
#taskmenu a.selected:before, #taskmenu a.selected:after{ background:var(--al-red); }

a, a:hover{ color:var(--al-red); }

/* Кнопки: основная — красная, второстепенная — чёрная рамка. Скруглений нет:
   на портале все элементы прямоугольные. */
.btn, .btn-primary, .btn-secondary, button, input[type=submit]{ border-radius:0; }
.btn-primary, a.btn-primary, button.btn-primary, input.btn-primary{
  background:var(--al-red); border-color:var(--al-red); color:#fff;
}
.btn-primary:hover, button.btn-primary:hover{ background:var(--al-red-dark); border-color:var(--al-red-dark); }
.btn-secondary{ background:#fff; border:1px solid var(--al-ink); color:var(--al-ink); }

input.form-control:focus, select.form-control:focus, textarea.form-control:focus{
  border-color:var(--al-ink); box-shadow:none;
}

/* Экран входа. */
#layout-content.no-navbar{ background:#fff; }
#login-form{ border:1px solid var(--al-line); border-radius:0; box-shadow:none; }
#logo{ max-width:190px; height:auto; margin-bottom:26px; }
#login-footer{ color:var(--al-soft); font-size:12px; letter-spacing:.02em; }

/* Фон входа (02.10.2026): четыре картинки по очереди — al-bg.js ставит html[data-al-bg]. Кадрирование — по главному
   на снимке, чтобы на телефоне остались вершины и парус. Фото: Unsplash (свободная лицензия), горизонтали — свои. */
body.task-login{ background:#e8ebee center/cover no-repeat; }
html[data-al-bg="1"] body.task-login{ background-image:url(../images/bg/glacier.webp); background-position:45% 70%; }
html[data-al-bg="2"] body.task-login{ background-image:url(../images/bg/clouds.webp); background-position:50% 40%; }
html[data-al-bg="3"] body.task-login{ background-image:url(../images/bg/lake.webp); background-position:72% 60%; }
html[data-al-bg="4"] body.task-login{ background-image:url(../images/bg/alps.svg); background-position:42% 53%; }
body.task-login #layout-content.no-navbar{ background:transparent; }
body.task-login #logo{ background:rgba(255,255,255,.9); padding:10px 16px; box-sizing:content-box; }
html.dark-mode body.task-login #logo{ background:rgba(33,41,44,.9); }
body.task-login #login-form{ background:rgba(255,255,255,.97); border-color:transparent; box-shadow:0 12px 40px rgba(0,0,0,.22); padding:28px 30px 22px; }
html.dark-mode body.task-login::before{ content:""; position:fixed; inset:0; background:rgba(0,0,0,.45); pointer-events:none; }
html.dark-mode body.task-login #login-form{ background:rgba(33,41,44,.96); }

/* Список писем: непрочитанные выделяем красной чертой, а не цветом строки. */
#messagelist tr.unread td.subject{ font-weight:600; }
#messagelist tr.selected > td{ background:var(--al-fill); color:var(--al-ink); }
#messagelist tr.unread > td.flag span.flag:before{ color:var(--al-red); }

.menu a.active, .listing li.selected > a{ color:var(--al-ink); }

/* Шапка — как на сайте: знак, разделы с красными значками, справа — то,
   что у родителя жило в тёмной панели задач. В рамках (письмо открывается во
   вложенном окне) шапки быть не должно — иначе она удвоится.
   Под шапкой — красная полоса: на сайте в этом месте красная строка с
   котировками, и глаз узнаёт страницу по ней. */
.al-hdr{flex:0 0 auto;background:#fff;border-bottom:4px solid var(--al-red);position:relative;z-index:20}
.al-hdr__in{display:flex;align-items:center;gap:30px;height:60px;padding:0 22px}
.al-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--al-ink)}
.al-logo svg{display:block;flex:none}
.al-logo b{font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1}
.al-nav{display:flex;gap:24px;min-width:0}
.al-nav a{display:inline-flex;align-items:center;gap:8px;color:var(--al-ink);text-decoration:none;
  font-size:15px;white-space:nowrap}
.al-nav a:hover,.al-nav a.is-on{color:var(--al-red)}
.al-ico{flex:none;color:var(--al-red)}
.al-hdr__right{margin-left:auto;display:flex;align-items:center;gap:18px;white-space:nowrap}
.al-tool{color:var(--al-ink);text-decoration:none;font-size:14px}
a.al-tool:hover,a.al-tool.selected{color:var(--al-red)}
.al-theme{display:inline-flex;align-items:center}
.al-theme .al-sun{display:none}
html.dark-mode .al-theme .al-sun{display:inline}
html.dark-mode .al-theme .al-moon{display:none}
.al-user{font:400 12px/1 PlexMono,ui-monospace,Menlo,monospace;color:var(--al-soft);
  max-width:220px;overflow:hidden;text-overflow:ellipsis}
.al-cab{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;
  border:1px solid var(--al-ink);color:var(--al-ink);text-decoration:none;font-size:14px}
.al-cab:hover{border-color:var(--al-red);color:var(--al-red)}

/* Страница — колонка: шапка, приложение, подвал. Так высота приложения
   вычисляется сама, а панель задач внутри него не может вылезти за свои
   границы и накрыть подвал — у неё очень высокий z-index, и подпирать её
   отступами пришлось бы вечно. */
body{display:flex;flex-direction:column;height:100%}
#layout{flex:1 1 auto;height:auto;min-height:0}

html.iframe .al-hdr{display:none}
html.iframe #layout{height:100%}
/* На входе справа показывать нечего: ни контактов, ни настроек ещё нет. */
body.task-login .al-hdr__right,body.task-error .al-hdr__right{display:none}

html.dark-mode .al-hdr{background:#21292c}
html.dark-mode .al-logo,html.dark-mode .al-nav a,html.dark-mode .al-tool{color:#fff}
html.dark-mode .al-nav a.is-on,html.dark-mode .al-nav a:hover,html.dark-mode a.al-tool.selected{color:#ff6a5c}
html.dark-mode .al-cab{border-color:#fff;color:#fff}

/* Панель задач. На широком экране всё её содержимое есть в шапке, и
   тёмная полоса слева была бы вторым меню. На узком она остаётся: там
   родитель превращает её в выдвижное меню, а шапка сжимается до знака. */
@media (min-width:1200px){
  #layout-menu{display:none!important}
}
@media (max-width:1199px){
  .al-hdr__right .al-tool,.al-user{display:none}
  .al-nav{gap:16px}
}
@media (max-width:980px){
  .al-nav a{font-size:0;gap:0}
  .al-nav{gap:14px}
}
@media (max-width:768px){
  .al-hdr__in{height:48px;padding:0 14px;gap:14px}
  .al-logo b{font-size:21px}
  .al-logo svg{width:24px;height:24px}
  .al-nav,.al-cab{display:none}
}

/* Подвал под приложением почты. Узкий: почте нужна высота, а подвал
   здесь несёт справочную роль, а не навигационную. */
/* Нижние кнопки бокового меню («тёмный режим», «о программе», «выход»)
   у родителя заданы как position:absolute; bottom:0. Точкой отсчёта им
   служил весь документ, потому что все предки — static, и они уезжали на
   самый низ окна, под наш подвал. Кнопка «Выход» пропадала целиком.

   Раньше я лечил это приоритетом наложения у подвала — но так подвал
   просто ложился сверху, то есть проблема менялась местами, а не решалась.
   Настоящее исправление ниже: делаем колонку меню точкой отсчёта, и кнопки
   прижимаются к её низу, а он как раз над подвалом. */
#layout-menu{ position:relative; }
/* Высота задана жёстко, перенос разрешён, лишнее срезано. Это и есть
   правило старшинства без единого числа про ширину: флексбокс разбивает
   строки по естественным размерам элементов ДО того, как начнёт их
   сжимать, поэтому не поместившийся блок уходит на вторую строку целиком —
   а её не видно. Сжимается потом только слоган, и только если не хватает
   места уже ему со ссылками.

   Порогами в пикселях то же не делается: подписи на четырёх языках разной
   длины (французские в полтора раза длиннее русских), и одно число было бы
   верным ровно для одного языка. */
.al-foot{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;
  gap:18px;height:38px;padding:10px 14px;box-sizing:border-box;overflow:hidden;
  background:#fff;border-top:1px solid var(--al-line);font-size:12px;color:var(--al-soft);
  position:relative;z-index:1}
/* Основание ноль — ключ ко всему порядку. При разбиении на строки
   флексбокс смотрит на естественную ширину элемента, а у слогана она 618
   пикселей: со своим настоящим размером он выталкивал со строки ссылки,
   то есть самое нужное. С нулевым основанием слоган в разбиении не
   участвует вовсе — он просто занимает то, что осталось, и обрезается
   многоточием. Растягивается он же: отступы auto здесь не годятся, они
   съедают свободное место раньше, чем до него доберётся рост. */
.al-foot__tag{margin:0;flex:1 1 0;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:18px}
.al-foot__links{display:flex;gap:16px;flex:0 0 auto;
  white-space:nowrap;line-height:18px}
.al-foot__links a{color:var(--al-soft);text-decoration:none}
.al-foot__links a:hover{color:var(--al-red)}

/* Знаки семейства доменов. Два auto-отступа подряд — у знаков и у ссылок —
   делят свободное место поровну, и ряд встаёт посередине сам, без подбора
   ширин. Подписи тут мельче, чем на сайте: в полосу 38 пикселей знаки сайта
   ростом 19 не помещаются, а полосу почта себе позволить не может. */
.al-foot__brands{display:flex;align-items:center;gap:16px;
  flex:0 0 auto;white-space:nowrap;line-height:18px}
.al-brand{display:inline-flex;align-items:center;gap:5px}
.al-brand b{font:700 13px/1 Plex,Arial,sans-serif;letter-spacing:-.03em;color:var(--al-ink)}
.al-brand b span{font-weight:400;color:var(--al-soft)}
html.dark-mode .al-brand b{color:#e6ecee}
html.dark-mode .al-brand b span{color:#9aa4a8}


.al-foot{flex:0 0 auto}
html.iframe .al-foot{display:none}

/* Приглушённый цвет — единственный из наших токенов, который означает
   «текст». В тёмной теме он обязан посветлеть, иначе #767676 на тёмном фоне
   даёт контраст 2.9 при минимально читаемых 4.5. Остальные токены (--al-ink
   для чёрной колонки, --al-red) от темы не зависят и остаются как есть. */
html.dark-mode{ --al-soft:#9aa4a8; }
html.dark-mode .al-foot{background:#21292c;border-top-color:#3a4448}
/* Ссылкам подвала приходится повторять цвет явно: наше же правило
   `html.dark-mode a{...}`, которым вытравливается голубой родителя, весит
   больше узкого `.al-foot__links a` и перебивает его. Широкие правила
   зачистки тем и опасны — они выигрывают у всего, что написано точнее. */
html.dark-mode .al-foot__links a{color:var(--al-soft)}
html.dark-mode .al-foot__links a:hover{color:#fff}

/* На телефоне высота дороже справки. */
@media (max-width:768px){
  .al-foot{display:none}
}

/* ─────────────────────────────────────────────────────────────────────
   Остатки родительского оформления.

   Родитель красит выделение и главное действие в голубой #37beff. Это
   единственный чужой цвет, который остаётся виден после всего прочего,
   и он спорит с нашим красным на той же странице.

   Селекторы найдены не чтением 150 КБ собранных стилей, а обходом живой
   страницы: скрипт прошёл по всем видимым узлам и псевдоэлементам и
   отобрал те, у кого синевы больше красного. Так не остаётся правил,
   написанных «на всякий случай», — каждое закрывает увиденное место.
   ──────────────────────────────────────────────────────────────────── */

/* Главное действие — «написать». У родителя это синий круг, у нас
   прямоугольник в цвете сервиса: круглых форм на сайте нет нигде. */
a.compose,
a.compose span.inner,
#taskmenu a.compose,
.floating-action-buttons a.button.compose{
  color:#fff;
  background:var(--al-red);
  border-color:var(--al-red);
  border-radius:0;
}
a.compose:before,
#taskmenu a.compose:before,
.floating-action-buttons a.button.compose:before{ color:#fff; }
a.compose:hover,
.floating-action-buttons a.button.compose:hover{
  background:var(--al-red-dark);
  border-color:var(--al-red-dark);
}

/* Выделенная строка настроек и списков: полоса слева нашим цветом. */
td.section.selected,
.listing li.selected,
.listing tr.selected{ border-left-color:var(--al-red); }

/* Рамка вокруг того, что выбрано с клавиатуры. Родитель рисует её
   голубой; убирать нельзя — по ней ходят без мыши, поэтому перекрашиваем. */
*:focus-visible{ outline:2px solid var(--al-red); outline-offset:1px; }

/* Прямые углы. На сайте нет ни одного скругления, и вебмейл не должен
   быть единственным местом, где они есть. */
.ui.button, .btn, button, input, select, textarea,
.popupmenu, .ui.dialog, .dialog-content,
.listing, #messagelist, .contentbox, .boxtitle,
.floating-action-buttons a.button{ border-radius:0 !important; }

/* Полоса занятого места внизу списка. У родителя она голубая — красим
   в наш цвет, но не в красный: красный на сайте значит «действие» или
   «внимание», а заполненный на четверть ящик не значит ни того, ни другого. */
#quotadisplay span.value,
.quota_text span.value,
#quotadisplay .bar{ background:var(--al-ink); }

/* Кнопка «Отправить» и ссылки-кнопки в окне письма.
   Первое правило про кнопку у нас уже было, но не срабатывало: родитель
   пишет «.btn.btn-primary» — два класса, а у нас стояло «button.btn-primary»
   — класс и тег. По весу селектора выигрывал родитель, и кнопка оставалась
   голубой. Ошибка незаметная: правило есть, выглядит верным, не действует. */
.btn.btn-primary,
button.btn.btn-primary,
a.btn.btn-primary{
  background:var(--al-red);
  border-color:var(--al-red);
  color:#fff;
}
.btn.btn-primary:hover,
button.btn.btn-primary:hover{ background:var(--al-red-dark); border-color:var(--al-red-dark); }

/* Ссылки-кнопки («открыть в новом окне» и подобные). */
.btn-link, a.btn.btn-link{ color:var(--al-red); }

/* Тёмный режим. Родитель держит для него отдельный набор правил с более
   высоким весом, и наши цвета там проигрывают: фон кнопки уже наш, а текст
   на ней оставался голубым. Повторяем те же правила с приставкой
   html.dark-mode — не ради красоты, а потому что иначе не перевесить. */
html.dark-mode a.compose,
html.dark-mode a.compose span.inner,
html.dark-mode #taskmenu a.compose,
html.dark-mode #taskmenu a.compose span,
html.dark-mode .floating-action-buttons a.button.compose{
  color:#fff;
  background:var(--al-red);
  border-color:var(--al-red);
}
html.dark-mode a.compose:before,
html.dark-mode #taskmenu a.compose:before{ color:#fff; }

html.dark-mode a,
html.dark-mode a:hover,
html.dark-mode .btn-link,
html.dark-mode .listing li.selected > a,
html.dark-mode li.listitem.selected > a{ color:var(--al-red); }

html.dark-mode .btn.btn-primary,
html.dark-mode button.btn.btn-primary{
  background:var(--al-red); border-color:var(--al-red); color:#fff;
}

/* В тёмном режиме чёрный фон бокового меню сливается с фоном страницы,
   поэтому там он чуть светлее — граница между колонками должна читаться. */
html.dark-mode #layout > .menu,
html.dark-mode #taskmenu{ background:#16191b; }

/* Выбранная папка в списке. */
#mailboxlist li.mailbox.selected > a,
#mailboxlist li.mailbox.selected,
html.dark-mode #mailboxlist li.mailbox.selected > a,
html.dark-mode #mailboxlist li.mailbox.selected{ color:var(--al-red); }

/* Подсветка выбранной строки в списках. Родитель красит её бледно-голубым
   rgb(235,249,255) — настолько бледным, что автоматический поиск чужих
   цветов его пропускал, а глаз замечал сразу. Ставим наш нейтральный
   серый: выделение должно отличаться по светлоте, а не по оттенку. */
.listing li.selected > a,
#mailboxlist li.selected > a,
#mailboxlist li.mailbox.selected > a,
.listing tr.selected > td{ background:var(--al-fill); }
html.dark-mode .listing li.selected > a,
html.dark-mode #mailboxlist li.selected > a,
html.dark-mode .listing tr.selected > td{ background:#2a3135; }

/* ─────────────────────────────────────────────────────────────────────
   Свой список писем.

   Движок отдаёт строку разметкой, где отправитель, тема, дата, размер и
   значки лежат отдельными элементами. Этого достаточно, чтобы построить
   собственный вид целиком на стилях — код списка (а это часть тех 4379
   строк, что мы не трогаем) остаётся родительским. Значит сортировка,
   выделение, перетаскивание и поведение на телефоне продолжают работать.

   Раскладка зависит от ширины САМОЙ колонки списка, а не окна: в
   трёхпанельном виде окно широкое, а список узкий, и медиазапрос по окну
   давал бы одну строку там, где на неё не хватает места. Поэтому колонка
   объявлена контейнером, а переключение идёт по её ширине.
   ──────────────────────────────────────────────────────────────────── */

@media (min-width:769px){

  #layout-list{ container-type:inline-size; container-name:maillist; }

  /* Свой приглушённый цвет для списка. Общий --al-soft (#767676) взят с
     портала и там верен — на белом он даёт 4.5. Но выделенная строка здесь
     подложена серым, и на ней тот же цвет падает до 3.9, то есть ниже
     читаемого минимума для мелкого текста. Портальный токен трогать нельзя
     — почта и сайт должны совпадать, — поэтому список получает свой. */
  #messagelist{ --al-list-soft:#5e5e5e; }
  html.dark-mode #messagelist{ --al-list-soft:#9aa4a8; }

  #messagelist.messagelist tr.message > td.subject{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    gap:2px 16px;
    /* 60 слева — место под квадратный знак отправителя (32 + отступы). */
    padding:10px 16px 10px 60px;
    border-bottom:1px solid var(--al-line);
    position:relative;
    line-height:1.35;
  }

  /* У родителя на этих же элементах свои отступы — обнуляем, иначе высоту
     строки задают два места сразу. */
  #messagelist tr.message > td.subject > span{ margin:0; padding:0; }

  /* Две чужие мелочи раздували строку до 79 пикселей, и обе — не там, куда
     смотришь. Высота у span в отладчике показывалась числом (26px, 30px),
     но это не объявленное правило, а уже посчитанный итог раскладки:
     у блочного элемента getComputedStyle отдаёт использованное значение.
     Настоящие причины лежали глубже.

     Первая: у родителя есть `.messagelist td.subject span{line-height:2em}`
     — без «>», то есть на спаны любой вложенности. Адрес внутри отправителя
     получал 2em от своих 13 пикселей, и строка становилась 26 вместо 17.
     Наследование возвращает её к той, что задана на видимом уровне. */
  #messagelist tr.message > td.subject span{ line-height:inherit; }

  /* Вторая: значок состояния рисуется псевдоэлементом, а он обтекаемый
     (float) и ростом 28 пикселей. Обтекаемый блок в 28 держал строку темы
     независимо от её line-height. Высоту не назначаем числом — пусть
     считается от строки, тогда её не придётся править следом за шрифтом. */
  #messagelist tr.message > td.subject .msgicon::before{
    line-height:inherit; height:auto; }

  /* Отправитель приглушён: в своём ящике его узнают по очертанию,
     а читают тему. У непрочитанного он становится чёрным. */
  #messagelist tr.message > td.subject > span.fromto{
    flex:0 1 auto; min-width:0; max-width:100%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:13px; line-height:17px; color:var(--al-list-soft);
    /* В совсем узкой панели адрес и дата вместе не помещались, и дата
       съезжала на отдельную строку — письмо занимало три строки вместо
       двух. Пусть лучше укорачивается адрес: дата коротка и постоянна,
       а хвост адреса взгляд и так не читает. */
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  #messagelist tr.message.unread > td.subject > span.fromto{ color:var(--al-ink); }

  /* Дата моноширинным и всегда справа: даты выстраиваются столбиком и
     читаются как столбец, а не как обрывки строк разной ширины. */
  #messagelist tr.message > td.subject > span.date{
    flex:0 0 auto; margin-left:auto; white-space:nowrap;
    font-size:12px; line-height:17px; color:var(--al-list-soft);
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  }

  /* В узком списке тема занимает вторую строку целиком. */
  #messagelist tr.message > td.subject > span.subject{
    flex:1 1 100%; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    font-size:15px; line-height:20px;
  }
  #messagelist tr.message > td.subject > span.subject a{ color:var(--al-ink); text-decoration:none; }
  #messagelist tr.message.unread > td.subject > span.subject{ font-weight:600; }

  /* Значок состояния письма у родителя выше строки и растягивает её.
     Прижимаем к размеру текста: он подсказка, а не заголовок. */
  #messagelist tr.message > td.subject span.msgicon{ height:20px; line-height:20px; }

  /* Размер убираем: он почти никогда не нужен, а место занимает всегда. */
  #messagelist tr.message > td.subject > span.size{ display:none; }

  /* Непрочитанное помечаем полосой слева, а не точкой: полоса читается
     боковым зрением при беглом просмотре, точка — нет. */
  #messagelist tr.message.unread > td.subject::before{
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--al-red);
  }

  #messagelist tr.message:hover > td.subject{ background:#f7f7f7; }
  #messagelist tr.message.selected > td.subject,
  #messagelist tr.message.focused > td.subject{ background:var(--al-fill); }

  /* Список шире 560 пикселей — письмо умещается в одну строку, и на экран
     влезает вдвое больше писем. */
  @container maillist (min-width:560px){
    #messagelist.messagelist tr.message > td.subject{ flex-wrap:nowrap; }
    #messagelist tr.message > td.subject > span.fromto{ flex:0 1 210px; min-width:70px; font-size:14px; }
    #messagelist tr.message > td.subject > span.subject{ flex:1 1 auto; }
    /* В разметке порядок «отправитель, дата, тема», и в одну строку дата
       оказывалась посередине. Переставляем её в конец: в разметке дата
       стоит там не ради вида, а ради узкого режима, где она поднимается
       к отправителю. Флексбокс позволяет развести эти два случая, не
       трогая разметку и не переписывая чужой список на JS. */
    #messagelist tr.message > td.subject > span.subject{ order:2; }
    #messagelist tr.message > td.subject > span.date{ order:3; margin-left:16px; }
    /* Одна строка — отступы можно вернуть: высота строки теперь одна. */
    #messagelist.messagelist tr.message > td.subject{ padding-top:12px; padding-bottom:12px; }
  }

  html.dark-mode #messagelist.messagelist tr.message > td.subject{ border-bottom-color:#3a4448; }
  html.dark-mode #messagelist tr.message > td.subject > span.subject a{ color:#e8ecee; }
  /* Непрочитанный отправитель выделен чёрным — на тёмном фоне это почти
     невидимо (контраст 1.6). Здесь --al-ink означал «самый заметный текст»,
     а не «чёрная плашка», и в тёмной теме эти два смысла расходятся. */
  html.dark-mode #messagelist tr.message.unread > td.subject > span.fromto{ color:#e8ecee; }
  html.dark-mode #messagelist tr.message:hover > td.subject{ background:#262f33; }
  html.dark-mode #messagelist tr.message.selected > td.subject,
  html.dark-mode #messagelist tr.message.focused > td.subject{ background:#2a3135; }
}


/* ─────────────────────────────────────────────────────────────────────
   Как у почтовых сервисов: «Написать» над папками, знаки отправителей,
   колонка справа. Родителя не переписываем — дополняем.
   ───────────────────────────────────────────────────────────────────── */

/* Главное действие — над папками, во всю ширину колонки. Кнопку ставит
   скрипт плагина: переписывать ради неё шаблон почты целиком незачем. */
/* Адрес ящика в заголовке колонки повторял адрес из шапки — на широком
   экране на его месте стоит кнопка, меню папок (⋮) остаётся рядом. */
@media (min-width:1200px){
  body.task-mail.action-none #layout-sidebar > .header .header-title{display:none}
  body.task-mail.action-none #layout-sidebar > .header{padding-left:12px}
}
.al-compose-box{flex:1 1 auto;min-width:0;padding:0 6px 0 0}
.al-compose{display:flex;align-items:center;justify-content:center;height:40px;
  background:var(--al-red);color:#fff!important;font-size:15px;font-weight:600;text-decoration:none}
.al-compose:hover{background:var(--al-red-dark);text-decoration:none}
@media (max-width:1199px){ .al-compose-box{display:none} }

/* Число непрочитанных у папки — нашим цветом вместо голубого. */
#folderlist-content li .unreadcount,.listing li .unreadcount{background:var(--al-red);color:#fff;border-radius:0}

/* Знак отправителя: квадрат с буквой слева от двух строк письма. */
.al-ava{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:32px;height:32px;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font:600 15px/1 Plex,Arial,sans-serif;text-transform:uppercase}
#messagelist tbody tr.selected .al-ava{outline:2px solid #fff;outline-offset:-2px}
html.dark-mode .al-ava{box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}

/* Колонка справа — погода, котировки, гороскоп и реклама. Только на
   широком экране: на обычном она отняла бы ширину у самого письма.
   С 07.10.2026 — с 1280 px, а не с 1500 (владелец): чтобы её видели обычные ноутбуки. */
.al-aside{display:none}
@media (min-width:1280px){
  .al-aside{display:flex;flex-direction:column;gap:14px;flex:0 0 280px;width:280px;
    padding:14px;box-sizing:border-box;overflow:auto;background:#fff;border-left:1px solid var(--al-line)}
}
.al-house{border:1px solid var(--al-line);padding:18px}
/* Реклама Яндекса в рамке с ads.alpost.ch (07.10.2026) — на месте первого анонса. */
.al-ad{display:block;width:100%;max-width:300px;height:250px;border:0;background:transparent}
.al-house svg{display:block;margin-bottom:12px}
.al-house h2{margin:0 0 8px;font-size:17px;font-weight:700;line-height:1.2;color:var(--al-ink)}
.al-house p{margin:0 0 12px;font-size:13px;line-height:1.45;color:var(--al-soft)}
.al-house a{font-size:13px;font-weight:600;text-decoration:none}
.al-house a:hover{text-decoration:underline}
html.dark-mode .al-aside{background:#21292c;border-left-color:#3a4448}
html.dark-mode .al-house{border-color:#3a4448}
html.dark-mode .al-house h2{color:#fff}

/* Погода, котировки и гороскоп над анонсами (30.09.2026). Разметку присылает портал — ту же, что
   справа на сайте, поэтому и классы его. Здесь они переписаны на наши токены и шрифты вебмейла:
   узкого Cond и PlexMono в скине нет, вместо них Plex и системный моноширинный. Всё — внутри
   .al-rail, чтобы короткие имена сайта (.wx, .mk, .hw) не задели ничего в самом движке. */
.al-rail{display:flex;flex-direction:column;gap:18px;color:var(--al-ink)}
.al-rail h2,.al-rail p{margin:0}
.al-rail ul{margin:0;padding:0;list-style:none}
.al-rail a{text-decoration:none}
.al-rail .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.al-rail .wx{position:relative}
/* Шапка погоды: заголовок и город; город — выбор города, форма раскрывается поверх блока. */
.al-rail .wx__head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin-bottom:10px;padding-bottom:10px;border-bottom:2px solid var(--al-ink)}
.al-rail .wx__t{color:var(--al-soft);
  font:400 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.16em;text-transform:uppercase}
.al-rail .wx__pick summary{list-style:none;cursor:pointer;color:var(--al-soft);
  font:400 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;text-decoration:underline dotted;text-underline-offset:3px}
.al-rail .wx__pick summary::-webkit-details-marker{display:none}
.al-rail .wx__pick summary::after{content:" \25BE"}
.al-rail .wx__pick summary:hover,.al-rail .wx__pick[open] summary{color:var(--al-red)}
.al-rail .wx__form{position:absolute;left:0;right:0;z-index:5;margin-top:10px;padding:10px;
  display:flex;flex-direction:column;gap:8px;background:#fff;border:1px solid var(--al-ink);box-shadow:0 12px 24px rgba(0,0,0,.12)}
.al-rail .wx__form select{width:100%;height:34px;padding:0 6px;border:1px solid var(--al-line);border-radius:0;
  background:#fff;color:var(--al-ink);font-size:13px}
.al-rail .wx__form button{align-self:flex-start;min-height:32px;padding:0 12px;border:0;
  background:var(--al-ink);color:#fff;font-size:13px;font-weight:600;cursor:pointer}
.al-rail .wx__now{display:flex;align-items:baseline;gap:10px}
.al-rail .wx__deg{font:400 38px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.al-rail .wx__desc{font-size:13px;color:var(--al-soft)}
.al-rail .wx__days{display:flex;justify-content:space-between;margin-top:12px;padding-top:10px;
  border-top:1px solid var(--al-line);font:400 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
.al-rail .wx__days li{display:flex;gap:5px}
.al-rail .wx__auto{margin-top:8px;font-size:12px;color:var(--al-soft)}
.al-rail .sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:10px;padding-bottom:8px;border-bottom:3px solid var(--al-ink)}
.al-rail .sec-head__t{font-size:19px;font-weight:700;line-height:1.1}
.al-rail .sec-head__more{font-size:13px;font-weight:600}
.al-rail .mk__list{font:400 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}
/* Колонка изменения постоянной ширины, значение прижато к ней — правый край чисел один на все строки. */
.al-rail .mk__list li{display:flex;align-items:baseline;gap:8px;padding:7px 0;border-bottom:1px solid var(--al-line)}
.al-rail .mk__name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-rail .mk__val{margin-left:auto;text-align:right;white-space:nowrap}
/* Рост — зелёный ▲, падение — красный ▼, как на сайте (02.10.2026); ширина — под «▼ 12.34%». */
.al-rail .mk__chg{flex:0 0 9ch;text-align:right;white-space:nowrap}
.al-rail .mk__chg.is-up{color:#1a7f37}
.al-rail .mk__chg.is-down{color:var(--al-red)}
.al-rail .hw{border:1px solid var(--al-line);padding:14px}
.al-rail .hw__card{display:flex;align-items:center;gap:10px;margin-bottom:10px;color:inherit}
.al-rail .hw__card:hover .horo__name{color:var(--al-red)}
.al-rail .horo__sym{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  background:var(--al-red);color:#fff;
  font:400 21px/1 "Segoe UI Symbol","Apple Symbols","Noto Sans Symbols 2","Noto Sans Symbols","DejaVu Sans",sans-serif}
.al-rail .horo__sym--sm{width:22px;height:22px;font-size:14px}
.al-rail .horo__name{display:block;font-size:17px;font-weight:700;line-height:1.15}
.al-rail .horo__dates{display:block;margin-top:3px;color:var(--al-soft);font:400 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace}
.al-rail .hw__text{margin-bottom:10px;font-size:13px;line-height:1.5}
.al-rail .hw__text a{font-weight:600;white-space:nowrap}
.al-rail .horo__tip{font-size:12px;line-height:1.5;font-weight:600}
.al-rail .horo__tip span{margin-right:6px;color:var(--al-red);
  font:400 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.12em;text-transform:uppercase}
.al-rail .hw__signs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:5px;margin-top:12px}
.al-rail .hw__signs a{display:flex;justify-content:center;padding:3px 0;opacity:.55}
.al-rail .hw__signs a:hover,.al-rail .hw__signs a.is-on{opacity:1}
html.dark-mode .al-rail{color:#fff}
html.dark-mode .al-rail .wx__head,html.dark-mode .al-rail .sec-head{border-bottom-color:#fff}
html.dark-mode .al-rail .wx__form{background:#21292c;border-color:#fff}
html.dark-mode .al-rail .wx__form select{background:#21292c;color:#fff;border-color:#3a4448}
html.dark-mode .al-rail .wx__form button{background:#fff;color:#21292c}
html.dark-mode .al-rail .wx__days,html.dark-mode .al-rail .mk__list li,html.dark-mode .al-rail .hw{border-color:#3a4448}
html.dark-mode .al-rail .mk__chg.is-up{color:#3fb950}
html.dark-mode .al-rail .mk__chg.is-down{color:#ff6a5c}

/* Выбранная строка в колонках контактов и настроек — нашим серым, с
   красной чертой слева, как выбранная папка. У родителя здесь голубой. */
.listing li.selected, .listing li.selected > a,
#directorylist li.selected, #settings-sections li.selected, #sections-table tr.selected td{
  background-color:var(--al-fill)!important;border-left-color:var(--al-red)!important}
html.dark-mode .listing li.selected, html.dark-mode .listing li.selected > a,
html.dark-mode #directorylist li.selected, html.dark-mode #settings-sections li.selected,
html.dark-mode #sections-table tr.selected td{background-color:#2a3135!important}

/* Портрет отправителя в открытом письме — квадратный, как всё на сайте. */
.contactphoto, .contactphoto img, #contacthead .contactphoto, .header .contactphoto{border-radius:0!important}

/* Ссылки под формой входа: восстановление и регистрация на сайте. */
.al-login-links{display:flex;justify-content:space-between;gap:16px;margin:0;padding:10px 12px 12px;font-size:14px}
.al-login-links a{text-decoration:none}
.al-login-links a:hover{text-decoration:underline}

/* Группировка по дням. Подпись живёт внутри первой строки дня (отдельная
   строка сломала бы выделение и стрелки) и накрывает её верх своим фоном:
   так подсветка выбранного письма и красная черта непрочитанного на
   заголовок дня не заходят. Строка подрастает ровно на высоту подписи,
   знак отправителя опускается на половину. */
#messagelist tr.message.al-day-start > td.subject{padding-top:44px!important}
#messagelist tr.message > td.subject > span.al-day{position:absolute;left:0;right:0;top:0;height:34px;
  box-sizing:border-box;display:flex;align-items:flex-end;margin:0;padding:0 14px 7px!important;
  background:#fff;border-bottom:1px solid var(--al-line);z-index:2;pointer-events:none;
  font:600 13px/1 Plex,Arial,sans-serif;color:var(--al-ink);white-space:nowrap}
#messagelist tr.al-day-start .al-ava{top:calc(50% + 17px)}
html.dark-mode #messagelist tr.message > td.subject > span.al-day{background:#21292c;border-bottom-color:#3a4448;color:#fff}

/* На телефоне отступ строки задаёт родитель — место под знак отправителя
   приходится повторить здесь (правило для компьютера выше в @media). */
@media (max-width:768px){
  #messagelist tr.message > td.subject{position:relative;padding-left:60px!important}
}

/* Список без панели чтения, как у mail.ru (режим включает скрипт плагина,
   только на широком экране — порог тот же, что у темы: 1201). Список
   занимает всё место; открытое письмо встаёт на его место. У темы список
   ограничен (flex:3, max-width:30%) — снимаем. */
.al-back{display:none}
@media (min-width:1201px){
  /* Ширина колонок у темы задана долями: когда список забирал всё место,
     колонка папок раздувалась до 430, в чтении сжималась до 220. */
  body.al-listview #layout-sidebar{flex:0 0 260px!important;width:260px!important;
    min-width:260px!important;max-width:260px!important}
  body.al-listview:not(.al-reading) #layout-content{display:none!important}
  body.al-listview:not(.al-reading) #layout-list{flex:1 1 auto!important;max-width:none!important;width:auto!important}
  body.al-listview.al-reading #layout-list{display:none!important}
  body.al-listview.al-reading #layout-content{flex:1 1 auto!important;max-width:none!important}
  body.al-listview .al-back{display:inline-flex;align-items:center;gap:8px;align-self:stretch;
    margin-right:auto;padding:0 18px;color:var(--al-ink);font-size:14px;font-weight:600;text-decoration:none;
    border-right:1px solid var(--al-line);white-space:nowrap}
  body.al-listview .al-back::before{content:"\2190";font-size:18px;line-height:1;color:var(--al-red)}
  body.al-listview .al-back:hover{color:var(--al-red);text-decoration:none}
  html.dark-mode body.al-listview .al-back{color:#fff;border-right-color:#3a4448}
}

/* Календарь Диска вверху правой колонки (02.10.2026, вариант Б): шапка как у погоды, события — по дням. */
.al-rail .al-cal__open{color:var(--al-red);font-size:13px;font-weight:600}
.al-rail .al-cal__day{margin:10px 0 2px;color:var(--al-soft);font:400 11px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.al-rail .al-cal__day:first-of-type{margin-top:0}
.al-rail .al-cal__day.is-today{color:var(--al-red)}
.al-rail .al-cal__list a{display:flex;align-items:baseline;gap:10px;padding:6px 0;border-bottom:1px solid var(--al-line);color:inherit;font-size:13.5px;line-height:1.3}
.al-rail .al-cal__list a:hover span{color:var(--al-red)}
.al-rail .al-cal__list time{flex:0 0 9ch;font:400 12px/1.3 ui-monospace,SFMono-Regular,Menlo,monospace}
.al-rail .al-cal__list span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.al-rail .al-cal__note{margin:0;color:var(--al-soft);font-size:13px;line-height:1.45}
.al-rail .al-cal__add{display:inline-block;margin-top:9px;color:var(--al-red);font-size:13px;font-weight:600}
html.dark-mode .al-rail .al-cal__list a{border-color:#3a4448}
html.dark-mode .al-rail .al-cal__open,html.dark-mode .al-rail .al-cal__add,html.dark-mode .al-rail .al-cal__day.is-today{color:#ff6a5c}
/* Шапка с «Календарём» — семь пунктов (02.10.2026): до 1599 px — без адреса ящика (он есть в настройках), на 981–1439 px
   пункты ещё и без значков и плотнее. Пороги общие с шапкой Диска (у неё бывает ещё колокольчик уведомлений, ~60 px):
   замер по семи языкам с длинным адресом — без них шапка налезала на правую часть (французская — до 1520 px). */
@media (max-width:1599px){.al-user{display:none}}
@media (min-width:981px) and (max-width:1439px){.al-nav .al-ico{display:none}.al-nav{gap:18px}}

/* Фон-водяной знак на рабочих страницах (02.10.2026, решение владельца по макетам: «заметный», 17 %, при каждом открытии —
   следующий из четырёх; очередь — al-bg.js в шапке, тот же счётчик, что у входа). Картинка — под всеми панелями, панели
   прозрачные; шапка, подвал, выделенные строки и само письмо (окно просмотра — отдельная страница) — на своём фоне.
   Горизонтали Альп и так светлые — им 90 %. В тёмной теме — 10 %: светлое фото поверх тёмного иначе гасит текст. */
html:not(.iframe) body:not(.task-login)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:center/cover no-repeat;opacity:.17}
html[data-al-bg="1"]:not(.iframe) body:not(.task-login)::before{background-image:url(../images/bg/glacier.webp);background-position:45% 70%}
html[data-al-bg="2"]:not(.iframe) body:not(.task-login)::before{background-image:url(../images/bg/clouds.webp);background-position:50% 40%}
html[data-al-bg="3"]:not(.iframe) body:not(.task-login)::before{background-image:url(../images/bg/lake.webp);background-position:72% 60%}
html[data-al-bg="4"]:not(.iframe) body:not(.task-login)::before{background-image:url(../images/bg/alps.svg);background-position:42% 53%;opacity:.9}
html.dark-mode:not(.iframe) body:not(.task-login)::before{opacity:.1}
html:not(.iframe) body:not(.task-login) #layout-sidebar,
html:not(.iframe) body:not(.task-login) #layout-list,
html:not(.iframe) body:not(.task-login) #layout-content,
html:not(.iframe) body:not(.task-login) #layout > div > .header,
html:not(.iframe) body:not(.task-login) #layout > div > .footer,
html:not(.iframe) body:not(.task-login) .al-aside,
html:not(.iframe) body:not(.task-login) #messagelist tr.message > td.subject > span.al-day{background-color:transparent}
html.iframe body{background-color:#fff}
html.dark-mode.iframe body{background-color:#21292c}