/* ── Team Lab / My Teams / Author (3.8.9): compact left-aligned header, one chip row, feed cards ── */
.hub-main { --hub-pad: 40px; box-sizing: border-box; max-width: 1400px; margin: 0 auto; padding: var(--space-6) var(--hub-pad) 40px; }
@media (max-width: 1023px) { .hub-main { --hub-pad: 24px; } }
@media (max-width: 600px) { .hub-main { --hub-pad: 16px; padding-top: var(--space-5); } }

.hub-hero { margin: 0 0 var(--space-4); }
.hub-hero h1 { margin: 0; color: var(--ink); font-size: var(--text-title); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.hub-hero p { margin: var(--space-1) 0 0; max-width: 96ch; color: var(--ink-muted); font-size: 15px; line-height: 1.45; }
/* Author page: hub.js prepends the avatar; it sits left of the name and the count */
.hub-hero:has(> .hub-hero-avatar) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-content: center; }
.hub-hero-avatar { grid-row: span 2; align-self: center; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line-strong); }
@media (max-width: 600px) { .hub-hero h1 { font-size: 24px; } }

.hub-filters { display: flex; flex-direction: column; gap: var(--space-3); margin-bottom: var(--space-5); }
.hub-search-row { display: flex; gap: var(--space-2); align-items: center; }
.hub-search-row > .input, .hub-search-row > .hub-search-input { flex: 0 1 480px; min-width: 0; }
.hub-search-row > .select, .hub-search-row > .hub-sort-select { flex: none; width: auto; margin-left: auto; } /* sort sits over the feed's right edge */
.hub-search-row > .btn { flex: none; }
#hub-elemental-select { flex: none; width: auto; }
.hub-tag-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* Phones and small tablets: one row that scrolls sideways, bleeding to the screen edges (only this row scrolls) */
@media (max-width: 767px) {
    .hub-tag-row {
        flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
        margin: -4px calc(var(--hub-pad) * -1); padding: 4px var(--hub-pad); /* 4px keeps the focus ring unclipped */
        scroll-padding-inline: var(--hub-pad);
    }
    .hub-tag-row::-webkit-scrollbar { display: none; }
    .hub-tag-row > * { flex: none; }
}
@media (max-width: 600px) {
    .hub-search-row { flex-wrap: wrap; }
    .hub-search-row > .input, .hub-search-row > .hub-search-input { flex: 1 1 100%; }
    .hub-search-row > .btn, .hub-search-row > .select, .hub-search-row > .hub-sort-select { flex: 1 1 0; margin-left: 0; }
}

.hub-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--space-4); }
@media (min-width: 1024px) { .hub-feed { gap: var(--space-5); } }
.hub-empty { grid-column: 1 / -1; padding: 64px 0; color: var(--ink-muted); font-size: var(--text-body); text-align: center; }

