/* Project templates (KBM-0005): the publishing wizard (/templates/save/{project}) and "new project from a
   template" (/templates/{id}/use). The list page is the generic klist. Only what is particular lives here:
   the tree with its indentation and the status matches. */

.tpl-page { max-width: 760px; }
.tpl-section { padding: .75rem 0 1rem; border-bottom: 1px solid var(--line); }
.tpl-section:last-of-type { border-bottom: none; }
.tpl-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.tpl-bump { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; margin-top: .5rem; }
.tpl-code { text-transform: uppercase; max-width: 8rem; }
.tpl-field-err { margin: .3rem 0 0; font-size: var(--fs-sm); color: var(--alert-text); }

/* The tree: one row per item, indented by depth (a runtime value, hence the custom property). */
.tpl-tree { list-style: none; margin: .5rem 0; padding: 0; }
.tpl-node {
    display: flex; align-items: center; gap: .5rem;
    padding: .3rem 0 .3rem calc(var(--d, 0) * 1.25rem);
    border-bottom: 1px solid var(--line);
}
.tpl-node:last-child { border-bottom: none; }
.tpl-node.off .tpl-title { text-decoration: line-through; opacity: .55; }
.tpl-type { flex: 0 0 auto; min-width: 5.5rem; text-align: center; }
.tpl-title { flex: 1 1 auto; min-width: 0; }

/* Status matches: template status → this organization's. */
.tpl-map { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; }
.tpl-map-from { flex: 0 0 40%; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-map-arrow { flex: 0 0 auto; color: var(--ink-soft); }
.tpl-map select,
.tpl-map .k-person-picker,
.tpl-pick { flex: 1 1 auto; min-width: 0; }
.tpl-pick { text-align: left; cursor: pointer; }
.tpl-map-from .k-item-sub { display: block; font-weight: 400; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 1023px) {
    .tpl-pair { grid-template-columns: 1fr; gap: 0; }
    .tpl-type { min-width: 0; }
    .tpl-node { padding-left: calc(var(--d, 0) * .75rem); }
    .tpl-map { flex-wrap: wrap; }
    .tpl-map-from { flex-basis: 100%; }
    .tpl-map-arrow { display: none; }
}

/* Rating and reports on a gallery item; the vote is on the gallery card (KBM-0011). */
.tpl-vote { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .5rem; }
.tpl-report { margin-left: auto; }
.tpl-summary { margin: 0 0 .4rem; font-size: var(--fs-lg); color: var(--ink); }
.tpl-thumb {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink-soft); cursor: pointer;
}
.tpl-thumb:hover { color: var(--ink); border-color: var(--border-input); }
.tpl-thumb.on { color: var(--human-text); border-color: var(--human); background: var(--human-soft); }
.tpl-thumb.neg.on { color: var(--alert-text); border-color: var(--alert); background: var(--alert-soft); }
/* The save page's closing confirmation: same size as the text around it, not the body's default. */
.tpl-page .k-check-label { font-size: var(--fs-lg); }

/* The gallery (KBM-0006): cards with an image, a title and a summary — what a person needs to choose one. */
.tpl-gallery-tools { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.tpl-lang { width: auto; }
.tpl-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1rem; }
.tpl-card {
    display: flex; flex-direction: column; overflow: hidden; text-decoration: none; color: inherit;
    background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-sm);
}
.tpl-card:hover { box-shadow: var(--shadow-md); border-color: var(--focus); }
.tpl-card-link { display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none; color: inherit; }
.tpl-card-vote { display: flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-top: 1px solid var(--line); }
.tpl-card-vote .k-item-sub { margin-right: auto; }
.tpl-card-img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--bg-surface-2); }
.tpl-card-body { display: flex; flex-direction: column; gap: .3rem; padding: .75rem .9rem .9rem; }
.tpl-card-title { font-weight: 600; font-size: var(--fs-md); }
.tpl-card-summary {
    font-size: var(--fs-sm); color: var(--ink-soft);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

@media (max-width: 1023px) {
    .tpl-cards { grid-template-columns: 1fr; }
}