/* ai-environment.css -- page-local styles for ai-environment.html.
   Rides on inner-page.css for the shell (nav, hero, sections, footer, faq,
   buttons) and only adds what the two tools need. The layout is grid and flex with
   absolute units throughout, which keeps the page inside the language rules the
   test suite enforces. */

.hero-bg {
  background-image:
    linear-gradient(180deg, rgba(8, 6, 14, 0.6), rgba(8, 6, 14, 0.88), rgba(8, 6, 14, 1)),
    url('assets/salian-avenue-2.webp');
  background-position: center;
}
/* Phones get the 1100px cut: the hero shows the photo under a near-opaque
   gradient, and the desktop file is a quarter of a megabyte. */
@media (max-width: 760px) {
  .hero-bg {
    background-image:
      linear-gradient(180deg, rgba(8, 6, 14, 0.6), rgba(8, 6, 14, 0.88), rgba(8, 6, 14, 1)),
      url('assets/salian-avenue-2-mobile.webp');
  }
}

.aie-rule {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  line-height: 1.6;
  letter-spacing: 0.04em;
  color: var(--gold);
  background: rgba(var(--gold-rgb), 0.08);
  border: 1px solid rgba(var(--gold-rgb), 0.42);
  border-radius: 2px;
  padding: 11px 13px;
  margin: 0 0 20px;
}

.aie-note {
  color: var(--bone-soft);
  font-size: 15px;
  line-height: 1.65;
  max-width: 68ch;
}

.aie-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
  margin-top: 18px;
}

@media (min-width: 900px) {
  .aie-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .aie-grid > .aie-out { position: sticky; top: 78px; }
}

.aie-in,
.aie-out {
  min-width: 0;
  background: linear-gradient(180deg, rgba(14, 10, 26, 0.7), rgba(8, 6, 14, 0.85));
  border: 1px solid var(--hairline);
  border-left: 2px solid rgba(var(--cyan-rgb), 0.55);
  padding: 20px 20px 24px;
}

.aie-out { border-left-color: rgba(var(--gold-rgb), 0.55); }

/* ── Questions ─────────────────────────────────────────────────────────── */

.aie-q {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin: 0;
  padding: 16px 0 4px;
}

.aie-q:first-of-type { border-top: 0; padding-top: 0; }

.aie-q legend {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0;
}

.aie-qn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--gold);
  flex: none;
}

.aie-qt {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
  color: var(--bone);
}

.aie-help {
  font-size: 13px;
  line-height: 1.55;
  color: var(--bone-dim);
  margin: 7px 0 11px;
}

.aie-opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.aie-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: rgba(var(--cyan-rgb), 0.03);
  color: var(--bone-soft);
  font-size: 14.5px;
  line-height: 1.45;
  cursor: pointer;
}

.aie-opt:hover { border-color: rgba(var(--cyan-rgb), 0.45); color: var(--bone); }
.aie-opt input { margin-top: 3px; accent-color: #00d8ff; flex: none; }
.aie-opt:has(input:checked) {
  border-color: rgba(var(--cyan-rgb), 0.6);
  background: rgba(var(--cyan-rgb), 0.1);
  color: var(--bone);
}
.aie-opt:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ── Buttons ───────────────────────────────────────────────────────────── */

.aie-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 2px;
  padding: 13px 18px;
  margin-top: 16px;
  min-height: 44px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid rgba(var(--cyan-rgb), 0.45);
  background: rgba(var(--cyan-rgb), 0.12);
  color: var(--cyan);
}

.aie-btn:hover { background: rgba(var(--cyan-rgb), 0.2); }
.aie-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.aie-btn.ghost { background: transparent; color: var(--bone-dim); border-color: var(--hairline); }

/* ── Result ────────────────────────────────────────────────────────────── */

.aie-hint {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--bone-dim);
  margin: 0 0 12px;
}

.aie-progress {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0 0 14px;
}

.aie-cat {
  border-top: 1px solid var(--hairline);
  padding: 16px 0 6px;
}

.aie-cat:first-of-type { border-top: 0; padding-top: 0; }

.aie-cat h3 {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--gold);
  margin: 0 0 8px;
}

.aie-cat-review h3 { color: var(--cyan); }

.aie-cat h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 14px 0 7px;
}

