.aq-chart { --aq-red:var(--ar-accent, #8c241d); margin:24px 0 8px; }
.aq-plot { display:grid; grid-template-columns:28px minmax(0, 1fr); height:224px; padding-bottom:28px; }
.aq-axis { position:relative; height:100%; color:var(--ar-muted, #706a64); font-size:12px; }
.aq-tick { position:absolute; right:10px; bottom:calc(var(--tick) * 20%); transform:translateY(50%); }
.aq-bars { display:flex; gap:clamp(12px, 4vw, 36px); align-items:stretch; border-bottom:1px solid var(--ar-rule, #d8d1c9); background:repeating-linear-gradient(to top, transparent 0, transparent calc(20% - 1px), var(--ar-rule, #e7e0d9) calc(20% - 1px), var(--ar-rule, #e7e0d9) 20%); padding:0 14px; }
.aq-bar-button { position:relative; flex:1; min-width:0; height:100%; padding:0; border:0; border-radius:0; background:transparent; cursor:pointer; color:inherit; font:inherit; display:flex; align-items:flex-end; justify-content:center; }
.aq-fill { position:relative; display:block; width:100%; max-width:86px; height:calc(var(--value) * 20%); background:var(--aq-red); border-radius:3px 3px 0 0; transition:filter .15s; }
.agape-reader .aq-bar-button:hover, .agape-reader .aq-bar-button:active { background:transparent; }
.aq-bar-button:hover .aq-fill,.aq-bar-button[aria-expanded="true"] .aq-fill { filter:brightness(.82); }
.aq-bar-button:focus-visible { outline:2px solid var(--aq-red); outline-offset:4px; }
.aq-number { position:absolute; top:calc(100% + 8px); left:0; right:0; text-align:center; font-size:12px; line-height:18px; }
.aq-fill.aq-missing { height:auto; background:transparent; text-align:center; color:var(--ar-muted, #706a64); }
.aq-caption { margin:8px 0 0!important; font-size:14px!important; color:var(--ar-muted, #706a64); }
.aq-detail { position:fixed; z-index:1500; width:380px; max-width:calc(100vw - 32px); margin:0; padding:18px 20px; border:1px solid var(--ar-rule, #d8d1c9); border-radius:6px; background:#fffcf7; box-shadow:0 8px 28px rgba(45,30,24,.16); overflow:auto; overflow-wrap:anywhere; }
.aq-detail[data-interaction="pointer"] { pointer-events:none; }
.aq-close[hidden] { display:none; }
.aq-detail[hidden] { display:none; }
.aq-detail p { margin:0 0 10px!important; }
.aq-detail .aq-detail-label { font-size:12px; font-weight:500; color:var(--ar-muted, #706a64); }
.aq-detail .aq-question { font-size:16px; line-height:1.55; }
.aq-detail .aq-concept { font-size:13px; line-height:1.55; }
.aq-close { padding:6px 0; border:0; background:transparent; color:var(--aq-red); font:inherit; font-size:12px; text-decoration:underline; cursor:pointer; }
.aq-close:focus-visible { outline:2px solid var(--aq-red); outline-offset:3px; }
@media (max-width:600px) {
  .aq-plot { position:relative; display:flex; flex-direction:column-reverse; height:auto; padding:0 0 28px 30px; }
  .aq-axis { position:absolute; bottom:0; left:30px; right:0; height:20px; }
  .aq-tick { right:auto; bottom:auto; left:calc(var(--tick) * 20%); transform:translateX(-50%); }
  .aq-bars { display:flex; flex-direction:column; gap:15px; padding:0; border-bottom:0; border-left:1px solid var(--ar-rule, #d8d1c9); background:repeating-linear-gradient(to right, transparent 0, transparent calc(20% - 1px), var(--ar-rule, #e7e0d9) calc(20% - 1px), var(--ar-rule, #e7e0d9) 20%); }
  .aq-bar-button { flex:none; height:32px; align-items:center; justify-content:flex-start; }
  .aq-fill { height:100%; width:calc(var(--value) * 20%); max-width:none; border-radius:0 3px 3px 0; }
  .aq-number { top:50%; transform:translateY(-50%); left:-30px; right:auto; width:23px; }
  .aq-fill.aq-missing { width:22px; }
  .aq-detail { padding:16px; }
}

.aq-detail .aq-answer { color:#8c241d; border-bottom:1px solid #171714; font:inherit; white-space:nowrap; }

.aq-detail .aq-concept { margin-top:16px; padding-top:14px; border-top:1px solid #e4d9d0; color:#655c56; }
.aq-concept-label { display:block; font-size:11px; font-weight:600; color:#776a61; margin-bottom:6px; }
.aq-detail .aq-concept p { margin-bottom:0!important; font-size:13px; line-height:1.6; }

/* SVG triangle centroid is (10, 38/3) in its 20×20 viewBox. Anchor it to the bar corner. */
.aq-caution-icon { position:absolute; top:0; right:0; transform:translate(50%, -63.333333%); display:block; width:18px; height:18px; pointer-events:none; }
.aq-detail .aq-caution-note { margin-top:14px; padding:10px 12px; border:1px solid #e8d27b; border-radius:4px; background:#fff3bf; color:#57430d; }
.aq-caution-label { display:block; margin-bottom:4px; font-size:12px; font-weight:600; }
.aq-detail .aq-caution-note p { margin-bottom:0!important; font-size:13px; line-height:1.5; }
@media (max-width:600px) {
  .aq-caution-icon { width:16px; height:16px; }
}