/* Templates gallery (/templates/, layout: site). The cards are static HTML written by
   scripts/gen-templates.mjs; tools/templates.js adds the search bar, filters and actions. */

.tp-head .lede .var{font-size:.82em}
.tp-proof{margin-top:1.2rem}
.tp{display:flex; flex-direction:column; gap:1rem; padding-top:1.4rem}

/* ── search and filters ────────────────────────────────────────────── */
.tp-tools{display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .8rem; position:sticky; top:var(--bar-h); z-index:6; margin-inline:calc(var(--gut) * -1); padding:.7rem var(--gut); background:color-mix(in srgb, var(--bg) 94%, transparent); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line-2)}
.tp-search{position:relative; flex:1 1 22rem; min-width:0; display:flex; align-items:center}
.tp-search .input{padding-left:2.2rem; padding-right:2.2rem; min-height:2.6rem; font-size:.95rem}
.tp-search .input::-webkit-search-cancel-button{cursor:pointer}
.tp-search-ico{position:absolute; left:.7rem; width:1rem; height:1rem; color:var(--ink-3); pointer-events:none}
.tp-search kbd{position:absolute; right:.6rem; pointer-events:none}
.tp-search .input:focus ~ kbd,.tp-search .input:not(:placeholder-shown) ~ kbd{display:none}
.tp-tsel{flex:0 1 15rem; min-width:0}
.tp-tsel .select{min-height:2.6rem}
.tp-count{font:500 var(--t-xs)/1.3 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3); white-space:nowrap; margin-left:auto}
@media (max-width:40rem){
  .tp-tools{position:static; margin-inline:0; padding:0; background:none; backdrop-filter:none; -webkit-backdrop-filter:none; border:0}
  .tp-search,.tp-tsel{flex:1 1 100%}
  .tp-search kbd{display:none}
  .tp-count{margin-left:0}
}

.tp-cats{display:flex; flex-wrap:wrap; gap:.4rem}
.tp-chip{display:inline-flex; align-items:center; gap:.45rem; font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:.005em; padding:.5rem .7rem; min-height:2.1rem; border:1px solid var(--line); border-radius:999px; background:var(--field); color:var(--ink-2); text-decoration:none; white-space:nowrap; cursor:pointer}
.tp-chip:hover{border-color:var(--ink); color:var(--ink)}
.tp-chip .tp-n{font-size:var(--t-2xs); color:var(--ink-3); font-variant-numeric:tabular-nums}
.tp-chip[aria-pressed="true"]{background:var(--ink); border-color:var(--ink); color:var(--panel)}
.tp-chip[aria-pressed="true"] .tp-n{color:inherit; opacity:.75}
.tp-chip:disabled{opacity:.45; cursor:default}
.tp-chip:disabled:hover{border-color:var(--line); color:var(--ink-2)}

/* ── sections and grid ─────────────────────────────────────────────── */
.tp-list{display:flex; flex-direction:column; gap:clamp(2.2rem,5vw,3.4rem); margin-top:.8rem}
.tp-sec{display:flex; flex-direction:column; gap:1rem; scroll-margin-top:calc(var(--bar-h) + 5rem)}
.tp-sec-head{display:flex; flex-direction:column; gap:.35rem; padding-top:.9rem; border-top:1px solid var(--ink)}
.tp-sec-title{font:380 clamp(1.5rem,2.6vw,1.95rem)/1.08 var(--f-head); letter-spacing:-.016em; text-wrap:balance}
.tp-sec-blurb{font:400 1rem/1.45 var(--f-serif); color:var(--ink-2); max-width:62ch}
.tp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,27rem),1fr)); gap:1rem; align-items:start}

