/* /compare/* additions on top of p-discovery.css (src/lib/cinematic/pages/compare.ts). */

/* Status pills inside comparison cells */
.cmp-pill{display:block;width:max-content;margin-bottom:8px;font-size:11px;line-height:16px;font-weight:500;padding:3px 10px;border-radius:999px;white-space:nowrap}
.cmp-yes{background:#eef6ea;color:#4f8b43}
.cmp-partial{background:#fff3de;color:#c47a12}
.cmp-no{background:#f0f0ed;color:#777}

/* Visual guide: four interruption types along a depth axis */
.cmp-atlas{margin:0;padding:8px;border-radius:24px;background:#f0f0ed}
.cmp-atlas-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cmp-atlas-grid>li{display:flex;flex-direction:column;padding:20px;border-radius:18px;background:#fff}
.story .cmp-atlas-n{font-family:var(--head);font-size:15px;line-height:20px;letter-spacing:-.02em;color:#a8a8a3}
.cmp-atlas-heard .cmp-atlas-n{color:#4f8b43}
.cmp-atlas-grid h3{margin-top:18px;font-size:17px;line-height:24px;font-weight:500;letter-spacing:-.02em;color:#222}
.story .cmp-atlas-grid li>p:last-child{margin-top:6px;font-size:14px;line-height:22px;color:#777}
.cmp-mock{margin-top:16px;height:132px;border-radius:14px;background:#fafaf8;box-shadow:inset 0 0 0 1px #efeee9;padding:14px;display:flex;flex-direction:column;justify-content:center;gap:8px;overflow:hidden;font-size:12px;line-height:16px;color:#555}
.cmp-toast{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:#fff;box-shadow:0 6px 16px rgba(26,24,20,.07)}
.cmp-toast i{flex:none;width:18px;height:18px;border-radius:6px;background:#e3e2dc}
.cmp-toast b{display:block;font-weight:500;color:#222}
.cmp-dim{opacity:.55;transform:scale(.96)}
.cmp-mock-state>div{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:9px;background:#fff;color:#222}
.cmp-mock-state em{margin-left:auto;font-style:normal;color:#999}
.cmp-mock-state i{width:7px;height:7px;border-radius:50%}
.cmp-dot-busy{background:#c47a12}
.cmp-dot-wait{background:#d9534f}
.cmp-dot-done{background:#4f8b43}
.cmp-mock-phone{align-items:center}
.cmp-phone{width:150px;padding:12px;border-radius:18px;background:#1c1c1a;color:#eee;box-shadow:0 10px 24px rgba(26,24,20,.18)}
.cmp-phone span{display:block;font-size:11px;line-height:15px}
.cmp-phone div{display:flex;gap:6px;margin-top:10px}
.cmp-phone b{flex:1;text-align:center;font-weight:500;font-size:11px;padding:5px 0;border-radius:8px;background:#3a3a37}
.cmp-phone b:first-child{background:#4f8b43;color:#fff}
.cmp-mock-voice{background:#eef6ea;box-shadow:none}
.cmp-wave{display:flex;align-items:center;gap:3px;height:20px}
.cmp-wave i{width:3px;border-radius:2px;background:#4f8b43;height:8px;animation:cmp-wave 1.2s ease-in-out infinite}
.cmp-wave i:nth-child(2){height:14px;animation-delay:.1s}
.cmp-wave i:nth-child(3){height:20px;animation-delay:.2s}
.cmp-wave i:nth-child(4){height:12px;animation-delay:.3s}
.cmp-wave i:nth-child(5){height:18px;animation-delay:.4s}
.cmp-wave i:nth-child(6){height:10px;animation-delay:.5s}
.cmp-wave i:nth-child(7){height:6px;animation-delay:.6s}
@keyframes cmp-wave{50%{transform:scaleY(.45)}}
.story .cmp-mock-voice p{font-size:12px;line-height:17px;color:#2f5a27}
.cmp-depth{position:relative;display:flex;justify-content:space-between;margin:20px 16px 4px;padding-top:16px;font-size:12px;line-height:16px;font-weight:500;color:#222}
.cmp-depth:before{content:"";position:absolute;left:0;right:0;top:0;height:2px;border-radius:2px;background:linear-gradient(90deg,#d9534f,#c47a12 45%,#4f8b43)}
.cmp-depth span:last-child{text-align:right}
.cmp-depth small{display:block;font-weight:400;color:#999}
.story .cmp-atlas figcaption{font-size:13px;line-height:21px;color:#999;margin:16px 16px 8px}

/* All-tools table */
.cmp-all .dc-table-scroll tbody th a{color:#222;text-decoration:underline;text-decoration-color:#d6d5cf;text-underline-offset:3px}
.cmp-all .dc-table-scroll tbody th a:hover{text-decoration-color:#222}
.cmp-type{display:inline-block;font-size:11px;line-height:16px;font-weight:500;padding:3px 10px;border-radius:999px;background:#f0f0ed;color:#555;white-space:nowrap}
.cmp-src{font-weight:500;color:#222;white-space:nowrap}
.dc-review{scroll-margin-top:24px}
.dc-review:target{box-shadow:0 0 0 2px #4f8b43}

@media(max-width:960px){
  .cmp-atlas-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .cmp-atlas{padding:6px;border-radius:20px}
  .cmp-atlas-grid{grid-template-columns:1fr;gap:6px}
  .cmp-atlas-grid>li{padding:18px}
  .cmp-mock{height:auto;min-height:104px}
  .cmp-depth{margin:16px 12px 4px}
  .story .cmp-atlas figcaption{margin:12px 12px 6px}
}
@media(prefers-reduced-motion:reduce){.cmp-wave i{animation:none}}

/* Capability matrix: pills only */
.cmp-matrix td .cmp-pill{margin:0}
.cmp-matrix thead th:last-child,.cmp-matrix td:last-child{background:#f7faf5}
.cmp-matrix th:first-child{width:24%}
@media(max-width:720px){.cmp-matrix th:first-child{width:132px;min-width:132px}}