@charset "utf-8";

/* Title font: the same file on every device, so QURAN and "Chapter 1" line up everywhere */
@font-face {
    font-family: "Gelasio Title";
    src: url("../fonts/gelasio-title.woff2") format("woff2");
    font-display: swap;
}

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

/* The width of the text column, in one place: 20 px from each screen edge, and never wider than 700 px.
   The text (#myContent), the footer row (the voice button and player), the header's menu and search icons,
   and the search page all follow it, so their edges line up at every screen width. */
:root {
    --content-w: min(700px, 100% - 40px);
}

#myContent {
    padding:44px 0px 0px 0px;
    margin: 0 auto;
    width: var(--content-w);
}

.select {
    font-size: 0pt; /* needed by js that hides/unhides delector */
}

.selector {
    display: none;
    -webkit-appearance: menulist-text;          /* necessary for some browsers */
}

/* At the end of the chapter: "Next: The Heifer ›", on the right, in the site's blue (the same as the desktop site) */
#arrows-lower {
    display: flex !important;           /* (reader.js shows it as a block; this keeps the row below) */
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding-top: 6px;                   /* after the last verse (which has its own space below it) */
}
html.watching #arrows-lower {
    padding-top: 20px;                  /* under the video: apart from it, so the row doesn't look attached */
}
#arrows-lower .next-chapter {
    margin-left: auto;                  /* Next on the right (the video selector is above the video) */
}
#arrows-lower .arrows-lower-spacer {
    flex-basis: 100%;                   /* (the room at the bottom, under the row) */
}
.next-chapter {
    display: inline-flex;
    align-items: center;
    gap: 0.28em;
    padding: 8px 2px;                   /* a comfortable tap target */
    font-size: 17px;                    /* (#arrows-lower has font-size 0, see .select) */
    color: #00759A;
    text-decoration: none;
}
.next-chapter:hover,
.next-chapter:focus {
    color: #00759A;
    text-decoration: none;
    outline: none;                      /* no ring after a tap: the link stays focused, since the next chapter loads
                                           on the same page (keyboard users still get the ring below) */
}
.next-arrow {
    width: 9px;
    height: 15px;
    margin-left: 5px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.next-chapter:focus-visible {
    outline: 2px solid #3a8fd6;
    outline-offset: 2px;
    border-radius: 4px;
}

/* The old Next button, in a page a phone still has in its cache (before the pages were rebuilt): keep its look */
.goto-button-lower {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 21px;
    background: #e9ebee;
    color: #222;
    font-size: 15px;
    cursor: pointer;
}
.goto-button-lower svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    vertical-align: -2px;
    margin-left: 4px;
}

/*--- Header  ------------------------*/
#myHeader {
    background-color: #3a569e;
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    text-align: center;

    /* One row: menu at the left edge, search at the right edge, and "‹ title ›" together in the middle.
       The menu and search icons line up with the edges of the text below (--content-w): each icon sits 12 px
       inside its 44 px button, so the row's padding is the text's side margin less 12 px (8 px on a phone,
       which puts the icons 20 px from the screen edges). */
    display: flex;
    align-items: stretch;
    height: 56px;               /* fixed: the same height on every screen and chapter (the usual app-bar height) */
    padding: 0 max(0px, calc((100% - var(--content-w)) / 2 - 12px));

    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    z-index: 1001;              /* one above the footer (1000), so the main menu opens over the player, not under it */
}

#arrow-left  { margin-left: auto; }     /* the arrows sit against the title; the free space goes to the outer edges */
#arrow-right { margin-right: auto; }

#chapter-select-overlay {
    font-size:17px;             /* the English name; close to the verse text (about 18 px) */
    width: 100%;                /* as wide as the title block (.dropdown-block, below) */
    padding: 0 7px;
    display: flex;              /* the two lines, centered up and down in the header's height */
    flex-direction: column;
    justify-content: center;
    margin: 0px 0px 0px 0px;
    border-left: 1px solid transparent;     /* (were #bbbbbb) the dividers are drawn below, softer */
    border-right: 1px solid transparent;
    position: relative;
    cursor: pointer;
}

/* The dividers on each side of the title: full height, in a soft white that takes on the header's blue */
#chapter-select-overlay::before,
#chapter-select-overlay::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(255,255,255,.3);
    pointer-events: none;
}
#chapter-select-overlay::before { left: -1px; }
#chapter-select-overlay::after  { right: -1px; }

#chapter-select-overlay > div {     /* the Arabic line: the number and the caret are placed against it */
    position: relative;
}

