/*
  market.css — раздел «Рынок» (assets/market.js).
  Токены и общие классы — из app.css. Цвета не используются вовсе: новость
  не бывает «срочной», а упоминание оператора выделяется чипом, не краской.
*/

.mk-inline-status:not(:empty) {
  margin-bottom: var(--s12);
}

.mk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s12);
  margin-bottom: var(--s20);
}

.mk-toolbar__right {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s8);
}

/* ─────────────────────────── Выбор дня ─────────────────────────── */

.mk-day {
  display: inline-flex;
  align-items: center;
  gap: var(--s8);
}

.mk-day__label {
  font-size: var(--text-caption);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mid);
  font-weight: 500;
}

.mk-day__select {
  height: 36px;
  max-width: 320px;
  padding: 0 var(--s12);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-control);
  font: inherit;
  font-size: var(--text-body);
  color: var(--ink);
}

.mk-day__select:focus {
  outline: none;
  border-color: var(--ink);
}

/* ─────────────────────────── Подборка дня ─────────────────────────── */

.mk-section-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s4) var(--s12);
  margin-bottom: var(--s12);
}

.mk-section-title {
  font-size: var(--text-subheading);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.mk-section-sub {
  font-size: var(--text-caption);
  color: var(--mid);
}

.mk-picks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s12);
  margin-bottom: var(--s24);
}

.mk-pick {
  display: flex;
  flex-direction: column;
  gap: var(--s8);
}

/* Первая новость дня — во всю ширину: она главная, и рядом с ней остальные
   читаются как продолжение, а не как равные. */
.mk-pick:first-child {
  grid-column: 1 / -1;
}

.mk-pick__top {
  display: flex;
  align-items: baseline;
  gap: var(--s8);
  font-size: var(--text-caption);
  color: var(--mid);
}

.mk-pick__rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 var(--s4);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-control);
  color: var(--ink);
  font-weight: 600;
}

.mk-pick__time {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

.mk-pick__title {
  font-size: var(--text-body-lg);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.mk-pick:first-child .mk-pick__title {
  font-size: var(--text-subheading);
}

.mk-pick__link {
  color: inherit;
  text-decoration: none;
}

.mk-pick__link:hover {
  text-decoration: underline;
}

.mk-pick__summary {
  color: var(--ink-soft);
  line-height: 1.5;
}

.mk-pick__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: auto;
}

.mk-mention {
  text-decoration: none;
}

.mk-mention:hover {
  border-color: var(--ink);
  color: var(--ink);
}

/* ─────────────────────────── Остальные за день ─────────────────────────── */

.mk-rest {
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
}

.mk-rest__summary {
  display: flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s16) var(--s20);
  cursor: pointer;
  list-style: none;
  font-weight: 500;
}

.mk-rest__summary::-webkit-details-marker {
  display: none;
}

.mk-rest__summary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.4px solid var(--mid);
  border-bottom: 1.4px solid var(--mid);
  transform: rotate(-45deg);
  transition: transform 0.18s var(--ease);
}

.mk-rest[open] .mk-rest__summary::before {
  transform: rotate(45deg);
}

.mk-rest__count {
  color: var(--mid);
  font-size: var(--text-caption);
}

.mk-rest__list {
  border-top: 1px solid var(--hairline);
}

.mk-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s16);
  padding: var(--s12) var(--s20);
  border-bottom: 1px solid var(--hairline);
}

.mk-row:last-child {
  border-bottom: 0;
}

.mk-row__time {
  flex: none;
  width: 44px;
  padding-top: 2px;
  font-size: var(--text-caption);
  color: var(--mid);
  font-variant-numeric: tabular-nums;
}

.mk-row__main {
  flex: 1;
  min-width: 0;
}

.mk-row__title {
  color: inherit;
  text-decoration: none;
  line-height: 1.4;
}

.mk-row__title:hover {
  text-decoration: underline;
}

.mk-row__sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s8);
  margin-top: 2px;
  font-size: var(--text-caption);
  color: var(--mid);
}

/* ─────────────────────────── Телефон ─────────────────────────── */

@media (max-width: 900px) {
  .mk-picks {
    grid-template-columns: 1fr;
  }

  .mk-day__select {
    max-width: 100%;
  }

  .mk-row {
    padding: var(--s12) var(--s16);
  }
}