/* ════════════════════════════════════════════════════════════
   CMMS flagship visuals · asset register · failure curve ·
   entitlement billing reconciliation
   Rides site.css + cpq.css + loop-visuals.css.
   ════════════════════════════════════════════════════════════ */

.cq[data-loop="cmms"] { --lp: #2A5C7A; }

/* ── asset register with health rings ── */
.cm-reg { display: grid; }
.cm-reg-row { display: grid; grid-template-columns: 44px 1fr 96px 92px; gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--rule); animation: cqRowIn 9s var(--ease) infinite; }
.cm-reg-row:first-child { border-top: none; }
.cm-reg-row:nth-child(1) { animation-delay: .1s; } .cm-reg-row:nth-child(2) { animation-delay: .4s; }
.cm-reg-row:nth-child(3) { animation-delay: .7s; } .cm-reg-row:nth-child(4) { animation-delay: 1s; }
.cm-ring { position: relative; width: 40px; height: 40px; }
.cm-ring svg { transform: rotate(-90deg); }
.cm-ring .t { stroke: var(--rule-strong); }
.cm-ring .v { stroke: var(--lp); stroke-linecap: round; }
.cm-ring .v.warn { stroke: var(--alert, #B33B1F); }
.cm-ring b { position: absolute; inset: 0; display: grid; place-content: center; font: 500 11px/1 var(--font-mono); color: var(--ink); }
.cm-reg-row .nm { font-size: 13.5px; color: var(--ink); font-weight: 500; letter-spacing: -.01em; }
.cm-reg-row .nm span { display: block; font: 500 9.5px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 400; margin-top: 4px; }
.cm-reg-row .due { font: 500 10px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cm-reg-row .st { font: 500 9px/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; text-align: center; padding: 5px 8px; border-radius: var(--r-pill); }
.cm-reg-row .st.ok { background: color-mix(in srgb, var(--lp) 15%, transparent); color: var(--lp); }
.cm-reg-row .st.pm { background: var(--accent-soft); color: var(--accent); }
.cm-reg-row .st.risk { background: #E8643D1A; color: var(--alert, #B33B1F); }
.cm-reg-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--rule); display: flex; gap: 24px; flex-wrap: wrap; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cm-reg-foot b { color: var(--lp); font-weight: 500; }

/* ── failure probability curve with PM window ── */
.cm-curve { position: relative; }
.cm-curve svg { width: 100%; height: auto; display: block; position: relative; z-index: 1; }
.cm-curve .gl { stroke: var(--rule); stroke-width: 1; }
.cm-curve .band { fill: color-mix(in srgb, var(--lp) 12%, transparent); }
.cm-curve .band-l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--lp); }
.cm-curve .area { fill: #E8643D1A; }
.cm-curve .line { fill: none; stroke: var(--alert, #B33B1F); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 640; stroke-dashoffset: 640; animation: cqDraw 8s var(--ease) infinite; }
.cm-curve .thr { stroke: var(--ink-3); stroke-width: 1; stroke-dasharray: 4 4; }
.cm-curve .hit { fill: var(--alert, #B33B1F); opacity: 0; animation: cqFade 8s var(--ease) infinite; animation-delay: .9s; }
.cm-curve .ax { font-family: var(--font-mono); font-size: 8px; letter-spacing: .08em; fill: var(--ink-3); }
.cm-curve .cap { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .06em; fill: var(--ink-2); }
.cm-pm { margin-top: 16px; display: flex; align-items: center; gap: 10px; background: color-mix(in srgb, var(--lp) 10%, transparent); border: 1px solid var(--lp); border-radius: var(--r-1); padding: 12px 14px; font: 500 10px/1.4 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--lp); opacity: 0; animation: cqFade 8s var(--ease) infinite; animation-delay: 1.3s; }

/* ── entitlement vs billed reconciliation ── */
.cm-bill { display: grid; gap: 16px; }
.cm-bill-row { display: grid; grid-template-columns: 104px 1fr 78px; gap: 14px; align-items: center; }
.cm-bill-row .k { font: 500 10px/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cm-bill-tr { height: 30px; border-radius: var(--r-1); background: var(--bg-2); overflow: hidden; position: relative; }
.cm-bill-tr i { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-1); display: flex; align-items: center; padding: 0 11px; font: 500 10px/1 var(--font-mono); letter-spacing: .06em; white-space: nowrap; width: 0; animation: cqGrow 8s var(--ease) infinite; }
.cm-bill-row.ent i { background: color-mix(in srgb, var(--lp) 24%, transparent); color: var(--lp); --w: 100%; animation-delay: .1s; }
.cm-bill-row.bil i { background: var(--accent-soft); color: var(--accent); --w: 71%; animation-delay: .5s; }
.cm-bill-row .v { font: 500 12px/1 var(--font-mono); color: var(--ink); text-align: right; }
.cm-gap { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule-strong); display: flex; justify-content: space-between; align-items: baseline; }
.cm-gap .k { font: 500 10px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--alert, #B33B1F); }
.cm-gap .v { font-size: 24px; font-weight: 500; letter-spacing: -.03em; color: var(--alert, #B33B1F); }

/* ── centerpiece: maintenance calendar heat grid ── */
.cm-cal { position: relative; z-index: 1; }
.cm-cal-h { display: grid; grid-template-columns: 92px repeat(12, 1fr); gap: 5px; margin-bottom: 8px; }
.cm-cal-h span { font: 500 9px/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); text-align: center; }
.cm-cal-row { display: grid; grid-template-columns: 92px repeat(12, 1fr); gap: 5px; margin-bottom: 5px; align-items: center; }
.cm-cal-row .who { font: 500 9.5px/1.3 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cm-cell { aspect-ratio: 1; border-radius: 4px; background: var(--bg-2); border: 1px solid var(--rule); animation: cmCell 9s var(--ease) infinite; }
@keyframes cmCell { 0%, 5% { background: var(--bg-2); border-color: var(--rule); } 14%, 88% { background: var(--c, var(--bg-2)); border-color: transparent; } 96%, 100% { background: var(--bg-2); border-color: var(--rule); } }
.cm-cell.pm { --c: color-mix(in srgb, var(--lp) 55%, transparent); }
.cm-cell.due { --c: var(--accent); }
.cm-cell.risk { --c: var(--alert, #B33B1F); }
.cm-cal-key { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule-strong); display: flex; gap: 24px; flex-wrap: wrap; font: 500 10px/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.cm-cal-key i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .cm-reg-row, .cm-curve .line, .cm-curve .hit, .cm-pm, .cm-bill-tr i, .cm-cell { animation: none !important; }
  .cm-reg-row, .cm-curve .hit, .cm-pm { opacity: 1; transform: none; }
  .cm-curve .line { stroke-dashoffset: 0; }
  .cm-bill-tr i { width: var(--w); }
  .cm-cell.pm, .cm-cell.due, .cm-cell.risk { background: var(--c); border-color: transparent; }
}

@media (max-width: 1000px) {
  .cm-cal-h, .cm-cal-row { grid-template-columns: 70px repeat(12, 1fr); gap: 3px; }
  .cm-reg-row { grid-template-columns: 40px 1fr 82px; }
  .cm-reg-row .due { display: none; }
}