/* ============================================================
   races.css — стили раздела «Старты» (модуль «СтартПлан», этап 1).

   Правила:
     • только переменные из tokens.css (--card, --line, --tx, --ac, --ok/--warn/--bad,
       --r-s/--r-m/--r-l, --bg2, --tx3, --champagne…) — «сырых» цветов нет,
       поэтому тёмная тема работает автоматически;
     • все классы с префиксом .rc- — чтобы не задеть остальные разделы платформы;
     • адаптив до 360 px: сетка месяца сжимается, панели фильтров в одну колонку;
     • печать: служебные элементы скрываются.
   ============================================================ */

/* ── каркас раздела ── */
.rc-wrap { display: block; }
.rc-intro { font-size: 13px; max-width: 96ch; margin: 4px 0 10px; line-height: 1.55; }
.rc-spacer { flex: 1 1 auto; }
.rc-h3 { font-family: var(--font-display); font-size: 19px; margin: 18px 0 8px; }
.rc-h4 { font-size: 15px; margin: 14px 0 6px; }
.rc-foot { font-size: 12.5px; margin: 8px 0 14px; line-height: 1.5; }
.rc-panel { margin-top: 12px; }

/* строки вкладок раздела */
.rc-tabs { display: flex; gap: 4px; flex-wrap: wrap; align-items: center;
  border-bottom: 1px solid var(--line); margin: 10px 0 2px; padding-bottom: 2px; }
.rc-tabs button { border: 0; background: none; color: var(--tx3); padding: 8px 14px;
  font-size: 14px; border-bottom: 2px solid transparent; display: inline-flex; align-items: center; gap: 7px;
  border-radius: var(--r-s) var(--r-s) 0 0; }
.rc-tabs button:hover { color: var(--tx); background: var(--bg2); }
.rc-tabs button.active { color: var(--ac); border-bottom-color: var(--ac); font-weight: 600; }
.rc-tabs button b { background: var(--bad); color: var(--white); border-radius: var(--radius-full);
  font-size: 11px; padding: 1px 7px; }
.rc-tabs-note { font-size: 12px; margin-left: auto; }

/* ── сообщения (офлайн, конфликт, предупреждение) ── */
.rc-note { border: 1px solid var(--line2); border-left: 4px solid var(--warn); background: var(--bg2);
  border-radius: var(--r-m); padding: 10px 12px; margin: 10px 0; font-size: 13px; line-height: 1.5;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rc-note.bad { border-left-color: var(--bad); }
.rc-note.warn { border-left-color: var(--warn); }
.rc-note.ok { border-left-color: var(--ok); }
.rc-note .rc-note-t { color: var(--tx2); font-size: 12.5px; }
.rc-note > div { width: 100%; color: var(--tx2); }

/* ── календарь ── */
.rc-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.rc-toolbar select { width: auto; min-width: 150px; }
.rc-period { font-weight: 600; font-size: 15px; min-width: 170px; }
.rc-seg { display: inline-flex; border: 1px solid var(--line2); border-radius: var(--r-m);
  overflow: hidden; background: var(--card); }
.rc-seg button { border: 0; background: transparent; color: var(--tx2); padding: 7px 12px; font-size: 13.5px; }
.rc-seg button + button { border-left: 1px solid var(--line); }
.rc-seg button.active { background: var(--bg2); color: var(--tx); font-weight: 600; }
.rc-check { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tx2); cursor: pointer; }
.rc-check input { width: auto; }

.rc-legend { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0; }
.rc-legend-info { font-size: 12.5px; margin-left: auto; }

/* метки видов спорта: цвет через свою переменную, без emoji */
.rc-run { --rc-c: var(--bad); }
.rc-tri { --rc-c: var(--accent-fire); }
.rc-dua { --rc-c: var(--ok); }
.rc-ow { --rc-c: var(--vi); }
.rc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rc-c, var(--tx3)); flex: 0 0 auto; display: inline-block; }
.rc-spchip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; font-size: 12.5px;
  border-radius: var(--radius-full); border: 1px solid var(--rc-c, var(--line2));
  background: color-mix(in srgb, var(--rc-c, var(--tx3)) 10%, transparent);
  color: var(--rc-c, var(--tx2)); cursor: pointer; }
