/* ============================================================
   ZENMATRIX — Component Library
   Assessment, diagnostic, and interactive components
   Requires: zx.css (base variables and layout)
   ============================================================ */

/* ── PAGE WRAP ──
   Constrained content column for text-heavy pages.
   Use inside sections for readable line lengths.
*/
.zx-narrow {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ── PROGRESS BAR ──
   Fixed top bar showing completion state.
   Add .on to make visible.
*/
.zx-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: transparent;
  z-index: 210;
  opacity: 0;
  transition: opacity 0.4s;
}

.zx-progress.on { opacity: 1; }

.zx-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(201,162,39,0.4));
  transition: width 0.4s;
  width: 0%;
}

/* ── CYCLE ROW ──
   Horizontal sequence of labelled steps.
*/
.zx-cycle {
  display: flex;
  justify-content: center;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.zx-cycle-step {
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 14px;
  color: var(--accent);
  border: 0.5px solid rgba(201,162,39,0.4);
  background: var(--accent-dim);
}

.zx-cycle-arr {
  font-size: 11px;
  color: var(--muted-light);
}

/* ── VALUE PROPS ──
   Two-column grid of short benefit lines.
*/
.zx-vprops {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 520px;
  margin: 0 auto;
}

.zx-vp {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.zx-vp-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  margin-top: 5px;
  opacity: 0.6;
}

@media (max-width: 540px) {
  .zx-vprops { grid-template-columns: 1fr; }
}

/* ── GATE CARD ──
   Email capture card with form fields.
*/
.zx-gate {
  max-width: 480px;
  margin: 0 auto;
  padding: 36px 32px;
  border: 0.5px solid var(--border-mid);
  background: var(--surface);
}

.zx-gate-title {
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: 0.05em;
  color: var(--white);
  text-align: center;
  margin-bottom: 4px;
}

.zx-gate-sub {
  font-size: 13px;
  color: var(--muted);
  text-align: center;
  margin-bottom: 24px;
  line-height: 1.6;
}

.zx-gate input[type="text"],
.zx-gate input[type="email"] {
  display: block;
  width: 100%;
  padding: 14px 18px;
  font-family: var(--body);
  font-size: 14px;
  font-weight: 300;
  background: transparent;
  border: 0.5px solid var(--border-mid);
  color: var(--white);
  margin-bottom: 10px;
  outline: none;
  transition: border-color 0.25s;
  letter-spacing: 0.03em;
}

.zx-gate input:focus { border-color: var(--accent); }
.zx-gate input::placeholder { color: var(--muted); }

.zx-gate-names {
  display: flex;
  gap: 10px;
}

.zx-gate-names input { flex: 1; min-width: 0; }

@media (max-width: 440px) {
  .zx-gate-names { flex-direction: column; gap: 0; }
}

.zx-gate-btn {
  display: block;
  width: 100%;
  padding: 15px;
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
  margin-top: 4px;
}

.zx-gate-btn:hover { opacity: 0.82; }
.zx-gate-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.zx-gate-err {
  font-size: 12px;
  color: #c94a27;
  text-align: center;
  margin-top: 8px;
  display: none;
}

.zx-gate-err.on { display: block; }

/* ── SECTION HEADER ──
   Gear/section numbering + title + italic description.
*/
.zx-sec { padding: 28px 0; }

.zx-sec-num {
  font-family: var(--body);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  display: block;
  margin-bottom: 4px;
}

.zx-sec-title {
  font-family: var(--display);
  font-size: 36px;
  letter-spacing: 0.04em;
  color: var(--white);
  margin-bottom: 6px;
}

.zx-sec-desc {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: var(--muted);
  margin-bottom: 28px;
  line-height: 1.6;
}

/* ── QUESTION CARD ──
   Used for survey/assessment questions with rating buttons.
*/
.zx-qcard {
  border: 0.5px solid var(--border-mid);
  background: var(--surface);
  padding: 22px 24px;
  margin-bottom: 12px;
  transition: border-color 0.3s;
}

.zx-qcard:hover { border-color: rgba(201,162,39,0.3); }
.zx-qcard.done { border-color: var(--accent); }

.zx-qtext {
  font-size: 14px;
  font-weight: 300;
  color: var(--white);
  margin-bottom: 16px;
  line-height: 1.6;
}

.zx-rating {
  display: flex;
  align-items: center;
  gap: 6px;
}

.zx-rating-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-light);
  min-width: 40px;
  text-align: center;
}

