/* ============================================================
   How It Works — the education / FAQ deck.
   Every selector is scoped under #view-education. Mint accent,
   gold secondary, base.css tokens only. Centered prose width.
   ============================================================ */

#view-education .edu-page { max-width: 920px; }

/* shared glyph chip used in rows + kit cards */
#view-education .edu-glyph {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-size: 18px; border: 1px solid var(--border); background: var(--bg-elevated);
  color: var(--mint); flex-shrink: 0;
}

/* readable paragraph rhythm inside bodies */
#view-education .edu-p { color: var(--text-muted); font-size: 14.5px; line-height: 1.75; margin-bottom: 13px; }
#view-education .edu-p:last-child { margin-bottom: 0; }

/* ── Start-here intro card ───────────────────────────────────── */
#view-education .edu-intro { margin-bottom: 8px; }
#view-education .edu-intro-eyebrow {
  color: var(--mint); font-size: 10.5px; letter-spacing: 2.4px; font-weight: 700;
  text-transform: uppercase; margin-bottom: 10px;
}
#view-education .edu-intro-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--text);
  letter-spacing: .01em; line-height: 1.2; margin-bottom: 14px;
}
#view-education .edu-intro-close { margin-top: 4px; }

/* operative-pattern flow strip */
#view-education .edu-flow {
  display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap;
  margin: 18px 0 18px; padding: 16px; border: 1px solid var(--border);
  border-radius: var(--radius-lg); background: var(--card-2);
}
#view-education .edu-flow-step {
  flex: 1; min-width: 120px; text-align: center; padding: 6px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
#view-education .edu-flow-glyph {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  font-size: 19px; color: var(--mint); background: var(--teal-glow);
  border: 1px solid rgba(95,176,137,0.3); margin-bottom: 3px;
}
#view-education .edu-flow-name { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text); }
#view-education .edu-flow-sub { font-size: 11px; line-height: 1.3; }
#view-education .edu-flow-arrow {
  display: flex; align-items: center; color: var(--text-faint); font-size: 18px;
  flex-shrink: 0; align-self: center; padding: 0 2px;
}

/* ── Accordions (systems + FAQ) ──────────────────────────────── */
#view-education .edu-accordion { margin-top: 4px; }

#view-education .xrow-head { gap: 13px; }
#view-education .edu-row-text { flex: 1; min-width: 0; }
#view-education .edu-row-name {
  font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text);
  letter-spacing: .01em; line-height: 1.3;
}
#view-education .edu-row-line { font-size: 12.5px; margin-top: 3px; line-height: 1.4; }

/* FAQ rows use the '?' glyph chip — make it read like a marker */
#view-education .edu-accordion .xrow-head .edu-glyph { font-family: var(--font-display); font-weight: 700; }

/* tighten the body inner so prose sits under the glyph nicely */
#view-education .xrow-body-inner { padding: 2px 20px 20px 71px; }
#view-education .xrow.open .xrow-body { max-height: 1600px; }

@media (max-width: 620px){
  #view-education .xrow-body-inner { padding-left: 20px; }
}

/* ── Nuggets (two-roads / why-it-won't-break callouts) ───────── */
#view-education .edu-nugget {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 11px 14px; border-radius: var(--radius); margin: 12px 0 0;
  background: var(--bg-elevated); border: 1px solid var(--border);
  border-left: 3px solid var(--border-light);
}
#view-education .edu-nugget.mint { border-left-color: var(--mint); background: var(--teal-glow); }
#view-education .edu-nugget.gold { border-left-color: var(--gold); background: var(--gold-dim); }
#view-education .edu-nugget.violet { border-left-color: var(--violet); background: rgba(154,143,208,.12); }
#view-education .edu-nugget-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; flex-shrink: 0; white-space: nowrap;
}
#view-education .edu-nugget.mint .edu-nugget-label { color: var(--mint); }
#view-education .edu-nugget.gold .edu-nugget-label { color: var(--gold); }
#view-education .edu-nugget.violet .edu-nugget-label { color: var(--violet); }
#view-education .edu-nugget-text { flex: 1; min-width: 200px; font-size: 13px; line-height: 1.6; color: var(--text-muted); }

/* row actions (open deck + download) */
#view-education .edu-row-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
#view-education .edu-dl { background: var(--bg-elevated); border-color: var(--border-light); color: var(--text); }
#view-education .edu-dl:hover { border-color: var(--mint); color: var(--mint); background: var(--card-hover); }
#view-education .edu-dl svg { stroke: currentColor; }

/* ── Downloadable kit cards ──────────────────────────────────── */
#view-education .edu-kits { margin-top: 4px; align-items: start; }
#view-education .edu-kit { display: flex; flex-direction: column; }
#view-education .edu-kit-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#view-education .edu-kit-head { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
#view-education .edu-kit-name { font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); }
#view-education .edu-kit-line { font-size: 12.5px; line-height: 1.55; margin-bottom: 12px; min-height: 36px; }

/* education-tab toggle */
#view-education .edu-kit-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 9px 11px; border-radius: var(--radius); cursor: pointer;
  background: var(--bg-elevated); border: 1px solid var(--border);
  color: var(--text-muted); font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
  transition: all .15s; text-align: left;
}
#view-education .edu-kit-toggle:hover { border-color: var(--border-light); color: var(--text); }
#view-education .edu-kit-toggle .chev { color: var(--text-faint); transition: transform .2s; flex-shrink: 0; }
#view-education .edu-kit.open .edu-kit-toggle { border-color: rgba(95,176,137,0.4); color: var(--mint); }
#view-education .edu-kit.open .edu-kit-toggle .chev { transform: rotate(90deg); color: var(--mint); }

