.type-name:has(.rule-badge) { position:relative; overflow:hidden; padding-right:18px; }
.type-name:has(.rule-badge) .type-label { min-width:0; }
.rule-badge { position:absolute; bottom:0; right:0; appearance:none; width:18px; height:17px; margin:0; padding:0; border:0; border-radius:0; background:transparent; color:var(--rule-dot); cursor:pointer; }
.rule-badge span { display:none; }
.rule-badge::after { content:''; position:absolute; bottom:0; right:0; width:9px; height:9px; background:var(--rule-dot); clip-path:polygon(100% 0,100% 100%,0 100%); }
/* Bleed the prediction triangle past the header clip to avoid subpixel hairlines.
   The visible triangle remains 9px; the button's hit area stays unchanged. */
.planning-mode .rule-badge::after { bottom:-1px; right:-1px; width:10px; height:10px; }
.rule-badge:focus-visible { outline:2px solid #fff; outline-offset:-2px; }
.rule-detail-dialog { width:min(360px,calc(100% - 32px)); padding:20px; border:1px solid #cbd5e1; border-radius:14px; background:#fff; color:#334155; box-shadow:0 12px 40px #0f172a44; }
.rule-detail-dialog::backdrop { background:#0f172a80; }
.rule-detail-dialog p { margin:0 0 16px; white-space:pre-wrap; overflow-wrap:anywhere; font:14px/1.6 system-ui,sans-serif; }
.rule-detail-dialog button { width:100%; min-height:42px; border:1px solid #cbd5e1; border-radius:8px; background:#f1f5f9; color:#334155; font:600 14px system-ui,sans-serif; cursor:pointer; }