/*
 * timeline-wcag.css
 * Accessibility (WCAG 2.2 AA) drop-in for the Tiki-Toki shared timeline.
 * Load AFTER all other timeline stylesheets. Works together with timeline-wcag.js.
 */

/* --------------------------------------------------------------------------
 * Browser support: written for 2016-era browsers (IE11, Edge 14, Safari 9,
 * Chrome/Firefox of that year). No custom properties, :focus-visible or
 * :focus-within: timeline-wcag.js adds classes instead. Newer media queries
 * (reduced motion, forced colours) are ignored safely by older browsers.
 *
 * Colours used throughout:
 *   #ffbf47  focus ring fallback; timeline-wcag.js swaps in the timeline's
 *            mainColour (adjusted to 3:1 against #0b0c0c) when it has one
 *   #0b0c0c  inner focus ring, so it shows on any background
 *   #111 / #fff / #c8c8c8 / #6b6b6b  story navigator bg / text / muted / border
 * ------------------------------------------------------------------------ */

/* --------------------------------------------------------------------------
 * Screen-reader-only text
 * ------------------------------------------------------------------------ */
.tlw-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* --------------------------------------------------------------------------
 * 2.4.7 / 2.4.11  Visible focus
 * The base stylesheet sets ":focus { outline: 0 }" on everything.
 * ------------------------------------------------------------------------ */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
iframe:focus,
[tabindex]:focus,
[role="button"]:focus,
[role="slider"]:focus,
[role="checkbox"]:focus,
[role="radio"]:focus {
	outline: 3px solid #ffbf47 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #0b0c0c !important;
}

/* Rings only show once someone starts tabbing. timeline-wcag.js puts
   "tlw-keyboard" on <html> when Tab is pressed and removes it on mouse down
   (an older-browser stand-in for :focus-visible). Arrow and Enter shortcuts
   alone don't turn it on. */
html:not(.tlw-keyboard) a:focus,
html:not(.tlw-keyboard) button:focus,
html:not(.tlw-keyboard) input:focus,
html:not(.tlw-keyboard) select:focus,
html:not(.tlw-keyboard) textarea:focus,
html:not(.tlw-keyboard) iframe:focus,
html:not(.tlw-keyboard) [tabindex]:focus,
html:not(.tlw-keyboard) [role="button"]:focus,
html:not(.tlw-keyboard) [role="slider"]:focus,
html:not(.tlw-keyboard) [role="checkbox"]:focus,
html:not(.tlw-keyboard) [role="radio"]:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Script-moved focus (dialog headline, timeline region), only when focus got
   there from the keyboard (timeline-wcag.js adds tlw-focus-kbd). */
.tlw-keyboard .tlw-focus-kbd[tabindex="-1"]:focus {
	outline: 3px solid #ffbf47 !important;
	outline-offset: 4px !important;
	box-shadow: none !important;
}
/* The timeline region's children cover an outline, so draw the ring on top. */
.tlw-keyboard #tl-stage-holder:focus {
	outline: none !important;
}
.tlw-keyboard #tl-stage-holder.tlw-focus-kbd:focus::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 3px solid #ffbf47;
	box-shadow: inset 0 0 0 2px #0b0c0c;
	pointer-events: none;
	z-index: 10000;
}

/* The gallery's main image and thumbnails are clipped by their parents and
   covered by their own positioned pictures, so an outline (inside or out)
   never shows. Draw the ring as a layer on top instead. */
.tlw-keyboard .tl-g-main-content:focus,
.tlw-keyboard .tl-g-thumb-item:focus {
	outline: none !important;
	box-shadow: none !important;
}
.tlw-keyboard .tl-g-main-content:focus::after,
.tlw-keyboard .tl-g-thumb-item:focus::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	border: 3px solid #ffbf47;
	box-shadow: inset 0 0 0 2px #0b0c0c;
	z-index: 1000;
	pointer-events: none;
}

/* Controls inside overflow:hidden parents: draw the ring inside so it isn't clipped. */
.tl-ch-media-list a:focus,
.tl-g-thumb-item:focus,
.tl-g-main-content:focus,
.tl-ccl-item:focus,
.tl-image-select-list li:focus,
.tl-ah-zoom-item:focus,
.menu-holder a:focus,
.ajk-cs-carousel[tabindex]:focus,
.tl-ch-full-story-link:focus {
	outline-offset: -3px !important;
}

