/* ============================================================
   /generator - the config generator for hosting a server.
   Same rules as main.css: no transitions, no rounded corners.
   ============================================================ */

.guide {
  max-width: 820px;
}

.guide p {
  font-size: 1.08em;
  line-height: 1.65;
}

.guide h1.guide-title {
  font-size: 2em;
  font-weight: normal;
  font-style: italic;
  color: var(--white);
  margin: 0 0 0.5em;
}

.guide code {
  font-family: var(--mono);
  color: var(--orange);
}

.guide strong {
  color: var(--bright);
  font-weight: bold;
}

/* ---------- code blocks ---------- */

.guide-code {
  position: relative;
  margin: 0.6em 0 1.2em;
  background: var(--panel);
  border: 1px solid var(--line-dim);
  border-left: 2px solid var(--accent);
}

.guide-code pre {
  margin: 0;
  padding: 0.9em 1em;
  overflow-x: auto;
}

.guide-code pre code {
  font-family: var(--mono);
  font-size: 1.05em;
  line-height: 1.55;
  color: var(--bright);
  white-space: pre;
}

.guide-copy {
  position: absolute;
  top: 0.25em;
  right: 0.3em;
  /* the same size with the copy icon and the checkmark */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.2em;
  height: 1.9em;
  padding: 0;
  font-size: 1em;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--table-line);
  cursor: pointer;
}

/* main.css pads every .fa-solid on the right - the checkmark is one */
.guide-copy i {
  padding: 0;
}

.guide-copy:hover {
  color: var(--white);
  border-color: var(--white);
}

.guide-copy.copied {
  color: var(--online);
  border-color: var(--online);
}

/* ---------- setup tabs at the top ---------- */

.guide-setup-tabs {
  margin: 0.4em 0 0.5em;
}

.guide-setup-tabs .btn {
  flex: 1 1 0;
}

.guide-setup-tabs button {
  font-size: 1.25em;
  padding: 10px 12px;
  gap: 0.55em;
}

.guide-setup-tabs button i {
  font-size: 1.2em;
}

/* a group's own setups, e.g. AppImage: just trying it out / persistent server */
.guide-setup-subtabs {
  width: auto;
  /* one pixel up: the two rows share the line between them */
  margin: calc(-0.5em - 1px) 0 0.5em;
  padding-left: 1px;
}

.guide-setup-subtabs .btn {
  flex: 1 1 0;
}

/* as big as the tabs above */
.guide-setup-subtabs button {
  font-size: 1.25em;
  padding: 10px 12px;
}

.guide-setup-subtabs[hidden] {
  display: none;
}

.guide-image {
  display: block;
  max-width: 100%;
  margin: 0.8em 0 1.2em;
  border: 1px solid var(--line);
  image-rendering: auto;
  /* dimmed until hovered - no transitions on this site, the glow is instant */
  filter: brightness(0.55) saturate(0.6);
}

.guide-image:hover {
  filter: none;
  border-color: var(--accent);
}

/* ---------- config generator ---------- */

#config-generator {
  margin: 1em 0 1.4em;
  border: 1px solid var(--line);
  background: var(--panel);
}

.gen-field {
  display: flex;
  flex-direction: column;
}

.gen-field > label {
  color: var(--bright);
  margin-bottom: 0.25em;
}

.gen-field > label small {
  color: var(--faint);
  margin-left: 0.4em;
}

.gen-field input[type='number'] {
  font-family: var(--font);
  font-size: 1rem;
  color: var(--bright);
  background: var(--bg);
  border: 1px solid var(--line);
  padding: 6px 8px;
  outline: none;
  margin-bottom: 8px;
  width: 100%;
}

.gen-field input[type='number'] {
  color-scheme: dark;
  accent-color: var(--accent);
}

.gen-field input.no-spin {
  -moz-appearance: textfield;
  appearance: textfield;
}

.gen-field input.no-spin::-webkit-inner-spin-button,
.gen-field input.no-spin::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.gen-field input[type='number']:focus {
  border-color: var(--accent);
  box-shadow: 0 0 8px rgba(255, 176, 64, 0.4);
}

.gen-cycle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 1em;
  max-height: 9.5em;
  overflow-y: auto;
  padding: 6px 8px;
  margin-bottom: 8px;
  border: 1px solid var(--line);
  background: var(--bg);
}

.gen-cycle label {
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
}

.gen-cycle label.official {
  color: var(--bright);
}

.gen-cycle label {
  display: inline-flex;
  align-items: center;
}

/* square boxes like the rest of the site: amber frame and tick when checked */
.gen-cycle input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  margin: 0 0.45em 0 0;
  background: var(--bg);
  border: 1px solid var(--line);
  cursor: pointer;
}

.gen-cycle label:hover input[type='checkbox'] {
  border-color: var(--white);
}

.gen-cycle input[type='checkbox']:checked {
  border-color: var(--accent);
  box-shadow: 0 0 6px rgba(255, 176, 64, 0.4);
}

.gen-cycle input[type='checkbox']:checked::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 0;
  width: 4px;
  height: 8px;
  border: solid var(--accent);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.gen-cycle label:has(input:checked) {
  color: var(--white);
}

.gen-hint {
  color: var(--dim);
  margin: 0 0 0.9em;
}

/* ---------- small screens ---------- */

/* ---------- syntax colors: the site's VS-style palette ---------- */

.guide-code .hljs-attr,
.guide-code .hljs-attribute,
.guide-code .hljs-property {
  color: var(--enum);
}

.guide-code .hljs-string {
  color: var(--orange);
}

.guide-code .hljs-number {
  color: var(--number);
}

.guide-code .hljs-literal,
.guide-code .hljs-keyword,
.guide-code .hljs-built_in {
  color: var(--magenta);
}

.guide-code .hljs-comment {
  color: var(--comment);
  font-style: normal;
}

.guide-code .hljs-section,
.guide-code .hljs-title {
  color: var(--accent);
}

.guide-code .hljs-variable,
.guide-code .hljs-template-variable,
.guide-code .hljs-meta {
  color: var(--yellow);
}

.guide-code .hljs-bullet,
.guide-code .hljs-punctuation {
  color: var(--dim);
}

/* ---------- small things ---------- */

/* the white emphasis, e.g. "Ubuntu 22.04", "updates itself" */
.guide strong {
  color: var(--white);
}

.gen-field > label code {
  font-family: var(--mono);
  color: var(--orange);
}

.gen-field > label a {
  margin-left: 0.1em;
}

/* a path or a command in the generator's hint, copyable on its own */
/* a long command breaks between its words, its copy button stays at its end */
.gen-inline code {
  font-family: var(--mono);
  color: var(--orange);
  overflow-wrap: anywhere;
}

.gen-inline .gen-inline-copy {
  vertical-align: middle;
  margin-left: 0.25em;
}

.gen-inline-copy {
  /* main.css makes every button grow on desktop */
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6em;
  height: 1.4em;
  padding: 0;
  font-size: 0.9em;
  color: var(--dim);
  background: var(--panel);
  border: 1px solid var(--table-line);
  cursor: pointer;
}

.gen-inline-copy i {
  padding: 0;
}

.gen-inline-copy:hover {
  color: var(--white);
  border-color: var(--white);
}

.gen-inline-copy.copied {
  color: var(--online);
  border-color: var(--online);
}

/* a time zone the browser does not know */
.gen-field input.gen-invalid {
  border-color: var(--red);
}

