/*
 * "How Exploit Hound builds the exposure picture".
 *
 * Uses the site's existing tokens (--bg-card, --line, --accent, --muted) so it
 * belongs to the page rather than sitting on it. No new palette: the brand
 * accent is used sparingly, for the boundary and the platform block, and
 * status colour is always paired with a word.
 *
 * Desktop is a grid with the two outside zones above and the platform below.
 * Mobile reflows into ordered sections -- deliberately NOT a shrunken wide
 * diagram, which is how these end up with 7px labels and a horizontal
 * scrollbar on the page body.
 */

.eig {
  /* The site container, not a bare section.

     Every other section on the page is inside `.wrap` -- max-width var(--max)
     with 20px gutters -- and this one was not, so it ran the full width of the
     viewport and its left edge did not line up with the heading above it or the
     paragraph below. It is the same two declarations rather than a copy of the
     number, so a change to the site width reaches the diagram too. */
  max-width: var(--max);
  margin: 2.5rem auto;
  padding: 0 20px;
}

.eig__intro { margin-bottom: 1.5rem; }
.eig__lede {
  font-size: 1.05rem;
  color: var(--text);
  margin: 0.4rem 0 0.6rem;
}
.eig__caveat {
  color: var(--muted);
  font-size: 0.92rem;
  margin: 0;
  max-width: 62ch;
}

/* -- layout -------------------------------------------------------------- */

.eig__grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

.eig-zone {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--bg-soft);
}

/* The customer-network boundary, drawn rather than described. */
.eig-zone--inside {
  border-style: dashed;
  border-color: var(--accent);
  background: var(--accent-soft);
}

.eig-zone__label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: baseline;
}
.eig-zone__note {
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.78rem;
  color: var(--muted);
  opacity: 0.85;
}

.eig-zone__cards {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}

/* -- source cards -------------------------------------------------------- */

.eig-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
}

.eig-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.4rem;
  font-size: 1rem;
  color: var(--text);
}

.eig-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.eig-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0 0 0.5rem;
}

.eig-mode {
  font-size: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  color: var(--muted);
}
/* Active collection sends traffic at something. An MSP has to be able to tell
   a customer which was done, so it is marked rather than left to the prose. */
.eig-mode--active,
.eig-mode--mixed {
  border-color: var(--warn);
  color: var(--warn);
}

.eig-status {
  font-size: 0.75rem;
  border-radius: 999px;
  padding: 0.1rem 0.5rem 0.1rem 0.4rem;
  border: 1px solid var(--line);
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.eig-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
/* Colour is an addition to the word, never a replacement for it. */
.eig-status--ga { color: var(--ok); border-color: rgba(74, 222, 128, 0.4); }
.eig-status--beta { color: var(--warn); border-color: rgba(255, 179, 71, 0.4); }
.eig-status--partial { color: var(--warn); border-color: rgba(255, 179, 71, 0.4); }
.eig-status--planned,
.eig-status--absent { color: var(--muted); }

.eig-card__summary {
  margin: 0 0 0.6rem;
  color: var(--muted);
  font-size: 0.92rem;
}

/* -- disclosure ---------------------------------------------------------- */

.eig-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  min-height: var(--tap);
  cursor: pointer;
}
.eig-toggle:hover { border-color: var(--accent); }
.eig-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.eig-toggle__mark {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 140ms ease;
}
.eig-toggle[aria-expanded="true"] .eig-toggle__mark { transform: rotate(180deg); }

.eig-panel {
  margin-top: 0.7rem;
  border-top: 1px solid var(--line);
  padding-top: 0.7rem;
  font-size: 0.9rem;
}
.eig-panel h4 {
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0.8rem 0 0.3rem;
}
.eig-panel h4:first-child { margin-top: 0; }
.eig-panel ul { margin: 0; padding-left: 1.1rem; }
.eig-panel li { margin: 0.15rem 0; }
.eig-panel p { margin: 0; color: var(--muted); }
.eig-limits li { color: var(--muted); }

/* -- connectors ---------------------------------------------------------- */

.eig-arrows { height: 24px; }
.eig-arrows__svg {
  width: 100%;
  height: 24px;
  display: block;
}
.eig-arrows__svg line {
  stroke: var(--line);
  stroke-width: 0.6;
  vector-effect: non-scaling-stroke;
}
.eig-arrows__svg path { fill: var(--line); }

/* Arrows are decoration for the reading order, which the DOM already carries.
   On a narrow screen they connect nothing visually, so they go. */
@media (max-width: 720px) {
  .eig-arrows { display: none; }
}

