/* Template library: a grid of ready-made recipes, opened in a dialog, used in the studio. */
.tpl-page { display: grid; align-content: start; gap: 40px; padding: 48px max(40px, env(safe-area-inset-right, 0px)) 64px 40px; }
.head { display: grid; gap: 12px; justify-items: center; text-align: center; }
.tpl-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.field-label { font: 500 13px/18px var(--font-sans); color: var(--text); }
.head-sub { max-width: 46ch; color: var(--text-muted); font: 400 15px/23px var(--font-sans); }
.tpl { display: grid; gap: 20px; }
.tpl-count { color: var(--text-muted); }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(188px, 1fr)); gap: 28px 16px; align-items: start; }

.tpl-card { display: grid; gap: 10px; padding: 0; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; min-width: 0; }
.tpl-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: var(--radius-md); }
.tpl-frame { position: relative; border-radius: var(--radius-md); overflow: hidden; color: #f2f1ec; transition: transform .16s ease-out; }
.tpl-card:hover .tpl-frame { transform: translateY(-3px); }
.tpl-hook { position: absolute; left: 14px; right: 14px; top: 38%; font: 600 15px/20px var(--font-sans); text-align: center; text-wrap: balance; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.tpl-time { position: absolute; right: 10px; bottom: 10px; padding: 2px 7px; border-radius: var(--radius-full); background: rgba(5,5,6,.72); }
.tpl-cap { display: grid; gap: 2px; min-width: 0; }
.tpl-uses { font: 400 12px/16px var(--font-sans); color: var(--text-muted); }

.tpl-dialog { width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); box-shadow: var(--shadow-float); }
.tpl-dialog::backdrop { background: rgba(5,5,6,.6); }
.tpl-dialog-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; padding: 24px; }
.tpl-dialog .tpl-frame { align-self: start; }
.tpl-dialog .tpl-hook { font-size: 17px; line-height: 23px; }
.tpl-info { display: grid; gap: 20px; align-content: start; }
.tpl-info .kp-eyebrow { margin-bottom: -12px; }
.tpl-specs { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 2px 24px; margin: 0; }
.tpl-specs dt { grid-row: 1; font: 400 12px/16px var(--font-sans); color: var(--text-muted); }
.tpl-specs dd { grid-row: 2; margin: 0; font: 500 13px/18px var(--font-mono); }
.tpl-block { display: grid; gap: 6px; }
.tpl-block h3 { margin: 0; }
.tpl-prompt { color: var(--text-muted); }
.tpl-beats { margin: 0; padding-left: 20px; color: var(--text-muted); display: grid; gap: 4px; }
.tpl-beats li::marker { font: 500 12px var(--font-mono); color: var(--violet-text); }
.tpl-actions { display: flex; gap: 8px; align-items: center; padding-top: 4px; }

@media (max-width: 860px) {
  .tpl-page { gap: 28px; padding: 24px max(16px, env(safe-area-inset-right, 0px)) calc(32px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); }
  .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
  .tpl-hook { font-size: 13px; line-height: 18px; }
  .tpl-dialog-body { grid-template-columns: 1fr; padding: 16px; gap: 20px; }
  .tpl-dialog .tpl-frame { width: 160px; justify-self: center; }
  .tpl-specs { grid-template-columns: repeat(2, auto); grid-auto-flow: row; }
  .tpl-specs dt, .tpl-specs dd { grid-row: auto; }
  .tpl-actions .kp-btn-primary { flex: 1; justify-content: center; }
}