.gen-field input:disabled {
  color: var(--dim);
  border-color: var(--line-dim);
}

/* the file a block goes into, as its first line: copyable on its own, above a dashed line */
.guide-code-file {
  display: flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55em 1em;
  border-bottom: 1px dashed var(--line);
}

.guide-code-file[hidden] {
  display: none;
}

.guide-code-file code {
  font-family: var(--mono);
  font-size: 1.05em;
  color: var(--accent);
}

/* with a file line: no glow on the left, the copy button below the path */
.guide-code.with-file {
  border-left: 1px solid var(--line-dim);
}

.guide-code.with-file > .guide-copy {
  top: calc(0.55em * 2 + 1.6em);
}

.gen-start-code pre code {
  white-space: pre-wrap;
}

.gen-start-code .gen-arg {
  white-space: nowrap;
}

/* the options of a command a bit apart from its values */
.gen-start-code .gen-arg:first-child {
  color: var(--white);
}

.gen-start-code pre {
  padding-right: 3em;
}

/* ---------- /generator: only the generator, centered ---------- */

/* a column: the footer at the window's bottom also when the page is short */
body.gen-page {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.gen-page-main {
  flex: 1 0 auto;
  width: 100%;
  box-sizing: border-box;
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5em 16px 3em;
}

.gen-page-main h1.guide-title {
  text-align: center;
  margin-bottom: 0.8em;
  /* a terminal's look */
  font-family: var(--mono);
  font-style: normal;
}

.gen-before-box {
  margin: 0 0 1.2em;
}

/* as the tournament's results page: the logo on the left, the links on the right */
.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6em 2em;
  padding: 1.8em 2em;
  /* in greys - only the links in colour; as the tiles of the steps (Advanced: ...) */
  background: #080808;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.45);
  /* as the tournament's live results page's (0.95rem of its 16px) - this page's rem is smaller */
  font-size: 15.2px;
  line-height: normal;
}

.site-footer a {
  color: var(--accent);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}

.site-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6em 2em;
}

.site-footer-links i {
  margin-right: 0.45em;
}

.footer-logo img {
  display: block;
  filter: grayscale(1);
}

/* the site's own footers put [ ] around their links, in capitals - not this one */
footer.site-footer > a::before,
footer.site-footer > a::after {
  content: none;
}

footer.site-footer > a {
  display: block;
  text-transform: none;
}

/* Maps for each bracket round: "Round 1 [de_cyberaqua]" ... "Final [de_silo]" */
.gen-rounds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.gen-round {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr);
  align-items: center;
}

.gen-round-name {
  color: var(--dim);
  margin-bottom: 8px;
}

/* the named rounds stand out: quarterfinals, semifinals, the final */
.gen-round-name.named {
  color: var(--accent);
}

.gen-field[hidden] {
  display: none;
}

/* an explanation that stays visible under a field, e.g. Player pairings */
.gen-field-text {
  color: var(--dim);
  margin: 0 0 8px;
}

.gen-field textarea[hidden] {
  display: none;
}

.gen-field-text strong {
  color: var(--white);
}

.gen-field-text em {
  font-style: italic;
  color: var(--white);
}

/* Your setup commands: commands as they are, scrolled sideways rather than broken inside a URL */
.gen-before-box .gen-start-code pre code {
  white-space: pre;
}

/* a switch in a generated block: As a service, As a separate user, FUSE installed? */
.gen-option {
  margin-bottom: 0.4em;
}

.gen-option[hidden] {
  display: none;
}

.gen-check-box .guide-image {
  margin: 0.4em 0 1em;
}

.gen-field-text code {
  font-family: var(--mono);
  color: var(--orange);
}

/* Save profile / Load profile / Reset to defaults - tab-like, side by side, under everything */
.gen-profile-bar {
  margin: 0.4em 0 1.4em;
}

.gen-profile-bar .btn {
  flex: 1 1 0;
}

.gen-profile-bar button i {
  margin-right: 0.5em;
}

/* a file the setup doesn't need: its path struck through and grey, nothing to copy */
.guide-code.unneeded .guide-code-file code {
  color: var(--faint);
  text-decoration: line-through;
}

.guide-code.unneeded .gen-inline-copy,
.guide-code.unneeded > .guide-copy {
  display: none;
}

.guide-code.unneeded pre code {
  color: var(--online);
}

.gen-bad {
  color: var(--red);
}

.gen-hint[hidden] {
  display: none;
}

/*
  The tab-like buttons overlap by a pixel (main.css): a translucent border then doubles where they meet.
  An opaque one of the same shade stays even - on every row of them here.
*/
.guide .btn a,
.guide .btn button,
.gen-page .btn button {
  border-color: rgb(28, 28, 28);
}

.gen-fuse-option {
  margin: -0.4em 0 0.6em;
}

.gen-fuse-option[hidden] {
  display: none;
}

/*
  Rows of tab-like buttons with one line between any two of them, at any zoom: each button draws only its right and
  bottom edge, the row its left and top one - no overlapping by margins (main.css), which drifts apart at fractional
  sizes. The active (and hovered) one is outlined on those shared lines by shadows: left and top outside, right and
  bottom are its own border.
*/
.gen-page .btn-group {
  padding: 0;
  border-left: 1px solid rgb(28, 28, 28);
  border-top: 1px solid rgb(28, 28, 28);
}

.gen-page .btn {
  margin: 0;
}

.gen-page .btn button {
  border-width: 0 1px 1px 0;
  border-style: solid;
  border-color: rgb(28, 28, 28);
}

.gen-page .btn button.active {
  box-shadow: -1px 0 0 0 var(--accent), 0 -1px 0 0 var(--accent), -1px -1px 0 0 var(--accent);
}

.gen-page .btn button:not([disabled]):not(.active):hover {
  box-shadow: -1px 0 0 0 var(--white), 0 -1px 0 0 var(--white), -1px -1px 0 0 var(--white);
}

/* the rows of setup tabs share the line between them */
.gen-page .guide-setup-subtabs {
  border-top: none;
  margin-top: -0.5em;
}

/* ---------- the blocks: the settings, then what they make - generated live ---------- */

#config-generator {
  border: none;
  background: none;
}

.gen-step {
  margin: 0 0 1.2em;
  border: 1px solid var(--line);
  background: var(--panel);
}

.gen-step[hidden] {
  display: none;
}

.gen-step-head {
  padding: 0.8em 1.2em 0.3em;
}

.gen-step-title {
  font-size: 1.25em;
  color: var(--bright);
}

.gen-step-title code {
  font-family: var(--mono);
  color: var(--orange);
}

.gen-step-body {
  padding: 0 1.2em 0.6em;
}

/* the form brings its own padding */
.gen-step-body > form {
  display: block;
  margin: 0 -1.2em;
}

/* what the settings make: an accent on the left, live */
.gen-step.generated {
  border-left: 2px solid var(--accent);
}

/* the block has the accent line - its code doesn't need its own */
.gen-step.generated .guide-code {
  border-left: 1px solid var(--line-dim);
}

.gen-step.generated .gen-step-title {
  color: var(--accent);
}

/* the line between the settings and what they make */
.gen-generated-line {
  display: flex;
  align-items: center;
  gap: 1em;
  margin: 1.8em 0 1.4em;
  color: var(--dim);
  font-size: 1.05em;
}

