/* Söz. — компьютер (широкий экран): экраны-дашборды.
   Роман 27.09: «браузерную версию не трогали — сейчас хаотично и неудобно; переработай, чтобы
   было красиво, в виде дашбордов, с нормальной расстановкой и отступами».

   Телефон НЕ трогаем: обёртки раскладки (.mlayout, .art-side, .pg-head…) на узком экране —
   display: contents, то есть для раскладки их нет, и телефон остаётся прежним до пикселя.
   Всё новое — только от 1100 px (боковая панель + широкая рабочая область до 1240 px). */

.mlayout, .mside, .mmain, .art-text, .art-side, .pg-head, .pg-main, .pg-rest, .set-grid, .set-col { display: contents; }
.rings-legend, .news-row.extra { display: none; }

@media (min-width: 1100px) {
  body.with-side { --page-max: 1240px; --gap: 20px; }

  /* ── рабочая область: шире, одинаковые поля, крупный заголовок ── */
  body.with-side .scroll, body.with-side .topbar {
    padding-left: max(40px, calc((100% - var(--page-max)) / 2));
    padding-right: max(40px, calc((100% - var(--page-max)) / 2));
  }
  body.with-side .topbar { min-height: 88px; padding-top: 24px; padding-bottom: 12px; }
  body.with-side .topbar h1 { font-size: 30px !important; font-weight: 800; letter-spacing: -.015em; padding-left: 0 !important; }
  body.with-side .topbar .icon-btn:first-child { margin-left: -10px; }
  body.with-side .scroll { padding-bottom: 56px; }
  body.with-side [data-home-top] { min-height: 24px; padding-top: 0; padding-bottom: 0; }

  /* ── Сегодня: слева занятие и чтение, справа — колонка новостей во всю высоту ── */
  body.with-side .today {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 400px);
    grid-template-areas: "top news" "text news" "gram news" ". news";
    gap: var(--gap); align-items: start; padding-top: 24px;
  }
  body.with-side .today-top { grid-area: top; grid-column: auto; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--gap); }
  body.with-side .today .news-card { grid-area: news; grid-column: auto; padding: 20px 22px 10px; }
  body.with-side .today .text-card { grid-area: text; grid-column: auto; padding: 22px 24px 24px; }
  body.with-side .today .gram-card { grid-area: gram; grid-column: auto; padding: 18px 22px; }
  body.with-side .rings-card { flex-direction: row; justify-content: flex-start; gap: 26px; padding: 22px 26px; }
  body.with-side .rings-card .rings { width: 150px; flex-shrink: 0; }
  body.with-side .rings-legend { display: flex; flex-direction: column; gap: 14px; }
  .rings-legend span { display: grid; grid-template-columns: 12px auto; column-gap: 8px; align-items: center;
    font-size: 13px; font-weight: 700; color: var(--muted); }
  .rings-legend i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
  .rings-legend .c-ans { color: #F4B942; } .rings-legend .c-rev { color: #F0605A; } .rings-legend .c-new { color: #6C8CFF; }
  .rings-legend b { grid-column: 2; font-size: 22px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.15; }
  .rings-legend small { font-size: 14px; font-weight: 600; color: var(--muted); }
  body.with-side .start-card { min-height: 0; height: 100%; padding: 26px 28px; }
  body.with-side .start-card b { font-size: 30px; }
  body.with-side .start-card > span:not(.start-ic) { font-size: 15px; }
  body.with-side .news-row.extra { display: block; }
  body.with-side .today .news-row { padding: 12px 0; }
  body.with-side .today .news-row b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  body.with-side .text-card .text-row b { font-size: 22px; white-space: normal; }
  body.with-side .text-card .text-row .start { -webkit-line-clamp: 4; font-size: 16px; line-height: 1.55; margin-top: 8px; }

  /* ── Модули и списки: сетка шире ── */
  body.with-side .mlist { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }

  /* ── Модуль: слева закреплённая панель, справа слова в две колонки ── */
  body.with-side .mlayout { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 36px; align-items: start; }
  body.with-side .mside { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 0; }
  body.with-side .mside .modes { grid-template-columns: 1fr !important; gap: 10px; margin-top: 6px; }
  body.with-side .mside .mode { flex-direction: row; justify-content: flex-start; gap: 14px; padding: 16px 18px; font-size: 16px; }
  body.with-side .mside .mode svg { width: 26px; height: 26px; }
  body.with-side .mside .due-strip { margin: 0; }
  body.with-side .mmain { display: block; }
  body.with-side .mmain .section-h:first-child { margin-top: 4px; }
  body.with-side .mmain .words { display: grid; grid-template-columns: 1fr 1fr; }
  body.with-side .mmain .words .word { border-bottom: 1px solid var(--line); }
  body.with-side .mmain .words .word:nth-child(odd) { border-right: 1px solid var(--line); }
  body.with-side .mmain .words .word:last-child { border-bottom: 1px solid var(--line); }

  /* ── Грамматика: «список + содержимое», у каждой половины своя прокрутка ── */
  body.with-side .gsplit { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 28px; overflow: hidden;
    padding-bottom: 28px; min-height: 0; }
  body.with-side .groad { overflow-y: auto; min-height: 0; padding: 0 6px 24px 2px; scrollbar-width: none; }
  body.with-side .gpane { overflow-y: auto; min-height: 0; padding: 28px 36px 32px; transition: opacity 150ms; scrollbar-width: none; }
  body.with-side .gpane.loading { opacity: .5; }
  body.with-side .gpane .doc h1 { font-size: 32px; }
  body.with-side .gpane-top { display: flex; justify-content: flex-end; margin: -6px -8px 0 0; }
  body.with-side .groad .road-node { border-radius: 12px; padding-right: 8px; transition: background 150ms; }
  body.with-side .groad .road-node:hover { background: color-mix(in srgb, var(--text) 5%, transparent); }
  body.with-side .groad .road-node.sel { background: color-mix(in srgb, var(--turkuaz) 12%, transparent); color: var(--text); }
  body.with-side .groad .road-node.sel::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px;
    margin-top: -4px; border-radius: 50%; background: var(--turkuaz); }

  /* ── Статья: текст в удобной ширине, справа закреплённая колонка слов и теста ── */
  body.with-side .news-doc { display: grid; grid-template-columns: minmax(0, 720px) 340px; gap: 48px; justify-content: center; align-items: start; }
  body.with-side .art-text { display: block; }
  body.with-side .art-side { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 0; padding-top: 34px; }
  body.with-side .art-side .words-h { margin-top: 0; }
  body.with-side .art-side .quiz-go { font-size: 15px; padding-top: 14px; padding-bottom: 14px; }
  body.with-side .art-side .quiz-go, body.with-side .art-side [data-add-all] { margin-top: 0 !important; }
  body.with-side .news-doc .blk { margin-bottom: 14px; }
  body.with-side .news-doc h1 { font-size: 34px; }

  /* ── Прогресс: сверху уровень и карта, ниже графики, остальное — плотной кладкой без дыр ── */
  body.with-side .pg { display: block; }
  body.with-side .pg > .seg { max-width: 420px; margin-bottom: var(--gap); }
  body.with-side .pg-head, body.with-side .pg-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
    gap: var(--gap); margin-bottom: var(--gap); align-items: stretch; }
  body.with-side .pg-head > *, body.with-side .pg-main > * { grid-column: auto !important; }
  body.with-side .pg-rest { display: block; columns: 3 320px; column-gap: var(--gap); }
  body.with-side .pg-rest > * { break-inside: avoid; display: block; width: 100%; margin: 0 0 var(--gap); }

  /* ── Настройки: две колонки ── */
  body.with-side .set-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  body.with-side .set-col { display: block; }
  body.with-side .set-col > .section-h:first-child { margin-top: 4px; }
}

/* очень широкий экран — Сегодня: новости пошире */
@media (min-width: 1500px) {
  body.with-side { --page-max: 1320px; }
  body.with-side .today { grid-template-columns: minmax(0, 1fr) 440px; }
}

/* компьютер поуже (1100–1349): у колец не хватает места под подписи — кольца по центру, как на телефоне */
@media (min-width: 1100px) and (max-width: 1349px) {
  body.with-side .rings-card { justify-content: center; padding: 18px; }
  body.with-side .rings-legend { display: none; }
}