/* Template cards (public/js/templates.js), shared by /templates/ and the A&P Builder's panel.
   Study colours match the A&P Builder's study art. */
:root{ --tpl-oct:#50738A; --tpl-fa:#6E8A1E; --tpl-fp:#B8531F; --tpl-icg:#6B4FA0; --tpl-bs:#7A746A; --tpl-mark:#F6D9A8; --tpl-glow:#C77A1C }
@media (prefers-color-scheme: dark){
  :root{ --tpl-oct:#9FC3D8; --tpl-fa:#C8E07A; --tpl-fp:#E8864F; --tpl-icg:#B69BEA; --tpl-bs:#C9C2B6; --tpl-mark:#5A4217; --tpl-glow:#F2B25C }
}
.tpl-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.tpl-card-h{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:9px 12px;border-bottom:1px solid var(--line);background:var(--surface2)}
.tpl-sit{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tpl-dx{font:700 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.tpl-pill{font:700 .8rem var(--mono);padding:2px 10px;border-radius:999px;background:color-mix(in srgb,var(--tpl-glow) 18%,transparent);border:1px solid color-mix(in srgb,var(--tpl-glow) 55%,transparent)}
.tpl-acts{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap}
.tpl-btn{font:inherit;font-size:.8rem;font-weight:700;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:8px;padding:3px 10px}
.tpl-btn:hover{border-color:var(--accent)}
.tpl-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tpl-btn.tpl-ins{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.tpl-copied{font-size:.75rem;color:var(--accent)}
.tpl-ap{padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.tpl-ap p{margin:0;line-height:1.5}
.tpl-lbl-row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tpl-lbl{font:600 .7rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tpl-studies{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:1px;background:var(--line);border-top:1px solid var(--line)}
.tpl-study{--c:var(--tpl-oct);background:var(--surface);padding:10px 12px 10px 16px;position:relative;display:flex;flex-direction:column;gap:6px}
.tpl-study::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:4px;border-radius:0 3px 3px 0;background:var(--c)}
.tpl-study[data-m="fa"]{--c:var(--tpl-fa)} .tpl-study[data-m="fp"]{--c:var(--tpl-fp)} .tpl-study[data-m="icg"]{--c:var(--tpl-icg)} .tpl-study[data-m="bs"]{--c:var(--tpl-bs)}
.tpl-study.tpl-focus{background:color-mix(in srgb,var(--c) 9%,var(--surface))}
.tpl-name{font-weight:700;color:var(--c)}
.tpl-study dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;font-size:.9rem}
.tpl-study dt{font:600 .74rem var(--mono);color:var(--muted);padding-top:2px}
.tpl-study dd{margin:0}
.tpl-raw{font-size:.9rem;margin:0}
.tpl-card mark{background:var(--tpl-mark);color:inherit;border-radius:3px;padding:0 1px}
/* The collapsed list (dxGroup / situationItem in templates.js). */
.tpl-dxgrp{border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tpl-dxgrp > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:2px 10px;padding:10px 12px}
.tpl-dxgrp > summary::-webkit-details-marker,.tpl-item > summary::-webkit-details-marker{display:none}
.tpl-dxgrp > summary::before,.tpl-item > summary::before{content:"▸";color:var(--muted);transition:transform .15s}
.tpl-dxgrp[open] > summary::before,.tpl-item[open] > summary::before{transform:rotate(90deg)}
.tpl-dxgrp > summary .n{font:600 .75rem var(--mono);color:var(--muted);justify-self:end}
.tpl-dxgrp > summary .aka{grid-column:2 / -1;font-size:.78rem;color:var(--muted)}
.tpl-dxgrp[open] > summary{border-bottom:1px solid var(--line)}
.tpl-item{border-top:1px solid var(--line)}
.tpl-item:first-of-type{border-top:0}
.tpl-item > summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:8px;padding:8px 12px 8px 22px}
.tpl-item > summary .peek{font-size:.8rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-item[open] > summary .peek{visibility:hidden}
.tpl-item > .tpl-card{margin:0 8px 10px;box-shadow:none}
.tpl-dxgrp > summary:focus-visible,.tpl-item > summary:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* Staff edits (template-edit.js). */
.tpl-by{font-size:.72rem;color:var(--muted)}
.tpl-new{font:700 .66rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.tpl-item > summary{grid-template-columns:auto auto auto minmax(0,1fr)}
.tpl-add{margin:8px 12px 10px 22px;border-style:dashed}
.tpl-edit{border:0;border-radius:16px;padding:0;width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);background:var(--surface);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.tpl-edit::backdrop{background:rgba(10,14,20,.5)}
.tpl-edit form{display:flex;flex-direction:column;gap:10px;padding:18px 20px}
.tpl-edit h2{margin:0;font-size:1.2rem}
.tpl-edit label{display:flex;flex-direction:column;gap:4px;font-weight:700;font-size:.85rem}
.tpl-edit label small{font-weight:400;color:var(--muted)}
.tpl-edit .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){ .tpl-edit .row{grid-template-columns:1fr} }
.tpl-edit textarea{min-height:5.5em;resize:vertical;font:inherit;line-height:1.45}
.tpl-edit textarea[name="ap"]{min-height:9em}
.tpl-edit details{border:1px solid var(--line);border-radius:10px;padding:6px 10px}
.tpl-edit details[open]{display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.tpl-edit summary{cursor:pointer;font-weight:700}
.tpl-edit .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;position:sticky;bottom:-18px;background:var(--surface);padding:10px 0 4px;border-top:1px solid var(--line)}
.tpl-edit .acts > div{display:flex;gap:8px;flex-wrap:wrap}
.tpl-edit .msg{font-size:.85rem;color:var(--muted);min-height:1.2em;margin:0}
.tpl-edit .msg.err{color:#B3261E}
.tpl-edit .ai-chg{outline:2px solid var(--tpl-glow);outline-offset:1px}
.tpl-edit .danger{color:#B3261E}
/* Recent / Most used tabs (templates page): the condition first, how often or when at the end. */
.tpl-item-dx > summary{grid-template-columns:auto auto auto auto minmax(0,1fr) auto;padding-left:14px}
.tpl-itdx{font-size:.95rem;white-space:nowrap}
.tpl-meta{font:600 .74rem var(--mono);color:var(--muted);white-space:nowrap}
@media (max-width:640px){
  .tpl-item-dx > summary{display:flex;flex-wrap:wrap;row-gap:4px}
  .tpl-item-dx > summary .peek{flex:1 1 100%;order:5}
  .tpl-item-dx > summary .tpl-meta{margin-left:auto}
}
/* ✨ AI rewrite panel (templates.js aiPanel). */
.tpl-aib{border-color:color-mix(in srgb,var(--tpl-glow) 60%,var(--line))}
.tpl-aib[aria-expanded="true"]{background:color-mix(in srgb,var(--tpl-glow) 18%,var(--surface))}
.tpl-ai{border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--tpl-glow) 6%,var(--surface))}
.tpl-ai-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 12px 0}
.tpl-ai-h .seg button{font-size:.88rem;padding:7px 12px;min-height:38px}
.tpl-ai-msg{margin:6px 14px 0;font-size:.82rem;color:var(--muted);min-height:1.1em}
.tpl-ai-msg.err{color:var(--danger,#e5484d)}
.tpl-ai .tpl-studies{background:var(--line)}
.tpl-chg{background:color-mix(in srgb,var(--tpl-glow) 28%,transparent);color:inherit;border-radius:3px;padding:0 1px}
@media (max-width:640px){.tpl-ai-h .seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%}
  .tpl-ai-h .seg button{padding:7px 4px;justify-content:center}}