/* --------------------------------------------------------------------------
 * 2.4.1  Skip links
 * ------------------------------------------------------------------------ */
.tlw-skip-links {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
}
.tlw-skip {
	position: absolute;
	top: -200px;
	left: 8px;
	white-space: nowrap;
	padding: 10px 16px;
	background: #fff;
	color: #000 !important;
	font: bold 16px/1.3 Arial, Helvetica, sans-serif;
	text-decoration: underline;
	border: 2px solid #000;
}
.tlw-skip:focus {
	top: 8px;
}

/* --------------------------------------------------------------------------
 * Story navigator: out of sight until something inside it has focus
 * ------------------------------------------------------------------------ */
.tlw-story-nav {
	position: absolute;
	top: 0;
	left: -100000px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.tlw-story-nav.tlw-sn-open {
	left: 12px;
	top: 48px;
	z-index: 20000;
	width: 340px;
	max-width: 90%;
	max-width: calc(100vw - 24px);
	height: auto;
	max-height: 500px;
	max-height: calc(100vh - 140px);
	overflow: auto;
	box-sizing: border-box;
	padding: 12px;
	background: #111;
	color: #fff;
	border: 1px solid #6b6b6b;
	border-radius: 4px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.6);
	font: 14px/1.4 Arial, Helvetica, sans-serif;
	text-align: left;
}
.tlw-story-nav .tlw-sn-title {
	margin: 0 0 8px 0;
	font: bold 16px/1.3 Arial, Helvetica, sans-serif;
	color: inherit;
}
.tlw-story-nav .tlw-sn-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.tlw-story-nav .tlw-sn-list li {
	margin: 0 0 2px 0;
}
.tlw-sn-item {
	display: block;
	width: 100%;
	min-height: 32px;
	padding: 6px 8px;
	text-align: left;
	background: transparent;
	color: #fff;
	border: 0;
	border-left: 4px solid #6b6b6b;
	font: inherit;
	line-height: 1.4;
	cursor: pointer;
}
.tlw-sn-item:hover,
.tlw-sn-item:focus {
	background: #2b2b2b;
}
.tlw-sn-item .tlw-sn-date {
	color: #c8c8c8;
	white-space: nowrap;
}
/* "on screen" tag: shown on the stories the stage is currently drawing.
   The comma before it is for screen readers only. */
.tlw-sn-onscreen {
	display: none;
	font-size: 0;
}
.tlw-is-onscreen .tlw-sn-onscreen {
	display: inline;
}
.tlw-sn-onscreen-text {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border: 1px solid currentColor;
	border-radius: 9px;
	font-size: 11px;
	line-height: 16px;
	white-space: nowrap;
	vertical-align: 1px;
}

/* --------------------------------------------------------------------------
 * Story list below the timeline. It now comes after the timeline in the
 * source (to match the reading order), so keep it painted underneath.
 * ------------------------------------------------------------------------ */
#tl-container {
	z-index: 2;
}
.tl-timeline-info {
	z-index: 1;
}
.tl-timeline-info.tlw-inactive {
	visibility: hidden;
}

