/* css/wide.css — широкие экраны (лист 31, js/wide.js):
   ≤639 телефон · 640–879 планшет (одна колонка, модалки центром — это уже
   так) · ≥880 десктоп: сайдбар 224 + три колонки (Ящичек · Сегодня · Неделя),
   «Потом»/Архив — свёрнутые секции под колонками, контент ≤980, док ≤520
   (00·4). Одна вёрстка карточки на всех ширинах — только раскладка.
   ОТСТУПЛЕНИЕ ОТ ЛИСТА 31 (решение пользователя, 2026-08-26): нижний таб-бар
   (Задачи · Календарь · Шкаф · Профиль) — фишка приложения и живёт на ВСЕХ
   ширинах, включая ≥880; hdr-tabs шапки выключены как дубль навигации
   (стили ниже сохранены — включаются одной строкой display:flex). */

/* табы-сегмент 40 в шапке — выключены: навигация в таб-баре (см. шапку файла) */
.hdr-tabs{display:none;}

@media (min-width:880px){
  /* ── шапка: [лого][табы][счёт][действия] ── */
  header.app{grid-template-columns:auto auto 1fr auto; gap:16px;}
  header.app .score{justify-self:center;}
  /* .hdr-tabs{display:flex;} — выключено: таб-бар вернулся на десктоп (шапка файла) */
  .hdr-tabs button{
    position:relative; min-height:40px; padding:0 14px; border:none;
    background:none; cursor:pointer; font-family:'Neucha',cursive;
    font-size:15px; color:var(--graphite-soft); border-radius:10px;
  }
  .hdr-tabs button.on{
    color:var(--graphite); font-weight:700; background:var(--marker);
  }
  .hdr-tabs button.on::before{content:""; position:absolute; inset:0;
    pointer-events:none; border:1.5px solid var(--graphite); border-radius:10px;
    filter:url(#squiggle);}
  .hdr-tabs .tab-badge{
    position:absolute; top:-2px; right:-2px; min-width:16px; height:16px;
    border-radius:8px; background:#FFDE59; color:#2C2A26; font-size:11px;
    font-weight:700; display:flex; align-items:center; justify-content:center;
    padding:0 4px; border:1.5px solid var(--graphite);
  }
  .hdr-tabs .tab-badge[hidden]{display:none;}

  /* ── таб-бар внизу ЖИВЁТ и на десктопе (фишка приложения — решение
     пользователя 2026-08-26); клиренсы контента в tabbar.css безусловные,
     они и на ≥880 уже держали место под док ── */
  /* остров-плашка дока — во всю капу контента (980): узкий остров 520 при
     скролле оставлял карточки торчать ПО БОКАМ («вёрстка накладывается»,
     жалоба 2026-08-26) — теперь хвост списка тает в маске плашки по всей
     ширине, как на телефоне. Контролы внутри капятся прежними 488 по центру
     (520 плашки листа 31 минус поля 16×2). */
  .sk-dock-plate{max-width:980px;}
  .cp-dock{width:100%; max-width:488px; margin-left:auto; margin-right:auto;}
  #sk-dock nav.sk-tabbar{max-width:488px; margin-left:auto; margin-right:auto;}

  /* ── доска: сайдбар 224 + контент; всё ≤980 по центру ── */
  #board{
    display:grid; grid-template-columns:224px minmax(0,1fr); gap:0 16px;
    max-width:980px; margin:0 auto;
  }
  #board .board-head{grid-column:1 / -1;}
  .wide-side{
    grid-column:1; grid-row:2; align-self:start;
    position:sticky; top:12px;
    display:flex; flex-direction:column; gap:8px; padding-bottom:24px;
  }
  .wide-side[hidden]{display:none;}
  #board .tasks-wrap{grid-column:2; grid-row:2; max-width:none;}

  /* сайдбар: подписи · строки-люди 48 · тег-чипы · подсказка дропа */
  .ws-cap{font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--graphite-soft); margin-top:8px;}
  .ws-row{
    position:relative; display:flex; align-items:center; gap:10px;
    min-height:48px; padding:0 10px; border:none; cursor:pointer;
    background:var(--paper2); border-radius:12px; font:inherit; font-size:15px;
    color:var(--graphite); text-align:left;
  }
  :root[data-theme="dark"] .ws-row{background:var(--card);}
  .ws-row::before{content:""; position:absolute; inset:0; pointer-events:none;
    border:1.5px solid var(--graphite); border-radius:12px; filter:url(#squiggle);}
  .ws-row.on{background:var(--marker);}
  .ws-row .nm{flex:1; min-width:0; white-space:nowrap; overflow:hidden;
    text-overflow:ellipsis;}
  .ws-row b{font-weight:400; font-size:12px; color:var(--meta);}
  .ws-tags{display:flex; flex-wrap:wrap; gap:8px;}
  .ws-tag{
    position:relative; display:inline-flex; align-items:center; gap:6px;
    min-height:32px; padding:0 10px; border:none; cursor:pointer;
    background:var(--paper2); border-radius:8px; font-family:'Neucha',cursive;
    font-size:13px; color:var(--green-t);
  }
  :root[data-theme="dark"] .ws-tag{background:var(--card);}
  .ws-tag::before{content:""; position:absolute; inset:0; pointer-events:none;
    border:1.5px solid var(--green); border-radius:8px; filter:url(#squiggle);}
  .ws-tag::after{content:""; position:absolute; inset:-4px;}
  .ws-tag.on{background:var(--marker); color:var(--graphite);}
  .ws-tag b{font-weight:400; font-size:11px; color:var(--meta);}
  .ws-hint{font-size:11px; line-height:1.4; color:var(--graphite-soft);
    margin-top:8px;}

  /* ── колонки 31·1: Ящичек · Сегодня · Неделя(+Завтра); «Потом» и Архив —
     под колонками. Обёртки .sw-* и группы .pgroup становятся грид-итемами
     (display:contents на их родителях); одна вёрстка карточек. ── */
  .tasks-wrap{
    display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
    gap:0 16px; align-items:start;
  }
  .tasks-wrap > .tools, .tasks-wrap > .ms-banners, .tasks-wrap > #fd-hint,
  .tasks-wrap > #sec-pinned{grid-column:1 / -1;}
  .tasks-wrap > hr.dsep{display:none;}   /* сепараторы не нужны в колонках */
  .sw-box{grid-column:1; display:flex; flex-direction:column; min-width:0;}
  .sw-plan{display:contents;}
  .sw-plan > .shead{display:none;}       /* заголовки несут сами группы */
  .plan-groups{display:contents;}
  .pgroup{min-width:0;}
  .pgroup[data-g="today"]{grid-column:2;}
  /* «Завтра» + «Неделя» — один стек в третьей колонке (собирает renderPlan) */
  .pcol{grid-column:3; display:flex; flex-direction:column; min-width:0;}
  .pgroup[data-g="later"]{grid-column:1 / -1;}
  /* группировка «по людям» (тумблер ⇅) — колонок нет, группы во всю ширину */
  .pgroup[data-g="member"]{grid-column:1 / -1;}
  .plan-groups > .empty, .plan-groups > .ske{grid-column:2 / -1;}
  .sw-arch{grid-column:1 / -1; min-width:0;}
  /* «Потом» свёрнут: шапка-тогл (board.js addGroup) */
  .ghead.fold{width:100%; border:none; background:none; cursor:pointer;
    font:inherit; text-align:left;}
  .ghead.fold::after{content:"▾"; margin-left:6px; color:var(--pencil);}
  .ghead.fold[aria-expanded="false"]::after{content:"▸";}

  /* ── наведение (31·2): hover = маркер-подсветка, курсор pointer ── */
  @media (hover:hover){
    .task{cursor:pointer;}
    .task:hover::after{content:""; position:absolute; inset:0;
      background:var(--marker); opacity:.5; border-radius:14px;
      pointer-events:none;}
    .task{position:relative;}
    .ws-row:hover, .ws-tag:hover{background:var(--marker);}
  }

  /* модалка задачи 480 центром (31·2) */
  #task-dialog{width:min(480px, calc(100vw - 24px));
    max-width:min(480px, calc(100vw - 24px));}
}

/* складывание < 880 — без прыжков: только opacity у уходящего сайдбара
   (сам он display:none на узких — переход отдаёт грид мгновенно, транзишним
   появление контента колонок) */
@media (prefers-reduced-motion:no-preference) and (min-width:880px){
  .wide-side{animation:ws-in .24s ease;}
  @keyframes ws-in{from{opacity:0;}}
}