/* «Məsləhətçi» (spec docs/advice-tech.md): the week's three steps as cards — the step's icon, its rank and title, its money
   on the right, its words, how far its list has gone, one action and «not needed»; a step done or put off quietens to a
   line; what last week's steps brought on a green strip above; the weeks before as a short ledger. */
.advice-head { margin-bottom: 14px; }
.advice-head__title { font: var(--display-weight) 22px/1.2 var(--font-display); letter-spacing: var(--display-tracking); text-wrap: balance; }
.advice-head .muted { margin-top: 4px; max-width: 62ch; font-size: 14px; }

.advice-won { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding: 10px 14px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--ok) 11%, var(--bg)); color: color-mix(in srgb, var(--ok) 75%, var(--ink)); font-size: 14px; font-weight: 500; }
.advice-won__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: color-mix(in srgb, var(--ok) 18%, var(--bg)); color: var(--ok); }

.advice-list { display: grid; gap: 12px; }
.advice-item { display: grid; gap: 10px; padding: 14px; }
.advice-item__head { display: flex; align-items: center; gap: 12px; }
.advice-item__icon { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg)); color: var(--accent-text, var(--accent)); }
.advice-item__what { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.advice-item__rank { font-size: 12px; font-weight: 600; color: var(--ink-3); letter-spacing: .04em; }
.advice-item__title { font-weight: 650; font-size: 16px; line-height: 1.3; }
.advice-item__money { flex: none; font: 700 17px/1 var(--font-display); color: var(--accent-text, var(--accent)); white-space: nowrap; }
.advice-item__text { font-size: 14px; line-height: 1.5; color: var(--ink-2); max-width: 70ch; }
.advice-item__progress { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-2); }
.advice-bar { flex: 0 1 160px; height: 6px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.advice-bar span { display: block; width: var(--p, 0%); height: 100%; border-radius: 99px; background: var(--accent); }
.advice-item__state { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); }
.advice-item__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.advice-item.is-closed { background: var(--surface); }
.advice-item.is-closed .advice-item__icon { background: var(--surface-2); color: var(--ink-3); }
.advice-item.is-closed .advice-item__money { color: var(--ink-3); }
.advice-item.is-done .advice-item__icon { background: color-mix(in srgb, var(--ok) 14%, var(--bg)); color: var(--ok); }
.advice-item.is-done .advice-item__state { color: color-mix(in srgb, var(--ok) 75%, var(--ink)); }
.advice-item.is-closed .advice-item__text { display: none; }

.advice-locked { display: flex; align-items: flex-start; gap: 10px; margin-top: 12px; font-size: 14px; color: var(--ink-2); }
.advice-locked .ic { flex: none; margin-top: 2px; color: var(--accent); }

.advice-sec { margin: 22px 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-2); }
.advice-weeks { display: grid; padding: 0; }
.advice-week { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 11px 14px; font-size: 14px; }
.advice-week + .advice-week { border-top: 1px solid var(--line-soft); }
.advice-week__sum { color: color-mix(in srgb, var(--ok) 75%, var(--ink)); }

/* a step's list */
.advice-kpis { margin-bottom: 14px; }
.advice-clients { display: grid; padding: 0; }
.advice-client { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.advice-client + .advice-client { border-top: 1px solid var(--line-soft); }
.advice-client .avatar { flex: none; }
.advice-client__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.advice-client__name { font-weight: 600; color: var(--ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.advice-client__name:hover { text-decoration: underline; }
.advice-client__why { font-size: 13px; color: var(--ink-2); }
.advice-client__tags { display: flex; flex-wrap: wrap; gap: 4px; }
.advice-client__tags:not(:has(:not([hidden]))) { display: none; }
.advice-client__tags .badge { height: auto; min-height: 20px; padding: 2px 8px; font-weight: 600; }
.advice-client__acts { display: flex; flex: none; gap: 6px; }
.advice-note { margin-top: 10px; font-size: 13px; max-width: 70ch; }
@media (max-width: 640px) {
  .advice-item__acts .btn { flex: 1; }
  .advice-week { grid-template-columns: minmax(0, 1fr) auto; }
  .advice-week__what { grid-column: 1 / -1; grid-row: 2; }
  .advice-client { flex-wrap: wrap; }
  .advice-client__acts { width: 100%; padding-left: 52px; }
  .advice-client__acts .btn--wa { flex: 1; }
}