/* Конструктор кадрового проекта (ЦЕХ.ПРОЕКТ) — общий компонент: экран ЦЕХ.ПРОЕКТ
   главной (home.css) и страница сценария /proekt/ (scenario.css). Вынесено из home.css
   26.10 без изменений; подключается перед home.css. */

.proekt-builder { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }

/* График */
.proekt-chart {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: var(--border-thin) solid var(--color-line);
  border-radius: var(--radius-l);
  background: var(--color-surface);
  box-shadow: var(--shadow-podbor);
}
.proekt-chart__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-3) var(--space-4); }
.proekt-chart__intro { display: grid; gap: var(--space-1); }
.proekt-chart__title { font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); }
.proekt-chart__hint { max-width: 36rem; font-size: var(--fs-small); color: var(--color-text-muted); }
/* срок — плашкой */
.proekt-term { align-self: start; justify-self: end; display: inline-flex; align-items: center; min-height: var(--filter-h); padding: 0 var(--space-3); border-radius: var(--radius-round); background: var(--color-match-high-bg); color: var(--color-match-high); font-size: var(--fs-caption-text); font-weight: var(--fw-bold); white-space: nowrap; }
.proekt-years { justify-self: end; }
/* шаги заявки ①②③ */
.proekt-step-label { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.proekt-step-label__num { flex: none; display: inline-grid; place-items: center; width: var(--step-num); height: var(--step-num); border-radius: 0; background: var(--color-number); color: var(--color-dark-text); font-size: var(--fs-caption); letter-spacing: 0; }
.proekt-chart__tip { font-size: var(--fs-caption-text); color: var(--color-text-muted); }

/* Год — маленький переключатель-сегменты */
.proekt-years { display: inline-flex; padding: var(--space-1); border-radius: var(--radius-button); background: var(--color-bg); }
.proekt-years[hidden] { display: none; }
.proekt-years__btn { min-height: var(--filter-h); padding: 0 var(--space-4); border: 0; border-radius: calc(var(--radius-button) - 3px); background: transparent; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--color-text-muted); cursor: pointer; }
.proekt-years__btn[aria-pressed="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-card); }

/* Месяцы: столбик высотой по численности (0–20) */
.proekt-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.proekt-month { display: grid; justify-items: center; gap: var(--space-1); min-width: 0; }
.proekt-month__btn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  height: var(--proekt-chart-h);
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  font: inherit;
  cursor: pointer;
}
.proekt-month__count { font-size: var(--fs-caption); font-weight: var(--fw-bold); white-space: nowrap; color: var(--color-text); }
.proekt-month__bar {
  --n: 0;
  display: block;
  width: 100%;
  max-width: var(--proekt-bar-w);
  height: calc(var(--proekt-bar-min) + (var(--proekt-chart-h) - var(--proekt-bar-min) - var(--space-5)) * var(--n) / 20);
  border-radius: var(--radius-s) var(--radius-s) var(--space-1) var(--space-1);
  background: linear-gradient(to top, var(--brand-grad-2), var(--brand-grad-1));
  transition: height var(--transition-base);
}
/* пустой месяц — тонкая полоска с «+» */
.proekt-month:not(.is-on) .proekt-month__bar { height: var(--proekt-bar-min); background: var(--color-line); }
.proekt-month:not(.is-on) .proekt-month__btn::after {
  content: "+";
  position: absolute;
  bottom: calc(var(--proekt-bar-min) + var(--space-2));
  font-size: var(--fs-h3);
  line-height: 1;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.proekt-month:not(.is-on) .proekt-month__btn:hover::after { opacity: 1; }
.proekt-month.is-current .proekt-month__bar { box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px var(--color-text); }
.proekt-month__name { font-size: var(--fs-caption-text); color: var(--color-text-muted); }
.proekt-month.is-current .proekt-month__name { font-weight: var(--fw-bold); color: var(--color-text); }
/* прошедший месяц — недоступен */
.proekt-month.is-past .proekt-month__btn { cursor: not-allowed; }
.proekt-month.is-past .proekt-month__bar { background: repeating-linear-gradient(45deg, var(--color-line) 0 3px, transparent 3px 6px); }
.proekt-month.is-past .proekt-month__name { opacity: 0.5; }
.proekt-month__bar[data-n="0"] { --n: 0; }
.proekt-month__bar[data-n="1"] { --n: 1; }
.proekt-month__bar[data-n="2"] { --n: 2; }
.proekt-month__bar[data-n="3"] { --n: 3; }
.proekt-month__bar[data-n="4"] { --n: 4; }
.proekt-month__bar[data-n="5"] { --n: 5; }
.proekt-month__bar[data-n="6"] { --n: 6; }
.proekt-month__bar[data-n="7"] { --n: 7; }
.proekt-month__bar[data-n="8"] { --n: 8; }
.proekt-month__bar[data-n="9"] { --n: 9; }
.proekt-month__bar[data-n="10"] { --n: 10; }
.proekt-month__bar[data-n="11"] { --n: 11; }
.proekt-month__bar[data-n="12"] { --n: 12; }
.proekt-month__bar[data-n="13"] { --n: 13; }
.proekt-month__bar[data-n="14"] { --n: 14; }
.proekt-month__bar[data-n="15"] { --n: 15; }
.proekt-month__bar[data-n="16"] { --n: 16; }
.proekt-month__bar[data-n="17"] { --n: 17; }
.proekt-month__bar[data-n="18"] { --n: 18; }
.proekt-month__bar[data-n="19"] { --n: 19; }
.proekt-month__bar[data-n="20"] { --n: 20; }

/* Счётчик выбранного месяца */
.proekt-stepper { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-m); background: var(--color-bg); }
.proekt-stepper[hidden] { display: none; }
.proekt-stepper__label { font-size: var(--fs-small); }
.proekt-stepper__btn { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); border: var(--border-thin) solid var(--color-line); border-radius: var(--radius-button); background: var(--color-surface); font: inherit; font-size: var(--fs-h3); line-height: 1; cursor: pointer; }
.proekt-stepper__btn:hover:not(:disabled) { border-color: var(--color-text); }
.proekt-stepper__btn:disabled { opacity: 0.35; cursor: default; }
.proekt-stepper__value { min-width: 2ch; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold); text-align: center; }
.proekt-stepper__note { flex-basis: 100%; font-size: var(--fs-caption-text); color: var(--color-text-muted); }
.proekt-stepper__note[hidden] { display: none; }

