/* Simulation controls share the raised, layered button language used by Anmelden. */
.sim-heading .modes button,
.app .btn,
.cite .bar button {
  border: 1px solid transparent;
  border-radius: 0.65rem;
  font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 0 rgba(0, 0, 0, 0.16),
    0 3px 0 rgba(0, 0, 0, 0.1),
    0 6px 14px rgba(0, 0, 0, 0.1);
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease,
    box-shadow 180ms ease, transform 180ms ease;
}

/* Method choices use a light raised surface; the chosen mode is graphite. */
.sim-heading .modes button {
  background: linear-gradient(180deg, #fff9f4 0%, #f1efe9 55%, #dedbd3 100%);
  border-color: #d4d0c8;
  color: #252525;
}

.sim-heading .modes button:hover,
.sim-heading .modes button:focus-visible {
  background: linear-gradient(180deg, #faf9f5 0%, #f7f5f0 55%, #e8e5dd 100%);
  border-color: #bcb8af;
  transform: translateY(-1px);
}

.sim-heading .modes button.on {
  background: linear-gradient(180deg, #4a4a4a 0%, #303030 52%, #202020 100%);
  border-color: #555;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.24),
    0 3px 0 rgba(0, 0, 0, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.16);
}

.sim-heading .modes button.on .dot {
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

/* Main simulation actions use graphite; the secondary fuel action is light. */
.app .btn {
  background: linear-gradient(180deg, #454545 0%, #303030 50%, #222 100%);
  border-color: #494949;
  color: #fff;
  cursor: pointer;
}

.app .btn:hover,
.app .btn:focus-visible {
  background: linear-gradient(180deg, #555 0%, #3a3a3a 52%, #292929 100%);
  border-color: #626262;
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -2px 0 rgba(0, 0, 0, 0.16),
    0 4px 0 rgba(0, 0, 0, 0.12),
    0 10px 18px rgba(0, 0, 0, 0.18);
  transform: translateY(-1px);
}

.app .btn.ghost {
  background: linear-gradient(180deg, #fff9f4 0%, #f2f0ea 52%, #dedbd3 100%);
  border-color: #d4d0c8;
  color: #222;
}

.app .btn.ghost:hover,
.app .btn.ghost:focus-visible {
  background: linear-gradient(180deg, #faf9f5 0%, #f8f6f1 52%, #e7e4dc 100%);
  border-color: #bcb8af;
  color: #111;
}

.app .btn:disabled {
  opacity: 0.45;
  box-shadow: none;
  transform: none;
}

.cite .bar button {
  background: linear-gradient(180deg, #fff9f4 0%, #f1efe9 55%, #dedbd3 100%);
  border-color: #d4d0c8;
  color: #252525;
  cursor: pointer;
}

.cite .bar button:hover,
.cite .bar button:focus-visible {
  background: linear-gradient(180deg, #faf9f5 0%, #f7f5f0 55%, #e8e5dd 100%);
  border-color: #bcb8af;
  transform: translateY(-1px);
}

.sim-heading .modes button:active,
.app .btn:active,
.cite .bar button:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(0, 0, 0, 0.12);
  transform: translateY(1px);
}

@media (prefers-reduced-motion: reduce) {
  .sim-heading .modes button,
  .app .btn,
  .cite .bar button {
    transition: none;
  }
}

/* Match the control panel height to the macro view while the layout is two-column. */
@media (min-width: 941px) {
  .layout {
    container-type: inline-size;
  }

  /* The panel is never cut off or scrolled: the macro view keeps its 16:10
     height as a minimum and grows with the panel instead. Both mode panels
     share one grid cell and the hidden one keeps its space, as does the laser
     timeline before the first shot, so the height never jumps. The laser
     panel is the taller one and sets it. */
  .layout > .panel {
    min-height: 0;
    gap: 12px;
    padding: 14px;
  }

  .layout > .panel.hidden {
    display: flex !important;
    visibility: hidden;
  }

  .layout > .panel .timeline.hidden {
    display: flex !important;
    visibility: hidden;
  }

  /* room for the longest phase description, so firing never grows the panel */
  .layout > .panel .tl-info {
    min-height: 62px;
  }

  .layout .window.macro {
    aspect-ratio: auto;
    min-height: calc((100cqw - 378px) * 0.625);
  }

  .layout > .panel .ctl {
    gap: 6px;
  }

  .layout > .panel .readout {
    gap: 8px;
    padding: 12px;
  }
}
/* On wide screens, align the two top panels and let the microscopic view span both columns. */
@media (min-width: 941px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "macro panel" "micro micro";
    align-items: stretch;
  }

  .stage {
    display: contents;
  }

  .window.macro {
    grid-area: macro;
  }

  .window.micro {
    grid-area: micro;
    width: 100%;
  }

  .layout > .panel {
    grid-area: panel;
  }

  .cmp-mat-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}

@media (max-width: 940px) {
  .stage {
    display: flex;
  }

  .cmp-mat-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
/* Keep the long simulation title on one balanced line on narrow screens. */
@media (max-width: 720px) {
  .sim-heading {
    padding: 1.75rem 0.75rem 1.35rem;
  }

  .sim-heading h1 {
    max-width: none;
    font-size: clamp(1.25rem, 7.1vw, 2.45rem);
    line-height: 1.05;
    letter-spacing: -0.055em;
    white-space: nowrap;
  }

  .sim-heading .page-back-wrap {
    margin-bottom: 0.85rem;
  }
}
/* Center every line in the simulation page heading, including paragraphs capped by global copy widths. */
.sim-heading > .eyebrow {
  max-width: none;
  margin-inline: auto;
}

.sim-heading > p:not(.eyebrow) {
  max-width: 50rem;
  margin-inline: auto;
}

.sim-heading .page-back-wrap {
  width: 100%;
  margin-inline: auto;
  text-align: center;
}
/* Align the return link with the content pages and keep the label attached to the title. */
.sim-heading .page-back-wrap {
  width: min(100%, 64rem);
  margin: 0 auto 1.25rem;
  text-align: left;
}

.sim-heading > .eyebrow {
  max-width: none;
  margin: 0 auto 0.35rem;
}

.sim-heading h1 {
  margin: 0.3rem auto;
  text-align: center;
}

.sim-heading > p:not(.eyebrow) {
  max-width: 50rem;
  margin: 1rem auto 0;
}

@media (max-width: 720px) {
  .sim-heading .page-back-wrap {
    margin-bottom: 1rem;
  }
}

/* Link to the page with the model's equations, where the citation box was. */
.sim-math-link {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* On phones the readouts would run into the window label: move them to the
   bottom edge, drop the note about the nuclei, and take the scale legend off
   the window label into the corner the note leaves free. */
@media (max-width: 720px) {
  .win-hud {
    top: auto;
    bottom: 10px;
    left: 14px;
    right: 14px;
    justify-content: space-between;
  }

  .win-hud .m:first-child {
    text-align: left;
  }

  .win-hud .m:nth-child(2) {
    text-align: center;
  }

  .micro-note {
    display: none;
  }

  .micro-legend {
    top: auto;
    bottom: 11px;
  }
}