/* ── card ──────────────────────────────────────────────────────────── */
.tp-card{display:flex; flex-direction:column; gap:.8rem; min-width:0; padding:1rem 1.05rem; background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg); scroll-margin-top:calc(var(--bar-h) + 5.5rem); transition:border-color .15s, box-shadow .15s}
.tp-card:focus{outline:none}
.tp-card:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.tp-card:target,.tp-card.is-hit{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.tp-top{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.8rem; align-items:start}
.tp-rock{display:block; width:2.9rem; height:2.9rem; border-radius:50%; overflow:hidden; background:radial-gradient(circle at 40% 35%, #3a4f7a 0 18%, #1b1f26 19% 40%, #7a6a2e 41% 55%, #101214 56%); box-shadow:0 0 0 1px var(--line), 0 0 0 3px var(--panel), 0 0 0 4px var(--line-2); margin:.15rem}
.tp-rock img{width:100%; height:100%; object-fit:cover; border-radius:50%}
.tp-id{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.tp-meta{display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .55rem; font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--ink-3)}
.tp-title{font:420 1.3rem/1.18 var(--f-head); letter-spacing:-.01em; text-wrap:pretty; overflow-wrap:anywhere}
.tp-title a{color:var(--ink); text-decoration:none}
.tp-title a:hover{text-decoration:underline}
.tp-hard{display:flex; flex-direction:column; align-items:flex-end; gap:.2rem; text-align:right}
.tp-hard b{font:340 2rem/.85 var(--f-head); letter-spacing:-.02em; font-variant-numeric:lining-nums tabular-nums}
.tp-min{font:600 var(--t-xs)/1 var(--f-ui); letter-spacing:.005em; color:var(--hi-ink)}
.tp-use{font:400 1rem/1.45 var(--f-serif); color:var(--ink-2)}
.tp-use .lab{display:inline; margin-right:.35rem; color:var(--ink-3)}
.tp-vars{display:flex; flex-wrap:wrap; gap:.3rem}
.tp-vars .var{display:inline-block; font-size:.74rem; padding:.22em .4em; line-height:1.2; overflow-wrap:anywhere}

/* details: the full prompt */
.tp-more{border-top:1px solid var(--line-2); padding-top:.7rem}
.tp-more summary{display:inline-flex; align-items:center; gap:.45rem; cursor:pointer; list-style:none; font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--accent); padding:.15rem 0; border-radius:var(--r)}
.tp-more summary::-webkit-details-marker{display:none}
.tp-more summary::before{content:""; width:.4rem; height:.4rem; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(-45deg); transition:transform .15s; flex:none}
.tp-more[open] summary::before{transform:rotate(45deg) translate(-.1rem,-.1rem)}
.tp-more summary:hover{text-decoration:underline; text-underline-offset:.18em}
.tp-body{display:flex; flex-direction:column; gap:.9rem; padding-top:.8rem}
.tp-block{display:flex; flex-direction:column; gap:.4rem; min-width:0}
.tp-block-head{display:flex; align-items:center; gap:.5rem; min-height:1.9rem}
.tp-block-head .lab{margin-right:auto}
.tp-code{max-height:24rem; font-size:.78rem; line-height:1.55; tab-size:2}
.tp-code .var{font-size:1em}
.tp-notes{display:grid; grid-template-columns:minmax(0,1fr); gap:1rem}
.tp-note{display:flex; flex-direction:column; gap:.5rem; min-width:0}
.tp-h{font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; color:var(--ink-3)}
.tp-defs{display:grid; grid-template-columns:auto minmax(0,1fr); gap:.4rem .8rem; font:400 var(--t-sm)/1.4 var(--f-ui); color:var(--ink-2); align-items:baseline}
.tp-defs dd{margin:0; min-width:0; overflow-wrap:anywhere}
.tp-defs .var{font-size:.76rem; white-space:nowrap}
@media (max-width:30rem){ .tp-defs{grid-template-columns:minmax(0,1fr); gap:.15rem} .tp-defs dd{margin-bottom:.45rem} .tp-defs .var{white-space:normal; overflow-wrap:anywhere} }
.tp-why{display:flex; flex-direction:column; gap:.5rem}
.tp-why li{position:relative; padding-left:1.1rem; font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2)}
.tp-why li::before{content:""; position:absolute; left:.1rem; top:.55em; width:.42rem; height:.42rem; transform:rotate(45deg); background:var(--good)}
.tp-why b{color:var(--ink); font-weight:600}

/* actions (added by script) */
.tp-actions{display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; padding-top:.75rem; border-top:1px solid var(--line-2)}
.tp-actions .btn[aria-expanded="true"]{background:var(--ink); color:var(--panel); border-color:var(--ink)}
.tp-actions .tp-save{margin-left:auto}
.tp-actions .btn svg,.tp-fill .btn svg{pointer-events:none} /* the click target stays the button, so a second press closes its menu */
@media (max-width:30rem){ .tp-actions .btn{flex:1 1 calc(50% - .4rem)} .tp-actions .tp-save{margin-left:0} }

/* fill in variables (added by script) */
.tp-fill{display:flex; flex-direction:column; gap:.9rem; padding:.9rem; margin-top:-.1rem; border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-2)}
.tp-fill-fields{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,14rem),1fr)); gap:.75rem}
.tp-fill-fields .field.wide{grid-column:1 / -1}
.tp-fill-fields .lab .var{font-size:.78rem}
.tp-fill-fields .textarea{min-height:5.5rem; font:400 .82rem/1.5 var(--f-mono); background:var(--field)}
.tp-fill-fields .input{background:var(--field)}
.tp-fill-fields .hint{font-size:var(--t-xs)}
.tp-fill-out{display:flex; flex-direction:column; gap:.45rem; min-width:0}
.tp-fill-out .row{justify-content:space-between}
.tp-left{font:600 var(--t-xs)/1.3 var(--f-ui); letter-spacing:.005em; font-variant-numeric:tabular-nums; color:var(--ink-3)}
.tp-left.done{color:var(--good)}
.tp-filled{max-height:20rem; background:var(--field)}
.tp-filled mark{box-shadow:inset 0 -2px 0 var(--hi); background:var(--hi-wash); padding:0}
.tp-fill .hint{margin:0}
/* while filling, the card takes the whole row: fields on the left, the preview beside them */
.tp-card.is-filling{grid-column:1 / -1}
.tp-card.is-filling .tp-use{max-width:72ch}
@media (min-width:56rem){
  .tp-card.is-filling .tp-fill{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); align-items:start; gap:1rem 1.2rem}
  .tp-card.is-filling .tp-fill-out{position:sticky; top:calc(var(--bar-h) + 5rem)}
  .tp-card.is-filling .tp-filled{max-height:min(34rem, calc(100vh - 15rem))}
  .tp-card.is-filling .tp-fill > .hint{grid-column:1 / -1}
}

