/* Візуальна система сезонного ризику ретрогресії — v2.
   Токени, типографіка, графік, теплова карта, список подій.
   Жодних зовнішніх шрифтів, жодного JavaScript. */

/* --- Токени (світла тема) ----------------------------------------------- */
:root {
  --paper: #FFFFFF;
  --ink: #1B2129;
  --muted: #5C6572;
  --rule: #E3E6EA;
  --calm: #74869E;
  --calm-soft: #E7ECF2;
  --risk: #C8691A;
  --risk-text: #A3520D;
  --risk-soft: #F6E3D1;
  --ad-slot-h: 0px;
  --l1: 32%;
  --l2: 55%;
  --l3: 78%;
  --brand: #1F3A5F;
  --on-brand: #FFFFFF;
  --brand-soft: #EEF2F7;
  color-scheme: light;
}

/* --- Токени (темна тема: автоматична) ----------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12161C;
    --ink: #E6E9EE;
    --muted: #9AA3AF;
    --rule: #262C35;
    --calm: #8193AB;
    --calm-soft: #1E252E;
    --risk: #E08A3C;
    --risk-text: #E08A3C;
    --risk-soft: #3A2716;
    --l1: 45%;
    --l2: 65%;
    --l3: 85%;
    --brand: #9DB8DC;
    --on-brand: #12161C;
    --brand-soft: #1A2230;
    color-scheme: dark;
  }
}

/* --- Токени (темна тема: явний перемикач) -------------------------------- */
:root[data-theme="dark"] {
  --paper: #12161C;
  --ink: #E6E9EE;
  --muted: #9AA3AF;
  --rule: #262C35;
  --calm: #8193AB;
  --calm-soft: #1E252E;
  --risk: #E08A3C;
  --risk-text: #E08A3C;
  --risk-soft: #3A2716;
  --l1: 45%;
  --l2: 65%;
  --l3: 85%;
  --brand: #9DB8DC;
  --on-brand: #12161C;
  --brand-soft: #1A2230;
  color-scheme: dark;
}

/* --- Скидання й тіло ---------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

/* --- Контейнер ---------------------------------------------------------- */
main {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 16px 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

/* --- Шапка -------------------------------------------------------------- */
.masthead {
  max-width: 680px;
  margin: 0 auto;
  padding: 14px 16px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: 24px;
}

.wordmark,
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  white-space: nowrap;
  text-decoration-line: none;
}

.wordmark {
  font-family: Charter, "Iowan Old Style", Georgia, serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--brand);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 20px;
}

.site-nav a {
  font-size: 14px;
}

.wordmark:hover,
.site-nav a:hover {
  text-decoration-line: underline;
}

.wordmark[aria-current="page"],
.site-nav a[aria-current="page"] {
  text-decoration-line: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  text-decoration-color: var(--risk);
}

/* --- Типографіка -------------------------------------------------------- */
h1, h2 {
  font-family: Charter, "Iowan Old Style", Georgia, serif;
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
  margin: 0 0 16px;
}

h1 {
  font-size: 34px;
}

h2 {
  font-size: 20px;
}

p, ul, ol {
  margin: 0 0 12px;
  max-width: 65ch;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: var(--muted);
}

a:hover {
  text-decoration-color: var(--ink);
}

a:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
button:focus-visible {
  outline: 3px solid var(--risk);
  outline-offset: 2px;
}

/* --- Рекламні слоти ----------------------------------------------------- */
.ad-slot {
  height: var(--ad-slot-h);
  margin: var(--ad-slot-h) 0;
  margin-top: calc(var(--ad-slot-h) - 48px);
  overflow: hidden;
}

/* --- Перший екран (lead / intro) --------------------------------------- */
#lead {
  display: flex;
  flex-direction: column;
}

.lead {
  font-size: 20px;
  line-height: 1.45;
  max-width: 65ch;
  margin: 0 0 12px;
}

.dateline {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 12px;
}

#intro h1 {
  font-size: clamp(2rem, 6vw, 2.75rem);
  line-height: 1.15;
  max-width: 18ch;
}

#intro .lead {
  font-size: 1.2rem;
  color: var(--ink);
  max-width: 34em;
}

/* --- Форма підписки (signup) -------------------------------------------- */
.signup {
  background-color: var(--brand-soft);
  border-left: 4px solid var(--brand);
  padding: 20px;
  border-radius: 0 6px 6px 0;
}

@media (min-width: 600px) {
  .signup {
    padding: 24px;
  }
}

.signup h2 {
  font-family: Charter, "Iowan Old Style", Georgia, serif;
  margin-top: 0;
}

