/* ============================================================
   The consolidated plan page, Vital Vybez Partner OS, P11
   ------------------------------------------------------------
   One page, two layers. The public layer is the business plan as
   it now reads, plus the network. The gated layer is the build,
   the phases, the three ledgers, the ladder and the Academy,
   and it appears only to a signed-in admin or partner.

   The layer's facts are read from the app's own definitions
   (progression.js and curriculum.js), so this stylesheet only
   dresses them. It borrows the public site's tokens and blocks
   (brand.css, public.css) and adds the pieces the page needs.
   ============================================================ */

/* ---- Provenance tags, the estate's A/B/M/D convention, matching
   the portal's own so a statement is tagged the same way everywhere. ---- */
.prov {
  display: inline-block; width: 18px; height: 18px; line-height: 15px;
  text-align: center; vertical-align: middle;
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  border: 1.5px solid var(--vv-black); border-radius: 3px;
}
.prov-A { background: var(--vv-green); color: #fff; }
.prov-B { background: var(--vv-yellow); color: var(--vv-black); }
.prov-M { background: #fff; color: var(--vv-black); }
.prov-D { background: #e5e7eb; color: #374151; }

/* ---- The hero, restated as a single column so the plan page opens
   on the plan rather than on a picture. ---- */
.plan-hero .hero-pub__in { grid-template-columns: 1fr; }
.plan-hero .hero-pub__title { max-width: 22ch; }
.plan-hero .hero-pub__sub { max-width: 68ch; }

/* ---- Section titles, the portal's own, so a sub-heading reads the
   same here as it does inside the app. ---- */
.sec-title {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; color: #6b6b6b;
  margin: var(--space-6) 0 8px;
}

/* ---- Shared small print ---- */
.plan-meta {
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.7;
  color: #55503f; letter-spacing: 0.01em;
}
.plan-note {
  font-family: var(--font-mono); font-size: 0.74rem; line-height: 1.7;
  color: #6b6b6b; margin-top: var(--space-4);
}
.plan-legend { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }
.plan-legend span { font-family: var(--font-mono); font-size: 0.72rem; color: #6b6b6b; }

/* ============================================================
   The public layer
   ============================================================ */

/* ---- The gate chain ---- */
.chain {
  display: flex; align-items: stretch; gap: var(--space-3);
  flex-wrap: wrap; margin-top: var(--space-6);
}
.chain-node {
  flex: 1 1 190px; min-width: 170px; background: var(--vv-yellow);
  border: 3px solid var(--vv-dark-green); padding: 14px 16px;
}
.chain-node b {
  display: block; font-family: var(--font-display); font-size: 1rem;
  text-transform: uppercase; letter-spacing: var(--track-display);
  color: var(--vv-dark-green); margin-bottom: 6px;
}
.chain-node span { font-size: 0.86rem; line-height: 1.5; color: #33301f; }
.chain-node.is-first { background: var(--vv-dark-green); }
.chain-node.is-first b { color: var(--vv-yellow); }
.chain-node.is-first span { color: var(--vv-cream); }
.chain-arrow {
  align-self: center; font-family: var(--font-display); font-size: 1.2rem;
  color: var(--vv-dark-green); opacity: 0.5;
}

/* ---- The horizons ---- */
.hz { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.hz-card { border: 3px solid var(--vv-black); background: #fff; padding: 18px; display: flex; flex-direction: column; }
.hz-card .hz-n { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vv-green); }
.hz-card h3 { font-size: 1.12rem; margin: 8px 0 6px; color: var(--vv-dark-green); }
.hz-card .hz-when { font-family: var(--font-mono); font-size: 0.68rem; color: #8a8578; margin-bottom: 10px; }
.hz-card p { font-size: 0.9rem; line-height: 1.6; color: #3d3a33; }

/* ---- Engines and revenue types ---- */
.engs { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-6); }
.eng { display: grid; grid-template-columns: 44px 1fr; gap: 14px; border: 2px solid var(--vv-black); background: #fff; padding: 16px; align-items: start; }
.eng-n { font-family: var(--font-display); font-size: 1.5rem; line-height: 1; color: var(--vv-yellow); background: var(--vv-dark-green); padding: 6px 0 8px; text-align: center; }
.eng h3 { font-size: 1.05rem; color: var(--vv-dark-green); margin-bottom: 4px; }
.eng p { font-size: 0.9rem; line-height: 1.6; color: #3d3a33; }
.eng .eng-st { font-family: var(--font-mono); font-size: 0.7rem; margin-top: 8px; display: inline-block; border: 1.5px solid var(--vv-black); padding: 2px 8px; }
.eng .eng-st.ok { background: var(--vv-green); color: #fff; border-color: var(--vv-dark-green); }
.eng .eng-st.hold { background: var(--vv-yellow); color: var(--vv-black); }
.eng.is-deferred { border-style: dashed; opacity: 0.85; }

.rev { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.rev-card { background: var(--vv-black); color: var(--vv-cream); padding: 20px; border-top: 4px solid var(--vv-yellow); }
.rev-card .badge { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vv-yellow); }
.rev-card h3 { color: var(--vv-cream); font-size: 1.05rem; margin: 8px 0 8px; }
.rev-card p { font-size: 0.88rem; line-height: 1.6; opacity: 0.85; }

/* ---- The network ---- */
.fam { border: 3px solid var(--vv-black); background: #fff; margin-top: var(--space-4); }
.fam-head { background: var(--vv-black); color: var(--vv-yellow); padding: 12px 16px; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fam-head .fam-k { font-family: var(--font-display); font-size: 1.1rem; }
.fam-head .fam-sub { font-family: var(--font-mono); font-size: 0.72rem; color: var(--vv-cream); opacity: 0.85; margin-left: auto; }
.fam-body { padding: 16px; }
.fam-body .fam-blurb { font-size: 0.9rem; color: #55503f; margin-bottom: 12px; }
.roles { display: flex; flex-wrap: wrap; gap: 8px; }
.role-chip {
  font-family: var(--font-mono); font-size: 0.74rem;
  border: 2px solid var(--vv-black); padding: 5px 10px; background: var(--vv-cream);
}
.role-chip.live { background: var(--vv-yellow); }

/* ---- Where the estate sits ---- */
.estate { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-4); margin-top: var(--space-6); }
.estate-card { border: 2px solid var(--vv-black); background: #fff; padding: 16px; }
.estate-card .est-kind { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vv-green); }
.estate-card .est-name { font-family: var(--font-display); font-size: 1.05rem; margin: 6px 0 4px; color: var(--vv-dark-green); }
.estate-card .est-place { font-size: 0.88rem; color: #3d3a33; }

/* ============================================================
   The gated layer, the build
   ============================================================ */

.plan-gate {
  border: 3px solid var(--vv-black); background: #fff; padding: 28px;
  display: flex; flex-direction: column; gap: 14px; align-items: flex-start;
}
.plan-gate h3 { font-size: 1.2rem; color: var(--vv-dark-green); }
.plan-gate p { font-size: 0.94rem; line-height: 1.65; color: #3d3a33; max-width: 62ch; }
.plan-gate .act-row { display: flex; gap: 12px; flex-wrap: wrap; }

.plan-who {
  font-family: var(--font-mono); font-size: 0.74rem; color: #6b6b6b;
  border-bottom: 2px solid var(--vv-black); padding-bottom: 10px; margin-bottom: var(--space-6);
}

/* ---- The roadmap, read from progression.js ---- */
.road { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-5); }
.road-phase { border: 2px solid #e4e0d8; background: #fff; padding: 14px; }
.road-phase.now { border-color: var(--vv-black); box-shadow: 4px 4px 0 var(--vv-black); }
.road-phase.done { border-color: #cfcabc; }
.rp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.rp-head .rp-n { font-family: var(--font-display); font-size: 0.8rem; background: var(--vv-black); color: var(--vv-yellow); padding: 3px 9px; }
.rp-head .rp-title { font-family: var(--font-display); font-size: 0.98rem; }
.rp-head .rp-status {
  margin-left: auto; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 9px;
  border: 2px solid #d8d4cc; color: #8d8a84;
}
.rp-head .rp-status.done { background: var(--vv-green); color: #fff; border-color: var(--vv-dark-green); }
.rp-head .rp-status.now { background: var(--vv-yellow); color: var(--vv-black); border-color: var(--vv-black); }
.rp-items { display: flex; flex-direction: column; gap: 6px; }
.rp-item { font-size: 0.82rem; line-height: 1.5; color: #4d4d4d; padding-left: 16px; position: relative; }
.rp-item::before { content: "\25B8"; position: absolute; left: 0; color: var(--vv-green); }
.rp-item.done { color: #9a9a9a; }
.rp-item.done::before { content: "\2713"; color: var(--vv-green); }

/* ---- The three ledgers ---- */
.leds { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.led { border: 3px solid var(--vv-black); background: #fff; padding: 18px; }
.led .led-k { font-family: var(--font-mono); font-size: 0.64rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--vv-green); }
.led h3 { font-size: 1.05rem; margin: 8px 0 8px; color: var(--vv-dark-green); }
.led p { font-size: 0.88rem; line-height: 1.6; color: #3d3a33; }

/* ---- The ladder and Gate 0 ---- */
.lad { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-5); }
.lad-row { display: grid; grid-template-columns: 40px 1fr; gap: 12px; border: 2px solid var(--vv-black); background: #fff; padding: 12px 14px; align-items: start; }
.lad-n { font-family: var(--font-display); font-size: 1rem; background: var(--vv-dark-green); color: var(--vv-yellow); text-align: center; padding: 4px 0 6px; }
.lad-row .lad-name { font-family: var(--font-display); font-size: 0.98rem; color: var(--vv-dark-green); }
.lad-row .lad-rule { font-size: 0.85rem; color: #4d4d4d; line-height: 1.55; margin-top: 2px; }
.ctl { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-5); }
.ctl-row { border-left: 4px solid var(--vv-yellow); background: #fff; border-top: 1px solid #e4e0d8; border-right: 1px solid #e4e0d8; border-bottom: 1px solid #e4e0d8; padding: 12px 14px; }
.ctl-row .ctl-name { font-family: var(--font-display); font-size: 0.95rem; color: var(--vv-dark-green); }
.ctl-row .ctl-basis { font-family: var(--font-mono); font-size: 0.68rem; color: #8a8578; margin-top: 4px; }
.ctl-row .ctl-need { font-size: 0.85rem; color: #4d4d4d; line-height: 1.55; margin-top: 4px; }

/* ---- The Academy ---- */
.acad { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.acad-card { border: 2px solid var(--vv-black); background: #fff; padding: 18px; }
.acad-card .acad-n { font-family: var(--font-display); font-size: 1.6rem; color: var(--vv-yellow); background: var(--vv-dark-green); display: inline-block; padding: 4px 12px 6px; }
.acad-card h3 { font-size: 0.98rem; margin: 10px 0 6px; color: var(--vv-dark-green); }
.acad-card p { font-size: 0.86rem; line-height: 1.6; color: #3d3a33; }
.tracks { display: flex; flex-direction: column; gap: 8px; margin-top: var(--space-5); }
.track-row { display: flex; align-items: baseline; gap: 12px; border: 2px solid #e4e0d8; background: #fff; padding: 12px 14px; flex-wrap: wrap; }
.track-row .tr-k { font-family: var(--font-display); font-size: 0.8rem; background: var(--vv-black); color: var(--vv-yellow); padding: 2px 8px; }
.track-row .tr-name { font-family: var(--font-display); font-size: 0.94rem; }
.track-row .tr-state { margin-left: auto; font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 8px; border: 2px solid #d8d4cc; color: #8d8a84; }
.track-row .tr-state.now { background: var(--vv-green); color: #fff; border-color: var(--vv-dark-green); }

@media (max-width: 640px) {
  .eng { grid-template-columns: 36px 1fr; }
  .chain-arrow { display: none; }
  .chain-node { flex: 1 1 100%; }
}