/* ============================================================
   Metta Circles — contained sub-app styles
   Loaded after awakin.css, so it inherits all design tokens
   (--parchment, --brass, --sage, --ink, --display, --mono, …).
   Scope: /new/metta/*  (participant guide, agreements, …)
   ============================================================ */

/* ---- wider measure for reference docs ----
   circles.css loads only on the doc sub-pages (via EXTRA_CSS), so these
   overrides are scoped to them and never touch the landing or main site.
   Reference/policy text scans better in a slightly wider column than the
   site's narrative measure. */
.wrap{max-width:940px}
.lead{max-width:32ch}
.lead-sm{max-width:36ch}
.prose{max-width:68ch}
.cg-item p{max-width:68ch}
.cg-defs,.cg-ul,.cg-steps{max-width:74ch}

/* ---- doc page header ---- */
.cg-lede{font-family:var(--display);font-style:italic;font-weight:340;font-size:clamp(1.12rem,2.4vw,1.5rem);line-height:1.45;color:var(--ink-soft);max-width:38ch;margin:.35rem 0 0}

/* ---- cross-doc breadcrumb ---- */
.cg-crumb{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;margin-top:1.5rem}
.cg-crumb a{color:var(--brass-deep);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:var(--brass);transition:color .25s,text-decoration-color .25s}
.cg-crumb a:hover{color:var(--clay);text-decoration-color:var(--clay)}
.cg-crumb .here{color:var(--ink-soft);text-decoration:none}
.cg-crumb .here::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--brass);margin-right:.55rem;vertical-align:middle}
/* slim breadcrumb strip directly under a hero (overrides the first-of-type air) */
.seg.light.cg-crumbbar:first-of-type .moment{padding-top:1.9rem;padding-bottom:0}

/* ============================================================
   shared chapter sub-nav  (rendered by tpl/_subnav.tpl)
   One consistent strip under every Circles hero: a "return to
   section" anchor on the left, the sibling chapters in the middle,
   and a persistent Join CTA on the right. Same order + labels on
   every page — the current page is marked, never a dead link.
   ============================================================ */
.cx-subnav{border-bottom:1px solid var(--line-l);background:linear-gradient(to bottom,rgba(242,235,220,.55),rgba(242,235,220,0))}
.cx-inner{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem 1.35rem;padding:1.05rem 0 1rem}
.cx-subnav a,.cx-subnav .cx-here,.cx-subnav .cx-cta{font-family:var(--mono);font-size:.7rem;letter-spacing:.055em;text-transform:uppercase;text-decoration:none;line-height:1.4}

/* left: return-to-section anchor */
.cx-home{display:inline-flex;align-items:center;gap:.55rem;color:var(--ink);font-weight:500;transition:color .25s}
.cx-home .cx-ring{width:9px;height:9px;border-radius:50%;border:1.5px solid var(--brass);flex:none;transition:background .25s,border-color .25s}
.cx-home:hover{color:var(--brass-deep)}
.cx-home:hover .cx-ring{background:var(--brass)}
.cx-sep{width:1px;height:15px;background:var(--line-l);flex:none}

/* middle: sibling chapters */
.cx-links{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.2rem}
.cx-links a{color:var(--brass-deep);padding-bottom:2px;border-bottom:1px solid transparent;transition:color .25s,border-color .25s}
.cx-links a:hover{color:var(--clay);border-bottom-color:var(--clay)}
.cx-here{color:var(--ink-soft);padding-bottom:2px;border-bottom:1px solid var(--brass)}

