/* Template gallery (Company > myApps > New app): list | write-up | try-it phone. Phone look comes from phone.css and
   app-builder.css (.pf-*); the tp-* rules below make those static builder controls live. */

/* PT-00048: the phone sits right beside the list at every desktop width and stays in view while scrolling - watching it swap
   templates is the point of the page. The write-up goes to its right, or under the phone when there is no room for three. */
.tg { display: grid; grid-template-columns: 300px 400px minmax(0, 1fr); grid-template-areas: "list stage detail"; gap: 1rem; align-items: start; }
.tg-list { grid-area: list; }
.tg-stage { grid-area: stage; }
.tg-detail { grid-area: detail; }
@media (max-width: 1250px) { .tg { grid-template-columns: 270px 392px minmax(0, 1fr); } }
@media (max-width: 1100px) { .tg { grid-template-columns: 270px minmax(0, 1fr); grid-template-areas: "list stage" "list detail"; } }
@media (max-width: 860px) { .tg { grid-template-columns: minmax(0, 1fr); grid-template-areas: "list" "stage" "detail"; } }

/* List */
.tg-list { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: .75rem; padding: .85rem; position: sticky; top: .75rem; max-height: calc(100vh - 1.5rem); overflow: auto; }
@media (max-width: 860px) { .tg-list { position: static; max-height: 26rem; } }
.tg-cats { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.tg-cat { border: 1px solid var(--app-border); background: var(--app-surface-2); color: var(--app-text); border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; display: inline-flex; align-items: center; gap: .3rem; }
.tg-cat span { color: var(--app-text-muted); }
.tg-cat:hover { border-color: var(--app-accent); }
.tg-cat.active { background: var(--app-accent); border-color: var(--app-accent); color: var(--app-accent-ink); font-weight: 700; }
.tg-cat.active span { color: var(--app-accent-ink); }
.tg-group { font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--app-text-muted); margin: .75rem 0 .35rem; }
.tg-item { display: flex; gap: .6rem; width: 100%; text-align: left; background: transparent; border: 1px solid transparent; border-radius: .6rem; padding: .5rem; color: var(--app-text); }
.tg-item:hover { background: var(--app-surface-2); }
.tg-item.selected { background: var(--app-surface-2); border-color: var(--app-accent); }
.tg-item-icon { flex: none; width: 2.1rem; height: 2.1rem; border-radius: .5rem; background: var(--app-bg); color: var(--app-accent); display: flex; align-items: center; justify-content: center; font-size: 1.05rem; }
.tg-item-text { min-width: 0; display: flex; flex-direction: column; }
.tg-item-name { font-weight: 700; font-size: .88rem; }
.tg-item-sum { font-size: .75rem; color: var(--app-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tg-item.soon .tg-item-icon, .tg-item.soon .tg-item-name { opacity: .55; }
.tg-badge { display: inline-block; margin-left: .4rem; font-size: .6rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--app-label); border: 1px solid var(--app-label); border-radius: .3rem; padding: 0 .3rem; vertical-align: middle; opacity: 1; }
.tg-badge.lg { font-size: .7rem; padding: .05rem .4rem; }

/* Write-up */
.tg-detail { background: var(--app-surface); border: 1px solid var(--app-border); border-radius: .75rem; padding: 1.25rem; min-width: 0; }
.tg-head { display: flex; gap: .85rem; align-items: center; margin-bottom: .6rem; }
.tg-head > div:last-child { min-width: 0; }
.tg-head-icon { flex: none; width: 3rem; height: 3rem; border-radius: .75rem; background: var(--app-bg); color: var(--app-accent); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.tg-summary { font-size: 1.02rem; margin-bottom: 1rem; }
.tg-create { background: var(--app-bg); border: 1px solid var(--app-border); border-radius: .6rem; padding: .85rem; margin-bottom: 1.25rem; }
.tg-create .form-control { flex: 1; min-width: 12rem; }
.tg-soon-note { background: var(--app-bg); border: 1px dashed var(--app-label); border-radius: .6rem; padding: .75rem .9rem; margin-bottom: 1.25rem; color: var(--app-text-muted); }
.tg-h { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--app-text-muted); margin: 1.1rem 0 .4rem; }
.tg-ul { padding-left: 1.1rem; margin-bottom: 0; }
.tg-ul li { margin-bottom: .2rem; }

/* Phone */
.tg-stage { display: flex; flex-direction: column; align-items: center; position: sticky; top: .75rem; scroll-margin-top: .75rem; }
@media (max-width: 1100px) { .tg-stage { position: static; } }
/* As tall as the window allows (the note and reset button stay visible on a 768 px laptop), never taller than 700. */
.tg-stage .phone-screen { position: relative; height: clamp(480px, calc(100vh - 10.5rem), 700px); min-height: 0; }
@media (max-width: 1100px) { .tg-stage .phone-screen { height: 640px; } }
.tp-body { overflow-y: auto; min-height: 0; }
.tp-tab { display: flex; flex-direction: column; gap: .5rem; }
.tp-tab[hidden] { display: none; }
.tp-body .pf { cursor: default; }
.tp-body .pf:hover { border-color: #e3e6ee; }
.tp-body .pf.is-heading:hover { border-color: #e3e6ee; }
.tp-loading, .tp-soon { color: #7b8396; text-align: center; padding: 3rem 1rem; font-size: .85rem; display: flex; flex-direction: column; gap: .4rem; align-items: center; }
.tp-soon i { font-size: 2.2rem; color: #b7bdcc; }
.tp-soon strong { color: #3b4458; }

/* Live controls in the builder's look */
.tp-body input.pf-input, .tp-body textarea.pf-input, .tp-body select.pf-input { width: 100%; color: #1d2433; font: inherit; font-size: .85rem; outline: none; }
.tp-body .pf-input:focus { border-color: var(--brand-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-accent) 30%, transparent); }
.tp-body .pf-input.readonly { color: #7b8396; }
.tp-body .pf-input::placeholder { color: #9aa1b2; }
.tp-body textarea.pf-input { resize: vertical; }
.tp-num { display: flex; align-items: center; gap: .4rem; }
.tp-unit { font-size: .8rem; color: #6b7386; }
.tp-body .pf-pill { cursor: pointer; }
.tp-checks span { cursor: pointer; user-select: none; }
.tp-checks span.on::before { box-shadow: inset 0 0 0 2px #fff; }
.tp-shot .tp-cam { width: 1.9rem; height: 1.9rem; border: 0; border-radius: .4rem; background: #3b4458; color: #fff; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.tp-shot.taken { border-left-color: #2f8a4c; }
.tp-shot.taken > i { color: #2f8a4c; }
.tp-shot.taken .tp-cam { background: #2f8a4c; }
.tp-shot small { font-weight: 400; color: #6b7386; }
.tp-flash { animation: tp-flash .5s ease-out; }
@keyframes tp-flash { from { background: #fff; box-shadow: 0 0 0 3px rgba(47, 138, 76, .45); } to { box-shadow: none; } }
.tp-sig { position: relative; padding: 0; overflow: hidden; }
.tp-sig canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.tp-sig span { position: absolute; left: .75rem; right: .75rem; bottom: .5rem; width: auto; pointer-events: none; }
.tp-sig.signed span { color: transparent; }
.tp-link { border: 0; background: none; color: #5b6478; font-size: .72rem; text-decoration: underline; padding: .2rem 0 0; }
.tp-gps { background: transparent; }
.tp-scan-row { display: flex; gap: 6px; align-items: stretch; }
.tp-scan-row .pf-input { flex: 1; min-width: 0; }
.tp-scan { width: auto; background: transparent; white-space: nowrap; }
.tp-gps.done { border-color: #2f8a4c; color: #2f8a4c; }
.tp-body .pf.tp-missing { border-color: #e5484d; box-shadow: 0 0 0 2px rgba(229, 72, 77, .25); }

.tp-submit { display: block; width: 100%; border: 0; cursor: pointer; }
.tp-submit:disabled { opacity: .5; cursor: default; }
.tp-toast { position: absolute; left: .75rem; right: .75rem; bottom: 4.4rem; z-index: 5; border-radius: .6rem; padding: .6rem .75rem; font-size: .8rem; font-weight: 600; box-shadow: 0 6px 20px rgba(0, 0, 0, .25); }
.tp-toast.ok { background: #e6f6ec; color: #1f5f35; border: 1px solid #9fd7b2; }
.tp-toast.warn { background: #fdecec; color: #8a2326; border: 1px solid #f0b3b5; }

/* Repeating section entries (PT-00021) */
.tp-entries { display: flex; flex-direction: column; gap: .55rem; }
.tp-entries:not(:empty) { margin-bottom: .55rem; }
.tp-entry { display: flex; flex-direction: column; gap: .45rem; border: 1px solid #d5dae5; border-left: 3px solid var(--brand-accent); border-radius: .7rem; padding: .5rem; background: #fafbfd; }
.tp-entry-head { display: flex; align-items: center; gap: .4rem; }
.tp-entry-name { flex: 1; min-width: 0; border: 0; border-bottom: 1px dashed #c4c9d6; background: transparent; font-weight: 700; font-size: .85rem; color: #1d2433; padding: .15rem .1rem; outline: none; }
.tp-entry-name:focus { border-bottom-color: var(--brand-accent); }
.tp-entry-name::placeholder { color: #3b4458; }
.tp-entry-del { border: 0; background: transparent; color: #9aa1b2; padding: .15rem .35rem; border-radius: .35rem; }
.tp-entry-del:hover { color: #c0565a; background: #f6e7e8; }
.tp-presets { margin-bottom: .45rem; }
.tp-body .tp-add-entry { background: transparent; cursor: pointer; }

/* Checklist preview (PT-00022): tap a rating; a problem rating shows where the details go */
.tp-checklist { display: flex; flex-direction: column; gap: 6px; }
.tp-check-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.tp-check-row > span:first-child { flex: 1; min-width: 0; }
.tp-rates { display: flex; gap: 4px; }
.tp-rate { border: 1px solid var(--rate-color); color: var(--rate-color); background: transparent; border-radius: 8px; min-width: 40px; min-height: 34px; padding: 0 8px; font-weight: 600; font-size: .85em; }
.tp-rate.on { background: var(--rate-color); color: #fff; }
.tp-defect-note { font-size: .8em; color: #c0392b; margin: -2px 0 2px; }
.tp-check-allok { align-self: flex-start; }