/* Homework screen: the urgency-sorted list and a single task. */

.hw {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  padding-bottom: calc(var(--s-8) + env(safe-area-inset-bottom, 0px));
}

/* ---------- Top bar ---------- */
.hw-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.hw-top__inner {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
}
.hw-top__right { margin-left: auto; }

/* Шапка — общая .container (1200px), как на всех экранах с навигацией в
   ней: иначе при прямом переходе между вкладками (js/nav.js) сама
   навигация каждый раз прыгает по ширине — 24.09, жалоба на «сайт
   съезжает». Контент — своей узкой шириной (920px) под список задач,
   как и был: полез бы на все 1200px, карточки растянулись бы и бейджи
   срока оторвались от заголовка. */
.hw-main { max-width: calc(920px + 2 * var(--gutter)); padding-top: var(--s-6); }

/* ---------- Heading ---------- */
.hw-head {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.hw-head__title {
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: -0.03em;
}
.hw-head__sub {
  max-width: 56ch;
  color: var(--text-2);
  font-size: var(--fs-18);
}
/* Куда ведёт карточка — сказано один раз на экран, а не на каждой из них. */
.hw-head__honest {
  max-width: 64ch;
  padding-left: var(--s-3);
  border-left: 2px solid var(--border-strong);
  color: var(--text-3);
  font-size: var(--fs-14);
  line-height: 1.6;
}

/* ---------- Focus card ---------- */
/* Одна крупная карточка: с чего начать. Фон — мягкий акцентный, без красного:
   срок, даже прошедший, — это информация, а не авария. */
.hw-focus {
  position: relative;
  display: grid;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
  padding: var(--s-6);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background:
    var(--surface);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}
.hw-focus__label {
  color: var(--accent-text);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hw-focus__meta { color: var(--text-2); font-size: var(--fs-14); }
.hw-focus__meta b { color: var(--text); font-weight: 600; }
.hw-focus__title {
  max-width: 28ch;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.hw-focus__when { color: var(--text-2); font-size: var(--fs-16); }
.hw-focus__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-3); }
@media (max-width: 519px) {
  .hw-focus { padding: var(--s-5); margin-bottom: var(--s-6); }
  .hw-focus__actions .btn { flex: 1 1 100%; }
}

/* ---------- Groups ---------- */
.hw-list { display: grid; gap: var(--s-6); }
.hw-group { display: grid; gap: var(--s-3); }
.hw-group__head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
/* Подпись группы — тихая надпись, а не второй заголовок страницы. */
.hw-group__title {
  color: var(--text-2);
  font-family: var(--font-ui);
  font-size: var(--fs-14);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hw-group__count {
  min-width: 22px;
  padding: 1px 8px;
  border-radius: var(--r-full);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: var(--fs-12);
  font-weight: 600;
  text-align: center;
}
.hw-group__list { display: grid; gap: var(--s-3); }

/* ---------- Task row ---------- */
.hw-card {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--s-4);
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-state) var(--ease-out);
}
.hw-card:hover {
  border-color: var(--spot-border);
  box-shadow: var(--shadow-sm);
}
.hw-card:has(.hw-card__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Плитка даты: число и месяц срока. Срок прошёл — плитка тёплая, но не красная. */
.hw-tile {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0;
  width: 64px;
  height: 64px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--text);
  line-height: 1.05;
}
.hw-tile b {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hw-tile small { color: var(--text-2); font-size: var(--fs-12); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }
.hw-tile.is-none b { color: var(--text-3); }
.hw-tile.is-none small { color: var(--text-3); font-size: 0.625rem; text-transform: none; letter-spacing: 0; }
.hw-group--soon .hw-tile { background: var(--surface-2); }
.hw-group--overdue .hw-tile { background: var(--warning-soft); }

/* Whole card is the link target; the title carries it so the accessible name stays the task title */
.hw-card__link { color: inherit; }
.hw-card__link:hover { text-decoration: none; }
.hw-card__link:focus-visible { outline: none; }
.hw-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.hw-card__body { min-width: 0; display: grid; gap: var(--s-1); }
.hw-card__meta {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-12);
  color: var(--text-2);
}
.hw-card__meta b { color: var(--text); font-weight: 600; }
.hw-card__code {
  padding: 2px 6px 1px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: 0.625rem;
}
.hw-card__title {
  /* balance из base.css в узкой карточке ставит заголовок столбиком. */
  text-wrap: pretty;
  font-family: var(--font-display);
  font-size: var(--fs-16);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.hw-card__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
.hw-card.is-done { background: transparent; }
.hw-card.is-done .hw-tile { background: var(--surface-2); color: var(--text-3); }
.hw-card.is-done .hw-card__title { color: var(--text-2); }
.hw-card.is-done .hw-card__code { background: var(--surface-2); color: var(--text-3); }

/* Кружок «сделано». Над карточкой-ссылкой, иначе клик уходил бы в конспект. */
.hw-check {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--border-strong);
  border-radius: 50%;
  background: transparent;
  color: transparent;
  transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out);
}
.hw-check svg { width: 18px; height: 18px; }
.hw-check:hover { border-color: var(--success); color: var(--success); }
.hw-check.is-done { border-color: var(--success); background: var(--success-soft); color: var(--success); }
.hw-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 519px) {
  .hw-card { grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--s-3); padding: var(--s-3); }
  .hw-tile { width: 52px; height: 52px; }
  .hw-tile b { font-size: 1.25rem; }
}

