/* ============================================================
   RafiChart — shared styles for interactive SVG charts
   Uses each page's CSS variables (--hl, --ink, --border, etc.)
   ============================================================ */
.rafi-chart { margin: 18px 0 4px; }
.rafi-head { display:flex; flex-wrap:wrap; gap:10px 14px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.rafi-ctrls { display:flex; flex-wrap:wrap; gap:8px; }
.rafi-seg { display:inline-flex; background:#F0F0EE; border:1px solid var(--border,#E5E5E2); border-radius:8px; padding:2px; gap:2px; }
.rafi-seg button { font:600 11.5px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2','DejaVu Sans','Arial Unicode MS',sans-serif; color:var(--text-2,#555); background:transparent; border:0; padding:6px 11px; border-radius:6px; cursor:pointer; transition:background .18s,color .18s,box-shadow .18s; -webkit-tap-highlight-color:transparent; }
.rafi-seg button.on { background:#fff; color:var(--text,#1a1a1a); box-shadow:0 1px 2px rgba(0,0,0,.09); }
.rafi-seg button:active { transform:scale(.95); }
.rafi-legend { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.rafi-leg { display:inline-flex; align-items:center; gap:6px; font:500 12px/1 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2','DejaVu Sans','Arial Unicode MS',sans-serif; color:var(--text-2,#555); cursor:pointer; user-select:none; padding:5px 9px; border-radius:7px; border:1px solid transparent; transition:border-color .15s,opacity .15s; }
.rafi-leg:hover { border-color:var(--border,#E5E5E2); }
.rafi-leg .sw { width:11px; height:11px; border-radius:3px; flex:none; }
.rafi-leg.off { opacity:.42; }
.rafi-leg.off .sw { background:var(--text-3,#909090)!important; }
.rafi-svg-wrap { position:relative; }
.rafi-svg { width:100%; height:auto; display:block; touch-action:pan-y; cursor:crosshair; }
.rafi-bar .rafi-svg { cursor:default; }
.rafi-tip { position:absolute; pointer-events:none; opacity:0; left:0; top:6px; transform:translate(-50%,0); background:var(--ink,#2d2d2d); color:#fff; border-radius:9px; padding:8px 11px; font:500 11.5px/1.5 'JetBrains Mono',monospace; white-space:nowrap; box-shadow:0 8px 24px rgba(0,0,0,.24); transition:opacity .12s; z-index:6; }
.rafi-tip .ep { color:#b9b9b9; font-size:10px; margin-bottom:4px; letter-spacing:.06em; text-transform:uppercase; }
.rafi-tip .row { display:flex; align-items:center; gap:7px; }
.rafi-tip .row .dot { width:8px; height:8px; border-radius:2px; flex:none; }
.rafi-tip .row b { font-weight:600; }
.rafi-axis text { font:500 10px 'JetBrains Mono',monospace; fill:var(--text-3,#909090); }
.rafi-grid line { stroke:var(--border-light,#EEEEEB); stroke-width:1; shape-rendering:crispEdges; }
.rafi-cap { font:500 11px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2','DejaVu Sans','Arial Unicode MS',sans-serif; color:var(--text-3,#909090); margin-top:10px; text-align:center; }
.rafi-bar-row .lbl { font:500 11.5px -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,'Segoe UI Symbol','Apple Symbols','Noto Sans Symbols 2','DejaVu Sans','Arial Unicode MS',sans-serif; fill:var(--text-2,#555); }
.rafi-bar-row.low .lbl { fill:var(--hl,#D97706); }
.rafi-bar-row .val { font:600 11px 'JetBrains Mono',monospace; fill:var(--text,#1a1a1a); }
.rafi-bar-rect { cursor:pointer; }
.rafi-bar-row { transition:transform .42s cubic-bezier(.4,0,.2,1); }
@media (max-width:700px){
  .rafi-seg button { padding:6px 9px; font-size:11px; }
  .rafi-tip { font-size:10.5px; padding:7px 9px; }
  .rafi-head { gap:8px; }
  .rafi-legend { gap:4px; }
  .rafi-leg { font-size:11px; padding:4px 7px; }
}