/* Общая система DOC-04, 10.09.2026. Роли и основания — DESIGN.md. */
.task{
  position:relative; padding:12px; margin:0 0 8px;
  border:1px solid var(--hair);
  background:var(--surface); border-radius:var(--radius);
  --st:var(--st-wait);

  touch-action:pan-y; transform:translateX(var(--dx,0px));
}
.task.snap{transition:transform .18s ease-out}
@media (prefers-reduced-motion:reduce){.task.snap{transition:none}}

.task[data-swipe]::after{
  content:attr(data-swipe); position:absolute; right:0; top:12px;
  transform:translateX(calc(-1 * var(--dx,0px)));
  font-family:var(--font-body); font-size:var(--fs-data);
  letter-spacing:0; text-transform:none; color:var(--muted);
}

.task::before{display:none}

.task.s-new{--st:var(--st-wait)}
.task.s-work{--st:var(--st-live)}
.task.s-over{--st:var(--st-hot)}
.task.s-stuck{--st:var(--st-hot)}
.task.s-done{--st:var(--st-wait)}
.task.s-cancelled{--st:var(--st-wait)}

.task.s-work .badge{background:var(--st-live-bg)}
.task.s-over .badge,.task.s-stuck .badge{background:var(--st-hot-bg)}

.task .top{display:flex; align-items:baseline; gap:8px;flex-wrap:wrap}
.task .t{font-size:var(--fs-body); line-height:1.4; font-weight:600;
         letter-spacing:0; flex:1 1 100%; min-width:0}
.task.s-done .t,
.task.s-cancelled .t{text-decoration:line-through; color:var(--muted)}

.task .meta{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
            margin-top:8px; font-size:var(--fs-person); color:var(--muted)}

.task .body{display:none; margin-top:8px}
.task.open .body{display:block}
.task.open .top{flex-wrap:nowrap}
.task.open .t{flex:1 1 auto;min-width:0}
.task .kv{padding-top:10px;padding-bottom:10px;min-height:44px}
.task .kv.open{margin:0;padding:10px 8px}
.task .awaiting{font-size:var(--fs-sub)}
.search-results .board-main,.search-results .act-bar,.task-open .act-bar{display:none}
body.with-act.search-results,body.with-act.task-open{
  padding-bottom:calc(var(--tabbar-h) + 16px + env(safe-area-inset-bottom) + var(--kb))}

.team-bar{display:flex; align-items:baseline; gap:10px; padding:0 0 10px;
          border-bottom:none}
.team-bar .k{font-family:var(--font-body); font-size:var(--fs-label);
             letter-spacing:0; text-transform:none; color:var(--muted)}
.team-bar .v{flex:1; min-width:0; font-size:var(--fs-body)}

.team-bar .team-sel{flex:1; min-width:0; width:auto; margin:0; padding:0 16px 0 0;
                    border:none; background:none; font-size:var(--fs-body)}
.team-bar a{color:var(--muted); display:grid; place-items:center; text-decoration:none}
.team-bar a svg{width:20px; height:20px}
.team-bar .icon-btn{align-self:center}
.team-bar .search-toggle{display:flex; align-items:center; gap:6px; width:auto; margin:-2px 0;
                        min-width:44px; min-height:44px; flex-shrink:0; color:var(--acc)}

.group{margin:0}

.group-head{display:flex; align-items:baseline; gap:8px; padding:8px 0;
            cursor:pointer; font-family:var(--font-body); font-size:var(--fs-body);
            letter-spacing:0; text-transform:none; color:var(--ink)}

.group-head.static{cursor:default}
.group-head .gdot{display:none}
.group-head .gname{font-weight:600}
.group-head .gcount{margin-left:auto; font-variant-numeric:tabular-nums;
                    color:var(--muted)}
.group-head .gchev{color:var(--muted); display:grid; place-items:center}
.group-head .gchev svg{width:16px; height:16px; transition:transform .15s}
.group.closed .gchev svg{transform:rotate(180deg)}
.group.closed .group-body{display:none}

.who{display:flex; align-items:center; gap:6px}

.badge{
  font-size:var(--fs-sub); color:var(--muted);
  background:none; border:none; border-radius:0; padding:0; white-space:nowrap;
}
.badge.role,.badge.full,.badge.soon{color:var(--muted)}

.task .badge{
  margin-left:0; padding:4px 8px; border-radius:var(--radius); background:var(--neutral-bg); font-family:var(--font-body); font-size:var(--fs-data);
  font-variant-numeric:tabular-nums; color:var(--muted);
}
.task .badge svg{display:none}
.task.s-over .badge,
.task.s-stuck .badge,
.task.s-work .badge{color:var(--st)}

.task .badge.today{color:var(--st)}
.task .badge :is(span,time,a){color:inherit}

.kv{display:flex; flex-wrap:wrap; gap:12px; align-items:baseline; padding:11px 0;
    border-top:1px solid var(--hair)}
