:root {
  --accent: #0f9d76;
  --ink: #111;
  --muted: #666;
  font-size: 18px;
}

body {
  font-family:
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial;
  max-width: 720px;
  margin: 0 auto;
  padding: 0.75rem;
  line-height: 1.5;
  color: var(--ink);
}

/* --- The menu at the top ------------------------------------------------------- */

/* The menu holds the title and the settings. The items share one row.
   The row wraps on a small screen. */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 8px 0;
}

h1 {
  margin: 0;
  font-size: 1.25rem;
}

/* The gear button. It opens the dialog with the settings. */
.icon-button {
  margin-top: 0;
  padding: 4px;
  border: none;
  background: none;
  color: var(--muted);
}

.icon-button:hover {
  color: var(--ink);
}

.icon-button svg {
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

/* The simple divider under the menu. */
.divider {
  border: none;
  border-top: 1px solid #ddd;
  margin: 0 0 12px 0;
}

h2 {
  font-size: 0.9rem;
  margin: 0 0 4px 0;
}

p {
  margin: 6px 0;
}

.spot {
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--accent);
}

.date {
  color: #444;
}

.muted {
  color: var(--muted);
  font-size: 0.8rem;
}

.figure .muted {
  text-align: center;
}

footer {
  margin-top: 12px;
  font-size: 0.8rem;
  color: var(--muted);
}

button {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}

button.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* --- The body figures --------------------------------------------------------- */

.figures {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
}

/* The two figures share one row. Each figure takes half the width.
   The row stays in one line on small screens too. */
.body-figure {
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
}

.body-figure svg {
  display: block;
  width: 100%;
  height: auto;
  /* 14rem wide at the largest. The two figures then fit side by side.
     A smaller screen scales them down. */
  max-width: 14rem;
  margin: 0 auto;
}

.body-figure figcaption {
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
}

/* The injection site parts. They come from the two external SVG files,
   through "use" elements. The fill inherits into the copied shapes.
   The scheme has only two colors. An inactive part is gray. The active
   part is green. */
.injection-site {
  fill: #d8d8d8;
  transform-box: fill-box;
  transform-origin: center;
}

/* The active site. It pulses. app.js adds the class "active". */
.injection-site.active {
  fill: var(--accent);
  opacity: 1;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  50% {
    transform: scale(1.03);
  }
}

@media (prefers-reduced-motion: reduce) {
  .injection-site.active {
    animation: none;
  }
}

/* --- The dialog for the anchor date ------------------------------------------ */

dialog {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.35);
}

dialog menu {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 0;
  margin: 12px 0 0 0;
  list-style: none;
}