/* Card: title, meta (author + date), 7 tiles, tags, stats | actions, then the owner row (Edit, Delete) on your own teams */
.team-card { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; padding: var(--space-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); }
@media (min-width: 768px) { .team-card { padding: 20px; } }
.team-card-title {
    margin: 0; min-width: 0; color: var(--ink); font-size: 17px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.team-card-meta { display: flex; align-items: center; gap: var(--space-3); min-width: 0; color: var(--ink-muted); font-size: var(--text-meta); font-weight: 500; }
/* 24px row, 44px hit area: the extra height reaches into the card gap above and below */
.team-card-author { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; min-height: 44px; margin-block: -10px; color: inherit; text-decoration: none; }
.team-card-avatar { width: 24px; height: 24px; flex: none; border-radius: 50%; object-fit: cover; }
.team-card-username { overflow: hidden; color: var(--ink-muted); font-size: var(--text-meta); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { a.team-card-author:hover .team-card-username { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } }
.team-card-date { flex: none; color: var(--ink-muted); font-size: var(--text-meta); font-variant-numeric: tabular-nums; }
.team-card-meta > .team-card-date { margin-left: auto; }
/* legacy header (title + author side by side) until hub.js moves the author into .team-card-meta */
.team-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.team-card-header .team-card-author { flex: none; margin-block: -10px; }

/* Unit row: the shared tile (style.css "Unit tile") at 48-56px, 7 across; 4 + 3 under 480px (sjw.md section 8). No names: they stay for screen readers */
.team-card-units { display: grid; grid-template-columns: repeat(7, minmax(0, 56px)); gap: 6px; }
.team-card-units.is-sjw { justify-content: center; } /* the flame strip spans the card; tiles centre on it */
@media (max-width: 479px) { .team-card-units { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.unit-mini-card { width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--r-sm); }
.team-card-units .unit-mini-card { width: auto; height: auto; aspect-ratio: 1; }
.unit-mini-card.empty { border: 1px dashed var(--line-strong); }
.unit-mini-bg::after { border-radius: 4px; }
.unit-mini-img { top: 8%; max-width: 90%; max-height: 84%; }
.unit-mini-name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.unit-mini-tooltip { display: none; } /* 3.8.9: the hover tooltip is gone (details live on the team page); hub.js / sjw.js drop the markup, 3.8.11 deletes this rule */

.team-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.team-card-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: auto; }
.team-card-stats, .team-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.team-card-owner { display: flex; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); }
.team-card-owner > .edit-team-btn { flex: 1 1 auto; }

/* Skeleton cards while the feed loads: same boxes as a real card, so nothing jumps when teams arrive */
.team-card.is-skeleton { pointer-events: none; }
.skel { display: block; border-radius: var(--r-sm); background: var(--raised); }
.skel--title { width: 68%; height: 22px; }
.skel--meta { width: 44%; height: 24px; border-radius: var(--r-pill); }
.team-card-units > .skel { aspect-ratio: 1; border-radius: var(--r-sm); }
.skel--btn { width: 116px; height: 44px; border-radius: var(--r-md); }
.skel--btn:first-child { width: 96px; }
@media (prefers-reduced-motion: no-preference) {
    .skel { animation: skel-pulse 1.1s ease-in-out infinite alternate; }
}
@keyframes skel-pulse { from { opacity: .45; } to { opacity: 1; } }

.hub-load-more { display: flex; width: fit-content; margin: 36px auto 0; padding: 0 40px; }
.publish-modal-content { max-width: 600px; width: 95%; height: auto; max-height: 90vh; overflow-y: auto; }
.publish-unit-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.publish-form { display: flex; flex-direction: column; gap: 16px; }
.publish-tag-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.publish-footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
@media (max-width: 640px) { .publish-footer > * { flex: 1; } }
.auth-prompt, .not-member-prompt { text-align: center; padding: 25px 20px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
/* ── Mode tabs (My Teams): segmented control ─────────────────── */
.mode-tabs {
    display: flex; gap: 4px; width: fit-content; margin: 0 0 var(--space-4); padding: 4px;
    background: var(--panel); border: 1px solid var(--line); border-radius: 14px;
}
.mode-tab {
    min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r-md);
    background: none; color: var(--ink-muted); font-size: 15px; font-weight: 600; cursor: pointer;
}
.mode-tab.active, .mode-tab[aria-pressed="true"] { background: var(--raised); border-color: var(--line-strong); color: var(--ink); }
@media (hover: hover) { .mode-tab:hover { color: var(--ink); } }
@media (prefers-reduced-motion: no-preference) { .mode-tab { transition: background-color .15s, border-color .15s, color .15s; } }

.hub-empty-msg { grid-column: 1 / -1; text-align: center; padding: 40px; color: var(--text-muted); }

/* ── Team view page (3.8.10) ───────────────────────────────────
   One panel: header (title, author + date, autoplay, tags) → team board (shared builder tiles)
   → action bar (vote/save left, copy/edit right, Remix in builder as the one --signal primary)
   → description → comments. Phones drop the panel chrome so the tiles get the width. */
.view-main { max-width: 1240px; margin: var(--space-6) auto; padding: 0 var(--space-5); box-sizing: border-box; }
.view-loading { text-align: center; padding: 50px; color: var(--ink-muted); }
.view-content { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--space-6); }

