/**
 * /code/ — components that exist only on the Aixgo Code product page.
 *
 * The shared section primitives this page is assembled from live in
 * sections.css. What is left here is the label-lifecycle console, the trigger
 * flow diagram, the permission chips, the trust columns and the install spine:
 * components with exactly one instance on the site.
 *
 * Loaded only on pages with `layout: code` (see layouts/partials/head.html).
 */

.ax-cmdlist {
  list-style: none;
  margin-top: var(--ax-s-4);
  padding: 0;
}

.ax-cmdlist li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-top: 1px solid var(--ax-hairline);
  font-size: var(--ax-t-sm);
  color: var(--ax-text-muted);
}

.ax-cmdlist code {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-xs);
  color: var(--ax-accent);
  white-space: nowrap;
}

/* ==========================================================================
   Label lifecycle — the signature moment
   ========================================================================== */

.ax-lifecycle__intro { max-width: 46rem; }
.ax-lifecycle__intro h2 { margin-top: var(--ax-s-3); }

.ax-consolewrap {
  position: relative;
  margin-top: var(--ax-block-gap);
  background: var(--ax-bg-2);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-xl);
  padding: 8px;
  box-shadow: var(--ax-e-3);
}

.ax-consolewrap .ax-panel {
  background: var(--ax-bg-console);
  border-radius: var(--ax-r-lg);
  padding: 1.5rem;
  overflow: hidden;
}

.ax-lifecycle__head {
  display: grid;
  grid-template-columns: 10rem 1fr 6rem;
  gap: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--ax-hairline);
}

.ax-lifecycle { list-style: none; margin: 0; padding: 0; }

.ax-lifecycle__row {
  display: grid;
  grid-template-columns: 10rem 1fr 6rem;
  gap: 1rem;
  align-items: baseline;
  padding: 0.875rem 0;
  border-top: 1px solid var(--ax-hairline);
}

.ax-lifecycle__row:first-child { border-top: 0; }

.ax-lifecycle__means {
  font-size: var(--ax-t-sm);
  line-height: 1.55;
  color: var(--ax-text-body);
}

/* The one human row, full-bleed inside the panel. This is the page's argument,
   so it takes the loudest colour available. */
.ax-lifecycle__row--human,
.ax-lifecycle__row--marker {
  margin-inline: -1.5rem;
  padding-inline: 1.5rem;
  background: linear-gradient(90deg, rgba(34, 211, 238, 0.14), rgba(34, 211, 238, 0.03));
  border-top-color: var(--ax-accent-line);
}

.ax-lifecycle__row--marker .ax-lifecycle__means {
  color: var(--ax-text);
  font-weight: 500;
}

.ax-lifecycle__glyph {
  color: var(--ax-accent);
  font-family: var(--ax-font-mono);
  font-weight: 700;
}

.ax-label {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--ax-r-xs);
  font-family: var(--ax-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  background: var(--ax-bg-3);
  border: 1px solid var(--ax-border);
  color: var(--ax-text-muted);
}

.ax-label--human {
  background: var(--ax-accent);
  border-color: var(--ax-accent);
  color: var(--ax-accent-ink);
  font-weight: 700;
}

/* "Set by" carries the word, never colour alone. */
.ax-by {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-microlabel);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ax-text-dim);
  text-align: right;
}

.ax-by--human { color: var(--ax-accent); }


/* Trigger flow. A grid of nodes rather than a rendered diagram, so it inherits
   the tokens and never needs to scroll horizontally. */
.ax-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: var(--ax-s-4);
  align-items: start;
  margin-top: var(--ax-s-7);
  padding: var(--ax-s-6);
  background: var(--ax-bg-1);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
}

.ax-flow__col { display: flex; flex-direction: column; gap: 0.625rem; }
.ax-flow__col .ax-microlabel { margin-bottom: 0.25rem; }

.ax-node {
  background: var(--ax-bg-3);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-md);
  padding: 0.875rem 1rem;
  font-size: var(--ax-t-sm);
  color: var(--ax-text-muted);
}

.ax-node code {
  font-family: var(--ax-font-mono);
  font-size: var(--ax-t-xs);
  color: var(--ax-text-muted);
}

/* A human performs these, so they take the human/bot colour law used by the
   lifecycle console. It has to read identically in both places. */
.ax-node--human { border-left: 3px solid var(--ax-accent); }
.ax-node--human code { color: var(--ax-accent); }

.ax-node--out {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--ax-accent-soft);
  border-color: var(--ax-accent-line);
}

.ax-node--out strong { color: var(--ax-text); font-weight: 700; }

.ax-flow__arrow {
  position: relative;
  align-self: center;
  width: 32px;
  height: 1px;
  background: var(--ax-border-strong);
}

.ax-flow__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  border-left: 6px solid var(--ax-text-faint);
}


/* ==========================================================================
   04 Where it runs
   ========================================================================== */

.ax-anchor {
  margin-left: 0.5rem;
  color: var(--ax-text-faint);
  text-decoration: none;
  font-family: var(--ax-font-mono);
  font-size: 0.6em;
  vertical-align: middle;
}

