/* About panel and easter-egg toast (js/easter-eggs.js, markup in
   components/about-panel.html). Uses the shell's tokens; the hero mark is
   drawn here in CSS because the panel markup is owned elsewhere. */

.gyrus-about {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.gyrus-about[hidden] {
  display: none;
}

.gyrus-about__backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.25);
}

.gyrus-about__panel {
  position: relative;
  width: 100%;
  max-width: var(--width-measure);
  max-height: calc(100vh - var(--space-6));
  overflow-y: auto;
  padding-bottom: var(--space-4);
  background-color: var(--color-ground);
  color: var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
}

.gyrus-about__panel:focus {
  outline: none;
}

.gyrus-about__head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
}

/* Hero mark: the same tile as the start page (.hero-mark in _controls.css),
   brain glyph as a white SVG over the gradient (same paths as components/start-screen.html). */
.gyrus-about__head::before {
  content: "";
  width: calc(var(--hero-size) * 0.75);
  height: calc(var(--hero-size) * 0.75);
  border-radius: calc(var(--radius-hero) * 0.75);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.4 4.6C9.8 3.3 7.1 3.5 6 5.4 4 5.7 3 7.8 3.8 9.6 2.6 11 2.9 13.6 4.7 14.6 4.6 16.9 6.6 18.8 8.9 18.4c.8 1.3 2 1.7 2.5 1.2V4.6Z'/%3E%3Cpath d='M12.6 4.6c1.6-1.3 4.3-1.1 5.4.8 2 .3 3 2.4 2.2 4.2 1.2 1.4.9 4-.9 5 .1 2.3-1.9 4.2-4.2 3.8-.8 1.3-2 1.7-2.5 1.2V4.6Z'/%3E%3Cpath d='M6.4 8.4c1.2-.5 2.1.2 2.6 1.1M5.4 12.3c1.3-.7 2.6-.2 3.2.9M7.4 16c.9-.8 2.1-.7 2.9 0M17.6 8.4c-1.2-.5-2.1.2-2.6 1.1M18.6 12.3c-1.3-.7-2.6-.2-3.2.9M16.6 16c-.9-.8-2.1-.7-2.9 0'/%3E%3C/svg%3E") center / 58% no-repeat,
    radial-gradient(circle at 25% 15%, rgba(255, 255, 255, 0.55), transparent 55%),
    var(--hero-gradient);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.gyrus-about__title {
  margin: 0;
  font-size: var(--font-size-display);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

/* Close: the shell's text button. */
.gyrus-about__close {
  min-height: var(--icon-button-size);
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--radius-button);
  background: transparent;
  color: var(--color-accent);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background-color var(--duration-hover) var(--ease-hover);
}

.gyrus-about__close:hover {
  background-color: var(--color-fill);
}

/* Each section is a white card, iOS grouped style. */
.gyrus-about__section {
  margin: 0 var(--space-4) var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-surface);
  border-radius: var(--radius-card);
}

.gyrus-about__section p {
  margin: 0 0 var(--space-2);
}

.gyrus-about__section p:last-child {
  margin-bottom: 0;
}

.gyrus-about__lede {
  font-size: var(--font-size-title);
}

.gyrus-about__source {
  font-size: var(--font-size-sm);
  color: var(--color-ink-muted);
}

/* Section header: 13px / 600 / secondary, sentence case. */
.gyrus-about__label {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-ink-muted);
}

.gyrus-about a {
  color: var(--color-accent);
  text-decoration: none;
}

.gyrus-about a:hover {
  text-decoration: underline;
}

.gyrus-about__rows {
  display: grid;
  grid-template-columns: 10rem 1fr;
  gap: var(--space-2) var(--space-4);
  margin: 0;
}

.gyrus-about__rows dt {
  font-weight: var(--font-weight-semibold);
}

.gyrus-about__rows dd {
  margin: 0;
  color: var(--color-ink-muted);
}

.gyrus-about__commits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.gyrus-about__commits h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
}

.gyrus-about__commits ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gyrus-about__commits li {
  padding: var(--space-1) 0;
  border-top: var(--border-hairline);
}

.gyrus-about code {
  font-family: var(--font-family-mono);
  font-size: var(--font-size-sm);
}

@media (max-width: 560px) {
  .gyrus-about__rows {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }
  .gyrus-about__rows dd {
    margin-bottom: var(--space-2);
  }
  .gyrus-about__commits {
    grid-template-columns: 1fr;
  }
}

.gyrus-toast {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: 10001;
  max-width: min(28rem, calc(100vw - var(--space-6)));
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  color: var(--color-ink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  opacity: 0;
  transition: opacity var(--duration-panel) var(--ease-panel);
  pointer-events: none;
}

.gyrus-toast.is-visible {
  opacity: 1;
}