/* ==========================================================================
   Dark mode override layer - magazine reader
   --------------------------------------------------------------------------
   Loaded LAST, after bootstrap-combined 2.2 (which is pulled from a CDN after
   interaction.css and sets `body { background:#fff; color:#333 }`). Every rule
   is scoped under html.epaper-dark, so with the class absent this file
   contributes nothing.

   The class is stamped server-side from ../../../webapp/theme.php, which reads
   the same `epaper_theme` cookie the webapp toggle writes. That cookie is set
   with path=/, so the choice made in the webapp carries into the reader.

   DELIBERATELY UNTOUCHED: .magazine / .magazine-viewport and the page images
   inside them. Those are photographic newspaper scans - recolouring or
   inverting them would corrupt the content. Only the chrome is themed, so the
   scans sit on a dark surround instead of a white one.
   ========================================================================== */

html.epaper-dark {
	--dm-bg:          #14161a;
	--dm-surface:     #1e2126;
	--dm-surface-alt: #23272d;
	--dm-raised:      #2b3037;
	--dm-border:      #2c3138;
	--dm-text:        #e8eaed;
	--dm-text-dim:    #9aa0a6;
	--dm-brand:       #da2128;
	--dm-brand-text:  #f2555b;

	color-scheme: dark;
}

/* --------------------------------------------------------------- base --- */

html.epaper-dark,
html.epaper-dark body {
	background-color: var(--dm-bg);
	color: var(--dm-text);
}

html.epaper-dark a {
	color: var(--dm-brand-text);
}

html.epaper-dark a:hover {
	color: #ff7a80;
}

/* ------------------------------------------------------- reader chrome --- */

html.epaper-dark .magazine-top-menu .controls {
	background: var(--dm-surface);
	border-color: var(--dm-border);
}

/* Table of contents panel. */
html.epaper-dark .table_contents_body {
	background: var(--dm-surface);
	color: var(--dm-text);
}

/* interaction.css:258 sets `color: black` on each row itself, so the panel
   colour above never reached the headlines. */
html.epaper-dark .table_contents_body ul .titles {
	color: var(--dm-text);
	border-bottom-color: var(--dm-border);
}

/* The light-mode hover is 30% blue, which turns murky navy on dark. */
html.epaper-dark .table_contents_body ul .titles:hover {
	background: var(--dm-raised);
}

html.epaper-dark .table_contents_body::-webkit-scrollbar,
html.epaper-dark .table_contents_body::-webkit-scrollbar-track {
	background-color: var(--dm-surface-alt);
}

html.epaper-dark .table_contents_body::-webkit-scrollbar-thumb {
	background-color: #3a4048;
}

/* ------------------------------------------------- article modal header --- */

/* interaction.css:358 and :726 both declare `background: #fff !important` on
   these two headers, so !important is the only way to reach them. Without it
   the bar stays white while the controls below turn light - unreadable. */
html.epaper-dark .reader_modal_header,
html.epaper-dark .reader_modal_header_sm {
	background: var(--dm-surface) !important;
	color: var(--dm-text);
	border-color: var(--dm-border);
	box-shadow: 0 1px 15px 0 rgba(0, 0, 0, 0.6);
}

html.epaper-dark .reader_modal_header .first_controls .control_btn,
html.epaper-dark .reader_modal_header .second_controls .control_btn,
html.epaper-dark .reader_modal_header_sm .first_controls .control_btn,
html.epaper-dark .reader_modal_header_sm .second_controls .control_btn {
	color: var(--dm-text);
}

/* The language picker is a real <select>; its options need colouring too or
   they render as black-on-black in the popup list. */
html.epaper-dark .reader_modal_header .first_controls .translate_container #translate_dropdown,
html.epaper-dark .reader_modal_header .first_controls .translate_container #translate_dropdown option,
html.epaper-dark .reader_modal_header_sm .first_controls .translate_container #translate_dropdown,
html.epaper-dark .reader_modal_header_sm .first_controls .translate_container #translate_dropdown option {
	background-color: var(--dm-surface-alt);
	color: var(--dm-text);
}

