/* ============================================================
   Founder Mode (founder-mode.html)
   Hairline diagrams and rows on top of the v4 system in style.css.
   ============================================================ */
.fm-mark{display:block;width:72px;height:72px;margin-bottom:var(--sp-3)}
.fm-mark.sm{width:56px;height:56px;margin-bottom:var(--sp-2)}
.fm-lead{color:var(--muted);font-size:1.04rem;max-width:46ch;margin-top:var(--sp-2)}

/* Diagrams: 1px bone hairlines, mono labels */
.fm-fig{border:1px solid var(--line);background:rgba(3,3,3,.72);margin:0}
.fm-fig svg{display:block;width:100%;height:auto;padding:clamp(14px,2vw,24px)}
.fm-fig text{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;fill:var(--muted)}
.fm-fig text.hi{fill:var(--ink)}
.fm-fig text.lo{fill:var(--dim);font-size:11px}
.fm-fig .ln{fill:none;stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.fm-fig .ln.faint{stroke:var(--line)}
.fm-fig .ln.dash{stroke-dasharray:3 5}
.fm-fig .box{fill:var(--bg);stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.fm-fig .box.hi{stroke:var(--ink)}
.fm-fig .pt{fill:var(--ink)}
.fm-fig .pt.sm{fill:var(--muted)}
.fm-fig .ring{fill:var(--bg);stroke:var(--line-strong);stroke-width:1;vector-effect:non-scaling-stroke}
.fm-fig .cap{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.fm-fig .cap span{padding:14px 18px}
.fm-fig .cap span+span{border-left:1px solid var(--line)}
.fm-fig .cap.one{grid-template-columns:1fr}
.fm-fig .cap b{display:block;font-family:var(--serif);font-weight:500;font-size:1.3rem;color:var(--ink);text-transform:none;letter-spacing:0;margin-top:4px}

/* Diagram beside rows */
.fm-split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(30px,5vw,80px);align-items:start;margin-top:var(--sp-5)}
.fm-pieces li{padding:18px 0;border-bottom:1px solid var(--line)}
.fm-pieces li:first-child{border-top:1px solid var(--line)}
.fm-pieces b{font-family:var(--serif);font-weight:500;font-size:1.6rem;line-height:1.1}
.fm-pieces p{color:var(--muted);font-size:1.02rem;margin-top:6px}
.fm-label{display:block;margin-bottom:12px}
.fm-gap{margin-top:var(--sp-4)}

/* Code: the relay line and the install commands */
.fm-msg{margin-top:var(--sp-5);border:1px solid var(--line-strong);padding:18px 20px;display:grid;gap:10px}
.fm-msg code,.fm-code{font-family:var(--mono);font-size:.86rem;color:var(--ink);overflow-wrap:anywhere}
.fm-code{display:block;border:1px solid var(--line-strong);background:var(--bg-soft);padding:12px 14px;margin-top:16px;line-height:1.5}
.fm-req{margin-top:var(--sp-5)}

/* A day: time on the left */
.fm-day{margin-top:var(--sp-5)}
.fm-day .mono{color:var(--ink)}
.fm-day b span{font-size:1.02rem;color:var(--muted);max-width:68ch}

/* Charter: nine numbered rules in two columns */
.fm-rules{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(30px,5vw,80px);border-top:1px solid var(--line)}
.fm-rules li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:22px 0;border-bottom:1px solid var(--line)}
.fm-rules .mono{color:var(--faint);padding-top:6px}
.fm-rules b{font-family:var(--serif);font-weight:500;font-size:1.45rem;line-height:1.15}
.fm-rules p{color:var(--muted);font-size:1rem;margin-top:6px}

@media(max-width:960px){
  .fm-split,.fm-rules{grid-template-columns:1fr}
}
@media(max-width:560px){
  /* Diagrams shrink to ~340px wide: bigger labels so they stay readable (box widths allow 16px) */
  .fm-fig svg{padding:8px}
  .fm-fig text{font-size:16px;letter-spacing:.06em}
  .fm-fig text.lo{font-size:14px}
  .fm-fig .cap{grid-template-columns:1fr}
  .fm-fig .cap span+span{border-left:0;border-top:1px solid var(--line)}
}