@charset "utf-8";

body {
    font-family:  "Helvetica Neue", Helvetica, Arial, sans-serif;
    overflow-x:hidden;
    overflow-y:scroll ;
    margin:0;
    padding:0;
}

#myContent {
    margin: 0 auto;
	width: min(740px, 100% - 32px);
    padding:04px 0px 0px 0px;
}

/* ----------------------------------- */

.mb1{
    margin-bottom: 10px;
}

/*--- Header  ------------------------*/
#chapter-selector-block{
    margin: 0;
    padding: 0;
    position: relative;
    width: 210px;
    border-radius: 6px 0 0 6px;   /* its hover color follows the toolbar's rounded left corners */
}

#chapter-selector-overlay {
    height: 45px;    
    width: inherit;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-right: 1px solid #bbb;
    margin: 0;
    padding: 0;
}

#chapter-selector-dropdown{
    height: 45px;      
    width: inherit;
    position: absolute;
    left: 0px;
    top: 0px;    
    cursor: pointer; 
	font-family: 'Roboto Mono', consolas,  monospace;
	font-size:13px;
	padding:3px;
	line-height:35px;   /* Safari Browser Needs This */
	-webkit-appearance: menulist-button;  /* Safari Browser Needs This */
    opacity: 0;        /* invisible: the styled box underneath shows; a click opens this real dropdown */
    z-index: 5;
}

#edition-selector-block{
    margin: 0;
    padding: 0;
    position: relative;
    width: auto;       /* just room for "Allah" and the arrow (the label below keeps that width for "God" too) */
    border-left: 1px solid #bbb;
}

#edition-selector-block .menu-button {
    height: 45px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 0 10px 0 14px;
    cursor: pointer;
}

#edition-selector-block .menu-label {
    font-size: 15px;
    color: #333;
    white-space: nowrap;
    display: grid;             /* as wide as "Allah" (below), so the button doesn't change width between God and Allah */
}
#edition-selector-block .menu-label::after {
    content: "Allah";          /* unseen, with no height: it only sets the width */
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
#edition-selector-block .caret {
    font-size: 11px;           /* the small arrow of the voice and video buttons */
    margin-left: 0;
    padding-right: 0;
}

.selector-block:hover{
    background-color: rgba(0, 0, 0, 0.05);
}

#chNumber{
    font-size:30pt;
    color: #9f0149;
    font-family: "times new roman",Times,serif;
    letter-spacing: -3px;
    padding-left: 5px;
}

#chNames{
    font-size: 15px;
    line-height: 5px;
    margin-left: 8px;
    margin-top: 2px;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis;
}

#chNameEn {
    color: #000;
}

#chNameAr {
    color: #666;                 /* gray, apart from the English name in black, yet easy to read */
}

.caret{
	color:#777;
    font-size:16px;
    margin-left: auto;
    padding-right: 5px;
}

/*-------------------------------*/

.icon-top{
    vertical-align: middle;
    width: 20px;
    height: 20px;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    color: #555;
    pointer-events: none;
    padding: 3px;
}


.icon-top-wrapper:hover{
    background-color: #d8d8d8;
}

.icon-top-wrapper{
    cursor: pointer;
}

/*-------------------------------*/

/*-------------------------------*/

#quran-text{
    margin-top: 30px;
}

#quran-text p {
	font-size:18px;            /* lines of about 80-88 characters in the 740px column (was 17px); Aa scales from this */
	line-height:150%;          /* was 140%: easier to follow lines this long */
	margin:0em 0em 0.80em 0em;  /* was 0.60em: each verse stands apart, with the taller lines */
	padding-left: 2.1em;       /* a hanging indent: the verse numbers in their own column on the left, */
	text-indent: -2.1em;       /* and every line of a verse starting at the same edge */
	text-align:left;
	color:#212121;
}

/* A verse briefly highlighted (after opening it from search): fades in, then out */
#quran-text p {
    transition: background-color 1.5s ease;
}
#quran-text p.verse-flash {
    background-color: #fff3b0;
    transition: background-color 0.4s ease;
}

