/* ============================================================
   Templates page (js/templates-page.js) — PatchWork Standard.
   Only `.tpl-*` selectors live here; shared components are the
   `.sl-*` classes from css/slate.css, extended by co-located
   modifiers, never restyled.
   ============================================================ */

:root {
    /* Star ratings are the one place a filled, coloured icon is allowed. */
    --tpl-star: oklch(0.82 0.14 80);
}

#home-tab-templates.home-tab-active {
    height: 100%;
    min-height: 0;
    align-self: stretch;
}

.tpl-page {
    display: flex;
    height: 100%;
    min-height: 0;
    font-family: var(--sl-font-ui);
    color: var(--sl-text-1);
    background: var(--sl-app);
}
.tpl-main {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    padding: 30px 40px 40px;
    box-sizing: border-box;
}
.tpl-grow { flex: 1; min-width: 0; }
.tpl-ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* header */
.tpl-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.tpl-title { margin: 0; }
.tpl-sub { font-size: 12.5px; color: var(--sl-text-2); margin-top: 8px; }
.tpl-actions { display: flex; gap: 8px; align-items: center; }

/* tabs */
.tpl-tabs { margin-top: 20px; gap: 0 24px; }
.tpl-tab { display: inline-flex; align-items: center; gap: 7px; }
.tpl-tab-count { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); font-weight: 500; }

/* toolbar */
.tpl-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.tpl-search { flex: 1 1 240px; min-width: 0; max-width: 420px; }
.tpl-search input[type="search"]::-webkit-search-cancel-button { filter: grayscale(1) opacity(0.6); }
.tpl-sort-wrap { position: relative; margin-left: auto; }
.tpl-sort-btn { font-weight: 500; color: var(--sl-text-2); }
.tpl-sort-btn svg:last-child { color: var(--sl-text-3); }
.tpl-sort-menu { position: absolute; top: calc(100% + 4px); right: 0; width: 160px; }
.tpl-check { color: var(--sl-link); }

/* offline notice — dot + text, no fill */
.tpl-status { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.tpl-status-note { font-size: 12px; color: var(--sl-text-3); }

/* grid + cards */
.tpl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
    gap: 14px;
    margin-top: 18px;
    align-content: start;
}
.tpl-card {
    display: flex; flex-direction: column; overflow: hidden; cursor: pointer;
    outline: none;
}
.tpl-card:focus-visible { border-color: var(--sl-focus); }
.tpl-card.is-selected { border-color: oklch(0.72 0.13 230 / 0.6); }
.tpl-thumb {
    position: relative; aspect-ratio: 16 / 10; overflow: hidden;
    background: var(--sl-panel);
}
.tpl-thumb-img, .tpl-hover-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.tpl-type-tag { position: absolute; top: 8px; left: 8px; }
.tpl-vis-tag {
    position: absolute; top: 8px; right: 8px; width: 20px; height: 20px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--sl-r-6); background: oklch(0 0 0 / 0.5); color: #fff;
}
.tpl-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 38px; height: 38px; border-radius: 50%;
    background: oklch(0 0 0 / 0.45); border: 1px solid oklch(1 0 0 / 0.25);
    display: flex; align-items: center; justify-content: center; color: #fff;
    transition: opacity 0.15s;
}
.tpl-thumb.is-playing .tpl-play { opacity: 0; }
.tpl-size {
    position: absolute; bottom: 8px; left: 8px;
    font-family: var(--sl-font-mono); font-size: 10.5px; color: #fff;
    background: oklch(0 0 0 / 0.5); padding: 2px 6px; border-radius: var(--sl-r-6);
}
.tpl-card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.tpl-card-desc {
    font-size: 12px; line-height: 1.45; color: var(--sl-text-2);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tpl-card-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 8px; }