.zx-rating-label:first-child { text-align: right; }
.zx-rating-label:last-child { text-align: left; }

.zx-rating-opts {
  display: flex;
  gap: 6px;
  flex: 1;
  justify-content: center;
}

.zx-rbtn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 0.5px solid var(--border-mid);
  background: transparent;
  color: var(--muted);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zx-rbtn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-dim);
}

.zx-rbtn.sel {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  font-weight: 500;
}

@media (max-width: 400px) {
  .zx-rbtn { width: 34px; height: 34px; font-size: 11px; }
  .zx-rating-opts { gap: 4px; }
  .zx-rating-label { font-size: 7.5px; min-width: 30px; }
}

/* ── DIVIDER (light) ── */
.zx-dots {
  text-align: center;
  padding: 12px 0;
  color: var(--muted-light);
  font-size: 14px;
  letter-spacing: 0.5em;
}

/* ── SUBMIT BUTTON (section-level) ── */
.zx-submit-area { text-align: center; padding: 28px 0 56px; }

.zx-submit {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 15px 44px;
  background: var(--accent);
  color: var(--bg);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s;
}

.zx-submit:hover:not(:disabled) { opacity: 0.82; }
.zx-submit:disabled { opacity: 0.3; cursor: not-allowed; }

.zx-submit-hint {
  font-size: 11px;
  color: var(--muted-light);
  margin-top: 10px;
}

/* ── GEAR CARD ──
   Results card showing score + bar + insight.
*/
.zx-gcard {
  border: 0.5px solid var(--border-mid);
  background: var(--surface);
  padding: 24px 28px;
  margin-bottom: 12px;
  border-left: 3px solid var(--border-mid);
  transition: all 0.3s;
}

.zx-gcard.weak {
  border-left-color: var(--accent);
  background: linear-gradient(135deg, var(--surface) 0%, rgba(201,162,39,0.04) 100%);
}

.zx-gcard-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.zx-gcard-name {
  font-family: var(--display);
  font-size: 24px;
  letter-spacing: 0.05em;
  color: var(--white);
}

.zx-gcard-pct {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.08em;
}

.zx-gbar-track {
  width: 100%; height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin: 10px 0;
  overflow: hidden;
}

.zx-gbar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  width: 0%;
  background: var(--accent);
}

.zx-gcard-insight {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  margin-top: 6px;
}

.zx-gcard-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 4px 10px;
  color: var(--accent);
  background: var(--accent-dim);
  border: 0.5px solid rgba(201,162,39,0.4);
  margin-bottom: 6px;
}

/* ── DRILL BOX ──
   Highlighted recommendation box.
*/
.zx-drill {
  border: 0.5px solid rgba(201,162,39,0.25);
  background: var(--accent-dim);
  padding: 28px;
  margin: 36px 0;
}

.zx-drill-title {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--accent);
  margin-bottom: 12px;
}

.zx-drill-text {
  font-size: 13px;
  line-height: 1.7;
  color: var(--muted);
}

.zx-drill-text strong { color: var(--accent); }

/* ── BREAKER ROW ──
   State → breaker phrase pairs.
*/
.zx-breakers-title {
  font-family: var(--display);
  font-size: 22px;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 14px;
  text-align: center;
}

.zx-brow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--border);
}

.zx-brow:last-child { border-bottom: none; }

.zx-brow-state {
  font-family: var(--body);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  min-width: 86px;
}

.zx-brow-text {
  font-family: var(--serif);
  font-size: 15px;
  font-style: italic;
  color: var(--accent);
  text-align: right;
}

/* ── CTA CARD ──
   Bordered card with centred text for calls to action.
*/
.zx-cta-card {
  border: 0.5px solid var(--border-mid);
  background: var(--surface);
  padding: 32px;
  text-align: center;
}

.zx-cta-card-title {
  font-family: var(--display);
  font-size: 28px;
  letter-spacing: 0.05em;
  color: var(--white);
  margin-bottom: 8px;
}

.zx-cta-card-text {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.7;
  max-width: 480px;
  margin: 0 auto;
}

.zx-cta-card-note {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-top: 16px;
}

/* ── OUTLINE BUTTON ── */
.zx-btn-outline {
  font-family: var(--body);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 28px;
  background: transparent;
  color: var(--muted);
  border: 0.5px solid var(--border-mid);
  cursor: pointer;
  transition: all 0.25s;
}

.zx-btn-outline:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── UTILITY ── */
.zx-hidden { display: none !important; }
.zx-center { text-align: center; }