/* The look of the command list, shared by the website (commands.html) and the Twitch panel (panel.html).
   It builds on brand.css of natuutuu.com (colours as CSS variables, so dark mode works by itself).
   The classes are the ones panel.js creates (group, command …) - names must stay as they are.
   Only the panel: panel.css (narrow, smaller text). */

/* fold-out boxes: "how to start", "good to know", "what the stats do" */
.intro {
  margin: 0 0 18px;
  padding: 0 16px;
  border-radius: 18px;
  background: var(--card-background);
  border: 2px solid var(--window-paper-grid-color);
}
.intro summary, .nested-details summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  color: var(--window-label-color);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.intro summary::-webkit-details-marker, .nested-details summary::-webkit-details-marker { display: none; }
.intro summary::before, .nested-details summary::before {
  content: "▶";
  font-size: 11px;
  transition: transform 0.15s ease;
}
.intro[open] > summary::before, .nested-details[open] > summary::before { transform: rotate(90deg); }
.intro-body { padding: 0 0 12px; }
.intro-body p { margin: 0 0 8px; }
.intro-body p:last-child { margin-bottom: 0; }

/* one group of commands (title + cards): the cards fill columns from top to bottom where there is room
   (columns of at least 300 px), each card right below the one above it - no gaps when cards differ in height */
.group {
  columns: 300px;
  column-gap: 12px;
  margin-bottom: 24px;
}
.group:last-child { margin-bottom: 0; }
.group-title { column-span: all; margin: 0 0 12px !important; font-size: 20px; font-weight: 700; }

/* one command: a red card (the red of the bars and buttons) with light text */
.command {
  break-inside: avoid; /* a card is never split over two columns */
  margin-bottom: 12px;
  padding: 14px 16px;
  border-radius: 18px;
  background: var(--window-bar-color);
  color: var(--window-bar-text-color);
}
/* the command itself (!up …): red text in a white pill */
.command-name {
  display: inline-block;
  padding: 2px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #a51f16; /* the red of the bars in daylight - stays readable on the white pill at night too */
  font-weight: 700;
}
.command-usage { margin-left: 6px; font-family: ui-monospace, Consolas, monospace; font-size: 15px; opacity: 0.85; }
.command-desc { margin-top: 8px; }
.command-note { margin-top: 6px; font-size: 15px; opacity: 0.85; white-space: pre-line; }
.command-link {
  display: inline-block;
  margin-top: 10px;
  padding: 4px 14px;
  border-radius: 999px;
  border: 2px solid currentColor;
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.command-link:hover { box-shadow: 0 0 0 2px var(--highlight-color); }
.nested-details { margin-top: 10px; border-top: 2px dashed rgba(255, 255, 255, 0.35); }
.command .nested-details summary { color: inherit; } /* the red label colour would vanish on the red card */
.nested-details summary { font-size: 15px; padding: 8px 0 4px; }
.nested-details .intro-body { padding: 4px 0 0; font-size: 15px; }