/* Tagging a book on a post: the Write sheet's book row and "[[" list, and the "Add to bookshelf" line under a post.
   Link this file in index.html after books.css. Classes start with bt- . */

/* ───── the Write sheet ───── */
.bt-row{min-width:0}
.bt-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r-ctl);background:rgba(var(--fg),.045);border:1px solid var(--edge);min-width:0}
.bt-card .cvr{flex:none}
.bt-ct{flex:1;min-width:0;line-height:1.3}
.bt-title{font-size:1.25rem;line-height:1.15;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.bt-rm,.bt-addbtn{min-height:44px;flex:none}
.bt-shelf{border-color:rgba(var(--gd),.45)}
.bt-shelf strong{font-weight:600}

/* the quick picks from the reader's shelf */
.bt-q{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:4px 14px 4px 6px;border-radius:999px;border:1px solid var(--edge2);background:transparent;color:inherit;font:500 .8125rem 'DM Sans',sans-serif;cursor:pointer;transition:border-color .2s ease,color .2s ease}
.bt-q:hover{border-color:var(--gold);color:var(--gold2)}
.bt-q .cvr{flex:none;border-radius:3px}
.bt-qt{min-width:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* the list: under the text for "[[", inside the book row for the Book button */
.bt-field{position:relative}
.bt-pop{position:absolute;left:0;right:0;top:calc(100% - 4px);z-index:6;max-height:min(300px,45vh);overflow-y:auto;overscroll-behavior:contain;padding:6px;border-radius:var(--r-ctl);background:var(--menu);border:1px solid var(--edge);box-shadow:var(--shadow-hi)}
.bt-pop[hidden],.bt-list[hidden]{display:none!important}
.bt-box{min-width:0}
.bt-box [data-btlist]{max-height:min(300px,45vh);overflow-y:auto;overscroll-behavior:contain;border-radius:var(--r-ctl);border:1px solid var(--edge);background:rgba(var(--fg),.03);padding:4px}
.bt-box [data-btlist]:empty{display:none}
.bt-list{list-style:none;margin:0;padding:0}
.bt-gh{padding:8px 10px 4px;font-size:.6875rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold2)}
.bt-o{display:flex;align-items:center;gap:12px;min-height:48px;padding:6px 10px;border-radius:var(--r-sm);cursor:pointer;min-width:0}
.bt-o .cvr{flex:none;border-radius:3px}
.bt-o:hover,.bt-o.on{background:rgba(var(--gd),.14)}
.bt-o.on{box-shadow:inset 3px 0 0 var(--gold)}
.bt-ot{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.bt-ott{font:500 .9375rem 'DM Sans',sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-ota{font-size:.8125rem;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-tg{flex:none}
.bt-note{margin:0;padding:8px 10px}

/* ───── under a post ───── */
.bt-add{margin:2px 0 4px}
.bt-addb{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 8px;border:0;border-radius:999px;background:transparent;color:var(--mute);font:500 .8125rem 'DM Sans',sans-serif;cursor:pointer;transition:color .2s ease,background .2s ease}
.bt-addb:hover,.bt-addb:focus-visible{color:var(--gold2);background:rgba(var(--gd),.12)}

@media (max-width:560px){
  .bt-qt{max-width:150px}
  .bt-title{font-size:1.125rem}
}
@media (prefers-reduced-motion:reduce){
  .bt-q,.bt-addb{transition:none}
}