/* ---- article-diagrams-v1.css ---- */
/* Rayne-Lab article diagram system v1.0 */
.article-diagram{
  --ad-gold:#d2aa4d;
  --ad-gold-soft:#e3bf68;
  --ad-red:#a64f40;
  --ad-red-soft:#bd6754;
  --ad-gray:#747782;
  --ad-ink:#0d0d10;
  --ad-text:var(--fg,#f0eee9);
  --ad-muted:var(--muted,#aaa7a0);
  margin:2.4rem 0 2.6rem;
  padding:1.25rem 1.3rem 1.15rem;
  border:1px solid rgba(210,170,77,.25);
  border-radius:14px;
  background:radial-gradient(circle at 88% 6%,rgba(210,170,77,.06),transparent 15rem),rgba(255,255,255,.012);
  overflow:hidden;
}
.article-diagram,.article-diagram *{box-sizing:border-box}
.article-diagram__kicker{margin:0 0 .35rem;color:var(--ad-gold);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase}
.article-diagram__title{margin:0 0 .45rem;font-family:"Shippori Mincho",serif;font-size:clamp(1.08rem,2.8vw,1.42rem);line-height:1.55;color:var(--ad-text)}
.article-diagram__lead{margin:0 0 1.15rem;color:var(--ad-muted);font-size:.82rem;line-height:1.8}
.article-diagram__canvas{width:100%;min-width:0}
.article-diagram__svg{display:block;width:100%;height:auto;max-height:540px;margin:0 auto;overflow:visible}
.article-diagram__legend{display:flex;flex-wrap:wrap;gap:.55rem 1rem;margin:1rem 0 0;padding:.75rem .85rem;border-top:1px solid rgba(210,170,77,.15);border-bottom:1px solid rgba(210,170,77,.12);color:var(--ad-muted);font-size:.74rem;line-height:1.65}
.article-diagram__legend-item{display:inline-grid;grid-template-columns:14px auto;align-items:start;gap:.42rem;min-width:0;max-width:100%}
.article-diagram__legend-chip{width:12px;height:12px;margin-top:.18rem;border-radius:3px;background:var(--chip,var(--ad-gold));box-shadow:0 0 0 1px rgba(255,255,255,.08) inset}
.article-diagram__legend-copy{min-width:0;overflow-wrap:anywhere}
.article-diagram__legend-copy b{color:var(--ad-gold-soft);font-weight:600}
.article-diagram__note{margin:.8rem 0 0;color:var(--ad-muted);font-size:.72rem;line-height:1.75}
.article-diagram__caption{margin:.75rem 0 0;color:var(--ad-muted);font-size:.72rem;line-height:1.8}
.article-diagram svg text{font-family:"Shippori Mincho",serif;fill:var(--ad-text)}
.article-diagram svg .ad-label{font-size:18px;font-weight:600}
.article-diagram svg .ad-sub{font-size:12px;fill:var(--ad-muted)}
/* fig1 (wuxing-fig01) only: the 木/火/土/金/水 element glyph is the node's
   primary attribute name, ranked above its function copy (.ad-sub below).
   Given its own explicit fill so it renders correctly regardless of the
   generic ".article-diagram svg text" fill inheritance elsewhere. */
.article-diagram svg .ad-node__glyph{fill:var(--ad-gold-soft)}
.article-diagram svg .ad-node{fill:rgba(13,13,16,.96);stroke:rgba(210,170,77,.66);stroke-width:1.6}
.article-diagram svg .ad-main{fill:none;stroke:rgba(227,191,104,.84);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.article-diagram svg .ad-control{fill:none;stroke:rgba(189,103,84,.78);stroke-width:1.65;stroke-dasharray:7 6;stroke-linecap:round;stroke-linejoin:round}
.article-diagram svg .ad-alt{fill:none;stroke:rgba(227,191,104,.6);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round;stroke-linejoin:round}
.article-diagram svg .ad-guide{fill:none;stroke:rgba(255,255,255,.14);stroke-width:1.2}
.article-diagram svg .ad-gate{fill:rgba(210,170,77,.08);stroke:rgba(210,170,77,.7);stroke-width:1.2}
.article-diagram svg .ad-box{fill:rgba(13,13,16,.96);stroke:rgba(210,170,77,.48);stroke-width:1.35}
.article-diagram svg .ad-box-strong{fill:rgba(210,170,77,.07);stroke:rgba(227,191,104,.78);stroke-width:1.55}
.article-diagram svg .ad-bar-bg{fill:rgba(255,255,255,.045)}
.article-diagram svg .ad-what{fill:rgba(227,191,104,.8)}
.article-diagram svg .ad-how{fill:rgba(189,103,84,.72)}
.article-diagram svg .ad-why{fill:rgba(174,178,191,.52)}

.ad-card{min-width:0;padding:.8rem .82rem;border:1px solid rgba(210,170,77,.34);border-radius:10px;background:rgba(13,13,16,.94);color:var(--ad-text);overflow-wrap:anywhere;word-break:normal}
.ad-card__badge{display:inline-block;margin:0 0 .38rem;color:var(--ad-gold-soft);font-size:.68rem;font-weight:700;letter-spacing:.08em}
.ad-card__title{margin:0;color:var(--ad-text);font-family:"Shippori Mincho",serif;font-size:.88rem;line-height:1.55;font-weight:600;overflow-wrap:anywhere}
.ad-card__copy{margin:.34rem 0 0;color:var(--ad-muted);font-size:.72rem;line-height:1.65;overflow-wrap:anywhere}
.ad-inline-arrow{display:flex;align-items:center;justify-content:center;color:var(--ad-gold);font-size:1.05rem;min-width:0}
.ad-card--flow{border-color:rgba(189,103,84,.55)}
.ad-card--flow .ad-card__badge{color:var(--ad-red-soft)}

.ad-flow-sp{display:none}
.ad-flow-sp__inputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.ad-flow-sp__node{min-width:0;padding:.7rem .55rem;border:1px solid rgba(210,170,77,.32);border-radius:9px;background:rgba(255,255,255,.018);text-align:center;color:var(--ad-text);font-size:.75rem;line-height:1.45;overflow-wrap:anywhere}
.ad-flow-sp__node b{display:block;color:var(--ad-gold-soft);font-size:.82rem;margin-bottom:.12rem}
.ad-flow-sp__arrow{text-align:center;color:var(--ad-gold);padding:.27rem 0;font-size:1rem}
.ad-flow-sp__node--strong{border-color:rgba(227,191,104,.7);background:rgba(210,170,77,.06)}

.ad-how-flow__steps{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr) 34px minmax(0,1fr);gap:.35rem;align-items:stretch}
.ad-how-flow__branch{margin:1rem 0 .65rem;text-align:center;color:var(--ad-gold-soft);font-size:.76rem;letter-spacing:.05em}
.ad-how-flow__branch-arrows{display:block;margin:.15rem auto 0;color:var(--ad-gold);font-size:1.2rem;letter-spacing:.75rem;text-indent:.75rem}
.ad-how-flow__outcomes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;align-items:stretch}
.ad-how-flow__outcomes .ad-card{height:100%}

.ad-why-grid{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(150px,.55fr) 30px minmax(0,1fr);gap:.8rem;align-items:center}
.ad-why-link{display:flex;align-items:center;justify-content:center;color:var(--ad-gold);font-size:1.3rem;min-width:0}
.ad-why-group{min-width:0;padding:.9rem;border:1px solid rgba(210,170,77,.3);border-radius:12px;background:rgba(255,255,255,.012)}
.ad-why-group--brake{border-color:rgba(189,103,84,.45)}
.ad-why-group__title{margin:0 0 .7rem;text-align:center;color:var(--ad-gold-soft);font-family:"Shippori Mincho",serif;font-size:.95rem}
.ad-why-group--brake .ad-why-group__title{color:#d98572}
.ad-why-items{display:grid;gap:.5rem}
.ad-why-item{padding:.55rem .65rem;border-radius:8px;border:1px solid rgba(210,170,77,.28);background:rgba(13,13,16,.92);text-align:center;color:var(--ad-text);font-size:.78rem;line-height:1.45;overflow-wrap:anywhere}
.ad-why-group--brake .ad-why-item{border-color:rgba(189,103,84,.34)}
.ad-why-defense{align-self:center;min-width:0;padding:.9rem .7rem;border:1px solid rgba(174,178,191,.42);border-radius:12px;background:rgba(174,178,191,.04);text-align:center}
.ad-why-defense b{display:block;margin-bottom:.28rem;color:var(--ad-text);font-family:"Shippori Mincho",serif;font-size:.94rem}
.ad-why-defense span{display:block;color:var(--ad-muted);font-size:.7rem;line-height:1.6;overflow-wrap:anywhere}

.ad-now-sp{display:none}
.ad-now-sp__loop{display:grid;gap:.35rem}
.ad-now-sp__node{padding:.72rem .7rem;border:1px solid rgba(210,170,77,.38);border-radius:9px;background:rgba(13,13,16,.94);text-align:center;color:var(--ad-text);font-size:.76rem;line-height:1.5;overflow-wrap:anywhere}
.ad-now-sp__node b{display:block;color:var(--ad-gold-soft);font-size:.82rem;margin-bottom:.1rem}
.ad-now-sp__arrow{text-align:center;color:var(--ad-gold);font-size:1rem;line-height:1}
.ad-now-sp__return{margin-top:.35rem;text-align:center;color:var(--ad-muted);font-size:.7rem;line-height:1.5}

.ad-strategy__root{max-width:420px;margin:0 auto 1rem;padding:.85rem 1rem;border:1px solid rgba(227,191,104,.72);border-radius:12px;background:rgba(210,170,77,.06);text-align:center;min-width:0}
.ad-strategy__root b{display:block;color:var(--ad-text);font-family:"Shippori Mincho",serif;font-size:.95rem;line-height:1.5}
.ad-strategy__root span{display:block;margin-top:.22rem;color:var(--ad-muted);font-size:.72rem;line-height:1.55;overflow-wrap:anywhere}
.ad-strategy__groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;align-items:start}
.ad-strategy__group{min-width:0;padding:.9rem;border:1px solid rgba(210,170,77,.28);border-radius:12px;background:rgba(255,255,255,.012)}
.ad-strategy__group--support{border-color:rgba(174,178,191,.36)}
.ad-strategy__group-title{margin:0 0 .7rem;color:var(--ad-gold-soft);font-family:"Shippori Mincho",serif;font-size:.9rem;line-height:1.55;text-align:center;overflow-wrap:anywhere}
.ad-strategy__group--support .ad-strategy__group-title{color:#d0d1d6}
.ad-strategy__cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.ad-strategy__group--support .ad-strategy__cards{grid-template-columns:1fr}
.ad-strategy__cards .ad-card{padding:.66rem .7rem}

@media(max-width:760px){
  .article-diagram{margin:1.8rem 0 2rem;padding:1rem .85rem}
  .article-diagram__lead{font-size:.78rem}
  .article-diagram__legend{display:grid;grid-template-columns:1fr;gap:.45rem;padding:.7rem .2rem;border-left:0;border-right:0}
  .article-diagram__svg{max-height:440px}
  .ad-how-flow__steps{grid-template-columns:1fr;gap:.35rem}
  .ad-how-flow__steps .ad-inline-arrow{transform:rotate(90deg);min-height:24px}
  .ad-how-flow__outcomes{grid-template-columns:1fr}
  .ad-how-flow__branch-arrows{letter-spacing:.35rem;text-indent:.35rem}
  .ad-why-grid{grid-template-columns:1fr;gap:.4rem}
  .ad-why-grid .ad-why-link{transform:rotate(90deg);min-height:20px}
  .ad-strategy__groups{grid-template-columns:1fr}
  .ad-strategy__cards{grid-template-columns:1fr}
}
@media(max-width:520px){
  .article-diagram--flow .article-diagram__svg{display:none}
  .article-diagram--flow .ad-flow-sp{display:block}
  .article-diagram--now .article-diagram__svg{display:none}
  .article-diagram--now .ad-now-sp{display:block}
}
/* ---- components/diagrams/diagram-core-v1.css ---- */
/* Rayne-Lab reusable article diagrams v1 */
.rl-diagram {
  --rl-panel: rgba(12, 18, 24, .88);
  --rl-panel-soft: rgba(255, 255, 255, .035);
  --rl-line: rgba(211, 224, 231, .18);
  --rl-text: #eef4f6;
  --rl-muted: #aebdc4;
  --rl-gold: #d8bb73;
  --rl-accent: #79a7ad;
  --gogyo-moku: #8eac78;
  --gogyo-ka: #b77a6f;
  --gogyo-do: #b19a71;
  --gogyo-kin: #b9c0c8;
  --gogyo-sui: #7395ad;
  margin: 2rem 0;
  border: 1px solid var(--rl-line);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  overflow: hidden;
  color: var(--rl-text);
}

.rl-diagram__inner { padding: 20px; }
.rl-diagram__kicker {
  margin: 0 0 6px;
  font-size: .74rem;
  letter-spacing: .16em;
  color: var(--rl-gold);
}
.rl-diagram__title { margin: 0; font-size: clamp(1.05rem, 2vw, 1.35rem); line-height: 1.45; }
.rl-diagram__lead, .rl-diagram__note, .rl-diagram__fallback {
  margin: 8px 0 0;
  color: var(--rl-muted);
  line-height: 1.8;
}
.rl-diagram__note {
  padding-top: 12px;
  border-top: 1px solid var(--rl-line);
  font-size: .88rem;
}
.rl-diagram__error { color: #d8a7a0; }
.rl-diagram__section { margin-top: 18px; }
.rl-diagram__section-title { margin: 0 0 10px; font-size: .92rem; color: var(--rl-muted); }

.rl-stack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.rl-stack__card,
.rl-function-step,
.rl-evidence-card,
.rl-route-card {
  min-width: 0;
  border: 1px solid var(--rl-line);
  border-radius: 14px;
  background: var(--rl-panel-soft);
  padding: 14px;
}
.rl-stack__position {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid rgba(216,187,115,.35);
  border-radius: 999px;
  color: var(--rl-gold);
  font-size: .76rem;
}
.rl-stack__id { margin: 10px 0 3px; font-size: 1.22rem; }
.rl-stack__name, .rl-stack__copy { margin: 0; }
.rl-stack__name { font-size: .86rem; color: var(--rl-muted); }
.rl-stack__copy { margin-top: 8px; font-size: .84rem; line-height: 1.65; }
.rl-stack__arrow { display: none; }

.rl-function-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.rl-function-step { position: relative; }
.rl-function-step + .rl-function-step::before {
  content: "→";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--rl-gold);
  font-weight: 700;
}
.rl-function-step__label { margin: 0 0 6px; color: var(--rl-gold); font-size: .78rem; letter-spacing: .08em; }
.rl-function-step__text { margin: 0; line-height: 1.7; }
.rl-function-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}
.rl-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid var(--rl-line);
  border-radius: 999px;
  color: var(--rl-muted);
  font-size: .78rem;
}