#chapter-name-e {
    white-space: nowrap;        /* never a second line (that would make the header taller); a name too long ends in "..." */
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 130%;
    color: #ffffff;
}

#chapter-name-a {
    line-height: 130%;
    font-size:17px;             /* the same size as the English name */
    color: #E4E9F5;             /* (was #DCE3F2) a touch brighter, still softer than the white English name */
}

.dropdown-block{                /* the title block: 178 px (just enough for "The Compassionate"), never squeezed */
    position: relative;
    display: flex;
    flex: 0 0 178px;
}

#chapter-selector {
    width: 100%;                /* covers the whole title block */
    height: 100%;               /* (was 59 px, a little taller than the header) */
    top: 0;
    right: 0;
    cursor: pointer;
    line-height: 55px; /* Safari Browser Needs This, to control height of selector */
    position:absolute;
    padding: 0;
}

.icon-spacer-1,
.icon-spacer-2 {
    display: none;              /* not needed: the header row spaces the buttons itself */
}

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

.icon-title{
    width: 23px;
    height: 23px;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    color: #444;              /* icons and "Aa": one shade (was #555), a step softer than the words (#222) */

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;

    pointer-events: none;

}

.icon-a-e, .icon-a-e:hover .icon-a-e:active, .icon-a-e:visited, .icon-a-e:link  {
    color:#940302 ;
    font-size: 29px;
    letter-spacing: -2px;
    margin-left: 15px;
    bottom: 10px;
    position: relative;
    top: -6px;
    cursor: pointer;
    text-decoration: none;
}

.icon-top{
    vertical-align: middle;
    cursor: pointer;
    width: 20px;
    height: 20px;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
    color: #eeeeee;

    user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;

    pointer-events: none;
    z-index: 1000;
}

.icon-top-wrapper{             /* each header button: a 44 px tap target, the full height of the header */
    flex: 0 1 44px;
    min-width: 30px;            /* (narrow phones: a little smaller rather than overflowing) */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.dropdown.icon-top-wrapper > [data-toggle] {    /* the menu button's inner part fills its button */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.caret-gray{                   /* the small carets on the gray buttons (God, voice, video) */
    color:#3a569e;              /* (was #666666) the header's blue: a small touch of the site's color */
    font-size:13px;             /* (was 11) */
    margin-left: 2px;
    vertical-align: middle;
}

.caret-orange{
    color: #FFCA28;             /* (was #ff9607) a warm yellow-amber, easy to see on the blue */
    font-size:15px;             /* (was 14) in proportion to the 17 px names */
    position: absolute;
    right:2px;                  /* (from the Arabic line's end: 9 px from the block's edge, to keep the gap to al-Muzzammil) */
    top:1px;
}

#chapter-number {
    color: #D6DEEF;             /* (was #e8e8e8) a touch quieter than the Arabic name: a label beside it, not part of it */
    font-size:13px;             /* the caret's size, so the two balance */
    position: absolute;
    left:4px;                   /* (from the Arabic line's start: 11 px from the block's edge) as close to the Arabic name as the longest one (al-Muzzammil) allows */
    top:3px;
}

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

#title-line-1 {
    margin: 0px;
    padding: 0px;
    margin-top:25px;
    margin-bottom: 5px;
    
    color:#222;
    display: flex;
    align-items: center;
    gap:2rem;
}

/* QURAN and "Chapter 1" on the left; the toolbar on the right, centered beside both lines,
   whatever size the phone draws the title at */
#title-block {
  position: relative;
}
#title-block #title-tools {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(calc(-50% + 4px));   /* centered, plus 4px: the big QURAN makes true center look high */
}
#title-tools {               /* pages not yet rebuilt (no #title-block): the old place, level with QURAN */
  margin-left: auto;
  position: relative;
  top: 8px;
}

#title-quran {
    font-family: "Gelasio Title", Georgia, serif;
    font-size: 40px;
    font-variant: small-caps;
    margin: 0px;
    padding: 0px;
    color:#444;
    text-decoration: none;   /* no underline on hover */
    outline: none;           /* no blue box after tapping */
    margin-left: -2px;       /* the big round Q needs to reach slightly further left to look aligned */
    letter-spacing: 0.5px;   /* keeps QURAN's right end level with "Chapter 1" */
}

#title-line-2 {
    font-family: "Gelasio Title", Georgia, serif;
    letter-spacing: 0.014em;
    font-variant-numeric: lining-nums;   /* full-height numbers */
    font-size: 26px;
    font-weight: normal;                 /* (it is the page's h1, which is bold by default) */
    font-variant-caps: small-caps;       /* only the caps, so the numbers setting stays */
    margin: -18px 0px 20px 0px;      /* close under QURAN, as one title (was -14px); clear space below it, before the text (was 10px) */
    padding: 0 0 0 1px;              /* (was 0) a hair to the right, to line up under the big round Q */
    color:#333;
}

