/* "Моё обучение" — the signed-in home, TOP-style: identity card (direction +
   personal goal + ONE next action), then per-course progress rows. Lives in a
   reading-width column: it's a personal work page, not a catalog. */

/* Warm but quiet — the hero card owns the first screen, not the greeting. */
.dashboard__greeting {
  font-size: 1.15rem;
  font-weight: 700;
  margin-block: 0 1.25rem;
}

/* Activity heatmap (GitHub-style): server-rendered divs, no canvas/JS;
   green intensity = real actions that day. */
.heatmap {
  border: 1px solid var(--color-subtle);
  border-radius: 0.75em;
  margin-block-end: var(--block-space-double);
  overflow-x: auto;
  padding: var(--block-space) 1.25rem;
}

.heatmap__header {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  margin-block-end: 0.75rem;
}

/* Same voice as .dashboard__section-title — one heading rhythm per page. */
.heatmap__title {
  color: var(--color-subtle-dark);
  font-size: 0.9rem;
  margin-block: 0;
}

.heatmap__summary {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
}

/* Cells flex between phone-tight and desktop-chunky; aspect-ratio keeps them
   square whatever width the column resolves to. */
.heatmap__grid {
  display: grid;
  gap: 3px;
  grid-auto-columns: minmax(0.72rem, 1.4rem);
  grid-auto-flow: column;
  grid-template-rows: repeat(7, auto);
  justify-content: center;
}

.heatmap__cell {
  aspect-ratio: 1;
  background-color: var(--color-subtle-light);
  border-radius: 2px;
}

.heatmap__cell--void {
  background-color: transparent;
}

.heatmap__cell--l1 { background-color: oklch(var(--lch-green) / 0.25); }
.heatmap__cell--l2 { background-color: oklch(var(--lch-green) / 0.45); }
.heatmap__cell--l3 { background-color: oklch(var(--lch-green) / 0.7); }
.heatmap__cell--l4 { background-color: oklch(var(--lch-green)); }

.heatmap__legend {
  align-items: center;
  color: var(--color-subtle-dark);
  display: flex;
  font-size: 0.7rem;
  gap: 3px;
  justify-content: flex-end;
  margin-block-start: 0.6rem;

  .heatmap__cell {
    block-size: 0.72rem;
    display: inline-block;
    inline-size: 0.72rem;
  }

  span:first-child {
    margin-inline-end: 0.3rem;
  }

  span:last-child {
    margin-inline-start: 0.3rem;
  }
}

/* What fills a cell and why regularity beats volume — written out in words:
   a hover-only "?" would be invisible on touch and undiscoverable anywhere. */
.heatmap__hint {
  color: var(--color-subtle-dark);
  font-size: 0.8rem;
  line-height: 1.55;
  margin-block: 0.9rem 0;
}

/* The identity card (TOP-style): direction + personal goal, ONE next action.
   Brighter border than anything else on the page — attention goes here. */
.dashboard-hero {
  border-color: var(--color-subtle-dark);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-block-end: 2.5rem;
  padding: 1.5rem;
}

.dashboard-hero__identity {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.dashboard-hero__badge {
  block-size: 4.5rem;
  border: 2px solid var(--color-subtle);
  border-radius: 50%;
  color: var(--color-ink);
  display: inline-block;
  flex-shrink: 0;
  inline-size: 4.5rem;

  .topic-badge > .icon {
    block-size: 2rem;
    inline-size: 2rem;
  }
}

.dashboard-hero__info {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: var(--block-space-half);
  min-inline-size: 0;
}

.dashboard-hero__title {
  font-size: 1.35rem;
  margin-block: 0;
}

.dashboard-hero__title-link {
  color: var(--color-ink);
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }
}

.dashboard-hero__action {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half);
}

.dashboard-hero__next {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  margin-block: 0;
}

.dashboard-hero__finished {
  align-items: center;
  color: var(--color-positive);
  display: inline-flex;
  font-weight: 600;
  gap: 0.4rem;
  margin-block: 0;

  .icon {
    block-size: 1.25rem;
    inline-size: 1.25rem;
  }
}

/* The hint's negative top margin collapses with the title's 0.75rem margin
   into a snug 0.35rem gap. */
.dashboard__section-title {
  color: var(--color-subtle-dark);
  font-size: 0.9rem;
  font-weight: 600;
  margin-block: var(--block-space-double) 0.75rem;
}

.dashboard__section-hint {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  margin-block: -0.4rem 0.75rem;
}

.dashboard-courses {
  margin-block-end: 2.5rem;
  padding: 0.25rem 1.5rem;
}

.dashboard-course {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-block: 1.25rem;
}

.dashboard-course + .dashboard-course {
  border-block-start: 1px solid var(--color-subtle);
}

.dashboard-course--soon {
  opacity: 0.6;
}

/* Ring with no icon disc — the percent shows by default (TOP's dashboard). */
.dashboard-course__ring {
  block-size: 5rem;
  flex-shrink: 0;
  inline-size: 5rem;

  .progress-ring__body {
    display: none;
  }
}

.dashboard-course__ring--soon {
  align-items: center;
  border: 2px solid var(--color-subtle);
  border-radius: 50%;
  color: var(--color-subtle-dark);
  display: inline-flex;
  justify-content: center;

  .icon {
    block-size: 1.5rem;
    inline-size: 1.5rem;
  }
}

/* Untouched course: its step number on the route, not a reproachful "0%". */
.dashboard-course__ring--step {
  align-items: center;
  border: 2px solid var(--color-subtle);
  border-radius: 50%;
  color: var(--color-subtle-dark);
  display: inline-flex;
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 700;
  justify-content: center;
}

