/* Photo picker (templates/_photo_picker.html) - camera AND library, and
           an accumulating set rather than one-shot replacement. */
        .pp input[type="file"] { display: none !important; }
        .pp-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; }
        .pp-actions button { min-height: 2.75rem; }
        .pp-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
        .pp-grid[hidden] { display: none; }
        .pp-thumb { position: relative; width: 5rem; height: 5rem; border-radius: var(--radius-sm);
            overflow: hidden; border: 1px solid var(--border); background: var(--card-bg); }
        .pp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
        /* REMOVE IS A THUMB-SIZED TARGET: the press area is 2.75rem square in
           the photo's corner, and the dark circle inside it is the mark. It
           was a 22px circle and nothing more. */
        .pp-drop { position: absolute; top: 0; right: 0; width: 2.75rem; height: 2.75rem; min-height: 2.75rem;
            padding: 3px; border: none; border-radius: 0; background: transparent; color: #fff;
            display: flex; align-items: flex-start; justify-content: flex-end; box-shadow: none; }
        .pp-drop-x { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: rgba(0,0,0,0.62);
            font-size: 1rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
        .pp-drop:hover { background: transparent; transform: none; box-shadow: none; }
        .pp-drop:hover .pp-drop-x { background: var(--red); color: var(--red-on); }
        .pp-count { font-size: 0.82rem; font-weight: 600; color: var(--text); margin: 0.45rem 0 0; }
        .pp-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0.25rem 0 0; }
        /* The document picker (doc_picker in _photo_picker.html): the photo
           picker's buttons and hint, with each chosen file as a row. */
        .dp-list { list-style: none; margin: 0.6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
        .dp-list[hidden] { display: none; }
        .dp-item { display: flex; align-items: center; gap: 0.55rem; min-width: 0; padding: 0 0 0 0.65rem;
            border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card-bg); }
        .dp-item > svg { flex: none; width: 18px; height: 18px; color: var(--text-muted); }
        .dp-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
            font-size: 0.88rem; color: var(--text); }
        .dp-size { flex: none; font-size: 0.78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
        .dp-item .pp-drop { position: static; flex: none; color: var(--text); align-items: center; justify-content: center; }
        .dp-item .pp-drop-x { background: var(--gray-bg); color: var(--text); }