/* Title page call to action, chips and collapsible description (stage D). */
.title-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 20px}
html body .title-watch-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:12px;background:linear-gradient(135deg,#ff725b,#ff4f6d);color:#fff;font-size:15px;font-weight:700;letter-spacing:0;text-decoration:none;box-shadow:0 8px 28px #ff4f6d40,0 0 0 1px #ffffff1a inset;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
html body .title-watch-button svg{width:20px;height:20px;flex:none}
html body .title-watch-button:hover{transform:translateY(-1px);box-shadow:0 12px 34px #ff4f6d66,0 0 0 1px #ffffff26 inset;filter:brightness(1.06)}
html body .title-watch-button:active{transform:translateY(0)}
html body .title-watch-button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.title-chips{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px}
.title-chips[hidden]{display:none}
html body .title-chips>span{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;border:1px solid #ffffff1f;border-radius:999px;background:#ffffff0d;color:#d6d9e0;font-size:12px;font-weight:600}
/* description: four lines until "Читать далее" */
html body .title-page .title-summary>#watchDescription:not(.is-open){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;margin-bottom:6px}
html body .title-more{display:inline-block;margin:0 0 18px;padding:6px 0;border:0;background:none;color:var(--accent,#ff725b);font-size:13px;font-weight:600;cursor:pointer}
html body .title-more[hidden]{display:none}
html body .title-more:hover{text-decoration:underline}
@media(max-width:820px){
 .title-cta{margin-top:4px}
 html body .title-watch-button{flex:1 1 100%;min-height:54px}
}
@media(prefers-reduced-motion:reduce){html body .title-watch-button{transition:none}html body .title-watch-button:hover{transform:none}}

.title-cta[hidden]{display:none}

/* Personal controls (status, collection): the old two-column grid had a 190px + 300px minimum and spilled out of the
   card on tablets. Columns now wrap by available width instead. */
html body .title-page .title-bottom-controls .personal-controls{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))!important;width:100%}
html body .title-page .title-bottom-controls .personal-controls select{width:100%!important;min-width:0}
html body .title-page .title-bottom-controls .personal-controls .add-to-collection{display:flex;flex-wrap:wrap;gap:8px;min-width:0;width:100%}
html body .title-page .title-bottom-controls .personal-controls .add-to-collection>select{flex:1 1 150px;min-width:0}
html body .title-page .title-bottom-controls .personal-controls .add-to-collection>button{flex:0 0 auto;max-width:100%}