#title-line-2 .title-number {
    font-size: 0.75em;          /* (was 1em) the digits a touch taller than the small caps: an even line, without looking too light */
}



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

#quran-text p {
    font-size: 1.3em;
    margin: 0em 0em 0.50em 0em;
    line-height: 1.55;
    color:#212121 ;
}

#quran-text p span {
    color: #2F5B92;
    font-size: 85%;
    margin-right: 0.15em;      /* a little room between the verse number and the text */
}

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

/* Bottom bar: the voice button and the player together, on a white bar with a thin line and a soft shadow,
   so it stands apart from the text scrolling behind it. The player keeps its own look. */
#myFooter {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 8px 0 4px 0;               /* (the row inside sets its own width: the text's) */
    background-color: #ffffff;
    border-top: 1px solid #c4c4c4;              /* a crisp neutral gray line, the same as the desktop footer (was #d3d6dc) */
    box-shadow: 0 -2px 8px rgba(0,0,0,0.09);     /* and its soft neutral shadow (was 0 -2px 6px 10%) */
    text-align: center;
    vertical-align: middle;
    z-index: 1000;
}

#myAudioPlayer {
    visibility: visible;
    width: 85%;
    margin-right: auto;
    margin-left: auto;
    display: block;
}

#bottom-strip {
    height: 0.5em
}

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

/* (The widths of the text and the footer row are set once, by --content-w at the top; the verses are
   the same size on every screen, from #quran-text p above.) */


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

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

/* Make clicks pass-through */
/* Make clicks pass-through */
#nprogress {
    pointer-events: none;
  }
  
  #nprogress .bar {
    background:#D3EFFF;
  
    position: fixed;
    z-index: 1031;
    top: 0;
    left: 0;
  
    width: 100%;
    height: 2px;
  }
  
  /* Fancy blur effect */
  #nprogress .peg {
    display: block;
    position: absolute;
    right: 0px;
    width: 100px;
    height: 100%;
    /* box-shadow: 0 0 10px #D3EFFF, 0 0 5px #D3EFFF; */
    opacity: 1.0;
  
    -webkit-transform: rotate(3deg) translate(0px, -4px);
        -ms-transform: rotate(3deg) translate(0px, -4px);
            transform: rotate(3deg) translate(0px, -4px);
  }
  
  /* Remove these to get rid of the spinner */
  #nprogress .spinner {
    display: block;
    position: fixed;
    z-index: 1031;
    top: 15px;
    right: 15px;
  }
  
  #nprogress .spinner-icon {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
  
    border: solid 2px transparent;
    border-top-color: #448aff;
    border-left-color: #448aff;
    border-radius: 50%;
  
    -webkit-animation: nprogress-spinner 400ms linear infinite;
            animation: nprogress-spinner 400ms linear infinite;
  }
  
  .nprogress-custom-parent {
    overflow: hidden;
    position: relative;
  }
  
  .nprogress-custom-parent #nprogress .spinner,
  .nprogress-custom-parent #nprogress .bar {
    position: absolute;
  }
  
  @-webkit-keyframes nprogress-spinner {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes nprogress-spinner {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

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

#chapter-selector option {      /* the chapter list (it has no heading) */
    font-size:17px;
    color: #212121;
    line-height: 30px;
}

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

.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 */
  }
/* ------------------------------------------------------------------ */
/*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2018 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 */