#quran-text p span {
    font-size: 0.85em;          /* a little smaller than the verse: easy to find, without competing with the words (Aa scales it too) */
    display: inline-block;
    box-sizing: border-box;
    width: 2.47em;              /* the number's column: 2.1em of the verse's size (2.1 / 0.85), room for "286" */
    padding-right: 0.75em;      /* the same short gap between every number and its verse */
    text-align: right;          /* numbers against the verse, their digits lined up (9 over the 0 of 10) */
    text-indent: 0;
    color: #2F5B92;
}
/* "In the name of God..." has no number: it lines up with the verses' text. It has id="verse-0" when a chapter
   is loaded in the page, but no id in the pages as published (002.html...), so a verse without a number matches too */
#quran-text p#verse-0,
#quran-text p:not(:has(> span)) {
    text-indent: 0;
}

/*-------------------------------*/

#myFooterContainer{
    position: fixed;
    background-color: #fff;    
    width: 100%;
    bottom: 0;
    border-top: 1px solid #c4c4c4;           /* neutral gray (tried: #d6d6d6 lighter gray, #c9d6e0 and #b5c6d3 blue-gray) */
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.09);     /* a soft neutral shadow with the line: a hint of depth (was 0 -2px 10px rgba(0,0,0,0.12)) */
    padding: 10px 0px;          /* a little room above and below the controls */
}

#myFooter {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;              /* when the window is narrow and the player wraps under the voice button */
    align-items: center;
    width: min(740px, 100% - 32px);   /* the same width as the text above it */
    justify-content: center;          /* the voice button and the player, together in the middle */
    min-height: 56px;
    margin: 0 auto;
}

#myAudioPlayer {
    visibility: visible;
    width: 480px;               /* 480px wide, narrower when the window is (Chrome then shortens its progress bar). */
    flex: 0 1 auto;             /* (A width, not a flex-basis: the footer sizes itself from it. With a flex-basis alone */
    min-width: 0;               /*  the footer took the player's built-in 300px, and the player came out narrower.) */
    display: block;
}

/* The play button: the site's green (#00b200, the color of the play button that was in the toolbar), and larger.
   Chrome, Edge and Android only; Firefox and Safari ignore these and show their usual black button.
   (Chrome draws the icon as an image, so a filter tints it: close to the green, not exact.) */
#myAudioPlayer::-webkit-media-controls-play-button {
    filter: brightness(0) invert(38%) sepia(96%) saturate(1172%) hue-rotate(90deg) brightness(85%) contrast(109%);   /* #009a00: a little darker than the site's green, so it stands out more on the gray (was #00b200: invert(40%) sepia(86%) saturate(2640%) hue-rotate(94deg) brightness(102%) contrast(106%)) */
    zoom: 1.5;                  /* half again as big: the main control (transform: scale() has no effect on this part of Chrome's player) */
}

/* The voice button, left of the audio player; its menu opens upward, above the footer */
#footer-audio {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap;          /* the voice button and the player stay on one row; the player gives up width */
    min-width: 0;
    flex: 0 1 auto;
}
#voice-button {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 44px;                /* a little shorter than the audio player: the player is the main control */
    padding: 0 14px;
    border-radius: 22px;
    background-color: #f1f3f4;   /* the same gray as Chrome's audio player beside it */
    cursor: pointer;
    white-space: nowrap;
}
#voice-button:hover,
#voice-menu.open #voice-button {
    background-color: #e3e6e8;
}
#voice-button .voice-icon {
    width: 22px;
    height: 22px;
    fill: #555;
    flex: none;
}
#voice-button .menu-label {
    font-size: 15px;
    color: #222;
    display: grid;              /* exactly as wide as the longest name (below): the button keeps one width for */
}                               /* every voice, so picking a voice doesn't shift the player beside it */
#voice-button .menu-label::after {
    content: "Classic voice";   /* the longest name, unseen and with no height: it only sets the width */
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
#voice-button .caret {
    font-size: 11px;
    margin-left: 4px;
    padding-right: 0;
}
#voice-menu {
    flex: none;                 /* the voice button keeps its size */
}
/* A narrow window: the voice button shows only its icon and arrow (the menu still names the voices) */
@media (max-width: 520px) {
    #voice-button .menu-label {
        display: none;
    }
    #voice-button {
        padding: 0 10px;
    }
}
#voice-menu .menu-list {             /* the voice menu opens upward, above the footer */
    top: auto;
    bottom: 100%;
    left: 0;
    right: auto;
    margin: 0 0 8px 0;
}
#video-menu .menu-list {             /* the video menu opens downward, from its left edge */
    left: 0;
    right: auto;
    padding-top: 6px;                /* no heading: the button itself says "Text Video" or "Scenic Video" */
}