html.epaper-dark .reader_modal_header_sm .second_controls #change_text_size {
	background: var(--dm-surface-alt);
}

/* ============================================================== icons =====
   The reader already ships a white variant of every dark toolbar glyph - the
   "2" suffix is the dark-on-white version, the unsuffixed file is white (and
   share_white.png for share). Dark mode simply points at the assets the
   designers already made, so nothing here is generated or recoloured.
   ========================================================================== */

html.epaper-dark .reader_modal_header .close::after,
html.epaper-dark .reader_modal_header_sm .close::after,
html.epaper-dark #not_subscribed_modal button.close::after {
	background-image: url(../pics/new_icons/cancel.png);
}

html.epaper-dark .reader_modal_header .first_controls .translate_container #translate_dropdown_icon,
html.epaper-dark .reader_modal_header_sm .first_controls .translate_container #translate_dropdown_icon {
	background-image: url(../pics/new_icons/translate.png);
}

html.epaper-dark .reader_modal_header .first_controls #listen_btn::before,
html.epaper-dark .reader_modal_header_sm .first_controls #listen_btn::before {
	background-image: url(../pics/new_icons/listen.png);
}

html.epaper-dark .reader_modal_header .first_controls #share_btn::before,
html.epaper-dark .reader_modal_header_sm .first_controls #share_btn::before {
	background-image: url(../pics/new_icons/share_white.png);
}

html.epaper-dark .reader_modal_header .first_controls #printBtn::before,
html.epaper-dark .reader_modal_header_sm .first_controls #printBtn::before {
	background-image: url(../pics/new_icons/print.png);
}

/* Only the .reader_modal_header pair uses the dark "2" glyphs; the _sm variant
   already points at the white ones, so it needs no override. */
html.epaper-dark .reader_modal_header .first_controls #change_text_icon1 {
	background-image: url(../pics/new_icons/text_decrease.png);
}

html.epaper-dark .reader_modal_header .first_controls #change_text_icon2 {
	background-image: url(../pics/new_icons/text_increase.png);
}

html.epaper-dark .reader_modal_header .second_controls #next_btn::after {
	background-image: url(../pics/new_icons/next_arrow.png);
}

html.epaper-dark .reader_modal_header .second_controls #prev_btn::before {
	background-image: url(../pics/new_icons/back_arrow.png);
}

/* The masthead is red plus near-black lettering; the dark copy keeps the red
   and lightens only the lettering. */
html.epaper-dark img[src$="pics/new_icons/epaper_logo.png"],
html.epaper-dark .logo img,
html.epaper-dark .stiky_logo img {
	content: url(../pics/new_icons/dark/epaper_logo.png);
}

/* ------------------------------------------------------------ sharing --- */

html.epaper-dark .share-overlay-content #share-btns li div {
	background-color: var(--dm-surface-alt);
}

html.epaper-dark .share-overlay-content #share-btns li a {
	color: var(--dm-brand-text);
}

/* ------------------------------------------------------------- modals --- */

html.epaper-dark .modal,
html.epaper-dark .modal-body {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

/* interaction.css:1342 uses `background: #ffffff !important` here too. */
html.epaper-dark .modal-footer,
html.epaper-dark #not_subscribed_modal .modal-footer {
	background: var(--dm-surface-alt) !important;
	border-top-color: var(--dm-border);
}

/* ------------------------------------------------ article body (modal) --- */

/* interaction.css:1123 pins the headline to #4a4a4a - near-black on a dark
   surface. The rule below is (0,2,1) vs the source's (1,0,1), so it needs the
   id in the selector to win. */
html.epaper-dark #content_modal_value .reader_header h1 {
	color: var(--dm-text);
}

html.epaper-dark #content_modal_value .reader_header {
	border-bottom-color: var(--dm-border);
}