/*!
 * Generated using the Bootstrap Customizer (<none>)
 * Config saved to config.json and <none>
 *//*!
 * Bootstrap v3.3.7 (http://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 *//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 
 html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}*:before,*:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}html{font-size:10px;-webkit-tap-highlight-color:rgba(0,0,0,0)}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;line-height:1.42857143;color:#333;background-color:#fff}input,button,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit}a{color:#337ab7;text-decoration:none}a:hover,a:focus{color:#23527c;text-decoration:underline}a:focus{outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}figure{margin:0}img{vertical-align:middle}.img-responsive{display:block;max-width:100%;height:auto}.img-rounded{border-radius:6px}.img-thumbnail{padding:4px;line-height:1.42857143;background-color:#fff;border:1px solid #ddd;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;display:inline-block;max-width:100%;height:auto}.img-circle{border-radius:50%}hr{margin-top:20px;margin-bottom:20px;border:0;border-top:1px solid #eee}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.sr-only-focusable:active,.sr-only-focusable:focus{position:static;width:auto;height:auto;margin:0;overflow:visible;clip:auto}[role="button"]{cursor:pointer}.caret{display:inline-block;width:0;height:0;margin-left:2px;vertical-align:middle;border-top:4px dashed;border-top:4px solid \9;border-right:4px solid transparent;border-left:4px solid transparent}.dropup,.dropdown{position:relative}.dropdown-toggle:focus{outline:0}.dropdown-menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;list-style:none;font-size:14px;text-align:left;background-color:#fff;border:1px solid #ccc;border:1px solid rgba(0,0,0,0.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,0.175);box-shadow:0 6px 12px rgba(0,0,0,0.175);-webkit-background-clip:padding-box;background-clip:padding-box}.dropdown-menu.pull-right{right:0;left:auto}.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5}.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:2.0;color:#333;white-space:nowrap}.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{text-decoration:none;color:#262626;background-color:#f5f5f5}.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#fff;text-decoration:none;outline:0;background-color:#337ab7}.dropdown-menu>.disabled>a,.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{color:#777}.dropdown-menu>.disabled>a:hover,.dropdown-menu>.disabled>a:focus{text-decoration:none;background-color:transparent;background-image:none;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);cursor:not-allowed}.open>.dropdown-menu{display:block}.open>a{outline:0}.dropdown-menu-right{left:auto;right:0}.dropdown-menu-left{left:0;right:auto}.dropdown-header{display:block;padding:3px 20px;font-size:12px;line-height:1.42857143;color:#777;white-space:nowrap}.dropdown-backdrop{position:fixed;left:0;right:0;bottom:0;top:0;z-index:990}.pull-right>.dropdown-menu{right:0;left:auto}.dropup .caret,.navbar-fixed-bottom .dropdown .caret{border-top:0;border-bottom:4px dashed;border-bottom:4px solid \9;content:""}.dropup .dropdown-menu,.navbar-fixed-bottom .dropdown .dropdown-menu{top:auto;bottom:100%;margin-bottom:2px}@media (min-width:768px){.navbar-right .dropdown-menu{left:auto;right:0}.navbar-right .dropdown-menu-left{left:0;right:auto}}.embed-responsive{position:relative;display:block;height:0;padding:0;overflow:hidden}.embed-responsive .embed-responsive-item,.embed-responsive iframe,.embed-responsive embed,.embed-responsive object,.embed-responsive video{position:absolute;top:0;left:0;bottom:0;height:100%;width:100%;border:0}.embed-responsive-16by9{padding-bottom:56.25%}.embed-responsive-4by3{padding-bottom:75%}.well{min-height:20px;padding:19px;margin-bottom:20px;background-color:#f5f5f5;border:1px solid #e3e3e3;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,0.05);box-shadow:inset 0 1px 1px rgba(0,0,0,0.05)}.well blockquote{border-color:#ddd;border-color:rgba(0,0,0,0.15)}.well-lg{padding:24px;border-radius:6px}.well-sm{padding:9px;border-radius:3px}.close{float:right;font-size:21px;font-weight:bold;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2;filter:alpha(opacity=20)}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer;opacity:.5;filter:alpha(opacity=50)}button.close{padding:0;cursor:pointer;background:transparent;border:0;-webkit-appearance:none}.clearfix:before,.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.center-block{display:block;margin-left:auto;margin-right:auto}.pull-right{float:right !important}.pull-left{float:left !important}.hide{display:none !important}.show{display:block !important}.invisible{visibility:hidden}.text-hide{font:0/0 a;color:transparent;text-shadow:none;background-color:transparent;border:0}.hidden{display:none !important}.affix{position:fixed}

.dropdown-menu .divider {
  border-bottom: 1px solid #ddd;
  margin: 6px 0;
  list-style: none;
  height: 0;
  padding: 0;
}

/**********************************************************************************************************************************************/

/* Talal's bootstraps overwerites */

.navbar-nav > li {
    font-size: 16px;
    }
  .dropdown-menu {
      font-size: 18px;
    }


input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: auto;
    padding-left: 10px;
}    

/**********************************************************************************************************************************************/

/* Chapter and edition selectors: the real dropdown sits invisibly on top of the styled box,
   so tapping opens the phone's own picker. (Moved here from the script.) */
select.styled {
    position: relative;
    width: 190px;
    opacity: 0;
    z-index: 5;
}