/* The video button, at the end of the toolbar: lit while the video shows */
#video-block {
    border-left: 1px solid #bbb;
}
#video-block,
#video-button {
    border-radius: 0 6px 6px 0;   /* the lit button and hover color follow the toolbar's rounded right corners */
}
#video-button {
    height: 45px;
    padding: 0 16px;
    display: flex;
    align-items: center;
    cursor: pointer;
}
#video-button svg {
    width: 24px;
    height: 24px;
    fill: #555;
}
#video-button.on {
    background-color: #00759A;       /* the site's blue, filled: clearly on, and easy to find to go back to the text */
}
#video-button.on svg {
    fill: #fff;
}

/* While watching: what is only for the text is greyed out (search, God / Allah, and text size in the Aa panel) */
html.watching #search-button,
html.watching #edition-selector-block,
html.watching .aa-textsize {
    opacity: 0.3;
    pointer-events: none;
}
/* While watching, the footer goes too: it holds only the audio (the voice and the player); the video has its own controls */
html.watching #myFooterContainer {
    display: none;
}

/* Above the video: which video */
#video-picker {
    margin: 30px 0 0;           /* at the video's left edge, which is the text column's */
    align-items: center;
}
#video-picker-button {             /* styled like the toolbar above it: its gray, corners and raised shadow, */
    display: flex;                 /* and its height, 45px, as on the phone site */
    align-items: center;
    gap: 10px;                     /* name to arrow */
    height: 45px;
    padding: 0 16px;               /* the same space on both sides; a little more, for the taller button */
    border-radius: 6px;
    background-color: #f1f3f4;
    box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    white-space: nowrap;
}
#video-picker-button:hover,
#video-menu.open #video-picker-button {
    background-color: #e6e8ea;
}
#video-picker-button .menu-label {
    font-size: 15px;
    color: #222;
}
#video-picker-button .caret {
    font-size: 11px;
    margin-left: 0;
    padding-right: 0;
}
/* A list to pick from, the current one with a check mark */
.choice-list {
    display: flex;
    flex-direction: column;
}
.choice-list button {
    display: flex;
    align-items: center;
    height: 38px;
    padding: 0 20px 0 12px;
    border: none;
    border-radius: 6px;
    background: none;
    font-family: inherit;
    font-size: 15px;
    color: #333;
    text-align: left;
    cursor: pointer;
}
.choice-list button:hover {
    background-color: #eef3f6;
}
.choice-list button.on {
    color: #00597a;
    font-weight: 500;
}
.choice-list button::before {
    content: "";
    flex: none;
    width: 24px;                     /* room for the check mark on every row, so the names line up */
    font-size: 16px;
}
.choice-list button.on::before {
    content: "\2713";               /* check mark, left of the current choice */
}

/* The tagline and translator credit in the footer, off for now (the HTML is commented out in template.html)
.bottom-title{
    padding-top: 1px;
    font-size: 15px;
    text-align: right;
    white-space: nowrap;
    line-height: 20px;
    margin-left: auto;
}

.bottom-title-line1{
    color: #000;
}

.bottom-title-line2{
    color: #767676;
    margin-top: 3px;
}
*/

select optgroup{
    font-size: 1.3em;
    color: #222;
}

