/* Video joiner landing page (tools/video-joiner-conformance only) */
.wt-drop-meta a{white-space:nowrap;color:#1250b5;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.wt-drop-meta a:focus-visible,.wt-drop-alt a:focus-visible{outline:3px solid #1768e5;outline-offset:3px;border-radius:4px}

.tp-vj{order:6;display:grid;gap:18px;min-width:0;margin:0;padding:22px;border:1px solid #cfd8ed;border-radius:20px;background:#fff;box-shadow:0 18px 44px rgba(9,34,70,.09);color:#17213c}
.tp-vj-head{display:grid;gap:4px}
.tp-vj-head strong{font-size:1.15rem;line-height:1.3}
.tp-vj-head span{font-size:.92rem;line-height:1.5;color:#4a5670}

/* source clips: three different shapes */
.tp-vj-clips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;margin:0;padding:0;list-style:none}
.tp-vj-clips li{display:grid;justify-items:center;gap:3px;min-width:0;text-align:center}
.tp-vj-clips b{margin-top:6px;font-size:.84rem;line-height:1.3;overflow-wrap:anywhere}
.tp-vj-clips small{font-size:.78rem;line-height:1.3;color:#4a5670}

.tp-vj-frame{position:relative;display:block;overflow:hidden;border-radius:6px}
.tp-vj-wide{width:100%;aspect-ratio:16/9}
.tp-vj-tall{width:44%;aspect-ratio:9/16}
.tp-vj-std{width:78%;aspect-ratio:4/3}

/* simple scenes so each clip is recognisable in the timeline */
.tp-vj-s1{background:linear-gradient(180deg,#8fc4f2 0,#cfe6fb 58%,#5f9b58 58%,#3f7a3c 100%)}
.tp-vj-s1::after{content:"";position:absolute;right:16%;top:16%;width:18%;aspect-ratio:1;border-radius:50%;background:#ffd35a}
.tp-vj-s2{background:linear-gradient(180deg,#f6a55f 0,#f8cf8a 46%,#3a3f5c 46%,#262a40 100%)}
.tp-vj-s2::after{content:"";position:absolute;left:18%;bottom:34%;width:26%;height:30%;background:#262a40;box-shadow:24px -8px 0 #30354f}
.tp-vj-s3{background:linear-gradient(180deg,#bfe4ea 0,#e3f3f5 50%,#2f8ea1 50%,#1d6676 100%)}
.tp-vj-s3::after{content:"";position:absolute;left:14%;top:30%;width:34%;height:12%;border-radius:50% 50% 0 0;background:#ffffff}

.tp-vj-step{display:flex;align-items:center;gap:10px;margin:0;font-size:.84rem;font-weight:700;color:#33405c}
.tp-vj-step span{position:relative;flex:0 0 28px;height:28px;border-radius:50%;background:#e8eefc}
.tp-vj-step span::after{content:"";position:absolute;left:10px;top:7px;width:7px;height:7px;border-right:2px solid #284de8;border-bottom:2px solid #284de8;transform:rotate(45deg)}

/* joined timeline: every segment in the same 16:9 canvas */
.tp-vj-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin:0;padding:6px;border-radius:12px;background:#0f1a33;list-style:none}
.tp-vj-track li{display:grid;gap:6px;min-width:0}
.tp-vj-track small{padding:0 2px 2px;font-size:.74rem;line-height:1.3;color:#dfe6f5;overflow-wrap:anywhere}
.tp-vj-cell{display:flex;align-items:center;justify-content:center;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:#000}
.tp-vj-cell .tp-vj-frame{border-radius:0}
.tp-vj-in-wide{width:100%;height:100%}
.tp-vj-in-tall{height:100%;aspect-ratio:9/16}
.tp-vj-in-std{height:100%;aspect-ratio:4/3}

/* output file */
.tp-vj-out{display:flex;flex-wrap:wrap;align-items:center;gap:12px 14px;padding:14px;border:1px solid #cfd8ed;border-radius:12px;background:#f6f8fd}
.tp-vj-file{display:grid;place-items:center;flex:0 0 44px;height:52px;border-radius:6px 14px 6px 6px;background:#284de8;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.04em}
.tp-vj-main{display:grid;gap:2px;flex:1 1 140px;min-width:0;margin:0}
.tp-vj-main b{font-size:1rem}
.tp-vj-main small{font-size:.82rem;color:#4a5670}
.tp-vj-extras{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 100%;margin:0;padding:0;list-style:none}
.tp-vj-extras li{padding:4px 10px;border:1px solid #cfd8ed;border-radius:999px;background:#fff;font-size:.8rem;color:#33405c;overflow-wrap:anywhere}
.tp-vj-note{margin:0;font-size:.84rem;line-height:1.5;color:#4a5670}

@media (max-width:800px){
  .tp-vj{padding:18px 16px;gap:16px;border-radius:16px}
}
@media (max-width:400px){
  .tp-vj-clips{gap:8px}
  .tp-vj-clips b{font-size:.76rem}
  .tp-vj-clips small{font-size:.72rem}
  .tp-vj-track small{font-size:.68rem}
}