.kv .k{flex:0 0 120px; color:var(--muted); font-size:var(--fs-sub)}
.kv .line{flex:1; min-width:0; display:flex; align-items:baseline; gap:8px}
.kv .v{flex:1; min-width:0; font-size:var(--fs-body); word-break:break-word}
.kv .v small{display:block; font-size:var(--fs-sub); color:var(--muted)}

.kv.wide .k{flex:1 1 100%}

.kv .under{flex:1 1 100%;min-width:0}
.kv .under:empty{display:none}

.kv.tap,.task .who.tap{cursor:pointer}

.fact{padding:11px 0; border-top:1px solid var(--hair)}
.fact .k{color:var(--muted); font-size:var(--fs-sub)}
.fact .line{display:flex; align-items:baseline; gap:8px}
.fact .v{flex:1; min-width:0; word-break:break-word}

.mat{padding:9px 0; border-top:1px solid var(--hair); font-size:var(--fs-sub);
     word-break:break-word}
.mat .by{color:var(--muted); font-size:var(--fs-sub)}
.linkbox{word-break:break-all; background:none; border:none; border-radius:0;
         padding:9px 0; border-top:1px solid var(--hair);
         font-family:var(--font-body); font-size:var(--fs-data); margin:0}
.mat svg{width:14px; height:14px; vertical-align:-2px; color:var(--muted)}

.matadd input{margin:0}

.matedit{padding:2px 0 6px} .matedit .kv:first-child{border-top:none}

.task .t-edit{border:none; background:none; padding:0; margin:0; border-radius:0;
              font-size:var(--fs-body); font-weight:600; line-height:1.35;
              letter-spacing:-.01em; color:var(--ink);
              resize:none; overflow:hidden; display:block}
.task .t-edit:focus{border-bottom:1px solid var(--ink)}
.task.s-done .t-edit,.task.s-cancelled .t-edit{text-decoration:none; color:var(--ink)}
.task .clip{display:inline-flex; align-items:center; gap:2px}
.task .clip svg{width:13px; height:13px}
.flatfield{border:none; border-bottom:1px solid var(--hair); background:none;
           border-radius:0; padding:5px 0; margin:0 0 8px; min-height:40px}
.flatfield:focus{border-bottom:1px solid var(--ink)}

.ic{display:inline-flex; align-items:center; justify-content:center; gap:6px}
.ic svg{width:15px; height:15px; flex:0 0 auto}
.iconbtn{width:30px; height:30px; padding:0; border-radius:var(--radius);
         background:none; color:var(--muted); display:inline-grid; place-items:center;
         flex:0 0 auto}
.iconbtn svg{width:16px; height:16px}
.task .task-fold{width:44px;height:44px;min-width:44px;flex-shrink:0}

.iconbtn.act,button.mute.act{color:var(--acc); border:1px solid var(--acc)}

.pickrow{display:flex; gap:7px; flex-wrap:wrap; align-items:center; margin:0 0 9px}
.pk{font-size:var(--fs-sub); display:inline-flex; align-items:center; gap:6px}
.pk input{width:auto; margin:0}
.member{display:flex; align-items:baseline; gap:8px; padding:11px 0;
        border-top:1px solid var(--hair)}
.member .n{flex:1; min-width:0; font-weight:400}

.member .badge{white-space:normal; text-align:right}
.member.tap{cursor:pointer}
.mbody{padding:0 0 12px}
.mbody .kv:first-child{border-top:none}

.rowacts{display:flex; justify-content:flex-end; gap:12px; padding:6px 0 0}
.rowacts .iconbtn{width:44px; height:44px; margin:0}
.rowacts .iconbtn svg{width:18px; height:18px}
.rowacts .labeled-act{width:auto; min-width:44px; padding:0 10px; gap:6px;
                     border:1px solid var(--edge); color:var(--ink); display:flex;
                     align-items:center; font-size:var(--fs-sub); white-space:nowrap}

.leave{padding:22px 0 0}

.ask{padding:11px 0 12px; margin:8px 0 0; border-top:1px solid var(--hair)}

.form{padding-top:10px; margin-top:6px; border-top:1px solid var(--hair)}

details.zone summary{list-style:none; cursor:pointer; padding:10px 0;
                     font-family:var(--font-body); font-size:var(--fs-body);
                     letter-spacing:0; text-transform:none; min-height:44px;
                     color:var(--muted); font-weight:400}
details.zone summary::before{content:"▸ "}
details.zone[open] summary::before{content:"▾ "}

details.zone.sect{border-top:none; margin-top:14px; padding-bottom:6px}
details.zone.sect > summary{display:flex; align-items:baseline; gap:8px;
                            color:var(--ink); padding:14px 0 12px}
details.zone.sect > summary .n{margin-left:auto; color:var(--muted);
                               font-variant-numeric:tabular-nums}

