/* install-guide-dark.css — the dark look of the install guides. Applied when
   the device is set to dark, or when the visitor chose dark with the header
   button (theme_mode_head() in system/lib.php). The brand colour, the accent
   colour of the download button and the notice and brand accents stay. */

html {
    color-scheme: dark;
}

.theme-toggle .icon-moon {
    display: none;
}

.theme-toggle .icon-sun {
    display: block;
}

body {
    background-color: #121417;
    color: #e6e6e6;
}

.hero,
.step,
.faq {
    background-color: #1c2128;
    box-shadow: none;
}

.eyebrow {
    background-color: var(--brand-tint-on-dark);
    color: var(--brand-text-on-dark);
}

.hero h1,
.step h2,
.faq summary,
.faq-section h2,
.tab-panel h3,
.guide-notice > strong,
.step-help > strong {
    color: #e6e6e6;
}

.hero p,
.step p,
.faq-body p,
.guide-notice p,
.step-help p {
    color: #cfd5dc;
}

.hero .download-note,
.hero .hero-note,
.hero .hero-alt,
.hero .code-label,
.step-help .tab-tip,
.footer-note,
.step .step-when {
    color: #a0a8b3;
}

.hero .install-done {
    background-color: var(--brand-tint-on-dark);
    color: #e6e6e6;
}

.hero-alt a,
.footer-note a,
.step-help a,
.step p a,
.faq-body a {
    color: var(--brand-text-on-dark);
}

.code-box .code {
    background-color: var(--brand-tint-on-dark);
    color: var(--brand-text-on-dark);
    border-color: var(--brand-on-dark);
}


.guide-notice {
    background-color: var(--notice-tint-on-dark);
    border-left-color: var(--notice-stripe-on-dark);
}

.step-help {
    background-color: var(--brand-tint-on-dark-soft);
    border-left-color: var(--brand-on-dark);
}

.step .step-when {
    background-color: #2c333d;
}

.step img {
    border-color: #2c333d;
}

.path {
    background-color: #232a33;
    color: #e6e6e6;
}

.tab {
    background-color: #1c2128;
    border-color: var(--brand-on-dark);
    color: var(--brand-text-on-dark);
}

.tab.active {
    background-color: var(--brand-on-dark);
    color: #121417;
}

.faq summary::after {
    border-color: var(--brand-text-on-dark);
}

.hero-other {
    border-color: #2c333d;
}

/* Focus rings in the brand colour are too dark on these backgrounds */
.download-btn:focus-visible,
.install-btn:focus-visible,
.tab:focus-visible {
    outline-color: var(--brand-on-dark);
}