.item-render-example{--item-render-ink:#0f172a;--item-render-muted:#64748b;min-height:0;color:var(--item-render-ink);flex-direction:column;gap:10px;display:flex}.item-render-example__toolbar{background:linear-gradient(135deg,#f8fafc 0%,#eff6ff 100%);border:1px solid #dbe2ea;border-radius:12px;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px;display:flex}.item-render-example__toolbar>div,.item-render-example__toolbar strong,.item-render-example__toolbar small{display:block}.item-render-example__eyebrow{color:#2563eb;letter-spacing:.1em;margin-bottom:2px;font-size:9px;font-weight:800;display:block}.item-render-example__toolbar strong{font-size:14px}.item-render-example__toolbar small{color:var(--item-render-muted);margin-top:2px;font-size:11px}.item-render-example__filter{color:#334155;min-height:36px;font:inherit;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:9px;flex:none;align-items:center;gap:7px;padding:0 10px;font-size:12px;font-weight:650;display:inline-flex}.item-render-example__filter:hover,.item-render-example__filter[aria-pressed=true]{color:#1d4ed8;background:#eff6ff;border-color:#93c5fd}.item-render-example__filter>span,.item-render-example__live-dot{background:#f59e0b;border-radius:50%;width:7px;height:7px}.item-render-example__filter b{color:#fff;background:#2563eb;border-radius:999px;place-items:center;min-width:19px;height:19px;font-size:10px;display:inline-grid}.item-render-example .item-render-example__grid-container{height:430px}.item-render-example__footer{min-height:22px;color:var(--item-render-muted);align-items:center;gap:7px;font-size:11px;display:flex}.item-render-example__live-dot{background:#22c55e;flex:none;box-shadow:0 0 0 3px #dcfce7}[role=grid].item-render-dashboard-grid .item-render-center,[role=grid].item-render-dashboard-grid .item-render-trend,[role=grid].item-render-dashboard-grid .item-render-heatmap,[role=grid].item-render-dashboard-grid .item-render-gauge{align-items:center;width:100%;min-width:0;line-height:normal;display:flex}[role=grid].item-render-dashboard-grid .item-render-center{gap:9px}.item-render-center__mark{color:#1d4ed8;background:#eff6ff;border:1px solid #bfdbfe;border-radius:8px;flex:none;place-items:center;width:30px;height:30px;font-size:11px;font-weight:800;display:inline-grid}.item-render-center__copy,.item-render-center__copy strong,.item-render-center__copy small{min-width:0;display:block}.item-render-center__copy strong{color:#0f172a;text-overflow:ellipsis;font-size:12px;overflow:hidden}.item-render-center__copy small{color:#64748b;text-overflow:ellipsis;margin-top:2px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;overflow:hidden}.item-render-status{border-radius:999px;justify-content:center;align-items:center;gap:5px;min-width:68px;padding:3px 7px;font-size:10px;font-weight:750;line-height:normal;display:inline-flex}.item-render-status i{background:currentColor;border-radius:50%;width:5px;height:5px}.item-render-status--healthy{color:#15803d;background:#dcfce7}.item-render-status--watch{color:#b45309;background:#fef3c7}.item-render-status--critical{color:#b91c1c;background:#fee2e2}[role=grid].item-render-dashboard-grid .item-render-trend{gap:8px}.item-render-trend__canvas{flex:none;width:118px;height:28px}.item-render-trend__metric,.item-render-trend__metric strong,.item-render-trend__metric small{display:block}.item-render-trend__metric strong{color:#0f172a;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.item-render-trend__metric small{margin-top:1px;font-size:9px;font-weight:700}.item-render-trend__metric .is-up{color:#2563eb}.item-render-trend__metric .is-down{color:#dc2626}[role=grid].item-render-dashboard-grid .item-render-heatmap{gap:8px}.item-render-heatmap__canvas{flex:none;width:144px;height:18px}.item-render-heatmap>span{color:#64748b;font-size:9px}.item-render-heatmap strong{color:#0f172a;font-size:10px;display:block}[role=grid].item-render-dashboard-grid .item-render-gauge{justify-content:center;gap:7px}.item-render-gauge__ring{background:conic-gradient(#2563eb var(--gauge-value), #e2e8f0 0);border-radius:50%;flex:none;place-items:center;width:32px;height:32px;display:inline-grid;position:relative}.item-render-gauge__ring:after{content:"";background:#fff;border-radius:50%;position:absolute;inset:4px}.item-render-gauge__ring--watch{background:conic-gradient(#d97706 var(--gauge-value), #e2e8f0 0)}.item-render-gauge__ring--critical{background:conic-gradient(#dc2626 var(--gauge-value), #e2e8f0 0)}.item-render-gauge__ring strong{z-index:1;color:#0f172a;font-size:9px;position:relative}.item-render-gauge__label,.item-render-gauge__label small{text-align:left;display:block}.item-render-gauge__label{color:#475569;font-size:9px;font-weight:700}.item-render-gauge__label small{color:#94a3b8;margin-top:1px;font-size:8px}.item-render-action{color:#b91c1c;min-height:28px;font:inherit;cursor:pointer;background:#fff7f7;border:1px solid #fecaca;border-radius:7px;padding:0 9px;font-size:10px;font-weight:700;line-height:normal}.item-render-action:hover{background:#fee2e2;border-color:#fca5a5}.item-render-action:focus-visible,.item-render-example__filter:focus-visible{outline-offset:2px;outline:2px solid #2563eb}.item-render-clear{color:#15803d;font-size:10px;font-weight:700;line-height:normal}@media (width<=640px){.item-render-example__toolbar{flex-direction:column;align-items:stretch}.item-render-example__filter{justify-content:center}.item-render-example .item-render-example__grid-container{height:410px}}