/* «В календарь»: кнопка и причина рядом. Над карточкой-ссылкой. */
.hw-cal {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin-top: var(--s-2);
}
.hw-cal__note {
  max-width: 62ch;
  color: var(--text-3);
  font-size: var(--fs-12);
  line-height: 1.5;
}

/* Сделано — свёрнуто: это не про «что делать». */
.hw-done { display: grid; gap: var(--s-3); }
.hw-done__summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--text-2);
  font-size: var(--fs-14);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.hw-done__summary::-webkit-details-marker { display: none; }
.hw-done__summary svg { width: 16px; height: 16px; transition: transform var(--dur-state) var(--ease-out); }
.hw-done[open] > .hw-done__summary svg { transform: rotate(180deg); }
.hw-done[open] > .hw-done__summary { margin-bottom: var(--s-3); }

/* ---------- Deadline badges ---------- */
/* Красной заливки на экране домашки нет: срок, который прошёл, — обычная
   пометка с тёплым контуром. Красный остаётся за настоящими авариями (подписка
   кончилась на дашборде), поэтому глобальный .is-overdue ниже не трогаем. */
.hw .badge--due.is-overdue {
  background: var(--warning-soft);
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warning) 50%, transparent);
}
.badge--due.is-overdue {
  background: color-mix(in srgb, var(--danger) 18%, transparent);
  color: var(--danger-text);
}
.badge--due.is-soon { background: var(--warning-soft); color: var(--text); }
.badge--due.is-later { background: var(--surface-2); color: var(--text-2); }
/* Срока нет — не срочно и не «потом», а неизвестно: пунктир вместо заливки. */
.badge--due.is-none { background: transparent; color: var(--text-2); border: 1px dashed var(--border-strong); }

/* ---------- Empty state ---------- */
.hw-empty {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-6);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-xl);
}
.hw-empty__title {
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.hw-empty__text { max-width: 48ch; color: var(--text-2); }

/* ---------- Single task ---------- */
.hw-task {
  display: grid;
  gap: var(--s-4);
  max-width: 72ch;
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--shadow-sm), var(--shadow-inset);
}
@media (min-width: 600px) {
  .hw-task { padding: var(--s-6); }
}
/* Inline flow, not flex: as a flex item the long meta text would drop to its own line and
   strand the subject chip above it on phones (same reason as .nt-head__meta). */