.aie-lede {
  color: var(--bone-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

.aie-why,
.aie-ask,
.aie-limit {
  list-style: none;
  margin: 0;
  padding: 0;
}

.aie-why li,
.aie-ask li,
.aie-limit li {
  position: relative;
  padding-left: 16px;
  margin-bottom: 7px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--bone-soft);
}

.aie-why li:before { content: "\203a"; position: absolute; left: 0; color: var(--gold); font-weight: 700; }
.aie-ask li:before { content: "?"; position: absolute; left: 0; color: var(--cyan); font-weight: 700; }
.aie-limit li:before { content: "\2013"; position: absolute; left: 0; color: var(--bone-dim); }

.aie-open {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--cyan-rgb), 0.34);
  border-radius: 2px;
  background: rgba(var(--cyan-rgb), 0.05);
}

.aie-open h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 8px;
}

.aie-warn {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(var(--gold-rgb), 0.45);
  border-radius: 2px;
  background: rgba(var(--gold-rgb), 0.07);
}

.aie-warn p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--bone-soft);
  margin: 0 0 9px;
}

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

.aie-disclaimer {
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.65;
  color: var(--bone-dim);
}

.aie-stop {
  padding: 18px 18px 22px;
  border: 1px solid rgba(255, 80, 110, 0.45);
  border-radius: 2px;
  background: linear-gradient(180deg, rgba(255, 26, 68, 0.1), rgba(255, 26, 68, 0.03));
}

.aie-stop h3 {
  font-family: Cinzel, serif;
  font-weight: 800;
  font-size: 20px;
  color: #ff6680;
  margin: 0 0 10px;
}

.aie-stop p {
  color: var(--bone-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 12px;
}

/* ── Consent block ─────────────────────────────────────────────────────── */

.aie-consent {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--hairline);
}

.aie-consent h4 {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--bone);
  margin: 0 0 8px;
}

.aie-fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: 9px;
}

@media (min-width: 620px) {
  .aie-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.aie-consent input,
.aie-consent textarea {
  width: auto;
  min-width: 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 16px;
  color: var(--bone);
  background: rgba(var(--cyan-rgb), 0.04);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  padding: 11px 12px;
  min-height: 44px;
}

.aie-consent textarea {
  display: block;
  margin-top: 9px;
  resize: vertical;
  font-size: 16px;
  line-height: 1.5;
}

.aie-consent input:focus-visible,
.aie-consent textarea:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.aie-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.aie-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  line-height: 1.6;
  color: var(--cyan);
  margin: 10px 0 0;
  min-height: 20px;
}

/* ── Tool 2: the dependency checklist ──────────────────────────────────── */

.aid-phase { margin-bottom: 22px; }

.aid-phase h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--hairline);
}

.aid-row {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.aid-row h4 {
  font-family: Cinzel, serif;
  font-weight: 700;
  font-size: 16px;
  color: var(--bone);
  margin: 0 0 7px;
}

.aid-row p {
  color: var(--bone-soft);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 11px;
  max-width: 74ch;
}

.aid-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.aid-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 14px;
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: rgba(var(--cyan-rgb), 0.03);
  color: var(--bone-soft);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  cursor: pointer;
}

.aid-choice:hover { border-color: rgba(var(--cyan-rgb), 0.45); color: var(--bone); }
.aid-choice input { accent-color: #00d8ff; }
.aid-choice:has(input:checked) {
  border-color: rgba(var(--cyan-rgb), 0.6);
  background: rgba(var(--cyan-rgb), 0.1);
  color: var(--bone);
}
.aid-choice:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; }

.aie-seq { margin-top: 18px; }

.aie-seq h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin: 0 0 10px;
}

.aie-seq-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: aieseq;
}

.aie-seq-phase {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 16px 0 8px;
}

.aie-seq-item {
  counter-increment: aieseq;
  position: relative;
  padding-left: 30px;
  margin-bottom: 12px;
}

.aie-seq-item:before {
  content: counter(aieseq);
  position: absolute;
  left: 0;
  top: 1px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(var(--gold-rgb), 0.18);
  color: var(--gold);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
}

.aie-seq-item strong { color: var(--bone); font-size: 15px; }

.aie-seq-state {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
}

.aie-seq-item p {
  color: var(--bone-soft);
  font-size: 14px;
  line-height: 1.55;
  margin: 6px 0 0;
  max-width: 74ch;
}

/* ── Sources ───────────────────────────────────────────────────────────── */

.aie-sources {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}

.aie-sources li {
  padding: 13px 0;
  border-top: 1px solid var(--hairline);
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--bone-soft);
}

.aie-sources .src-name { color: var(--bone); font-weight: 600; }

.aie-sources .src-meta {
  display: block;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--bone-dim);
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .aie-in, .aie-out { padding: 16px 14px 20px; }
  .aie-qt { font-size: 15px; }
}