/* Shared styles for the ONE gallery view engine (js/view.js). Both pages link this;
   page-specific chrome (headers, pickers, toasts) stays in each layout. */

/* Justified rows: every image in a row shares the row height; widths distribute by
   aspect ratio via flex-grow, so each row fills the container exactly. */
.vrow { display: flex; gap: 8px; margin-bottom: 8px; }
.vrow.last { justify-content: center; }

.tile {
  position: relative; border-radius: 5px; overflow: hidden; cursor: pointer;
  background: var(--panel); min-width: 0;
}
.tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .15s; opacity: 0;
}
.tile img.loaded { opacity: 1; }
.tile:hover::after {
  content: ''; position: absolute; inset: 0;
  outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 5px;
  pointer-events: none;
}
/* No thumbnail exists for this image; clickable, but the original is never grid-loaded. */
.tile.no-thumb {
  width: 200px; line-height: 1.4; padding: 8px; display: flex; align-items: center;
  justify-content: center; text-align: center; font-size: 12px; color: var(--muted);
  border: 1px dashed var(--line);
}
/* The [ + ] placeholder - manage mode's add-image tile, from the design proof. */
.tile.add-tile { font-size: 34px; color: var(--accent); border-style: dashed; }
.tile.add-tile:hover { background: color-mix(in srgb, var(--panel) 80%, var(--accent) 20%); }

/* Per-tile manage controls, shown on hover. */
.tilecontrols {
  position: absolute; top: 4px; right: 4px; display: none; gap: 4px; z-index: 2;
}
.tile:hover .tilecontrols { display: flex; }
.tilecontrols button {
  width: 26px; height: 26px; padding: 0; border-radius: 5px; font-size: 12px;
  line-height: 1; border: 1px solid var(--line); background: var(--panel); color: var(--text);
  cursor: pointer;
}
.tilecontrols button:hover { border-color: var(--accent); color: var(--accent); }

/* The full-row highlight card. */
.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  margin: 4px 0 12px; overflow: hidden; position: relative;
}
.card .imgwrap {
  background: color-mix(in srgb, var(--bg) 70%, black 30%);
  display: flex; align-items: center; justify-content: center; cursor: zoom-in;
}
/* Height comes from JS (aspect-derived); the image just fits inside it. */
.card .imgwrap img { max-width: 100%; max-height: 100%; display: block; }
.card .imgwrap.missing { color: var(--muted); font-size: 13px; cursor: default; }
.card .close {
  position: absolute; top: 8px; right: 8px; z-index: 2;
  width: 30px; height: 30px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--panel); color: var(--text); font-size: 15px; line-height: 1;
  cursor: pointer;
}
.card .close:hover { border-color: var(--accent); color: var(--accent); }
.meta {
  display: flex; flex-wrap: wrap; gap: 4px 28px; padding: 12px 16px; margin: 0;
  border-top: 1px solid var(--line); font-size: 13px;
}
.meta div { min-width: 130px; }
.meta dt { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }
.meta dd { margin: 0; }
.meta .wide { flex: 1 1 100%; min-width: 0; }
.meta dd.mono { font-family: ui-monospace, monospace; font-size: 12px; overflow-wrap: anywhere; }

/* Card action row: copy permalink, and FULL IMAGE for a large original. */
.cardactions {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 8px 16px 0;
}
.cardactions button {
  font: inherit; font-size: 13px; border: 1px solid var(--line); border-radius: 6px;
  padding: 4px 10px; background: var(--bg); color: var(--text); cursor: pointer;
}
.cardactions button:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.cardactions button:disabled { opacity: .6; cursor: default; }

/* The editable card form (manage mode). */
.editform input {
  font: inherit; color: var(--text); background: var(--bg);
  border: 1px solid var(--line); border-radius: 5px; padding: 3px 8px; width: 100%;
}
.editform input:focus { border-color: var(--accent); outline: none; }
.editform .actions { display: flex; gap: 10px; align-items: center; margin-top: 6px; }
.editform button {
  font: inherit; border: 1px solid var(--line); border-radius: 6px; padding: 5px 12px;
  background: var(--bg); color: var(--text); cursor: pointer;
}
.editform button.primary { background: var(--accent); color: #06121f; border-color: var(--accent); font-weight: 600; }
.editform button.danger { color: #ff8c8c; }
.editform .muted { color: var(--muted); font-size: 12px; margin-left: auto; }

/* List view - the same data as rows. */
.listview { border-collapse: collapse; width: 100%; font-size: 14px; }
.listview th, .listview td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.listview th { color: var(--muted); font-weight: 600; font-size: 13px; }
.listview tbody tr { cursor: pointer; }
.listview tbody tr:hover td { background: var(--panel); }
.listview .muted { color: var(--muted); }
.listview .missing { color: #ff8c8c; font-size: 12px; }
.listview button.danger {
  font: inherit; font-size: 12px; color: #ff8c8c; background: none;
  border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px; cursor: pointer;
}

.pswp__custom-caption {
  background: rgba(0,0,0,.75); font-size: 13px; line-height: 1.5;
  color: #fff; padding: 8px 12px; border-radius: 4px;
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 16px;
  max-width: 90%; white-space: pre-line;
}

/* Multi-select picker (manage: add existing images). */
.picklist { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 6px; max-height: 340px; overflow: auto; margin-top: 10px; }
.pickrow { display: flex; align-items: center; gap: 8px; padding: 4px 6px;
           border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.pickrow:hover { border-color: var(--accent); }
.pickrow img { width: 54px; height: 36px; object-fit: cover; border-radius: 3px; background: var(--bg); }
.pickrow span { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pickrow input:disabled + img { opacity: .4; }