.gen-generated-line::before,
.gen-generated-line::after {
  content: "";
  flex: 1 1 0;
  border-top: 1px dashed var(--line);
}

.gen-generated-line i {
  margin: 0 0.7em;
  color: var(--accent);
}

/* YOUR CONFIGS in gold between two golden arrows, how they're made under it in grey */
.gen-generated {
  margin: 1.8em 0 1.4em;
}

.gen-generated .gen-generated-line {
  margin: 0;
}

.gen-generated-line span {
  color: var(--accent);
  font-size: 1.15em;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.gen-generated-sub {
  margin-top: 0.2em;
  color: var(--dim);
  text-align: center;
}

.gen-result {
  margin-bottom: 0.4em;
}

/* the method's tabs under the "Generated" line - on their own, not under the purpose's tabs */
#config-generator .guide-setup-subtabs {
  margin: 0 0 1.2em;
  border-top: 1px solid rgb(28, 28, 28);
}

/* the form, without a title */
.gen-step.untitled .gen-step-body {
  padding-top: 0.6em;
}

/* ---------- sliders: Slots, Server instances ---------- */

.gen-slider-row {
  display: flex;
  align-items: center;
  gap: 1em;
}

.gen-slider {
  flex: 1;
  height: 1.6em;
  margin: 0;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.gen-slider::-webkit-slider-runnable-track {
  height: 4px;
  background: linear-gradient(to right, var(--accent) var(--fill), var(--line) var(--fill));
}

.gen-slider::-moz-range-track {
  height: 4px;
  background: var(--line);
}

.gen-slider::-moz-range-progress {
  height: 4px;
  background: var(--accent);
}

.gen-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 18px;
  margin-top: -7px;
  background: var(--accent);
  border: 1px solid var(--panel);
}

.gen-slider::-moz-range-thumb {
  width: 12px;
  height: 18px;
  border-radius: 0;
  background: var(--accent);
  border: 1px solid var(--panel);
}

.gen-slider:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 2px;
}

.gen-slider-value {
  min-width: 1.6em;
  text-align: right;
  font-family: var(--mono);
  color: var(--accent);
  font-size: 1.1em;
}

/* ---------- Map cycle: chips in its order, the other arenas under them ---------- */

.gen-cycle-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  /* room for two rows of chips from the start - adding one never moves what's under it:
     2 chips of 28px, the gap, the padding and the border (border-box) */
  min-height: calc(2 * 28px + 6px + 2 * 6px + 2 * 1px);
  padding: 6px;
  border: 1px solid var(--line);
  background: #000;
}

.gen-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 4px 3px 8px;
  border: 1px solid var(--accent);
  background: rgba(255, 176, 64, 0.08);
  color: var(--white);
  font-family: var(--mono);
  font-size: 0.85em;
  cursor: grab;
  user-select: none;
}

.gen-chip.dragging {
  opacity: 0.35;
}

.gen-chip-no {
  color: var(--accent);
  font-size: 0.85em;
}

#config-generator .gen-chip-remove {
  flex: none;
  width: auto;
  margin: 0;
  padding: 0 3px;
  border: 0;
  background: none;
  color: var(--dim);
  font-size: 1em;
  line-height: 1;
  cursor: pointer;
}

#config-generator .gen-chip-remove:hover {
  color: var(--white);
}

.gen-cycle-empty {
  align-self: center;
  color: var(--faint);
  font-size: 0.85em;
}

.gen-cycle-pool {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  /* the maps to add in a box of their own */
  padding: 6px;
  border: 1px dashed var(--line);
}

/* chosen: out of the pool, the rest close up */
#config-generator .gen-pool-chip.taken {
  display: none;
}

#config-generator .gen-pool-chip {
  flex: none;
  width: auto;
  margin: 0;
  padding: 3px 8px;
  border: 1px dashed var(--line);
  background: none;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 0.85em;
  cursor: pointer;
}

#config-generator .gen-pool-chip.official {
  color: var(--bright);
}

#config-generator .gen-pool-chip:hover {
  color: var(--white);
  border-color: var(--white);
}

.gen-pool-chip i {
  margin-right: 4px;
  font-size: 0.75em;
}

.gen-random-option {
  margin-top: 6px;
}

/* ---------- the persistent server's settings: one table, a label on the left, one control on the right ---------- */

#config-generator .gen-server-form {
  --h: 32px;
  margin: 0 0 1.4em;
}

.gen-table {
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--panel);
}

.gen-table-advanced {
  border-top: 0;
}

.gen-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  border-bottom: 1px solid var(--line);
}

.gen-row[hidden] {
  display: none;
}

/* one cell across the table, no line between the columns */
.gen-row-intro {
  display: block;
  padding: 10px 14px;
  text-align: center;
  font-style: italic;
  font-size: 15px;
  color: var(--faint);
}

/* the label's cell runs down along an open editor - one unbroken line between the columns */
.gen-row-name {
  grid-row: 1 / 3;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: calc(var(--h) + 14px);
  padding: 0 14px;
  border-right: 1px solid var(--line-dim);
  color: var(--bright);
  font-size: 0.95em;
}

.gen-row.open .gen-row-name {
  /* still down the whole row, its text level with the first line - the (?) on the text's baseline */
  align-items: baseline;
  padding-top: 7px;
  line-height: var(--h);
}

.gen-row-help {
  color: var(--faint);
  font-size: 0.8em;
  cursor: help;
}

.gen-row-help:hover,
.gen-row-help:focus {
  color: var(--accent);
  outline: none;
}

.gen-row-ctl {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: calc(var(--h) + 14px);
  padding: 7px 12px;
  box-sizing: border-box;
}

.gen-row-editor {
  display: none;
  grid-row: 2;
  grid-column: 2;
  padding: 0 12px 12px;
}

.gen-row.open .gen-row-editor {
  display: block;
}

/* one height for every control, so all rows line up */
#config-generator .gen-table input,
#config-generator .gen-table select,
#config-generator .gen-table button,
#config-generator .gen-table label {
  margin: 0;
  box-sizing: border-box;
}

#config-generator .gen-table input[type='text'],
#config-generator .gen-table input[type='number'],
#config-generator .gen-table select {
  width: 100%;
  height: var(--h);
  padding: 0 8px;
  background: #000;
  color: var(--bright);
  border: 1px solid var(--line-dim);
  font-size: 0.9em;
}

#config-generator .gen-table input:focus,
#config-generator .gen-table select:focus {
  outline: none;
  border-color: var(--accent);
}

#config-generator .gen-table input[hidden] {
  display: none;
}

#config-generator .gen-table select.gen-hour {
  width: 7em;
}

/* sliders: half the row */
.gen-table .gen-slider-row {
  width: 50%;
  min-width: 220px;
  height: var(--h);
}

.gen-table .gen-slider-value {
  min-width: 1.4em;
  text-align: left;
}

/* a switch */
#config-generator .gen-switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: none;
  height: var(--h);
  padding: 0;
  color: var(--text);
  font-size: 0.9em;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

#config-generator .gen-switch input {
  display: none;
}

/* after a paste with secrets: where they went */
.gen-profile-applied .gen-secure {
  margin-right: 0.35em;
  color: var(--online);
}

.gen-profile-applied .gen-kept {
  margin-right: 0.35em;
  color: var(--accent);
}

.gen-switch-track {
  position: relative;
  flex: none;
  width: 36px;
  height: 18px;
  border: 1px solid var(--line);
  box-sizing: border-box;
}