.tpl-avatar {
    width: 20px; height: 20px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; color: var(--sl-on-accent); letter-spacing: -0.04em;
}
.tpl-author { font-size: 11px; color: var(--sl-text-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tpl-rating { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--sl-text-1); }
.tpl-rating svg, .tpl-stars svg { color: var(--tpl-star); }
.tpl-uses { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; color: var(--sl-text-2); }
.tpl-updated { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }

/* empty / loading */
.tpl-empty { padding: 56px 20px; }
.tpl-empty-line { max-width: 380px; line-height: 1.55; }

/* drawer — pushes the grid, pinned to the page height */
.tpl-drawer { width: 360px; }
.tpl-drawer-head {
    display: flex; align-items: center; gap: 6px; padding: 12px 14px;
    border-bottom: 1px solid var(--sl-hairline);
}
.tpl-tag {
    display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px;
    border-radius: var(--sl-r-6); background: oklch(1 0 0 / 0.07);
    font-size: 11px; font-weight: 600; color: var(--sl-text-2);
}
.tpl-drawer-close { background: transparent; border-color: transparent; color: var(--sl-text-2); }
.tpl-drawer-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px; }
.tpl-drawer-video {
    width: 100%; aspect-ratio: 16 / 10; border-radius: var(--sl-r-12);
    background: #000; display: block; object-fit: contain;
}
.tpl-drawer-thumb {
    position: relative; aspect-ratio: 16 / 10; border-radius: var(--sl-r-12); overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--sl-hairline);
}
.tpl-novideo { position: absolute; bottom: 8px; left: 8px; }
.tpl-d-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-top: 14px; }
.tpl-d-by { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.tpl-d-author { font-size: 12px; color: var(--sl-text-1); }
.tpl-d-updated { font-size: 11px; color: var(--sl-text-3); }
.tpl-d-desc, .tpl-d-text { font-size: 12.5px; line-height: 1.55; color: var(--sl-text-2); margin-top: 10px; }
.tpl-d-text { margin-top: 0; }
.tpl-kicker { margin: 20px 0 8px; }

.tpl-rating-box {
    margin-top: 18px; padding: 14px; border-radius: var(--sl-r-12);
    background: var(--sl-card); border: 1px solid var(--sl-hairline);
}
.tpl-rating-top { display: flex; align-items: center; gap: 16px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--sl-hairline); }
.tpl-rating-avg { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.tpl-stars { display: flex; gap: 1px; margin-top: 6px; }
.tpl-rating-count { font-size: 11px; color: var(--sl-text-3); margin-top: 4px; }
.tpl-rating-none { font-size: 12px; color: var(--sl-text-3); padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid var(--sl-hairline); }
.tpl-dist { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.tpl-dist-row { display: flex; align-items: center; gap: 6px; }
.tpl-dist-n { font-family: var(--sl-font-mono); font-size: 9.5px; color: var(--sl-text-3); width: 7px; }
.tpl-dist-bar { flex: 1; }
.tpl-dist-bar > span { background: var(--tpl-star); }
.tpl-uses-line { display: flex; align-items: center; gap: 8px; color: var(--sl-text-2); }
.tpl-uses-n { font-family: var(--sl-font-mono); font-size: 12px; font-weight: 600; color: var(--sl-text-1); }
.tpl-uses-label { font-size: 12px; color: var(--sl-text-3); }
.tpl-rate { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.tpl-rate-label { font-size: 12px; color: var(--sl-text-2); }
.tpl-rate-stars { display: flex; gap: 2px; }
.tpl-rate-star {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: none; border-radius: var(--sl-r-6);
    background: transparent; color: var(--sl-text-3); cursor: pointer;
}
.tpl-rate-star svg { width: 17px; height: 17px; }
.tpl-rate-star:hover { background: var(--sl-wash); color: var(--sl-text-1); }
.tpl-rate-star.is-on { color: var(--tpl-star); }
.tpl-rate-star:focus-visible { outline: 1px solid var(--sl-focus); }

.tpl-steps { display: flex; flex-direction: column; border-radius: var(--sl-r-10); overflow: hidden; border: 1px solid var(--sl-hairline); }
.tpl-step { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: var(--sl-card); }
.tpl-step + .tpl-step { border-top: 1px solid var(--sl-hairline); }
.tpl-step-n { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); width: 14px; flex: none; }
.tpl-step-label { font-size: 12px; color: var(--sl-text-1); flex: 1; min-width: 0; }
.tpl-models { display: flex; flex-wrap: wrap; gap: 6px; }
.tpl-model { height: 24px; font-size: 11.5px; color: var(--sl-text-1); background: var(--sl-quiet-hover); }
.tpl-delete { margin-top: 0; }
.tpl-own-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tpl-version { margin-top: 8px; font-family: var(--sl-font-mono); font-size: 10.5px; }
.tpl-d-wsname { color: var(--sl-text-1); font-weight: 600; }
.tpl-d-wsmembers { color: var(--sl-text-3); }

/* Team tab: one labelled section per workspace */
.tpl-group-head {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 7px;
    margin-top: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--sl-hairline);
    font-size: 12.5px; font-weight: 600; color: var(--sl-text-1);
}
.tpl-group-head:first-child { margin-top: 0; }
.tpl-group-head svg { color: var(--sl-text-3); }
.tpl-group-count { font-family: var(--sl-font-mono); font-size: 10.5px; font-weight: 500; color: var(--sl-text-3); }
.tpl-status-action { margin-left: auto; }

.tpl-drawer-foot { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--sl-hairline); }
.tpl-use { flex: 1; }
.tpl-bookmark { width: var(--sl-h-lg); }
.tpl-bookmark.is-on { color: var(--sl-link); }

