/* Rendering, on the WIP home only (home-page/home-v2-render.html). One picture: the input on the left of the line,
   the render on its right, dragged across; the kinds of input run down its right side as tabs. */
.home-v2 .hv2-render { margin-top: var(--hv2-section-gap); margin-bottom: 0; }
.hv2-render-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.hv2-render-head .hv2-heading { min-width: 0; }
.hv2-render-head .hv2-subtitle { text-wrap: balance; }

/* Owner, 11-09 ("太大了"): the full-width stage stood taller than the window and had to trim its pictures. The picture now
   takes the left of the column, always whole at 16:9, and the tabs fill the height beside it without adding to it.
   Owner, 11-09 ("对齐"): the Prompt section below lays its cards on 12 columns 18px apart (home-wip-styleflow.css), so
   this one takes the same columns: the picture ends where its second card ends and the tabs stand over its third. */
.hv2-render-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; align-items: start; }
.hv2-render-stage { grid-column: 1 / 10; }
.hv2-render-side { grid-column: 10 / 13; position: relative; align-self: stretch; }
/* The tabs share the picture's height, so what a tab shows follows the room the column has (see the container rule below). */
@media (min-width: 900px) {
    .hv2-render-side { container-type: size; }
}

/* Without the script the line rests in the middle. */
.hv2-render-stage {
    --pos: 50;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    background: #eef1f6;
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
    cursor: ew-resize;
}
.hv2-render-pane {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease, visibility 0s linear .5s;
}
.hv2-render-pane.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.hv2-render-pane img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}
.hv2-render-output { position: absolute; inset: 0; clip-path: inset(0 0 0 calc(var(--pos) * 1%)); }

.hv2-render-divider {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--pos) * 1%);
    z-index: 3;
    width: 2px;
    margin-left: -1px;
    background: #fff;
    box-shadow: 0 0 0 .5px rgba(17, 24, 39, .12), 0 0 16px rgba(17, 24, 39, .28);
    outline: none;
}
.hv2-render-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    box-shadow: 0 6px 20px rgba(17, 24, 39, .22);
    transform: translate(-50%, -50%);
    transition: transform .2s ease;
}
.hv2-render-knob svg { width: 20px; height: 20px; }
.hv2-render-stage:hover .hv2-render-knob,
.hv2-render-stage.is-dragging .hv2-render-knob { transform: translate(-50%, -50%) scale(1.08); }
.hv2-render-divider:focus-visible .hv2-render-knob { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--hv2-blue); }

/* What each side shows, named once in the corner it belongs to; a side all but out of view drops its name. */
.hv2-render-chip {
    position: absolute;
    top: 14px;
    z-index: 2;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(17, 24, 39, .56);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    transition: opacity .2s ease;
}
.hv2-render-chip--in { left: 14px; }
.hv2-render-chip--out { right: 14px; }
.hv2-render-stage.is-input-hidden .hv2-render-chip--in,
.hv2-render-stage.is-render-hidden .hv2-render-chip--out { opacity: 0; }