.rl-enneagram {
  display: grid;
  grid-template-columns: minmax(220px, 360px) minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 16px;
}
.rl-enneagram__svg { width: 100%; height: auto; overflow: visible; }
.rl-enneagram__ring { fill: none; stroke: rgba(216,187,115,.28); stroke-width: 1.5; }
.rl-enneagram__point circle { fill: #162029; stroke: rgba(211,224,231,.35); stroke-width: 1.5; }
.rl-enneagram__point text { fill: var(--rl-text); font-size: 16px; font-weight: 700; text-anchor: middle; dominant-baseline: middle; }
.rl-enneagram__point.is-selected circle { fill: rgba(216,187,115,.18); stroke: var(--rl-gold); stroke-width: 3; }
.rl-enneagram__point.is-selected text { fill: var(--rl-gold); }
.rl-enneagram__detail {
  border-left: 2px solid rgba(216,187,115,.45);
  padding-left: 16px;
}
.rl-enneagram__selected { margin: 0 0 4px; color: var(--rl-gold); font-size: .78rem; letter-spacing: .08em; }
.rl-enneagram__type { margin: 0; font-size: 1.25rem; }
.rl-enneagram__motive { margin: 8px 0 0; line-height: 1.75; }

.rl-gogyo-list {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
.rl-gogyo-row {
  --element-color: var(--rl-accent);
  display: grid;
  grid-template-columns: 56px 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  border: 1px solid var(--rl-line);
  border-left: 4px solid var(--element-color);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--rl-panel-soft);
}
.rl-gogyo-row[data-element="wood"] { --element-color: var(--gogyo-moku); }
.rl-gogyo-row[data-element="fire"] { --element-color: var(--gogyo-ka); }
.rl-gogyo-row[data-element="earth"] { --element-color: var(--gogyo-do); }
.rl-gogyo-row[data-element="metal"] { --element-color: var(--gogyo-kin); }
.rl-gogyo-row[data-element="water"] { --element-color: var(--gogyo-sui); }
.rl-gogyo-row__name { font-weight: 700; }
.rl-gogyo-row__level {
  display: inline-flex;
  justify-content: center;
  padding: 3px 7px;
  border: 1px solid var(--rl-line);
  border-radius: 999px;
  font-size: .76rem;
}
.rl-gogyo-row__note { color: var(--rl-muted); line-height: 1.55; font-size: .86rem; }

.rl-evidence-grid, .rl-route-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.rl-evidence-card__label, .rl-route-card__label { margin: 0 0 5px; color: var(--rl-gold); font-size: .76rem; }
.rl-evidence-card__text, .rl-route-card__text { margin: 0; line-height: 1.65; font-size: .86rem; }

/* Generic comparison family */
.rl-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
}
.rl-comparison-grid > .rl-comparison-card:only-child { grid-column: 1 / -1; }
.rl-comparison-card {
  min-width: 0;
  border: 1px solid var(--rl-line);
  border-radius: 14px;
  background: var(--rl-panel-soft);
  padding: 15px;
}
.rl-comparison-card__title { margin: 0 0 5px; font-size: 1rem; line-height: 1.5; }
.rl-comparison-card__common {
  margin: 0 0 13px;
  color: var(--rl-muted);
  font-size: .84rem;
  line-height: 1.65;
  min-height: 2.8em;
}
.rl-comparison-sides {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
  gap: 7px;
  align-items: stretch;
}
.rl-comparison-side {
  min-width: 0;
  border: 1px solid var(--rl-line);
  border-radius: 11px;
  padding: 11px;
  background: rgba(0,0,0,.13);
  overflow-wrap: anywhere;
}
.rl-comparison-side__label {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 3px 8px;
  border: 1px solid rgba(216,187,115,.35);
  border-radius: 999px;
  color: var(--rl-gold);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.rl-comparison-side__eyebrow { margin: 8px 0 3px; font-size: .9rem; font-weight: 800; line-height: 1.5; }
.rl-comparison-side__text { margin: 0; color: var(--rl-text); font-size: .82rem; line-height: 1.6; }
.rl-comparison-vs {
  align-self: center;
  justify-self: center;
  color: var(--rl-muted);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
}
.rl-comparison-probe {
  margin-top: 11px;
  padding: 10px 12px;
  border-left: 3px solid rgba(216,187,115,.65);
  border-radius: 7px;
  background: rgba(216,187,115,.05);
}
.rl-comparison-probe__label {
  display: block;
  margin-bottom: 3px;
  color: var(--rl-gold);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .06em;
}
.rl-comparison-probe__text { margin: 0; font-size: .84rem; line-height: 1.65; }

.rl-comparison-table-wrap {
  margin-top: 18px;
  border: 1px solid var(--rl-line);
  border-radius: 14px;
  overflow: hidden;
}
.rl-comparison-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.rl-comparison-table th,
.rl-comparison-table td {
  padding: 13px;
  border-right: 1px solid var(--rl-line);
  border-bottom: 1px solid var(--rl-line);
  vertical-align: top;
  overflow-wrap: anywhere;
}
.rl-comparison-table th { background: rgba(216,187,115,.05); font-size: .84rem; }
.rl-comparison-table td { font-size: .84rem; line-height: 1.65; }
.rl-comparison-table tr:last-child td { border-bottom: 0; }
.rl-comparison-table th:last-child,
.rl-comparison-table td:last-child { border-right: 0; }
.rl-comparison-table__axis { width: 18%; color: var(--rl-gold); font-weight: 700; }
.rl-comparison-mobile { display: none; }
.rl-comparison-mobile__card {
  border: 1px solid var(--rl-line);
  border-radius: 12px;
  padding: 12px;
  background: var(--rl-panel-soft);
}
.rl-comparison-mobile__card + .rl-comparison-mobile__card { margin-top: 10px; }
.rl-comparison-mobile__title { margin: 0 0 8px; font-size: .95rem; }
.rl-comparison-mobile__row {
  display: grid;
  grid-template-columns: 90px minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--rl-line);
  font-size: .82rem;
}
.rl-comparison-mobile__row:first-of-type { border-top: 0; }
.rl-comparison-mobile__axis { color: var(--rl-gold); font-weight: 700; }

