/* CLI install guide (cli.html), on top of styles.css: command blocks with a
   Copy button, example output, the install sections per system and the
   troubleshooting list. Colours come from the tokens in styles.css, so light
   and dark follow the same switch as every other page. */

.quickstart ol {
  margin: 0;
  padding-left: 1.4em;
}

.quickstart li + li {
  margin-top: 6px;
}

.quickstart p {
  margin: 10px 0 0;
}

.quickstart + .toc {
  margin-top: 16px;
}

/* A command to type: <div class="cmd"><pre><code>...</code></pre></div>.
   cli.js adds the Copy button next to the <pre>. */
.cmd {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 8px 0 14px;
  max-width: 72ch;
}

.cmd pre,
.sample pre {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding: 10px 12px;
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow-x: auto;
  line-height: 1.5;
}

.cmd code,
.sample code {
  background: none;
  padding: 0;
  border-radius: 0;
  overflow-wrap: normal;
}

.cmd .copy {
  flex: none;
  padding: 8px 12px;
  font-size: 0.88rem;
}

/* Example output from the real program. */
.sample {
  margin: 8px 0 16px;
  max-width: 72ch;
}

.sample figcaption {
  color: var(--text-muted);
  font-size: 0.88rem;
  margin: 0 0 4px;
}

.sample pre {
  background: var(--surface-1);
  color: var(--text-secondary);
}

/* One card per operating system. */
.os-sections {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  max-width: 76ch;
}

/* min-width 0 lets a long command scroll inside its block instead of
   widening the card past a phone screen. */
.os-sections .card {
  min-width: 0;
}

.os-sections .card + .card {
  margin-top: 0;
}

.os-sections h3 {
  margin-top: 0;
  font-size: 1.15rem;
}

.os-sections ol {
  padding-left: 1.4em;
}

.os-sections li + li {
  margin-top: 6px;
}

.os-hint {
  margin: 0 0 12px;
  font-weight: 600;
}

.soon {
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 4px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 8px 8px 0;
}

.soon p {
  margin: 0 0 6px;
}

.soon p:last-child {
  margin-bottom: 0;
}

/* Troubleshooting: the message the program prints, then what to do. */
.problem {
  margin: 0 0 12px;
  max-width: 72ch;
}

.problem h3 {
  margin: 0 0 6px;
}

.paths-table {
  width: 100%;
  max-width: 76ch;
  border-collapse: collapse;
  margin: 8px 0 16px;
  font-size: 0.95rem;
}

.paths-table th,
.paths-table td {
  text-align: left;
  vertical-align: top;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.paths-table thead th {
  color: var(--text-secondary);
  font-weight: 600;
}

.commands-table td:first-child {
  white-space: nowrap;
}

@media (max-width: 720px) {
  /* Tables become one block per row on a phone. */
  .paths-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .paths-table tr,
  .paths-table td {
    display: block;
  }

  .paths-table tr {
    border-bottom: 1px solid var(--border);
    padding: 8px 0;
  }

  .paths-table td {
    border-bottom: 0;
    padding: 2px 0;
  }

  .commands-table td:first-child {
    white-space: normal;
  }

  .cmd {
    flex-direction: column;
    align-items: stretch;
  }

  .cmd pre {
    width: 100%;
  }

  .cmd .copy {
    align-self: flex-start;
  }
}