/* manage-more: uses the tokens in /app.css. */
.mm-badge { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; background: var(--danger); color: #fff; font: 700 11.5px/1 Lato, sans-serif; }
.manage-list [data-manage] { display: flex; align-items: center; gap: 8px; }
.mm-list .icon-btn:focus-visible, .mm-plan:focus-within { outline: none; box-shadow: var(--focus); }

.mm-block { display: grid; gap: 10px; }
.mm-block > p { margin: 0; line-height: 1.55; }
.mm-h { margin: 0; display: flex; align-items: baseline; gap: 10px; font: 700 18px/1.35 'Playfair Display', Georgia, serif; color: var(--deep); }
.mm-h .muted { font-family: Lato, sans-serif; font-weight: 400; }

.mm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mm-list > li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--bg); line-height: 1.45; transition: background-color var(--dur-1); }
.mm-list > li:hover { background: var(--sunken); }
.mm-list > li.mm-empty, .mm-list > li.mm-empty:hover { background: none; padding: 4px 0; }
.mm-list .btn { flex: none; display: inline-flex; align-items: center; gap: 6px; }
.mm-post { display: grid; gap: 1px; min-width: 0; flex: 1; }
.mm-post strong { color: var(--deep); font-size: 14.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-post .small { line-height: 1.4; }
.mm-rank { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--tint); color: var(--deep); font: 700 13px/1 Lato, sans-serif; }
.mm-highlights .order-btns { flex: none; }

.mm-search { position: relative; display: block; }
.mm-search svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.mm-search .field { width: 100%; padding-left: 36px; }

.mm-reports { max-width: none; }
.mm-reports .report-card { background: var(--bg); box-shadow: none; }

.mm-plan { display: flex; align-items: center; gap: 12px; width: 100%; cursor: pointer; border-radius: 10px; }
.mm-plan input { width: 18px; height: 18px; flex: none; accent-color: var(--blue); }
.mm-plans .pill svg { margin-left: -2px; }
.mm-sources { margin: 0; }

.mm-preview { counter-reset: mm; gap: 4px; }
.mm-preview > li { counter-increment: mm; padding: 8px 12px; font-size: 14.5px; color: var(--ink-2); }
.mm-preview > li::before { content: counter(mm); width: 20px; color: var(--ink-4); font: 700 12px/1 Lato, sans-serif; }
.mm-preview > li.me { background: var(--tint); color: var(--deep); font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--sky); }
.mm-preview > li.me svg { color: var(--blue); flex: none; }
.mm-preview > li.archived span:first-of-type { opacity: .7; }

@media (max-width: 640px) {
  .mm-list > li { flex-wrap: wrap; padding: 10px; }
  .mm-found .btn { margin-left: 0; }
  .mm-found > li .mm-post { flex-basis: calc(100% - 120px); }
  .mm-highlights .mm-post { flex-basis: calc(100% - 40px); }
  .mm-highlights .order-btns { margin-left: 38px; }
}