.gen-switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 10px;
  height: 10px;
  background: var(--dim);
  transition: left 0.12s;
}

.gen-switch input:checked + .gen-switch-track {
  border-color: var(--accent);
}

.gen-switch input:checked + .gen-switch-track::after {
  left: 21px;
  background: var(--accent);
}

.gen-switch-note {
  color: var(--faint);
}

.gen-switch-note a {
  color: var(--link);
}

#config-generator .gen-random-option {
  margin-top: 8px;
}

#config-generator .gen-random-option[hidden] {
  display: none;
}

/* a folded value: what is set, in one line */
#config-generator .gen-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  width: 100%;
  height: var(--h);
  padding: 0 8px;
  background: none;
  border: 1px solid transparent;
  color: var(--bright);
  font-size: 0.9em;
  text-align: left;
  cursor: pointer;
}

#config-generator .gen-summary:hover,
.gen-row.open .gen-summary {
  border-color: var(--line-dim);
}

.gen-summary-value {
  flex: 1;
  overflow: hidden;
  font-family: var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gen-summary-tag {
  margin-left: 8px;
  color: var(--faint);
  font-family: var(--font);
  font-size: 0.9em;
}

.gen-summary-default {
  color: var(--faint);
  font-size: 0.85em;
}

.gen-summary > i {
  color: var(--dim);
  transition: transform 0.12s;
}

.gen-row.open .gen-summary > i {
  transform: rotate(180deg);
  color: var(--accent);
}

#config-generator .gen-reset {
  display: block;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--link);
  font-size: 0.85em;
  cursor: pointer;
}

#config-generator .gen-reset[hidden] {
  display: none;
}

/* the ports' editor */
.gen-ports {
  display: grid;
  grid-template-columns: 7em 7em;
  gap: 6px 10px;
  align-items: center;
}

.gen-ports-head {
  color: var(--faint);
  font-size: 0.8em;
}

.gen-ports-head i {
  margin-right: 5px;
}

/* the admin's wrong id, under the row */
.gen-row-note .gen-hint {
  margin: 0;
}

#config-generator .gen-table-toggle {
  display: block;
  width: 100%;
  margin: 0;
  padding: 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 0;
  color: var(--dim);
  font-size: 0.85em;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}

#config-generator .gen-table-toggle:hover {
  color: var(--white);
}

#config-generator .gen-table-advanced[hidden] {
  display: none;
}

@media (max-width: 600px) {
  .gen-row {
    grid-template-columns: 1fr;
  }

  .gen-row-name,
  .gen-row-ctl,
  .gen-row-editor {
    grid-row: auto;
    grid-column: 1;
  }

  .gen-row-name {
    min-height: 0;
    padding-top: 8px;
    border-right: 0;
    color: var(--dim);
    font-size: 0.85em;
  }
}

/* the settings' table is its own box - no step frame around it */
.gen-step.untitled {
  padding: 0;
  border: 0;
  background: none;
}

.gen-step.untitled .gen-step-body {
  padding: 0;
}

/* as wide as the tabs and the generated blocks */
.gen-step.untitled .gen-step-body > form {
  margin: 0;
}

/* round 1 next to the players' slider */
.gen-row-ctl .gen-field-text {
  margin: 0;
  color: var(--faint);
  font-size: 0.85em;
  white-space: nowrap;
}

#config-generator .gen-table textarea {
  width: 100%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  background: #000;
  color: var(--bright);
  border: 1px solid var(--line-dim);
  font-family: var(--mono);
  font-size: 0.85em;
}

.gen-row-editor .gen-field-text {
  margin: 6px 0 0;
  color: var(--faint);
  font-size: 0.85em;
}

.gen-row-editor .gen-rounds {
  margin: 0;
}

/* typed, not clicked through */
#config-generator .gen-table input[type='number'] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#config-generator .gen-table input[type='number']::-webkit-inner-spin-button,
#config-generator .gen-table input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---------- one font everywhere: the page's, at the page's size ---------- */

#config-generator button,
#config-generator input,
#config-generator select,
#config-generator textarea {
  font-family: inherit;
}

.gen-row-name,
#config-generator .gen-table input[type='text'],
#config-generator .gen-table input[type='number'],
#config-generator .gen-table select,
#config-generator .gen-summary,
#config-generator .gen-switch,
.gen-switch-note,
.gen-row-editor .gen-field-text,
.gen-row-ctl .gen-field-text {
  font-size: 1em;
}

.gen-summary-value,
.gen-chip,
#config-generator .gen-pool-chip {
  font-size: 1em;
}

.gen-switch-label {
  color: var(--bright);
}

.gen-summary-default,
.gen-summary-tag,
.gen-ports-head,
#config-generator .gen-reset {
  font-size: 0.9em;
}

/* as the buttons under everything (Save complete instructions...) */
#config-generator .gen-table-toggle {
  padding: 10px;
  font-size: 1em;
  letter-spacing: normal;
}

/* a control wrapped in its own box (the time zone with its list) takes the row */
.gen-row-ctl > div:not(.gen-slider-row) {
  flex: 1;
  min-width: 0;
}

/* a folded value starts at the same line as the other controls - no frame of its own, it lights up instead */
#config-generator .gen-summary {
  padding: 0;
  border: 0;
}

#config-generator .gen-summary:hover .gen-summary-value {
  color: var(--white);
}

#config-generator .gen-summary:hover i {
  color: var(--accent);
}

/* the settings' names: a bit bigger - the column has the room */
.gen-row-name {
  font-size: 15px;
}

/* our tooltips: the (?) and every button's title - at once on hover or focus (a tap on a phone) */
.gen-tooltip {
  position: absolute;
  z-index: 50;
  max-width: 320px;
  padding: 8px 10px;
  background: #000;
  border: 1px solid var(--accent);
  color: var(--bright);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  pointer-events: none;
}

.gen-tooltip[hidden] {
  display: none;
}

/* the hints, the notes and the placeholders: grey, but easy to read */
body.gen-page {
  --faint: rgb(135, 135, 135);
  --dim: rgb(160, 160, 160);
}

#config-generator input::placeholder,
#config-generator textarea::placeholder {
  color: var(--faint);
  opacity: 1;
}

/* under the map cycle: the catalogue, and back to the default */
.gen-cycle-links {
  display: flex;
  align-items: baseline;
  gap: 18px;
  margin-top: 8px;
}

.gen-cycle-links #config-generator .gen-reset,
#config-generator .gen-cycle-links .gen-reset {
  margin-top: 0;
}

/* after a link that opens in a new tab */
.gen-ext {
  margin-left: 4px;
  font-size: 0.75em;
}

.gen-browse {
  color: var(--link);
  font-size: 0.9em;
}

.gen-browse i {
  margin-right: 5px;
  font-size: 0.85em;
}

#config-generator .gen-cycle-links .gen-reset {
  display: inline;
  flex: none;
  width: auto;
}

/* the title in its own dark box, the tagline under it */
.gen-title-box {
  margin: 0 0 1.2em;
  padding: 1.1em 1em 0.9em;
  /* no background - the tabs under it stand out; dashed, as the line over YOUR CONFIGS */
  border: 1px dashed var(--line);
  text-align: center;
  position: relative;
}

/* the generator's own version, small in the box's bottom right corner */
.gen-version {
  position: absolute;
  right: 0.7em;
  bottom: 0.45em;
  font-size: 0.75em;
  color: var(--dim);
  opacity: 0.7;
}