#added-height-for-search-scroll{
    height:900px;
    width: 1px;
}

    .header-1{
        position: fixed;
        height: 4px;
        width: 100%;
        background-color: #00aeef ;
        z-index: 1000;
    }

    .header-2{
        margin: 0 auto;
        width: min(740px, 100% - 32px);
        padding:28px 0px 4px 0px;         /* room under the top blue line, and a little more above the title and toolbar (it scrolls away; the pinned bar keeps its size) */

        display: flex ;
        flex-direction: row;        
        flex-wrap: wrap;
        row-gap: 6px;
        column-gap: 24px;
        justify-content: space-between;   /* spread across the column: the first link over QURAN, the last at the toolbar's right end */
        /* (Tried: grouped on the right, and grouped in the middle: neither lines up with the page's edges.) */
    }
    /* A window too narrow for one row: the links wrap, centered (spread out, a short last row would sit at the two edges) */
    @media (max-width: 700px) {      /* about where the nine links stop fitting on one row */
        .header-2{
            justify-content: center;
        }
    }

    .top-link{
        font-size: 11.5pt;
        color: #555; 
        text-decoration: none ;
    }

    .top-link:hover {
        text-decoration: underline ;
    }

    .header-3{
        margin: 0 auto;
        width: min(740px, 100% - 32px);
        padding-top: 20px;     
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;            /* toolbar drops below the title when the window is narrow */
        column-gap: 15px;           /* space between title and toolbar */
        align-items: center;
        background-color: #ffffff;
    }

    /* The title and toolbar stay at the top of the window when the page scrolls, so search, Aa, play and
       the arrows are always in reach. Its top space scrolls away: it stops just under the thin blue line. */
    .header-3{
        position: sticky;
        top: -10px;                 /* 10px of its top space stays, above the title and toolbar */
        z-index: 900;
        padding-bottom: 12px;
    }
    /* Once it is pinned (the script adds "bar-pinned" to the page): a light blue-gray bar across the whole
       window, a thin line under it, and the toolbar in white on it */
    .header-3::before{
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 100vw;
        transform: translateX(-50%);
        background-color: inherit;
        z-index: -1;
    }
    html.bar-pinned .header-3{
        background-color: #f4f8fb;
    }
    html.bar-pinned .header-3::before{
        border-bottom: 1px solid #c9d6e0;
    }
    html.bar-pinned .toolbar{
        background-color: #ffffff;
        box-shadow: 0 1px 3px rgba(0, 60, 100, 0.12);
    }

    #qTitle{
        font-family:Georgia, "Times New Roman", Times, serif;
        font-size:34pt;
        font-weight:normal;        
        margin:0 0 0 -5px;         /* an h1: none of the usual heading space above and below */
        color:#333;
    }
    
    #qLetter{
        font-size:1.3em;
    }

    #title-link{                   /* the title takes you back to chapter 1, as on the phone site; it still looks like the title */
        color:inherit;
        text-decoration:none;
    }

    .toolbar{
        height:45px;
        margin-top: 12px;
        background-color: #f1f3f4;
        flex: 1 1 480px;            /* grow to fill; wrap below the title if less than ~480px is left */
        border-radius: 6px;         /* softened corners, like the menus and footer buttons */

        display: flex;
        flex-direction: row;
        align-items: center;
        box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);   /* lifts it off the page */
    }

    .top-buttons{
        padding: 0 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-grow: 100;
    }

#youtube-player{
    margin-top: 20px;           /* close under the video button (#video-picker): the button and its video, one unit */
    border-radius: 6px;         /* rounded like the toolbar and the video button */
    margin-left: auto;
    margin-right: auto;
    display: block;
    width: 100%;                /* the full width of the text column, lined up with the toolbar and the Next link */
    height: auto;
    aspect-ratio: 16 / 9;
}

/*---------------------------------------------------------------------------------------------------*/

/* NProgress, (c) 2013, 2014 Rico Sta. Cruz - http://ricostacruz.com/nprogress
 * @license MIT */

