/* Next Edition demo: the bar, the notice and the video placeholder. Scoped to their own ids
   and classes so they cannot touch the page they sit on. */

/* Not sticky: the theme's own header sticks to the top as it scrolls. */
#ned-bar {
	position: relative; z-index: 100000;
	background: #12161c; color: #c3cad6; border-bottom: 1px solid #2b323f;
	font: 600 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	letter-spacing: 0; text-transform: none;
}
#ned-bar .ned-inner { max-width: 1240px; margin: 0 auto; padding: 10px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
#ned-bar a { color: #c3cad6; text-decoration: none; }
#ned-bar a:hover { color: #ffffff; }
#ned-bar a:focus-visible { outline: 2px solid #ff3300; outline-offset: 2px; border-radius: 4px; }
#ned-bar .ned-home { display: inline-flex; align-items: center; gap: 8px; color: #ffffff; font-weight: 800; }
#ned-bar .ned-home svg { width: 22px; height: 22px; fill: #ff3300; }
#ned-bar .ned-about { color: #909bab; font-weight: 400; }
#ned-bar .ned-back { margin-left: auto; color: #909bab; }

#ned-notice {
	position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 2147483001;
	max-width: min(560px, calc(100vw - 32px)); padding: 14px 18px; border-radius: 10px;
	background: #12161c; color: #c3cad6; box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
	font: 400 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	transition: opacity .6s;
}
#ned-notice strong { color: #ffffff; }
#ned-notice.ned-out { opacity: 0; }

/* A YouTube video before it is clicked: the player's shape, a play button and the title. */
.ned-video {
	position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
	width: 100%; aspect-ratio: 16 / 9; margin: 0; padding: 24px; border: 0; border-radius: 0; cursor: pointer;
	background: #12161c; color: #ffffff; text-align: center;
	font: 400 15px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
.ned-video:focus-visible { outline: 3px solid #ff3300; outline-offset: -3px; }
.ned-video__play { width: 68px; height: 48px; border-radius: 12px; background: #ff3300; position: relative; }
.ned-video__play::after { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #ffffff; }
.ned-video__title { font-size: 18px; font-weight: 600; }
.ned-video__note { color: #909bab; font-size: 13px; }
.ned-video-frame { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

@media (max-width: 600px) {
	#ned-bar .ned-about { display: none; }
}