.signup-form {
  display: grid;
  gap: 10px;
}

.signup-form label {
  font-size: 0.9rem;
  font-weight: 600;
}

.signup-form input[type="email"],
.signup-form select {
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  padding: 10px 12px;
  border: 1px solid var(--calm);
  border-radius: 4px;
  background-color: var(--paper);
  color: var(--ink);
}

.signup-optional {
  border: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.signup-optional legend {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 4px;
  padding: 0;
}

/* Посилання на сезонну під графіком головної — не впритул до підпису. */
#this-month .chart + p {
  margin-top: 16px;
}

@media (min-width: 600px) {
  .signup-optional {
    grid-template-columns: 1fr 1fr;
  }

  .signup-optional legend {
    grid-column: 1 / -1;
  }

  .signup-optional label:nth-of-type(1) {
    grid-column: 1;
    grid-row: 2;
  }

  .signup-optional select:nth-of-type(1) {
    grid-column: 1;
    grid-row: 3;
  }

  .signup-optional label:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
  }

  .signup-optional select:nth-of-type(2) {
    grid-column: 2;
    grid-row: 3;
  }
}

.signup-form button[type="submit"],
.status-form button[type="submit"] {
  background-color: var(--brand);
  color: var(--on-brand);
  border: 0;
  border-radius: 4px;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 1rem;
  font-family: inherit;
  cursor: pointer;
  width: 100%;
}

@media (min-width: 600px) {
  .signup-form button[type="submit"],
  .status-form button[type="submit"] {
    width: auto;
    justify-self: start;
  }
}

.signup-note,
.source-note {
  font-size: 0.85rem;
  color: var(--muted);
}

/* Поле-пастка для ботів: поза екраном, а не display: none — частина ботів
   пропускає приховані так поля. Людина його не бачить і не дістане Tab-ом. */
.hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Службові сторінки підписки (status) --------------------------------- */
.status-form {
  display: grid;
  margin: 20px 0;
}

/* --- Сторінка приватності (privacy) -------------------------------------- */
.privacy li {
  margin-bottom: 8px;
}

/* --- Перелік того, що входить у лист (covers) --------------------------- */
ul.covers {
  list-style: none;
  padding: 0;
}

ul.covers li {
  padding: 10px 0;
  border-top: 1px solid var(--rule);
}

/* --- Графік (chart) ----------------------------------------------------- */
.chart {
  margin: 0;
  padding: 0;
}

.cols {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  align-items: end;
  height: 156px;
  margin-top: 48px;
  position: relative;
  isolation: isolate;
}

.col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
  position: relative;
}

.col-value {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  line-height: 1;
}

.bar-fill {
  width: 100%;
  background-color: var(--calm-soft);
  border-top: 2px solid var(--calm);
  border-radius: 0;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.col.risk .bar-fill {
  background-color: var(--risk-soft);
  border-top-color: var(--risk);
}

/* Поточний місяць — трикутник під віссю на центрі колонки */
.col.here::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: var(--ink);
  pointer-events: none;
}

/* Межа фіскального року — тонка лінія по центру проміжку між вереснем і жовтнем */
.col.fy-start::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -44px;
  bottom: 0;
  width: 1px;
  background-color: var(--ink);
  pointer-events: none;
}

/* Середня лінія — за стовпчиками */
.avg-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 2px dashed var(--muted);
  z-index: 1;
  pointer-events: none;
}

.avg-line span {
  position: absolute;
  left: 0;
  top: -18px;
  background-color: var(--paper);
  padding-right: 4px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Підписи місяців */
.col-labels {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px;
}

/* Анотація квоти FY на верху лінії межі */
.fy-note {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
  position: absolute;
  left: calc(75% + 1px);
  top: -44px;
  padding-left: 4px;
  width: 7em;
  line-height: 1.3;
  text-align: left;
}

figcaption {
  font-size: 14px;
  color: var(--muted);
  margin-top: 12px;
  max-width: 65ch;
  line-height: 1.45;
}

/* --- Рядок «зараз» ----------------------------------------------------- */
.now {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}

.now p {
  font-size: 16px;
  margin: 0;
}

/* --- Теплова карта (heatmap) -------------------------------------------- */
.heat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 16px 0;
}

.heat-row {
  display: grid;
  grid-template-columns: 34px repeat(12, 1fr);
  gap: 2px;
  align-items: center;
}

.heat-year {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--muted);
}

.cell {
  height: 11px;
  border-radius: 2px;
  display: block;
  text-decoration: none;
}

.cell.out {
  background: transparent;
}

