/* Дивидендный календарь (dividends.html) в облике Coinbase.
 *
 * Страница на своих стилях в <style>: Manrope, моноширинные даты и суммы,
 * лаймовая подсветка при наведении. Слой переводит её на cfpro-design-system,
 * не трогая разметку: включается классом html.dcb (строка в <head>), по ?old -
 * прежний вид. Старые переменные переназначены на токены /lib/cf/tokens.css,
 * четыре статуса выплаты - на цвета «вида» из системы: выплачено нейтральное,
 * объявлено бирюзовое, рекомендовано синее, прогноз - янтарный пунктир.
 *
 * Селектор с body нужен, чтобы перебить тёмную палитру страницы, которая
 * задана на :root[data-theme="dark"] body. Создано 25.09.2026. */

html.dcb[data-theme] body {
  --ink: var(--cf-ink); --g900: var(--cf-ink); --g700: var(--cf-ink-2); --g500: var(--cf-ink-3); --g400: var(--cf-ink-3);
  --g300: var(--cf-line-strong); --g200: var(--cf-line); --g100: var(--cf-surface-2); --g50: var(--cf-canvas);
  --white: var(--cf-surface); --thead-bg: var(--cf-surface);
  --lime-soft: var(--cf-accent-soft); --lime600: var(--cf-accent);
  --up: var(--cf-up); --down: var(--cf-down);
  --st-paid-bg: var(--cf-surface-2); --st-paid-ink: var(--cf-ink-2);
  --st-declared-bg: var(--cf-teal-soft); --st-declared-ink: var(--cf-teal);
  --st-board-bg: var(--cf-accent-soft); --st-board-ink: var(--cf-accent);
  --st-forecast-bg: transparent; --st-forecast-ink: var(--cf-amber); --st-forecast-line: var(--cf-amber);
  --today-bg: var(--cf-accent-soft); --today-ink: var(--cf-accent);
  background: var(--cf-canvas); color: var(--cf-ink);
  font-family: var(--font-sans); font-variant-numeric: tabular-nums;
}
html.dcb main, html.dcb main *, html.dcb .daysheet, html.dcb .daysheet * { font-family: var(--font-sans) !important; }
html.dcb ::selection { background: var(--cf-accent-soft); color: var(--cf-ink); }
html.dcb :focus-visible { outline: 2px solid var(--cf-accent); outline-offset: 2px; }

/* Заголовок раздела с лаймовой чертой, как у остальных разделов. */
html.dcb .page-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; }
html.dcb .page-head h1::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: 14px;
  border-radius: var(--cf-radius-pill); background: var(--cf-lime);
}
html.dcb .page-head p { color: var(--cf-ink-2); }
html.dcb .stamp { font-size: 13px; color: var(--cf-ink-3); }
html.dcb .sibling-link { border-color: var(--cf-line-strong); border-radius: var(--cf-radius-pill); font-weight: 600; }
html.dcb .sibling-link:hover { border-color: var(--cf-line-strong); background: var(--cf-surface-2); }

html.dcb .seg, html.dcb .viewswitch { border-radius: var(--cf-radius-pill); background: var(--cf-surface-2); padding: var(--cf-space-4); }
html.dcb .seg button, html.dcb .viewswitch button { border-radius: var(--cf-radius-pill); color: var(--cf-ink-2); font-weight: 600; }
html.dcb .seg button[aria-pressed="true"], html.dcb .viewswitch button[aria-pressed="true"] {
  background: var(--cf-surface); color: var(--cf-ink); box-shadow: var(--cf-shadow-thumb);
}
html.dcb .monthbar .nav, html.dcb .monthbar .today-btn { border-color: var(--cf-line-strong); border-radius: var(--cf-radius-pill); }
html.dcb .monthbar .nav { width: 36px; height: 36px; }
html.dcb .monthbar .title { font-weight: 600; font-size: 20px; letter-spacing: -0.02em; }
html.dcb .monthbar .count { font-size: 13px; color: var(--cf-ink-3); }
html.dcb .legend .chip { font-weight: 600; font-size: 13px; }
html.dcb .legend .chip .n { font-weight: 500; }
html.dcb .legend .hint { color: var(--cf-ink-3); }