.hw-task__meta {
  color: var(--text-2);
  font-size: var(--fs-14);
}
.hw-task__code {
  display: inline-block;
  margin-right: var(--s-2);
  vertical-align: 1px;
  padding: 3px 6px 2px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  color: var(--accent-ink);
}
.hw-task__title {
  font-size: clamp(1.625rem, 4vw, 2.25rem);
  letter-spacing: -0.03em;
}
.hw-task__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.hw-task__text {
  padding-top: var(--s-2);
  border-top: 1px solid var(--border);
  color: var(--text-2);
  font-size: var(--fs-18);
  line-height: 1.65;
}
.hw-task__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hw-task__actions .btn { flex: 1 1 240px; }
.hw-task__honest { color: var(--text-3); font-size: var(--fs-14); }

.hw-task.is-done .hw-task__title { color: var(--text-2); }

/* ---------- Редизайн 2: как в прототипе ----------
   Карточки без обводки, группа заданий — одна плоскость со строками через
   линию. Подписи групп и «Сначала это» — обычным регистром, без разрядки. */
.hw-top { background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.hw-top__inner { min-height: calc(52px + env(safe-area-inset-top, 0px)); }
.hw-head__title { font-size: clamp(2.5rem, 6vw, 4rem); letter-spacing: -0.045em; }
.hw-head__sub { font-size: clamp(1.125rem, 1.8vw, 1.375rem); font-weight: 500; letter-spacing: -0.02em; }
.hw-focus { border: 0; box-shadow: none; padding: clamp(24px, 4vw, 40px); }
.hw-focus__label { font-size: var(--fs-16); font-weight: 600; letter-spacing: -0.02em; text-transform: none; }
.hw-focus__title { font-size: clamp(1.875rem, 4vw, 2.75rem); letter-spacing: -0.04em; line-height: 1.08; }
.hw-group__title { color: var(--text); font-size: var(--fs-18); letter-spacing: -0.02em; }
.hw-group__list { gap: 0; border-radius: 18px; background: var(--surface); overflow: hidden; }
.hw-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: var(--s-4) var(--s-5);
  grid-template-columns: 52px minmax(0, 1fr) auto;
}
.hw-card + .hw-card::before { content: ""; position: absolute; top: 0; left: calc(var(--s-5) + 52px + var(--s-4)); right: 0; height: 1px; background: var(--border); }
.hw-card:hover { border-color: transparent; box-shadow: none; background: var(--surface-2); }
.hw-card:has(.hw-card__link:focus-visible) { outline-offset: -2px; }
.hw-tile { width: 52px; height: 52px; border-radius: 14px; }
.hw-tile b { font-size: 1.25rem; font-weight: 700; }
.hw-tile small { text-transform: none; letter-spacing: 0; font-weight: 500; }
.hw-card__title { font-weight: 500; letter-spacing: -0.015em; }

/* ================= Редизайн 3: домашка 1:1 с прототипом 4 (ROADMAP §16.1) =================
   Шапка: «Домашка. Две горят.» и сегмент «Активные / Сданные» справа. Ниже две
   колонки: фокус-карточка (с чего начать) и остальное одним списком с группами. */
.hw-main { max-width: var(--container); padding-top: var(--s-7); }
.hw-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 36px; }
.hw-head__text { display: grid; gap: 12px; }
.hw-head__sub { max-width: 46ch; color: var(--text-2); font-size: clamp(1.05rem, 1.5vw, 1.2rem); font-weight: 400; letter-spacing: -0.01em; }

/* Одна колонка по ширине экрана: «с чего начать» сверху во всю ширину, список под ним, длинный — с «Показать ещё»
   (App.utils.clip). Две колонки «карточка | список» оставляли под короткой карточкой пустоту (Max 20.10). */
.hw-grid { display: grid; gap: 16px; align-items: start; }

