/* Battery Core — shared page chrome for standalone module pages.
 *
 * The two strips that give every module the same way back to the course and
 * the same notices. Everything is namespaced `bc-`, values included, so this
 * file can be linked next to any module stylesheet without colliding with its
 * token vocabulary or its class names.
 *
 *     <link rel="stylesheet" href="../../assets/site-chrome.css">
 */

:root {
  --bc-background: #07131d;
  --bc-surface: #0d1d29;
  --bc-text: #edf6f8;
  --bc-muted: #9fb3bd;
  --bc-line: rgba(196, 224, 231, 0.16);
  --bc-accent: #68e0bd;
  --bc-blue: #71b7ff;
  --bc-orange: #ffb067;
  --bc-font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
}

.bc-modulebar,
.bc-footer {
  box-sizing: border-box;
  width: min(1180px, calc(100% - 2rem));
  margin-inline: auto;
  color: var(--bc-muted);
  font-family: var(--bc-font);
  font-size: 0.9rem;
  line-height: 1.6;
}

.bc-modulebar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--bc-line);
}

.bc-modulebar a,
.bc-footer a {
  color: var(--bc-text);
  text-decoration: none;
  font-weight: 700;
}

.bc-modulebar a:hover,
.bc-footer a:hover {
  color: var(--bc-accent);
}

.bc-modulebar a:focus-visible,
.bc-footer a:focus-visible {
  outline: 3px solid var(--bc-accent);
  outline-offset: 4px;
  border-radius: 6px;
}

.bc-modulebar-part {
  color: var(--bc-accent);
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-size: 0.75rem;
}

.bc-modulebar-part[data-tier="deeper"] {
  color: var(--bc-blue);
}

.bc-modulebar-part[data-tier="toolkit"] {
  color: var(--bc-orange);
}

.bc-modulebar-spacer {
  flex: 1 1 auto;
}

.bc-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem 2rem;
  margin-top: 3rem;
  padding: 2rem 0;
  border-top: 1px solid var(--bc-line);
}

.bc-footer p {
  margin: 0;
}

.bc-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 640px) {
  .bc-footer {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* "Done with this lesson?" strip: completion and the next item, the same
   course discipline the reading lessons end with. The button is revealed by
   `course-progress.js`, so it never appears without the script behind it. */
.bc-nextbar {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.2rem;
  width: min(1180px, calc(100% - 2rem));
  margin: 2.5rem auto 0;
  padding: 1rem 1.2rem;
  border: 1px solid var(--bc-line);
  border-radius: 18px;
  background: var(--bc-surface);
  color: var(--bc-muted);
  font-family: var(--bc-font);
  font-size: 0.92rem;
}

.bc-nextbar-spacer {
  flex: 1 1 auto;
}

.bc-nextbar button {
  min-height: 42px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--bc-line);
  border-radius: 999px;
  background: transparent;
  color: var(--bc-text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.bc-nextbar button[aria-pressed="true"] {
  border-color: transparent;
  background: var(--bc-accent);
  color: #04251e;
}

.bc-nextbar a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0.5rem 1.05rem;
  border-radius: 999px;
  background: var(--bc-accent);
  color: #04251e;
  font-weight: 850;
  text-decoration: none;
}

.bc-nextbar button:focus-visible,
.bc-nextbar a:focus-visible {
  outline: 3px solid var(--bc-accent);
  outline-offset: 3px;
}