.kv.open,.fact.open{background:color-mix(in srgb, var(--acc) var(--tint), var(--bg));
  margin:0 calc(-1 * var(--pad)); padding:11px var(--pad)}

.inline{display:flex; gap:6px; align-items:center; margin-top:8px}
.inline input{margin:0}
.inline .q{flex:1; font-size:var(--fs-sub); color:var(--muted)}

.asks{margin:8px 0}

/* Общая карточка документа: дата и контекст сверху, имя и получение одной строкой.
   .mat/.fact остаются у вызывающих экранов ради поведения; их вид здесь уточнён. */
.document-card.mat,.document-card.fact,.document-card{padding:8px; margin:0 0 8px;
  background:var(--surface); border:1px solid var(--hair); border-radius:var(--radius);
  font-size:var(--fs-body); min-width:0}
.document-date{display:block;text-align:right;font-size:var(--fs-data);color:var(--muted);
  font-variant-numeric:tabular-nums;line-height:1.4}
.document-context{display:block;width:100%;min-height:44px;padding:4px 0;
  text-align:left;font-size:var(--fs-body);font-weight:600;line-height:1.4;
  color:var(--ink);background:none;overflow-wrap:anywhere}
.document-source{display:block;font-size:var(--fs-sub);color:var(--muted);margin:4px 0}
.document-file-row{display:flex;align-items:flex-start;gap:8px;min-width:0}
.document-name{flex:1;min-width:0}
.document-name>summary{display:flex;align-items:center;min-height:44px;padding:0 8px;
  font-size:var(--fs-btn);line-height:1.4;list-style:none;cursor:pointer;
  color:var(--file-ink);border-radius:var(--radius);
  background:linear-gradient(var(--file-bg),var(--file-bg)) center / 100% 28px no-repeat}
.document-name>summary::-webkit-details-marker{display:none}
.document-file-head{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.document-file-tail{flex:none;white-space:nowrap}
.document-full-name{font-size:var(--fs-btn);line-height:1.5;padding:8px 0;overflow-wrap:anywhere}
.document-file-row .document-get{display:flex;align-items:center;gap:8px;flex:none;
  width:auto;height:auto;min-width:44px;min-height:44px;padding:8px 0 8px 8px;
  border:0;background:none;color:var(--acc);font-size:var(--fs-btn);white-space:nowrap}
.document-get svg{width:16px;height:16px;color:currentColor}
.document-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}
.document-by{font-size:var(--fs-person);line-height:1.4;color:var(--muted);overflow-wrap:anywhere}
.document-about{font-size:var(--fs-sub);color:var(--muted);margin:4px 0;overflow-wrap:anywhere}
.document-actions:empty{display:none}
.document-actions .rowacts{padding:0;gap:8px}
.document-card.fact.open{margin:0 0 8px;padding:8px;background:var(--surface)}
.document-name>summary:active,.document-context:active{background-color:var(--file-bg)}

.task .kv[data-row="stage"] + .kv[data-row="due"]{border-top:none}

/* Материалы — чтение на полной ширине; отдельный ввод не занимает экран. */
.mats-section{position:relative;border-top:1px solid var(--hair);padding-top:4px;min-width:0}
.mats-heading{display:flex;align-items:center;min-height:44px;padding-right:100px;
  font-size:var(--fs-sub);color:var(--muted)}
.mat-composer>summary{position:absolute;top:4px;right:0;display:flex;align-items:center;gap:5px;
  min-height:44px;cursor:pointer;color:var(--acc);font-size:var(--fs-btn);list-style:none}
.mat-composer>summary::-webkit-details-marker{display:none}
.mat-composer>summary svg{width:16px;height:16px}
.mat-composer .matadd{min-width:0;padding:8px 0}
.mat-composer:not([open])>.matadd{display:none}
.matadd input{min-width:0;margin:4px 0 8px}
.matadd [hidden]{display:none}
.mat-add-actions{display:flex;gap:8px;flex-wrap:wrap}
.mat-add-actions button{display:flex;align-items:center;gap:5px}
.mat-add-actions svg{width:16px;height:16px}
.mat-picked{overflow-wrap:anywhere;font-size:var(--fs-btn);margin-bottom:8px}
.mats-list{min-width:0}
.document-kind{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:var(--fs-person)}
.document-kind svg{width:14px;height:14px}
.document-compact .document-date{display:inline;margin-left:6px}
.document-compact .document-footer{flex-wrap:wrap}
.mat-text .document-footer{flex-wrap:wrap}
.mat-text .document-footer .rowacts{margin-left:auto;padding:0}
.document-compact .document-actions{margin-left:auto}
.document-name[open] .document-file-head,.document-name[open] .document-file-tail{display:none}
.document-name[open]>summary::after{content:"Свернуть имя"}
.mat-text .mat-content{overflow-wrap:anywhere;white-space:pre-wrap;font-size:var(--fs-btn)}
.mat-text .mat-content a{display:inline-block;min-height:44px;padding:10px 0}
