/* Components: header, toggles, footer, rows, code pill, mascot art */

/* ---------- header ---------- */
.site-header { border-bottom: 1px solid var(--line); }
.site-header .bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--s-5);
  row-gap: var(--s-1);
  padding-block: var(--s-3);
}
.brand {
  order: 1;
  font-weight: 500;
  text-decoration: none;
  letter-spacing: -0.01em;
  padding-block: var(--s-2);
}
.brand:hover { color: var(--accent-ink); }
.tools { order: 2; display: flex; align-items: center; gap: var(--s-1); margin-left: auto; }
.nav { order: 3; flex-basis: 100%; display: flex; gap: var(--s-5); }
.nav a {
  text-decoration: none;
  color: var(--muted);
  padding-block: var(--s-2);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}
@media (min-width: 600px) {
  .nav { order: 2; flex-basis: auto; margin-left: auto; }
  .tools { order: 3; margin-left: 0; }
}

/* ---------- toggles ---------- */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 40px;
  padding: 0 var(--s-3);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  color: var(--muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.toggle:hover { color: var(--ink); border-color: var(--line); }
html:not(.js) [data-toggle] { display: none; }

/* language: both options shown, the active one is ink */
.toggle .opt { transition: color var(--t-fast) var(--ease); }
html[data-lang="ru"] .toggle .opt[data-opt="ru"],
html[data-lang="en"] .toggle .opt[data-opt="en"] { color: var(--ink); font-weight: 500; }

/* theme: tiny half-filled circle + current state as text */
.theme-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
  flex: none;
}
.toggle[data-toggle="theme"] [data-state] { display: none !important; }
html[data-theme-eff="light"] .toggle[data-toggle="theme"] [data-state="light"],
html[data-theme-eff="dark"] .toggle[data-toggle="theme"] [data-state="dark"] { display: inline !important; }
html[data-lang="ru"] .toggle[data-toggle="theme"] [data-l="en"],
html[data-lang="en"] .toggle[data-toggle="theme"] [data-l="ru"] { display: none !important; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { padding-block: var(--s-5); color: var(--muted); font-size: var(--fs-sm); }

/* ---------- list rows (projects, plugins) ---------- */
.rows { border-top: 1px solid var(--line); }
.row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--s-5);
  row-gap: var(--s-1);
  padding-block: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.row__name {
  grid-column: 1;
  font-weight: 500;
  font-size: var(--fs-0);
}
.row__name a { text-decoration: none; }
.row__name a::after { content: ""; position: absolute; inset: 0; }
.row__name a:hover { color: var(--accent-ink); }
.row__name a:focus-visible { outline-offset: -2px; border-radius: var(--r-s); }
.row__desc { grid-column: 1; color: var(--muted); max-width: 52ch; }
.row__meta {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--muted);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-top: 0.2em;
}
.row__meta span + span::before { content: ", "; }
.row__aside { grid-column: 1; font-size: var(--fs-sm); position: relative; z-index: 1; }

/* ---------- plain inline list (stack) ---------- */
.inline-list { max-width: var(--measure); }

/* contacts: definition list */
.facts { display: grid; border-top: 1px solid var(--line); }
.facts > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.facts dt { color: var(--muted); }

/* ---------- code pill (server address) ---------- */
.code {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-m);
  overflow: hidden;
}
.code code {
  display: block;
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: clamp(1rem, 0.9rem + 0.8vw, 1.5rem);
  line-height: 1.3;
  overflow-x: auto;
  white-space: nowrap;
  user-select: all;
}
.code button {
  flex: none;
  min-width: 44px;
  padding: 0 var(--s-4);
  background: none;
  border: 0;
  border-left: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.code button:hover { color: var(--ink); background: var(--bg); }
.code button:focus-visible { outline-offset: -3px; }
.code button .lbl-done { display: none; }
.code button.is-done { color: var(--accent-ink); }
.code button.is-done .lbl { display: none; }
.code button.is-done .lbl-done { display: inline; }

/* ---------- steps (how to join) ---------- */
.steps { counter-reset: step; display: grid; gap: var(--s-3); max-width: var(--measure); }
.steps li { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s-3); }
.steps li::before {
  counter-increment: step;
  content: counter(step);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- status line (mc) ---------- */
.status { min-height: 1.6em; }
.status strong { font-weight: 500; }

/* ---------- mascot art ---------- */
[data-slot^="mascot"] { display: block; }
[data-slot^="mascot"] img { height: auto; }
.sticker { width: var(--sticker, 160px); max-width: 100%; height: auto; }

/* main hero: transparent figure sitting on the page background */
.hero-art { margin-top: var(--s-2); width: min(70vw, 420px); margin-inline: 0; }
.hero-art img { width: 100%; height: auto; }
@media (min-width: 600px) { .hero-art { width: min(52vw, 460px); } }
@media (min-width: 1024px) {
  .hero-art { width: auto; margin-top: var(--s-5); }
  /* fit the whole figure on the first screen: shrink by viewport height, never below 260px */
  .hero-art img { width: auto; max-width: min(100%, 560px); max-height: max(260px, calc(100svh - 38rem)); }
}
@media (min-width: 1800px) { .hero-art img { max-width: min(100%, 620px); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-art img { animation: art-in 400ms var(--ease) both; }
}
/* transform only: if the animation never runs, the figure is still fully visible */
@keyframes art-in {
  from { transform: translateY(8px); }
  to   { transform: none; }
}

/* contacts heading with the small sticker beside it */
.heading-row { display: flex; align-items: center; gap: var(--s-3); }
.heading-row .sticker { --sticker: 72px; flex: none; }

/* 404: crying sticker above the text */
.sticker--404 { --sticker: 180px; margin-bottom: var(--s-2); }