/* New-template modal */
.tpl-scrim { padding: 24px; box-sizing: border-box; z-index: 10250; }  /* above #home-screen (9999), level with .pws-modal-overlay */
.tpl-modal { width: 100%; max-width: 620px; max-height: 100%; display: flex; flex-direction: column; }
.tpl-modal-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; font-size: 16px; }
.tpl-modal-head .sl-btn-icon { background: transparent; border-color: transparent; color: var(--sl-text-2); }
.tpl-modal-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; display: flex; flex-direction: column; gap: 18px; }
.tpl-modal-foot { align-items: center; gap: 8px; padding: 12px 18px; }
.tpl-field { display: flex; flex-direction: column; }
.tpl-field-label { margin-bottom: 7px; display: block; }
.tpl-input { width: 100%; }
.tpl-textarea { min-height: 74px; }
.tpl-hint { font-size: 11px; line-height: 1.45; color: var(--sl-text-3); }
.tpl-field > .tpl-hint { margin-top: 6px; }
.tpl-error { font-size: 11.5px; color: var(--sl-error); margin-top: 6px; }
.tpl-error:empty { display: none; }
.tpl-foot-hint.is-error { color: var(--sl-error); }
.tpl-cols { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 16px; }
.tpl-col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.tpl-col-video { gap: 0; }

.tpl-proj-wrap { position: relative; }
.tpl-proj-btn {
    width: 100%; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left;
}
.tpl-proj-btn > span:first-child, .tpl-proj-btn > span:last-child { color: var(--sl-text-2); }
.tpl-proj-btn[aria-expanded="true"] { border-color: var(--sl-accent-line); }
.tpl-proj-menu { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 420; }
.tpl-proj-search { margin-bottom: 4px; }
.tpl-proj-list { max-height: 220px; overflow-y: auto; }
.tpl-proj-when { font-family: var(--sl-font-mono); font-size: 10.5px; color: var(--sl-text-3); }
.tpl-proj-none { padding: 8px 9px; }

.tpl-drop {
    width: 100%; aspect-ratio: 16 / 11; box-sizing: border-box; padding: 10px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; text-align: center;
    border-radius: var(--sl-r-10); border: 1.5px dashed var(--sl-border-strong); background: var(--sl-card);
    color: var(--sl-link); cursor: pointer; font-family: var(--sl-font-ui);
}
.tpl-drop:hover, .tpl-drop.is-over { border-color: var(--sl-accent-line); background: var(--sl-row-hover); }
.tpl-drop-title { font-size: 12px; font-weight: 600; color: var(--sl-text-1); }
.tpl-up-video { width: 100%; aspect-ratio: 16 / 11; border-radius: var(--sl-r-10); background: #000; display: block; object-fit: cover; }
.tpl-up-row { display: flex; align-items: center; gap: 6px; margin-top: 6px; }

.tpl-vis-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tpl-vis-opt {
    display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px;
    border-radius: var(--sl-r-10); border: 1px solid var(--sl-hairline); background: var(--sl-card);
    color: var(--sl-text-1); cursor: pointer; text-align: left; font-family: var(--sl-font-ui);
}
.tpl-vis-opt:hover { border-color: var(--sl-border-strong); }
.tpl-vis-opt.is-active { border-color: var(--sl-accent-line); background: var(--sl-accent-tint); }
.tpl-vis-opt:disabled { opacity: 0.5; cursor: default; }
.tpl-vis-opt-top { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.tpl-vis-opt-top svg { color: var(--sl-text-3); }
.tpl-vis-opt.is-active .tpl-vis-opt-top svg { color: var(--sl-link); }
.tpl-vis-opt-note { font-size: 11px; line-height: 1.4; color: var(--sl-text-3); }

.tpl-switch-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.tpl-switch-label { font-size: 12.5px; font-weight: 600; margin-bottom: 2px; }
.tpl-link-hint { color: var(--sl-warning); margin-top: 3px; }
.tpl-link-hint:empty { display: none; }
.tpl-ws-select { margin-top: 8px; width: 100%; }

@media (max-width: 900px) {
    .tpl-main { padding: 20px 16px 32px; }
    .tpl-page.has-drawer .tpl-main { display: none; }
    .tpl-drawer { width: 100%; }
    .tpl-cols { grid-template-columns: 1fr; }
    .tpl-vis-row { grid-template-columns: 1fr; }
}