.cell.none {
  background-color: var(--calm-soft);
}

.cell.gap,
.swatch.gap {
  background: repeating-linear-gradient(
    45deg,
    var(--calm-soft),
    var(--calm-soft) 2px,
    transparent 2px,
    transparent 4px
  );
}

.cell.l1,
.swatch.l1 {
  background-color: color-mix(in srgb, var(--risk) var(--l1), var(--paper));
}

.cell.l2,
.swatch.l2 {
  background-color: color-mix(in srgb, var(--risk) var(--l2), var(--paper));
}

.cell.l3,
.swatch.l3 {
  background-color: color-mix(in srgb, var(--risk) var(--l3), var(--paper));
}

.cell.l4,
.swatch.l4 {
  background-color: var(--risk);
}

.cell.fy-start {
  border-left: 2px solid var(--ink);
}

/* V6: клітинки поза рядом лишають клас fy-start, але межа прозора. */
.cell.out.fy-start {
  border-left-color: transparent;
}

.cell.here {
  outline: 2px solid var(--ink);
  outline-offset: -1px;
}

/* Видимий фокус на клітинках-посиланнях */
a.cell:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
  z-index: 1;
}

/* --- Легенда карти ------------------------------------------------------ */
.heat-key {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 0;
}

.swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  vertical-align: middle;
}

.key-fy {
  padding-left: 6px;
  border-left: 2px solid var(--ink);
}

/* --- Список подій (event-list) ------------------------------------------ */
.event-list table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.event-list th,
.event-list td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}

.event-list th {
  font-weight: 600;
  font-size: 12px;
  color: var(--muted);
}

.event-list td {
  height: 44px;
}

@media (max-width: 600px) {
  .event-list table,
  .event-list thead,
  .event-list tbody,
  .event-list th,
  .event-list td,
  .event-list tr {
    display: block;
  }
  .event-list thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }
  .event-list tr {
    margin-bottom: 12px;
    border: 1px solid var(--rule);
    padding: 8px 12px;
  }
  .event-list td {
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    text-align: right;
    height: auto;
    min-height: 0;
  }
  .event-list td::before {
    content: attr(data-label);
    font-weight: 600;
    text-align: left;
    margin-right: 12px;
    color: var(--muted);
    flex-shrink: 0;
  }
  .event-list td[data-label="Source"] a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* --- Визначення (method) ------------------------------------------------ */
#method details {
  border-bottom: 1px solid var(--rule);
}

/* --- Розкривні блоки (summary/details) ----------------------------------- */
summary {
  list-style: none;
  cursor: pointer;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content: "▸";
  display: inline-block;
  width: 1.2em;
  color: var(--muted);
  flex-shrink: 0;
}

details[open] > summary::before {
  content: "▾";
}

summary:focus-visible {
  outline: 3px solid var(--risk);
  outline-offset: 2px;
}

.event-list summary,
#method summary {
  font-size: 16px;
  font-weight: 600;
  min-height: 44px;
  display: flex;
  align-items: center;
  color: var(--ink);
}

#method details p {
  font-size: 14px;
  color: var(--muted);
  margin: 0 0 16px;
  line-height: 1.55;
}

/* --- Застереження ------------------------------------------------------- */
.caveats {
  list-style: none;
  padding: 0;
  margin-top: 24px;
}

.caveats li {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.55;
  padding: 12px 14px;
  background-color: var(--calm-soft);
  border-radius: 4px;
  margin-bottom: 10px;
}

.caveats strong {
  color: var(--ink);
}

/* --- Джерела ------------------------------------------------------------ */
#sources ul {
  list-style: none;
  padding-left: 0;
}

#sources li {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

#sources code {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 12px;
  padding: 2px 6px;
}

/* --- Підвал ------------------------------------------------------------- */
footer {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 16px;
  border-top: 1px solid var(--rule);
}

footer p {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

/* --- Згенеровані правила висоти колонок і середньої лінії ---------------- */
.bar-fill-1 { height: 6.7%; }
.bar-fill-2 { height: 20.0%; }
.bar-fill-3 { height: 13.8%; }
.bar-fill-4 { height: 20.0%; }
.bar-fill-5 { height: 46.7%; }
.bar-fill-6 { height: 66.7%; }
.bar-fill-7 { height: 93.3%; }
.bar-fill-8 { height: 86.7%; }
.bar-fill-9 { height: 76.3%; }
.bar-fill-10 { height: 68.2%; }
.bar-fill-11 { height: 21.7%; }
.bar-fill-12 { height: 26.7%; }
.avg-line { bottom: 45.5%; }