@media (max-width: 760px) {
  .rl-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rl-enneagram { grid-template-columns: 1fr; }
  .rl-enneagram__svg { max-width: 320px; margin: 0 auto; }
  .rl-comparison-grid { grid-template-columns: 1fr; }
  .rl-comparison-card__common { min-height: 0; }
  .rl-comparison-table-wrap { display: none; }
  .rl-comparison-mobile { display: block; margin-top: 18px; }
}

@media (max-width: 520px) {
  .rl-diagram { margin: 1.5rem 0; border-radius: 14px; }
  .rl-diagram__inner { padding: 15px; }
  .rl-stack, .rl-function-flow, .rl-evidence-grid, .rl-route-grid { grid-template-columns: 1fr; }
  .rl-function-step + .rl-function-step::before {
    content: "↓";
    left: 50%;
    top: -10px;
    transform: translate(-50%, -50%);
  }
  .rl-gogyo-row {
    grid-template-columns: 42px 62px minmax(0, 1fr);
    gap: 7px;
    padding: 9px;
  }
  .rl-comparison-sides { grid-template-columns: 1fr; }
  .rl-comparison-vs::before { content: "↓ "; }
  .rl-comparison-mobile__row { grid-template-columns: 78px minmax(0, 1fr); }
}
/* ---- components/diagrams/diagram-rollout-v1.css ---- */
.rl-enneagram__point.is-primary circle,
.rl-enneagram__point.is-selected circle {
  fill: rgba(216,187,115,.20);
  stroke: var(--rl-gold);
  stroke-width: 3;
}
.rl-enneagram__point.is-primary text,
.rl-enneagram__point.is-selected text { fill: var(--rl-gold); }
.rl-enneagram__point.is-secondary circle {
  fill: rgba(121,167,173,.12);
  stroke: var(--rl-accent);
  stroke-width: 2.4;
}
.rl-enneagram__point.is-secondary text { fill: var(--rl-text); }
.rl-enneagram-centers {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}
.rl-enneagram-centers span {
  display: block;
  padding: 7px 9px;
  border: 1px solid var(--rl-line);
  border-radius: 9px;
  color: var(--rl-muted);
  font-size: .8rem;
}