#footer-row {
    display: flex;
    align-items: center;
    gap: 14px;
    width: var(--content-w);  /* as wide as the text above (#myContent), lined up with its edges */
    margin: 0 auto;
}
#footer-row #myAudioPlayer {
    flex: 1 1 auto;           /* the player takes the rest of the row, to the text's right edge */
    min-width: 0;
    width: auto;
    margin: 0;
}
#footer-row .tool-button {
    height: 46px;
    padding: 0 14px 0 16px;   /* the voice icon and a small arrow: it opens a choice */
    gap: 5px;
    border-radius: 23px;
    background: #f1f3f4;      /* same gray as the audio player */
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* The play button: the site's green (#009a00), and half again as big: the main control (the same as the desktop site).
   Chrome and Android only; Safari (and every browser on iPhone) and Firefox show their usual button.
   (Chrome draws the icon as an image, so a filter tints it. transform: scale() has no effect on this part of Chrome's player.) */
#myAudioPlayer::-webkit-media-controls-play-button {
    filter: brightness(0) invert(38%) sepia(96%) saturate(1172%) hue-rotate(90deg) brightness(85%) contrast(109%);
    zoom: 1.5;
}
/* No volume button in the player: phones have their own volume buttons, and the progress bar gets the room.
   Chrome and Android only; elsewhere the button simply stays. */
#myAudioPlayer::-webkit-media-controls-mute-button,
#myAudioPlayer::-webkit-media-controls-volume-slider,
#myAudioPlayer::-webkit-media-controls-volume-control-container {
    display: none;
}
#footer-row .icon-title {
    width: 24px;
    height: 24px;
}
#footer-row .tool-button .caret-gray {
    font-size: 13px;            /* (was 10) easier to see on a phone */
    position: relative;
    top: -2px;                  /* level with the head and the sound waves, the icon's upper part, rather than its full height */
    margin-left: 0;
}
#footer-row .dropdown-menu {
    margin-bottom: 8px;
    text-align: left;
}

/* Narrow phones (400px or less): the voice button, the gap and the play button give room back to the
   player, so its progress bar keeps a useful length */
@media (max-width: 400px) {
    #footer-row {
        gap: 8px;
    }
    #footer-row .tool-button {
        padding: 0 8px 0 10px;
        gap: 2px;
    }
    #myAudioPlayer::-webkit-media-controls-play-button {
        zoom: 1.2;
    }
}

/* Main menu: never taller than the screen; on short screens (phone held sideways) it scrolls */
#myHeader .dropdown-menu {
    max-height: calc(100vh - 50px);
    max-height: calc(100dvh - 50px);   /* the height actually visible, without the phone browser's address bar (older browsers keep the line above) */
    overflow-y: auto;
}


/* (Header buttons respond to taps anywhere in their 44 px x full-height box: each button is that box now,
   so the invisible enlarged tap areas that were here aren't needed.) */


/* Toolbar: God/Allah and text size as two soft gray rounded buttons, each opening a small menu.
   Same look as the voice button and the player at the bottom. */
#title-tools {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 42px;           /* was 38px */
                            /* (placed in #title-block, above; the menus open under it, lined up with its right edge) */
    background: #f1f3f4;    /* one small bar: God/Allah | Aa | video, styled like the desktop toolbar: its gray, */
    border-radius: 6px;     /* corners and raised shadow (was #e9ebee with a soft 0 1px 2px shadow) */
    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);
}
#title-tools > .dropdown {
    position: static;
    display: flex;
}
#title-tools .tool-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    cursor: pointer;
}
#title-tools > * + * > .tool-button {
    border-left: 1px solid #c6cacf;   /* the thin line between the parts: clearly visible, still light (was #dadde1) */
}
#title-tools > :first-child > .tool-button { border-radius: 6px 0 0 6px; }
#title-tools > :last-child > .tool-button { border-radius: 0 6px 6px 0; }
#title-tools .tool-button:active {
    background: rgba(0,0,0,0.06);     /* a touch shows on the part tapped */
}
#title-tools .tool-size .tool-button {
    width: 44px;              /* the same width as the video button beside it */
}
#title-tools > .tool-video {
    display: flex;
}
#title-tools .tool-video .tool-button {
    width: 44px;
}
#video-button svg {
    width: 22px;
    height: 22px;
    fill: #444;               /* the same shade as the other icons and "Aa" */
}
#video-button.on {
    background: #00759A;              /* lit while the video shows: the way back to the text */
}
#video-button.on svg {
    fill: #fff;
}

