/* ==========================================================================
   Product mocks — live HTML/CSS product UI (not screenshots).
   Animated by js/home.js; each has a static final state for reduced motion.
   ========================================================================== */

.mock, .rt { width: 100%; max-width: 560px; background: var(--panel); border: 1px solid var(--rule); border-radius: var(--r-lg); box-shadow: var(--shadow-3); overflow: hidden; font-size: 13px; }
.mock__head, .rt__head { display: flex; align-items: center; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--rule); }
.mock__head b, .rt__head b { font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.mock__crumb { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock__head .chip { margin-left: auto; font-size: 10.5px; padding: 3px 8px; white-space: nowrap; }
.rt__head { justify-content: space-between; }
.rt__head .mono { font-size: 11px; color: var(--faint); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); color: var(--ok); display: inline-block; flex: none; }
.dot--warn { background: var(--warn); color: var(--warn); }
@keyframes bump { 40% { transform: translateY(-3px); } }
.bump { display: inline-block; animation: bump .35s var(--ease); }

/* ---- Mock 1: data unification ------------------------------------------ */
.um__stats { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--rule); }
.um__stats > div { padding: 12px 16px; }
.um__stats > div + div { border-left: 1px solid var(--rule); }
.um__stats b { display: block; font-family: var(--display); font-size: 22px; font-weight: 560; letter-spacing: -.03em; margin-top: 2px; font-variant-numeric: tabular-nums; }
.um__stats [data-count] { color: var(--signal); }
.um__stats [data-review] { color: var(--warn); }
.um__rows { padding: 6px 8px 10px; }
.um__head, .um__row { display: grid; grid-template-columns: 108px 26px 1fr 60px 62px; gap: 10px; align-items: center; }
.um__head { padding: 8px 8px 4px; font-size: 10px; }
.um__row { padding: 8px; border-radius: var(--r-sm); opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease), background .4s; }
.um__row.is-on { opacity: 1; transform: none; }
.um__row.is-out { opacity: 0; transform: translateY(-6px); }
.um__row code { font-size: 10.5px; padding: 3px 6px; overflow: hidden; text-overflow: ellipsis; }
.um__wire { height: 1px; background: var(--rule-strong); position: relative; transition: background .4s; }
.um__wire::after { content: ""; position: absolute; top: -2.5px; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); opacity: 0; }
.um__row.is-on:not(.is-done) .um__wire::after { opacity: 1; animation: umWire .6s linear infinite; }
@keyframes umWire { to { left: calc(100% - 6px); } }
.um__row.is-ok .um__wire { background: var(--signal); }
.um__row.is-review .um__wire { background: var(--warn); }
.um__mean { position: relative; font-weight: 500; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 18px; }
.um__mean span { opacity: 0; transition: opacity .35s; }
.um__mean::before { content: ""; position: absolute; left: 0; top: 50%; width: 85%; height: 9px; margin-top: -4.5px; border-radius: 3px; background: linear-gradient(90deg, var(--panel-2) 0%, var(--tint) 50%, var(--panel-2) 100%); background-size: 200% 100%; animation: umShimmer 1.1s linear infinite; transition: opacity .25s; }
@keyframes umShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.um__row.is-done .um__mean span { opacity: 1; }
.um__row.is-done .um__mean::before { opacity: 0; animation: none; }
.um__conf { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.um__conf i { flex: 1; height: 3px; border-radius: 3px; background: var(--panel-2); position: relative; overflow: hidden; }
.um__conf i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 3px; background: var(--signal); transition: width .7s var(--ease); }
.um__row.is-done .um__conf i::after { width: var(--c); }
.um__row.is-review .um__conf i::after { background: var(--warn); }
.um__conf em { font-style: normal; opacity: 0; transition: opacity .3s; }
.um__row.is-done .um__conf em { opacity: 1; }
.um__state { font-family: var(--mono); font-size: 10px; text-align: center; padding: 3px 0; border-radius: var(--r-xs); background: var(--panel-2); color: var(--faint); transition: background .3s, color .3s; }
.um__state::before { content: "inferring"; }
.um__row.is-ok .um__state { background: var(--ok-tint); color: var(--ok); }
.um__row.is-ok .um__state::before { content: "accepted"; }
.um__row.is-review { background: rgba(253,243,227,.45); }
.um__row.is-review .um__state { background: var(--warn-tint); color: var(--warn); }
.um__row.is-review .um__state::before { content: "review"; }

