/* ============================================================
   Compact, static, labelled ikigai figure (spec R2-A §5).
   Pairs with ikigai-figure.js. Link AFTER ikigai-diagram.css so the
   --ikigai-c-* canonical colour variables are already defined; also
   safe standalone (falls back to the literal colours below).
   ============================================================ */
.ikigai-figure{
  display:flex;align-items:center;gap:16px;margin:0;padding:0;
  flex-wrap:wrap;
}
.ikigai-figure__diagram{
  width:88px;height:88px;flex:none;
}
.ikigai-figure__circle{
  fill-opacity:0.55;
  stroke:var(--fg,#ededed);stroke-opacity:0.25;stroke-width:1;
  mix-blend-mode:multiply;
}
[data-theme="dark"] .ikigai-figure__circle{ mix-blend-mode:screen; fill-opacity:0.5; }

.ikigai-figure__legend{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:6px;
  font-family:var(--font-sans, sans-serif);
}
.ikigai-figure__item{display:flex;align-items:flex-start;gap:8px;}
.ikigai-figure__swatch{
  width:11px;height:11px;border-radius:50%;flex:none;margin-top:3px;
}
.ikigai-figure__text{display:flex;flex-direction:column;line-height:1.3;}
/* D2 (RX-5/RO2-6): 16px matches body size (dd.css body{font-size:16px}) at
   every width -- 16px already clears the >=16px desktop / >=15px phone
   floor without a breakpoint. */
.ikigai-figure__text strong{font-size:16px;font-weight:600;color:var(--fg,#ededed);}
.ikigai-figure__sub{font-size:12px;color:var(--faint,#8a8a8a);}

/* compact contexts (table row, small card) can shrink the diagram further
   without dropping below the 16px/15px text floor (D2). */
.ikigai-figure--compact .ikigai-figure__diagram{width:64px;height:64px;}