/*-------- Watching (the class "watching" on the page, reader.js): the video in place of the text --------*/
html.watching #myFooter {
    display: none;                    /* the footer is the audio: the video has its own controls */
}
html.watching #title-tools .tool-edition,
html.watching .aa-textsize,
html.watching #search-button {
    opacity: 0.3;                     /* only for the text: greyed out while the video shows */
    pointer-events: none;
}
#video-picker {
    align-items: center;
    gap: 8px;
    margin-top: 12px;                   /* above the video: with the 8px under "Chapter 1", 20px, as the verses have */
}

#video-picker .picker-button {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 42px;             /* the toolbar's height: an easy tap target (was 36px) */
    padding: 0 14px;
    border-radius: 6px;
    background: #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);
    font-size: 15px;
    color: #222;
    cursor: pointer;
}
#video-picker .caret-gray {
    font-size: 13px;            /* (was 10) */
    margin-left: 0;
}
#video-picker .dropdown-menu {
    margin-top: 6px;
    min-width: 140px;
}
#video-picker .dropdown-menu > li > a {
    position: relative;
    padding-left: 34px;
    padding-right: 18px;
}
#video-picker .dropdown-menu > li > a.current-choice::before {
    content: "\2713";
    position: absolute;
    left: 12px;
    color: #3a569e;
    font-weight: bold;
}
#youtube-player {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    margin-top: 12px;               /* under the video selector (#video-picker), close to it: it chooses this video */
    border: 0;
    border-radius: 6px;             /* rounded like the toolbar and the buttons */
}
/* God/Allah: just wide enough for "Allah" and the arrow, the same width for "God" (so the toolbar doesn't change size).
   (Was a fixed 72px.) */
#title-tools .tool-edition .tool-button {
    padding: 0 9px 0 11px;
    gap: 3px;                 /* the arrow close to the word */
    white-space: nowrap;
}
#title-tools #edition-text {
    font-size: 15px;
    color: #222;
    position: relative;
    top: 1px;      /* nudge: use 1px if the word looks too high, -1px if it looks too low */
    display: inline-grid;     /* as wide as "Allah" (below), whichever word shows */
}
#title-tools #edition-text::after {
    content: "Allah";         /* unseen, with no height: it only sets the width */
    visibility: hidden;
    height: 0;
    overflow: hidden;
}
#title-tools .tool-edition .caret-gray {
    position: relative;
    top: 1px;      /* same nudge as the word, so they stay lined up */
    margin-left: 0;
    font-size: 13px;            /* (was 10) */
}
#title-tools .icon-title {
    width: 22px;
    height: 22px;
}
#title-tools .dropdown-menu {
    left: auto;
    right: -1px;
    top: 100%;
    margin-top: 4px;
    min-width: 150px;
}
#title-tools .dropdown-menu .dropdown-header,
#footer-row .dropdown-menu .dropdown-header {
    font-size: 14px;
    padding: 4px 16px 6px 16px;
    color: #4f5b66;           /* was #777 (barely 4.5:1): a darker blue-gray, easy to read, still quieter than the choices */
    font-weight: 500;
}
/* Room on the left for a checkmark; the current choice gets one */
#title-tools .dropdown-menu > li > a,
#footer-row .dropdown-menu > li > a {
    position: relative;
    padding-left: 34px;
    padding-right: 18px;
}
#title-tools .dropdown-menu > li > a.current-choice::before,
#footer-row .dropdown-menu > li > a.current-choice::before {
    content: "\2713";
    position: absolute;
    left: 12px;
    color: #3a569e;           /* the header blue */
    font-weight: bold;
}



/* Very narrow screens (under 320 px): a more compact app bar */
@media (max-width: 319px) {
    .dropdown-block { flex: 0 1 168px; min-width: 0; }   /* (was 156) room for "The Compassionate" on one line; on the very narrowest
                                                            screens (a folded phone, 280 px) it gives way, rather than push the search button off */
    .icon-top-wrapper { flex-shrink: 20; }               /* ...but only after the buttons have shrunk to their smallest */
    #chapter-select-overlay { font-size: 15px; }
    #chapter-name-a { font-size: 14px; }
    #chapter-number { left: 3px; }       /* nearer the edges: the block is narrower here */
    .caret-orange { right: 3px; }
}