/* Итог справа */
.proekt-summary {
  display: grid;
  align-content: start;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border-radius: var(--radius-l);
  background: var(--color-sheet);
}
.proekt-summary__label { font-size: var(--fs-caption); font-weight: var(--fw-bold); letter-spacing: var(--tracking-label); text-transform: uppercase; }
.proekt-spheres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.proekt-sphere {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-m);
  background: var(--color-surface);
  font: inherit;
  font-size: var(--fs-small);
  text-align: left;
  color: var(--color-text);
  min-width: 0;
  cursor: pointer;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.proekt-sphere span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proekt-sphere svg { flex: none; width: var(--icon-size-m); height: var(--icon-size-m); fill: none; stroke: var(--color-text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.proekt-sphere:hover { border-color: var(--color-line); }
.proekt-sphere[aria-pressed="true"] { border-color: var(--color-text); }
.proekt-sphere[aria-pressed="true"] svg { stroke: var(--color-accent); }
.proekt-totals { display: grid; grid-template-columns: 1.5fr 0.6fr 1.3fr; gap: var(--space-3); margin: 0; }
.proekt-step-label--total { padding-top: var(--space-3); border-top: var(--border-thin) solid var(--color-line); }
.proekt-totals dt { font-size: var(--fs-caption-text); color: var(--color-text-muted); }
.proekt-totals dd { margin: 0; font-weight: var(--fw-bold); }
.proekt-summary__note { font-size: var(--fs-small); color: var(--color-text-muted); }
.proekt-summary__cta { justify-content: center; width: 100%; white-space: normal; text-align: center; }

/* Шаги */
.proekt-flow { display: grid; gap: var(--space-3); }
.proekt-flow__title { margin: 0; font-size: var(--fs-caption-text); font-weight: var(--fw-text); line-height: var(--lh-heading); color: var(--color-text-muted); }
.proekt-steps { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.proekt-step { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-3); }
.proekt-step__num { grid-row: 1 / span 2; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-display); color: var(--color-text-muted); }
.proekt-step__title { font-weight: var(--fw-bold); }
.proekt-step__text { font-size: var(--fs-small); color: var(--color-text-muted); }

@media (prefers-reduced-motion: reduce) { .proekt-month__bar { transition: none; } }

@media (max-width: 599px) {
  .proekt-chart { padding: var(--space-4); }
  .proekt-chart__top { grid-template-columns: minmax(0, 1fr); }
  .proekt-term, .proekt-years { justify-self: start; }
  .proekt-sphere { padding: var(--space-2); font-size: var(--fs-caption-text); }
  .proekt-sphere { gap: var(--space-1); }
  .proekt-spheres .proekt-sphere span { white-space: normal; overflow: visible; hyphens: auto; }
  .proekt-month__count { font-size: var(--fs-caption); }
  .proekt-month__unit { display: none; }
  .proekt-month__name { font-size: var(--fs-caption); }
  .proekt-totals { grid-template-columns: 1fr 1fr; }
  .proekt-stepper__label { flex-basis: 100%; }
  .proekt-totals > div:first-child { grid-column: 1 / -1; }
}

/* Компьютер: график | итог; экран — в высоту окна */
@media (min-width: 1024px) {
  .proekt-builder { grid-template-columns: 1fr var(--proekt-summary-w); gap: var(--space-5); align-items: stretch; }
  .proekt-chart, .proekt-summary { padding: var(--how-card-pad); gap: var(--how-gap-cards); }
  .proekt-sphere { min-height: var(--proekt-sphere-h); }
  .proekt-flow { gap: var(--space-2); }
  .proekt-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); }
}