html.epaper-dark #content_modal_value,
html.epaper-dark #content_modal_value .reader_full_content,
html.epaper-dark #content_modal_value .reader_full_content p {
	color: var(--dm-text);
}

html.epaper-dark .modal-header {
	border-bottom-color: var(--dm-border);
}

html.epaper-dark .close,
html.epaper-dark .close:hover {
	color: var(--dm-text);
	text-shadow: none;
	opacity: .8;
}

/* ------------------------------------------------ bandwidth chooser ----- */

html.epaper-dark .bandwidth-chooser-wrapper {
	color: var(--dm-text);
}

html.epaper-dark .bandwidth-chooser-wrapper {
	background-color: rgba(0, 0, 0, .7);
}

html.epaper-dark .bandwidth-chooser-wrapper .bandwidth-chooser {
	background-color: var(--dm-surface);
	color: var(--dm-text);
	border: 1px solid var(--dm-border);
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
	padding: 1.6rem 1.6rem 1.8rem;
	overflow: hidden;
}

html.epaper-dark .bandwidth-chooser-wrapper .bandwidth-chooser .title {
	margin: 0 0 1.2rem;
	font-size: 1rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--dm-text-dim);
}

/* Each option becomes a selectable card. */
html.epaper-dark .bandwidth-chooser-wrapper .high-bandwidth,
html.epaper-dark .bandwidth-chooser-wrapper .low-bandwidth {
	padding: 18px 12px 12px;
	background-color: var(--dm-surface-alt);
	border: 1px solid var(--dm-border);
	border-radius: 10px;
	transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}

html.epaper-dark .bandwidth-chooser-wrapper .high-bandwidth:hover,
html.epaper-dark .bandwidth-chooser-wrapper .low-bandwidth:hover {
	background-color: var(--dm-raised);
	border-color: var(--dm-brand-text);
	transform: translateY(-2px);
}

html.epaper-dark .bandwidth-chooser-wrapper .high-bandwidth .text,
html.epaper-dark .bandwidth-chooser-wrapper .low-bandwidth .text {
	margin: 10px 0 0;
	font-size: 1rem;
	color: var(--dm-text);
}

/* bandwidth-HD.jpg / bandwidth-SD.jpg are gauges on a baked-in white ground
   with black needles. Redrawn as SVG in the same teal/orange, on a dark
   track with a light needle. */
html.epaper-dark .bandwidth-chooser-wrapper .high-bandwidth img,
html.epaper-dark .bandwidth-chooser-wrapper .low-bandwidth img {
	width: 70%;
	max-width: 150px;
	height: auto;
	aspect-ratio: 200 / 108;
}

html.epaper-dark .bandwidth-chooser-wrapper .high-bandwidth img {
	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 8 200 108'><path d='M30,100 A70,70 0 0 1 170,100' fill='none' stroke='%2300c4b3' stroke-width='26'/><line x1='100' y1='100' x2='172.5' y2='66.2' stroke='%23e8eaed' stroke-width='5' stroke-linecap='round'/><circle cx='100' cy='100' r='8' fill='%23e8eaed'/></svg>");
}

html.epaper-dark .bandwidth-chooser-wrapper .low-bandwidth img {
	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 8 200 108'><path d='M30,100 A70,70 0 0 1 170,100' fill='none' stroke='%233a4048' stroke-width='26'/><path d='M30,100 A70,70 0 0 1 46.4,55' fill='none' stroke='%23ffa000' stroke-width='26'/><line x1='100' y1='100' x2='66.2' y2='27.5' stroke='%23e8eaed' stroke-width='5' stroke-linecap='round'/><circle cx='100' cy='100' r='8' fill='%23e8eaed'/></svg>");
}

/* Toolbar HD toggle (inline <style> in index.php). Light mode shows "off" as a
   grey glyph that reads as disabled against white; on the dark bar the same
   grey is as bright as the live icons beside it, so low vs high was
   indistinguishable. Dim "off", lift the blue "on". */
