.personal-maps { position: fixed; z-index: 15; inset: calc(var(--app-header-h, 4rem) + 1rem) 4.5rem auto auto; width: min(25rem, calc(100vw - 2rem)); max-height: calc(100dvh - 13rem); overflow: auto; padding: 1rem; background: var(--tds-surface-default); color: var(--tds-text-primary); border: 1px solid var(--tds-border-default); border-radius: 1rem; }
.personal-maps h1 { font-size: 1.2rem; margin: 0 0 .5rem; }
.personal-maps button, .personal-maps a { min-height: 44px; margin: .2rem; display: inline-flex; align-items: center; }
.personal-maps label { display: grid; gap: .25rem; margin-block: .75rem; }
.personal-maps input, .personal-maps select, .personal-maps textarea { width: 100%; box-sizing: border-box; min-height: 44px; }
.personal-maps textarea { min-height: 5rem; }
.personal-maps li { margin-block: .5rem; }
.personal-maps small { display: block; }
.personal-maps__marker { width: 44px; height: 44px; border: 4px solid; border-radius: 50%; font-size: 1.3rem; cursor: pointer; background: var(--tds-surface-default); }
.personal-maps[aria-busy="true"] button { pointer-events: none; }
@media (max-height: 500px) { .personal-maps { inset-block-start: 4rem; max-height: calc(100dvh - 6rem); } }

.personal-maps[hidden] { display: none; }
.personal-maps__options { margin-block: .5rem; }
.personal-maps__options summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
.personal-maps__options a { font-size: var(--tds-font-size-caption); }
.personal-maps ol { padding-inline-start: 1.5rem; }
.personal-maps ol button { justify-content: flex-start; text-align: start; }
.personal-maps label input, .personal-maps label textarea, .personal-maps label select { font: inherit; border: 1px solid var(--tds-border-default); border-radius: var(--tds-radius-role-control); padding: .5rem; background: var(--tds-surface-default); color: var(--tds-text-primary); }

.personal-maps input[type="checkbox"] { width: 24px; min-height: 24px; }
.personal-maps input[type="color"] { padding: .15rem; height: 44px; }

@media (max-width: 768px) { .personal-maps { max-height: 42dvh; } }

.personal-maps h2 { font-size: 1rem; }
.personal-maps summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; }
@media (max-width: 768px) {
    .personal-maps { inset: auto 1rem calc(var(--app-attribution-h, 3rem) + 1rem); max-height: 48dvh; }
    .personal-maps-open [data-app-card] { display: none; }
}

@media (max-width: 640px) { .site-header__end > [data-personal-maps-open] span { display: none; } .site-header__end > [data-personal-maps-open] { min-width: 44px; min-height: 44px; padding: .5rem; } }

.personal-maps--editing > .personal-maps__tools,
.personal-maps--editing > .personal-maps__content,
.personal-maps-editing [data-app-card] { display: none; }
.personal-maps__form-actions { position: sticky; bottom: -.25rem; z-index: 1; padding-block: .5rem; background: var(--tds-surface-default); display: flex; flex-wrap: wrap; gap: .25rem; }

.personal-maps__list, .personal-maps__points { display: grid; gap: .75rem; margin: .75rem 0; padding: 0; list-style: none; }
.personal-maps .personal-maps__entry, .personal-maps .personal-maps__point { margin: 0; padding: .75rem; border: 1px solid var(--tds-border-default); border-radius: var(--tds-radius-lg); background: var(--tds-surface-default); overflow-wrap: anywhere; }
.personal-maps .personal-maps__entry-open, .personal-maps .personal-maps__point-open { display: flex; width: 100%; margin: 0; padding: .25rem 0; justify-content: flex-start; text-align: start; font-weight: 600; font-size: 1rem; white-space: normal; }
.personal-maps__entry-meta, .personal-maps__point > small { color: var(--tds-text-secondary); margin-block: .25rem; }
.personal-maps__points { counter-reset: map-point; }
.personal-maps__point { counter-increment: map-point; }
.personal-maps__point::before { content: counter(map-point); float: inline-start; min-width: 1.5rem; margin-inline-end: .5rem; color: var(--tds-text-secondary); }
.personal-maps .personal-maps__point-open { width: calc(100% - 2rem); }
.personal-maps__tools { display: flex; flex-wrap: wrap; gap: .25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--tds-border-default); }