/* 1.4.3: text here was dimmed with opacity (0.6 / 0.7), taking it under 4.5:1. */
.tl-timeline-info .tl-ah-about-text,
.tl-timeline-info h2 {
	opacity: 1 !important;
	color: #d0d0d0 !important;
}
/* 1.4.1: links must not rely on colour alone. */
.tl-timeline-info .tl-ah-about-text a,
.tl-timeline-info .tl-ah-story-summary p a {
	text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
 * Story panel
 * ------------------------------------------------------------------------ */
.tl-ch-extra-info-text a,
.tl-ch-standfirst a {
	text-decoration: underline !important;
}

/* 1.4.3: the panel sits on a 75% black wash over the timeline, so the worst
   case behind the text is #404040 (a white story card). Grey text needs to be
   at least #b3b3b3 to reach 4.5:1 there. */
.tl-main-content-block-holder .tl-ch-extra-info-text,
.tl-main-content-block-holder .tl-ch-extra-info-text p,
.tl-main-content-block-holder .tl-ch-full-story-link,
.tl-main-content-block-holder .tl-ch-author,
.tl-main-content-block-holder .tl-g-caption-holder p {
	color: #bdbdbd;
}
.tl-main-content-block-holder .tl-ch-bc-inner .tl-ch-prev-story,
.tl-main-content-block-holder .tl-ch-bc-inner .tl-ch-next-story,
.tl-main-content-block-holder .tl-ch-top-content .tl-ch-media-list li a {
	color: #bdbdbd;
}
/* Selected media tab is shown by more than colour (1.4.1). */
.tl-main-content-block-holder .tl-ch-top-content .tl-ch-media-list li.tl-ch-selected a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Lightbox style 1: a white panel inside a frame in the story's category
   colour. Its grey text (#7a7c7e, #888, #999) was 2.8:1 to 4.2:1 on white,
   and the white-on-grey tags and button about 1.6:1 and 2.8:1. */
.tl-lightbox-2 .tl-ch-top-content .tl-ch-media-list li a,
.tl-lightbox-2 .tl-ch-bc-inner .tl-ch-prev-story,
.tl-lightbox-2 .tl-ch-bc-inner .tl-ch-next-story,
.tl-lightbox-2 .tl-ch-bc-inner .tl-ch-selected-story-num,
.tl-lightbox-2 .tl-ch-extra-info-text,
.tl-lightbox-2 .tl-ch-extra-info-text p,
.tl-lightbox-2 .tl-ch-extra-info-text a,
.tl-lightbox-2 .tl-ch-panel-date-display,
.tl-lightbox-2 .tl-ch-author,
.tl-lightbox-2 .tl-gm-caption p {
	color: #333 !important;
}
.tl-lightbox-2 .tl-ch-content-intro-block h3,
.tl-lightbox-2 .tl-ch-standfirst,
.tl-lightbox-2 .tl-ch-standfirst a,
.tl-lightbox-2 .tl-ch-top-content .tl-ch-media-list li.tl-ch-selected a {
	color: #111 !important;
}
.tl-lightbox-2 .tl-ch-top-content .tl-ch-media-list li.tl-ch-selected a {
	text-decoration: underline;
}
.tl-lightbox-2 .tl-ch-tag-holder .story-tag,
.tl-lightbox-2 .rt-button-3,
.tl-lightbox-2 .tl-ch-full-story-link {
	background: #666 !important;
	color: #fff !important;
}
.tl-lightbox-2 .tl-ch-tag-holder .story-tag:hover,
.tl-lightbox-2 .rt-button-3:hover,
.tl-lightbox-2 .tl-ch-full-story-link:hover {
	background: #444 !important;
}
/* Captions: white on a 50% black strip over the picture could fall to
   about 4:1 on a light picture. */
.tl-lightbox-2 .tl-gallery .tl-g-caption-holder {
	background: rgba(0, 0, 0, 0.65);
}

/* The dialog headline gets focus when a story opens; its box is clipped. */
.tlw-keyboard .tl-ch-content-intro-block h3.tlw-focus-kbd[tabindex="-1"]:focus {
	outline-offset: -3px !important;
}

/* 2.5.8: the 12 x 18px close icon gets a 24 x 26px hit area without
   changing how it looks (the icon is a sprite, so the box can't grow). */
.tl-main-content-block-holder .tl-ch-top-content .tl-ch-close-content[role="button"] {
	overflow: visible;
}
.tl-main-content-block-holder .tl-ch-top-content .tl-ch-close-content[role="button"]::after {
	content: "";
	position: absolute;
	top: -4px;
	right: -6px;
	bottom: -4px;
	left: -6px;
}

/* --------------------------------------------------------------------------
 * Auto-play pause button (only appears when auto-play is configured)
 * ------------------------------------------------------------------------ */
.tlw-autoplay-toggle {
	position: absolute;
	left: 56px;
	bottom: 12px;
	z-index: 30000; /* above the auto-play overlay */
	min-height: 32px;
	padding: 6px 12px;
	background: #fff;
	color: #000;
	border: 2px solid #000;
	border-radius: 16px;
	font: bold 13px/1.2 Arial, Helvetica, sans-serif;
	cursor: pointer;
}

/* --------------------------------------------------------------------------
 * 2.5.8 Target size: small icon controls get at least 24 x 24
 * ------------------------------------------------------------------------ */
#tl-uc-zoom-block .zoom-buttons a,
.tl-g-gallery-controls a,
.tl-g-thumb-control-left,
.tl-g-thumb-control-right {
	min-width: 24px;
	min-height: 24px;
}

/* --------------------------------------------------------------------------
 * Reduced motion: CSS transitions/animations finish at once
 * (timeline-wcag.js does the same for jQuery animations)
 * ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
 * Windows High Contrast / forced colours
 * ------------------------------------------------------------------------ */
@media (forced-colors: active), (-ms-high-contrast: active) {
	a:focus,
	button:focus,
	[tabindex]:focus,
	[role="button"]:focus,
	[role="slider"]:focus {
		outline: 3px solid Highlight !important;
	}
	.tlw-sn-item {
		border-left-color: CanvasText;
	}
}

/* --------------------------------------------------------------------------
 * User controls: the source order is now launch, menu, panel (for Tab), so
 * restore the original painting order: the panel's bottom edge sits behind
 * the menu tabs, and the launch button above both.
 * ------------------------------------------------------------------------ */
#tl-uc-controls .launch {
	z-index: 3;
}
#tl-uc-controls .menu-holder {
	z-index: 2;
}

