.artifact-health-workspace { display: grid; min-width: 0; gap: 1rem; padding-bottom: 1rem; } .artifact-health-lead, .artifact-scope-panel > header, .artifact-health-details header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: 1.2rem; } .artifact-health-lead { padding: 0.25rem 0 0.35rem; } .artifact-health-lead h2, .artifact-health-lead p, .artifact-scope-panel h3, .artifact-scope-panel p, .artifact-health-details h3, .artifact-health-details p, .artifact-health-state h3, .artifact-health-state p { margin: 0; } .artifact-health-lead h2 { margin-top: 0.4rem; color: var(--nodedc-text-primary); font-size: 1.42rem; letter-spacing: -0.035em; } .artifact-health-lead p, .artifact-scope-panel p, .artifact-health-details p, .artifact-health-state p { color: var(--nodedc-text-muted); font-size: 0.66rem; line-height: 1.5; } .artifact-health-lead p { max-width: 48rem; margin-top: 0.42rem; } .artifact-health-state { display: grid; justify-items: start; gap: 0.65rem; } .artifact-health-state h3 { color: var(--nodedc-text-primary); font-size: 1rem; } .artifact-health-notice { display: flex; align-items: center; gap: 0.7rem; color: var(--nodedc-text-secondary); font-size: 0.64rem; } .artifact-health-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.65rem; } .artifact-health-metrics > div { display: grid; min-width: 0; gap: 0.28rem; } .artifact-health-metrics span, .artifact-health-metrics small, .artifact-scope-list span, .artifact-health-details dt { color: var(--nodedc-text-muted); font-size: 0.6rem; } .artifact-health-metrics strong { color: var(--nodedc-text-primary); font-size: 1.18rem; font-weight: 720; letter-spacing: -0.035em; } .artifact-scope-panel, .artifact-health-details > div { display: grid; min-width: 0; gap: 1rem; } .artifact-scope-panel h3, .artifact-health-details h3 { margin-top: 0.36rem; color: var(--nodedc-text-primary); font-size: 1rem; letter-spacing: -0.025em; } .artifact-scope-panel p { margin-top: 0.36rem; } .artifact-scope-list { display: grid; gap: 0.22rem; margin: 0; padding: 0; list-style: none; } .artifact-scope-list li { display: grid; grid-template-columns: minmax(10rem, 0.7fr) minmax(12rem, 1.4fr) 6rem; align-items: center; gap: 0.8rem; min-width: 0; padding: 0.58rem 0.66rem; border-radius: var(--nodedc-radius-control); background: var(--station-panel-soft); } .artifact-scope-list li > div:first-child { display: grid; min-width: 0; gap: 0.16rem; } .artifact-scope-list strong { overflow: hidden; color: var(--nodedc-text-primary); font-size: 0.66rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; } .artifact-scope-list li > strong { text-align: right; } .artifact-scope-list__measure { overflow: hidden; height: 0.34rem; border-radius: 999px; background: var(--station-panel-deep); } .artifact-scope-list__measure span { display: block; min-width: 0.2rem; height: 100%; border-radius: inherit; background: rgb(var(--nodedc-accent-rgb) / 0.78); } .artifact-health-details { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; } .artifact-health-details dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; margin: 0; } .artifact-health-details dl > div { display: grid; min-width: 0; gap: 0.18rem; padding: 0.66rem; border-radius: var(--nodedc-radius-control); background: var(--station-panel-soft); } .artifact-health-details dd { overflow: hidden; margin: 0; color: var(--nodedc-text-primary); font-size: 0.66rem; font-weight: 680; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 980px) { .artifact-health-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .artifact-health-details { grid-template-columns: 1fr; } } @media (max-width: 680px) { .artifact-health-lead, .artifact-scope-panel > header, .artifact-health-details header { display: grid; } .artifact-health-metrics { grid-template-columns: 1fr; } .artifact-scope-list li { grid-template-columns: minmax(0, 1fr) 5.2rem; } .artifact-scope-list__measure { grid-column: 1 / -1; grid-row: 2; } .artifact-health-details dl { grid-template-columns: 1fr; } }