/* Starter template gallery: cards with a sheet thumbnail, a preview dialog. Colours follow the workbook: amber = column to
   fill, blue = calculated, grey italic = example row, yellow = cell to fill. */
.template-gallery{margin:34px 0}
.template-gallery .template-own{max-width:760px}
.template-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;margin:18px 0}
.template-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:white;overflow:hidden}
.template-thumb-card{margin:0;padding:12px 12px 10px;background:#F6F7F9;border-bottom:1px solid var(--line);cursor:zoom-in;min-width:0}
.template-thumb-card:focus-visible{outline:3px solid #B5410F;outline-offset:-3px}
.template-thumb-card:hover .tt-grid{box-shadow:0 2px 10px rgba(23,45,39,.15)}
.tt-tabs{display:flex;gap:3px;margin-bottom:6px;overflow:hidden}
.tt-tabs span{font-size:10px;line-height:1.6;padding:0 6px;border-radius:3px 3px 0 0;background:#E5E7EB;color:#4B5563;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90px}
.tt-tabs span.on{background:white;color:var(--ink);font-weight:700}
.tt-tabs span.more{background:none}
.tt-grid{width:100%;table-layout:fixed;border-collapse:collapse;background:white;font-size:10px;line-height:1.3;transition:box-shadow .15s}
.tt-grid td{border:1px solid #E5E7EB;padding:3px 4px;height:22px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:top}
.tt-grid td.h{font-weight:700;white-space:normal;height:34px}
.template-gallery .role-needed,.template-preview .role-needed{background:#ffe699}
.template-gallery .role-when,.template-gallery .role-row,.template-preview .role-when,.template-preview .role-row{background:#f2f2f2}
.template-gallery .role-formula,.template-preview .role-formula{background:#ddebf7}
.tt-grid td.ex,.template-preview td.ex{background:#fff2cc;color:#6b6b6b;font-style:italic}
.tt-grid td.in,.template-preview td.in{background:#fff2cc}
.tt-grid td.f,.template-preview td.f{background:#ededed;color:#6b6b6b}
.template-body{padding:14px 16px 4px;flex:1}
.template-body h3{font-size:19px;margin:8px 0 4px}
.template-body .meta{color:var(--muted)}
.template-gallery .badge{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:999px;background:#EEF0F3}
.template-gallery .badge-cost{background:#FDEEE6;color:#9A3412}
.template-gallery .badge-finance{background:#e6edf5;color:#2d4a6b}
.template-actions{display:flex;flex-wrap:wrap;gap:8px;padding:8px 16px 4px}
.template-actions .button,.tp-foot .button{padding:8px 12px;gap:8px;font-size:13px}
.template-family{font-size:18px;margin:22px 0 0}
.button.secondary{background:white;color:var(--ink);border:1px solid var(--ink)}
.button.secondary:hover{background:#F6F7F9}
.button:disabled{opacity:.5;cursor:not-allowed}
.template-result{padding:0 16px 12px;margin:6px 0 0;min-height:1em}
.template-result a{text-decoration:underline}
.template-preview{width:min(1100px,96vw);max-height:92vh;padding:0;border:1px solid var(--line);border-radius:10px;color:var(--ink)}
.template-preview::backdrop{background:rgba(23,45,39,.45)}
.tp-head{position:relative;padding:18px 54px 4px 20px}
.tp-head h3{margin:0}
.tp-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:1px solid var(--line);border-radius:6px;background:white;cursor:pointer}
.tp-tabs{display:flex;flex-wrap:wrap;gap:4px;padding:6px 20px 0;border-bottom:1px solid var(--line)}
.tp-tabs button{border:1px solid var(--line);border-bottom:none;border-radius:6px 6px 0 0;background:#F6F7F9;padding:5px 10px;font-size:13px;cursor:pointer}
.tp-tabs button[aria-selected="true"]{background:white;font-weight:700;margin-bottom:-1px}
.tp-panel{padding:4px 20px}
.tp-scroll{overflow:auto;max-height:46vh;border:1px solid var(--line);border-radius:6px}
.tp-scroll table{border-collapse:collapse;font-size:12px;line-height:1.35}
.tp-scroll th,.tp-scroll td{border:1px solid #E5E7EB;padding:4px 8px;text-align:left;vertical-align:top;max-width:280px}
.tp-scroll th.h{position:sticky;top:0;z-index:1;white-space:normal;min-width:90px}
.tp-scroll .rownum{background:#F6F7F9;color:#5B6475;font-weight:500;text-align:center;position:sticky;left:0}
.tp-scroll td.lbl{font-weight:700}
.tp-more{margin:8px 0}
.tp-notes{font-size:13px;max-height:24vh;overflow:auto;padding-left:18px}
.tp-notes li{margin:3px 0}
.template-preview .preview-key{display:flex;flex-wrap:wrap;gap:6px 16px;list-style:none;padding:0 20px;margin:8px 0;font-size:12px}
.template-preview .swatch{display:inline-block;width:14px;height:12px;border:1px solid #c8d0c6;margin-right:6px;vertical-align:-1px}
.template-preview .swatch.ex,.template-preview .swatch.in{background:#fff2cc}
.tp-foot{display:flex;flex-wrap:wrap;gap:8px;padding:10px 20px 18px;border-top:1px solid var(--line)}
@media (max-width:640px){.template-cards{grid-template-columns:1fr}.tp-head{padding:14px 50px 4px 14px}.tp-panel,.tp-tabs,.tp-foot{padding-left:14px;padding-right:14px}}
@media (prefers-reduced-motion:reduce){.tt-grid{transition:none}}
/* Phones: one row of cards to swipe through instead of a tall stack (owner, 9 Oct 2026: too much scrolling). */
@media (max-width:600px){.template-cards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}.template-cards>*{flex:0 0 82%;scroll-snap-align:start}}