/* Library — /library/ */
.lb{display:flex; flex-direction:column; gap:.9rem}
#lbShared:empty{display:none}

/* ── toolbar ───────────────────────────────────────────────────────── */
.lb-tools{display:flex; flex-direction:column; gap:.6rem}
.lb-bar{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
.lb-search{position:relative; flex:1 1 18rem; min-width:0; max-width:40rem}
.lb-search .input{padding-left:2.2rem; padding-right:2.2rem; min-height:2.5rem}
.lb-search .input::-webkit-search-cancel-button{cursor:pointer}
.lb-search-ico{position:absolute; left:.7rem; top:50%; transform:translateY(-50%); display:grid; color:var(--ink-3); pointer-events:none}
.lb-search-ico svg{width:1rem; height:1rem}
.lb-search kbd{position:absolute; right:.6rem; top:50%; transform:translateY(-50%); pointer-events:none}
.lb-search .input:focus ~ kbd,.lb-search .input:not(:placeholder-shown) ~ kbd{display:none}
@media (hover:none),(max-width:40rem){ .lb-search kbd{display:none} }
.lb-sort .select{min-height:2.5rem; width:auto}
.lb-view button{display:inline-flex; align-items:center; gap:.4rem; padding-block:.62rem}
.lb-view svg{width:.9rem; height:.9rem}
.lb-tagrow{display:flex; align-items:flex-start; gap:.6rem 1rem; min-height:1.2rem}
.lb-tagwrap{display:flex; align-items:baseline; gap:.6rem; min-width:0; flex:1}
.lb-tagwrap > .lab{flex:none; padding-top:.1rem}
.lb-tags{display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; min-width:0}
.lb-chip{display:inline-flex; align-items:center; gap:.4rem; font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:.005em; padding:.34rem .5rem; border:1px solid var(--line); border-radius:var(--r); background:var(--field); color:var(--ink-2)}
.lb-chip:hover{border-color:var(--ink-3); color:var(--ink)}
.lb-chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--panel)}
.lb-chip.ex:not([aria-pressed="true"]){border-color:var(--hi); background:var(--hi-wash); color:var(--ink)}
.lb-chip-n{opacity:.6; font-variant-numeric:tabular-nums}
.lb-count{margin-left:auto; font:500 var(--t-xs)/1.4 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); white-space:nowrap}
@media (max-width:40rem){
  .lb-search{flex-basis:100%}
  .lb-sort{flex:1}
  .lb-sort .select{width:100%}
  .lb-view button span,.lb-view button{font-size:0; gap:0}
  .lb-view svg{width:1rem; height:1rem}
  .lb-tagrow{flex-direction:column; gap:.4rem}
  .lb-tagwrap{width:100%}
  .lb-tags{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:.1rem; -webkit-mask-image:linear-gradient(90deg,#000 90%,transparent)}
  .lb-tags::-webkit-scrollbar{display:none}
  .lb-chip{flex:none}
  .lb-count{margin-left:0}
}

/* ── layout with the detail panel ──────────────────────────────────── */
.lb-main{display:grid; grid-template-columns:minmax(0,1fr); gap:1.2rem; align-items:start}
.lb-main.open{grid-template-columns:minmax(17rem,.82fr) minmax(0,1.18fr)}
@media (max-width:60rem){
  .lb-main.open{grid-template-columns:minmax(0,1fr)}
  .lb-main.open .lb-list,.lb.is-open .lb-tools,.lb.is-open #lbShared{display:none}
}

/* ── cards ─────────────────────────────────────────────────────────── */
.lb-list.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,17rem),1fr)); gap:.75rem}
.lb-main.open .lb-list.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,15.5rem),1fr))}
.lb-card{display:grid; grid-template-columns:auto minmax(0,1fr); grid-template-areas:"thumb head" "snip snip" "foot foot"; gap:.55rem .8rem; padding:.85rem .9rem .75rem; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); color:var(--ink); text-decoration:none; min-width:0; transition:border-color .12s, box-shadow .12s, background .12s}
.lb-card:hover{border-color:var(--ink-4)}
.lb-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.lb-card[aria-current="true"]{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.lb-thumb{grid-area:thumb; width:3.25rem; height:3.25rem; border-radius:50%; background:var(--stage); object-fit:cover; box-shadow:0 0 0 1px var(--line), 0 0 0 3px var(--panel), 0 0 0 4px var(--line-2); margin:.15rem}
.lb-thumb.nogl,.ld-rock.nogl{background:radial-gradient(circle at 40% 35%, #3a4f7a 0 18%, #1b1f26 19% 40%, #7a6a2e 41% 55%, #101214 56%)}
.lb-head{grid-area:head; display:flex; flex-direction:column; justify-content:center; gap:.3rem; min-width:0}
.lb-name{font:620 1.02rem/1.22 var(--f-ui); letter-spacing:-.005em; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere}
.lb-meta{display:block; font:400 var(--t-xs)/1.3 var(--f-ui); font-variant-numeric:tabular-nums; letter-spacing:0; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.lb-snip{grid-area:snip; font:400 var(--t-xs)/1.5 var(--f-mono); color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; min-height:2.2rem}
.lb-foot{grid-area:foot; display:flex; align-items:center; gap:.5rem; min-width:0; padding-top:.55rem; border-top:1px solid var(--line-2)}
.lb-tags-in{display:flex; gap:.25rem; min-width:0; overflow:hidden; flex:1 1 auto}
.lb-tags-in .tag{padding:.25rem .4rem; flex:none}
.lb-min{flex:none; margin-left:auto; display:inline-flex; align-items:baseline; gap:.35rem; font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:.005em; color:var(--ink-3)}
.lb-min b{font:380 1.12rem/1 var(--f-head); letter-spacing:0; color:var(--ink); font-variant-numeric:lining-nums tabular-nums}
.lb-skel{pointer-events:none; min-height:9.5rem}
.lb-skel .skeleton:not(.lb-thumb){height:1rem; align-self:center}
.lb-skel .lb-snip{height:2rem}

/* list layout: one row per prompt */
.lb-list.list{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--panel); overflow:hidden}
.lb-list.list .lb-card{grid-template-columns:auto minmax(0,1.5fr) minmax(0,1fr); grid-template-areas:"thumb head foot"; align-items:center; gap:.4rem .9rem; padding:.55rem .85rem; border:0; border-radius:0; border-bottom:1px solid var(--line-2); background:transparent}
.lb-list.list .lb-card:last-child{border-bottom:0}
.lb-list.list .lb-card:hover{background:color-mix(in srgb, var(--bg-2) 50%, transparent)}
.lb-list.list .lb-card[aria-current="true"]{box-shadow:inset 3px 0 0 var(--accent); background:var(--accent-wash)}
.lb-list.list .lb-thumb{width:2.25rem; height:2.25rem; box-shadow:0 0 0 1px var(--line)}
.lb-list.list .lb-head{flex-direction:row; align-items:baseline; justify-content:flex-start; gap:.3rem .8rem; flex-wrap:wrap}
.lb-list.list .lb-name{-webkit-line-clamp:1; font-size:.96rem}
.lb-list.list .lb-snip{display:none}
.lb-list.list .lb-foot{border-top:0; padding-top:0}
.lb-list.list .lb-skel{min-height:3.4rem}
.lb-main.open .lb-list.list .lb-card{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"thumb head" "thumb foot"}
@media (max-width:40rem){
  .lb-list.list .lb-card{grid-template-columns:auto minmax(0,1fr); grid-template-areas:"thumb head" "thumb foot"}
}

/* ── empty states ──────────────────────────────────────────────────── */
.lb-empty{display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.4rem 2rem; align-items:center; padding:clamp(1.4rem,4vw,2.6rem); border:1px dashed var(--line); border-radius:var(--r-lg); background:linear-gradient(135deg, var(--panel), transparent 70%)}
.lb-empty-rock{width:clamp(6rem,14vw,9rem); height:clamp(6rem,14vw,9rem); border-radius:50%; box-shadow:0 0 0 1px var(--line), 0 0 0 6px var(--bg), 0 0 0 7px var(--line-2); opacity:.92}
.lb-empty-text{display:flex; flex-direction:column; gap:.55rem; max-width:44rem}
.lb-empty-text .h3{font:420 1.35rem/1.25 var(--f-head); letter-spacing:-.01em}
.lb-empty-text p{font:400 1.04rem/1.5 var(--f-serif); color:var(--ink-2)}
.lb-empty-text .btns{margin-top:.6rem}
.lb-empty-text .hint{font-size:var(--t-sm); margin-top:.2rem}
.lb.is-empty .lb-list.grid{display:block}
@media (max-width:40rem){ .lb-empty{grid-template-columns:minmax(0,1fr); justify-items:start} }
.lb-none{grid-column:1 / -1}
.lb-list.list .lb-none{border:0}

/* ── shared link banner ────────────────────────────────────────────── */
.lb-shared > div{display:flex; flex-direction:column; gap:.35rem}
.lb-shared-pre{max-height:16rem; margin-top:.4rem}

/* ── detail panel ──────────────────────────────────────────────────── */
.lb-detail{outline:none; min-width:0}
.lb-detail > *{flex-shrink:0}
@media (min-width:60.01rem){
  .lb-detail{position:sticky; top:calc(var(--bar-h) + 1rem); max-height:calc(100vh - var(--bar-h) - 2rem); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin}
}
.ld-top{display:flex; align-items:center; gap:.5rem; padding:.55rem .7rem .2rem 1rem}
.ld-back{display:none; margin-left:-.5rem}
.ld-back svg{width:1rem; height:1rem}
@media (max-width:60rem){ .ld-back{display:inline-flex} .ld-eyebrow{display:none} .ld-x{display:none} }
.ld-head{display:grid; grid-template-columns:auto minmax(0,1fr); gap:1rem; align-items:center; padding:.35rem 1rem .7rem}
.ld-rock{width:4.4rem; height:4.4rem; border-radius:50%; background:var(--stage); box-shadow:0 0 0 1px var(--line), 0 0 0 4px var(--panel), 0 0 0 5px var(--line-2); margin:.3rem}
.ld-headtext{display:flex; flex-direction:column; gap:.3rem; min-width:0}
.ld-name{width:100%; border:1px solid transparent; background:transparent; border-radius:var(--r); padding:.15rem .35rem; margin-left:-.35rem; font:400 clamp(1.3rem,2vw,1.6rem)/1.15 var(--f-head); letter-spacing:-.015em; color:var(--ink); text-overflow:ellipsis}
.ld-name:hover{border-color:var(--line)}
.ld-name:focus{outline:none; border-color:var(--accent); background:var(--field); box-shadow:0 0 0 3px var(--accent-wash)}
.ld-meta{font:400 var(--t-xs)/1.55 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.ld-meta > span{white-space:nowrap}
.ld-min{color:var(--ink-2); font-weight:500}
.ld-tags{display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; padding:0 1rem .7rem}
.ld-tagadd{display:inline-flex; align-items:center; gap:.3rem; color:var(--ink-3); border:1px dashed var(--line); border-radius:var(--r); padding:0 .4rem; min-height:1.75rem}
.ld-tagadd:focus-within{border-style:solid; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.ld-tagadd svg{width:.85rem; height:.85rem; flex:none}
.ld-taginput{border:0; background:transparent; outline:none; width:7rem; font:500 var(--t-xs)/1 var(--f-ui); color:var(--ink); padding:.35rem 0}
.ld-actions{display:flex; flex-wrap:wrap; gap:.35rem; padding:0 1rem .85rem}
.ld-actions:empty{display:none}
.ld-actions svg{width:.95rem; height:.95rem}
.ld-tabs{padding:0 .6rem; position:sticky; top:0; z-index:3; background:var(--panel)}
@media (max-width:60rem){ .ld-tabs{top:var(--bar-h)} }
.ld-pane{padding:1rem; display:flex; flex-direction:column; gap:.8rem; min-width:0}
.ld-plab{display:flex; align-items:center}
.ld-plab .linkbtn{font:400 var(--t-xs)/1 var(--f-ui); letter-spacing:0; text-transform:none}
.ld-ta{max-height:min(34rem,62vh); overflow:auto}
.ld-ta.short{min-height:4.4rem; max-height:16rem}
.ld-prompt{min-height:12rem}
.ld-ta.big{height:min(34rem,62vh)} .ld-ta.short.big{height:16rem}
.ld-live{font:400 var(--t-xs)/1.5 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); margin-top:-.35rem}
.ld-live > span{white-space:nowrap}
.ld-save{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .6rem; padding:.6rem .7rem; border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-2)}
.ld-save.on{border-color:color-mix(in srgb, var(--hi) 55%, var(--line)); background:linear-gradient(var(--hi-wash),var(--hi-wash)), var(--panel)}
.ld-save .hint{font-size:var(--t-sm)}
.ld-note{flex:1 1 12rem; min-width:0; width:auto}
.ld-save .spacer{flex:1 1 0}
@media (max-width:40rem){ .ld-note{flex-basis:100%} .ld-save .spacer{display:none} }
.ld-notes{min-height:9rem}
.ld-kv{margin-top:.4rem; padding-top:.8rem; border-top:1px solid var(--line-2)}
.ld-sub{margin-top:.4rem}
.ld-onlyone{padding:.8rem .9rem; border:1px dashed var(--line); border-radius:var(--r)}

/* compare two versions */
.lc{border:1px solid var(--line-2); border-radius:var(--r-lg); background:var(--field); min-width:0}
.lc-head{display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; padding:.55rem .65rem; border-bottom:1px solid var(--line-2)}
.lc-head .select{width:auto; max-width:13rem}
.lc-head .lab{margin-right:.15rem}
.lc-arrow{color:var(--ink-3); font-family:var(--f-ui)}
.lc-head svg{width:.95rem; height:.95rem}
.lc-stats{display:flex; gap:.45rem; padding:.45rem .75rem; font:500 var(--t-xs)/1.2 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); border-bottom:1px solid var(--line-2)}
.add{color:var(--good)} .rem{color:var(--bad)}
.lc-body{max-height:30rem; overflow:auto}
@media (max-width:60rem){ .lc-body{max-height:none} }
.lc-part + .lc-part{border-top:1px solid var(--line-2)}
.lc-plab{padding:.55rem .8rem 0}
.lc-part > .hint{padding:.6rem .8rem}
.lb-flow{padding:.65rem .8rem .8rem; font:400 .8rem/1.7 var(--f-mono); white-space:pre-wrap; overflow-wrap:anywhere; color:var(--ink)}
.lb-flow del,.lb-flow ins{border-radius:2px}
.lb-fold{display:inline-flex; margin:.15rem .1rem; padding:.15rem .5rem; border:1px dashed var(--line); border-radius:var(--r); background:var(--bg-2); font:600 var(--t-xs)/1.3 var(--f-ui); font-variant-numeric:tabular-nums; letter-spacing:.005em; color:var(--ink-3)}
.lb-fold:hover{color:var(--accent); border-color:var(--accent)}

/* version timeline */
.lt{display:flex; flex-direction:column}
.lt-item{display:grid; grid-template-columns:1.1rem minmax(0,1fr); gap:.2rem .6rem; position:relative; padding-bottom:1rem}
.lt-item::before{content:""; position:absolute; left:.53rem; top:1.05rem; bottom:0; width:1px; background:var(--line)}
.lt-item:last-child::before{display:none}
.lt-item:last-child{padding-bottom:0}
.lt-dot{width:.62rem; height:.62rem; transform:rotate(45deg); border:1.5px solid var(--ink-3); background:var(--panel); margin:.42rem 0 0 .24rem; position:relative; z-index:1}
.lt-item.is-latest .lt-dot{background:var(--good); border-color:var(--good)}
.lt-main{display:flex; flex-direction:column; gap:.25rem; min-width:0}
.lt-line{display:flex; flex-wrap:wrap; align-items:baseline; gap:.25rem .7rem}
.lt-v{font:650 var(--t-sm)/1.2 var(--f-ui)}
.lt-date{font:400 var(--t-xs)/1.2 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3)}
.lt-st{font:500 var(--t-xs)/1.2 var(--f-ui); font-variant-numeric:tabular-nums}
.lt-note{font:400 var(--t-sm)/1.45 var(--f-serif); color:var(--ink-2); overflow-wrap:anywhere}
.lt-acts{display:flex; flex-wrap:wrap; gap:.1rem; margin-left:-.6rem}
.lt-acts svg{width:.9rem; height:.9rem}
.lt-acts .ld-del:hover{color:var(--bad)}
.lt-view{display:flex; flex-direction:column; gap:.45rem; margin-top:.3rem}
.lt-view .code{max-height:18rem; margin:0}

/* ── how it works ──────────────────────────────────────────────────── */
.lb-info h3:first-child{margin-top:0}
.lb-faq{display:flex; flex-direction:column; border-top:1px solid var(--line)}
.lb-faq details{border-bottom:1px solid var(--line)}
.lb-faq summary{cursor:pointer; list-style:none; padding:.85rem 2rem .85rem 0; position:relative; font:600 1rem/1.35 var(--f-ui); color:var(--ink)}
.lb-faq summary::-webkit-details-marker{display:none}
.lb-faq summary::after{content:"+"; position:absolute; right:.3rem; top:.75rem; font:400 1.2rem/1 var(--f-ui); color:var(--ink-3)}
.lb-faq details[open] summary::after{content:"−"}
.lb-faq details p{padding:0 0 1rem; margin:0}

/* ── tap targets: every control at least 24px (WCAG 2.5.8) ──────────── */
.lb-chip{min-height:1.75rem}
.lb-tags .linkbtn{display:inline-flex; align-items:center; min-height:1.75rem; padding:0 .35rem}
.ld-tags .tag{padding-block:.12rem; padding-right:.12rem; min-height:1.75rem}
.ld-tags .tag button{display:inline-grid; place-items:center; min-width:1.55rem; min-height:1.55rem; padding:0; font-size:1rem; line-height:1; border-radius:var(--r)}
.ld-tags .tag button:hover{background:var(--bad-wash)}
.ld-addsys{display:inline-flex; align-items:center; min-height:1.6rem; padding:0 .2rem}
.lb-fold{min-height:1.6rem; align-items:center}