.hw-focus { display: grid; gap: 20px; margin: 0; padding: 28px; background: var(--surface); }
.hw-focus__main, .hw-focus__side { display: grid; gap: 20px; min-width: 0; align-content: start; }
.hw-focus__side { gap: 12px; justify-items: start; }
.hw-focus__side .hw-cal { margin-top: 0; }
@media (min-width: 900px) {
  .hw-focus { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s-7); align-items: end; }
  .hw-focus__main { max-width: 72ch; }
  .hw-focus__side { padding-bottom: 2px; }
}
.hw-focus__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.hw-focus__subj { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); font-size: var(--fs-14); }
.hw-focus__subj::before, .hw-li__dot { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--subj, var(--text-3)); flex: none; }
.hw-focus__title { max-width: none; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.hw-focus__text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  color: var(--text-3);
  font-size: var(--fs-14);
  line-height: 1.55;
}
.hw-focus__when { color: var(--text-3); font-size: var(--fs-14); margin-top: -12px; }
.hw-focus__actions { align-items: center; gap: 10px 20px; margin-top: 0; }
.hw-focus .hw-cal { margin-top: 0; }

/* Список одной плоскостью */
.hw-list1 { display: grid; border-radius: var(--r-xl); background: var(--surface); overflow: hidden; }
.hw-li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 18px 24px; transition: background-color 0.2s var(--ease-out); }
.hw-li + .hw-li::before { content: ""; position: absolute; top: 0; left: 48px; right: 0; height: 1px; background: var(--border); }
.hw-li:hover { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); }
.hw-li:has(.hw-li__link:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.hw-li__body { min-width: 0; display: grid; gap: 2px; }
.hw-li__title { font-family: var(--font-ui); font-size: var(--fs-16); font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; }
.hw-li__link { color: inherit; }
.hw-li__link:hover { text-decoration: none; }
.hw-li__link:focus-visible { outline: none; }
.hw-li__link::after { content: ""; position: absolute; inset: 0; }
.hw-li__meta { color: var(--text-3); font-size: var(--fs-14); }
.hw-li__tail { position: relative; z-index: 1; display: flex; align-items: center; gap: 8px; }
.hw-li__cal.is-empty { display: block; }
.hw-li__cal { width: 36px; height: 36px; background: transparent; color: var(--text-3); opacity: 0; transition: opacity 0.2s var(--ease-out); }
.hw-li:hover .hw-li__cal, .hw-li__cal:focus-visible { opacity: 1; }
.hw-li.is-done .hw-li__title { color: var(--text-3); }
.hw-check { width: 32px; height: 32px; }
.hw-check.is-done { border-color: transparent; background: color-mix(in srgb, var(--lime) 32%, transparent); color: var(--lime-text); }
.hw-none { padding: 24px; border-radius: var(--r-xl); background: var(--surface); color: var(--text-3); }
@media (pointer: coarse) { .hw-li__cal { opacity: 1; } }
@media (max-width: 599px) {
  .hw-li { grid-template-columns: auto minmax(0, 1fr); padding: 16px 20px; }
  .hw-li__tail { grid-column: 2; }
  .hw-focus { padding: 22px; }
}

/* ---------- «Ещё прозвучало на парах» (notes.tasks) ---------- */
.hw-feed { margin-top: var(--s-7); }
.hw-feed__head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--fs-18);
  font-weight: 700;
}
.hw-feed__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s-3); }
.hw-feed__item {
  display: grid;
  align-content: start;
  gap: var(--s-2);
  padding: var(--s-4);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.hw-feed__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); }
.hw-feed__kind { color: var(--text-3); font-size: var(--fs-12); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.hw-feed__title { font-family: var(--font-ui); font-size: var(--fs-16); font-weight: 600; line-height: 1.35; }
.hw-feed__text { color: var(--text-2); font-size: var(--fs-14); }
.hw-feed__quote { color: var(--text-3); font-size: var(--fs-12); font-style: italic; }
.hw-feed__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); margin-top: var(--s-1); }
.hw-feed__src { color: var(--text-2); font-size: var(--fs-12); text-decoration: none; }
.hw-feed__src:hover { color: var(--accent-text); text-decoration: underline; }
.hw-li__back { width: 32px; height: 32px; }
.hw-li__back svg { width: 14px; height: 14px; }