.rc-spchip.off { background: transparent; border-color: var(--line2); color: var(--tx3); }
.rc-spchip.off .rc-dot { background: var(--line2); }

/* сетка месяца */
.rc-grid { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--card); }
.rc-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--bg2);
  border-bottom: 1px solid var(--line); }
.rc-dow div { padding: 7px 8px; font-size: 12px; color: var(--tx2); text-align: center; font-weight: 600; }
.rc-cells { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.rc-cell { min-height: 108px; padding: 5px 6px; border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line); background: var(--card); cursor: pointer; position: relative; }
.rc-cell:nth-child(7n) { border-right: 0; }
.rc-cell.other { background: var(--bg); opacity: .7; }
.rc-cell.today { box-shadow: inset 0 0 0 2px var(--champagne); }
.rc-cell.sel { background: var(--bg2); }
.rc-cell.has-conflict { background: color-mix(in srgb, var(--bad) 7%, transparent); }
.rc-cell.has-conflict::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--bad); }
.rc-cell-h { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--tx2); margin-bottom: 4px; }
.rc-cell-h b { color: var(--tx); font-size: 13px; }
.rc-cell-n { margin-left: auto; font-size: 11px; color: var(--tx3); }

/* маркер старта в календаре */
.rc-chip { display: block; width: 100%; text-align: left; border: 0; cursor: pointer;
  border-left: 3px solid var(--rc-c, var(--line2));
  background: color-mix(in srgb, var(--rc-c, var(--tx3)) 12%, transparent);
  color: var(--tx); border-radius: var(--r-s); padding: 2px 6px; margin-bottom: 3px;
  font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-chip:hover { filter: brightness(.97); }
.rc-chip.conflict { border-left-color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.rc-chip-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-star { color: var(--ac); font-weight: 700; margin-right: 3px; }
.rc-warnmark { color: var(--bad); margin-right: 3px; }
.rc-more { font-size: 11px; color: var(--tx3); padding-left: 4px; }

/* неделя / день */
.rc-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.rc-wday { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px; min-height: 150px; cursor: pointer; }
.rc-wday.today { box-shadow: inset 0 0 0 2px var(--champagne); }
.rc-wday-h { font-size: 12.5px; color: var(--tx2); margin-bottom: 7px; }
.rc-wday-h b { color: var(--tx); font-size: 14px; }
.rc-empty { font-size: 12.5px; }

/* ── карточка старта ── */
.rc-cards { display: grid; gap: 10px; }
.rc-card { border: 1px solid var(--line); border-left: 4px solid var(--rc-c, var(--line2));
  border-radius: var(--r-m); background: var(--card); padding: 11px 13px; }
.rc-card:hover { border-color: var(--line2); }
.rc-card.conflict { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 6%, transparent); }
.rc-card-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rc-card-h b { font-size: 15px; }
.rc-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--tx2); }
.rc-date { font-weight: 600; color: var(--tx); white-space: nowrap; }
.rc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

