/* Video library and compact watch page. Shared cards live in site.css. */
.video-compact-hero{padding:36px 0;background:linear-gradient(110deg,#f3e6ed,#e5f0f5);border-bottom:1px solid var(--border)}.video-compact-hero__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}.video-compact-hero h1{margin:6px 0}.video-compact-hero p{font-size:14px}.video-compact-hero__count{padding:12px 22px;border:1px solid #fff8;background:#ffffff55;border-radius:16px;display:grid;text-align:center;min-width:85px}.video-compact-hero__count strong{font-size:28px;font-weight:500;line-height:1.5}.video-compact-hero__count span{font-size:11px;color:var(--muted)}.film-library{padding-top:28px}.film-empty svg{width:35px;height:35px;color:var(--accent);margin-bottom:10px}.video-page{padding-top:30px}.watch-layout{display:grid;grid-template-columns:minmax(0,1fr) 275px;gap:32px;align-items:start}.watch-main{min-width:0}.video-player-frame{border-radius:16px;overflow:hidden;background:#122737}.film-player{background:#122737;overflow:hidden}.film-player video{width:100%;aspect-ratio:16/9;display:block;object-fit:contain}.film-player__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;font-size:10px;color:#c5dbe6}.film-player__foot a{color:inherit;text-decoration:underline}.film-player__dot{width:6px;height:6px;border-radius:50%;background:#a7dfea;display:inline-block;margin-inline-end:6px}.watch-heading{padding-top:21px}.watch-heading h1{font-size:clamp(1.35rem,2vw,1.9rem);line-height:1.7;margin-top:5px;overflow-wrap:anywhere}.watch-heading>p{font-size:12px;margin-top:6px}.video-action-dock{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:13px 0 18px;flex-wrap:wrap}.video-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.video-action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:8px 12px;border:1px solid var(--border);border-radius:9px;background:#eaf1f4;color:var(--ink);font-size:11px;line-height:1.6;cursor:pointer}.video-action svg{width:18px;height:18px}.video-action:hover{background:#e0ebf0;border-color:#aac5d1}.video-action.is-active{background:#f3e1eb;color:#914e70;border-color:#e0b8cc}.video-action.is-active svg{fill:#d6a4bd}.video-action-dock>time{font-size:10px;color:var(--muted)}.video-feedback{font-size:12px;color:var(--rose)}.video-feedback:empty{display:none}.watch-description,.film-transcript{background:#eaf1f4;border:0;padding:13px 16px;border-radius:10px}.watch-description summary,.film-transcript summary{font-size:12px}.watch-description div,.film-transcript div{font-size:13px;overflow-wrap:anywhere}.video-discussion{margin-top:26px;padding-top:22px;border-top:1px solid var(--border);scroll-margin-top:105px}.video-discussion__head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.video-discussion__head h2{font-size:18px;display:flex;align-items:center;gap:8px}.video-discussion__head h2>span{font-size:11px;font-weight:400;background:var(--blue-soft);padding:2px 8px;border-radius:20px}.video-discussion__head>span{font-size:10px;color:var(--muted)}.comment-compose{padding:12px 15px;background:var(--surface);border-radius:11px}.comment-compose summary{font-size:12px}.comment-compose summary>span{display:flex;align-items:center;gap:9px}.comment-compose summary>span svg{width:18px;height:18px;color:var(--accent)}.video-comment-composer{display:grid;gap:14px;padding-top:18px}.video-comment-composer label{display:block;font-size:12px;margin-bottom:6px}.video-comment-composer input,.video-comment-composer textarea{font-size:13px}.comment-name{max-width:290px}.comment-submit{display:flex;justify-content:space-between;gap:20px;align-items:center}.comment-submit small{font-size:10px;color:var(--muted)}.comment-submit .btn{font-size:12px;min-height:40px;white-space:nowrap;padding:8px 16px}.field-error{color:#983c56;font-size:12px}.video-comment{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;padding:18px 0;border-bottom:1px solid var(--border)}.video-comment:last-child{border:0}.video-comment-avatar{width:32px;height:32px;display:grid;place-items:center;background:var(--blue-soft);color:var(--accent);border-radius:11px;font-size:12px}.video-comment header{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.video-comment header strong{font-size:12px;font-weight:600}.video-comment time{font-size:10px;color:var(--muted)}.video-comment p{font-size:13px;margin-top:4px;overflow-wrap:anywhere;white-space:pre-line}.video-comments-empty{padding:18px 0;font-size:12px}.video-comment-message{padding:9px 13px;background:#e1eeeb;border-radius:8px;font-size:12px;margin-bottom:12px}.video-comment-message--error{background:#f5e3eb;color:#983c56}.watch-related__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.watch-related__head h2{font-size:15px}.watch-related__head .text-link{font-size:11px}.watch-related .film-card{margin-bottom:22px}.watch-related .film-card__pattern{inset:15px 16px auto}.watch-related .film-card__pattern strong{font-size:12px}.watch-related .film-card__pattern span{font-size:8px}.watch-related .film-card__body{padding-top:10px}.watch-related .film-card h3{font-size:13px;margin:4px 0}.watch-related .film-card__body>p,.watch-related .film-card__link{display:none}.watch-related>p{font-size:12px}
@media(max-width:1000px){.watch-layout{grid-template-columns:minmax(0,1fr) 230px;gap:24px}}
@media(max-width:760px){.watch-layout{grid-template-columns:1fr;gap:35px}.watch-related{display:grid;grid-template-columns:1fr 1fr;gap:18px}.watch-related__head{grid-column:1/-1;margin:0}.watch-related .film-card__pattern{display:none}.watch-related .film-card__play{width:38px;height:38px}.video-compact-hero{padding:28px 0}.video-compact-hero p{font-size:12px}.video-compact-hero__count{padding:10px 15px;min-width:65px}.video-compact-hero__count strong{font-size:23px}.video-page{padding-top:22px}.watch-heading h1{font-size:1.4rem}.video-action-dock{gap:10px}.video-actions{gap:6px}.video-action{padding:9px 10px;min-height:44px;font-size:11px}.video-action-dock>time{font-size:10px}.video-discussion__head>span{display:none}.comment-submit{align-items:flex-start;flex-direction:column;gap:10px}.film-player__foot{font-size:9px}}
/* Custom controls stay off until their native-media event handlers are ready. */
.cinema{position:relative;isolation:isolate;overflow:hidden;background:#122737;color:#f4f8f9;aspect-ratio:16/9}
.film-player .cinema video{position:absolute;inset:0;width:100%;height:100%;max-height:none;aspect-ratio:auto;object-fit:contain;background:radial-gradient(ellipse at 20% 10%,#2d485d,#0e202e 80%)}
.cinema__top,.cinema__big-play,.cinema__controls,.cinema__notice{display:none}
.cinema--enhanced .cinema__top{position:absolute;inset:22px 24px auto;display:flex;align-items:center;justify-content:space-between;gap:15px;pointer-events:none;color:#ebf5f9;font-size:11px;text-shadow:0 1px 5px #000}
.cinema__tag{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#142d3bb3;border:1px solid #dae9f127;border-radius:30px;backdrop-filter:blur(12px)}.cinema__tag svg{width:17px;height:17px}
.cinema--enhanced .cinema__big-play{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);padding:15px;border:0;background:transparent;color:#fff;cursor:pointer}
.cinema__big-play>span{display:grid;place-items:center;width:82px;height:82px;border-radius:26px;background:linear-gradient(140deg,#d4e9ef,#edcbd9);color:#254c63;border:1px solid #fff8;box-shadow:0 0 0 10px #edf4f415,0 18px 50px #0003;transition:transform .2s}.cinema__big-play svg{width:36px;height:36px;margin-left:-3px}.cinema__big-play:hover>span{transform:scale(1.06)}.cinema__big-play small{font-size:12px;text-shadow:0 2px 6px #000}
.cinema--started .cinema__big-play small{display:none}.cinema--started .cinema__big-play>span{width:62px;height:62px;border-radius:20px;opacity:.95}
.cinema--enhanced .cinema__controls{display:block;position:absolute;inset:auto 0 0;padding:46px 22px 12px;background:linear-gradient(transparent,#081622db 50%,#081622f0);transition:opacity .2s,transform .2s;color:#eef5f7}
.cinema__timeline{height:24px;position:relative;display:flex;align-items:center;margin-bottom:3px}
.cinema__track{position:absolute;left:0;right:0;height:4px;border-radius:4px;background:#cce2ed38;overflow:hidden;pointer-events:none}.cinema__track>span{position:absolute;left:0;top:0;bottom:0;border-radius:4px;width:0;background:#ccdce470}.cinema__track [data-video-progress]{background:linear-gradient(90deg,#a7dfea,#e2b0c5)}
.cinema input[type=range]{appearance:none;-webkit-appearance:none;padding:0;margin:0;border:0!important;box-shadow:none!important;border-radius:0;background:transparent!important;height:24px;min-height:0;cursor:pointer;color:#d4eaf3;direction:ltr}
.cinema [data-video-seek]{position:relative;z-index:1;width:100%}.cinema input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:12px;border:2px solid #f9fafc;border-radius:50%;background:#ddb2c3;box-shadow:0 0 8px #0003}.cinema input[type=range]::-moz-range-thumb{width:9px;height:9px;border:2px solid #f9fafc;border-radius:50%;background:#ddb2c3}.cinema input[type=range]::-moz-range-track{background:transparent}
.cinema__seek-time{display:none;position:absolute;bottom:27px;transform:translateX(-50%);background:#eef4f6;color:#284559;font:11px Arial,sans-serif;padding:6px 8px;border-radius:7px;pointer-events:none}.cinema__timeline:hover .cinema__seek-time{display:block}
.cinema__toolbar{display:flex;align-items:center;gap:7px;min-width:0}.cinema__spacer{flex:1}
.cinema .cinema__button{width:38px;height:40px;min-height:40px;flex:none;display:grid;place-items:center;padding:7px;background:transparent;border:0;border-radius:10px;color:inherit;cursor:pointer}.cinema__button:hover{background:#dfebf222}.cinema .ui-icon{width:22px;height:22px;display:block}.cinema .cinema__play{background:#dcebf222;color:#f5fafb}
.cinema__volume{display:flex;align-items:center;gap:3px}.cinema input[data-video-volume]{width:62px;background:linear-gradient(#c3dce66b,#c3dce66b) center/100% 3px no-repeat!important}.cinema__time{white-space:nowrap;font:12px Arial,sans-serif;font-variant-numeric:tabular-nums;margin-left:8px}.cinema__time-divider{color:#aac2d0}
.cinema .cinema__speed select{color:#e7f0f5!important;background:#ecf7ff12!important;border:1px solid #d8ecf324!important;border-radius:9px!important;height:36px;min-height:36px;line-height:1;font:12px Arial,sans-serif;padding:0 7px;cursor:pointer;width:66px}.cinema__speed select option{color:#e9f3f6;background:#223c50}.cinema__speed>.reading-sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.cinema:focus-visible,.cinema :focus-visible{outline:2px solid #d5e9ef!important;outline-offset:3px}
.cinema--quiet:not(:focus-within) .cinema__controls,.cinema--quiet .cinema__top{opacity:0;pointer-events:none}.cinema--quiet:not(:focus-within){cursor:none}
.cinema__loading{position:absolute;left:calc(50% - 18px);top:calc(50% - 18px);width:36px;height:36px;border:3px solid #e9f3f644;border-top-color:#dceaf2;border-radius:50%;animation:cinema-spin .8s linear infinite;pointer-events:none}
.cinema__error{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#112838f2;padding:25px 25px 90px;text-align:center}.cinema__error strong{color:#f7fafb;font-size:17px}.cinema__error p{color:#bed0db;font-size:12px}.cinema__error button{padding:8px 15px;border:1px solid #adc6d1;border-radius:9px;background:#dae8ed;color:#28495d;cursor:pointer}
.cinema--enhanced .cinema__notice{display:block;position:absolute;left:50%;top:22px;transform:translateX(-50%);max-width:85%;text-align:center;background:#eef4f4;color:#254658;padding:6px 12px;border-radius:9px;font-size:11px;pointer-events:none}.cinema__notice:empty{display:none}
.cinema [hidden]{display:none!important}
.cinema:fullscreen,.cinema.cinema--focused{width:100%;height:100vh;height:100dvh;max-width:none;border-radius:0;aspect-ratio:auto}.cinema--focused{position:fixed;inset:0;z-index:1600}.cinema-focus-open{overflow:hidden}
.film-player__foot{padding:14px 22px;background:#183345;border-top:1px solid #a9c6d615;font-size:11px}.film-player{border-radius:24px;border-color:#b4cad5}
@keyframes cinema-spin{to{transform:rotate(360deg)}}
@media(max-width:700px){.cinema__brand{display:none}.cinema--enhanced .cinema__top{inset:12px 12px auto;font-size:9px}.cinema__tag{padding:4px 8px}.cinema__big-play>span{width:56px;height:56px;border-radius:18px}.cinema__big-play svg{width:27px;height:27px}.cinema__big-play small{display:none}.cinema--enhanced .cinema__controls{padding:35px 10px 7px}.cinema__toolbar{gap:2px}.cinema .cinema__button{width:33px;height:36px;min-height:36px;padding:5px}.cinema .ui-icon{width:20px;height:20px}.cinema input[data-video-volume]{display:none}.cinema__time{font-size:10px;margin-left:4px}.cinema .cinema__speed select{width:55px;font-size:11px;padding:0 3px}.cinema .cinema__pip{display:none}.film-player__foot{font-size:9px;padding:11px 12px}.cinema__error strong{font-size:14px}.cinema__error{padding:16px 16px 68px}.cinema__error p{margin:5px 0;font-size:10px}.cinema__error button{font-size:11px;padding:5px 10px}.cinema__error~.cinema__controls{padding-top:12px}}
@media(max-width:360px){.cinema .cinema__skip{display:none}}
@media(prefers-reduced-motion:reduce){.cinema__controls,.cinema__big-play>span{transition:none}.cinema__loading{animation-duration:2s}}

.cinema .cinema__big-play .ui-icon{width:34px;height:34px}
@media(max-width:700px){.cinema .cinema__big-play .ui-icon{width:27px;height:27px}}


/* ===== Type & size scale (tokens defined in site.css) ===== */
.watch-heading h1{font-size:var(--fs-h1-detail);line-height:1.6}
.video-discussion__head h2,.watch-related__head h2{font-size:var(--fs-h4)}
.watch-related .film-card h3{font-size:var(--fs-body)}
.film-card h3{font-size:var(--fs-title)}
.film-card__eyebrow,.watch-related>p,.video-action-dock>time,.video-discussion__head h2>span{font-size:var(--fs-xs)}
.watch-related__head .text-link{font-size:var(--fs-sm)}
.video-comment-composer input,.video-comment-composer textarea{font-size:var(--fs-body)}
.video-comment-composer label{font-size:var(--fs-sm)}
.comment-submit .btn{min-height:var(--control-h-sm);font-size:var(--fs-sm)}
.video-action{min-height:var(--control-h-sm);font-size:var(--fs-xs)}
.video-discussion__head>span,.comment-submit small{font-size:var(--fs-xs)}

/* ===== UX layer (tokens in site.css): same page header as other pages ===== */
.video-compact-hero{padding-block:clamp(32px,1.25rem + 2.6vw,56px);background:linear-gradient(115deg,#f3e7ee,#e6f0f5)}
.video-compact-hero h1{margin:8px 0 6px}
.video-compact-hero p{max-width:640px}
.video-compact-hero__count{width:96px;height:96px;min-width:0;padding:0;place-content:center;border-radius:28px;border:1px solid #fff9;background:#ffffff50}
.video-action{transition:background-color .18s,border-color .18s,transform .18s var(--ease)}
.video-action:active{transform:scale(.97)}
.video-player-frame{box-shadow:var(--shadow-card)}
@media(max-width:760px){.video-compact-hero__count{width:72px;height:72px;border-radius:22px}}

/* One-line comment bar */
.video-discussion__head{margin-bottom:14px}
.comment-bar{display:flex;align-items:center;gap:4px;padding:6px;background:var(--surface);border:1px solid #bdcfd6;border-radius:16px;box-shadow:var(--shadow-card);transition:border-color .15s,box-shadow .15s}
.comment-bar:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px #5384943a}
.comment-bar__icon{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:12px;background:var(--blue-soft);color:var(--accent)}
.comment-bar__icon svg{width:18px;height:18px}
.video-discussion .comment-bar input.video-comment-input:not([type=hidden]){min-height:40px;padding:8px 12px;border:0!important;border-radius:0;background:transparent;box-shadow:none!important;font-size:var(--fs-body)}
.video-discussion .comment-bar input[name=display_name]:not([type=hidden]){flex:0 0 150px;width:150px;border-inline-end:1px solid var(--border)!important}
.video-discussion .comment-bar input[name=body]:not([type=hidden]){flex:1;width:auto}
.comment-bar__send{flex:none;min-height:40px;padding:0 20px;border:0;border-radius:12px;background:var(--accent);color:#fff;font-size:var(--fs-sm);font-weight:600;transition:background-color .18s,transform .18s var(--ease)}
.comment-bar__send:hover{background:#284c5b}
.comment-bar__send:active{transform:scale(.97)}
.comment-bar__hint,.comment-bar__error{font-size:var(--fs-xs);margin:8px 6px 0}
.comment-bar__hint{color:var(--muted)}
.comment-bar__error{color:#983c56}
.video-comment-stream{margin-top:10px}
/* Comments read as cards; the composer opens from the comment buttons. */
.comment-open{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 16px;border:1px solid var(--border);border-radius:999px;background:var(--surface);color:var(--accent);font:inherit;font-size:var(--fs-sm);font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s}
.comment-open svg{width:17px;height:17px}
.comment-open:hover,.comment-open[aria-expanded=true]{background:var(--blue-soft);border-color:#a9c4cf}
.comment-composer{margin-bottom:18px}
@media(prefers-reduced-motion:no-preference){.comment-composer:not([hidden]){animation:composer-in .22s var(--ease)}}
@keyframes composer-in{from{opacity:0;transform:translateY(-6px)}}
.video-comment-stream{display:grid;gap:12px;margin-top:0}
.video-comment,.video-comment:last-child{grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px}
.video-comment-avatar{width:44px;height:44px;border-radius:50%;font-size:var(--fs-title);font-weight:700}
.video-comment header{gap:10px}
.video-comment header strong{font-size:var(--fs-body);font-weight:700}
.video-comment time{font-size:var(--fs-xs)}
/* Right-aligned like the name above it, even when the comment is written in English. */
.video-comment p{margin-top:6px;font-size:var(--fs-body);line-height:1.9;text-align:right}
.video-comments-empty{padding:20px;text-align:center;font-size:var(--fs-sm);color:var(--muted);background:var(--surface);border:1px dashed var(--border);border-radius:16px}
@media(max-width:560px){
  .comment-bar{flex-wrap:wrap}
  .comment-bar__icon{display:none}
  .video-discussion .comment-bar input[name=display_name]:not([type=hidden]){flex:1 1 100%;width:100%;border-inline-end:0!important;border-bottom:1px solid var(--border)!important}
}