/* マップの一覧ページ（/maps） */
body.maps-page { overflow: auto; background: var(--bg, #f1f3f8); }
.mp-wrap { max-width: 720px; margin: 0 auto; padding: 40px 16px 64px; }
.mp-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 24px; }
.mp-brand { font-size: 22px; color: var(--accent); }
.mp-head h1 { font-size: 20px; margin: 0; }
.mp-who { margin-left: auto; font-size: 12px; color: var(--text-muted); }

.mp-new { display: flex; gap: 8px; }
.mp-new input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: 14px;
  color: var(--text); background: var(--surface); border: 1px solid var(--border-strong, var(--border)); border-radius: 8px;
}
.mp-new input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.mp-new button {
  flex: none; padding: 10px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--accent); border: 1px solid var(--accent); border-radius: 8px;
}
.mp-new button:disabled { opacity: .6; cursor: default; }
.mp-msg { min-height: 1.4em; margin: 8px 2px 16px; font-size: 12.5px; color: var(--text-muted); }
.mp-msg.is-error { color: #a02a23; }

.mp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mp-list a {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none;
  color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.mp-list a:hover { border-color: var(--accent); }
.mp-list .t { flex: 1; min-width: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-list .m { flex: none; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.mp-list .r { flex: none; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }
.mp-empty { padding: 28px 16px; text-align: center; font-size: 13px; color: var(--text-muted); border: 1px dashed var(--border); border-radius: 10px; }

@media (max-width: 520px) {
  .mp-new { flex-direction: column; }
}