/* Bookmark maker (tools/bookmark-maker): form details on top of .tool / .tool-form in site.css. */
.bmk-form input[type="text"] { text-transform: none; min-width: 0; }
.bmk-form .bmk-stack { flex-direction: column; align-items: stretch; gap: 6px; }
.bmk-form .bmk-stack input[type="text"], .bmk-form textarea, .bmk-form select { max-width: none; width: 100%; padding: 9px 10px; font: inherit; border: 1px solid var(--rule); background: #fff; color: var(--ink); }
.bmk-form textarea { resize: vertical; min-height: 4.5em; }
.bmk-form label > select { flex: 1; max-width: 190px; padding: 7px 8px; font: inherit; border: 1px solid var(--rule); background: #fff; }
.bmk-form .bmk-stack > select { max-width: none; }
.bmk-form input[type="file"] { font: inherit; font-size: 13px; max-width: 100%; }
.bmk-choice { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.bmk-more { display: grid; gap: 10px; }
.bmk-more[hidden], .bmk-photo-opts[hidden] { display: none; }
.bmk-photo-opts { display: grid; gap: 10px; }
.bmk-remove { justify-self: start; min-height: 36px; padding: 6px 14px; font-size: 13px; }
.bmk-photo-note, .bmk-theme-name { margin: 0; }
.bmk-form .bmk-check { justify-content: flex-start; }

.bmk-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.bmk-form .bmk-swatch { position: relative; display: block; cursor: pointer; }
.bmk-swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bmk-swatch span[aria-hidden] { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--rule); font-family: var(--serif); font-size: 16px; }
.bmk-swatch input:checked + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.bmk-swatch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.bmk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 901px) {
  .bmk .tool-preview { position: sticky; top: 140px; }
  .bmk .tool-preview svg { max-width: max(420px, calc((100vh - 190px) * 0.77)); margin-inline: auto; }
}
@media (max-width: 900px) {
  .bmk .tool-preview { padding: 10px; }
}