/* Templates: listing (category rail + cards) and detail (preview window + guide). */
.tpl{display:grid;grid-template-columns:196px minmax(0,1fr);gap:clamp(28px,4vw,56px);align-items:start;margin-top:clamp(48px,6vw,80px)}
.tpl-main{min-width:0}
.tpl-rail{position:sticky;top:90px;display:flex;flex-direction:column;gap:12px}
.tpl-rail__h{font:500 11.5px/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding-left:12px}
.tpl-rail__list{display:flex;flex-direction:column;gap:2px}
.tpl-rail__list a{padding:8px 12px;border-radius:999px;font-size:14.5px;font-weight:500;color:var(--ink-2);transition:background .15s,color .15s}
.tpl-rail__list a:hover{color:var(--ink);background:var(--line)}
.tpl-rail__list a[aria-current="page"]{background:var(--ink);color:var(--bg)}

.tpl-group+.tpl-group{margin-top:clamp(56px,7vw,88px)}
.tpl-group__h{display:flex;flex-direction:column;gap:10px;margin-bottom:24px;max-width:60ch}
.tpl-group__h .sub{font-size:15.5px}
.tpl-cards{grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr))}
.tpl-card .card__img{aspect-ratio:4/3}
.tpl-card h3{font-size:18.5px;line-height:1.2}
.tpl-card p{font-size:14px}

.tpl-links{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:10px}
.tpl-links a{display:flex;align-items:center;justify-content:space-between;gap:14px;height:100%;padding:16px 18px;border-radius:18px;background:var(--card);box-shadow:0 0 0 1px var(--line);font-weight:600;font-size:15px;line-height:1.4;transition:background .2s,box-shadow .2s}
.tpl-links a::after{content:"→";flex:none;color:var(--ink-3)}
.tpl-links a:hover{background:var(--card-2);box-shadow:0 0 0 1px var(--line-2)}

/* detail */
.tpl-hero h1{max-width:20ch}
.tpl-hero h1:lang(ja){font-size:clamp(30px,4.4vw,56px);line-height:1.15;max-width:22em}
.tpl-hero .sub:lang(ja){max-width:46em}
.tpl-cats{display:flex;margin-top:20px}
.tpl-hero .crumb+h1{margin-top:22px}
.tpl-preview{margin:0;border-radius:24px;background:var(--card-2);padding:clamp(12px,2.6vw,28px);box-shadow:0 0 0 1px var(--line)}
.tpl-win{border-radius:14px;background:#fff;color:#1d1c1d;overflow:hidden;box-shadow:0 30px 60px -30px rgba(15,15,18,.45)}
.tpl-win__bar{height:34px;display:flex;align-items:center;gap:12px;padding:0 14px;background:#ecebe4;color:#55545c;font-size:12.5px;font-weight:500}
.tpl-win__bar>span:last-child{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.lights{display:flex;gap:6px;flex:none}
.lights i{width:10px;height:10px;border-radius:50%;background:#ff5f57}
.lights i:nth-child(2){background:#febc2e}.lights i:nth-child(3){background:#28c840}
.tpl-win__body{display:grid;grid-template-columns:120px minmax(0,1fr);height:clamp(320px,38vw,440px)}
.tpl-win__side{border-right:1px solid #ecebe4;overflow:hidden}
.tpl-win__side img{display:block;width:120px;height:auto}
.tpl-win__frame{position:relative;overflow:hidden;background:#fff}
/* The app renders the template at desktop width; show it at 60%, as the old page did. */
.tpl-win__frame iframe{position:absolute;left:0;top:0;width:166.667%;height:166.667%;border:0;transform:scale(.6);transform-origin:0 0}
.tpl-doc{margin-top:14px;border-radius:24px;background:var(--win);box-shadow:0 0 0 1px var(--line);padding:clamp(24px,5vw,64px)}
.tpl-doc .prose>:first-child{margin-top:0}
.tpl-cta{margin-top:24px}
.tpl-related{margin-top:clamp(64px,8vw,104px)}
.tpl-related h2{margin-bottom:22px}

/* enterprise support strip (the old pre-footer) */

@media(max-width:900px){
  .tpl{grid-template-columns:minmax(0,1fr)}
  .tpl-rail{position:static;gap:10px}
  .tpl-rail__h{padding-left:0}
  .tpl-rail__list{flex-direction:row;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*var(--gut));padding-inline:var(--gut);gap:8px}
  .tpl-rail__list::-webkit-scrollbar{display:none}
  .tpl-rail__list a{flex:none;box-shadow:inset 0 0 0 1px var(--line-2)}
}
@media(max-width:640px){
  .tpl-win__body{grid-template-columns:minmax(0,1fr);height:360px}
  .tpl-win__side{display:none}
  .tpl-doc{border-radius:20px}
}