/* External Skeleton · 008 срез 3 · екран «Неделя» (week.js, week-batch.js).
   Оболонка (.plan__head, .plan__title, .plan__close, .plan__error, .undo,
   .undo__text) і рядок (.slot-row, .day-chip, .slots, is-fit, is-today) —
   з plan.css, не дублюються (008 план §4 «Экран»). Нових кольорів тут
   немає: лише --text-* токени, «перенесено» — мелким моноширинным, без
   червоного (БП-12). Мобільний < 900 px, десктоп >= 900 px. */

/* ------------------------------------------------------------- секції */

.week-section {
  margin-top: var(--sp-5);
}
.week-section__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--sp-2);
}
.week-section__title {
  font: var(--w-medium) var(--fs-caption) var(--font-mono);
  color: var(--text-1);
}
/* «Перенесено N» над сьогодні — факт, не тривога: моно, другорядний колір,
   жодного червоного (008 БП-12, ТР-23). */
.week-section__moved {
  font: var(--w-regular) 10.5px/14px var(--font-mono);
  color: var(--text-3);
}

/* Свёрнутые секции («следующая неделя», «очередь») — те саме <details>, що й
   у видаленого рендера кроку 3, тільки клас загальний для обох. */
.week-section--collapsed summary {
  cursor: pointer;
  padding: 10px 0;
  color: var(--text-2);
  font: var(--w-medium) 12px/16px var(--font-mono);
  list-style: none;
}
.week-section--collapsed summary::-webkit-details-marker { display: none; }
.week-section--collapsed[open] summary { color: var(--text-1); }

.week-more {
  display: block;
  margin-top: var(--sp-2);
  font: var(--w-regular) 12px var(--font-sans);
}

/* --------------------------------------------------------- «со вчера» */

.week-carry {
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--divider);
}
.week-carry__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--text-2);
  font: var(--w-regular) var(--fs-caption) var(--font-mono);
}
.week-carry__head .link { font-weight: var(--w-medium); }

/* ------------------------------------------------------------- рядок */

/* .slot-row лишається базою (plan.css); тут лише галочка зліва і те, що
   рядок тепер — flex-рядок із галочкою, а не колонка. */
.week-row {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.week-row__body { flex: 1 1 auto; min-width: 0; }

/* Галочка: по наведенню на мишу, на тач-екрані завжди видна (008 ТР-18). */
.week-check {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-6);
  background: none;
  color: var(--text-1);
  font: var(--w-medium) 13px/1 var(--font-sans);
  cursor: pointer;
  opacity: 0;
}
@media (hover: hover) {
  .week-row:hover .week-check,
  .week-check:focus-visible { opacity: 1; }
}
@media (hover: none) {
  .week-check { opacity: 1; width: 28px; height: 28px; }
}
.week-check.is-on {
  opacity: 1;
  border-color: var(--text-2);
  background: var(--bg-2);
}
.week-check.is-on::after { content: '✓'; }
.week-check:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; }
.week-check[disabled] { cursor: default; }

.week-row.is-selected { background: var(--bg-1); border-radius: var(--radius-8); }
.week-row.is-busy .slot-row__text { color: var(--text-2); }

/* ------------------------------------------------------------- полоса */

.week-bar {
  position: sticky;
  bottom: 0;
  margin-top: var(--sp-5);
  padding: var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-10);
  background: var(--bg-1);
}
.week-bar__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}
.week-bar__label {
  font: var(--w-medium) var(--fs-caption) var(--font-mono);
  color: var(--text-1);
}
.week-bar__clear {
  flex: none;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: var(--radius-6);
  background: none;
  color: var(--text-2);
  font: var(--w-regular) 18px/1 var(--font-sans);
  cursor: pointer;
}
.week-bar__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
}
.week-bar__grid .btn { min-height: var(--touch-min); }
.week-bar__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: var(--sp-1);
  margin-top: var(--sp-3);
}

@media (min-width: 900px) {
  .week-bar__grid { grid-template-columns: repeat(4, 1fr); }
}