.masthead .quiet { margin-left: auto; }
.exchange-dialog {
  position: fixed;
  inset: auto;
  margin: 0;
  padding: 0;
  width: min(460px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  border: 1px solid #c6c7b4;
  background: #f1ecdf;
  box-shadow: 0 18px 65px #0006;
  text-align: left;
}
.exchange-dialog[open] { display: flex; flex-direction: column; animation: reveal-text .18s ease-out; }
.exchange-dialog::backdrop { background: #10181170; backdrop-filter: none; }
.exchange-header { display: flex; align-items: center; gap: 20px; padding: 17px 22px 12px; flex-shrink: 0; }
.exchange-header h2 { font: 600 10px/1.5 var(--sans); letter-spacing: 1.5px; text-transform: uppercase; color: #59654f; margin: 0; flex: 1; }
.exchange-header .close-dialog { position: static; padding: 0; width: 36px; height: 36px; font-size: 25px; line-height: 1; }
.exchange-body { padding: 0 22px 8px; overflow-y: auto; overscroll-behavior: contain; min-height: 0; }
.exchange-dialog .exchange-context { color: #646e5a; font: 12px/1.6 var(--sans); margin: 0 0 20px; }
.exchange-context time { display: block; font-size: 10px; margin-top: 3px; }
.exchange-dialog .exchange-attribution { color: #59654f; font: 11px/1.5 var(--sans); margin: -7px 0 15px; }
.exchange-message { margin: 0 26px 13px 0; padding: 12px 15px; background: #e0e1d2; border-radius: 2px 12px 12px 12px; }
.exchange-message.from-kal { margin-left: 26px; margin-right: 0; background: #d8e1cb; border-radius: 12px 2px 12px 12px; }
.exchange-message cite { display: block; color: #844a32; font: 600 10px/1.5 var(--sans); margin-bottom: 5px; }
.exchange-message.from-kal cite { color: #48623a; }
.exchange-dialog .exchange-message p { color: #293226; font: 17px/1.5 var(--serif); margin: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.exchange-footer { padding: 10px 22px 18px; flex-shrink: 0; }
.exchange-footer .primary { margin: 0; justify-content: center; font-size: 12px; padding: 12px; }
/* The finished artwork has no badges, hover hints, or special cursor. */
.placed-piece { pointer-events: none; }
.placed-piece .piece-revisit { fill: transparent; pointer-events: visiblePainted; cursor: default; }
.piece-revisit:focus-visible { outline: none; stroke: var(--accent); stroke-width: 4px; }
@keyframes reveal-text { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 760px) {
  .exchange-header { padding: 12px 16px 8px; }
  .exchange-body { padding: 0 16px 4px; }
  .exchange-footer { padding: 8px 16px 14px; }
  .exchange-dialog .exchange-message p { font-size: 16px; }
  .exchange-message { margin-right: 15px; padding: 11px 13px; }
  .exchange-message.from-kal { margin-left: 15px; }
}
@media (prefers-reduced-motion: reduce) { .exchange-dialog[open] { animation: none; } }

.history-dialog { max-width: 600px; max-height: calc(100dvh - 32px); padding: 28px; overflow: auto; }
.history-dialog h2 { margin: 5px 25px 14px 0; font-size: 32px; }
.history-dialog .history-status { color: #59654f; font-size: 12px; margin: 0 0 12px; }
.history-dialog .history-note { font-size: 11px; color: #59654f; }
.history-list { list-style: none; padding: 0; margin: 18px 0; }
.history-list li { padding: 12px 0; border-top: 1px solid #c8ccbe; display: flex; align-items: baseline; gap: 18px; justify-content: space-between; }
.history-list li p { margin: 0; }
.history-list strong, .history-list span { display: block; }
.history-list strong { font-size: 13px; }
.history-list span, .history-list time { font-size: 11px; color: #59654f; }
.history-list time { text-align: right; }
.history-actions { display: flex; gap: 10px; position: sticky; bottom: -28px; background: var(--cream); padding: 10px 0 0; }
.history-actions button { flex: 1; font-size: 12px; }
@media (max-width: 760px) {
  .history-dialog { padding: 25px 20px; }
  .history-actions { bottom: -25px; }
  .history-list li { flex-wrap: wrap; gap: 4px; }
  .history-list time { text-align: left; width: 100%; }
}