[data-state="after"] .only-during, [data-state="during"] .only-after { display: none !important; }

.mock {
  position: fixed; left: 10px; bottom: 10px; z-index: 9999; max-width: calc(100vw - 20px);
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: #3b3200;
  background: #FFF6B3; border: 2px dashed #9A8400; border-radius: 10px; box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.mock-clean .mock { display: none !important; }
.mock summary { cursor: pointer; padding: 8px 12px; list-style: none; font-weight: 700; }
.mock summary::-webkit-details-marker { display: none; }
.mock .mock-body { padding: 0 12px 10px; display: grid; gap: 8px; }
.mock .seg { display: flex; gap: 6px; flex-wrap: wrap; }
.mock button, .mock a.mbtn { font: inherit; padding: 6px 9px; border-radius: 6px; border: 1px solid #9A8400; background: #fff; color: #3b3200; cursor: pointer; text-decoration: none; }
.mock button[aria-pressed="true"] { background: #3b3200; color: #FFF6B3; }

[data-show-proposed="true"] [data-proposed] { outline: 3px dashed #F2B705; outline-offset: 3px; position: relative; }
[data-show-proposed="true"] [data-proposed]::after {
  content: "proposed: " attr(data-proposed); position: absolute; top: -14px; left: 8px; z-index: 3;
  font: 600 10px/1.6 ui-monospace, Menlo, monospace; background: #F2B705; color: #2a2300; padding: 0 6px; border-radius: 4px; white-space: nowrap;
}