/* =========================================================================
   EMPIRIUM OS — MOBILE: VISION BOARDS
   New rules only — .section-head/.empty already live in app.css.
   ========================================================================= */

/* ---- board picker ----
   Shown only when there is more than one board (mobile-vision-boards.js:
   pickerHTML). Same control treatment as .as-select in mobile-autosuggest.css
   — native chevron suppressed, SVG one painted on, min-height var(--tap) so
   it stays a comfortable thumb target. ---- */
.vb-bar{ margin-bottom:12px; }
.vb-board-select{
  width:100%; min-height:var(--tap); padding:0 32px 0 12px;
  background:var(--card-subtle); color:var(--text);
  border:1px solid var(--line); border-radius:var(--r-md);
  font-family:var(--font); font-size:14px;
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FA3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
}
.vb-board-select:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.3);
}

.vb-add-row{ margin-bottom:12px; }
.vb-add-btn{ width:100%; }

.vb-grid{
  column-count:2; column-gap:8px;
  margin-bottom:18px;
}
.vb-photo{
  display:block; width:100%; height:auto;
  margin:0 0 8px; border-radius:var(--r-lg);
  break-inside:avoid; -webkit-column-break-inside:avoid;
  background:var(--card-subtle);
}
/* Placeholder for a photo whose bytes are not on this device — the layout
   still syncs, the blob does not (see mobile-vision-boards.js). Given a
   height of its own because there is no <img> to size the box. */
.vb-photo-missing{
  height:120px;
  background:repeating-linear-gradient(
    45deg, var(--card-subtle), var(--card-subtle) 8px,
    transparent 8px, transparent 16px
  );
}

.vb-viewer{
  position:fixed; inset:0; z-index:999;
  background:rgba(0,0,0,.92);
  display:flex; align-items:center; justify-content:center;
  padding:24px;
}
.vb-viewer img{
  max-width:100%; max-height:100%;
  border-radius:var(--r-lg);
  object-fit:contain;
}