/* CityRank site styles. Tokens documented in docs/design.md. */

/* ---------- Fonts (self-hosted, OFL-1.1, latin + cyrillic subsets) ---------- */
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("../fonts/golos-text-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 400; font-display: swap; src: url("../fonts/golos-text-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("../fonts/golos-text-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 500; font-display: swap; src: url("../fonts/golos-text-cyrillic-500.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("../fonts/golos-text-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Golos Text"; font-weight: 600; font-display: swap; src: url("../fonts/golos-text-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; font-weight: 400; font-display: swap; src: url("../fonts/literata-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-weight: 400; font-display: swap; src: url("../fonts/literata-cyrillic-400.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Literata"; font-weight: 600; font-display: swap; src: url("../fonts/literata-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Literata"; font-weight: 600; font-display: swap; src: url("../fonts/literata-cyrillic-600.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* ---------- Tokens ---------- */
:root {
  --paper: #f2f0e9;
  --sheet: #fbfaf6;
  --ink: #20201d;
  --ink-2: #57564f;
  --ink-3: #75736a;
  --rule: #d9d5c9;
  --rule-strong: #a29d8f;
  --accent: #1d6b4f;
  --accent-ink: #14513b;
  --accent-wash: #e3ece6;
  --danger: #a3271f;
  --danger-wash: #f6e4e1;
  --off: #b9b5a8;

  --font-serif: "Literata", "PT Serif", Georgia, serif;
  --font-sans: "Golos Text", "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.75rem;   /* 12 */
  --fs-sm: 0.8125rem; /* 13 */
  --fs-base: 0.9375rem; /* 15 */
  --fs-md: 1.0625rem; /* 17 */
  --fs-lg: 1.375rem;  /* 22 */
  --fs-xl: 1.875rem;  /* 30 */
  --fs-2xl: 2.5rem;   /* 40 */

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;

  --r-1: 2px;
  --r-2: 4px;
  --r-3: 6px;

  --focus: 2px solid var(--accent);
  --focus-offset: 2px;
  --measure: 68ch;
  --page: 1120px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-base)/1.45 var(--font-sans);
  font-feature-settings: "kern" 1;
}
h1, h2, h3 { font-family: var(--font-serif); font-weight: 600; line-height: 1.15; margin: 0; letter-spacing: -0.005em; }
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
p { margin: 0; max-width: var(--measure); }
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.num, td.num, th.num { font-variant-numeric: tabular-nums lining-nums; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-sm); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.page { max-width: var(--page); margin: 0 auto; padding: var(--s-6) var(--s-5) var(--s-8); }
.masthead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-3); border-bottom: 2px solid var(--ink); }
.masthead .brand { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-lg); color: var(--ink); text-decoration: none; }
.section { padding-top: var(--s-7); }
.section > h2 { margin-bottom: var(--s-2); }
.section > p { margin-bottom: var(--s-4); color: var(--ink-2); }

/* ---------- Ranking table ---------- */
.table-wrap { position: relative; overflow-x: auto; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-strong); background: var(--sheet); }
.table-wrap.narrow { max-width: 720px; }
.table-wrap.narrow .rank td.num, .table-wrap.narrow .rank th.num:not(.place) { width: 1%; }
.rank { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.rank th, .rank td { padding: 7px var(--s-3); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.rank thead th { font-size: var(--fs-xs); font-weight: 500; color: var(--ink-2); border-bottom: 1px solid var(--rule-strong); vertical-align: bottom; }
.rank tbody tr:last-child td { border-bottom: 0; }
.rank tbody tr:hover td { background: var(--paper); }
.rank .num { text-align: right; }
.rank .place { width: 3.25rem; min-width: 3.25rem; max-width: 3.25rem; padding-left: 4px; padding-right: var(--s-2); color: var(--ink-2); }
.rank .city { font-weight: 500; min-width: 11rem; }
.rank .city .flag { margin-right: var(--s-2); }
.rank .score { font-weight: 600; font-size: var(--fs-md); color: var(--ink); }
.rank .gap td { color: var(--ink-3); text-align: center; padding: 2px; font-size: var(--fs-sm); }
.rank .partial { color: var(--ink-3); }
/* sticky place + city columns for horizontal scroll */
.rank .place, .rank .city { position: sticky; background: var(--sheet); z-index: 1; }
.rank .place { left: 0; }
.rank .city { left: 3.25rem; box-shadow: inset -1px 0 0 var(--rule); }
.rank tbody tr:hover .place, .rank tbody tr:hover .city { background: var(--paper); }
.rank tr.top td.score { color: var(--accent-ink); }

/* ---------- Weight slider ---------- */
.weights { display: grid; gap: 0; border-top: 1px solid var(--rule-strong); max-width: 640px; }
.weight { display: grid; grid-template-columns: minmax(9rem, 1fr) minmax(8rem, 14rem) 3rem; align-items: center; gap: var(--s-4); padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.weight label { font-weight: 500; }
.weight output { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.weight input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 20px; background: transparent; margin: 0; }
.weight input[type="range"]::-webkit-slider-runnable-track { height: 3px; background: var(--ink); border-radius: var(--r-1); }
.weight input[type="range"]::-moz-range-track { height: 3px; background: var(--ink); border-radius: var(--r-1); }
.weight input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 18px; margin-top: -7.5px; background: var(--accent); border: 2px solid var(--sheet); border-radius: var(--r-1); box-shadow: 0 0 0 1px var(--accent); }
.weight input[type="range"]::-moz-range-thumb { width: 10px; height: 16px; background: var(--accent); border: 2px solid var(--sheet); border-radius: var(--r-1); box-shadow: 0 0 0 1px var(--accent); }
.weight input[type="range"]:focus-visible { outline: var(--focus); outline-offset: 4px; }
/* weight 0 = criterion switched off */
.weight.is-off label { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--off); }
.weight.is-off output { color: var(--ink-3); font-weight: 400; }
.weight.is-off input[type="range"]::-webkit-slider-runnable-track { background: repeating-linear-gradient(90deg, var(--off) 0 4px, transparent 4px 7px); }
.weight.is-off input[type="range"]::-moz-range-track { background: repeating-linear-gradient(90deg, var(--off) 0 4px, transparent 4px 7px); }
.weight.is-off input[type="range"]::-webkit-slider-thumb { background: var(--sheet); box-shadow: 0 0 0 1px var(--rule-strong); }
.weight.is-off input[type="range"]::-moz-range-thumb { background: var(--sheet); box-shadow: 0 0 0 1px var(--rule-strong); }

/* ---------- Rating: read-only matrix cells ---------- */
.score-cell { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 1.75rem; border-radius: var(--r-1); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); }
.score-cell[data-v="1"] { background: color-mix(in srgb, var(--accent) 11%, var(--sheet)); }
.score-cell[data-v="2"] { background: color-mix(in srgb, var(--accent) 20%, var(--sheet)); }
.score-cell[data-v="3"] { background: color-mix(in srgb, var(--accent) 32%, var(--sheet)); }
.score-cell[data-v="4"] { background: color-mix(in srgb, var(--accent) 48%, var(--sheet)); }
.score-cell[data-v="5"] { background: var(--accent); color: var(--sheet); }
.score-cell.empty { background: transparent; color: var(--ink-3); font-weight: 400; box-shadow: inset 0 0 0 1px var(--rule); }

/* ---------- Rating: 1-5 input ---------- */
.rate { display: inline-flex; border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--sheet); }
.rate input { position: absolute; opacity: 0; pointer-events: none; }
.rate label { min-width: 2.25rem; height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; font-weight: 500; font-variant-numeric: tabular-nums; cursor: pointer; border-left: 1px solid var(--rule); user-select: none; }
.rate label:first-of-type { border-left: 0; }
.rate label.clear { color: var(--ink-3); font-weight: 400; padding: 0 var(--s-3); }
.rate label:hover { background: var(--paper); }
.rate input:checked + label { background: var(--accent); color: var(--sheet); }
.rate input:checked + label.clear { background: var(--paper); color: var(--ink-2); }
.rate input:focus-visible + label { outline: var(--focus); outline-offset: -2px; position: relative; z-index: 1; }
.rate-row { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; padding: var(--s-2) 0; border-bottom: 1px solid var(--rule); }
.rate-row .crit { min-width: 10rem; font-weight: 500; }

/* ---------- Chips ---------- */
.chips { display: flex; gap: var(--s-2); flex-wrap: wrap; }
.chip { font: 500 var(--fs-sm)/1 var(--font-sans); padding: 6px 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-3); background: transparent; color: var(--ink-2); cursor: pointer; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent-ink); }
.chip[aria-pressed="true"]::before { content: "\2713"; margin-right: 5px; }

