/* ═══ ДЕСКТОП ═══════════════════════════════════════════════════════════════
   Раскладка живёт целиком в media-запросе: ниже 900px всё остаётся ровно тем,
   чем было, и мобильная вёрстка не может пострадать. DOM один и тот же —
   сайдбар просто скрыт на узких экранах, нижняя навигация на широких.
   ═══════════════════════════════════════════════════════════════════════ */
.dnav,.drail{display:none}
@media (min-width:1180px){
  /* Правая колонка появляется только когда для неё реально есть место:
     сайдбар + контент + колонка требуют примерно 1180px, иначе контент
     сжимается сильнее, чем колонка того стоит. */
  .drail{display:flex;flex-direction:column;gap:14px;position:fixed;right:0;top:0;bottom:0;width:var(--drail-w);padding:var(--dpad) var(--dpad) var(--dpad) 0;overflow-y:auto;z-index:150}
  body.has-rail{padding-right:var(--drail-w)}
  .drail-card{background:var(--color-surface);border-radius:var(--radius-card);padding:16px;box-shadow:var(--shadow-card)}
  .drail-h{font-size:13px;font-weight:600;color:var(--color-text-muted);margin-bottom:12px}
  .drail-row{display:flex;gap:11px;align-items:stretch;padding:9px 0;border-bottom:1px solid var(--color-border);cursor:pointer}
  .drail-row:last-child{border-bottom:none}
  .drail-bar{width:3px;border-radius:3px;flex:none}
  .drail-t{font-size:13.5px;font-weight:600;line-height:1.3}
  .drail-s{font-size:12px;color:var(--color-text-muted);margin-top:2px}
  .drail-empty{font-size:12.5px;color:var(--color-text-muted)}
  .drail-leg{display:flex;flex-direction:column;gap:8px}
  .drail-leg-i{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--color-text)}
  .drail-dot{width:9px;height:9px;border-radius:50%;flex:none}
  /* Легенду под календарём прячем — её роль взяла колонка. */
  body.has-rail .cal-legend{display:none}
}
@media (min-width:900px){
  body{max-width:none;padding-bottom:0;padding-left:var(--dnav-w)}
  .bnav{display:none}
  .dnav{display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--dnav-w);background:var(--color-surface);border-right:1px solid var(--color-border);padding:20px 14px;z-index:200;overflow-y:auto}
  .dnav-brand{display:flex;align-items:center;gap:9px;padding:0 6px 18px;font-size:16px;font-weight:700;letter-spacing:-.01em}
  /* Знак в шапке сайдбара. Подставляется МАСКОЙ, а цвет берётся из переменной,
     поэтому в ночной теме он светлеет вместе со всем остальным — картинкой так
     не выходит. Файл отдельный (logo-mark.svg): у logo.svg тонкий контур и
     половина холста пустая, в 28px знак расплывался. */
  .dnav-mark{width:28px;height:28px;flex:none;background:var(--color-accent-text);
    -webkit-mask:url('/icons/logo-mark.svg') center/contain no-repeat;
    mask:url('/icons/logo-mark.svg') center/contain no-repeat}
  /* Если маска не поддерживается, показываем файл как обычную картинку: он
     фиолетовый сам по себе. Без этой ветки на месте знака был бы залитый
     квадрат — заливка есть, а вырезать её нечем. */
  @supports not ((mask-image:url('/icons/logo-mark.svg')) or (-webkit-mask-image:url('/icons/logo-mark.svg'))){
    .dnav-mark{background:url('/icons/logo-mark.svg') center/contain no-repeat}
  }
  .dnav-fam{display:flex;align-items:center;gap:9px;width:100%;background:var(--color-bg);border:none;border-radius:16px;padding:11px 13px;margin-bottom:18px;cursor:pointer;font-family:var(--ff);text-align:left;transition:background .15s}
  .dnav-fam[disabled]{cursor:default}
  .dnav-fam:hover:not([disabled]){background:var(--color-tint)}
  .dnav-fam-ic{font-size:15px;flex:none}
  .dnav-fam-n{flex:1;min-width:0;font-family:'Caveat',cursive;font-style:italic;font-weight:700;font-size:19px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--color-text)}
  .dnav-fam-ch{color:var(--color-text-muted-2);font-size:10px}
  .dnav-list{display:flex;flex-direction:column;gap:4px}
  .dnav-item,.dnav-sec{display:flex;align-items:center;gap:11px;width:100%;padding:11px 13px;border:none;border-radius:16px;background:none;cursor:pointer;font-family:var(--ff);text-align:left;transition:background .15s,color .15s}
  .dnav-item{font-size:14px;font-weight:600;color:var(--color-text)}
  .dnav-sec{font-size:13.5px;font-weight:500;color:var(--color-text-muted)}
  .dnav-item:hover,.dnav-sec:hover{background:var(--color-bg)}
  .dnav-item.active,.dnav-sec.active{background:var(--color-accent);color:var(--color-text-on-accent)}
  .dnav-item.active:hover,.dnav-sec.active:hover{background:var(--color-accent-hover)}
  .dnav-ic{font-size:17px;flex:none;filter:grayscale(.5)}
  .dnav-item.active .dnav-ic,.dnav-sec.active .dnav-ic{filter:none}
  .dnav-l{flex:1;min-width:0}
  .dnav-n{font-size:11.5px;font-weight:600;color:var(--color-text-muted-2);font-variant-numeric:tabular-nums}
  .dnav-item.active .dnav-n,.dnav-sec.active .dnav-n{color:var(--color-text-on-accent)}
  .dnav-n.alert{background:var(--color-badge-alert);color:var(--color-text-on-accent);border-radius:var(--radius-badge);padding:1px 6px}
  .dnav-foot{margin-top:auto;display:flex;flex-direction:column;gap:4px;padding-top:14px}
  .dnav-user{display:flex;align-items:center;gap:10px;padding:11px 13px;background:var(--color-bg);border-radius:16px;margin-top:6px}
  .dnav-av{width:32px;height:32px;border-radius:16px;background:var(--color-tint);color:var(--color-accent-text);display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;flex:none}
  .dnav-user-n{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dnav-user-r{font-size:11px;color:var(--color-text-muted)}

  /* Контент. Шапки разделов перестают быть приклеенными к краям экрана
     и становятся карточками внутри поля страницы. */
  .page{padding:var(--dpad) var(--dpad) 0}
  .hhd,.sphd,.calhd{border-radius:26px;position:relative;top:auto}
  .hhd{padding:26px 28px 28px}
  .sphd,.calhd{padding:20px 24px}
  .hbody,.lw,.cwrap,.instrwrap,.setwrap,.stats,.medpanel,.foodpanel,.notebar,.medtabs,.cal-legend{padding-left:0;padding-right:0;margin-left:0;margin-right:0}
  .hbody,.lw,.cwrap,.instrwrap,.setwrap{padding-top:var(--dgap)}
  .stats{padding-top:var(--dgap)}
  .notebar,.medtabs{margin-top:var(--dgap)}
  /* Длинную строку неудобно читать во всю ширину монитора. */
  .hbody,.lw,.cwrap,.instrwrap,.setwrap,.stats,.medpanel,.foodpanel{max-width:var(--dmax)}
  .gtiles{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));max-width:640px}
  .profgrid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
  /* На широком экране квадратная ячейка раздувается до 160px и месяц перестаёт
     помещаться на экран. Переходим на фиксированную высоту: ячейка становится
     горизонтальной, как в десктопном макете. */
  .cc{border-radius:12px;aspect-ratio:auto;min-height:78px;justify-content:flex-start;padding:8px 4px}
  .ygrid{grid-template-columns:repeat(4,1fr);max-width:var(--dmax)}
  /* Месячная сетка не сжимается бесконечно — на узком окне уезжает в скролл. */
  .ccard{min-width:640px;max-width:860px}
  .cwrap{overflow-x:auto}
  /* Контролы шапки не растягиваем во всю ширину монитора. */
  .cnav{max-width:520px}
  .cviews{max-width:560px}
  .stats{max-width:560px}
  .lcard,.rgc,.cal-legend{max-width:var(--dmax)}
  .ov{align-items:center}
  .sht{max-width:560px;border-radius:var(--radius-sheet)}
}
@media (min-width:1280px){
  body{--dnav-w:276px;--dpad:34px;--dgap:24px;--dmax:1100px}
}