/*-------- The Aa button and panel: text size and night mode (the same as the desktop site) --------*/
#title-tools > #aa-menu {
    display: flex;
}
#aa-button .aa-text {
    font-family: Georgia, "Times New Roman", Times, serif;   /* a serif "Aa" reads as "text" */
    font-size: 19px;
    color: #444;
    pointer-events: none;
    position: relative;
    top: 1px;
}
#aa-panel {
    display: none;
    position: absolute;            /* under the toolbar, lined up with its right edge, like the other menu */
    right: -1px;
    top: 100%;
    margin-top: 4px;
    z-index: 1000;
    width: 250px;
    box-sizing: border-box;
    padding: 14px 16px 16px;
    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;
    text-align: left;
    cursor: default;
}
#aa-menu.open #aa-panel {
    display: block;
}
.aa-head {
    font-size: 14px;
    color: #4f5b66;            /* like the menu titles (God / Allah, Voice): a darker blue-gray (was #6b7c88) */
    font-weight: 500;
    margin: 0 0 8px;
}
.aa-head b {
    font-weight: 500;
    color: #333;
}
.aa-stepper {
    display: flex;
    margin-bottom: 16px;
    border: 1px solid #9aa8b4;     /* a clear edge around A- and A+ */
    border-radius: 6px;
    overflow: hidden;
}
.aa-stepper button {
    flex: 1;
    padding: 8px 0;
    border: none;
    background-color: #f7f9fb;
    color: #333;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
}
#text-smaller {
    font-size: 15px;
}
#text-larger {
    font-size: 18px;
}
.aa-stepper button + button {
    border-left: 1px solid #9aa8b4;
}
.aa-stepper button:disabled {
    color: #b5bec6;                /* the smallest or largest size is reached */
    cursor: default;
}
.aa-seg {
    display: flex;
    border: 1px solid #3a569e;
    border-radius: 6px;
    overflow: hidden;
}
.aa-seg button {
    flex: 1;
    padding: 8px 0;
    border: none;
    background-color: #fff;
    color: #3a569e;                /* the header blue */
    font-family: inherit;
    font-size: 15px;
    cursor: pointer;
}
.aa-seg button + button {
    border-left: 1px solid #3a569e;
}
.aa-seg button.on {
    background-color: #3a569e;
    color: #fff;
}

/* Keyboard focus: a clear ring on the controls, only when moving with the keyboard (not after a tap).
   Blue on the page, white on the blue bars at the top. */
[role="button"]:focus {
    outline: none;
}
[role="button"]:focus-visible,
.dropdown-menu > li > a:focus-visible,
#aa-panel button:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
    border-radius: 6px;
}
#myHeader [role="button"]:focus-visible,
#search-top [role="button"]:focus-visible {
    outline-color: #ffffff;
}
html.night [role="button"]:focus-visible,
html.night .dropdown-menu > li > a:focus-visible,
html.night #aa-panel button:focus-visible {
    outline-color: #8fb0ec;            /* a lighter blue that stands out on the dark page (the night checkmark color) */
}
html.night #myHeader [role="button"]:focus-visible,
html.night #search-top [role="button"]:focus-visible {
    outline-color: #ffffff;
}
/* The chapter picker is an invisible <select> over the title, so its own focus ring can't be seen:
   when it has keyboard focus, the title block shows the same white ring (inside it, clear of the arrows).
   ("using-keyboard" is set by reader.js after the Tab key: browsers count a tapped <select> as keyboard-focused.) */
#chapter-selector:focus {
    outline: none;
}
html.using-keyboard .dropdown-block:has(#chapter-selector:focus) #chapter-select-overlay {
    outline: 3px solid #ffffff;
    outline-offset: -5px;
    border-radius: 8px;
}

/* The message when a chapter couldn't be loaded (reader.js): a dark pill just above the player */
#chapter-error {
    display: none;
    position: fixed;
    left: 50%;
    bottom: 92px;
    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);
}

/*-------- Night mode (the class "night" on the page, set from the Aa panel) --------*/
html.night {
    color-scheme: dark;            /* the browser's own parts (the chapter list, the audio player) turn dark too */
}
html.night body {
    background-color: #15191d;
}
html.night #myHeader {
    background-color: #34496b;     /* the header blue, softer: a steel blue that sits with the dark page */
}
html.night #chapter-select-overlay::before,
html.night #chapter-select-overlay::after {
    background: #526891;            /* as quiet as the night dividers were */
}
html.night #title-quran {
    color: #bcc3ca;                /* (was #d6dbe0) the big word a little softer, as in day mode (#444 over #333) */
}
html.night #title-line-2 {
    color: #d6dbe0;                /* (was #aab4bd) the smaller line a little brighter, so the two look evenly weighted */
}
html.night #title-tools,
html.night #footer-row .tool-button {
    background: #2a3138;
}
html.night #title-tools {
    box-shadow: 0 1px 3px rgba(0,0,0,0.6);     /* the toolbar is raised, as by day; the voice button stays flat, like the player beside it */
}
/* Chrome's player at night: the voice button's color beside it (its icons are already light, from color-scheme: dark).
   Chrome and Android only; Safari (and every browser on iPhone) keeps its own dark player. (The same as the desktop site.) */
