/* dbtable: a database table to search; pick a row to see where its parts are kept (components/dbtable.js).
     <div class="dbtable" style="--db-cols: 130px minmax(0, 1fr) 190px; --db-cards: 1.6fr 1fr 1fr"><script type="application/json">
       {"placeholder": "Search: try claude", "label": "Search the bookmarks table", "heads": ["author", "summary", "tags"],
        "cols": [{"key": "u", "prefix": "@", "cls": "u"}, {"key": "s", "cls": "s"}, {"key": "tags", "cls": "t"}],
        "strong": ["s", "tags"], "weak": ["u", "text"],
        "cards": [{"title": "bookmarks", "fields": [["id", "id", "plain"], ["author", "→ authors", "link"], ["text", "text"], ["summary", "s"]]},
                  {"title": "authors", "fields": [["username", "u"], ["name", "n", "plain"]]}, {"title": "tags", "list": "tags"}],
        "rows": [{"id": "…", "u": "…", …}]}
     </script></div>
   A search matching a strong field ranks above one matching only a weak field. */
.dbtable { padding: 14px; }
.dbtable-search { width: 100%; box-sizing: border-box; font: inherit; font-size: 16px; min-height: 40px; padding: 0 14px; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--surface); color: var(--gray-1200); }
.dbtable-search:focus-visible { outline: 2px solid var(--gray-1200); outline-offset: 1px; }
.dbtable-rows { margin-top: 10px; height: 264px; overflow-y: auto; border: 1px solid var(--gray-300); border-radius: 8px; background: var(--surface); }
.dbtable-head, .dbtable-row { display: grid; grid-template-columns: var(--db-cols); gap: 12px; padding: 7px 12px; text-align: left; }
.dbtable-head { position: sticky; top: 0; z-index: 1; background: var(--gray-200); border-bottom: 1px solid var(--gray-300); font-family: var(--mono); font-size: 11px; color: var(--gray-1000); }
.dbtable-row { width: 100%; border: 0; border-bottom: 1px solid var(--gray-300); background: none; color: var(--gray-1200); font: inherit; font-size: 13px; line-height: 1.4; cursor: pointer; touch-action: manipulation; }
.dbtable-row:last-child { border-bottom: 0; }
.dbtable-row:hover { background: var(--gray-100); }
.dbtable-row[aria-pressed=true] { background: var(--gray-200); box-shadow: inset 3px 0 0 var(--gray-1200); }
.dbtable-row .u { font-family: var(--mono); font-size: 12px; color: var(--gray-1000); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dbtable-row .s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dbtable-row .t { font-family: var(--mono); font-size: 11px; line-height: 16px; max-height: 32px; color: var(--gray-1000); overflow: hidden; }
.dbtable mark { background: #f6e27a; color: #1c1c1a; border-radius: 2px; padding: 0 1px; }
.dbtable-count { margin: 8px 2px 0; font-size: var(--text-sm); color: var(--gray-1000); font-variant-numeric: tabular-nums; min-height: 1.4em; }
.dbtable-detail { display: grid; grid-template-columns: var(--db-cards); gap: 10px; margin-top: 12px; align-items: start; }
.dbtable-card { border: 1px solid var(--gray-300); border-radius: 8px; background: var(--surface); overflow: hidden; font-size: 12.5px; line-height: 1.45; }
.dbtable-card h4 { margin: 0; padding: 6px 10px; background: var(--gray-200); border-bottom: 1px solid var(--gray-300); font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--gray-1000); }
.dbtable-card dl { margin: 0; padding: 8px 10px; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px 10px; }
.dbtable-card dt { font-family: var(--mono); font-size: 11px; color: var(--gray-1000); }
.dbtable-card dd { margin: 0; color: var(--gray-1200); overflow-wrap: break-word; min-width: 0; }
.dbtable-card dd.link { font-family: var(--mono); font-size: 11.5px; color: var(--gray-1100); }
.dbtable-card ul { list-style: none; margin: 0; padding: 8px 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.dbtable-card li { font-family: var(--mono); font-size: 11px; padding: 1px 6px; border-radius: 4px; background: var(--gray-200); color: var(--gray-1200); }
@media (max-width: 640px) {
  .dbtable { padding: 10px; }
  .dbtable-head { display: none; }
  .dbtable-row { grid-template-columns: 1fr; gap: 2px; }
  .dbtable-rows { height: 300px; }
  .dbtable-detail { grid-template-columns: 1fr; }
}