html.dcb .grid-wrap { border-color: var(--cf-line); border-radius: var(--cf-radius-xl); }
html.dcb .weekhead { background: var(--cf-surface-2); }
html.dcb .weekhead div { font-size: 12.5px; font-weight: 500; color: var(--cf-ink-3); text-transform: none; letter-spacing: 0; }
html.dcb .cell .dnum { font-size: 13.5px; font-weight: 600; }
html.dcb .cell.today .dnum { align-self: flex-start; }
html.dcb .pill { border-radius: var(--cf-radius-sm); font-size: 12.5px; }
html.dcb .pill .am { font-size: 12px; }

html.dcb .day .dh .dd { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
html.dcb .row { border-radius: var(--cf-radius-md); }
html.dcb .row .lg, html.dcb .row .lt { border-radius: 50%; }
html.dcb .row .who b { font-weight: 600; }
html.dcb .row .val b { font-size: 15px; font-weight: 600; }
html.dcb .row .val span { font-size: 12.5px; }
html.dcb .row .badge { font-weight: 600; font-size: 12px; }

html.dcb .daysheet .card { border-radius: var(--cf-radius-xl); box-shadow: var(--cf-shadow-modal); }
html.dcb .pay .top .lg, html.dcb .pay .top .lt { border-radius: 50%; }
html.dcb .pay .nums div b { font-size: 19px; font-weight: 700; }
html.dcb .pay .flow .when { font-size: 13px; font-weight: 600; }
html.dcb .pay .open { border-radius: var(--cf-radius-pill); }

html.dcb .seo { color: var(--cf-ink-2); }
html.dcb .seo a { color: var(--cf-accent); text-decoration: none; }
html.dcb .seo a:hover { text-decoration: underline; text-underline-offset: 3px; }
html.dcb .seo h2, html.dcb .seo h3 { font-weight: 600; }

/* Телефон: день в списке - дата над выплатами, а не колонкой 150 px слева;
   карточка выплаты - нижняя шторка. */
@media (max-width: 767px) {
  html.dcb main { padding-left: var(--cf-space-16); padding-right: var(--cf-space-16); }
  html.dcb .page-head h1 { font-size: 28px; }
  html.dcb .day { grid-template-columns: 1fr; gap: var(--cf-space-8); }
  html.dcb .day .dh { display: flex; align-items: baseline; gap: var(--cf-space-10); }
  html.dcb .day .dh .dw, html.dcb .day .dh .dl { margin-top: 0; }
  /* Строка выплаты: знак слева на две строки, имя и даты, под ними статус,
     справа сумма и доходность. Во флексе с переносом знак, имя и статус
     вставали каждый своей строкой. */
  html.dcb .row {
    display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; column-gap: var(--cf-space-10); row-gap: var(--cf-space-6);
    align-items: start; padding: var(--cf-space-12); flex-wrap: nowrap;
  }
  html.dcb .row > .lg, html.dcb .row > .lt { grid-column: 1; grid-row: 1 / 3; width: 34px; height: 34px; }
  html.dcb .row > .who { grid-column: 2; grid-row: 1; min-width: 0; }
  html.dcb .row > .badge { grid-column: 2; grid-row: 2; justify-self: start; }
  html.dcb .row > .val { grid-column: 3; grid-row: 1 / 3; margin-left: 0; }
  html.dcb .daysheet { place-items: end stretch; padding: 0; }
  html.dcb .daysheet .card {
    max-width: none; width: 100%; max-height: 88dvh; overflow-y: auto;
    border-radius: var(--cf-radius-xl) var(--cf-radius-xl) 0 0; padding-bottom: calc(24px + env(safe-area-inset-bottom));
  }
}