/* ---- Mock 2: on-site runtime ------------------------------------------- */
.rt__sec { padding: 14px 16px; border-bottom: 1px solid var(--rule); }
.rt__sec:last-child { border-bottom: 0; }
.rt__sec .label { display: block; margin-bottom: 10px; }
.rt__lanes { display: grid; gap: 8px; }
.rt__lane { display: grid; grid-template-columns: 70px 1fr 60px; gap: 12px; align-items: center; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.rt__lane b { color: var(--deep); font-weight: 500; }
.rt__wave { height: 16px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--tint) 0 2px, transparent 2px 6px); position: relative; overflow: hidden; }
.rt__wave::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(31,95,204,.45), transparent); animation: rtSweep 2.4s linear infinite; }
.rt__lane:nth-child(2) .rt__wave::after { animation-duration: 3.1s; }
.rt__lane:nth-child(3) .rt__wave::after { animation-duration: 1.8s; }
@keyframes rtSweep { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.rt__sandbox { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 9px 12px; border: 1px dashed var(--rule-strong); border-radius: var(--r-sm); font-family: var(--mono); font-size: 11px; color: var(--muted); }
.rt__sandbox + .rt__sandbox { margin-top: 6px; }
.rt__sandbox b { color: var(--ink); font-weight: 500; }
.rt__meter { width: 60px; height: 3px; border-radius: 3px; background: var(--panel-2); overflow: hidden; }
.rt__meter i { display: block; height: 100%; background: var(--signal); border-radius: 3px; transition: width .8s var(--ease); }
.rt__uplink { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--warn-tint); color: var(--warn); border-radius: var(--r-sm); padding: 9px 12px; font-family: var(--mono); font-size: 11px; transition: background .4s, color .4s; }
.rt__uplink > span { display: inline-flex; align-items: center; gap: 8px; }
.rt__uplink.is-up { background: var(--ok-tint); color: var(--ok); }
.rt__uplink.is-up .dot { background: var(--ok); color: var(--ok); }
.rt__uplink [data-up-r] { font-variant-numeric: tabular-nums; }

/* ---- Mock 3: fleet rollout --------------------------------------------- */
.fm__stages { display: grid; grid-template-columns: repeat(4, 1fr); padding: 20px 16px 10px; }
.fm__stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); transition: color .3s; }
.fm__stage + .fm__stage::before, .fm__stage + .fm__stage::after { content: ""; position: absolute; top: 10px; right: 50%; width: 100%; height: 1px; background: var(--rule-strong); }
.fm__stage + .fm__stage::after { background: var(--signal); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); }
.fm__stage.is-active::after, .fm__stage.is-done::after { transform: scaleX(1); }
.fm__dot { position: relative; z-index: 1; width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--rule-strong); background: var(--panel); display: grid; place-items: center; transition: background .3s, border-color .3s, box-shadow .3s; }
.fm__dot svg { width: 11px; height: 11px; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .3s var(--ease); }
.fm__stage.is-active, .fm__stage.is-done { color: var(--ink); }
.fm__stage.is-active .fm__dot { border-color: var(--signal); box-shadow: 0 0 0 4px var(--tint); }
.fm__stage.is-done .fm__dot { background: var(--signal); border-color: var(--signal); }
.fm__stage.is-done .fm__dot svg { opacity: 1; transform: none; }
.fm__grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; padding: 14px 16px 10px; }
.fm__cell { aspect-ratio: 1; border-radius: 2px; background: var(--panel-2); border: 1px solid var(--rule); transition: background .35s, border-color .35s, transform .35s var(--ease); }
.fm__cell.is-dep { background: var(--tint); border-color: var(--signal-soft); animation: fmCell .5s ease-in-out infinite alternate; }
@keyframes fmCell { to { transform: scale(.78); } }
.fm__cell.is-ok { background: var(--signal); border-color: var(--signal); }
.fm__cell.is-off { background: transparent; border: 1px dashed var(--faint); }
.fm__legend { display: flex; gap: 16px; padding: 0 16px 12px; font-family: var(--mono); font-size: 10.5px; color: var(--faint); }
.fm__legend span { display: inline-flex; align-items: center; gap: 6px; }
.fm__key { width: 8px; height: 8px; border-radius: 2px; display: inline-block; border: 1px solid var(--rule); }
.fm__key.is-ok { background: var(--signal); border-color: var(--signal); }
.fm__key.is-dep { background: var(--tint); border-color: var(--signal-soft); }
.fm__key.is-off { border: 1px dashed var(--faint); }
.fm__foot { display: flex; justify-content: space-between; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fm__foot b { font-weight: 500; color: var(--faint); transition: color .3s; }
.fm__foot b.is-ok { color: var(--ok); }
.fm__audit { display: flex; justify-content: space-between; gap: 10px; padding: 10px 16px; background: var(--panel-2); font-family: var(--mono); font-size: 10.5px; color: var(--faint); }

@media (max-width: 640px) {
  .um__head, .um__row { grid-template-columns: 1fr 1fr 62px; }
  .um__wire, .um__conf, .um__head span:nth-child(2), .um__head span:nth-child(4) { display: none; }
  .fm__grid { grid-template-columns: repeat(12, 1fr); }
  .fm__audit span:last-child, .fm__legend span:last-child, .mock__crumb, .um .mock__head .chip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .um__row, .um__mean::before, .fm__cell, .fm__dot, .rt__wave::after, .bump { animation: none !important; transition: none !important; }
}