/* Top right, the two ways on: SnapRender (outlined, as on the rest of the page), then Workbench for the pair on show (filled). */
.hv2-render-actions { display: flex; flex: none; align-items: center; gap: 10px; }
.hv2-render-go {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--hv2-blue);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: pointer;
    transition: background .2s ease;
}
.hv2-render-go svg { width: 16px; height: 16px; flex: none; transition: transform .2s ease; }
.hv2-render-go:hover { background: #1f55e0; color: #fff; }
.hv2-render-go:hover svg { transform: translateX(2px); }
.hv2-render-go:focus-visible { outline: 2px solid var(--hv2-blue); outline-offset: 3px; }
/* The Prompt section under this one (shared with the live home): on the WIP routes its "Explore all looks" link is the same
   blue button (owner, 11-10). */
body.home-v2 .home-sf-view-all {
    min-height: 40px;
    height: 40px;
    gap: 8px;
    padding: 0 18px;
    border-color: transparent;
    background: var(--hv2-blue);
    color: #fff;
    box-shadow: none;
    font-size: 15px;
    transition: background .2s ease;
}
body.home-v2 .home-sf-view-all svg { transition: transform .2s ease; }
body.home-v2 .home-sf-view-all:hover { border-color: transparent; background: #1f55e0; color: #fff; box-shadow: none; transform: none; }
body.home-v2 .home-sf-view-all:hover svg { transform: translateX(2px); }
body.home-v2 .home-sf-view-all:focus-visible { outline: 2px solid var(--hv2-blue); outline-offset: 3px; }
/* The Agent section further down (also shared with the live home): on the WIP routes the title over each picture sits in a
   lower band (owner, 11-10: "顶部的空白太高了"). Every title is one line in all four languages at every width; should one
   ever wrap, its band grows rather than spilling onto the picture. */
body.home-v2 .hv2-agent h4 { height: auto; min-height: 40px; flex: 0 0 auto; padding: 4px 8px; }
/* The tool cards (also shared with the live home): on the WIP routes their grey lines are lighter (owner, 11-10: "灰色的说明文字
   能否再浅一些", then "能否更浅？"), #6b7280 to #9ca3af, 2.5:1 on white. Dark mode keeps its own colour (a stronger rule). */
body.home-v2 #tools-grid .card-description { color: #9ca3af; }
/* Owner, 11-10 ("所有的视频和3d gif，都要有个静态图在文件加载好之前展示，避免出现空白"): every clip on the page already sits on
   its own still. The one animated picture, the 3D build in the Agent sketch row, now shows its still (its last frame, same
   size) behind it until it loads; its frames are opaque, so the still never shows through once it plays. */
body.home-v2 .hv2-agent .hv2-flow-picture:has(img[src*="/agent-plan-4-build.webp"]) {
    background-image: var(--hv2-agent-build-still, url(/images/home-v2/agent-plan-4-build-still.webp?v=20261103i));
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}
/* The one tool card with a clip (Image to Video) sits on its still, but that still waits to be scrolled near, like every card
   picture; read from slow places it could still be on its way when the card shows. The same still, as the picture's own
   background, loads with the page. */
body.home-v2 #tools-grid img.hv2-still[src*="/tool-image-to-video-still.webp"] {
    background: #f3f4f6 var(--hv2-tool-video-still, url(/images/home-v2/tool-image-to-video-still.webp?v=20261106)) center / cover no-repeat;
}

/* Tabs: the render as a small picture, its name and, where the column is tall enough, one line. The tab in play fills a bar
   while the row runs by itself. */
.hv2-render-tabs { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; }
.hv2-render-tab {
    position: relative;
    display: flex;
    flex: 1 1 0;
    align-items: center;
    gap: 10px;
    min-width: 0;
    min-height: 0;
    margin: 0;
    padding: 5px 12px 5px 5px;
    border: 1px solid var(--hv2-line);
    border-radius: 12px;
    background: #fff;
    color: var(--hv2-ink);
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.hv2-render-tab:hover { border-color: #c3d2ff; }
.hv2-render-tab.is-active { border-color: var(--hv2-blue); box-shadow: 0 0 0 1px var(--hv2-blue); background: #f5f8ff; }
.hv2-render-tab:focus-visible { outline: 2px solid var(--hv2-blue); outline-offset: 2px; }
/* The picture takes the height of its tab, up to a size, and its width from that. */
.hv2-render-thumb { display: block; flex: none; height: 100%; max-height: 50px; aspect-ratio: 3 / 2; border-radius: 7px; overflow: hidden; background: #eef1f6; }
.hv2-render-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv2-render-tab-text { display: block; min-width: 0; }
.hv2-render-tab-text strong { display: block; font-size: 14.5px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hv2-render-tab-text span {
    display: none;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--hv2-muted);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-wrap: balance;
}
/* Chinese lines break at its punctuation, not inside a word (every phrase fits a row wherever the line shows). */
html[lang^="zh"] .hv2-render-tab-text span { word-break: keep-all; overflow-wrap: anywhere; }
.hv2-render-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--hv2-blue);
    transform: scaleX(0);
    transform-origin: left center;
    pointer-events: none;
}
.hv2-render.is-playing .hv2-render-tab.is-active .hv2-render-progress { animation: hv2-render-fill var(--hv2-render-hold, 6500ms) linear forwards; }
@keyframes hv2-render-fill { to { transform: scaleX(1); } }

/* The line shows only where every tab can hold it whole in two rows, rather than end in "…". */
@container (min-height: 450px) and (min-width: 300px) {
    .hv2-render-tab-text span { display: -webkit-box; }
}
/* Where the Prompt cards go to two columns there is no line to share; the tabs keep a width they can be read at. */
@media (max-width: 1180px) {
    .hv2-render-body { grid-template-columns: minmax(0, 1fr) clamp(240px, 30%, 300px); }
    .hv2-render-stage,
    .hv2-render-side { grid-column: auto; }
}
/* Narrow: the tabs leave the side and scroll sideways under the picture. */
@media (max-width: 899px) {
    .hv2-render-body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .hv2-render-side { position: static; }
    .hv2-render-tabs {
        position: static;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        margin: 0 -2px;
        padding: 2px;
    }
    .hv2-render-tabs::-webkit-scrollbar { display: none; }
    .hv2-render-tab { flex: 0 0 auto; max-width: 220px; padding: 6px 12px 6px 6px; scroll-snap-align: start; }
    .hv2-render-thumb { height: auto; max-height: none; width: 60px; }
}
@media (max-width: 768px) {
    .hv2-render-head { flex-direction: column; align-items: flex-start; gap: 14px; }
    .hv2-render-stage { border-radius: 14px; }
    .hv2-render-chip { top: 10px; font-size: 11.5px; padding: 5px 9px; }
    .hv2-render-chip--in { left: 10px; }
    .hv2-render-chip--out { right: 10px; }
    .hv2-render-actions { flex-wrap: wrap; }
    .hv2-render-knob { width: 36px; height: 36px; }
    .hv2-render-thumb { width: 54px; }
}
/* Phones: neither button fits beside the other in every language, so each takes a full row, the same width. */
@media (max-width: 480px) {
    .hv2-render-actions { width: 100%; gap: 8px; }
    .hv2-render-actions .hv2-render-go,
    .hv2-render-actions .hv2-tools-all { flex-grow: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .hv2-render-pane,
    .hv2-render-pane.is-active { transition: none; }
    .hv2-render-progress { display: none; }
}

/* Dark theme: the Workbench palette the rest of the page takes. */
body.dark-mode.home-v2 .hv2-render-stage,
body.dark-mode.home-v2 .hv2-render-thumb { background: var(--wb-surface); }
body.dark-mode.home-v2 .hv2-render-tab { background: var(--wb-panel); border-color: var(--wb-line); color: var(--wb-text); }
body.dark-mode.home-v2 .hv2-render-tab:hover { border-color: var(--wb-border); }
body.dark-mode.home-v2 .hv2-render-tab.is-active { border-color: var(--wb-primary); box-shadow: 0 0 0 1px var(--wb-primary); background: var(--wb-soft); }
body.dark-mode.home-v2 .hv2-render-tab-text span { color: var(--wb-muted); }
body.dark-mode.home-v2 .hv2-render-progress { background: var(--wb-primary); }
body.dark-mode.home-v2 .home-sf-view-all { border-color: transparent; background: var(--wb-primary); color: #fff; }
body.dark-mode.home-v2 .home-sf-view-all:hover { border-color: transparent; background: var(--wb-primary-hover); color: #fff; }