.ionix-operational-status-slot:empty { display: none; }
.ionix-operational-status-slot:not(:empty) { margin: 14px 0; }
.ionix-operational-status { --ionix-status-accent: #a16207; --ionix-status-soft: rgba(202, 138, 4, .10); box-sizing: border-box; display: grid; grid-template-columns: 40px minmax(220px, 1fr) minmax(112px, auto) auto; align-items: center; column-gap: 14px; min-height: 78px; max-height: 84px; overflow: hidden; position: relative; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--ionix-status-accent) 28%, #dce4ee); border-radius: 14px; background: linear-gradient(100deg, #fffdf8, #ffffff 55%, #fbfcff); box-shadow: 0 7px 20px rgba(54, 68, 87, .05), 0 0 0 1px var(--ionix-status-soft); isolation: isolate; }
.ionix-operational-status[data-state="platform_loss"] { --ionix-status-accent: #7661a8; --ionix-status-soft: rgba(118, 97, 168, .10); }
.ionix-operational-status[data-state="unallocated_costs"] { --ionix-status-accent: #a56a18; --ionix-status-soft: rgba(165, 106, 24, .10); }
.ionix-operational-status[data-state="evidence_incomplete"] { --ionix-status-accent: #3b718d; --ionix-status-soft: rgba(59, 113, 141, .10); }
.ionix-operational-status::after { content: ''; position: absolute; inset: 0 auto 0 -35%; width: 30%; pointer-events: none; z-index: -1; background: linear-gradient(90deg, transparent, rgba(255,255,255,.72), transparent); animation: ionix-operational-status-sweep 7s ease-in-out infinite; }
.ionix-operational-status__icon { display: grid; width: 36px; height: 36px; place-items: center; border: 1px solid color-mix(in srgb, var(--ionix-status-accent) 34%, white); border-radius: 11px; color: var(--ionix-status-accent); background: var(--ionix-status-soft); font-size: 18px; font-weight: 750; animation: ionix-operational-status-pulse 3.2s ease-in-out infinite; }
.ionix-operational-status__copy { min-width: 0; }.ionix-operational-status__heading { display: flex; align-items: center; min-width: 0; gap: 8px; }.ionix-operational-status__title { overflow: hidden; color: #213047; font-size: 14px; font-weight: 750; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }.ionix-operational-status__badge { flex: none; padding: 3px 7px; border-radius: 999px; color: var(--ionix-status-accent); background: var(--ionix-status-soft); font-size: 10px; font-weight: 750; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }.ionix-operational-status__description { overflow: hidden; margin: 4px 0 0; color: #637187; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }.ionix-operational-status__metrics { display: flex; justify-content: flex-end; gap: 18px; margin: 0; }.ionix-operational-status__metric { min-width: 66px; margin: 0; }.ionix-operational-status__metric dt { overflow: hidden; color: #7b879a; font-size: 10px; font-weight: 650; line-height: 1.2; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }.ionix-operational-status__metric dd { overflow: hidden; margin: 3px 0 0; color: #26364d; font-size: 13px; font-weight: 750; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }.ionix-operational-status__indicators { display: flex; align-items: center; gap: 5px; padding-left: 2px; }.ionix-operational-status__indicator { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #d5dce6; cursor: pointer; transition: background-color .2s ease, width .2s ease; }.ionix-operational-status__indicator.is-active { width: 22px; background: var(--ionix-status-accent); }.ionix-operational-status__indicator:focus-visible { outline: 2px solid var(--ionix-status-accent); outline-offset: 3px; }.ionix-operational-status.is-fading-out { opacity: 0; transition: opacity .18s ease; }.ionix-operational-status.is-fading-in { animation: ionix-operational-status-fade .28s ease both; }
@keyframes ionix-operational-status-sweep { 0%, 65%, 100% { transform: translateX(0); opacity: 0; } 78% { opacity: .6; } 92% { transform: translateX(520%); opacity: 0; } } @keyframes ionix-operational-status-pulse { 0%, 100% { box-shadow: 0 0 0 0 var(--ionix-status-soft); } 50% { box-shadow: 0 0 0 7px transparent; } } @keyframes ionix-operational-status-fade { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 1050px) { .ionix-operational-status__metric:nth-child(2) { display: none; } }
@media (max-width: 760px) { .ionix-operational-status { grid-template-columns: 36px minmax(0, 1fr) auto; column-gap: 10px; min-height: 72px; max-height: 82px; padding: 9px 11px; }.ionix-operational-status__icon { width: 34px; height: 34px; }.ionix-operational-status__metrics { display: none; }.ionix-operational-status__badge { display: none; }.ionix-operational-status__title { font-size: 13px; }.ionix-operational-status__description { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { .ionix-operational-status::after, .ionix-operational-status__icon, .ionix-operational-status.is-fading-in { animation: none; }.ionix-operational-status, .ionix-operational-status__indicator { transition: none; } }