/* -- the platform -------------------------------------------------------- */

.eig-core {
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--bg-card);
  padding: 1rem;
}
.eig-core__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.6rem;
  font-size: 1.05rem;
}
.eig-core__where {
  font-size: 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  color: var(--muted);
  font-weight: 400;
}
.eig-core__list { margin: 0; padding-left: 1.1rem; }
.eig-core__list li { margin: 0.3rem 0; color: var(--muted); }
.eig-core__list strong { color: var(--text); }
.eig-core__evidence {
  margin: 0.8rem 0 0.4rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--text);
  border-top: 1px solid var(--line);
  padding-top: 0.6rem;
}
.eig-core__caveat {
  margin: 0;
  font-size: 0.86rem;
  color: var(--muted);
}

.eig-out {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1rem;
  background: var(--bg-soft);
}
.eig-out__title { margin: 0 0 0.6rem; font-size: 1rem; }
.eig-out__list { margin: 0; padding-left: 1.1rem; }
.eig-out__list li { margin: 0.35rem 0; color: var(--muted); }
.eig-out__list strong { color: var(--text); }

/* -- desktop ------------------------------------------------------------- */

@media (min-width: 860px) {
  .eig__grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "outside inside"
      "connected connected"
      "arrows arrows"
      "core out";
    align-items: start;
  }
  .eig-zone--outside { grid-area: outside; }
  .eig-zone--inside { grid-area: inside; }
  .eig-zone--connected { grid-area: connected; }
  .eig-arrows { grid-area: arrows; }
  .eig-core { grid-area: core; }
  .eig-out { grid-area: out; }

  .eig-zone--connected .eig-zone__cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* -- compact, for the homepage ------------------------------------------- */

.eig-mini {
  margin: 2rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem;
  background: var(--bg-soft);
}
.eig-mini h2 { margin: 0 0 0.35rem; font-size: 1.3rem; }
.eig-mini__lede { margin: 0 0 1rem; color: var(--muted); max-width: 60ch; }

.eig-mini__zones {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .eig-mini__zones { grid-template-columns: repeat(3, 1fr); }
}

.eig-mini__zone {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.75rem;
  background: var(--bg-card);
}
.eig-mini__zone--inside {
  border-style: dashed;
  border-color: var(--accent);
}
.eig-mini__zone h3 {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin: 0 0 0.5rem;
}
.eig-mini__zone h3 span {
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.8;
}

.eig-mini__list { list-style: none; margin: 0; padding: 0; }
.eig-mini__item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0;
  font-size: 0.9rem;
  flex-wrap: wrap;
}
.eig-mini__mode {
  font-size: 0.7rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0 0.4rem;
}

.eig-mini__core {
  margin: 1rem 0 0.4rem;
  color: var(--text);
  font-size: 0.92rem;
}
.eig-mini__more { margin: 0; }

/* -- motion -------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .eig-toggle__mark { transition: none; }
  .eig * { animation: none !important; }
}

/* -- print / forced colours ---------------------------------------------- */

@media (forced-colors: active) {
  .eig-card, .eig-zone, .eig-core, .eig-out { border: 1px solid CanvasText; }
  .eig-icon { stroke: CanvasText; }
}

/* -- the plain-language outcomes ------------------------------------------ */

.eig-outcomes { margin: 2rem 0; }
.eig-outcomes h2 { margin: 0 0 1rem; font-size: 1.3rem; }
.eig-outcomes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .eig-outcomes__list { grid-template-columns: repeat(2, 1fr); }
}
.eig-outcome {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.85rem 0.9rem;
  background: var(--bg-card);
}
.eig-outcome__head {
  margin: 0 0 0.35rem;
  font-weight: 600;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: baseline;
}
.eig-outcome__detail {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

/* -- the collection-mode legend ------------------------------------------
   The per-card badge says which mode a source is; this says what each mode
   means. Two of them were wrong until it was written down: the endpoint agent
   was "Passive" when it reads the host it is installed on, and authenticated
   API collection was "Passive" because reading is not writing -- which
   understates what the customer authorised. */
.eig-legend {
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-soft);
}
.eig-legend__title {
  margin: 0 0 0.75rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.eig-legend__list { display: grid; gap: 0.5rem 1rem; margin: 0; }
@media (min-width: 720px) {
  .eig-legend__list { grid-template-columns: auto 1fr; align-items: baseline; }
}
.eig-legend__list dt { margin: 0; }
.eig-legend__list dd { margin: 0 0 0.25rem; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
.eig-mode--local_inventory, .eig-mode--read_only_api { white-space: nowrap; }