html.night #myAudioPlayer::-webkit-media-controls-panel {
    background-color: #2a3138;
}
html.night #title-tools > * + * > .tool-button {
    border-left-color: #4a545d;       /* (was #3a434b) */
}
html.night #video-button svg {
    fill: #d0d6dc;
}
html.night #video-button.on {
    background: #2b7d9c;
}
html.night #video-button.on svg {
    fill: #fff;
}
html.night #video-picker .picker-button {
    background: #2c3339;
    border: 1px solid #45505a;
    box-shadow: none;
    color: #d6dbe0;
}
html.night #video-picker .dropdown-menu > li > a.current-choice::before {
    color: #8fb8e8;
}
html.night #title-tools .tool-button:active {
    background: rgba(255,255,255,0.08);
}
html.night #title-tools #edition-text,
html.night #aa-button .aa-text {
    color: #d6dbe0;
}
html.night .next-chapter,
html.night .next-chapter:hover,
html.night .next-chapter:focus {
    color: #6cc0dc;
}
html.night .icon-title {
    color: #d0d6dc;           /* icons at night: one shade, close to "Aa" and the words */
}
html.night .caret-gray {
    color: #8aa6c4;           /* (was #aab4bd) the night verse-number blue, to match the blue carets by day */
}
html.night .dropdown-menu {
    background-color: #22282e;
    border-color: #3a434b;
    box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
html.night .dropdown-menu > li > a {
    color: #d6dbe0;
}
html.night .dropdown-menu > li > a:hover,
html.night .dropdown-menu > li > a:focus {
    background-color: #2c343b;
    color: #ffffff;
}
html.night .dropdown-menu .dropdown-header,
html.night #title-tools .dropdown-menu .dropdown-header,   /* (as specific as the day rule, so night wins) */
html.night #footer-row .dropdown-menu .dropdown-header {
    color: #c3ccd4;           /* was #a3adb6: brighter, to match the day change */
}
html.night .dropdown-menu .divider {
    border-bottom-color: #3a434b;
    background-color: #3a434b;
}
html.night #title-tools .dropdown-menu > li > a.current-choice::before,
html.night #footer-row .dropdown-menu > li > a.current-choice::before {
    color: #8fb0ec;                /* the checkmark, a lighter blue that shows on dark */
}
html.night select option,
html.night #chapter-selector option {   /* (the chapter list has its own day color, which needs this stronger rule to be replaced) */
    color: #d6dbe0;                /* the chapter list (its day color 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 brighter than it is */
}
html.night #quran-text p span {
    color: #8aa6c4;                /* verse numbers: a dusky blue, quieter in the dark */
}
html.night #myFooter {
    background-color: #1b2025;
    border-top-color: #3d4852;     /* a lighter line, so the footer stands apart from the text behind it */
    box-shadow: 0 -2px 10px rgba(0,0,0,0.5);
}
/* Firefox draws its own audio player, always dark, which nearly disappears on the dark footer at night:
   a thin lighter outline shows its shape. (Firefox only: Chrome's player turns lighter at night by itself.) */
@supports (-moz-appearance: none) {
    html.night #myAudioPlayer {
        outline: 1px solid #5a6874;
        outline-offset: 1px;
        border-radius: 6px;
    }
}
html.night #chapter-error {
    background-color: #2a3138;
    color: #d6dbe0;
    border: 1px solid #3d4852;
}
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: #c3ccd4;            /* like the menu titles at night (was #8f9aa3) */
}
html.night .aa-head b {
    color: #d6dbe0;
}
html.night .aa-stepper {
    border-color: #6b7884;         /* lighter, so the edge shows on dark */
}
html.night .aa-stepper button {
    background-color: #2a3138;
    color: #d6dbe0;
}
html.night .aa-stepper button + button {
    border-left-color: #6b7884;
}
html.night .aa-stepper button:disabled {
    color: #59636c;
}
html.night .aa-seg {
    border-color: #6f8bd0;
}
html.night .aa-seg button {
    background-color: #22282e;
    color: #a9bdf0;
}
html.night .aa-seg button + button {
    border-left-color: #6f8bd0;
}
html.night .aa-seg button.on {
    background-color: #3a569e;
    color: #fff;
}

/* Until reader.js has applied the reader's saved choices (the "prep" script in the page's head) */
html.prep #quran-text,
html.prep #edition-text {
    visibility: hidden;
}