/* ==========================================================================
   Dark mode override layer
   --------------------------------------------------------------------------
   Loaded LAST, after pages.css and style.css. Every themed rule is scoped
   under html.epaper-dark, so with the class absent this file contributes
   nothing and light mode renders exactly as it always has.

   The class is stamped server-side by theme.php; the toggle that sets the
   cookie is theme-toggle.php, rendered inside the page bar.

   The selectors below mirror the rules in pages.css / style.css that paint
   this app's markup a light colour. Mirroring with the html.epaper-dark
   prefix always raises specificity above the original, so source order and
   the 310KB template are both irrelevant.
   ========================================================================== */

html.epaper-dark {
	--dm-bg:          #14161a;  /* page background          */
	--dm-surface:     #1e2126;  /* bars, cards, panels      */
	--dm-surface-alt: #23272d;  /* inputs, hovers, stripes  */
	--dm-raised:      #2b3037;  /* hover on a raised object */
	--dm-border:      #2c3138;
	--dm-text:        #e8eaed;  /* primary copy             */
	--dm-text-dim:    #9aa0a6;  /* secondary / hint copy    */
	--dm-brand:       #da2128;  /* brand red, filled fills  */
	--dm-brand-text:  #f2555b;  /* lightened for contrast   */

	color-scheme: dark;
}

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

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

html.epaper-dark .page-container,
html.epaper-dark body.dashboard .page-container,
html.epaper-dark .page-content-wrapper,
html.epaper-dark .content,
html.epaper-dark .jumbotron {
	background: var(--dm-bg);
	color: var(--dm-text);
}

/* ------------------------------------------------- the bars (top/side) --- */