.gen-page-main .gen-title-box h1.guide-title {
  margin: 0;
}

.gen-tagline {
  margin: 0.35em 0 0;
  color: var(--dim);
  font-style: italic;
}

/* Copy a link to this profile: under the settings, over YOUR CONFIGS, centered, longer than the buttons around */
.gen-link-row {
  display: flex;
  justify-content: center;
  margin: 1.6em 0 0;
}

#config-generator .gen-link-button,
.gen-profile-links .gen-link-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  flex: none;
  width: auto;
  min-width: 55%;
  margin: 0;
  padding: 10px 24px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--bright);
  font-size: 1em;
  text-transform: uppercase;
  cursor: pointer;
}

/* quiet until pointed at - as the other buttons */
#config-generator .gen-link-button:hover,
.gen-profile-links .gen-link-button:hover {
  color: var(--accent);
  border-color: var(--accent);
}

#config-generator .gen-link-button.copied,
.gen-profile-links .gen-link-button.copied {
  color: var(--online);
  border-color: var(--online);
}

/* the game, the browser players and a tournament's results page - one column each */
.gen-ports {
  grid-template-columns: repeat(2, max-content);
}

.gen-ports.with-page {
  grid-template-columns: repeat(3, max-content);
}

.gen-ports input {
  width: 9em !important;
}

/* the game's port other than the default, under the ports */
.gen-port-warning {
  grid-column: 1 / -1;
  /* wraps within the ports' columns - never widens them */
  contain: inline-size;
  margin: 0;
  color: var(--faint);
  font-size: 0.85em;
}

/* the server list off: its warning right of the switch */
.gen-server-list-warning {
  flex: 1;
  min-width: 0;
}

.gen-server-list-warning[hidden] {
  display: none;
}

.gen-port-warning i {
  margin-right: 0.35em;
  color: var(--accent);
}

/* a click anywhere on a chip removes its arena */
.gen-chip {
  cursor: pointer;
}

.gen-chip:hover {
  border-color: var(--white);
}

.gen-chip:hover .gen-chip-remove {
  color: var(--white);
}

/* a setting that changes nothing as the others are set - Join password with the players verified by their accounts */
.gen-row.gen-row-disabled .gen-row-name,
.gen-row.gen-row-disabled .gen-switch {
  opacity: 0.4;
}

.gen-row.gen-row-disabled .gen-switch {
  pointer-events: none;
}

#config-generator .gen-table input.gen-invalid,
#config-generator .gen-table textarea.gen-invalid {
  border-color: var(--red);
}

.gen-account-id-image {
  margin: 0.6em 0 0.8em;
  max-width: 360px;
  /* grey in the file itself (the red frame stays red), darker than the other pictures - a lighter border keeps its edge */
  border-color: rgb(95, 95, 95);
  filter: brightness(0.45);
}

.gen-account-id-image:hover {
  filter: none;
}

.gen-account-id-image[hidden] {
  display: none;
}

/* "Insecure, but enough for a LAN." over the rest of the explanation, no gap */
.gen-row-editor .gen-field-text + .gen-field-text {
  margin-top: 0;
}

/* who gets in: secure or not, an icon on the left */
.gen-security i {
  margin-right: 0.35em;
}

.gen-security .gen-secure {
  color: var(--online);
}

/* a line apart from the text over it */
.gen-row-editor .gen-field-text.gen-after-gap {
  margin-top: 1.4em;
}

.gen-tooltip code {
  /* a path or a key never broken inside */
  white-space: nowrap;
  font-family: var(--mono);
  color: var(--orange);
}

/* anything wrong in the settings: nothing generated to copy, the errors in its place */
#config-generator.gen-has-errors .guide-setup-subtabs,
#config-generator.gen-has-errors .gen-step.generated,
#config-generator.gen-has-errors .gen-check-step {
  display: none !important;
}

.gen-errors {
  margin: 0.4em 0 1.4em;
  padding: 1.2em 1.4em;
  border: 2px solid var(--red);
  background: rgba(244, 71, 71, 0.06);
}

.gen-errors[hidden] {
  display: none;
}

.gen-errors-title {
  color: var(--red);
  font-size: 1.4em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.gen-errors-title i {
  margin-right: 0.5em;
}

.gen-errors ul {
  margin: 0.8em 0 0;
  padding-left: 1.4em;
  color: var(--bright);
}

.gen-errors li {
  margin: 0.3em 0;
}

/* as Results next to a tournament's match on /servers (.sv-tag) */
.gen-results-tag {
  color: var(--faint);
  white-space: nowrap;
}

/* the game's logo in the place of "Hypersomnia" */
.gen-page-main h1.guide-title {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25em 0.5em;
}

/* Bots: the switch, then its difficulty and number under it */
.gen-bots {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}

.gen-bots-details {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
  padding-left: 0.2em;
}

.gen-bots-details[hidden] {
  display: none;
}

.gen-bots-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6em 1em;
}

.gen-bots-label {
  min-width: 6em;
  color: var(--dim);
}

.gen-bots-line .gen-slider-row[hidden] {
  display: none;
}

/* Listed players as chips: in the teams' boxes, or one box - the map cycle's chips, a click edits */
.gen-roster {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.gen-roster[hidden] {
  display: none;
}

.gen-roster-team {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 2.6em;
  padding: 6px;
  border: 1px solid var(--line);
  background: #000;
}

#config-generator button.gen-chip {
  padding: 3px 8px;
  line-height: 1.4;
}

.gen-chip.gen-bad .gen-chip-name {
  color: var(--red);
}

.gen-chip-ok {
  color: rgb(34, 197, 76);
  font-size: 0.8em;
}

.gen-chip-missing {
  color: var(--red);
  font-size: 0.8em;
}

.gen-roster-label {
  color: var(--dim);
}

.gen-roster-label[hidden] {
  display: none;
}

.gen-roster-hint {
  color: var(--faint);
  font-size: 0.9em;
}

/* the bots' difficulty: as wide as its longest name, next to its label */
#config-generator .gen-bots-line select {
  flex: none;
  width: auto;
  min-width: 12em;
}

.gen-bots-line .gen-slider-row {
  flex: 1;
  min-width: 12em;
}

.gen-roster-vs {
  color: var(--dim);
  font-family: var(--mono);
}

.gen-roster-vs.gen-roster-bye {
  color: var(--faint);
  justify-self: start;
}

/* the tiles in a darker block of their own, the text box over it */
.gen-roster-board {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line-dim);
  background: rgba(0, 0, 0, 0.55);
}

/* a line is a team: long lines scroll instead of wrapping into what looks like another team */
.gen-roster-text {
  white-space: pre;
  overflow-x: auto;
}

/* where a dragged player or team lands */
.gen-roster-team.gen-drop {
  outline: 1px dashed var(--accent);
  outline-offset: 3px;
}

/* opposite a bye: an empty place, seen only when something is dragged over it */
.gen-roster-bye-slot {
  align-self: stretch;
  min-height: 2em;
  border: 1px dashed transparent;
}

.gen-roster-bye-slot.gen-drop {
  border-color: var(--accent);
  background: rgba(255, 176, 64, 0.06);
}

/* the chosen chip's editor floats under it, over the tiles - opening it moves nothing */
.gen-roster-board {
  position: relative;
}

