/* Memup components, copied from the Memup design system (components/bundle.css). */
/* Memup components: plain HTML with mu- classes, styled only through tokens.css. */
.mu-root, body { font-family: var(--font-sans); color: var(--fg); background: var(--bg); -webkit-font-smoothing: antialiased; }
.mu-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mu-stack { display: flex; flex-direction: column; gap: var(--space-3); }

/* Button: pills. One primary per view. */
.mu-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid transparent; font: 500 13px/18px var(--font-sans); cursor: pointer; white-space: nowrap; }
.mu-btn-lg { min-height: 40px; padding: 0 20px; font-size: 15px; }
.mu-btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-card); }
.mu-btn-primary:hover { background: var(--primary-hover); }
.mu-btn-secondary { background: var(--button); color: var(--fg); border-color: var(--line-strong); box-shadow: var(--shadow-card); }
.mu-btn-secondary:hover { background: var(--chip); }
.mu-btn-ghost { background: transparent; color: var(--fg); }
.mu-btn-ghost:hover { background: var(--chip); }
.mu-btn:disabled { background: var(--button); color: var(--muted); border-color: var(--field); box-shadow: none; cursor: default; }
.mu-btn:focus-visible, .mu-pill:focus-visible, .mu-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mu-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Lens: the search field. A gradient hairline when focused (or .is-on). */
.mu-lens { display: flex; align-items: center; gap: var(--space-2); height: 38px; max-width: 560px; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--button); border: 1px solid var(--field); box-shadow: var(--shadow-lens); color: var(--muted); }
.mu-lens.is-on, .mu-lens:focus-within { border-color: transparent; background: linear-gradient(var(--button), var(--button)) padding-box, linear-gradient(90deg, var(--g1), var(--g2)) border-box; }
.mu-lens input, .mu-lens .mu-lens-text { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px/20px var(--font-sans); color: var(--fg); }
.mu-lens input::placeholder, .mu-lens .is-placeholder { color: var(--muted); }
.mu-lens svg { flex: none; }

/* Tag: why a result matched. */
.mu-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--chip); color: var(--fg-2); font: 500 11px/14px var(--font-sans); white-space: nowrap; }
.mu-row-selected .mu-tag { background: transparent; box-shadow: inset 0 0 0 1px var(--field); }

/* Kind tile: an item kind's colour with its glyph. */
.mu-tile { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: var(--on-tile); flex: none; }
.mu-tile svg { width: 18px; height: 18px; }
.mu-tile-documents { background: var(--tile-documents); }
.mu-tile-photos { background: var(--tile-photos); }
.mu-tile-recordings { background: var(--tile-recordings); }
.mu-tile-screenshots { background: var(--tile-screenshots); }
.mu-tile-voice-notes { background: var(--tile-voice-notes); }
.mu-tile-neutral { background: var(--button); color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* Result row: a found item. */
.mu-result { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) 10px; border-radius: var(--radius-row); border: 1px solid transparent; }
.mu-result:hover { background: var(--chip); }
.mu-row-selected { border-color: transparent; background: linear-gradient(var(--chip), var(--chip)) padding-box, linear-gradient(90deg, var(--g1), var(--g2)) border-box; }
.mu-result-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mu-result-title { font: 600 13px/18px var(--font-sans); color: var(--fg); }
.mu-result-meta { font: 400 11px/14px var(--font-sans); color: var(--muted); }
.mu-row-selected .mu-result-meta { color: var(--fg-2); }
.mu-result-snippet { font: 400 12px/17px var(--font-sans); color: var(--fg-2); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mu-result-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
mark, .mu-mark { background: var(--mark); color: var(--mark-fg); border-radius: 3px; padding: 0 2px; }

/* Choice pills: choose one. */
.mu-pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: var(--radius-pill); border: 1px solid var(--field); background: var(--button); color: var(--fg); font: 400 12px/16px var(--font-sans); cursor: pointer; }
.mu-pill:hover { background: var(--chip); }
.mu-pill[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); font-weight: 500; }

/* Privacy point: icon tile, title, sentence. */
.mu-points { list-style: none; margin: 0; padding: 0 var(--space-4); border-radius: var(--radius-row); background: var(--panel); }
.mu-point { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-4) 0; }
.mu-point + .mu-point { border-top: 1px solid var(--line); }
.mu-point-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: var(--radius-row); background: var(--accent-soft); color: var(--accent); }
.mu-point-icon svg { width: 20px; height: 20px; }
.mu-point-title { font: 600 15px/20px var(--font-sans); color: var(--fg); }
.mu-point-body { font: 400 13px/20px var(--font-sans); color: var(--fg-2); }

/* Card: grouped content on panel. */
.mu-card { padding: var(--space-6); border-radius: var(--radius-card); background: var(--panel); display: flex; flex-direction: column; gap: var(--space-2); }
.mu-card-title { margin: 0; font: 600 24px/30px var(--font-sans); letter-spacing: -0.01em; color: var(--fg); text-wrap: balance; }
.mu-card-body { margin: 0; font: 400 16px/26px var(--font-sans); color: var(--fg-2); }
.mu-eyebrow { font: 500 13px/20px var(--font-sans); color: var(--accent); }
.mu-code { font: 400 13px/18px var(--font-mono); color: var(--accent); }

@media (prefers-reduced-motion: reduce) { .mu-btn, .mu-pill, .mu-result { transition: none; } }