.bsite-photo-picker { min-width:0; }
.bsite-photo-choice { display:flex; align-items:center; gap:var(--space-300); margin-bottom:var(--space-300); }
.bsite-photo-choice .bsite-note { margin:0; min-width:0; overflow-wrap:anywhere; }
.bsite-photo-thumbnail { width:120px; aspect-ratio:3/2; flex:none; overflow:hidden; border:1px solid var(--bbr-bd-default); border-radius:var(--radius-md); background:var(--bbr-bg-sunken); }
.bsite-photo-thumbnail img,.bsite-photo-tile-image img { display:block; width:100%; height:100%; object-fit:cover; }
.bsite-photo-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-200); }
.bsite-photo-external { margin-top:var(--space-300); }
.bsite-photo-external summary { cursor:pointer; color:var(--bbr-fg-muted); font-size:var(--text-sm); padding:var(--space-200) 0; }
.bsite-photo-external[open] summary { margin-bottom:var(--space-200); }
.bsite-photo-dialog { width:min(760px,calc(100vw - var(--space-800))); max-height:calc(100dvh - var(--space-800)); padding:var(--space-500); margin:auto; overflow:auto; box-sizing:border-box; color:var(--bbr-fg-primary); background:var(--bbr-bg-surface); border:1px solid var(--bbr-bd-default); border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); font-family:var(--bbr-font-sans); }
.bsite-photo-dialog::backdrop { background:color-mix(in srgb,var(--bbr-fg-primary) 45%,transparent); }
.bsite-photo-dialog-header { display:flex; align-items:center; justify-content:space-between; gap:var(--space-300); margin-bottom:var(--space-300); }
.bsite-photo-dialog-header h2 { margin:0; font-size:var(--text-lg); font-weight:600; color:var(--bbr-fg-heading); }
.bsite-photo-dialog .bsite-field { display:flex; flex-direction:column; gap:var(--space-200); font-size:var(--text-sm); margin-bottom:var(--space-400); }
.bsite-photo-dialog input { width:100%; min-width:0; box-sizing:border-box; padding:var(--space-300); border:1px solid var(--bbr-bd-default); border-radius:var(--radius-md); background:var(--bbr-bg-surface); color:var(--bbr-fg-primary); font:inherit; }
.bsite-photo-dialog input:focus-visible,.bsite-photo-external summary:focus-visible { outline:none; box-shadow:var(--shadow-focus); }
.bsite-photo-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-300); margin:var(--space-400) 0; }
.bsite-photo-tile.btn { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start; gap:var(--space-200); height:auto; min-width:0; padding:var(--space-200); text-align:left; white-space:normal; }
.bsite-photo-tile[aria-pressed=true] { border-color:var(--bbr-accent); box-shadow:var(--shadow-focus); }
.bsite-photo-tile-image { display:block; aspect-ratio:3/2; overflow:hidden; border-radius:var(--radius-sm); background:var(--bbr-bg-sunken); }
.bsite-photo-tile-label { color:var(--bbr-fg-primary); font-size:var(--text-sm); font-weight:600; overflow-wrap:anywhere; }
.bsite-photo-source { color:var(--bbr-fg-muted); font-size:var(--text-xs); }
.bsite-photo-missing { display:flex; align-items:center; justify-content:center; min-height:100%; padding:var(--space-200); box-sizing:border-box; color:var(--bbr-fg-muted); font-size:var(--text-xs); text-align:center; }
.bsite-photo-dialog-footer { display:flex; flex-wrap:wrap; gap:var(--space-200); justify-content:space-between; padding-top:var(--space-300); border-top:1px solid var(--bbr-bd-default); }
.bsite-photo-picker [hidden],.bsite-photo-dialog [hidden] { display:none!important; }
@media(max-width:600px) { .bsite-photo-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .bsite-photo-dialog { padding:var(--space-400); } .bsite-photo-dialog input { min-height:44px; font-size:var(--text-base); } .bsite-photo-dialog .btn,.bsite-photo-actions .btn { min-height:44px; } }