/* ============================================================
   Memory 記憶頁（memory.html）
   ============================================================ */

.mem-tabs {
  display: flex; padding: 0 var(--margin-page);
  border-bottom: 1px solid color-mix(in srgb, var(--outline-variant) 30%, transparent);
  margin-bottom: 20px;
}
.mem-tab {
  flex: 1; padding: 12px 0; border: none; background: transparent;
  color: var(--on-surface-variant); font-size: var(--fs-body); font-weight: 500;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.mem-tab[aria-selected="true"] { color: var(--primary); border-bottom-color: var(--primary); }

/* Pinned 卡片格 */
.pin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pin-card {
  background: var(--secondary-fixed-dim); color: var(--on-secondary-fixed);
  border-radius: var(--radius-xl); padding: 16px;
  aspect-ratio: 4 / 3; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: var(--shadow-card);
}
.pin-card__date { font-size: 13px; opacity: .7; }
.pin-card__content { flex: 1; overflow: hidden; font-size: 14px; line-height: 1.4; }
.pin-card__audio-actions { display: flex; justify-content: flex-end; gap: 4px; margin-top: 10px; }
.pin-card__audio-btn {
  color: var(--on-secondary-fixed);
}
.pin-card__audio-btn:hover, .pin-card__audio-btn:active {
  color: var(--on-secondary-fixed);
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}

/* 搜尋 */
.mem-search { position: relative; margin-bottom: 20px; }
.mem-search svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--on-surface-variant);
}
.mem-search input {
  width: 100%; height: var(--btn-lg); padding: 0 16px 0 40px;
  background: color-mix(in srgb, var(--secondary-fixed-dim) 30%, transparent);
  border: none; border-radius: var(--radius-lg);
  color: var(--on-surface); font-size: var(--fs-body);
}
.mem-search input:focus { outline: 1px solid color-mix(in srgb, var(--primary) 50%, transparent); }

/* 底部動作 */
.mem-actions { display: flex; gap: 12px; padding: 32px 0 8px; }
.mem-actions .btn { flex: 1; }