html.epaper-dark .page-topbar,
html.epaper-dark .page-topbar .topbar-header,
html.epaper-dark .topbar-header,
html.epaper-dark .topbar-menu,
html.epaper-dark .topbar_app_link {
	background: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .page-topbar {
	border-bottom: 1px solid var(--dm-border);
}

html.epaper-dark .page-topbar a,
html.epaper-dark .page-topbar button,
html.epaper-dark .page-topbar a:visited,
html.epaper-dark .page-topbar button:visited,
html.epaper-dark .page-topbar a:focus,
html.epaper-dark .page-topbar button:focus {
	color: var(--dm-text-dim);
}

html.epaper-dark .page-topbar a:hover,
html.epaper-dark .page-topbar button:hover,
html.epaper-dark .page-topbar a:active,
html.epaper-dark .page-topbar button:active {
	color: var(--dm-text);
}

html.epaper-dark .page-sidebar,
html.epaper-dark .page-sidebar .sidebar-header,
html.epaper-dark .sidebar-header,
html.epaper-dark .sidebar-menu,
html.epaper-dark .main_date_picker {
	background: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .page-sidebar a,
html.epaper-dark .page-sidebar button,
html.epaper-dark .page-sidebar a:visited,
html.epaper-dark .page-sidebar button:visited,
html.epaper-dark .page-sidebar a:focus,
html.epaper-dark .page-sidebar button:focus,
html.epaper-dark .icon-thumbnail,
html.epaper-dark .page-sidebar .sidebar-menu .muted {
	color: var(--dm-text-dim);
}

html.epaper-dark body.mobile .page-sidebar .sidebar-menu .menu-items li:hover > a,
html.epaper-dark .menu-items > li > a:hover {
	color: var(--dm-text);
}

/* The content-area header used by login.php / plan.php. */
html.epaper-dark .header,
html.epaper-dark body.box-layout .header > .container,
html.epaper-dark .header-inner,
html.epaper-dark .navbar,
html.epaper-dark .navbar-inner,
html.epaper-dark .navbar-default {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

/* Below 991px pages.css re-declares `.header { background:#fff !important }`,
   which is the bar the phone/tablet layout actually shows - so the rule above
   never reached it and the mobile header stayed white. */
@media (max-width: 991px) {
	html.epaper-dark .header {
		background: var(--dm-surface) !important;
		background-color: var(--dm-surface) !important;
		border-bottom: 1px solid var(--dm-border);
	}
}

html.epaper-dark .header a,
html.epaper-dark .header a.btn,
html.epaper-dark .header .search-link {
	color: var(--dm-text-dim);
}

/* ---------------------------------------------------- surfaces / cards --- */

html.epaper-dark .card,
html.epaper-dark .panel,
html.epaper-dark .widget,
html.epaper-dark .grid-box,
html.epaper-dark .tab-content,
html.epaper-dark .nav-tabs-linetriangle ~ .tab-content,
html.epaper-dark .nav-tabs-fillup ~ .tab-content,
html.epaper-dark .list-view-group-container,
html.epaper-dark .view-port,
html.epaper-dark .well,
html.epaper-dark .quickview-wrapper {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .panel-transparent,
html.epaper-dark .bg-transparent {
	background: transparent;
	background-color: transparent;
}

/* .bg-white is used as a surface utility throughout this markup. */
html.epaper-dark .bg-white {
	background-color: var(--dm-surface) !important;
	color: var(--dm-text);
}

html.epaper-dark .panel.hover-fill:hover {
	background: var(--dm-raised);
}

/* ------------------------------------------------------ typography ------ */

/* Headings and copy inherit from body; blanket div/span rules are avoided
   here because they would outrank utility classes like .text-danger. */
html.epaper-dark h1, html.epaper-dark h2, html.epaper-dark h3,
html.epaper-dark h4, html.epaper-dark h5, html.epaper-dark h6 {
	color: var(--dm-text);
}

html.epaper-dark .text-master,
html.epaper-dark .text-black,
html.epaper-dark .news-col {
	color: var(--dm-text);
}

html.epaper-dark .hint-text,
html.epaper-dark .text-muted,
html.epaper-dark small,
html.epaper-dark .modal .modal-header p {
	color: var(--dm-text-dim);
}

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

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

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

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

html.epaper-dark .form-control:focus {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-brand-text);
	color: var(--dm-text);
}

html.epaper-dark .form-control[disabled],
html.epaper-dark .form-control[readonly],
html.epaper-dark fieldset[disabled] .form-control,
html.epaper-dark .form-group-default.disabled,
html.epaper-dark .form-group-default.disabled.focused {
	background: var(--dm-bg);
	color: var(--dm-text-dim);
}

html.epaper-dark .form-group-default,
html.epaper-dark .form-group-default.focused {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-border);
}

html.epaper-dark .form-group-default label,
html.epaper-dark .form-group-default .form-control,
html.epaper-dark .form-group-default .form-control.error,
html.epaper-dark .login-body .form-group-default .form-control,
html.epaper-dark #subscription_cont1 .form-group-default .form-control {
	background-color: transparent;
	color: var(--dm-text);
}

html.epaper-dark .input-group-addon,
html.epaper-dark .has-success .input-group-addon,
html.epaper-dark .has-warning .input-group-addon,
html.epaper-dark .has-error .input-group-addon {
	background: var(--dm-surface-alt);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .radio label:before,
html.epaper-dark .checkbox label:before {
	background-color: var(--dm-surface-alt);
	border-color: var(--dm-border);
}

html.epaper-dark .checkbox input[type="checkbox"]:focus + label {
	color: var(--dm-text);
}

html.epaper-dark .checkbox input[type="checkbox"]:focus + label:before,
html.epaper-dark .checkbox input[type=checkbox][disabled] + label:before,
html.epaper-dark .checkbox input[type=radio][disabled] + label:after {
	background-color: var(--dm-raised);
}

html.epaper-dark ::-webkit-input-placeholder { color: var(--dm-text-dim); }
html.epaper-dark ::-moz-placeholder          { color: var(--dm-text-dim); opacity: 1; }
html.epaper-dark :-ms-input-placeholder      { color: var(--dm-text-dim); }
html.epaper-dark ::placeholder               { color: var(--dm-text-dim); }

/* ----------------------------------------------------------- buttons --- */

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

html.epaper-dark .btn:hover,
html.epaper-dark .btn-default.hover,
html.epaper-dark .btn-default:hover,
html.epaper-dark .btn-default.active,
html.epaper-dark .btn-default:active,
html.epaper-dark .btn-default.active:hover,
html.epaper-dark .btn.active {
	background-color: var(--dm-raised);
	background: var(--dm-raised);
	color: var(--dm-text);
}

/* Brand-filled buttons keep the brand red; white-on-red already passes AA. */
html.epaper-dark .btn-primary,
html.epaper-dark .btn-danger {
	background-color: var(--dm-brand);
	border-color: var(--dm-brand);
	color: #fff;
}

/* .bg-success is NOT a fill in this app: pages.css defines it as
   `background-color: transparent` and the sidebar uses it as a marker class on
   the nav icons. Giving it a colour paints a box behind every icon. */
html.epaper-dark .bg-success {
	background-color: transparent;
}

html.epaper-dark .login-btn {
	background: var(--dm-brand);
	color: #fff;
}

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

/* The profile panel's action rows are bare <input type="button"> sitting on
   the red gradient header, which stays red in dark mode. Match light mode:
   plain white text, no box. */
html.epaper-dark .login-user-logout input[type="button"],
html.epaper-dark .login-user-change-password input[type="button"],
html.epaper-dark .login-user-edit-profile input[type="button"] {
	background-color: transparent;
	border: 0;
	color: #fff;
}

html.epaper-dark .login-user-logout input[type="button"]:hover,
html.epaper-dark .login-user-change-password input[type="button"]:hover,
html.epaper-dark .login-user-edit-profile input[type="button"]:hover {
	text-decoration: underline;
}

/* ------------------------------------------------------ tabs / pills --- */

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

html.epaper-dark .nav-tabs > li > a {
	color: var(--dm-text-dim);
	border-color: transparent;
}

html.epaper-dark .nav-tabs > li > a:hover,
html.epaper-dark .nav-tabs > li > a:focus,
html.epaper-dark .nav-tabs > li.active > a,
html.epaper-dark .nav-tabs > li.active > a:hover,
html.epaper-dark .nav-tabs > li.active > a:focus,
html.epaper-dark .nav-pills > li.active > a,
html.epaper-dark .nav-pills > li.active > a:hover,
html.epaper-dark .nav-pills > li.active > a:focus {
	background-color: var(--dm-raised);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

/* ---------------------------------------------------------- dropdowns --- */

html.epaper-dark .dropdown-menu,
html.epaper-dark .datepicker.dropdown-menu,
html.epaper-dark .bootstrap-timepicker-widget.dropdown-menu {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .dropdown-menu > li > a,
html.epaper-dark .datepicker.dropdown-menu {
	color: var(--dm-text);
}

html.epaper-dark .dropdown-menu > li > a:hover,
html.epaper-dark .dropdown-menu > li > a:focus,
html.epaper-dark .dropdown-menu > li.active > a,
html.epaper-dark .dropdown-menu > li.active > a:hover {
	background-color: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .dropdown-menu > li.disabled > a {
	color: var(--dm-text-dim);
}

html.epaper-dark .dropdown-menu .divider,
html.epaper-dark .dropdown-default .dropdown-menu:after {
	background-color: var(--dm-border);
}

/* Date picker hover/focus fills. pages.css:12694 paints a hovered day #f0f0f0
   and datepicker3.css uses #eeeeee for the month/year grid, the header row and
   range cells - light fills under the theme's light text, so the hovered
   number vanished. */
html.epaper-dark .datepicker table tr td.day:hover,
html.epaper-dark .datepicker table tr td.day.focused,
html.epaper-dark .datepicker table tr td span:hover,
html.epaper-dark .datepicker table tr td span.focused,
html.epaper-dark .datepicker thead tr:first-child th:hover,
html.epaper-dark .datepicker tfoot tr th:hover {
	background: var(--dm-raised);
	color: #fff;
}

html.epaper-dark .datepicker table tr td.range,
html.epaper-dark .datepicker table tr td.range:hover {
	background: var(--dm-surface-alt);
	color: var(--dm-text);
}

/* Disabled days (future dates) can't be picked, so no hover fill. */
html.epaper-dark .datepicker table tr td.disabled:hover {
	background: transparent;
	color: var(--dm-text-dim);
}

/* The selected day keeps its brand fill on hover. */
html.epaper-dark .datepicker table tr td.active:hover,
html.epaper-dark .datepicker table tr td span.active:hover {
	color: #fff;
}

/* -------------------------------------------------------- nice-select --- */

/* jquery-nice-select is loaded from cdnjs, so its stylesheet is not part of
   the local CSS scan. It paints .list white and sets no colour on .option, so
   the options were inheriting the light body colour onto a white panel. */

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

html.epaper-dark .nice-select:hover,
html.epaper-dark .nice-select.open,
html.epaper-dark .nice-select:active,
html.epaper-dark .nice-select:focus {
	border-color: var(--dm-brand-text);
}

/* The chevron is drawn with borders, not a glyph. */
html.epaper-dark .nice-select:after {
	border-bottom-color: var(--dm-text-dim);
	border-right-color: var(--dm-text-dim);
}

html.epaper-dark .nice-select .list {
	background-color: var(--dm-surface);
	box-shadow: 0 0 0 1px var(--dm-border);
	color: var(--dm-text);
}

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

html.epaper-dark .nice-select .option.focus,
html.epaper-dark .nice-select .option.selected.focus,
html.epaper-dark .nice-select .option:hover {
	background-color: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .nice-select .option.disabled,
html.epaper-dark .nice-select.disabled {
	color: var(--dm-text-dim);
}

/* Native <option> elements still render with system colours in some browsers. */
html.epaper-dark select option {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

/* ------------------------------------------------------ notifications --- */

html.epaper-dark .notification-panel,
html.epaper-dark .notification-panel .notification-body .notification-item,
html.epaper-dark .notification-panel .notification-body .notification-item .heading,
html.epaper-dark .notification-panel .notification-body .notification-item .option {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .notification-panel .notification-body .notification-item:hover,
html.epaper-dark .notification-panel .notification-body .notification-item.unread {
	background-color: var(--dm-raised);
}

html.epaper-dark .notification-panel .notification-footer,
html.epaper-dark .notification-panel .notification-footer a {
	background-color: var(--dm-surface);
	color: var(--dm-text-dim);
}

/* ------------------------------------------------------------ lists --- */

html.epaper-dark .list-view-group-header,
html.epaper-dark .list-view-fake-header,
html.epaper-dark .email-wrapper .email-list .list-view-fake-header {
	background: var(--dm-surface-alt);
	color: var(--dm-text-dim);
	border-color: var(--dm-border);
}

html.epaper-dark .list-view li:hover,
html.epaper-dark .list-view li.active {
	background-color: var(--dm-raised);
}

html.epaper-dark .list-group-item {
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

/* ------------------------------------------------------------ tables --- */

html.epaper-dark .table,
html.epaper-dark .table > thead > tr > th,
html.epaper-dark .table > tbody > tr > td {
	background-color: transparent;
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .table-striped > tbody > tr:nth-of-type(odd) {
	background-color: var(--dm-surface-alt);
}

html.epaper-dark .table-hover > tbody > tr:hover,
html.epaper-dark .table tbody tr.selected td,
html.epaper-dark .table.table-hover tbody tr.selected:hover td {
	background: var(--dm-raised);
	background-color: var(--dm-raised);
}

html.epaper-dark .dataTables_wrapper .dataTables_paginate ul > li.active a {
	color: var(--dm-text);
}

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

html.epaper-dark .modal-content,
html.epaper-dark .modal-header,
html.epaper-dark .modal-body,
html.epaper-dark .modal-footer,
html.epaper-dark .popover,
html.epaper-dark .redirect_newsstand .modal-content {
	background: var(--dm-surface);
	background-color: var(--dm-surface);
	border-color: var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .redirect_newsstand .modal-footer .cancel {
	background: var(--dm-surface-alt);
	color: var(--dm-brand-text);
	border-color: var(--dm-border);
}

html.epaper-dark .modal-backdrop {
	background-color: #000;
}

/* --------------------------------------------- profile slide-out panel --- */

html.epaper-dark .custom-home-profile-content {
	background-color: var(--dm-surface);
	color: var(--dm-text);
}

html.epaper-dark .custom-home-profile-layer {
	background-color: rgba(0, 0, 0, .6);
}

html.epaper-dark .custom-home-profile .tab-content.bg-white {
	background-color: var(--dm-surface) !important;
}

/* The panel's header block. style.css:485 paints it as a coral-to-red
   gradient; in dark mode it goes black, keeping a gradient so it still reads
   as the panel's header against the surface below. */
html.epaper-dark .login-user-info {
	background: #000;
	background: linear-gradient(-120deg, #23272d 0%, #000 80%);
	border-bottom: 1px solid var(--dm-border);
}

/* Name and email sit on the header, where dim grey would wash out. */
html.epaper-dark .login-user-name,
html.epaper-dark .login-user-email { color: #fff; }

/* --------------------------------------------------- subscribe / chat --- */

html.epaper-dark .section-subcribe h3 {
	background-color: var(--dm-surface-alt);
	color: var(--dm-brand-text);
}

html.epaper-dark .section-subcribe .nav-tabs-linetriangle {
	background-color: var(--dm-surface-alt);
}

html.epaper-dark .chat-view .chat-bubble.from-me,
html.epaper-dark .chat-view .chat-bubble.from-them {
	background: var(--dm-surface-alt);
	color: var(--dm-text);
}

html.epaper-dark .chat-view .chat-input:focus,
html.epaper-dark .chat-view .chat-input:active {
	background-color: var(--dm-surface-alt);
}

/* --------------------------------------------------------- quickview --- */

html.epaper-dark .quickview-wrapper .quickview-toggle,
html.epaper-dark .quickview-wrapper .nav-tabs > li > a,
html.epaper-dark .quickview-wrapper .nav-tabs > li > a:hover {
	color: var(--dm-text-dim);
}

/* ------------------------------------------------------- misc chrome --- */

html.epaper-dark hr,
html.epaper-dark .divider,
html.epaper-dark .b-grey,
html.epaper-dark .b-l,
html.epaper-dark .b-r {
	border-color: var(--dm-border);
}

html.epaper-dark .scrollbar-inner > .scroll-element .scroll-bar {
	background-color: #3a4048;
}

html.epaper-dark input[type="checkbox"],
html.epaper-dark input[type="radio"] {
	accent-color: var(--dm-brand);
}

/* ------------------------------------------------- bootstrap leftovers --- */

/* Bootstrap 3 defaults that pages.css never restyled, and which therefore
   still paint dark-on-dark or light-on-dark once the background flips. */

/* The modal dismiss glyph is #000 on what is now a dark surface. */
html.epaper-dark .close,
html.epaper-dark .close:hover,
html.epaper-dark .close:focus {
	color: var(--dm-text);
	text-shadow: none;
	opacity: .7;
}

html.epaper-dark .nav > li > a:hover,
html.epaper-dark .nav > li > a:focus {
	background-color: var(--dm-raised);
}

html.epaper-dark .nav .nav-divider {
	background-color: var(--dm-border);
}

/* #8a6d3b sits at roughly 2.3:1 on the dark background. */
html.epaper-dark .text-warning {
	color: #e0b355;
}

html.epaper-dark a.text-warning:hover {
	color: #f0c877;
}

/* Bootstrap's muted small text is #777, about 3.5:1 here. */
html.epaper-dark .h1 .small, html.epaper-dark .h1 small,
html.epaper-dark .h2 .small, html.epaper-dark .h2 small,
html.epaper-dark .h3 .small, html.epaper-dark .h3 small,
html.epaper-dark h1 .small, html.epaper-dark h1 small,
html.epaper-dark h2 .small, html.epaper-dark h2 small,
html.epaper-dark h3 .small, html.epaper-dark h3 small,
html.epaper-dark blockquote .small,
html.epaper-dark blockquote small,
html.epaper-dark blockquote footer {
	color: var(--dm-text-dim);
}

html.epaper-dark .mark,
html.epaper-dark mark {
	background-color: #4a4326;
	color: var(--dm-text);
}

/* .text-danger is left alone deliberately: pages.css sets #f55753, which
   already reads at about 5.5:1 on this background. */

/* ============================================================== imagery ===
   Several nav glyphs are PNGs with the light theme baked in, so no colour
   property can fix them:
     home.png / search.png / Profile.png  - 0% transparent, solid white ground
     cart.png / apple.png / play.png      - transparent, but a pure black glyph
     calendar.png                         - transparent, pure black glyph
   Recoloured copies live alongside the originals in a dark/ subfolder, with
   the white ground converted to real transparency and the glyph set to
   --dm-text. Light mode keeps using the untouched originals.
   ========================================================================== */

html.epaper-dark .custom-home-icon:before,
html.epaper-dark .custom-home-icon.bg-success:before,
html.epaper-dark .custom-home-icon.bg-success.unhighlighted:before {
	content: url(../img/nav/dark/home.png);
}

html.epaper-dark .custom-search-icon:before,
html.epaper-dark .custom-search-icon.bg-success:before,
html.epaper-dark .custom-search-icon.bg-success.unhighlighted:before {
	content: url(../img/nav/dark/search.png);
}

html.epaper-dark .custom-profile-icon:before,
html.epaper-dark .custom-profile-icon.show-profile-tool:before {
	content: url(../img/nav/dark/Profile.png);
}

html.epaper-dark .custom-plan-icon:before,
html.epaper-dark .custom-plan-icon.bg-success:before,
html.epaper-dark .custom-plan-icon.bg-success.unhighlighted:before {
	content: url(../img/nav/dark/cart.png);
}

html.epaper-dark .app_store:before   { content: url(../img/nav/dark/apple.png); }
html.epaper-dark .google_play:before { content: url(../img/nav/dark/play.png); }

/* The masthead is brand red plus near-black lettering; only the lettering is
   lightened, so the red is untouched. `content` on an <img> is supported in
   current browsers and simply falls back to the original where it is not. */
html.epaper-dark .page-topbar .brand,
html.epaper-dark .topbar-header img.brand,
html.epaper-dark .header .brand img[src$="new_icons/epaper_logo.png"] {
	content: url(../img/new_icons/dark/epaper_logo.png);
}

/* ----------------------------------------------------- date selection --- */

/* pages.css:767 sets `.main_date_picker .custom-date { color: black }`, which
   outranks a rule on the container alone. */
html.epaper-dark .main_date_picker .custom-date,
html.epaper-dark .main_date_picker .custom-pick-date {
	color: var(--dm-text);
}

/* The listing panel behind this is now --dm-surface too, so lift the control
   a step and give it an edge, matching the section dropdown beside it. */
html.epaper-dark .main_date_picker {
	background: var(--dm-surface-alt);
	border: 1px solid var(--dm-border);
	color: var(--dm-text);
	box-shadow: 0 6px 20px 1px rgba(0, 0, 0, .45);
}

/* The calendar glyph in front of the date is a black PNG. */
html.epaper-dark .main_date_picker::before {
	background-image: url(../img/new_icons/dark/calendar.png);
}

/* These sit on the page background, where white already reads correctly. */
html.epaper-dark .date_picker_container .date_picker_text,
html.epaper-dark .select_cat .text {
	color: var(--dm-text);
}

html.epaper-dark .select_cat .select_pub {
	box-shadow: 0 6px 20px 1px rgba(0, 0, 0, .55);
}

/* ======================================================= specificity ======
   pages.css styles several menu labels through deep descendant selectors such
   as `.page-topbar .topbar-menu .menu-items > li:first-child a span`, at
   specificity (0,4,3). A rule on `.icon-thumbnail` alone cannot reach them, so
   these are mirrored verbatim with the theme prefix.
   `li:first-child` is the Home item; `.profile_pan_open` is added at runtime
   when the profile panel opens.
   ========================================================================== */

html.epaper-dark .page-topbar .topbar-menu .menu-items > li:first-child a span,
html.epaper-dark .page-topbar .topbar-menu .menu-items > li.profile_pan_open a span,
html.epaper-dark .page-sidebar .sidebar-menu .menu-items li:first-child a span,
html.epaper-dark .page-sidebar .sidebar-menu .menu-items > li.profile_pan_open a span {
	color: var(--dm-text);
}

/* Sub-menu copy and its icons are near-black in the template. */
html.epaper-dark .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu {
	color: var(--dm-text);
	background: var(--dm-surface);
}

html.epaper-dark .page-sidebar .sidebar-menu .menu-items > li ul.sub-menu > li .icon-thumbnail {
	color: var(--dm-text-dim);
}

html.epaper-dark .login-btn a {
	color: #fff;
}

/* Button states that pages.css sets on a light assumption. */
html.epaper-dark .btn-default:active:focus,
html.epaper-dark .btn-default:active:hover {
	background-color: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .btn-primary:hover,
html.epaper-dark .btn-primary:focus,
html.epaper-dark .btn-primary:active,
html.epaper-dark .btn-primary:active:focus,
html.epaper-dark .btn-primary:active:hover,
html.epaper-dark .btn-primary[disabled],
html.epaper-dark .btn-primary[disabled]:hover,
html.epaper-dark .btn-primary[disabled]:focus,
html.epaper-dark .btn-primary[disabled]:active,
html.epaper-dark fieldset[disabled] .btn-primary,
html.epaper-dark fieldset[disabled] .btn-primary:hover,
html.epaper-dark fieldset[disabled] .btn-primary:focus,
html.epaper-dark fieldset[disabled] .btn-primary:active {
	color: #fff;
}

html.epaper-dark .dropdown-menu > li.active > a:focus {
	background-color: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .notification-panel .notification-body .notification-item .heading {
	background-color: var(--dm-surface);
}

html.epaper-dark code {
	background-color: var(--dm-surface-alt);
	color: #ff9d9d;
}

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

/* Quickview's sticky-note palette is a set of near-white pastels. */
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note-item,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note-item .note-content {
	background: var(--dm-surface-alt);
	color: var(--dm-text);
}

/* Quickview notes panel: the template's sticky-note palette is a set of
   near-white pastels, matched here at the same depth. */
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar > li > a:hover {
	background: var(--dm-surface-alt);
	color: var(--dm-text);
}

html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list > ul li:hover,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .toolbar > li > a.active {
	background: var(--dm-raised);
	color: var(--dm-text);
}

html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar ul > li a:hover,
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .list .toolbar ul > li a.selected {
	color: var(--dm-text);
}

html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content .quick-note-editor::selection {
	background: #4a4326;
}

html.epaper-dark .notification-panel .notification-body .notification-item .heading.open {
	background-color: var(--dm-surface);
}

html.epaper-dark .notification-panel .notification-body .notification-item .heading:after {
	background-color: var(--dm-border);
}

/* Firefox needs its own prefixed selection rule; it cannot be grouped. */
html.epaper-dark .quickview-wrapper .nav-tabs ~ .tab-content .quickview-notes .note .body .content .quick-note-editor::-moz-selection {
	background: #4a4326;
}

/* ======================================================= inline styles ====
   index.php:633 carries the gradient on .custom-home-left as an INLINE style
   attribute (and spans two lines, which is how it evaded the first audit):

     style="background: rgb(153,164,168);
            background: linear-gradient(0deg, rgba(153,164,168,1) 23%,
                                              rgba(255,255,255,1) 70%);"

   Inline declarations outrank every selector regardless of specificity, so
   !important is the only way to reach them without editing the markup. It stays
   scoped to the theme, so light mode keeps its original grey-to-white gradient
   untouched. (The other !important uses in this file are on the .bg-white
   utility, which is itself declared !important upstream.)
   The dark gradient mirrors the original's shape: a lighter surface at the
   bottom easing up into the page background.
   ========================================================================== */

html.epaper-dark .custom-home-left {
	background: var(--dm-surface-alt) !important;
	background: linear-gradient(0deg,
		var(--dm-surface-alt) 23%,
		var(--dm-bg) 70%) !important;
}

/* ==========================================================================
   Page-level overrides
   These pages carry their own <style> blocks with hardcoded light colours
   that would otherwise punch white panels and black text through the theme.
   ========================================================================== */

/* --- search.php ---------------------------------------------------------- */

html.epaper-dark #loading {
	background-color: var(--dm-bg);
}

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

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

/* #mobile_view_top_bar_1 is white-on-brand-red and already reads correctly. */

/* --- login.php ----------------------------------------------------------- */

/* `color: royalblue` sits at roughly 3.4:1 on the dark background. */
html.epaper-dark .first_time_login {
	color: #7fa4ff;
}

/* --- index.php: login strip and edition listing ------------------------- */

/* style.css:173 paints the "not logged in" strip #e7d7d7; with the theme's
   light text on top it was unreadable. */
html.epaper-dark .login-notification {
	background-color: var(--dm-surface);
	border-bottom: 1px solid var(--dm-border);
	box-shadow: none;
}

html.epaper-dark .login-notification .login-msg {
	color: var(--dm-text);
}

/* style.css:164 fills the listing panel #808080 - mid grey, not dark. */
html.epaper-dark .custom-home-right {
	background: var(--dm-surface);
}

/* Section names. style.css:308 makes them white, but the theme's global
   `a { color: brand }` is (0,1,2) and outranks `.news-col a` at (0,1,1),
   which turned every label red. */
html.epaper-dark .news-col a {
	color: var(--dm-text);
}

/* --- profile.php ---------------------------------------------------------- */

/* style.css:466 - the rule above the coupon form is #E6E6E6. */
html.epaper-dark .discount-coupon-div {
	border-top-color: var(--dm-border);
}

/* --- searchNav.php: search overlay --------------------------------------- */

/* pages.css:2185 - a 95% white sheet over the whole page. */
html.epaper-dark .overlay {
	background: rgba(20, 22, 26, 0.97);
}

html.epaper-dark .overlay .overlay-search {
	color: var(--dm-text);
}

html.epaper-dark .overlay .overlay-search::placeholder {
	color: var(--dm-text-dim);
	opacity: 1;
}

/* `.text-black` is `#2c2c2c !important` (pages.css:4623). */
html.epaper-dark .overlay .overlay-close.text-black,
html.epaper-dark .overlay .overlay-close .pg-close {
	color: var(--dm-text) !important;
}

html.epaper-dark .custom-search-section p {
	color: var(--dm-text-dim);
	font-weight: 600;
	letter-spacing: .02em;
}

/* The divider is an inline `border-top: 1px solid #ececec`. */
html.epaper-dark .custom-search-section > div[style*="border-top"] {
	border-top-color: var(--dm-border) !important;
}

html.epaper-dark .custom-search-section select,
html.epaper-dark .custom-search-section select:focus {
	background-color: var(--dm-surface-alt);
	border: 1px solid var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .custom-search-section select:focus {
	border-color: var(--dm-brand-text);
	outline: 0;
}

html.epaper-dark .custom-search-section .input-daterange input {
	background-color: var(--dm-surface-alt);
	border: 1px solid var(--dm-border);
	color: var(--dm-text);
}

html.epaper-dark .custom-search-section .input-daterange .input-group-addon {
	background-color: var(--dm-raised);
	border-color: var(--dm-border);
	color: var(--dm-text-dim);
}

/* --- search.php: result grid --------------------------------------------- */

/* style.css `.search-col { border: 1px solid lightgray }` draws a bright grid. */
html.epaper-dark .search-col {
	border-color: var(--dm-border);
	transition: background-color .15s ease;
}

html.epaper-dark .search-col:hover {
	background-color: var(--dm-surface);
}

html.epaper-dark .search-col img {
	border-radius: 2px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

/* --- subscription popups (index.php #basicModal9, #redirect_to_newsstand) - */

/* style.css:1736 sets `background: #edefef !important` on the dialog. The
   header and body are narrower than it, so a light strip showed down the
   right side and across the top - and hid the close button. */
html.epaper-dark .redirect_newsstand .modal-content {
	background: var(--dm-surface) !important;
	border: 1px solid var(--dm-border);
	border-radius: 10px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .6);
	overflow: hidden;
}

html.epaper-dark .redirect_newsstand .modal-header,
html.epaper-dark .redirect_newsstand .modal-body,
html.epaper-dark .redirect_newsstand .modal-footer {
	background: transparent;
}

/* The promo artwork is a JPG with a white ground baked in; present it as a
   card rather than a hard-edged white block. */
html.epaper-dark .redirect_newsstand .modal-body .modal_logo img {
	border-radius: 8px;
}

html.epaper-dark .redirect_newsstand .modal-body .modal_body_text {
	color: var(--dm-text);
	border-bottom-color: var(--dm-brand);
}

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

html.epaper-dark .redirect_newsstand .close:hover {
	opacity: 1;
}

/* --- login.php ----------------------------------------------------------- */

/* The studio backdrop is its own image (pages.css:18636); the devices are a
   separate transparent PNG on top, so only the backdrop needs replacing. */
html.epaper-dark .login-wrapper .bg-pic {
	background-image:
		radial-gradient(ellipse 60% 45% at 50% 40%, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 70%),
		linear-gradient(180deg, #1b1e23 0%, #14161a 55%, #0f1114 100%);
}

/* Soft floor under the devices, in place of the light one in the photo. */
html.epaper-dark .login-wrapper .bg-pic::before {
	content: "";
	position: absolute;
	left: 10%;
	right: 10%;
	top: 58%;
	height: 60px;
	background: radial-gradient(ellipse at center, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 70%);
	pointer-events: none;
}

html.epaper-dark .login-wrapper .bg-caption .small {
	color: var(--dm-text-dim);
}

/* Left column: tabs match light mode (no fill, red underline only). */
html.epaper-dark .login-container .nav-tabs > li.active > a,
html.epaper-dark .login-container .nav-tabs > li.active > a:hover,
html.epaper-dark .login-container .nav-tabs > li.active > a:focus {
	background-color: transparent;
	border-color: transparent;
	color: var(--dm-text);
}

html.epaper-dark hr#social-login-separator {
	border-top-color: var(--dm-border);
}

html.epaper-dark .login-container .form-group-default .form-control {
	border-bottom-color: var(--dm-border);
}

html.epaper-dark .login-container .form-group-default.focused .form-control {
	border-bottom-color: var(--dm-brand-text);
}

html.epaper-dark .forget-mypassword {
	color: #7fa4ff;
}

/* "Existing Customer from Previous Platform?" is inline `color: #d21002`,
   about 2.9:1 on the dark panel. */
html.epaper-dark .login-container [style*="#d21002"] {
	color: var(--dm-brand-text) !important;
}

/* ==========================================================================
   Theme toggle control
   Intentionally NOT scoped to the dark class: the control has to be visible
   and correct in light mode too, since light is the default and the toggle is
   how a user leaves it. It sits in the page bar, pushed to the right.
   ========================================================================== */

.dm-toggle-row {
	display: inline-flex;
	align-items: center;
	margin-left: auto;
	padding: 0 14px 0 10px;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* In the .header bars (login/plan) the bar is not a flexbox, so float it. */
.header .dm-toggle-row {
	float: right;
	margin-top: 16px;
}

/* Below 991px the header's logo block is a full-width table (.sm-table), so
   the float wraps under the bar. Pin it to the right edge instead, opposite
   the hamburger. */
@media (max-width: 991px) {
	.header .dm-toggle-row {
		position: absolute;
		top: 50%;
		right: 8px;
		margin: 0;
		padding: 0;
		float: none;
		z-index: 2;
		transform: translateY(-50%);
	}
}

/* Day/night switch (from refer/test-dark.html). The reference is 150x65px;
   every length is written as calc(<reference px> * var(--dm-sw)) so the
   design keeps its proportions at whatever size the bar allows. Scaled with a
   variable rather than em because a browser minimum-font-size setting would
   inflate an em-based version. */
.dm-switch {
	--dm-sw: .44;
	position: relative;
	display: inline-block;
	width: calc(150px * var(--dm-sw));
	height: calc(65px * var(--dm-sw));
	margin: 0;
	vertical-align: middle;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

/* Visually hidden but still focusable, so keyboard users can reach it. */
.dm-switch input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	margin: 0;
}

/* Track: daytime sky. */
.dm-sw-track {
	position: absolute;
	inset: 0;
	border-radius: 50px;
	overflow: hidden;
	background: linear-gradient(to bottom, #4ea8de, #90e0ef);
	box-shadow: inset 0 calc(4px * var(--dm-sw)) calc(10px * var(--dm-sw)) rgba(0, 0, 0, .2),
	            0 calc(4px * var(--dm-sw)) calc(15px * var(--dm-sw)) rgba(0, 0, 0, .1);
	transition: background .5s ease;
}

.dm-switch input:focus-visible + .dm-sw-track {
	outline: 2px solid #da2128;
	outline-offset: 2px;
}

/* Day: clouds. */
.dm-sw-clouds {
	position: absolute;
	left: calc(15px * var(--dm-sw));
	bottom: calc(-10px * var(--dm-sw));
	width: calc(100px * var(--dm-sw));
	height: calc(40px * var(--dm-sw));
	background: #fff;
	border-radius: 50px;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.dm-sw-clouds::before,
.dm-sw-clouds::after {
	content: '';
	position: absolute;
	background: #fff;
	border-radius: 50%;
}
.dm-sw-clouds::before {
	width: calc(40px * var(--dm-sw));
	height: calc(40px * var(--dm-sw));
	top: calc(-20px * var(--dm-sw));
	left: calc(15px * var(--dm-sw));
}
.dm-sw-clouds::after {
	width: calc(50px * var(--dm-sw));
	height: calc(50px * var(--dm-sw));
	top: calc(-25px * var(--dm-sw));
	left: calc(40px * var(--dm-sw));
}

/* Night: stars, hidden by day. Kept at a 2px floor so they survive scaling. */
.dm-sw-stars {
	position: absolute;
	right: calc(20px * var(--dm-sw));
	top: calc(15px * var(--dm-sw));
	width: 2px;
	height: 2px;
	background: #fff;
	border-radius: 50%;
	box-shadow: calc(15px * var(--dm-sw)) calc(10px * var(--dm-sw)) 0 #fff,
	            calc(-10px * var(--dm-sw)) calc(18px * var(--dm-sw)) 0 #fff,
	            calc(5px * var(--dm-sw)) calc(25px * var(--dm-sw)) 0 #fff,
	            calc(-20px * var(--dm-sw)) calc(2px * var(--dm-sw)) 0 #fff;
	opacity: 0;
	transform: translateY(calc(-20px * var(--dm-sw)));
	transition: all .5s ease;
}

/* Thumb: sun by day. */
.dm-sw-thumb {
	position: absolute;
	z-index: 2;
	width: calc(51px * var(--dm-sw));
	height: calc(51px * var(--dm-sw));
	left: calc(7px * var(--dm-sw));
	bottom: calc(7px * var(--dm-sw));
	border-radius: 50%;
	background-color: #ffb703;
	box-shadow: 0 0 calc(15px * var(--dm-sw)) #ffb703,
	            0 0 calc(30px * var(--dm-sw)) rgba(255, 183, 3, .6);
	transition: transform .5s cubic-bezier(.4, 0, .2, 1), background-color .5s ease;
}

.dm-sw-crater {
	position: absolute;
	background-color: #9aa5b1;
	border-radius: 50%;
	opacity: 0;
	transition: opacity .3s ease;
}
.dm-sw-crater-1 { width: calc(10px * var(--dm-sw)); height: calc(10px * var(--dm-sw)); top: calc(12px * var(--dm-sw)); left: calc(15px * var(--dm-sw)); }
.dm-sw-crater-2 { width: calc(6px * var(--dm-sw));  height: calc(6px * var(--dm-sw));  bottom: calc(12px * var(--dm-sw)); left: calc(12px * var(--dm-sw)); }
.dm-sw-crater-3 { width: calc(8px * var(--dm-sw));  height: calc(8px * var(--dm-sw));  top: calc(22px * var(--dm-sw)); right: calc(12px * var(--dm-sw)); }

/* Checked = dark: moon slides right, night sky, clouds sink, stars appear. */
.dm-switch input:checked + .dm-sw-track {
	background: linear-gradient(to bottom, #0f172a, #1e1b4b);
}
.dm-switch input:checked + .dm-sw-track .dm-sw-thumb {
	transform: translateX(calc(85px * var(--dm-sw)));
	background-color: #cbd5e1;
	box-shadow: 0 0 calc(10px * var(--dm-sw)) #cbd5e1,
	            inset calc(-4px * var(--dm-sw)) calc(-4px * var(--dm-sw)) 0 rgba(0, 0, 0, .1);
}
.dm-switch input:checked + .dm-sw-track .dm-sw-crater {
	opacity: 1;
}
.dm-switch input:checked + .dm-sw-track .dm-sw-clouds {
	transform: translateY(calc(60px * var(--dm-sw)));
}
.dm-switch input:checked + .dm-sw-track .dm-sw-stars {
	opacity: 1;
	transform: translateY(0);
}

/* The night track is close to the dark bar colour; a hairline keeps its
   edge visible. */
html.epaper-dark .dm-sw-track {
	box-shadow: inset 0 calc(4px * var(--dm-sw)) calc(10px * var(--dm-sw)) rgba(0, 0, 0, .2),
	            0 0 0 1px rgba(255, 255, 255, .14);
}

@media (prefers-reduced-motion: reduce) {
	.dm-sw-track,
	.dm-sw-track * { transition: none !important; }
}