.dashboard-course__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  min-inline-size: 12rem;
}

.dashboard-course__title {
  font-size: 1.05rem;
  margin-block: 0;
}

.dashboard-course__title-link {
  color: var(--color-ink);
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }
}

.dashboard-course__done {
  align-items: center;
  color: var(--color-positive);
  display: inline-flex;
  font-weight: 600;
  gap: 0.4rem;

  .icon {
    block-size: 1.2rem;
    inline-size: 1.2rem;
  }
}

.dashboard__eyebrow {
  color: var(--color-subtle-dark);
  flex-basis: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  margin-block: 0;
  text-transform: uppercase;
}

.dashboard__others {
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half);
}

.dashboard-other {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--block-space);
}

.dashboard-other__icon {
  color: var(--color-subtle-dark);
  display: inline-flex;

  .icon {
    block-size: 1.4rem;
    inline-size: 1.4rem;
  }
}

.dashboard-other__title {
  color: var(--color-ink);
  font-weight: 600;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }
}

.dashboard-other__progress {
  flex: 1 1 10rem;
}

.dashboard-other__continue {
  font-size: 0.85rem;
  text-decoration: underline;
  text-decoration-color: var(--color-subtle);
}

.dashboard__empty {
  align-items: center;
  border: 1px dashed var(--color-subtle);
  border-radius: 0.75em;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-block-start: var(--block-space);
  padding: 3rem 1.5rem;
  text-align: center;
}

.dashboard__empty-text {
  color: var(--color-subtle-dark);
  margin-block: 0;
  max-inline-size: 32rem;
}

.dashboard__suggested {
  margin-block-start: 3rem;
}

.dashboard__suggested-title {
  font-size: 1.2rem;
  margin-block: 0 var(--block-space);
}

/* Lives in a Turbo Frame; swaps for the inline edit form on click. */
.learning-goal {
  color: var(--color-subtle-dark);
  font-size: 0.9rem;
  margin-block: 0.15rem 0;
}

.learning-goal__text {
  color: var(--color-ink);
  font-style: italic;
}

.learning-goal__edit {
  font-size: 0.85rem;
  margin-inline-start: var(--inline-space-half);
}

.learning-goal-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-inline-size: 36rem;
}

/* Extra bottom margin keeps «Сохранить/Отмена» from clustering with
   «Продолжить» into one button pile. */
.dashboard-hero__info .learning-goal-form {
  margin-block: 0.25rem var(--block-space);

  .input--textarea {
    min-block-size: calc(2lh + 1.2em);
  }
}

/* Standalone goal block on the empty dashboard (no hero card yet). */
.dashboard__goal {
  margin-block-end: var(--block-space-double);
  text-align: center;

  .learning-goal-form {
    margin-inline: auto;
    text-align: start;
  }
}

.learning-goal-form__actions {
  display: flex;
  gap: 0.75rem;
}

.learning-goal-form__error {
  color: var(--color-negative);
  font-size: 0.9rem;
  margin-block: 0;
}

/* ── «Отложенные задания» — the remove ✕ unbookmarks via Turbo Stream
   (row disappears; whole section goes with the last row). ───────────── */
.dashboard__bookmarks {
  margin-block-start: 3rem;
}

.dashboard-bookmarks {
  display: flex;
  flex-direction: column;
}

.dashboard-bookmark {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  padding-block: 0.65rem;
}

.dashboard-bookmark + .dashboard-bookmark {
  border-block-start: 1px solid var(--color-subtle);
}

.dashboard-bookmark__title {
  color: var(--color-ink);
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  min-inline-size: 0;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }
}

.dashboard-bookmark__path {
  color: var(--color-subtle-dark);
  flex-shrink: 0;
  font-size: 0.8rem;
}

.dashboard-bookmark__remove {
  background: none;
  border: 0;
  color: var(--color-subtle-dark);
  cursor: pointer;
  display: inline-flex;
  padding: 0.25rem;
  transition: color 150ms ease;

  .icon {
    block-size: 1.1rem;
    inline-size: 1.1rem;
  }

  @media (any-hover: hover) {
    &:hover {
      color: var(--color-ink);
    }
  }
}

@media (max-width: 639.98px) {
  .dashboard-bookmark__path {
    display: none; /* keep rows one-line on phones */
  }
}

/* ── «Мои правки» — the contributor's feedback loop ─────────────────── */
.dashboard-suggestions {
  display: flex;
  flex-direction: column;
}

.dashboard-suggestion {
  padding-block: 0.65rem;
}

.dashboard-suggestion + .dashboard-suggestion {
  border-block-start: 1px solid var(--color-subtle);
}

.dashboard-suggestion__row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
}

.dashboard-suggestion__title {
  color: var(--color-ink);
  flex: 1;
  font-size: 0.95rem;
  font-weight: 500;
  min-inline-size: 0;
  text-decoration: none;

  @media (any-hover: hover) {
    &:hover {
      text-decoration: underline;
    }
  }
}

.dashboard-suggestion__date {
  color: var(--color-subtle-dark);
  flex-shrink: 0;
  font-size: 0.8rem;
}

/* The reviewer's note on a declined edit — the loop closes honestly. */
.dashboard-suggestion__comment {
  color: var(--color-subtle-dark);
  font-size: 0.85rem;
  margin-block: 0.35rem 0;
}

/* The collective-achievement line: this edit moved the map's maturity needle. */
.dashboard-suggestion__raise {
  color: var(--color-positive);
  font-size: 0.85rem;
  margin-block: 0.35rem 0;
}

@media (max-width: 639.98px) {
  .dashboard-suggestion__date {
    display: none; /* keep rows one-line on phones */
  }
}