/* ── explainer and FAQ ─────────────────────────────────────────────── */
.tp-info{max-width:80rem}
.tp-info .prose{max-width:68ch}
.tp-info .prose .var{font-size:.82em}
.prose .tp-tests{list-style:none; counter-reset:tt; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem 1.6rem}
.prose .tp-tests li{counter-increment:tt; padding-left:2rem; margin:0}
.prose .tp-tests li::before{content:counter(tt); background:none; transform:none; width:auto; height:auto; top:.1em; left:0; font:600 var(--t-xs)/1.6 var(--f-ui); font-variant-numeric:tabular-nums; color:var(--ink-3)}
@media (max-width:40rem){ .prose .tp-tests{grid-template-columns:minmax(0,1fr)} }
.prose .tp-faq{margin-top:1rem}
.prose .tp-faq details + details{margin-top:0}
.prose .tp-faq summary{font-size:1.02rem}
.prose .tp-faq p{margin:0}

/* on a phone the categories become one row you swipe, so the first template is not two screens down */
@media (max-width:44rem){
  .tp-cats{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--gut)); padding:0 var(--gut) .2rem; scroll-snap-type:x proximity; -webkit-mask-image:linear-gradient(90deg,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 82%,transparent)}
  .tp-cats::-webkit-scrollbar{display:none}
  .tp-cats > *{flex:none; scroll-snap-align:start}
}