/* ---------- Match cards: a row per match of round 1, a team's places stacked ---------- */
.gen-roster-board {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gen-roster-match {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr) 2em minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid var(--line-dim);
  background: #000;
}

.gen-roster-match-name {
  color: var(--faint);
  font-size: 0.85em;
}

.gen-roster-match .gen-roster-vs {
  text-align: center;
  color: var(--dim);
  font-family: var(--mono);
}

.gen-roster-team2 {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid transparent;
}

.gen-roster-team2.gen-drop {
  border-color: var(--accent);
}

.gen-roster-handle {
  color: var(--faint);
  cursor: grab;
  opacity: 0.35;
  padding: 0 2px;
}

.gen-roster-team2:hover .gen-roster-handle {
  opacity: 1;
}

.gen-roster-places {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

/* a clan server's listed players: one under another */
.gen-roster-board.single .gen-roster-places {
  max-width: 24em;
}

/* a place: a player's chip, an empty place, or the text box typing into one - all the same box */
#config-generator .gen-roster-place {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-sizing: border-box;
  flex: none;
  width: 190px;
  max-width: 100%;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: rgb(220, 220, 220);
  font-family: var(--mono);
  font-size: 0.9em;
  line-height: 26px;
  text-align: left;
  cursor: pointer;
}

#config-generator .gen-roster-place .gen-chip-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#config-generator .gen-roster-place.filled:hover {
  border-color: var(--accent);
  background: rgba(255, 176, 64, 0.08);
  color: var(--white);
}

#config-generator .gen-roster-place.empty {
  justify-content: center;
  border-style: dashed;
  background: none;
  color: var(--faint);
}

#config-generator .gen-roster-place.empty:hover {
  border-color: var(--accent);
  color: var(--white);
}

#config-generator .gen-roster-place.editing {
  border-color: var(--accent);
  background: #000;
  color: var(--white);
  cursor: text;
}

#config-generator .gen-roster-place.gen-drop {
  border-color: var(--accent);
  background: rgba(255, 176, 64, 0.15);
  color: var(--white);
}

#config-generator .gen-roster-place.gen-bad .gen-chip-name {
  color: var(--red);
}

.gen-roster-x {
  color: var(--faint);
  opacity: 0;
}

.gen-roster-place.filled:hover .gen-roster-x {
  opacity: 1;
}

.gen-roster-x:hover {
  color: var(--red);
}

/* a bye: the other half empty - a team dropped there plays this one */
.gen-roster-bye-slot {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dashed transparent;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 0.85em;
}

.gen-roster-bye-slot.gen-drop {
  border-color: var(--accent);
  background: rgba(255, 176, 64, 0.06);
}

#config-generator .gen-roster-new-match {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  width: auto;
  margin: 0;
  padding: 4px 12px;
  border: 1px dashed var(--line);
  background: none;
  color: var(--faint);
  cursor: pointer;
}

#config-generator .gen-roster-new-match:hover {
  border-color: var(--accent);
  color: var(--white);
}

.gen-roster-label-text {
  margin-bottom: 4px;
}

/* the text box typing into a place: exactly the place's box, over the generator's own input style */
#config-generator input.gen-roster-place[type="text"] {
  box-sizing: border-box;
  width: 190px;
  height: 28px;
  min-height: 0;
  margin: 0;
  padding: 0 8px;
  font-size: 0.9em;
  line-height: 26px;
}

.gen-roster-bye-slot.gen-drop::after {
  content: "play this one";
}

.gen-roster-match.pending {
  border-style: dashed;
}

/* "Show example payload" - a link-like button next to the setting */
#config-generator .gen-payload-button {
  flex: none;
  padding: 0;
  background: none;
  border: 0;
  color: var(--link);
  font-size: 0.85em;
  white-space: nowrap;
  cursor: pointer;
}

#config-generator .gen-payload-button:hover {
  text-decoration: underline;
}

/* the example JSON over the page - Escape, the X or a click outside closes it */
.gen-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.75);
}

.gen-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  /* always this tall - folding the JSON never moves it */
  height: calc(100vh - 32px);
  padding: 18px 20px 20px;
  box-sizing: border-box;
  background: var(--panel);
  border: 1px solid var(--accent);
}

.gen-modal h3 {
  margin: 0 0 8px;
  font-size: 1.4em;
  color: var(--accent);
}

.gen-modal-subtitle {
  margin: 22px 0 4px;
  font-size: 1.2em;
  color: var(--accent);
}

.gen-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 4px 6px;
  background: none;
  border: 0;
  color: var(--dim);
  font-size: 1.1em;
  cursor: pointer;
}

.gen-modal-close:hover {
  color: var(--white);
}

.gen-modal-code {
  min-height: 0;
  overflow: auto;
}

.gen-modal-code .guide-code {
  margin: 0;
  /* the modal has the gold frame already */
  border-left: 1px solid var(--line-dim);
}

.gen-modal-code .gen-field-text {
  margin: 14px 0 8px;
}

/* a folded part of the example JSON - a click shows it */
#config-generator .gen-json-fold {
  padding: 0 4px;
  background: none;
  border: 1px dashed var(--line);
  color: var(--link);
  font: inherit;
  cursor: pointer;
}

#config-generator .gen-json-fold:hover {
  border-color: var(--link);
}

/* step by step or one script - under the setup's tabs */
.gen-mode-tabs {
  margin: 0 0 1.2em;
}

.gen-mode-tabs .btn {
  flex: 1 1 0;
}

.gen-mode-tabs button {
  font-size: 1.1em;
  padding: 8px 12px;
  gap: 0.55em;
}

/* the steps hidden while the script is shown - their own hidden stays theirs */
.gen-step.gen-mode-off {
  display: none;
}

#config-generator.gen-has-errors .gen-mode-tabs {
  display: none;
}

.gen-script-options {
  display: grid;
  gap: 0.6em;
  margin-bottom: 0.8em;
}

/* the switches moved in from the steps keep their own margins there - here the grid's gap only */
.gen-script-options > * {
  margin: 0;
}

/* a label, its combo box and a note: the service, the script's firewall */
.gen-select-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.8em;
}

.gen-select-row[hidden] {
  display: none;
}

.gen-select-row select {
  /* the combo boxes as wide as each other - the firewall's longest option whole */
  width: 17em;
  max-width: 100%;
  /* the page's selects keep a margin under them - here the label beside it stays centered */
  margin: 0;
}

/* in the setup commands: under it the code, as the switches there */
.gen-before-box > .gen-select-row {
  margin-bottom: 0.8em;
}

.gen-select-row > span:first-child {
  color: var(--bright);
}

/* the labels as wide as the longest - the combo boxes start in one line */
.gen-select-row > span:first-child {
  min-width: 5.8em;
}

/* Back to default, under the server list's address */
.gen-small-button {
  margin-top: 0.5em;
  padding: 3px 10px;
  font-size: 0.85em;
  color: var(--faint);
  background: none;
  border: 1px solid var(--line);
  cursor: pointer;
}

.gen-small-button:hover {
  color: var(--bright);
  border-color: var(--accent);
}

.gen-small-button[hidden] {
  display: none;
}

.gen-small-button i {
  margin-right: 0.45em;
}

/* a screenshot behind a button, under its text */
.gen-shot-row {
  margin: 0.2em 0 0.8em;
}

.gen-shot-row[hidden] {
  display: none;
}

.gen-shot-button i {
  margin-right: 0.45em;
}