html.epaper-dark .magazine-top-menu a.bandwidth.low {
	opacity: .38;
}

html.epaper-dark .magazine-top-menu a.bandwidth.high {
	filter: brightness(1.35) saturate(1.1);
}

html.epaper-dark .console {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

/* ------------------------------------------------------------- forms --- */

html.epaper-dark input[type="text"],
html.epaper-dark input[type="password"],
html.epaper-dark input[type="email"],
html.epaper-dark input[type="number"],
html.epaper-dark input[type="search"],
html.epaper-dark input[type="tel"],
html.epaper-dark input[type="url"],
html.epaper-dark input[type="date"],
html.epaper-dark select,
html.epaper-dark textarea {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark input[disabled],
html.epaper-dark select[disabled],
html.epaper-dark textarea[disabled],
html.epaper-dark input[readonly],
html.epaper-dark select[readonly],
html.epaper-dark textarea[readonly] {
	background-color: var(--dm-bg);
	color: var(--dm-text-dim);
}

html.epaper-dark select option {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

html.epaper-dark code,
html.epaper-dark pre {
	background-color: var(--dm-surface-alt);
	color: var(--dm-text);
	border-color: var(--dm-border);
}

/* The reader's only real inputs are two radios and two range sliders. */
html.epaper-dark input[type="range"],
html.epaper-dark input[type="radio"] {
	accent-color: var(--dm-brand);
}

/* ==========================================================================
   magazine.css overrides
   --------------------------------------------------------------------------
   magazine.css is NOT a <link> in the document - it is injected at runtime by
   the yepnope loader in index.php, so it never appears in the markup and lands
   in the DOM after this file. Source order therefore cannot be relied on; every
   rule below wins on specificity instead, via the html.epaper-dark prefix.
   ========================================================================== */

/* The bar itself. `.controls` alone only covered its right-hand portion, which
   is why the left half stayed white. */
html.epaper-dark .magazine-top-menu {
	background-color: var(--dm-surface);
	border-bottom: 1px solid var(--dm-border);
}

html.epaper-dark #canvas .stiky_logo,
html.epaper-dark .magazine-top-menu .tools_toggler_container,
html.epaper-dark #top_menu_tools_toggle,
html.epaper-dark #top_menu_tools_toggle::after {
	background: var(--dm-surface);
}

html.epaper-dark #top_menu_tools_toggle::after {
	color: var(--dm-text-dim);
}

/* Date text in the bar. */
html.epaper-dark .calendar p {
	color: var(--dm-text);
}

/* The page thumbnail strip along the bottom. */
html.epaper-dark .contents-thumbs {
	background: var(--dm-surface);
}

html.epaper-dark .thumbs_container::-webkit-scrollbar-track {
	background: var(--dm-surface-alt);
}

html.epaper-dark .thumbs_container::-webkit-scrollbar-thumb {
	background: #3a4048;
}

html.epaper-dark div#profile_background_overlay {
	background-color: rgba(0, 0, 0, .6);
}

/* ---------------------------------------------------- top bar glyphs --- */
/* These seven are pure black with no white variant shipped, so light copies
   were generated into pics/new_icons/dark/. The :hover states are brand red
   (#da2128) and already read correctly on a dark bar, so they are left alone. */

html.epaper-dark .magazine-top-menu .controls a.zoom-in {
	background-image: url(../pics/new_icons/dark/zoom_in.png);
}

html.epaper-dark .magazine-top-menu .controls a.zoom-out {
	background-image: url(../pics/new_icons/dark/zoom_out.png);
}

html.epaper-dark .magazine-top-menu .controls a.contents {
	background-image: url(../pics/new_icons/dark/content.png);
}

html.epaper-dark .magazine-top-menu .controls a.table_of_contents {
	background-image: url(../pics/new_icons/dark/list.png);
}

html.epaper-dark .magazine-top-menu .controls a.drag-mode.mode0 {
	background-image: url(../pics/new_icons/dark/drag.png);
}