/* ── a template's own page ──────────────────────────────────────────── */
.tp-head .h1{max-width:22ch}
.tp-crumbs{font:500 .9rem/1.4 var(--f-ui); color:var(--ink-3); margin-bottom:1rem; display:flex; flex-wrap:wrap; gap:.4rem}
.tp-crumbs a{color:var(--ink-2); text-decoration:none}
.tp-crumbs a:hover{color:var(--ink); text-decoration:underline}
.tp-facts{font:italic 400 1.02rem/1.5 var(--f-serif); color:var(--ink-3); max-width:62ch; margin-top:.8rem}
.tp-solo{max-width:62rem}
.tp-solo .tp-card{box-shadow:var(--shadow)}
.tp-solo .tp-title{font:400 1.45rem/1.2 var(--f-head)}
.tp-page{margin-top:.2rem}
.tp-page a{font:600 .86rem/1.4 var(--f-ui); text-decoration:none}
.tp-page a::after{content:" →"}
.tp-howto,.tp-related{max-width:62rem; margin-top:clamp(2.4rem,5vw,3.4rem)}
.tp-howto .h2,.tp-related .h2{margin-bottom:1rem}
.tp-howto ol{display:flex; flex-direction:column; gap:.7rem; counter-reset:hw}
.tp-howto li{counter-increment:hw; position:relative; padding-left:2.2rem; font:400 1.06rem/1.55 var(--f-serif); color:var(--ink-2)}
.tp-howto li::before{content:counter(hw); position:absolute; left:0; top:0; font:italic 400 1.4rem/1.1 var(--f-head); color:var(--accent)}
.tp-related ul{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 2rem; border-top:1px solid var(--ink); margin-bottom:1.2rem}
.tp-related li{border-bottom:1px solid var(--line)}
.tp-related a{display:flex; flex-direction:column; gap:.2rem; padding:.85rem 0; text-decoration:none; color:var(--ink)}
.tp-related a:hover b{text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:.15em}
.tp-related b{font:400 1.2rem/1.3 var(--f-head)}
.tp-related span{font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2)}
@media (max-width:44rem){ .tp-related ul{grid-template-columns:minmax(0,1fr)} }

/* ── the repository index ──────────────────────────────────────────── */
.rp-head .h1{max-width:none}
.rp-stats{display:flex; flex-wrap:wrap; gap:0; margin-top:1.4rem; border-top:1px solid var(--ink); border-bottom:1px solid var(--line)}
.rp-stats > div{flex:1 1 9rem; padding:.75rem 1rem .8rem 0; margin-right:1rem; border-right:1px solid var(--line-2)}
.rp-stats > div:last-child{border-right:0; margin-right:0}
.rp-stats dt{font:500 var(--t-xs)/1.3 var(--f-ui); color:var(--ink-3)}
.rp-stats dd{font:360 clamp(1.7rem,3vw,2.3rem)/1.05 var(--f-head); color:var(--ink); margin-top:.25rem; font-variant-numeric:tabular-nums}
.rp-access{margin-top:1rem}
.rp-meterline{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .8rem; font:400 .98rem/1.4 var(--f-serif); color:var(--ink-2)}
.rp-meterline.member{color:var(--good)}
.rp-meterline.member b{font-weight:600}
.rp-dots{display:inline-flex; gap:3px}
.rp-dots i{width:.55rem; height:.85rem; border-radius:2px; background:var(--bg-2); box-shadow:inset 0 0 0 1px var(--line)}
.rp-dots i.on{background:var(--hi-strong); box-shadow:none}
.tp-newonly{font-size:var(--t-sm); white-space:nowrap}

