/* Stable layout and reversible motion for the map's native dialog. */
html { scrollbar-gutter: stable; }
.detail-dialog { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: #a9b89a transparent; }
.detail-dialog[data-motion] { will-change: transform, opacity; }
.detail-dialog[data-motion="closing"] { pointer-events: none; }
.detail-dialog[data-motion="opening"]::backdrop {
  animation: map-backdrop-enter 360ms cubic-bezier(.22,1,.36,1) both;
}
.detail-dialog[data-motion="closing"]::backdrop {
  animation: map-backdrop-leave 210ms cubic-bezier(.4,0,.2,1) both;
}
@keyframes map-backdrop-enter { from { opacity: var(--backdrop-from,0); } to { opacity: 1; } }
@keyframes map-backdrop-leave { from { opacity: var(--backdrop-from,1); } to { opacity: 0; } }
.dialog-header { border-bottom: 1px solid #d6dfcb; box-shadow: 0 3px 10px #354b2e05; }
.dialog-header .location-dot { box-shadow: 0 0 0 4px #9cad860d; width: 13px; height: 13px; }
.dialog-body { line-height: 1.75; }
.dialog-body>.eyebrow { color: #728564; margin-bottom: 16px; }
.detail-resources h3 { margin-bottom: 17px; }
.resource-link { transition: background .2s, border-color .2s, box-shadow .2s; }
.resource-link:hover { border-color: #aabb99; background: #f3f6eb; box-shadow: 0 2px 9px #48643b09; }
.resource-link>span:last-child { transition: transform .2s; }
.resource-link:hover>span:last-child { transform: translate(2px,-2px); }
.dialog-close { transition: background .2s, border-color .2s; }
.dialog-close:hover { background: #e2ead6; border-color: #adbf99; }
.map-place .place-icon,.map-place .place-title { transition: transform .22s cubic-bezier(.2,.75,.25,1); }
@media(hover:hover) and (pointer:fine) {
  .map-place:hover .place-icon { transform: translateY(-2px); }
  .map-place:hover .place-title { transform: translateY(-1px); }
  .tool-row:hover .tool-row-arrow,.story-link:hover>span { transform: translate(2px,-2px); }
}
.map-place:active { transform: translateY(-1px) scale(.985); }
.emotion-list-button:active { background: #e9eedf; }
.button:active { transform: translateY(0); }
.tool-row-arrow { transition: transform .2s; }
.detail-nav button { border-radius: 4px; padding: 10px 11px; text-decoration: none; line-height: 1.6; }
.detail-nav button:hover { background: #eef3e5; }
.detail-nav button:first-child { margin-left: -11px; }
.detail-nav button:last-child { margin-right: -11px; }
.reflection-disclosure>summary { transition: background .2s, border-color .2s; }
.reflection-disclosure>summary:hover { background: #e8efdd; border-color: #afc19c; }
.reflection-summary-arrow { transition: transform .22s cubic-bezier(.2,.75,.25,1); }
.share-consent { padding-block: 5px; }
.name-field input:focus,.composer-select-label select:focus { background: #fffef8; }
.toast { line-height: 1.7; }
@media(max-width:600px) {
  .detail-dialog { scrollbar-gutter: auto; }
  .dialog-header>span { max-width: calc(100% - 91px); }
  .detail-nav button { font-size: 12px; padding-inline: 7px; }
  .detail-nav button:first-child { margin-left: -7px; }.detail-nav button:last-child { margin-right: -7px; }
}
@media(prefers-reduced-motion:reduce) {
  .detail-dialog[data-motion]::backdrop { animation: none; }
  .map-place .place-icon,.map-place .place-title,.resource-link>span:last-child,.reflection-summary-arrow,.tool-row-arrow { transition: none; }
}
@media print {
  .detail-dialog,.dialog-body { transform: none!important; opacity: 1!important; }
  .detail-dialog { scrollbar-gutter: auto; }
}