/* SPDX-License-Identifier: MIT */
/* Copyright (c) 2026 Evgeny Baulin */
/* Page layout: header, toolbar, blocks, responsive columns, present and instructor modes. */

.site-header,
.content,
.site-footer .footer-lines {
  max-width: var(--column);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.site-header {
  padding-top: 26px;
  padding-bottom: 14px;
}
.brand-course {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}
.brand-title {
  margin: 0.15em 0 0.1em;
  font-size: 1.85rem;
}
.brand-label {
  color: var(--accent);
  margin-right: 0.35em;
}
.brand-page {
  margin: 0.1em 0 0;
  font-size: 1.15rem;
  color: var(--fg-soft);
}
.byline {
  margin-top: 0.4em;
  color: var(--muted);
  font-size: 0.95rem;
}
.byline p {
  margin: 0;
}

/* One row: the Topics toggle, the page links, the tools on the right. Nothing in it wraps, so the toolbar has the
   same height in either language: the links shrink and scroll sideways instead, and app.js fades the side with
   more and keeps the current block in view. Where the tools would leave the links too little room, the links
   take a row of their own above them; the responsive rules below choose that by the width alone. */
.toolbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px 16px;
  padding: 8px max(var(--gutter), calc((100% - var(--column)) / 2 + var(--gutter)));
  background: var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.toolbar-nav,
.toolbar-tools {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}
.toolbar-nav {
  flex: 1 1 0;
  min-width: 0;
}
.toolbar-tools {
  flex: none;
  gap: 5px;
}
/* a row that scrolls (the tools do on a phone): no scroll bar, and 5px of padding, taken back by the margin,
   keep the focus ring inside */
.toolbar-nav {
  margin: -5px;
  padding: 5px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.toolbar-nav::-webkit-scrollbar,
.toolbar-tools::-webkit-scrollbar {
  display: none;
}
.toolbar .is-cut-end {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.toolbar .is-cut-start {
  -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent);
}
.toolbar .is-cut-start.is-cut-end {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.nav-link {
  flex: none;
  padding: 4px 6px;
  font-size: 0.95rem;
  white-space: nowrap;
  border-radius: var(--radius);
  color: var(--fg-soft);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav-link:hover {
  color: var(--accent);
}
.nav-link[aria-current="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 700;
}

.content {
  padding-bottom: 48px;
}

.block {
  margin: 34px 0 54px;
  padding-top: 26px;
  border-top: 3px solid var(--accent);
  scroll-margin-top: calc(var(--toolbar-h) + 10px);
}
.block-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}
.block-title {
  font-size: 1.75rem;
}

.subblock {
  margin: 30px 0;
}
.subblock-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  margin-bottom: 8px;
}
/* the handout column sets its own line length (components.css) */
.subblock > p,
.subblock > ul,
.subblock > ol {
  max-width: var(--measure);
}

.problem-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.home-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}

.widget-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr);
  gap: 18px 24px;
  align-items: start;
}
.widget-body.is-stacked {
  grid-template-columns: minmax(0, 1fr);
}
.widget-grid.two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}
.widget-grid.three {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

/* One equal column per block that has problems, however many blocks the seminar has. */
.overview-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 20px;
}
/* Many blocks: two rows of columns instead of one wide row. */
.overview-grid.two {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  font-size: 0.92rem;
}
.footer-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 48px;
  padding-top: 18px;
  padding-bottom: 22px;
}
.footer-lines p {
  margin: 0;
}

/* ---------------------------------------------------------------- present mode */
.is-present {
  font-size: 23px;
}
.is-present .site-header {
  padding-top: 10px;
  padding-bottom: 6px;
}
.is-present .brand-course,
.is-present .byline,
.is-present .site-footer,
.is-present .self-study,
.is-present .check-ref,
.is-present:not(.is-instructor) .tool-instructor,
.is-present .toolbar .tool:not(.tool-present):not(.timer-display):not(.timer-step):not(.timer-reset):not(.tool-lang):not(.tool-instructor) {
  display: none;
}
.is-present .brand-title {
  font-size: 1.2rem;
}
:root.is-present {
  --column: 1500px;
}
.is-present .block {
  display: none;
  margin-top: 8px;
  border-top-width: 0;
}
.is-present .block.is-current {
  display: block;
}
.is-present .timer-display {
  font-size: 1.6rem;
  padding: 0 0.4em;
}
.is-present.timer-active .timer-display {
  font-size: 2.1rem;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1150px) {
  .problem-pair,
  .home-list {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (max-width: 900px) {
  .widget-body {
    grid-template-columns: minmax(0, 1fr);
  }
  .widget-grid.three {
    grid-template-columns: minmax(0, 1fr);
  }
  .overview-grid {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }
  .overview-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* Two rows of the toolbar, by the width alone: the tools of the seminar page leave its block links too little room
   below 1200px, those of the handout and the cheat sheet below 600px. The links (with the Topics toggle) go first. */
@media (max-width: 1199.98px) {
  .page-main .toolbar {
    flex-wrap: wrap;
  }
  .page-main .toolbar-tools {
    flex-basis: 100%;
  }
}
@media (max-width: 599.98px) {
  .page-theory .toolbar,
  .page-cheatsheet .toolbar {
    flex-wrap: wrap;
  }
  .page-theory .toolbar-tools,
  .page-cheatsheet .toolbar-tools {
    flex-basis: 100%;
  }
}
@media (max-width: 700px) {
  :root {
    --gutter: 16px;
  }
  html {
    font-size: 16px;
  }
  .widget-grid.two {
    grid-template-columns: minmax(0, 1fr);
  }
  .brand-title {
    font-size: 1.45rem;
  }
  .block-title {
    font-size: 1.4rem;
  }
  .toolbar {
    position: static;
  }
  .tool-label {
    font-size: 0.9rem;
  }
  /* the tools of the seminar page are wider than a phone: their row scrolls sideways like the links */
  .page-main .toolbar-tools {
    flex-basis: calc(100% + 10px);
    min-width: 0;
    margin: -5px;
    padding: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
}