/*
 * File boxes: a large dashed box with an upload mark, to drop a file on or click (components/drop-zone), in the
 * page's own color: the camp's on family pages (--camp), the office's primary in the office. The office's Filament
 * upload boxes (FilePond) get the same look below. No fixed width.
 */
.co-drop {
    --co-drop-accent: var(--camp, var(--primary-600, #2f5bff));
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    min-height: 5.5rem;
    padding: 1.1rem 1.25rem;
    border: 2px dashed color-mix(in srgb, var(--co-drop-accent) 35%, #c9ccd6);
    border-radius: 0.9rem;
    background: color-mix(in srgb, var(--co-drop-accent) 4%, #fff);
    color: inherit;
    transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.co-drop:hover, .co-drop:focus-within { border-color: var(--co-drop-accent); background: color-mix(in srgb, var(--co-drop-accent) 8%, #fff); }
.co-drop:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--co-drop-accent) 25%, transparent); }
.co-drop--over { border-style: solid; border-color: var(--co-drop-accent); background: color-mix(in srgb, var(--co-drop-accent) 12%, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--co-drop-accent) 18%, transparent); }
.co-drop--chosen { border-style: solid; }
/* The real input covers the whole box: the browser takes the click and the dropped file itself. */
.co-drop__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; font-size: 0; }
.co-drop__icon { flex: none; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--co-drop-accent) 12%, #fff); color: var(--co-drop-accent); transition: transform 0.25s; }
.co-drop--over .co-drop__icon { transform: translateY(-3px); }
.co-drop__words { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.co-drop__words strong { font-weight: 600; }
.co-drop__words span { font-size: 0.88em; opacity: 0.72; }
.co-drop__file { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 0.35rem; font-size: 0.8em; font-weight: 600; color: var(--co-drop-accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.co-drop__file:empty { display: none; }
.co-drop--chosen { padding-bottom: 1.6rem; }
@media (prefers-reduced-motion: reduce) { .co-drop, .co-drop__icon { transition: none; } }

/* Where a box replaced a plain button: the field takes the full width, and beside "Take a photo" the box fills the row. */
.fp-field:has(> .co-drop), .fp-upload:has(> .co-drop) { display: block; }
.fp-upload-choices { align-items: center; gap: 0.6rem; }
.fp-upload-choices > .co-drop { flex: 1 1 16rem; margin-top: 0.75rem; }
.fp-field > .co-drop { margin-top: 0.35rem; }

/* The office's Filament upload boxes (FilePond): the same dashed box. */
.filepond--root .filepond--drop-label { min-height: 5.5rem; }
.filepond--root .filepond--panel-root { background: color-mix(in srgb, var(--primary-600, #2f5bff) 4%, #fff); border: 2px dashed color-mix(in srgb, var(--primary-600, #2f5bff) 35%, #c9ccd6); border-radius: 0.9rem; }
.dark .filepond--root .filepond--panel-root { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.2); }
.filepond--root:hover .filepond--panel-root, .filepond--root[data-hopper-state="drag-over"] .filepond--panel-root { border-color: var(--primary-600, #2f5bff); }
.filepond--root .filepond--drop-label label { font-weight: 600; }
.filepond--root .filepond--drop-label label::before { content: ""; display: block; width: 1.6rem; height: 1.6rem; margin: 0 auto 0.4rem; background: var(--primary-600, #2f5bff);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4'/%3E%3Cpath d='m7.5 8.5 4.5-4.5 4.5 4.5'/%3E%3Cpath d='M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15V4'/%3E%3Cpath d='m7.5 8.5 4.5-4.5 4.5 4.5'/%3E%3Cpath d='M4 15v3a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") center / contain no-repeat; }