/* share already ships a white variant. */
html.epaper-dark .magazine-top-menu .controls a.share {
	background-image: url(../pics/new_icons/share_white.png);
}

/* The arrows live on the ::after pseudo-elements, not on .open_tools /
   .close_tools themselves. Styling the parent leaves the original grey arrow
   on the ::after in place and you see two arrows at once. */
html.epaper-dark .magazine-top-menu .tools_toggler_container .open_tools::after {
	background-image: url(../pics/new_icons/dark/double_arrow_down.png);
}

html.epaper-dark .magazine-top-menu .tools_toggler_container .close_tools::after {
	background-image: url(../pics/new_icons/dark/double_arrow_up.png);
}

/* Panning mode (drag-mode.mode1) and the bar's close button. cancel.png is the
   white variant that already ships. */
html.epaper-dark .magazine-top-menu .controls a.drag-mode.mode1 {
	background-image: url(../pics/new_icons/dark/panning.png);
}

html.epaper-dark .magazine-top-menu .close {
	background-image: url(../pics/new_icons/cancel.png);
}


/* ------------------------------------------------------ page background --- */

/* magazine.css:21 sets `body { background-color: #808080 !important }`, and
   that sheet is injected at runtime after this one, so the plain base rule
   above never reached the body. The page scans themselves stay untouched. */
html.epaper-dark body {
	background-color: var(--dm-bg) !important;
}

/* -------------------------------------------------- page-turn controls --- */

/* First/last page. magazine.css:951/1071 use first_btn2/last_btn2 - red
   chevrons on a baked-in white disc. The unsuffixed files are the same
   chevrons with no disc, so draw a dark disc behind those instead. Padding
   plus content-box clipping shrinks the disc to the 35px of the red
   next/prev buttons without changing the 42px layout box. */
html.epaper-dark #canvas .control a.to_first,
html.epaper-dark #canvas .control a.to_last {
	box-sizing: border-box;
	padding: 3.5px;
	border-radius: 50%;
	background-color: var(--dm-raised);
	background-clip: content-box;
	background-origin: content-box;
	background-size: 46%;
	background-position: center;
	background-repeat: no-repeat;
	transition: background-color .15s ease;
}

html.epaper-dark #canvas .control a.to_first {
	background-image: url(../pics/new_icons/first_btn.png);
}

html.epaper-dark #canvas .control a.to_last {
	background-image: url(../pics/new_icons/last_btn.png);
}

html.epaper-dark #canvas .control a.to_first:hover,
html.epaper-dark #canvas .control a.to_last:hover {
	background-color: #3a4048;
}

/* Previous/next keep the brand-red disc. The black drop shadow disappears on
   a dark page, so outline the pill with a hairline instead. */
html.epaper-dark #canvas .control a.prev,
html.epaper-dark #canvas .control a.next {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 2px 8px rgba(0, 0, 0, .6);
}

/* On hover the pill turns red and the disc flips to white (magazine.css:1005
   and :1062); a dark disc keeps the same red-arrow-in-a-circle read. */
html.epaper-dark #canvas .control a.prev.hovered .go_prev_btn,
html.epaper-dark #canvas .control a.next.hovered .go_next_btn {
	background: var(--dm-bg);
}

/* ---------------------------------------------- subscription popup (reader) */

/* bootstrap 2.2 gives .modal-footer `box-shadow: inset 0 1px 0 #fff`; the
   source zeroes the border but not the shadow, which left a bright rule
   across the dark dialog. */
html.epaper-dark #not_subscribed_modal .modal-footer {
	background: var(--dm-surface) !important;
	box-shadow: none;
}

html.epaper-dark #not_subscribed_modal {
	border: 1px solid var(--dm-border);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
	overflow: hidden;
}

/* The promo artwork is a JPG with a white ground; present it as a card. */
html.epaper-dark #not_subscribed_modal .modal-body img {
	border-radius: 8px;
}