/* Final responsive layer: keep explanations in-flow, not over the title. */
.cabinet-view > *, .inbox-summary > *, .inbox-copy, .inbox-actions {min-width:0}
.inbox-summary > div {flex-wrap:wrap;align-items:center}
.inbox-summary strong {overflow-wrap:anywhere}
.metric-explained {display:flex;flex-direction:column}
.metric-explained:hover,.metric-explained:focus-visible {transform:none}
.metric-hover {position:relative;inset:auto;transform:none;margin:20px -24px -24px;padding:18px 24px;background:#e9f4ef;color:#173e39;border-top:1px solid #d6e7df}
.metric-explained > p {margin-bottom:20px}
.metric-explained .metric-hover {margin-top:auto}
.metric-hover small {color:#42716a}
.metric-hover p {color:#315d55}
.metric-more {color:#08796e;min-height:44px;text-align:left}
button:focus-visible,a:focus-visible {outline:3px solid #55a994;outline-offset:4px}
dialog {scrollbar-gutter:stable}
dialog p,dialog li {line-height:1.7}
.metric-dialog-note,.compatibility-note {font-size:12px;line-height:1.6}
@media(max-width:760px){.metric-hover{margin:18px -22px -22px;padding:16px 22px}.inbox-summary{padding:22px 20px}.inbox-summary>div{gap:10px}.metric-dialog-hero{align-items:flex-start}.metric-dialog-hero h2{font-size:24px}.metric-dialog-grid article{padding:16px}}
@media(max-width:380px){.metric-dialog-hero{flex-direction:column}.inbox-item{padding:18px 14px;gap:12px}.inbox-avatar{width:42px;height:42px}.cp-bars>div{grid-template-columns:minmax(70px,1fr) minmax(0,1fr) 36px}}