/* ==========================================================================
   Eight Zones (Integral Methodological Pluralism) — Styles
   Ported verbatim from the Claude Design "8 Zones Shortcode" artifact.
   Everything is scoped under .cd-eight-zones; layout responds to the
   component's own width (container query), not the viewport.
   ========================================================================== */

.cd-eight-zones{--bg:#f3eee4;--ink:#1f1d18;--ink2:#46423a;--ink3:#6f685c;--rule:rgba(31,29,24,.14);
--serif:'EB Garamond',Garamond,Georgia,serif;--sans:'Raleway',system-ui,sans-serif;
container-type:inline-size;background:var(--bg);color:var(--ink);font-family:var(--sans);box-sizing:border-box;width:100%;max-width:1100px;margin:0 auto;padding:40px 32px 36px}
.cd-eight-zones *{box-sizing:border-box}
.cd-eight-zones a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}.cd-eight-zones a:hover{color:var(--ink3)}
.cd-eight-zones .z-eyebrow{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--ink3);margin:0 0 8px}
.cd-eight-zones .z-title{font-family:var(--serif);font-weight:500;font-size:40px;line-height:1.08;margin:0 0 10px}
.cd-eight-zones .z-lede{font-family:var(--serif);font-size:20px;line-height:1.45;color:var(--ink2);max-width:640px;margin:0 0 28px;text-wrap:pretty}
.cd-eight-zones .z-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,320px);gap:36px;align-items:start}
.cd-eight-zones .z-fig svg{width:100%;height:auto;display:block;overflow:visible}
.cd-eight-zones .z-zone,.cd-eight-zones .z-quad{cursor:pointer;outline:none}
.cd-eight-zones .z-zone:focus-visible .z-seg,.cd-eight-zones .z-quad:focus-visible .z-hit{stroke:var(--ink);stroke-width:3}
.cd-eight-zones .z-panel{min-height:380px;display:flex;flex-direction:column;justify-content:center}
.cd-eight-zones .z-k{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--ink3);margin:0 0 6px}
.cd-eight-zones .z-p{font-size:15px;line-height:1.6;color:var(--ink2);margin:0 0 14px;text-wrap:pretty}
.cd-eight-zones .z-ask{font-family:var(--serif);font-style:italic;font-size:30px;line-height:1.15;margin:0 0 22px;text-wrap:balance}
.cd-eight-zones .z-row{border-top:1px solid var(--rule);padding:12px 0}
.cd-eight-zones .z-row .z-p{margin:0}
.cd-eight-zones .z-method{font-family:var(--serif);font-size:22px;margin:0}
.cd-eight-zones .z-zonehead{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.cd-eight-zones .z-num{font-family:var(--serif);font-size:15px;width:28px;height:28px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fbf7ef;flex:none}
.cd-eight-zones .z-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.cd-eight-zones button.z-btn{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.02em;border-radius:999px;padding:10px 18px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);cursor:pointer}
.cd-eight-zones button.z-btn.ghost{background:transparent;color:var(--ink)}
.cd-eight-zones button.z-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cd-eight-zones button.z-btn:hover{opacity:.85}
.cd-eight-zones .z-legend{display:flex;gap:14px;align-items:center;margin:4px 0 16px}
.cd-eight-zones .z-legend svg{flex:none}
.cd-eight-zones .z-note{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--ink3);margin:28px 0 0;text-align:center}
.cd-eight-zones .z-qlist{display:none;margin:0 0 6px;padding:0;list-style:none}
.cd-eight-zones .z-qlist li{display:flex;gap:10px;align-items:baseline;padding:6px 0;border-top:1px solid var(--rule);font-size:14px;color:var(--ink2)}
.cd-eight-zones .z-qlist b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:20px;min-width:34px}
.cd-eight-zones .z-fig .z-narrow{display:none}
.cd-eight-zones .z-fig{width:100%;max-width:640px;margin:0 auto}
@container (max-width:700px){
.cd-eight-zones .z-body{grid-template-columns:minmax(0,1fr);gap:20px}
.cd-eight-zones .z-panel{min-height:0}
.cd-eight-zones .z-title{font-size:30px}.cd-eight-zones .z-lede{font-size:17px}
.cd-eight-zones .z-ask{font-size:25px}
.cd-eight-zones .z-fig .z-wide{display:none}
.cd-eight-zones .z-fig .z-zone .z-narrow{display:inline}
.cd-eight-zones .z-qlist{display:block}
}

/* ---- Guards against primer / theme element styles -------------------------
 * .primer-section__content styles ul, li (incl. a ::before bullet), p and
 * strong; themes often style bare buttons. Neutralize them here. */
.cd-eight-zones .z-qlist li{margin:0}
.cd-eight-zones .z-qlist li::before{content:none}
.cd-eight-zones strong{color:inherit;font-weight:600}
.cd-eight-zones button.z-btn{margin:0;line-height:1.2;text-transform:none;box-shadow:none;min-height:44px}

/* ---- Spacing -------------------------------------------------------------
 * More room under the closing note, and space between the component and
 * the surrounding primer text (matches .primer-quadrant-grid--breakout). */
.cd-eight-zones{padding-bottom:56px;margin-top:2.5em;margin-bottom:2.5em}

/* ---- Breakout layout (layout="breakout", the default) ---------------------
 * On wide screens, widen past the ~780px primer text column up to the
 * design's 1100px max, centered on the parent (same technique as
 * .qe-explorer). Never wider than the viewport minus 20px per side. The
 * container query above then gives the figure + side panel layout. */
@media (min-width:900px){
.cd-eight-zones--breakout{--ez-w:min(1100px,calc(100vw - 40px));width:var(--ez-w);max-width:none;margin-left:calc((100% - var(--ez-w))/2);margin-right:calc((100% - var(--ez-w))/2)}
}