.ax-anchor:hover { color: var(--ax-accent); }

.ax-trust {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ax-s-8);
  margin-top: var(--ax-block-gap);
}

.ax-guarantees { margin-top: var(--ax-s-4); }

.ax-guarantees > div + div { margin-top: var(--ax-s-4); }

.ax-guarantees dt {
  font-weight: 700;
  color: var(--ax-text);
  font-size: var(--ax-t-body);
}

.ax-guarantees dd {
  margin: 0.25rem 0 0;
  font-size: var(--ax-t-sm);
  line-height: 1.6;
  color: var(--ax-text-muted);
}

.ax-questions { margin-top: var(--ax-s-4); }

.ax-questions > div {
  border-left: 1px solid var(--ax-hairline);
  padding-left: 1rem;
}

.ax-questions > div + div { margin-top: var(--ax-s-4); }

.ax-questions dt {
  font-size: var(--ax-t-sm);
  color: var(--ax-text-dim);
}

.ax-questions dd {
  margin: 0.25rem 0 0;
  font-size: var(--ax-t-body);
  line-height: 1.6;
  color: var(--ax-text-body);
}

.ax-perms { margin-top: var(--ax-s-9); }
.ax-perms .ax-grid { margin-top: var(--ax-s-4); }

.ax-perms__denied {
  margin-top: var(--ax-s-7);
  padding-top: var(--ax-s-5);
  border-top: 1px solid var(--ax-hairline);
}

.ax-perm {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--ax-hairline);
  border-radius: var(--ax-r-md);
  padding: 0.875rem 1rem;
}

.ax-perm > code {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--ax-font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ax-accent);
}

.ax-perm p {
  margin-top: 0.375rem;
  font-size: var(--ax-t-sm);
  line-height: 1.5;
  color: var(--ax-text-muted);
}

/* Granted reads cyan, withheld reads dim with a red glyph. The security
   argument, rendered in two tokens. */
.ax-perm--denied > code { color: var(--ax-text-dim); }
.ax-x { color: var(--ax-danger); font-weight: 700; }

.ax-trust__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ax-s-8);
  margin-top: var(--ax-s-9);
  padding-top: var(--ax-s-6);
  border-top: 1px solid var(--ax-hairline);
}

.ax-cannot,
.ax-proofs { list-style: none; margin: var(--ax-s-4) 0 0; padding: 0; }

.ax-cannot li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.5rem;
  font-size: var(--ax-t-sm);
  line-height: 1.55;
  color: var(--ax-text-muted);
  border-top: 1px solid var(--ax-hairline);
}

.ax-cannot li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  color: var(--ax-danger);
  font-weight: 700;
}

.ax-proofs li {
  padding: 0.75rem 0;
  border-top: 1px solid var(--ax-hairline);
}

.ax-proofs a {
  display: block;
  font-weight: 600;
  font-size: var(--ax-t-sm);
  color: var(--ax-text);
  text-decoration: none;
}

.ax-proofs a:hover { color: var(--ax-accent); }

.ax-proofs span {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--ax-t-sm);
  line-height: 1.55;
  color: var(--ax-text-muted);
}


/* ==========================================================================
   06 Install
   ========================================================================== */

.ax-prereq {
  margin-top: var(--ax-block-gap);
  padding: var(--ax-s-5);
  background: var(--ax-bg-2);
  border: 1px solid var(--ax-border);
  border-radius: var(--ax-r-lg);
}

.ax-prereq ul { margin: var(--ax-s-3) 0 0; padding-left: 1.25rem; }

.ax-prereq li {
  font-size: var(--ax-t-sm);
  line-height: 1.6;
  color: var(--ax-text-muted);
}

.ax-prereq li + li { margin-top: 0.375rem; }

.ax-install__lanes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ax-s-8);
  margin-top: var(--ax-s-7);
  align-items: start;
}

.ax-install__lane > .ax-codeblock + .ax-note { margin-bottom: var(--ax-s-6); }
.ax-install__lane .ax-callout { margin-top: var(--ax-s-6); }

/* ==========================================================================
   Responsive. The shared layouts break in sections.css; these are the /code
   components only.
   ========================================================================== */

@media (max-width: 1023px) {
  .ax-trust,
  .ax-trust__foot,
  .ax-install__lanes { grid-template-columns: 1fr; gap: var(--ax-s-6); }

  .ax-flow { grid-template-columns: 1fr; }
  .ax-flow__arrow { display: none; }
}

@media (max-width: 768px) {
  /* The console is the page's hero object, so it collapses rather than
     scrolling sideways. */
  .ax-lifecycle__head { display: none; }
  .ax-consolewrap .ax-panel { padding: 1.125rem; }

  .ax-lifecycle__row,
  .ax-lifecycle__row--marker { grid-template-columns: 1fr; gap: 0.375rem; }

  .ax-lifecycle__row--human,
  .ax-lifecycle__row--marker { margin-inline: -1.125rem; padding-inline: 1.125rem; }

  .ax-by { text-align: left; }

  .ax-keylist li { grid-template-columns: 1fr; gap: 0.375rem; }
}