/* the screenshot in its modal: whole, at most as wide as the modal - always as bright as on hover, in a light grey frame */
.gen-modal .gen-account-id-image,
.gen-modal .gen-account-id-image:hover {
  max-width: 100%;
  filter: none;
  border-color: rgb(150, 150, 150);
  box-shadow: none;
}

/* a screenshot's modal: as tall as what's in it, its frame grey - it doesn't shine */
.gen-modal.gen-modal-fit {
  height: auto;
  border-color: var(--line);
}

/* the after-launch steps: folded, their title opens them - folded, no golden frame, the title as it is */
.gen-step.gen-foldable .gen-step-head {
  cursor: pointer;
  user-select: none;
}

.gen-step.gen-foldable:not(.open) {
  border-left: 1px solid var(--line);
  padding-left: 1px;
}

.gen-step.gen-foldable:not(.open) .gen-step-head {
  padding-bottom: 0.8em;
}

.gen-step.gen-foldable:not(.open) .gen-step-body {
  display: none;
}

/* folded, its title as Check that it works' - golden only once opened */
.gen-step.generated.gen-foldable:not(.open) .gen-step-title {
  color: var(--bright);
}

/* the folds one under another as a table's rows: no gap, one line between them */
.gen-step.gen-foldable:has(+ .gen-step.gen-foldable) {
  margin-bottom: 0;
}

.gen-step.gen-foldable + .gen-step.gen-foldable {
  margin-top: -1px;
}

.gen-fold-chevron {
  /* a box of its own: › and ⌄ are glyphs of other sizes - the title never moves when they swap */
  display: inline-block;
  text-align: center;
  line-height: 1;
  width: 1em;
  margin-right: 0.5em;
  font-size: 0.75em;
  color: var(--faint);
  /* a small glyph on the title's baseline sits low - up to the middle of its capitals */
  vertical-align: 0.25em;
}

/* the profile's tile: the box in it, then its buttons - dashed and black, apart from the steps */
.gen-profile-box {
  margin: 2em 0 0;
  border-style: dashed;
  background: #000;
}

.gen-profile-box .gen-step-body {
  display: grid;
  gap: 0.6em;
  padding-bottom: 1.2em;
}

/* a long line in the profile (an account id) scrolls inside its box - never widens the tile and pushes its buttons out */
.gen-profile-box .gen-step-body > * {
  min-width: 0;
}

.gen-profile-box .gen-profile-sub {
  margin: 0;
}

.gen-profile-box .gen-profile-bar {
  margin: 0;
}

.gen-json-editor {
  margin: 0;
}

.gen-json-editor.gen-bad {
  border-color: var(--red);
}

.gen-json-editor .gen-json-pre,
.gen-json-editor .gen-json-text {
  margin: 0;
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 0.85em;
  line-height: 1.5;
  white-space: pre;
  tab-size: 2;
  box-sizing: border-box;
}

.gen-json-editor .gen-json-pre {
  min-height: 5.5em;
  max-height: 24em;
  overflow: hidden;
}

/* the copy's text exactly where the box's is - the code boxes' own size and line height don't apply */
.gen-json-editor .gen-json-pre code {
  font: inherit;
  line-height: inherit;
  padding: 0;
  background: none;
}

#config-generator .gen-json-editor .gen-json-text,
.gen-json-editor .gen-json-text {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: transparent;
  caret-color: var(--bright);
  background: transparent;
  border: none;
  outline: none;
  resize: none;
  overflow: auto;
}

.gen-json-error {
  margin: 0;
  color: var(--red);
}

.gen-json-error[hidden] {
  display: none;
}

/* the page's inputs glow when focused - the profile's box doesn't */
#config-generator .gen-json-editor .gen-json-text:focus,
.gen-json-editor .gen-json-text:focus {
  box-shadow: none;
  outline: none;
  border: none;
}

/* while it's typed in: its frame lighter - the accent on the left as it is */
.gen-json-editor:focus-within:not(.gen-bad) {
  border-top-color: rgb(120, 120, 120);
  border-right-color: rgb(120, 120, 120);
  border-bottom-color: rgb(120, 120, 120);
}

/* the copy button over the see-through box */
.gen-json-editor .guide-copy {
  z-index: 1;
}

/* under the profile's bar: the link and the instructions side by side */
.gen-profile-links {
  gap: 0.8em;
  flex-wrap: wrap;
  margin: 1em 0 0;
}

/* the contents, on the left where the page has room for it */
.gen-toc {
  display: none;
}

@media (min-width: 1240px) {
  .gen-toc {
    position: fixed;
    top: 90px;
    left: max(12px, calc((100vw - 800px) / 2 - 230px));
    width: 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    /* as the settings' labels */
    font-size: 15px;
    border-left: 1px solid var(--line);
  }

  .gen-toc a {
    padding: 4px 10px;
    color: var(--faint);
    text-decoration: none;
    border-left: 2px solid transparent;
    margin-left: -1px;
    line-height: 1.3;
  }

  .gen-toc a:hover {
    color: var(--bright);
  }

  .gen-toc a.active {
    color: var(--accent);
    border-left-color: var(--accent);
  }
}

/* in the profile's tile, under its bar */
.gen-profile-box .gen-profile-links {
  margin: 0.4em 0 0;
}

/* with secrets or without (the instructions): as tall as what's in it, its two buttons side by side */
.gen-modal.gen-modal-fit:has(.gen-secrets-buttons) {
  border-color: var(--accent);
}

.gen-secrets-buttons {
  gap: 1em;
  margin-top: 1em;
}

#config-generator .gen-secrets-list {
  margin: 0 0 0.4em;
  padding-left: 1.4em;
}

#config-generator .gen-secrets-buttons .gen-link-button {
  flex: 1;
  min-width: 0;
}

/* the one that lets the secrets out: red, more so when pointed at */
#config-generator .gen-secrets-buttons .gen-with-secrets {
  color: var(--red);
  border-color: rgba(244, 71, 71, 0.5);
}

#config-generator .gen-secrets-buttons .gen-with-secrets:hover {
  color: var(--red);
  border-color: var(--red);
}

/* not now: the settings have errors */
#config-generator .gen-link-button:disabled,
.gen-profile-links .gen-link-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Telegram: the bot's token and, short beside it, its channel - one line */
.gen-telegram-channel input {
  width: 13em;
}

/* the map cycle: a map typed in, not on the list */
.gen-custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
  margin-top: 0.6em;
}

#config-generator .gen-table input[type='text'].gen-custom-map {
  flex: none;
  width: 14em;
}

.gen-custom-map-error {
  color: var(--red);
  font-size: 0.9em;
}

/* the game vars: a line each - its name, then its controls */
.gen-game-vars {
  display: grid;
  gap: 0.6em;
}

.gen-sub-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 1em;
}

.gen-sub-label {
  min-width: 7.5em;
  color: var(--text);
}

.gen-sub-label .gen-row-help {
  margin-left: 0.35em;
}

.gen-sub-ctl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em 0.8em;
  flex: 1;
}

.gen-sub-ctl .gen-slider-row {
  flex: none;
  width: 15em;
  max-width: 100%;
}

.gen-original {
  color: var(--online);
  font-size: 0.9em;
  white-space: nowrap;
}

.gen-original i {
  margin-right: 0.35em;
}

/* the custom map field's hint: over it, under Browse the arenas */
.gen-custom-hint {
  margin: 0.6em 0 0;
  font-size: 0.9em;
}

