/* Стили модуля «Проекты» (Task 13; макет макеты/экраны-янтарь.html — «Проекты», цель на «Команде», карточка проекта на
   «Сегодня», «Шаг проекта»). Только переменные палитры app.css (--card, --card2, --line, --sub, --text, --acc,
   --on-acc); своих ключевых кадров нет: раскрытые шаги проявляются анимацией popIn из app.css, полоски растут плавным
   переходом ширины — правило prefers-reduced-motion в конце app.css выключает и то и другое. Общие классы макета
   (.pt, .bar, .foot, .avs, .st) — внутри карточки .pj, чтобы не задеть экраны других модулей. */

/* ---- карточка проекта и счётчика: название и срок, полоска, «4 из 9 шагов · 13 дней» и аватары */
.pj-h { cursor: pointer; border-radius: 14px; }
.pj .pt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; font-size: 14.5px; }
.pj .pt b { min-width: 0; overflow-wrap: anywhere; font-weight: 700; }
.pj .pt span { flex: none; color: var(--sub); font-weight: 500; font-size: 11.5px; white-space: nowrap; }
.pj .bar { height: 6px; border-radius: 6px; background: var(--card2); margin: 8px 0 6px; overflow: hidden; }
.pj .bar i { display: block; height: 100%; border-radius: 6px; background: var(--acc); transition: width .9s var(--ease); }
.pj .foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
.pj .foot .muted { min-width: 0; overflow-wrap: anywhere; }
.pj .avs { display: flex; flex: none; }
.pj .avs .ava { width: 22px; height: 22px; font-size: 10px; margin-left: -6px; border: 2px solid var(--card); }
.pj .avs .ava:first-child { margin-left: 0; }
.pj.fin .pt b { color: var(--sub); }

/* ---- шаги раскрытого проекта: сделан — зачёркнут, сегодня — янтарный кружок и тег */
.pj .steps { margin-top: 8px; display: flex; flex-direction: column; gap: 1px; animation: popIn .22s var(--ease) backwards; }
.pj .st { display: flex; align-items: center; gap: 8px; min-height: 30px; border: 0; background: none; color: var(--text);
  padding: 4px 6px; margin: 0 -6px; width: calc(100% + 12px); border-radius: 10px; font-size: 12.5px; text-align: left; transition: background .2s; }
.pj .st:active { background: var(--card2); }
.pj .st .c { width: 15px; height: 15px; border-radius: 50%; border: 2px solid var(--line); flex: none; display: inline-flex; align-items: center;
  justify-content: center; color: var(--on-acc); }
.pj .st .c svg { width: 9px; height: 9px; stroke-width: 4; }
.pj .st .sn { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.pj .st.d { color: var(--sub); }
.pj .st.d .sn { text-decoration: line-through; }
.pj .st.d .c { background: var(--sub); border-color: var(--sub); }
.pj .st.now { font-weight: 600; }
.pj .st.now .c { border-color: var(--acc); }
.pj .st .tag { margin-left: auto; flex: none; color: var(--sub); font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.pj .st.now .tag { color: var(--acc); }
.pj .st.more { color: var(--sub); }
.pj .pacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pj .pill { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; transition: transform .12s; }
.pj .pill svg { width: 13px; height: 13px; stroke-width: 2.2; }
.pj .pill:disabled { opacity: .5; }

/* ---- «Сегодня»: карточка проекта со своим шагом */
.ptoday { cursor: pointer; transition: transform .12s; }
.ptoday:active, .pgoal:active { transform: scale(.98); }

/* ---- цель команды («Команда» и «Проекты»): общая полоска из сегментов по людям — янтарь с зазором 2 px */
.pgoal { cursor: pointer; transition: transform .12s; }
.pgoal .gt { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-weight: 700; }
.pgoal .gt span { min-width: 0; overflow-wrap: anywhere; }
.pgoal .gt b { flex: none; color: var(--acc); font-size: 15px; }
.goalbar { display: flex; height: 8px; border-radius: 6px; overflow: hidden; background: var(--card2); margin: 8px 0 6px; gap: 2px; }
.goalbar i { display: block; flex: none; min-width: 3px; height: 100%; background: var(--acc); }

/* ---- «Новая задача»: строка «Шаг проекта · не выбран ›» */
.prow { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; border: 0; background: none; color: var(--text);
  padding: 2px 0; font-size: 14px; text-align: left; }
.prow .muted { min-width: 0; max-width: 62%; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- панели: шаг, выбор шага, «+N», «+ Проект» */
#sheet-pmenu .pn, #sheet-pmenu .act > span:nth-child(2) { flex: 1; min-width: 0; overflow-wrap: anywhere; }
#sheet-pmenu .pn small { display: block; color: var(--sub); font-size: 11.5px; font-weight: 500; margin-top: 1px; }
#sheet-pmenu .pon { margin-left: auto; color: var(--acc); display: inline-flex; }
#sheet-pmenu .pon svg { color: var(--acc); stroke-width: 2.6; }
#sheet-pmenu .pmv { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pkind .seg { display: flex; }
.pkind .seg button { flex: 1; padding: 7px 6px; }
.psteps { display: flex; flex-direction: column; gap: 6px; }
.prs { display: flex; align-items: center; gap: 4px; background: var(--card2); border-radius: 14px; padding: 4px 4px 4px 12px; }
.prs input { flex: 1; min-width: 0; background: none; border: 0; outline: none; padding: 8px 0; font-size: 14px; color: var(--text); caret-color: var(--acc); }
.prs select { flex: none; max-width: 84px; background: var(--card); border: 0; border-radius: 10px; padding: 6px 4px; color: var(--text); font-size: 13px; }
.prs .icon-btn { width: 28px; height: 30px; border-radius: 9px; background: none; color: var(--sub); }
.prs .icon-btn svg { width: 15px; height: 15px; }
.psteps .padd { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; }
.psteps .padd svg { width: 13px; height: 13px; }
.psteps .padd:disabled { opacity: .5; }