/* Make clicks pass-through */
#nprogress {
    pointer-events: none;
  }
  
  #nprogress .bar {
    background:#007BBC;
  
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
  
    width: 100%;
    height: 4px;
  }
  
  /* The tip at the right end of the bar */
  #nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    opacity: 1.0;
  
    -webkit-transform: rotate(3deg) translate(0px, -4px);
        -ms-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
  }
  


/*--------------------------------------------------------------------------------------------------*/

.arrows-lower-spacer {
    height: 150px;
}

#arrows-lower{
    padding-top: 20px;          /* apart from the last verse (which has its own space after it): the chapter has ended, this is what comes next */
    display: flex;
    flex-direction: column;
    align-items: flex-end;      /* the Next link on the right */
}

/* At the end of the chapter: "Next: Chapter 3, Family of Imran ›" */
.next-chapter {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;                /* about one space: "Next: Chapter 2" reads as one phrase */
    padding: 6px 2px;
    font-size: 17px;
    color: #00759A;             /* the site's blue (the video button when on): one color, so the whole line reads as one link */
    text-decoration: none;
}
.next-chapter:hover .next-label,
.next-chapter:hover #next-chapter-name {
    text-decoration: underline;
}
.next-arrow {                    /* a drawn chevron, a little bolder than the text, about its height */
    width: 9px;
    height: 15px;
    margin-left: 5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.noselect {
    -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
       -khtml-user-select: none; /* Konqueror HTML */
         -moz-user-select: none; /* Firefox */
          -ms-user-select: none; /* Internet Explorer/Edge */
              user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome and Opera */
  }
/* ------------------------------------------------------------------ */

/*--------------------------------------------------------------------------------------------------*/
/* The three short menus: the Divine Name (toolbar), the voice (footer), and the video (above the video).
   Each is a heading, then a list to pick from, the current one with a check mark (.choice-list). */

.menu-wrap {
    position: relative;
}
.menu-list {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin: 6px 0 0 0;
    width: max-content;              /* as wide as the longest name needs */
    min-width: 100%;                 /* and at least as wide as its button, so the two line up */
    box-sizing: border-box;
    padding: 12px 6px 6px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    z-index: 2000;
    text-align: left;
    color: #333;
    cursor: default;
}
.menu-wrap.open .menu-list {
    display: block;
}
.choice-head {
    font-size: 13px;
    color: #5f6f7a;
    padding: 0 12px;                 /* at the left edge, over the check marks */
    margin: 0 0 4px;
}


/*-------- The Aa button and panel: text size and night mode --------*/
#aa-menu {
    position: relative;
}
#aa-button .aa-text {
    display: inline-block;
    width: 26px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    vertical-align: middle;
    font-family: Georgia, "Times New Roman", Times, serif;   /* a serif "Aa" reads as "text" */
    font-size: 19px;
    color: #555;
    pointer-events: none;
}
#aa-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 14px;
    z-index: 50;
    width: 290px;                  /* the same as the Read & Listen / Watch menu beside it */
    box-sizing: border-box;
    padding: 20px 20px 4px;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    color: #333;
    cursor: default;
}
#aa-menu.open #aa-panel {
    display: block;
}
.aa-head {
    font-size: 13px;
    color: #5f6f7a;
    margin: 0 0 8px;
}
.aa-head b {
    font-weight: 500;
    color: #333;
}
/* A- A+ and Night mode: rows of buttons that look like the choices in the Read & Listen / Watch menu */
.aa-stepper {
    display: flex;
    margin-bottom: 16px;
    border: 1px solid #9aa8b4;
    border-radius: 6px;
    overflow: hidden;
}
.aa-stepper button {
    flex: 1;
    height: 34px;
    padding: 0;
    border: none;
    background-color: #fff;
    color: #333;
    font-family: Georgia, "Times New Roman", Times, serif;
    cursor: pointer;
}
#text-smaller {
    font-size: 15px;
}
#text-larger {
    font-size: 21px;
}
.aa-stepper button + button {
    border-left: 1px solid #9aa8b4;
}
.aa-stepper button:hover:not(:disabled) {
    background-color: #eef3f6;
}
.aa-stepper button:disabled {
    color: #b5bec6;                /* the smallest or largest size is reached */
    cursor: default;
}
.aa-seg {
    display: flex;
    margin-bottom: 16px;
    border: 1px solid #9aa8b4;
    border-radius: 6px;
    overflow: hidden;
}
.aa-seg button {
    flex: 1;
    height: 34px;
    padding: 0;
    border: none;
    background-color: #fff;
    color: #333;
    font-family: inherit;
    font-size: 14px;
    cursor: pointer;
}
.aa-seg button + button {
    border-left: 1px solid #9aa8b4;
}
.aa-seg button:hover:not(.on) {
    background-color: #eef3f6;
}
.aa-seg button.on {
    background-color: #dbeaf1;
    color: #00597a;
    font-weight: 500;
}

