/* Photo frames, the owner's side (public/framesetup.js). Tokens only, so every theme dresses it
   the way it dresses Shared links; the frame page itself is public/frame.css. */

.pf-headbtn { margin-left: auto; align-self: center; }

.pf-list { display: flex; flex-direction: column; gap: 8px; margin: 0 0 14px; }
.pf-list:empty { display: none; }
.pf-row {
  display: flex; align-items: center; gap: 10px; min-width: 0;
  padding: calc(9 * var(--sp)) calc(11 * var(--sp));
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--panel);
}
.pf-ic { width: 20px; height: 20px; flex: none; color: var(--mut); }
.pf-ic > svg { width: 100%; height: 100%; }
.pf-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pf-main b { font-weight: var(--fw-semi); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-sub { font-size: var(--fs-sm); color: var(--faint); overflow-wrap: anywhere; }
.pf-warn { color: var(--danger); font-weight: var(--fw-medium); }
.pf-row .btn { flex: none; }

.pf-shared { margin-top: 22px; }
.pf-h { font-size: var(--fs-md); font-weight: var(--fw-semi); color: var(--mut); margin: 0 0 10px; }

/* the form */
.pf-from .seg { display: inline-flex; margin-bottom: 8px; }
.pf-src { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 4px 0; }
.pf-src .folder-mini { width: 18px; height: 18px; flex: none; }
.pf-path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-meta); font-size: var(--fs-md); }
.pf-src .linkbtn { margin: 0; flex: none; }
.pf-tree { max-height: 240px; overflow: auto; margin: 6px 0; border: 1px solid var(--line); border-radius: var(--r-sm); }
.pf-k-tag select, .pf-k-album select { width: 100%; }
.pf-count { margin: 4px 0 0; min-height: 1.3em; }
.pf-from { margin-bottom: 4px; }
.pf-subchk .check { margin-top: 0; }
.pf-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.pf-grid select { width: 100%; }
.pf-grid .field > span { white-space: nowrap; }

/* setting a device up */
.pf-link .share-url { max-width: none; }
.pf-pair { margin: 14px 0 6px; padding: calc(12 * var(--sp)); border: 1px dashed var(--line2); border-radius: var(--r-sm); }
.pf-pair p { margin: 0 0 10px; }
.pf-code { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.pf-code b { font-family: var(--font-meta); font-size: var(--fs-3xl); letter-spacing: .12em; color: var(--text); }
.pf-code .hint { margin: 0; }
.pf-tip { margin: 12px 0 2px; }

@media (max-width: 560px) {
  .pf-grid { grid-template-columns: minmax(0, 1fr); }
  .pf-row { flex-wrap: wrap; }
  .pf-main { flex-basis: calc(100% - 34px); }
  .pf-row .pf-setup { margin-left: 30px; }
  /* Labelled on a phone too: an icon alone on its own row under the heading said nothing. */
  .pf-headbtn { padding-left: 10px; padding-right: 10px; }
}

/* On a phone the heading wrapped and left the button alone on a row of its own (judges 4.7):
   the title and its count on the left, the button beside them. */
html[data-narrow] .view-head:has(> .pf-headbtn) { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: center; }
html[data-narrow] .view-head:has(> .pf-headbtn) > :not(.pf-headbtn) { grid-column: 1; min-width: 0; }
html[data-narrow] .view-head > .pf-headbtn { grid-column: 2; grid-row: 1 / span 2; margin: 0; }