.rp-list{display:flex; flex-direction:column; gap:clamp(2rem,4.5vw,3rem); margin-top:.6rem}
.rp-sec{scroll-margin-top:calc(var(--bar-h) + 5rem)}
.rp-sec-head{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:baseline; gap:.2rem .8rem; padding-top:.8rem; border-top:1px solid var(--ink)}
.rp-code{font:500 var(--t-xs)/1 var(--f-mono); color:var(--ink-3); letter-spacing:.02em}
.rp-sec-title{font:380 clamp(1.4rem,2.4vw,1.8rem)/1.1 var(--f-head); letter-spacing:-.014em}
.rp-sec-n{font:500 var(--t-xs)/1 var(--f-ui); color:var(--ink-3); font-variant-numeric:tabular-nums}
.rp-sec-blurb{grid-column:2 / -1; font:400 .98rem/1.45 var(--f-serif); color:var(--ink-2); max-width:62ch}
.rp-rows{margin-top:.6rem; border-top:1px solid var(--line-2)}
.rp-row{border-bottom:1px solid var(--line-2)}
.rp-link{display:grid; grid-template-columns:5.2rem minmax(0,1fr) auto; gap:.3rem 1rem; align-items:baseline; padding:.75rem .4rem; color:var(--ink); text-decoration:none; border-radius:var(--r)}
.rp-link:hover{background:var(--bg-2)}
.rp-link:hover .rp-title{text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.rp-id{font:500 var(--t-xs)/1.4 var(--f-mono); color:var(--ink-3); font-variant-numeric:tabular-nums}
.rp-main{display:flex; flex-direction:column; gap:.15rem; min-width:0}
.rp-title{font:600 1rem/1.3 var(--f-ui)}
.rp-use{font:400 .9rem/1.4 var(--f-serif); color:var(--ink-2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.rp-meta{display:flex; align-items:center; gap:.6rem; white-space:nowrap}
.rp-model{font:600 var(--t-2xs)/1 var(--f-ui); color:var(--accent); background:var(--accent-wash); padding:.32rem .45rem; border-radius:5px}
.rp-score{display:inline-grid; place-items:center; min-width:1.9rem; height:1.9rem; border-radius:50%; border:1.5px solid var(--good); color:var(--good); font:600 .8rem/1 var(--f-ui); font-variant-numeric:tabular-nums}
.rp-row[data-new] .rp-title::after{content:"New"; margin-left:.5rem; vertical-align:.12em; font:700 var(--t-2xs)/1 var(--f-ui); color:var(--hi-ink); background:var(--hi-wash); padding:.22rem .4rem; border-radius:4px}
@media (max-width:40rem){
  .rp-link{grid-template-columns:minmax(0,1fr) auto; padding:.75rem .1rem}
  .rp-id{grid-column:1 / -1; order:-1}
  .rp-sec-head{grid-template-columns:auto minmax(0,1fr)}
  .rp-sec-n{grid-column:2}
  .rp-stats > div{flex-basis:40%}
}

/* ── one prompt's page: registry facts, the meter and the unlock ───── */
.rp-facts{display:flex; flex-wrap:wrap; gap:.4rem 0; margin-top:1.2rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.rp-facts > div{padding:.6rem 1.2rem .65rem 0; margin-right:1.2rem; border-right:1px solid var(--line-2)}
.rp-facts > div:last-child{border-right:0}
.rp-facts dt{font:500 var(--t-2xs)/1.3 var(--f-ui); color:var(--ink-3)}
.rp-facts dd{font:500 .92rem/1.35 var(--f-ui); color:var(--ink); margin-top:.15rem}
.rp-facts dd.rp-id{font:500 .92rem/1.35 var(--f-mono)}
.tp-meter{margin-bottom:.9rem}
.tp-card.is-locked .tp-body{position:relative; max-height:15rem; overflow:hidden; pointer-events:none; user-select:none}
.tp-card.is-locked .tp-body::after{content:""; position:absolute; inset:0; background:linear-gradient(transparent 10%, var(--panel) 88%)}
.tp-card.is-locked details.tp-more > summary{pointer-events:none}
.rp-gate{border:1px solid color-mix(in srgb, var(--hi-strong) 55%, var(--line)); background:linear-gradient(var(--hi-wash),var(--hi-wash)),var(--panel); border-radius:var(--r-lg); padding:1.1rem 1.2rem 1.15rem; display:flex; flex-direction:column; gap:.6rem}
.rp-gate-h{font:400 1.45rem/1.15 var(--f-head); color:var(--ink)}
.rp-gate > p{font:400 1rem/1.5 var(--f-serif); color:var(--ink-2); max-width:62ch}
.rp-form{display:flex; flex-direction:column; gap:.6rem; margin-top:.2rem}
.rp-fields{display:flex; flex-wrap:wrap; gap:.5rem}
.rp-fields .input{flex:2 1 15rem; min-width:0; min-height:2.6rem}
.rp-fields .select{flex:1 1 12rem; min-width:0; min-height:2.6rem}
.rp-fields .btn{flex:0 0 auto; min-height:2.6rem}
.rp-weekly{font-size:var(--t-sm); color:var(--ink-2); align-items:flex-start}
.rp-small{font:400 var(--t-xs)/1.45 var(--f-ui); color:var(--ink-3)}
.rp-err{font:600 var(--t-sm)/1.4 var(--f-ui); color:var(--bad)}
.rp-modal{display:flex; flex-direction:column; gap:.8rem}
.rp-modal > p{font:400 1rem/1.5 var(--f-serif); color:var(--ink-2)}
@media (max-width:30rem){ .rp-fields .btn{flex:1 1 100%} }
.rp-popular{display:flex; flex-wrap:wrap; align-items:baseline; gap:.45rem .9rem; margin-top:1.1rem}
.rp-pop-h{font:italic 400 1rem/1.3 var(--f-head); color:var(--ink-3); margin-right:.2rem}
.rp-popular a{font:600 var(--t-sm)/1.3 var(--f-ui); color:var(--accent); text-decoration:none}
.rp-popular a:hover{text-decoration:underline; text-underline-offset:3px}