/* --------------------------------------------------------------------------
 * Tab order: the JS moves the slider before the stage in the source so it
 * comes before the 2D/3D toggle and the controls. Flex order keeps it drawn
 * below the stage, exactly where it was. The JS only adds this class where
 * flexbox works well (not IE11), so other browsers keep the original order.
 * ------------------------------------------------------------------------ */
#tl-container.tlw-slider-first {
	display: flex;
	flex-direction: column;
}
#tl-container.tlw-slider-first > * {
	flex: none;
	order: 3;
}
#tl-container.tlw-slider-first > #tl-stage-holder {
	order: 1;
}
#tl-container.tlw-slider-first > #tl-slider-holder {
	order: 2;
}

/* --------------------------------------------------------------------------
 * Game mode (game.css + class-tl-game-controller.js)
 * ------------------------------------------------------------------------ */
/* While the game is up, the timeline controls and story list behind it are
   covered; take them out of the Tab order and away from screen readers. */
.tl-selected-view-game .tl-timeline-info,
.tl-selected-view-game #tl-uc-controls,
.tl-selected-view-game #tl-timeline-3d-launch,
.tl-selected-view-game #tl-timeline-game-launch,
.tl-selected-view-game .tlw-story-nav,
.tl-selected-view-game .tlw-skip-links {
	visibility: hidden !important;
}
/* 1.4.3: panel intro text was #999 on white (2.8:1). */
.tlgv-panel .intro {
	color: #666;
}
/* 1.4.3: end-of-game buttons were #666 on 75% white over the background
   (about 3.3:1). */
.tlgv-completion-button,
.tlgv-completion-button:hover {
	background: #fff;
	color: #333;
}
.tlgv-completion-button:hover {
	text-decoration: underline;
}
/* Clicking the timeline places the story there. */
#tl-game-view .tlgv-timeline-stage .tlgv-panel {
	cursor: pointer;
}

/* ---------------------------------------------------------------
   "More" button on story cards (1.4.3)
   The button sprite is 50% black, so the white label sat at about
   3.7:1 on light cards. A light underlay beneath the sprite keeps
   the look and lifts it to 4.6:1 on any card colour.
   --------------------------------------------------------------- */
.tl-story-block .tl-sb-more-button {
	background-color: #e6e6e6;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

/* ---------------------------------------------------------------
   Spans (1.4.3)
   Span titles, dates and credits sit on the span colour at partial
   opacity over the author's picture, so a light picture could drop
   them well below 4.5:1, and the dates and credits were faded on top.
   A translucent backing guarantees contrast whatever the picture is
   (light backing when the author picked dark span text).
   --------------------------------------------------------------- */
.tl-span-content {
	background: rgba(0, 0, 0, 0.55);
	padding: 6px 10px 8px 10px;
	margin: -6px 0 0 -10px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.tlw-span-dark-text .tl-span-content {
	background: rgba(255, 255, 255, 0.75);
}
.tl-span-content h5,
.tl-span-credit {
	opacity: 1;
}
.tl-span-credit a {
	text-decoration: underline;
}

/* Timeline scale labels: white on a 20% white strip read at about 3:1
   over span colours and light backgrounds. A dark strip keeps 4.5:1
   on any background. */
.tl-stage .scale-block .scale-block-label-v2 {
	background: rgba(0, 0, 0, 0.55);
}

/* Story tags in the default (dark) panel: #999 on #333 was 4.4:1. */
.tl-main-content-block-holder .tl-ch-tag-holder .story-tag {
	color: #b3b3b3;
}