/* The themes page: a grid of cards and a dialog, on the site's dark tokens (site.css). */
.tp{padding-top:40px;padding-bottom:72px}
.tp h1{font-size:clamp(30px,4.4vw,46px);font-weight:800;margin:10px 0 12px}
.tp-bar{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 14px;align-items:center}
.tp-search{flex:1 1 260px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;border-radius:12px;background:var(--card);border:1px solid var(--line2);color:var(--muted)}
.tp-search:focus-within{border-color:var(--blue);color:var(--text)}
.tp-search svg{width:18px;height:18px;flex:none}
.tp-search input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:15px}
.tp-sort{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px;white-space:nowrap}
.tp-sort select{height:44px;border-radius:12px;background:var(--card);border:1px solid var(--line2);color:var(--text);font:inherit;font-size:15px;padding:0 12px}
.tp-chips{display:flex;flex-wrap:wrap;gap:8px}
.tp-chip{display:inline-flex;align-items:center;gap:7px;height:36px;padding:0 14px;border-radius:99px;background:var(--card);border:1px solid var(--line2);color:var(--muted);font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap}
.tp-chip i{font-style:normal;font-size:12px;opacity:.7}
.tp-chip:hover{color:var(--text);border-color:var(--blue)}
.tp-chip[aria-pressed="true"]{color:var(--text);background:rgba(91,140,255,.16);border-color:var(--blue)}   /* on = a tint with a blue edge, never the fill */
.tp-count{margin:16px 0 0;color:var(--dim);font-size:13px}
.tp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(270px,100%),1fr));gap:18px;margin-top:14px}
.tp-card{display:flex;flex-direction:column;gap:6px;text-align:left;font:inherit;color:var(--text);background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:10px 10px 16px;cursor:pointer;min-width:0;transition:border-color .15s,transform .15s}
.tp-card:hover{border-color:var(--line2);transform:translateY(-2px)}
.tp-card:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tp-pic{position:relative;display:block;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--bg2)}
.tp-pic img{width:100%;height:100%;object-fit:cover;display:block}
.tp-pic img.none{visibility:hidden}
.tp-bs{position:absolute;left:8px;top:8px;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 16px)}
.tp-b{padding:2px 9px;border-radius:99px;background:rgba(8,11,18,.78);backdrop-filter:blur(6px);color:#fff;font-size:12px;font-weight:700;line-height:1.6;white-space:nowrap}
.tp-b{display:inline-flex;align-items:center;gap:4px}.tp-b svg{width:12px;height:12px;flex:none}
.tp-b.b-cm{background:rgba(61,111,232,.9)}
.tp-card h3{font-size:18px;margin:8px 6px 0;line-height:1.25}
.tp-card p{color:var(--muted);font-size:14px;line-height:1.5;margin:0 6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tp-empty{margin-top:40px;text-align:center;color:var(--muted)}
.tp-foot{margin-top:36px;color:var(--muted);font-size:14px}
.tp-foot a{color:var(--blue)}

/* the dialog: picture on top (16:9), words under it, scrolls on a short screen */
.tp-dlg{border:1px solid var(--line2);border-radius:22px;background:var(--card);color:var(--text);padding:0;margin:auto;width:min(94vw,960px);max-width:none;max-height:92vh;overflow:auto;overscroll-behavior:contain}
.tp-dlg::backdrop{background:rgba(4,6,12,.9);backdrop-filter:blur(6px)}
.tp-x{position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:12px;border:1px solid var(--line2);background:rgba(14,18,27,.85);color:var(--text);display:grid;place-items:center;cursor:pointer}
.tp-x svg{width:18px;height:18px}
.tp-x:hover{border-color:var(--blue)}
.tp-stage{position:relative;aspect-ratio:16/9;background:#05070c}
.tp-stage img,.tp-stage video{width:100%;height:100%;object-fit:cover;display:block}
.tp-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:40px;border-radius:12px;border:1px solid var(--line2);background:rgba(14,18,27,.8);color:var(--text);display:grid;place-items:center;cursor:pointer}
.tp-nav svg{width:18px;height:18px}
.tp-prev{left:10px}.tp-next{right:10px}
.tp-cap{padding:10px 20px 0;color:var(--text);font-size:14px;margin:0}
.tp-cap small{color:var(--muted);font-size:13px}
.tp-cap .tp-n{font-family:"JetBrains Mono",ui-monospace,monospace}
.tp-body{padding:16px 20px 22px;display:flex;flex-direction:column;gap:12px}
.tp-body h2{font-size:clamp(22px,3vw,28px);font-weight:800;margin:0}
.tp-body h3{font-size:16px;font-weight:800;margin:6px 0 0}
.tp-for{color:var(--muted);margin:0}
.tp-tags{display:flex;flex-wrap:wrap;gap:6px}
.tp-tag{padding:1px 10px;border-radius:99px;border:1px solid var(--line2);color:var(--muted);font-size:12px;font-weight:600}
.tp-facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;margin:0}
.tp-facts dt{color:var(--dim)}
.tp-facts dd{margin:0;color:var(--text);min-width:0;overflow-wrap:anywhere}
.tp-steps{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:6px;color:var(--muted);font-size:15px}
.tp-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.tp-act .btn{gap:8px}
.tp-act svg{width:18px;height:18px;flex:none}
@media (max-width:560px){
  .tp-sort{flex:1 1 100%}.tp-sort select{flex:1}
  .tp-grid{grid-template-columns:minmax(0,1fr)}
  .tp-dlg{width:100vw;max-height:100vh;border-radius:0;border-left:0;border-right:0}
  .tp-facts{grid-template-columns:1fr;gap:0}.tp-facts dd{margin-bottom:8px}
}
@media (prefers-reduced-motion:reduce){.tp-card{transition:none}.tp-card:hover{transform:none}}
.tp-act .btn{font:inherit;font-weight:700;font-size:15px}