/* ---------- Main v2: горящее задание на абрикосе ----------
   Просрочено, сегодня или завтра. Подписи — текстом абрикоса: серый на цветном
   не дотягивает до 4.5:1. */
.hw-focus.is-burn { background: var(--tang-soft); box-shadow: none; }
.hw-focus.is-burn .hw-focus__subj,
.hw-focus.is-burn .hw-focus__subj .who-link,
.hw-focus.is-burn .hw-focus__text,
.hw-focus.is-burn .hw-focus__when,
.hw-focus.is-burn .link-more { color: var(--tang-ink); }
.hw-focus.is-burn .badge--warn { background: color-mix(in srgb, var(--tang) 34%, var(--tang-soft)); color: var(--tang-ink); }

/* ---------- Лента по предметам (13.10) ---------- */
/* Subjects side by side, left to right, each a column of its own cards (Max 13.10: one column left the right half
   empty). */
/* Max 20.10: one subject with many tasks was a single tall column, the rest of the width empty. Now a subject is as
   wide as it has cards (--n, up to four across) and several subjects share a row; the cards inside fill it. */
.hw-feed__groups { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-5); align-items: flex-start; }
.hw-feed__group { display: grid; gap: var(--s-3); align-content: start; min-width: min(290px, 100%); max-width: 100%; flex: var(--n, 1) 1 calc(min(var(--n, 1), 4) * 290px); }
.hw-feed__group .hw-feed__list { grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); }
.hw-feed__subj { display: flex; align-items: center; gap: var(--s-2); font-family: var(--font-ui); font-size: var(--fs-16); font-weight: 600; }
.hw-feed__subj::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--subj, var(--text-3)); flex: none; }
.hw-feed__subj .who-link { color: var(--text); }
/* One line per subject: a long name wrapped to two, the dot sat between the lines and that column's cards started
   lower than its neighbours. The full name is in the title. */
.hw-feed__subj { min-width: 0; }
.hw-feed__subj .who-link { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hw-feed__tags { display: inline-flex; flex-wrap: wrap; gap: var(--s-1); justify-content: flex-end; }
/* Шапка ленты: заголовок слева, «Мелочи с пар» справа (§39). */
.hw-feed__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-4); }
.hw-feed__bar .hw-feed__head { margin-bottom: 0; }
.hw-feed__minor-btn .badge { margin-left: 2px; }
.hw-feed__none { color: var(--text-2); font-size: var(--fs-14); }

/* Мини-окно мелочей: та же карточка, что у досье преподавателя (css/teacher.css), пункты — как в конспекте. */
.hw-minor__body { display: grid; gap: var(--s-5); }
.hw-minor__group { display: grid; gap: var(--s-3); }
.hw-minor__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); min-width: 0; }
.hw-minor__name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hw-minor__src { display: inline-flex; align-items: center; gap: 4px; flex: none; color: var(--text-2); font-size: var(--fs-12); text-decoration: none; }
.hw-minor__src svg { width: 12px; height: 12px; }
.hw-minor__src:hover { color: var(--accent-text); }

/* ---------- Critique 20.10 ---------- */
/* The deadline next to the subject, not floating at the far edge of the text column. */
.hw-focus__top { justify-content: flex-start; }
/* A subject with one task: the card keeps a card's width instead of one track out of four in an empty row. */
.hw-feed__group { max-width: min(100%, calc(var(--n, 1) * 420px)); }
/* Phone: the check sits at the right end of the row's last line, the hidden calendar takes no room. */
.hw-li__tail .hw-check { margin-left: auto; }
@media (max-width: 599px) {
  .hw-li__cal.is-empty { display: none; }
}
/* The focus card and the first fold heading were 16px apart while folds stand 40px+ apart: the heading read as
   part of the card. */
.hw-grid { gap: var(--s-6); }