/* ---------- Buttons & inputs ---------- */
.btn { font: 500 var(--fs-base)/1 var(--font-sans); padding: 9px 14px; border-radius: var(--r-2); border: 1px solid var(--accent); background: var(--accent); color: var(--sheet); cursor: pointer; white-space: nowrap; text-decoration: none; display: inline-block; }
.btn:hover { background: var(--accent-ink); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--accent-ink); }
.btn.ghost:hover { background: var(--accent-wash); }
.field { display: grid; gap: var(--s-1); max-width: 420px; }
.field label { font-size: var(--fs-sm); font-weight: 500; }
.field .row { display: flex; gap: var(--s-2); }
.input { flex: 1; font: 400 var(--fs-base)/1.2 var(--font-sans); padding: 8px 10px; border: 1px solid var(--rule-strong); border-radius: var(--r-2); background: var(--sheet); color: var(--ink); min-width: 0; }
.input:focus-visible { outline: var(--focus); outline-offset: 0; border-color: var(--accent); }
.field.has-error .input { border-color: var(--danger); }
.field-error { color: var(--danger); font-size: var(--fs-sm); }

/* ---------- Notices: empty / error ---------- */
.empty-state { border: 1px dashed var(--rule-strong); border-radius: var(--r-2); padding: var(--s-5); display: grid; gap: var(--s-2); justify-items: start; background: transparent; }
.empty-state h3 { font-size: var(--fs-md); }
.empty-state p { color: var(--ink-2); }
.alert { border: 1px solid var(--danger); border-radius: var(--r-2); background: var(--danger-wash); padding: var(--s-3) var(--s-4); display: grid; gap: 2px; max-width: 560px; }
.alert strong { color: var(--danger); font-weight: 600; }