/* the map cycle's two switches: all on disk, in random order - a line each */
.gen-cycle-options {
  display: grid;
  justify-items: start;
  gap: 0.5em;
  margin-bottom: 0.6em;
}

#config-generator .gen-cycle-options .gen-random-option {
  margin: 0;
}

/* "+ Add" among the cycle's chips - a text field in its place while a map is typed */
#config-generator .gen-chip.gen-chip-add {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--text);
  cursor: pointer;
}

#config-generator .gen-chip.gen-chip-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* the same look as the chips to pick from below (gen-pool-chip) */
#config-generator .gen-chip.gen-chip-add {
  gap: 0;
  padding: 3px 8px;
  font-family: var(--mono);
  font-size: 1em;
}

#config-generator .gen-chip.gen-chip-add i {
  margin-right: 4px;
  font-size: 0.75em;
}

#config-generator .gen-chip.gen-chip-adding {
  padding: 0;
  border: 1px solid var(--accent);
}

#config-generator .gen-chip.gen-chip-adding.gen-bad {
  border-color: var(--red);
}

#config-generator .gen-chip-input {
  width: 12em;
  height: auto;
  padding: 0.25em 0.6em;
  background: transparent;
  border: none;
  color: var(--bright);
  font: inherit;
  outline: none;
}

/* "+ Add" as wide as its text - not stretched like the table's buttons */
#config-generator .gen-table .gen-cycle-chips .gen-chip.gen-chip-add,
#config-generator .gen-table .gen-cycle-chips .gen-chip.gen-chip-adding {
  flex: none;
}

/* a tip's **bold** - the line to see first */
.gen-tooltip strong {
  font-weight: 700;
  color: var(--bright);
}

/* the security line (a password, or secure) a blank line apart from the explanation under it */
.gen-row-editor .gen-field-text.gen-security {
  margin-bottom: 1.4em;
  color: var(--bright);
}

/* the Join password field first under the choice, then the gap */
#config-generator .gen-row-editor .gen-t-password-row {
  flex-wrap: nowrap;
  margin-top: 6px;
  margin-bottom: 18px;
}

#config-generator .gen-table .gen-t-password-row input[type='text'].gen-t-password {
  flex: 1;
  min-width: 0;
  margin: 0;
}

/* "No password required" in the field's place, as tall as it - nothing below jumps */
#config-generator .gen-row-editor .gen-t-no-password {
  display: flex;
  align-items: center;
  height: var(--h);
  margin-top: 6px;
  margin-bottom: 18px;
  color: var(--bright);
}

#config-generator .gen-t-no-password[hidden] {
  display: none;
}

/* a flex line drops the space before its (?) */
#config-generator .gen-t-no-password .gen-row-help {
  margin-left: 0.35em;
}

/* "empty: any stranger may participate" over the field - a placeholder can't color only a part; gone once a password is typed */
.gen-t-password-field {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}

#config-generator .gen-table .gen-t-password-field input[type='text'].gen-t-password {
  width: 100%;
}

.gen-t-password-hint {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  color: var(--faint);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  max-width: calc(100% - 18px);
}

.gen-t-password-hint .gen-warn {
  /* white as the page's other key phrases - red reads as an error, orange as what's active */
  color: var(--bright);
}

.gen-t-password:not(:placeholder-shown) + .gen-t-password-hint {
  display: none;
}

/* a round timeout's minutes: narrow - the line next to it says what they mean */
#config-generator .gen-table .gen-row-ctl .gen-timeout-select {
  flex: none;
  width: 9em;
}

#config-generator .gen-table .gen-row-ctl .gen-timeout-select[hidden] {
  display: none;
}

/* a max wait's lines: a sentence each */
.gen-timeout-note {
  white-space: pre-line;
}

/* community maps chosen: the server downloads them at its start (syncDownloadNote) */
.gen-download-note {
  margin: 0.6em 0;
}

.gen-download-note[hidden] {
  display: none;
}

/* information, not a warning: calm */
.gen-port-warning.gen-download-note i {
  color: var(--dim);
}

/* In random order with one map: greyed out, why next to it */
#config-generator .gen-random-option.gen-option-off {
  opacity: 0.45;
  pointer-events: none;
}

.gen-one-map-note {
  margin-left: 0.6em;
  color: var(--faint);
}

.gen-one-map-note[hidden] {
  display: none;
}

/* "Not on hypersomnia.io?" - I will have my own maps right under it */
.gen-own-title {
  margin: 0.8em 0 0.4em;
}

/* a line kept for what may come in it - empty for now, its height stays */
.gen-line-empty {
  visibility: hidden;
}

/* a time to enter's select and its two texts in one grid: on - the text by the select; off - from the switch on, over
   the select's place - the inactive one keeps its room, unseen, so switching changes nothing in the row's height */
.gen-timeout-body {
  display: inline-grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: 12px;
}

.gen-timeout-body > .gen-timeout-select {
  grid-area: 1 / 1;
}

.gen-timeout-body > .gen-timeout-on {
  grid-area: 1 / 2;
}

.gen-timeout-body > .gen-timeout-off {
  grid-area: 1 / 1 / 2 / 3;
}

.gen-timeout-body > .gen-note-inactive {
  visibility: hidden;
}

/* what an admin then has to do - in white */
.gen-note-white {
  color: var(--bright);
}

/* the admin required but switched off - as the other warnings: the icon in the accent */
.gen-admin-required {
  color: var(--bright);
}

.gen-admin-required[hidden] {
  display: none;
}

.gen-admin-required i {
  margin-right: 6px;
  color: var(--accent);
}

/* the custom folder's maps at the cycle's end - not a chip to remove or drag */
#config-generator .gen-chip.gen-chip-custom {
  cursor: default;
  border-style: dashed;
  font-style: italic;
  opacity: 0.85;
}

#config-generator .gen-custom-option {
  margin-top: 10px;
}

/* a round's custom map, typed in the select's place */
#config-generator .gen-round-custom[hidden] {
  display: none;
}

#config-generator .gen-round-custom {
  width: 12em;
}

/* a custom map in the cycle - dashed, as "and all my custom maps" */
#config-generator .gen-chip.gen-chip-own {
  border-style: dashed;
}

/* the folder to upload, as a tree */
#config-generator .gen-maps-tree {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.9em;
  margin: 4px 0 10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--bright);
  white-space: pre;
}

/* the firewall's tabs inside its tile - across its whole width */
#config-generator .gen-firewall-tabs {
  margin: 0 0 0.8em;
}

#config-generator .gen-firewall-tabs button {
  font-size: 1em;
  padding: 6px 10px;
}

/* Maximum players under the join password (only with Anyone): the slider and its round 1 in one line */
#config-generator .gen-row-editor .gen-t-players-row {
  flex-wrap: nowrap;
  align-items: center;
  margin-top: -6px;
  margin-bottom: 18px;
}

#config-generator .gen-t-players-row .gen-row-help {
  margin-left: 0.35em;
}

.gen-t-players-field {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 16px;
}

/* the last words and their (?) never apart */
.gen-nowrap {
  white-space: nowrap;
}

/* the FUSE switch: the (?) a space after its label */
#config-generator .gen-fuse-option .gen-row-help {
  margin-left: 0.35em;
}

/* the AppImage's minimum distros, under its first commands */
.gen-before-box .gen-distro-note {
  margin: 0.6em 0 0;
  font-size: 0.9em;
}