/* ==========================================================================
   IAS suite, hosted CLI reference — site chrome
   --------------------------------------------------------------------------
   Loaded *after* manual.css, which supplies the whole design language (colour
   variables, typography, tables, callouts, cards, light/dark handling). This
   file adds only what a multi-page hosted site needs and a single-file manual
   does not: the top navigation, the per-command header furniture, and the
   command-index filter.

   Everything here reads the variables defined in manual.css — no new colours,
   no hard-coded hex outside a variable fallback, so the two themes keep
   working without this file knowing which one is active.

   Generated pages come from tools/build-cli-docs-site.php. This stylesheet is
   hand-written and is the one file in the output that is not derived from the
   command docblocks.
   ========================================================================== */

/* ---- top navigation ------------------------------------------------------ */

.site-nav {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem;
  margin: 0 0 2.5rem; padding: .75rem 0;
  border-bottom: 1px solid var(--border);
}

.site-nav .brand {
  font: 700 .78rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin-right: .35rem;
}
.site-nav .brand a { color: inherit; }

.site-nav ul {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  margin: 0; padding: 0; list-style: none;
}
.site-nav li { margin: 0; font-size: .86rem; }
.site-nav a[aria-current="page"] { color: var(--fg); font-weight: 600; border-bottom-color: var(--border); }

/* ---- command entries ----------------------------------------------------- */

.cmd { scroll-margin-top: 1rem; }
.cmd h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .7rem; }
.cmd h2 code { background: none; padding: 0; font-size: 1em; word-break: normal; }

/* The anchor link sits inside the heading and only shows on hover, so the
   printed and screenshot forms stay clean. */
.cmd h2 .anchor {
  font: 400 .8rem/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--fg-muted); opacity: 0; border-bottom: 0; transition: opacity .12s;
}
.cmd h2:hover .anchor, .cmd h2 .anchor:focus { opacity: 1; }

.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin: .1rem 0 0; padding: 0; list-style: none; }
.tags li { margin: 0; }

.tag {
  display: inline-block; font: 600 .68rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .12rem .5rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg-alt); color: var(--fg-muted);
  white-space: nowrap;
}
.tag-danger { background: var(--stop-bg); color: var(--stop-fg); border-color: var(--stop-br); }
.tag-write  { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-br); }
.tag-read   { background: var(--tip-bg);  color: var(--tip-fg);  border-color: var(--tip-br); }

/* ---- command index + filter ---------------------------------------------- */

.filter { margin: 1.5rem 0 .5rem; }
.filter label {
  display: block; font: 700 .72rem/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .07em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: .4rem;
}
.filter input {
  width: 100%; max-width: 26rem; padding: .5rem .7rem;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg); color: var(--fg); font: inherit; font-size: .92rem;
}
.filter input:focus { outline: 2px solid var(--link); outline-offset: 1px; }
.filter .count { margin: .5rem 0 0; font-size: .82rem; color: var(--fg-muted); }

table.index td { vertical-align: middle; }
table.index td:first-child { white-space: nowrap; }
table.index tr[hidden] { display: none; }

/* ---- plugin cards on the landing page ------------------------------------ */

.cards .meta {
  margin: .5rem 0 0; font: .78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: var(--fg-muted);
}

@media (max-width: 40rem) {
  .site-nav { margin-bottom: 1.75rem; }
  .cmd h2 { font-size: 1.02rem; }
}

@media print {
  .site-nav, .filter { display: none; }
  .cmd h2 .anchor { display: none; }
}