/*
 * Site rules on top of @mctlhq/css: the CSS-driven bilingual/theme toggle
 * (.l.en/.l.ru, .t.dark/.t.light) and basic page layout. This file is the
 * source of truth; `npm run vendor` copies it to public/styles/site.css,
 * which Base.astro links to so it is served from public/, never bundled or
 * inlined by Astro.
 */

/* Language toggle. */
:root[data-lang='en'] .l.ru {
  display: none;
}
:root[data-lang='ru'] .l.en {
  display: none;
}

/* Theme toggle. */
:root[data-theme='dark'] .t.light {
  display: none;
}
:root[data-theme='light'] .t.dark {
  display: none;
}

/* Fallback for a future document without data-theme; Base.astro always
 * authors data-theme="dark" so this is inert here but keeps the scale live. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --surface-bg: var(--mctl-surface-light-bg);
    --surface-fg: var(--mctl-surface-light-fg);
    --surface-fg-muted: var(--mctl-surface-light-fg-muted);
    --surface-line: var(--mctl-surface-light-line);
  }
}

/* Layout. */
:root {
  --content-max: 768px;
}
body {
  padding-inline: var(--mctl-space-4);
}
.site-header,
.site-footer,
main {
  max-width: var(--content-max);
  margin-inline: auto;
}
code,
pre,
.font-mono {
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Navigation. */
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mctl-space-4);
  padding-block: var(--mctl-space-4);
  border-bottom: 1px solid var(--surface-line);
}
.site-nav a {
  color: var(--surface-fg);
  text-decoration: none;
}
.site-nav a:hover {
  color: var(--accent);
}

/* Toggle groups. */
.toggle-group {
  display: inline-flex;
  gap: var(--mctl-space-2);
}
.toggle-group button {
  font: inherit;
  color: var(--surface-fg);
  background: var(--surface-elevated);
  border: 1px solid var(--surface-line);
  border-radius: var(--mctl-radius-md);
  padding: var(--mctl-space-1) var(--mctl-space-3);
  cursor: pointer;
}
.toggle-group button[aria-pressed='true'] {
  background: var(--accent);
  color: var(--accent-fg);
  border-color: var(--accent);
}

/* Footer. */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mctl-space-4);
  align-items: center;
  padding-block: var(--mctl-space-6);
  color: var(--surface-fg-muted);
  border-top: 1px solid var(--surface-line);
}
.site-footer a {
  color: inherit;
}

/* Hero (home page). */
.hero-name {
  font-family: var(--font-editorial);
  font-size: var(--mctl-typography-font-size-hero);
  line-height: var(--mctl-typography-line-height-hero);
  letter-spacing: var(--mctl-typography-letter-spacing-hero);
  margin-block: var(--mctl-space-6) var(--mctl-space-4);
}
.thesis {
  font-family: var(--font-display);
  font-size: var(--mctl-typography-font-size-lede);
  line-height: var(--mctl-typography-line-height-lede);
  margin-block-end: var(--mctl-space-3);
}
.subline {
  font-family: var(--font-display);
  font-size: var(--mctl-typography-font-size-body);
  line-height: var(--mctl-typography-line-height-body);
  color: var(--surface-fg-muted);
  margin-block-end: var(--mctl-space-6);
}

/* Stat tiles. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--mctl-space-5);
  padding-block: var(--mctl-space-5);
  border-block: 1px solid var(--surface-line);
}
.stat {
  display: flex;
  flex-direction: column;
  gap: var(--mctl-space-1);
}
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 40px);
  font-variant-numeric: tabular-nums;
  line-height: var(--mctl-typography-line-height-tight);
}
.stat-label {
  font-size: var(--mctl-typography-font-size-sm);
  color: var(--surface-fg-muted);
}
.stat-caption {
  grid-column: 1 / -1;
  font-size: var(--mctl-typography-font-size-xs);
  color: var(--surface-fg-muted);
  margin: 0;
}

/* CTAs. */
.ctas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mctl-space-4);
  padding-block: var(--mctl-space-6);
}
.cta {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
  padding-inline: var(--mctl-space-4);
  border-radius: var(--mctl-radius-md);
  border: 1px solid var(--surface-line);
  color: var(--surface-fg);
  text-decoration: none;
}
.cta:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Collapsible blocks. */
.block {
  border-top: 1px solid var(--surface-line);
  padding-block: var(--mctl-space-3);
}
.block > summary {
  cursor: pointer;
  min-block-size: 44px;
  padding-block: var(--mctl-space-3);
  display: list-item;
}
.block ul {
  margin: 0;
  padding-inline-start: var(--mctl-space-5);
}
.block li {
  margin-block-end: var(--mctl-space-2);
}
.block p {
  margin-block-end: var(--mctl-space-2);
}

/* Tap targets: every interactive element on the page is at least 44px tall
 * at any viewport width, per the 360px acceptance criterion. */
.site-nav a,
.toggle-group button,
.site-footer a {
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

/* Print. Base.astro hardcodes data-theme="dark", which is unreadable on
 * paper, so print always uses a light palette regardless of the attribute.
 * Closed <details> bodies are forced visible so the printed page carries
 * the same content as the screen. */
@media print {
  :root {
    --surface-bg: #fff;
    --surface-fg: #111;
    --surface-fg-muted: #444;
    --surface-line: #bbb;
  }
  .site-header,
  .toggle-group,
  .ctas {
    display: none;
  }
  .block > *:not(summary) {
    display: block !important;
    content-visibility: visible !important;
  }
  /* The rule above forces every non-summary child of a collapsed .block to
   * display:block so print carries the full content, but .l.en/.l.ru pairs
   * (see the language toggle at the top of this file) can be direct children
   * of a .block (e.g. the two <ul> lists in each home-page <details>). Without
   * this override both languages would print at once. Higher specificity than
   * the block-forcing rule above lets it win even though both use !important. */
  :root[data-lang='en'] .block > .l.ru,
  :root[data-lang='ru'] .block > .l.en {
    display: none !important;
  }
  a[href^='http']::after {
    content: ' (' attr(href) ')';
    font-size: var(--mctl-typography-font-size-xs);
  }
}