/* Onnisoft Hub: the Onnisoft cobalt shell, with each product in its own colour. */
.surface-hub { --accent: #1a4bff; --accent-ink: #ffffff; }
.surface-hub .c-brand svg, .h-mark { color: #5b82ff; }
.surface-hub .home-tag { color: #8aa6ff; }
.surface-hub .auth-tenant { color: #8aa6ff; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.c-nav-label { margin: 18px 14px 6px; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.02em; }

.h-c-onus { color: #1fcb8b; }
.h-c-flight { color: #3db8ff; }
.h-c-relay { color: #ff6a2b; }
.h-c-helen { color: #ff4766; }
.h-c-horizon { color: #ffb524; }

.h-products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.h-product { display: flex; flex-direction: column; gap: 4px; padding: 20px; border-radius: 16px; background: var(--raised-2); position: relative; overflow: hidden; isolation: isolate; }
.h-product::before { content: ""; position: absolute; inset: -40% -40% auto auto; width: 180px; height: 180px; border-radius: 50%; z-index: -1; opacity: 0.22; filter: blur(36px); background: currentColor; }
.h-product[data-product="onus"]::before { color: #1fcb8b; }
.h-product[data-product="flight"]::before { color: #3db8ff; }
.h-product[data-product="relay"]::before { color: #ff6a2b; }
.h-product[data-product="helen"]::before { color: #ff4766; }
.h-product[data-product="horizon"]::before { color: #ffb524; }
.h-product h3 { margin: 10px 0 0; font-size: 22px; letter-spacing: -0.02em; }
.h-product .hint { margin: 0; }
.h-tag { margin: 6px 0 8px; font-weight: 500; }
.h-product-top { display: flex; justify-content: space-between; align-items: center; }
.h-product-mark { display: inline-flex; }
.h-sym { display: block; }

.h-status { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(31, 203, 139, 0.14); color: #9ef0cf; }
.h-status-degraded, .h-status-maintenance { background: rgba(255, 181, 36, 0.14); color: #ffd98a; }
.h-status-outage { background: rgba(255, 92, 108, 0.16); color: #ffb3bb; }

.h-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 20px; }
.h-prose { max-width: 68ch; color: var(--soft); }
.h-prose p { margin: 0 0 16px; }
.h-fieldset { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 16px; }
.h-fieldset legend { font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.h-inline { display: inline-block; width: auto; min-height: 40px; padding: 0 12px; font-size: 14px; margin-right: 6px; }
.c-row-actions form { display: inline-flex; align-items: center; }