/*-------- Night mode (the class "night" on the page, set from the Aa panel) --------*/
html.night {
    color-scheme: dark;            /* the browser's own parts (scrollbars, the chapter list, the audio player) turn dark too */
}
html.night body,
html.night .header-3 {
    background-color: #15191d;
}
html.night.bar-pinned .header-3 {
    background-color: #1c2229;      /* a little lighter than the page, with a hint of blue */
}
html.night.bar-pinned .header-3::before {
    border-bottom-color: #343d45;
}
html.night.bar-pinned .toolbar {
    background-color: #262c32;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
html.night .header-1 {
    background-color: #0b8fc4;
}
html.night .top-link {
    color: #aab4bd;
}
html.night #qTitle {
    color: #d6dbe0;
}
html.night .toolbar {
    background-color: #262c32;
    box-shadow: 0 1px 6px rgba(0,0,0,0.6);
}
html.night #chapter-selector-overlay {
    border-right-color: #3a434b;
}
html.night #edition-selector-block,
html.night #video-block {
    border-left-color: #3a434b;
}
html.night .selector-block:hover {
    background-color: rgba(255,255,255,0.06);
}
html.night .icon-top,
html.night #aa-button .aa-text {
    color: #c0c8cf;
}
html.night .icon-top-wrapper:hover {
    background-color: #343b42;
}
html.night #chNumber {
    color: #c9849a;              /* the maroon surah number, as a muted rose that shows on dark */
}
html.night #chNameEn,
html.night #edition-selector-block .menu-label {
    color: #e6e9ec;
}
html.night #chNameAr {
    color: #aab4bd;
}
html.night .caret {
    color: #8f9aa3;
}
html.night .menu-list {
    background-color: #22282e;
    border-color: #3a434b;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    color: #d6dbe0;
}
html.night .choice-head {
    color: #8f9aa3;
}
html.night select optgroup,
html.night select option {
    color: #d6dbe0;              /* the surah list (its day color, #222, would be invisible on dark) */
    background-color: #22282e;
}
html.night #quran-text p {
    color: #c9cfd5;              /* a little softer than white: light text on dark looks bolder and brighter than it is */
}
html.night #quran-text p.verse-flash {
    background-color: #4a4220;      /* a dark golden tone, like the search highlight at night (the text keeps its color: it reads well on it) */
}
html.night #quran-text p span {
    color: #8aa6c4;              /* verse numbers: a dusky blue, quieter in the dark */
}
html.night .next-chapter {
    color: #6cc0dc;             /* a lighter version of the site's blue, readable on dark */
}
html.night #myFooterContainer {
    background-color: #1b2025;
    border-top-color: #2c343b;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
}
html.night #video-button svg {
    fill: #aab4bd;
}
html.night #video-button.on {
    background-color: #2b7d9c;
}
html.night #video-button.on svg {
    fill: #fff;
}
html.night #video-picker-button {
    background-color: #2c3339;       /* a little lighter than the toolbar: on its own, it needs more to stand out */
    border: 1px solid #45505a;       /* at night a thin light edge shows where a shadow can't */
    box-shadow: none;
}
html.night #video-picker-button:hover,
html.night #video-menu.open #video-picker-button {
    background-color: #38414a;
    border-color: #56626d;
}
html.night #video-picker-button .menu-label {
    color: #d6dbe0;
}
html.night #voice-button {
    background-color: #2a3138;
}
/* Chrome's player at night: the voice button's color beside it (its icons are already light, from color-scheme: dark).
   Chrome, Edge and Android only; other browsers keep their own dark player. */