/* right: persistent Join CTA */
.cx-cta{margin-left:auto;display:inline-flex;align-items:center;gap:.3rem;padding:.5rem 1rem;border-radius:999px;background:var(--brass);color:#fff;font-weight:500;letter-spacing:.07em;transition:background .25s,transform .2s,box-shadow .25s}
.cx-cta:hover{background:var(--brass-deep);transform:translateY(-1px);box-shadow:0 6px 16px rgba(138,94,30,.22)}
.cx-cta.is-here{background:transparent;color:var(--brass-deep);border:1px solid var(--brass);cursor:default}
.cx-cta.is-here:hover{transform:none;box-shadow:none;background:transparent}

@media(max-width:640px){
  .cx-inner{gap:.55rem 1rem;padding:.85rem 0}
  .cx-sep{display:none}
  .cx-cta{margin-left:0;padding:.44rem .85rem}
}

/* ---- numbered agreement items ---- */
.cg-items{margin-top:1.4rem;display:flex;flex-direction:column;gap:1.5rem}
.cg-item{display:flex;gap:1.1rem;align-items:baseline}
.cg-item .cg-n{font-family:var(--display);font-weight:430;font-size:1.5rem;color:var(--brass);line-height:1;flex-shrink:0;width:1.5rem;text-align:right}
.cg-item h4{font-family:var(--display);font-weight:500;font-size:1.12rem;color:var(--ink);margin:0 0 .35rem;line-height:1.25}
.cg-item p{font-size:.97rem;color:var(--ink-soft);line-height:1.55;margin:0;max-width:60ch}

/* ---- definition lists (commitments, what's not permitted) ---- */
.cg-defs{margin:1.1rem 0 0;display:flex;flex-direction:column;gap:.7rem;max-width:64ch}
.cg-defs > div{padding-left:1.1rem;border-left:2px solid var(--line-l)}
.cg-defs dt{font-weight:500;color:var(--ink);font-size:.97rem;display:inline}
.cg-defs dd{margin:0;display:inline;color:var(--ink-soft);font-size:.97rem;line-height:1.55}
.cg-defs dd::before{content:" — "}

/* ---- callout (disclaimer, crisis, trust) ---- */
.cg-callout{margin:1.4rem 0 0;padding:1.2rem 1.4rem;background:#F4EFE5;border:1px solid var(--line-l);border-left:3px solid var(--brass);border-radius:6px;max-width:64ch}
.cg-callout p{font-size:.95rem;color:var(--ink-soft);line-height:1.6;margin:0 0 .55rem;max-width:none}
.cg-callout p:last-child{margin-bottom:0}
.cg-callout strong{color:var(--ink)}
.cg-callout a{color:var(--brass-deep)}
.cg-callout a:hover{color:var(--clay)}

/* ---- plain bullet list inside docs ---- */
.cg-ul{margin:1rem 0 0;padding:0;list-style:none;max-width:62ch}
.cg-ul li{position:relative;padding:.4rem 0 .4rem 1.2rem;font-size:.97rem;color:var(--ink-soft);line-height:1.55}
.cg-ul li::before{content:"·";position:absolute;left:.2rem;color:var(--brass);font-weight:700}

/* ---- ordered process steps ---- */
.cg-steps{margin:1.1rem 0 0;padding:0;counter-reset:cg;list-style:none;max-width:64ch}
.cg-steps li{position:relative;padding:.6rem 0 .6rem 2rem;border-top:1px solid var(--line-l);font-size:.97rem;color:var(--ink-soft);line-height:1.55}
.cg-steps li:last-child{border-bottom:1px solid var(--line-l)}
.cg-steps li::before{counter-increment:cg;content:counter(cg);position:absolute;left:0;top:.6rem;font-family:var(--mono);font-size:.72rem;color:var(--brass-deep)}

/* ---- epigraph (pulled quote) ---- */
.cg-epi{font-family:var(--display);font-style:italic;font-weight:340;font-size:clamp(1.15rem,2.2vw,1.4rem);line-height:1.5;color:var(--ink);max-width:36ch;margin:0 0 1.1rem;padding-left:1.2rem;border-left:2px solid var(--brass)}
.cg-epi cite{display:block;font-style:normal;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--muted-l);margin-top:.6rem}

/* ---- three-stage flow ---- */
.cg-flow{display:flex;align-items:stretch;gap:.45rem;flex-wrap:wrap;margin:1.4rem 0 0}
.cg-flow .cg-stage{flex:1;min-width:150px;background:#F7F1E4;border:1px solid var(--line-l);border-radius:6px;padding:1rem 1.1rem}
.cg-flow .cg-stage b{font-family:var(--display);font-weight:500;font-size:1.04rem;color:var(--ink);display:block;margin-bottom:.3rem}
.cg-flow .cg-stage span{font-size:.86rem;color:var(--ink-soft);line-height:1.45;display:block}
.cg-flow .cg-stage .cg-tag{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage-deep);margin-top:.55rem}
.cg-arrow{display:flex;align-items:center;color:var(--brass);font-size:1.1rem;flex-shrink:0}

/* ---- two-column comparison ---- */
.cg-compare{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin:1.4rem 0 0}
.cg-compare .cg-col{border:1px solid var(--line-l);border-radius:6px;padding:1.2rem 1.3rem;background:#F7F1E4}
.cg-compare .cg-col.cg-ours{border-color:var(--brass);background:#F4EFE5}
.cg-compare h4{font-family:var(--display);font-weight:500;font-size:1.05rem;color:var(--ink);margin:0 0 .7rem}
.cg-compare .cg-ours h4{color:var(--brass-deep)}
.cg-compare ul{margin:0;padding:0;list-style:none}
.cg-compare li{position:relative;padding:.35rem 0 .35rem 1.1rem;font-size:.9rem;color:var(--ink-soft);line-height:1.45}
.cg-compare li::before{content:"\2013";position:absolute;left:0;color:var(--muted-l)}
.cg-compare .cg-ours li::before{content:"\00B7";color:var(--brass);font-weight:700}

@media(max-width:640px){
  .cg-flow{flex-direction:column}
  .cg-arrow{justify-content:center;padding:.15rem 0;transform:rotate(90deg)}
  .cg-compare{grid-template-columns:1fr}
}

/* ---- closing ---- */
.cg-foot{text-align:center;padding:2.6rem 0 .5rem}
.cg-foot q{font-family:var(--display);font-style:italic;font-size:1.18rem;color:var(--ink-soft);display:block;margin-bottom:.9rem}
.cg-foot a{font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;color:var(--brass-deep)}
.cg-foot a:hover{color:var(--clay)}