.rl-relation-cycle__canvas { max-width: 660px; margin: 14px auto 2px; }
.rl-relation-cycle__svg { width: 100%; height: auto; overflow: visible; }
.rl-relation-cycle__guide { fill: none; stroke: rgba(211,224,231,.08); stroke-width: 1.4; }
.rl-relation-cycle__edge { fill: none; vector-effect: non-scaling-stroke; }
.rl-relation-cycle__edge--sosho { stroke: var(--rl-gold); stroke-width: 2.8; opacity: .88; }
.rl-relation-cycle__edge--sokoku { stroke: #bd6754; stroke-width: 2.6; stroke-dasharray: 7 6; opacity: .86; }
.rl-relation-cycle__marker--sosho { fill: var(--rl-gold); }
.rl-relation-cycle__marker--sokoku { fill: none; stroke: #bd6754; stroke-width: 2.2; stroke-linecap: round; }
.rl-relation-cycle__node { --element-color: var(--rl-gold); }
.rl-relation-cycle__node[data-element="wood"] { --element-color: var(--gogyo-moku); }
.rl-relation-cycle__node[data-element="fire"] { --element-color: var(--gogyo-ka); }
.rl-relation-cycle__node[data-element="earth"] { --element-color: var(--gogyo-do); }
.rl-relation-cycle__node[data-element="metal"] { --element-color: var(--gogyo-kin); }
.rl-relation-cycle__node[data-element="water"] { --element-color: var(--gogyo-sui); }
.rl-relation-cycle__node circle { fill: #15212a; stroke: var(--element-color); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.rl-relation-cycle__node-label { fill: var(--rl-text); font-size: 19px; font-weight: 700; dominant-baseline: middle; }
.rl-relation-cycle__node-role { fill: var(--rl-muted); font-size: 11px; }
.rl-relation-cycle__lists { margin-top: 8px; }
.rl-relation-cycle__lists--combined { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.rl-relation-cycle__relation-list { min-width: 0; }
.rl-relation-cycle__relation-list h4 { display:flex; gap:9px; align-items:center; margin:0 0 8px; color:var(--rl-muted); font-size:.84rem; }
.rl-relation-cycle__line-key { width:28px; height:0; border-top:3px solid var(--rl-gold); }
.rl-relation-cycle__line-key--sokoku { border-top-color:#bd6754; border-top-style:dashed; }
.rl-relation-cycle__cards { display:grid; gap:7px; }
.rl-relation-cycle__card {
  display:grid;
  grid-template-columns:68px minmax(130px,.65fr) minmax(0,1.35fr);
  gap:9px;
  align-items:start;
  padding:9px 10px;
  border:1px solid var(--rl-line);
  border-radius:11px;
  background:var(--rl-panel-soft);
}
.rl-relation-cycle__pair,.rl-relation-cycle__short,.rl-relation-cycle__detail { margin:0; }
.rl-relation-cycle__pair { font-weight:700; white-space:nowrap; }
.rl-relation-cycle__short { color:var(--rl-gold); font-size:.84rem; line-height:1.55; }
.rl-relation-cycle__card[data-relation="sokoku"] .rl-relation-cycle__short { color:#d39a8c; }
.rl-relation-cycle__detail { color:var(--rl-muted); font-size:.8rem; line-height:1.55; }

@media (max-width: 820px) {
  .rl-relation-cycle__lists--combined { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .rl-relation-cycle__node-role { font-size: 10px; }
  .rl-relation-cycle__card { grid-template-columns:58px minmax(0,1fr); }
  .rl-relation-cycle__detail { grid-column:2; }
}
/* ---- components/diagrams/diagram-structures-v1.css ---- */
/* Rayne-Lab reusable meaning-structure diagrams v1 */
.rl-mnemonic {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 16px;
}
.rl-mnemonic__step {
  min-width: 0;
  border: 1px solid var(--rl-line);
  border-radius: 14px;
  background: var(--rl-panel-soft);
  padding: 14px;
}
.rl-mnemonic__index {
  display: inline-flex;
  min-width: 30px;
  min-height: 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(216,187,115,.35);
  border-radius: 999px;
  color: var(--rl-gold);
  font-size: .76rem;
  font-weight: 700;
}
.rl-mnemonic__title { margin: 10px 0 4px; font-size: .98rem; }
.rl-mnemonic__copy { margin: 0; color: var(--rl-muted); font-size: .84rem; line-height: 1.65; }
.rl-mnemonic--chronological .rl-mnemonic__step { position: relative; }
.rl-mnemonic--chronological .rl-mnemonic__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translate(50%,-50%);
  color: var(--rl-gold);
  z-index: 2;
}

.rl-layer-stack {
  display: grid;
  gap: 9px;
  margin-top: 16px;
}
.rl-layer-stack__layer {
  display: grid;
  grid-template-columns: minmax(110px,.34fr) minmax(0,1.66fr);
  gap: 14px;
  align-items: start;
  border: 1px solid var(--rl-line);
  border-left: 3px solid rgba(216,187,115,.55);
  border-radius: 12px;
  background: var(--rl-panel-soft);
  padding: 12px 14px;
}
.rl-layer-stack__label { margin: 0; color: var(--rl-gold); font-size: .76rem; letter-spacing: .05em; }
.rl-layer-stack__title { margin: 2px 0 0; font-size: .94rem; }
.rl-layer-stack__copy { margin: 0; color: var(--rl-muted); font-size: .84rem; line-height: 1.65; }

.rl-hypothesis-loop {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
  margin-top: 16px;
}
.rl-hypothesis-loop__step {
  position: relative;
  min-width: 0;
  border: 1px solid var(--rl-line);
  border-radius: 14px;
  background: var(--rl-panel-soft);
  padding: 14px;
}
.rl-hypothesis-loop__step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -14px;
  top: 50%;
  transform: translate(50%,-50%);
  color: var(--rl-gold);
  font-weight: 700;
}
.rl-hypothesis-loop__label { margin: 0 0 5px; color: var(--rl-gold); font-size: .78rem; }
.rl-hypothesis-loop__copy { margin: 0; color: var(--rl-muted); font-size: .84rem; line-height: 1.65; }
.rl-hypothesis-loop__return {
  margin: 10px 0 0;
  text-align: center;
  color: var(--rl-muted);
  font-size: .8rem;
}

.rl-correspondence-wrap { margin-top: 16px; overflow-x: auto; }
.rl-correspondence {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--rl-line);
  border-radius: 12px;
  overflow: hidden;
  font-size: .84rem;
}
.rl-correspondence th,
.rl-correspondence td { padding: 10px 11px; border-right: 1px solid var(--rl-line); border-bottom: 1px solid var(--rl-line); text-align: left; }
.rl-correspondence th:last-child,
.rl-correspondence td:last-child { border-right: 0; }
.rl-correspondence tr:last-child td { border-bottom: 0; }
.rl-correspondence thead th { color: var(--rl-gold); background: rgba(216,187,115,.06); font-weight: 600; }
.rl-correspondence tbody td { color: var(--rl-muted); background: var(--rl-panel-soft); }
.rl-correspondence__mobile { display: none; }
.rl-correspondence__card {
  border: 1px solid var(--rl-line);
  border-radius: 12px;
  background: var(--rl-panel-soft);
  padding: 11px;
}
.rl-correspondence__card strong { color: var(--rl-gold); }
.rl-correspondence__card dl { margin: 8px 0 0; display: grid; grid-template-columns: 72px 1fr; gap: 5px 8px; }
.rl-correspondence__card dt { color: var(--rl-muted); font-size: .76rem; }
.rl-correspondence__card dd { margin: 0; font-size: .84rem; }

@media (max-width: 700px) {
  .rl-mnemonic--chronological .rl-mnemonic__step:not(:last-child)::after,
  .rl-hypothesis-loop__step:not(:last-child)::after {
    content: "↓";
    right: auto;
    left: 50%;
    top: auto;
    bottom: -15px;
    transform: translate(-50%,50%);
  }
  .rl-mnemonic--chronological,
  .rl-hypothesis-loop { grid-template-columns: 1fr; }
  .rl-layer-stack__layer { grid-template-columns: 1fr; gap: 6px; }
  .rl-correspondence-wrap { display: none; }
  .rl-correspondence__mobile { display: grid; gap: 8px; margin-top: 14px; }
}