/* the expandable education tab body */
#view-education .edu-kit-tab { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease); }
#view-education .edu-kit.open .edu-kit-tab { max-height: 360px; }
#view-education .edu-kit-steps { padding: 13px 4px 2px; }
#view-education .edu-kit-steps-label {
  font-size: 9.5px; letter-spacing: .16em; color: var(--text-faint); font-weight: 700; margin-bottom: 9px;
}
#view-education .edu-steps { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 7px; }
#view-education .edu-steps li { font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
#view-education .edu-steps li::marker { color: var(--mint); font-family: var(--font-mono); font-weight: 700; }

#view-education .edu-kit-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 14px; }
#view-education .edu-kit-actions .btn { flex: 1; }

#view-education .edu-foot { margin-top: 22px; font-size: 12.5px; }

/* ── "Download everything" row ───────────────────────────────── */
#view-education .edu-dl-all-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 2px 0 18px;
}
#view-education .edu-dl-all { display: inline-flex; align-items: center; gap: 9px; }
#view-education .edu-dl-all-glyph { font-size: 16px; line-height: 1; }
#view-education .edu-dl-all-note { font-size: 12.5px; }

/* ── Newsletter build log panel ──────────────────────────────── */
#view-education .nl-buildlog { margin-top: 4px; }
#view-education .nl-buildlog .panel-body { padding: 26px 26px 24px; }

#view-education .nl-hero {
  background: linear-gradient(135deg, var(--card-2), var(--bg-elevated));
  border: 1px solid rgba(245,184,66,0.25); border-radius: var(--radius-lg);
  padding: 20px 22px; margin-bottom: 20px;
}
#view-education .nl-hero-eyebrow {
  color: var(--mint); font-size: 10.5px; letter-spacing: .18em; font-weight: 700;
  text-transform: uppercase; margin-bottom: 7px;
}
#view-education .nl-hero-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; color: var(--gold);
  letter-spacing: .01em; line-height: 1.2; margin-bottom: 10px;
}
#view-education .nl-hero-lede { color: var(--text-muted); font-size: 14.5px; line-height: 1.65; margin: 0; }
#view-education .nl-hero-lede b { color: var(--text); }
#view-education .nl-hero-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
#view-education .nl-tag {
  font-size: 11.5px; border-radius: 20px; padding: 4px 12px; border: 1px solid var(--border);
}
#view-education .nl-tag.ok { background: var(--teal-glow); color: var(--mint); border-color: rgba(95,176,137,0.4); }
#view-education .nl-tag.wait { background: var(--gold-dim); color: var(--gold); border-color: rgba(245,184,66,0.4); }

#view-education .nl-section-h {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--gold);
  margin: 24px 0 12px; letter-spacing: .01em;
}
#view-education .nl-section-sub { font-family: var(--font-body); font-weight: 400; font-size: 12px; color: var(--text-faint); }

/* flow strip */
#view-education .nl-flow { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
#view-education .nl-flow-step {
  flex: 1; min-width: 138px; text-align: center; padding: 13px 10px; border-radius: var(--radius);
  background: var(--card-2); border: 1px solid rgba(95,176,137,0.2);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
#view-education .nl-flow-step.gold { border-color: rgba(245,184,66,0.35); }
#view-education .nl-flow-glyph { font-size: 21px; line-height: 1; }
#view-education .nl-flow-name { font-family: var(--font-display); font-weight: 600; font-size: 13.5px; color: var(--text); }
#view-education .nl-flow-step.gold .nl-flow-name { color: var(--gold); }
#view-education .nl-flow-sub { font-size: 11.5px; line-height: 1.35; }
#view-education .nl-flow-arrow { align-self: center; color: var(--gold); font-size: 19px; flex-shrink: 0; }

#view-education .nl-keyfact { font-size: 12.5px; line-height: 1.6; margin: 10px 0 0; }
#view-education .nl-keyfact b { color: var(--text); }

/* what-we-built grid */
#view-education .nl-built-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: 12px;
}
#view-education .nl-built-card {
  background: var(--card-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px;
}
#view-education .nl-built-title { color: var(--mint); font-weight: 700; font-size: 13.5px; margin-bottom: 5px; }
#view-education .nl-built-body { color: var(--text-muted); font-size: 12.5px; line-height: 1.55; }
#view-education .nl-built-body code,
#view-education .nl-foundry code,
#view-education .nl-footer code {
  font-family: var(--font-mono); font-size: .88em; color: var(--gold);
  background: var(--bg-elevated); padding: 1px 5px; border-radius: 4px;
}

/* foundry standing order */
#view-education .nl-foundry {
  background: var(--card-2); border-left: 3px solid var(--gold); border-radius: var(--radius);
  padding: 15px 17px;
}
#view-education .nl-foundry p { color: var(--text-muted); font-size: 13px; line-height: 1.6; margin: 0 0 8px; }
#view-education .nl-foundry p:last-child { margin-bottom: 0; }
#view-education .nl-foundry b { color: var(--text); }
#view-education .nl-foundry-123, #view-education .nl-foundry-83 { font-size: 12.5px; }
#view-education .nl-foundry .nl-star { color: var(--gold); }

#view-education .nl-footer {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid rgba(245,184,66,0.15);
  font-size: 11.5px; line-height: 1.7; color: var(--text-faint);
}
#view-education .nl-footer b { color: var(--text-muted); }
#view-education .nl-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }

@media (max-width: 620px){
  #view-education .nl-flow-arrow { display: none; }
}