/* ---------- Pages ---------- */
.nav { display: flex; gap: var(--s-4); flex-wrap: wrap; font-size: var(--fs-sm); font-weight: 500; }
.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.lead { margin-top: var(--s-2); color: var(--ink-2); }
.actions { margin-top: var(--s-4); }
.flag { margin-right: var(--s-2); }
.rank .city a { color: var(--ink); text-decoration: none; }
.rank .city a:hover { color: var(--accent-ink); text-decoration: underline; }
.rank.plain .city { left: 0; white-space: normal; min-width: 12rem; }
.rank .city .desc { display: block; font-weight: 400; }
.dist { display: grid; gap: var(--s-1); max-width: 560px; margin: 0; }
.dist-row { display: grid; grid-template-columns: 2.5rem 1fr; align-items: center; gap: var(--s-2); }
.dist dd { margin: 0; display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.dist-bar { display: block; height: 10px; min-width: 1px; background: var(--accent); border-radius: var(--r-1); }
.people { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); }
.weight-list { list-style: none; padding: 0; margin: 0; max-width: 520px; border-top: 1px solid var(--rule-strong); }
.weight-list li { display: flex; justify-content: space-between; gap: var(--s-4); padding: 6px 0; border-bottom: 1px solid var(--rule); }
.weight-list .num { font-weight: 600; }
.weight-list li.is-off .name { color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--off); }
.weight-list li.is-off .num { color: var(--ink-3); font-weight: 400; }
.marks { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-2) var(--s-4); margin: 0; max-width: var(--measure); }
.marks dt { font-weight: 500; }
.marks dd { margin: 0; }
.stack { display: grid; gap: var(--s-4); }
.alert ul { margin: var(--s-1) 0 var(--s-2); padding-left: 1.2em; }
.tg-login { margin-top: var(--s-5); min-height: 48px; }

.kit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--s-6); }

@media (max-width: 640px) {
  h1 { font-size: var(--fs-xl); }
  h2 { font-size: var(--fs-lg); }
  .page { padding: var(--s-5) var(--s-4) var(--s-7); }
  .weight { grid-template-columns: 1fr 2.5rem; row-gap: var(--s-1); }
  .weight input[type="range"] { grid-column: 1 / -1; grid-row: 2; }
  .rank th, .rank td { padding: 6px var(--s-2); }
  .rank .place { padding-left: 2px; }
  .rank .city { min-width: 9rem; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------- /me wizard, settings ---------- */
.steps { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-4); }
.steps a { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 12px; border: 1px solid var(--rule-strong); border-radius: var(--r-2); color: var(--ink-2); text-decoration: none; }
.steps a .num:first-child { font-weight: 600; }
.steps a[aria-current="step"] { border-color: var(--accent); background: var(--accent-wash); color: var(--accent-ink); }
.status { min-height: 1.45em; color: var(--ink-2); }
.status.is-error { color: var(--danger); }
.city-list { list-style: none; padding: 0; margin: var(--s-3) 0 0; max-width: 560px; }
.city-list li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-2) var(--s-4); padding: 8px 0; border-bottom: 1px solid var(--rule); }
.city-list .flag { margin-right: var(--s-2); }
.matrix .cell { border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.matrix .cell.empty { font-weight: 400; }
.matrix .cell.is-saving { outline: 1px dashed var(--ink-3); outline-offset: 1px; }
.matrix .cell.is-error { box-shadow: inset 0 0 0 2px var(--danger); }
.weight.is-error output { color: var(--danger); }
.rate-pop { position: absolute; z-index: 5; }
.rate-pop button { font: 500 var(--fs-sm)/1 var(--font-sans); min-width: 2.25rem; padding: 9px 6px; border: 0; border-left: 1px solid var(--rule); background: transparent; color: var(--ink); cursor: pointer; }
.rate-pop button:first-child { border-left: 0; color: var(--ink-3); }
.rate-pop button:hover { background: var(--accent-wash); }
.btn.danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn.danger:hover { background: var(--danger-wash); }
.rate-pop[hidden], .empty-state[hidden] { display: none; }