.view-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5); }
.view-title { overflow-wrap: anywhere; margin: 0; font-size: var(--text-title); font-weight: 700; line-height: 1.15; color: var(--ink); text-wrap: balance; }
.view-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.view-author-card {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; max-width: 100%; box-sizing: border-box;
    padding: 0 var(--space-3) 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--r-pill);
    background: var(--raised); color: var(--ink); text-decoration: none;
}
.view-author-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; flex: none; }
.view-author-name { font-size: var(--text-label); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (hover: hover) { .view-author-card:hover { border-color: var(--line-strong); } }
.view-date { color: var(--ink-muted); font-size: var(--text-meta); font-weight: 500; font-variant-numeric: tabular-nums; }

.view-autoplay-badge { display: flex; align-items: center; gap: var(--space-2); max-width: 100%; color: var(--ink-muted); }
.view-autoplay-badge[hidden] { display: none; }
.view-autoplay-badge svg { flex: none; fill: var(--signal); }
.view-autoplay-label { color: var(--ink); font-size: var(--text-label); font-weight: 600; flex: none; }
.view-autoplay-code {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 4px 8px; border-radius: var(--r-sm); background: var(--raised); color: var(--ink);
    font-family: ui-monospace, Consolas, monospace; font-size: var(--text-meta);
}
.view-autoplay-badge .btn { flex: none; }
.view-tags-row:has(.view-tags:empty) { display: none; }
.view-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.view-team-meta { position: relative; margin: 0 0 var(--space-5); padding: var(--space-5); background: var(--abyss); border-radius: var(--r-lg); width: max-content; max-width: 100%; box-sizing: border-box; overflow-x: auto; }

.view-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-3); padding-bottom: var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--line); }
.view-actions-stats, .view-actions-main { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.view-actions .btn--vote { font-variant-numeric: tabular-nums; }

.view-section { margin-bottom: var(--space-6); }
.view-section-title { margin: 0 0 var(--space-3); font-size: var(--text-h2); font-weight: 600; line-height: 1.25; color: var(--ink); }
.view-description { max-width: 68ch; margin: 0; color: var(--ink); font-size: var(--text-body); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.view-description.is-empty { color: var(--ink-muted); font-style: italic; }

/* Comments: a flat list split by hairlines (no box per comment), form on top */
.view-comments { padding-top: var(--space-5); border-top: 1px solid var(--line); }
.view-comment-form { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.view-comment-form[hidden] { display: none; }
.view-comment-actions { display: flex; justify-content: flex-end; }
.view-comment-login { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--r-md); color: var(--ink-muted); font-size: var(--text-label); }
.view-comments-list { display: flex; flex-direction: column; }
.view-comment-form, .view-comment-login, .view-comments-list { max-width: 760px; } /* readable column on desktop */
.view-muted-note { padding: var(--space-3) 0; color: var(--ink-muted); font-size: var(--text-label); }
.view-muted-note.italic { font-style: italic; }
.comment { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--line); }
.comment:first-child { border-top: 0; }
.comment-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.comment-body { flex: 1; min-width: 0; }
.comment-head { display: flex; align-items: baseline; gap: var(--space-2); margin-bottom: 2px; min-width: 0; }
.comment-author { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-label); font-weight: 600; color: var(--ink); }
.comment-date { flex-shrink: 0; color: var(--ink-muted); font-size: var(--text-meta); font-variant-numeric: tabular-nums; }
.comment-text { margin: 0; max-width: 68ch; color: var(--ink); font-size: 15px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-delete { flex-shrink: 0; margin: -6px -10px 0 0; } /* 44px target without growing the comment */

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .view-main { margin: var(--space-4) auto; padding: 0 var(--space-4); }
    .view-content { padding: 0; background: none; border: 0; border-radius: 0; }
    .view-title { font-size: 24px; }
    /* Actions: [vote][save][Remix in builder] on one row, then the copy/edit buttons two per row */
    .view-actions, .view-actions-stats, .view-actions-main { display: contents; }
    .view-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
    .view-actions-main > .btn { flex: 1 1 calc(50% - var(--space-2)); order: 2; }
    .view-actions-main > .btn--primary { flex: 1 1 0; order: 1; }
}