html.night #myAudioPlayer::-webkit-media-controls-panel {
    background-color: #2a3138;
}
html.night #voice-button:hover,
html.night #voice-menu.open #voice-button {
    background-color: #343c44;
}
html.night #voice-button .voice-icon {
    fill: #aab4bd;
}
html.night #voice-button .menu-label {
    color: #d6dbe0;
}
html.night .choice-list button {
    color: #d6dbe0;
}
html.night .choice-list button:hover {
    background-color: #2c343b;
}
html.night .choice-list button.on {
    color: #8fc3dc;
}
/* (off for now, with the footer tagline)
html.night .bottom-title-line1 {
    color: #d6dbe0;
}
html.night .bottom-title-line2 {
    color: #8f9aa3;
}
*/
html.night #aa-panel {
    background-color: #22282e;
    border-color: #3a434b;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
    color: #d6dbe0;
}
html.night .aa-head {
    color: #8f9aa3;
}
html.night .aa-head b {
    color: #d6dbe0;
}
html.night .aa-stepper {
    border-color: #6b7884;
}
html.night .aa-stepper button {
    background-color: #22282e;
    color: #d6dbe0;
}
html.night .aa-stepper button + button {
    border-left-color: #6b7884;
}
html.night .aa-stepper button:hover:not(:disabled) {
    background-color: #2c343b;
}
html.night .aa-stepper button:disabled {
    color: #59636c;
}
html.night .aa-seg {
    border-color: #6b7884;
}
html.night .aa-seg button {
    background-color: #22282e;
    color: #d6dbe0;
}
html.night .aa-seg button + button {
    border-left-color: #6b7884;
}
html.night .aa-seg button:hover:not(.on) {
    background-color: #2c343b;
}
html.night .aa-seg button.on {
    background-color: #3a444e;
    color: #fff;
}

/* Keyboard focus: the toolbar icons, PREV/NEXT and search results (reader.js and search.js make them buttons),
   and every real button (search clear/close, the Aa panel, the edition menu) */
[role="button"]:focus-visible,
button:focus-visible {
    outline: 2px solid #3a8fd6;
    outline-offset: 2px;
}
button:focus-visible {
    outline-offset: -2px;               /* inside: the Aa panel and the menu clip anything outside their buttons */
}
/* The Next link at the end of the chapter */
.next-chapter:focus-visible {
    outline: 2px solid #3a8fd6;
    outline-offset: 2px;
    border-radius: 4px;
}
/* The chapter list is an invisible dropdown over the styled box (so the box shows): when the keyboard
   reaches the list, the box shows the focus instead */
#chapter-selector-block:has(#chapter-selector-dropdown:focus-visible) {
    outline: 2px solid #3a8fd6;
    outline-offset: -2px;
}

/* When the keyboard moves to something near the top or bottom of the window, the browser scrolls it into view:
   keep it clear of the title bar pinned at the top and the audio footer fixed at the bottom */
html {
    scroll-padding-top: 90px;
    scroll-padding-bottom: 100px;
}
html.watching {
    scroll-padding-bottom: 20px;        /* no footer while watching */
}

/* The message when a chapter couldn't be loaded (reader.js): a dark pill just under the toolbar (reader.js sets top) */
#chapter-error {
    display: none;
    position: fixed;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    z-index: 1001;
    width: max-content;
    max-width: 90%;
    padding: 10px 18px;
    border-radius: 21px;
    background-color: #333;
    color: #fff;
    font-size: 15px;
    line-height: 1.4;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.night #chapter-error {
    background-color: #2a3138;
    color: #d6dbe0;
    border: 1px solid #3d4852;
}

/* Text for screen readers and search engines only: in the QURAN heading, the chapter shown (reader.js and the page builder fill it) */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}