/*
 * zeq-info-drop.css — shared educational drop-down component.
 *
 * Modelled on the homepage Read-more expanders (wizard-home.css §section[data-zeq-step]
 * .app-about details). Use anywhere a page needs to teach the user what it
 * does, how to use it, where the data comes from / goes to. Just wrap content
 * in:
 *
 *   <details class="zeq-info-drop">
 *     <summary>What this page is — how it works</summary>
 *     <div class="zid-body">
 *       <h4>Section heading</h4>
 *       <p>…explanation…</p>
 *       <h4>Another heading</h4>
 *       <p>…</p>
 *     </div>
 *   </details>
 *
 * Phase AO (2026-05-14).
 */

.zeq-info-drop {
  margin: 12px 0;
  border: 1px solid rgba(0, 255, 136, 0.18);
  border-radius: 2px;
  background: rgba(0, 255, 136, 0.025);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

.zeq-info-drop[open] {
  background: rgba(0, 255, 136, 0.04);
  border-color: rgba(0, 255, 136, 0.35);
}

.zeq-info-drop > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: #00ff88;
  user-select: none;
  -webkit-user-select: none;
}

.zeq-info-drop > summary::-webkit-details-marker { display: none; }
.zeq-info-drop > summary::marker { content: ""; }

.zeq-info-drop > summary::before {
  content: "▸";
  display: inline-block;
  width: 14px;
  color: rgba(0, 255, 136, 0.65);
  font-size: 11px;
  transition: transform 180ms cubic-bezier(0.22, 0.6, 0.36, 1);
}

.zeq-info-drop[open] > summary::before {
  transform: rotate(90deg);
}

.zeq-info-drop > summary:hover {
  color: #00ff88;
  background: rgba(0, 255, 136, 0.06);
}

.zeq-info-drop .zid-body {
  padding: 4px 18px 16px;
  border-top: 1px solid rgba(0, 255, 136, 0.14);
  color: rgba(232, 232, 232, 0.92);
  font-size: 13px;
  line-height: 1.65;
}

.zeq-info-drop .zid-body h3,
.zeq-info-drop .zid-body h4 {
  margin: 16px 0 6px;
  font-size: 12px;
  color: #00ff88;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.zeq-info-drop .zid-body h4:first-child,
.zeq-info-drop .zid-body h3:first-child {
  margin-top: 12px;
}

.zeq-info-drop .zid-body p {
  margin: 0 0 10px;
}

.zeq-info-drop .zid-body p:last-child { margin-bottom: 0; }

.zeq-info-drop .zid-body strong { color: #ffffff; font-weight: 600; }
.zeq-info-drop .zid-body em     { color: rgba(0, 255, 136, 0.92); font-style: normal; }

.zeq-info-drop .zid-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  padding: 1px 5px;
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 2px;
  color: #00ff88;
}

.zeq-info-drop .zid-body a {
  color: #00ff88;
  text-decoration: underline;
  text-decoration-color: rgba(0, 255, 136, 0.4);
}
.zeq-info-drop .zid-body a:hover { text-decoration-color: #00ff88; }

.zeq-info-drop .zid-body ul, .zeq-info-drop .zid-body ol {
  margin: 6px 0 10px;
  padding-left: 22px;
}
.zeq-info-drop .zid-body li { margin: 4px 0; }

.zeq-info-drop .zid-body pre {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: #000;
  border: 1px solid rgba(0, 255, 136, 0.2);
  border-radius: 2px;
  padding: 10px;
  overflow-x: auto;
  color: #e8e8e8;
}

/* Compact variant for tight spaces (workbench panes etc.) */
.zeq-info-drop.compact > summary { padding: 7px 11px; font-size: 11.5px; }
.zeq-info-drop.compact .zid-body { padding: 4px 14px 12px; font-size: 12px; }
.zeq-info-drop.compact .zid-body h4 { font-size: 10.5px; margin: 12px 0 4px; }