/* ── фильтры каталога ── */
.rc-filters { position: sticky; top: 8px; z-index: 5; }
.rc-frow { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); align-items: end; }
.rc-frow-form { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.rc-frow-checks { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.rc-fblock { margin-top: 10px; }
.rc-fblock > .muted { display: block; font-size: 12.5px; margin-bottom: 5px; }
.rc-inline { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.rc-inline span { white-space: nowrap; }
.rc-wide { grid-column: span 2; }
.rc-fields { display: grid; gap: 8px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 10px; }
.rc-field { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.rc-field .muted { font-size: 11.5px; }

/* ── конфликты ── */
.rc-conf { border: 1px solid var(--bad); border-radius: var(--r-m);
  background: color-mix(in srgb, var(--bad) 6%, transparent); padding: 11px 13px; margin-bottom: 9px; }
.rc-conf.blocker { border-width: 2px; }
.rc-conf-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rc-conf-b { margin-top: 7px; font-size: 13px; color: var(--tx2); display: grid; gap: 3px; }

/* ── таблица экспорта ── */
.rc-tbl { min-width: 720px; }
.rc-row-conflict td { background: color-mix(in srgb, var(--bad) 7%, transparent); }

/* ── привязка: строки спортсменов ── */
.rc-asg { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0;
  border-bottom: 1px dashed var(--line); font-size: 13px; }

/* ── модальное окно (своё, платформа его в SPA не предоставляет) ── */
.rc-backdrop { position: fixed; inset: 0; z-index: 60; background: var(--overlay);
  display: flex; align-items: flex-start; justify-content: center; padding: 5vh 12px; overflow: auto; }
.rc-modal { background: var(--card); border: 1px solid var(--line2); border-radius: var(--r-l);
  box-shadow: var(--shadow-card); width: min(720px, 100%); }
.rc-modal-h { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 18px; border-bottom: 1px solid var(--line); }
.rc-modal-b { padding: 16px 18px; }
.rc-modal-f { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; }

/* ── адаптив: минимум 360 px ── */
@media (max-width: 900px) {
  .rc-filters { position: static; }
  .rc-week { grid-template-columns: 1fr; }
  .rc-cell { min-height: 86px; }
  .rc-wide { grid-column: span 1; }
  .rc-period { min-width: 0; }
  .rc-legend-info { margin-left: 0; width: 100%; }
}
@media (max-width: 600px) {
  .rc-dow div { font-size: 10.5px; padding: 6px 2px; }
  .rc-cell { padding: 3px; min-height: 74px; }
  .rc-chip { font-size: 10.5px; padding: 1px 4px; }
  .rc-more { display: none; }
  .rc-tabs button { padding: 7px 10px; font-size: 13px; }
  .rc-toolbar select, .rc-toolbar .btn { font-size: 12.5px; }
  .rc-modal-b, .rc-modal-h, .rc-modal-f { padding-left: 12px; padding-right: 12px; }
}

/* ── печать: только содержимое списка ── */
@media print {
  .rc-tabs, .rc-filters, .rc-toolbar, .rc-note, .rc-modal-host, #rcModalHost,
  .rc-wrap .hello, .rc-intro, .rc-foot { display: none !important; }
  .rc-card { break-inside: avoid; }
}

/* ─────────── компактный календарь на главной странице платформы ─────────── */
.rc-home { margin: 30px 0 10px; }
.rc-home-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.rc-home-head h2 { margin: 0; }
.rc-home-grids { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.rc-home-month-h { font-weight: 700; margin: 0 0 6px; }
.rc-cell-mini { min-height: 56px; cursor: pointer; }
.rc-cell-mini:hover { background: var(--bg2); }
.rc-cell-mini .rc-cell-h { margin-bottom: 3px; }
.rc-home-dots { display: flex; gap: 3px; flex-wrap: wrap; }
.rc-home-sub { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 7px; }
.rc-home-list { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--card); }
.rc-home-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent;
  color: var(--tx); cursor: pointer; font: inherit; }
.rc-home-row:last-child { border-bottom: 0; }
.rc-home-row:hover { background: var(--bg2); }
.rc-home-date { display: flex; flex-direction: column; min-width: 52px; line-height: 1.2; }
.rc-home-date span { font-size: 11px; color: var(--tx3); }
.rc-home-title { display: flex; flex-direction: column; min-width: 0; }
.rc-home-title .muted { font-size: 12px; }
.rc-home-empty { padding: 12px 2px; }
.rc-home-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
@media (max-width: 600px) {
  .rc-home-row { flex-wrap: wrap; }
  .rc-cell-mini { min-height: 48px; }
  .rc-home { margin-top: 22px; }
}