@layer components {
  .plot-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-inline-xs);
    margin-block: var(--space-l);
  }

  .plot-choice {
    font: inherit;
    font-family: var(--font-mono);
    font-size: var(--text-s);
    padding: var(--space-2xs) var(--space-inline-s);
    color: var(--ink);
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--space-inline-2xs);
    cursor: pointer;
  }

  .plot-choice[aria-pressed="true"] {
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
  }

  .plot-situation {
    display: grid;
    align-items: center;
    gap: var(--space-l) var(--space-inline-2xl);
    margin-block: var(--space-2xl);
  }

  .plot-situation p { color: var(--ink-soft); margin-block: 0; }
  .plot-situation .shots { margin-block: 0; grid-template-columns: auto; }
  .plot[data-plot-view-value="both"] .plot-situation .shots { grid-template-columns: repeat(2, auto); }

  @media (min-width: 58rem) {
    .plot-situation { grid-template-columns: minmax(0, 1fr) auto; }
    .plot-situation > h3 { grid-column: 1 / -1; margin-block-end: 0; }
  }

  .plot[data-plot-view-value="to-scale"] .plot-all,
  .plot[data-plot-view-value="all"] .plot-to-scale { display: none; }

  .plot:not([data-plot-view-value="both"]) .shot img { inline-size: 400px; }

  @media (max-width: 28rem) {
    .plot:not([data-plot-view-value="both"]) .shot img { inline-size: 200px; }
  }
}