/* Lenses (lenses-ui.js): the header chip, the sheet's lens list, the profile's lens block, the "from your board"
   label on a card. In the board's Day and Night looks (app.css tokens). */
.lens-chip { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; max-width: min(42vw, 220px); min-height: 36px; border: 1px solid var(--line);
  background: none; border-radius: 999px; padding: 6px 12px; font: 600 13px/1 var(--sans); color: var(--fg-2); }
.lens-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lens-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--mute); flex: none; }
.lens-chip.on { color: var(--fg); border-color: var(--accent); }
.lens-chip.on::before { background: var(--accent); border-color: var(--accent); }
.lens-list { display: grid; gap: 8px; margin: 10px 0 4px; }
.lens-list button { text-align: left; border: 1px solid var(--line); background: var(--bg-2); border-radius: 14px; padding: 11px 14px; display: grid; gap: 4px; }
.lens-list button b { font: 500 18px/1.15 var(--serif); color: var(--fg); }
.lens-list button small { font-size: 13px; color: var(--mute); }
.lens-list button.on { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.lens-new textarea, .lens-new input, .lens-edit input { width: 100%; font: 16px/1.4 var(--sans); color: var(--fg); background: var(--bg);
  border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; }
.lens-new .row, .lens-edit .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.lens-edit { margin-top: 18px; }
.lens-edit summary { font-size: 14px; color: var(--fg-2); cursor: pointer; padding: 6px 0; }
#prof-lens .lens-row { margin: 14px 0 0; }
#prof-lens h3 { font: 600 13px/1.2 var(--sans); color: var(--mute); margin: 0 0 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#prof-lens .lens-tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
#prof-lens .lens-tags li { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 15px; }
#prof-lens .lens-tags li b { font-weight: 600; color: var(--fg); }
#prof-lens .lens-tags li small { font-size: 12.5px; color: var(--mute); }
#prof-lens .lens-tags li.none { background: none; border: 0; padding: 0; color: var(--mute); }
#prof-lens .range { margin: 16px 0 0; color: var(--fg-2); max-width: 64ch; }
#prof-lens .range b { font-weight: 600; color: var(--accent); margin-right: 6px; }
#prof-lens .pull-list { list-style: none; padding: 0; margin: 0; }
#prof-lens .pull-list li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid var(--line-2); }
#prof-lens .pull-list li.far { opacity: .72; }
#prof-lens .pull-list button { flex: none; white-space: nowrap; }
#prof-lens .pull-list q { display: block; margin-top: 3px; color: var(--fg-2); font-family: var(--serif); }
#prof-lens .pull-list small { font-size: 12.5px; color: var(--mute); }
.bucket:has(+ .from-board) { margin-right: 10px; }
.bucket.from-board { color: var(--accent); }
@media (min-width: 820px) { .lens-chip { order: 1; } header.top .tabs { order: 2; } header.top .count, header.top #undo { order: 3; } }