:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  /* light mode colours */
  --bg:#f8faf6; --paper:#ffffff; --ink:#10302a; --muted:#4f645c;
  --em:#0d4a40; --em-deep:#06291f; --gold:#8a6a1d; --gold-b:#d9b45a;
  --line:rgba(16,48,42,.12); --tint:rgba(217,180,90,.2); --bar:rgba(248,250,246,.92);
  --hero-bg:linear-gradient(170deg,#e2eee7 0%,#f1f6f0 58%,#f8faf6 100%);
  --hero-ink:#0c3a31; --hero-gold:#8a6a1d; --sky:#bcd5c7;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%230d4a40' stroke-opacity='.13'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E");
  --logo-bg:transparent; --logo-pad:0px; --logo-ring:transparent; --bis:#105028;
  --card-shadow:0 1px 2px rgba(16,48,42,.05),0 8px 24px rgba(16,48,42,.06);
}
:root[data-theme="dark"]{
  --bg:#071c17; --paper:#0d2b25; --ink:#ece6d3; --muted:#9db3aa;
  --gold:#d9b45a; --line:rgba(217,180,90,.18); --tint:rgba(217,180,90,.14); --bar:rgba(7,28,23,.9);
  --hero-bg:linear-gradient(165deg,#06291f,#0d4a40 62%,#0a3a32);
  --hero-ink:#f4ecd6; --hero-gold:#d9b45a; --sky:#071c17;
  --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23d9b45a' stroke-opacity='.22'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='5'/%3E%3C/g%3E%3C/svg%3E");
  --logo-bg:transparent; --logo-pad:0px; --logo-ring:transparent; --bis:#f0e8d0;
  --card-shadow:none;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);font-size:clamp(16px,calc(16px + (100vw - 1400px) * 0.0045),22px)}
*,*::before,*::after{box-sizing:inherit}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Amiri','Cormorant Garamond',Georgia,serif;font-weight:700;line-height:1.15;margin:0}
a{color:inherit}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--gold-b);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.wrap{width:min(78rem,100% - 2.5rem);margin-inline:auto}

/* top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;border-bottom:1px solid var(--line)}
.top::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bar);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none}
.brand .logo{width:46px;height:46px;flex:none;border-radius:50%;background:var(--logo-bg);padding:var(--logo-pad);border:1.5px solid var(--logo-ring);object-fit:contain}
.brand b{display:block;font-family:'Amiri',Georgia,serif;font-size:1.25rem;line-height:1.1}
.brand small{display:block;font-size:.78rem;color:var(--muted)}
.hright{display:flex;align-items:center;gap:.5rem}
.theme{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;padding:0}
.theme:hover{background:var(--tint)}
.theme svg{width:20px;height:20px}
.logo-d{display:none}
:root[data-theme="dark"] .logo-l{display:none}
:root[data-theme="dark"] .logo-d{display:block}
.theme .sun{display:none}
:root[data-theme="dark"] .theme .sun{display:block}
:root[data-theme="dark"] .theme .moon{display:none}
.tabs{display:flex;gap:.25rem}
.tabs a{padding:.55rem .95rem;border-radius:999px;text-decoration:none;font-weight:500;font-size:.95rem;color:var(--muted)}
.tabs a:hover{color:var(--ink)}
.tabs a[aria-current="page"]{color:var(--ink);background:var(--tint);box-shadow:inset 0 -2px 0 var(--gold-b)}

/* big green section at the top */
.hero{--skh:max(72px,9.167vw);position:relative;color:var(--hero-ink);background:var(--hero-bg);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;opacity:.8;
  background-image:var(--pat);
  -webkit-mask-image:linear-gradient(to bottom,#000 30%,transparent 95%);mask-image:linear-gradient(to bottom,#000 30%,transparent 95%)}
.hero-in{position:relative;z-index:1;display:grid;gap:2rem;padding:2.2rem 0 calc(var(--skh) * .2182);align-items:center}
@media(min-width:880px){.hero-in{grid-template-columns:1.15fr .85fr;align-items:end;padding:3.2rem 0 calc(var(--skh) * .2182)}.hero-text{padding-bottom:calc(var(--skh) * .78 + 14px)}}
.dates{display:grid;gap:.15rem;font-size:1.02rem}
.dates .h{color:var(--hero-gold);font-weight:600}
.demo{display:inline-block;margin-top:1rem;padding:.35rem .75rem;border:1px solid var(--hero-gold);border-radius:999px;font-size:.82rem;color:var(--hero-gold)}

/* the mosque arch with the countdown in it */
.arch{color:#f4ecd6;position:relative;width:min(21.25rem,80vw);aspect-ratio:300/380;justify-self:center;container-type:inline-size}
.arch svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.2s ease-out .2s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.arch-in{position:absolute;left:15%;right:15%;top:31%;bottom:8%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.arch-label{font-size:4.6cqw;opacity:.85}
.arch-name{font-family:'Amiri',serif;font-weight:700;font-size:15cqw;line-height:1.05;margin-top:1.5cqw}
.arch-ar{font-family:'Amiri',serif;font-size:8.5cqw;color:var(--gold-b);line-height:1.3}
.arch-count{font-variant-numeric:tabular-nums;font-weight:600;font-size:11.5cqw;letter-spacing:.02em;margin:2cqw 0 2.5cqw}
.arch-meta{font-size:4.8cqw;line-height:1.5;opacity:.92}
.arch-meta b{color:var(--gold-b);font-weight:600}
.sky{display:block;position:absolute;left:0;right:0;bottom:0;width:100%;height:var(--skh);z-index:0}
.sky *{fill:var(--sky)}
.sky .base{fill:var(--bg)}

/* everything under the top section */
.grid{display:grid;gap:2rem;padding:.5rem 0 3rem;align-items:start}
.grid>*,.two>*,.hero-in>*{min-width:0}
@media(min-width:900px){.grid{grid-template-columns:1.25fr .75fr;gap:3rem}}
.panel{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--card-shadow)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:.6rem 1rem;flex-wrap:wrap;padding:1.1rem 1.3rem;border-bottom:1px solid var(--line)}
.panel-h h2{font-size:1.7rem;white-space:nowrap}
.panel-h p{margin:0;color:var(--muted);font-size:.9rem}
.toggle{white-space:nowrap;font:inherit;font-size:.82rem;font-weight:600;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:.35rem .8rem;cursor:pointer}
.toggle:hover{background:var(--tint)}
.cols,.prow{display:grid;grid-template-columns:minmax(0,1fr) 6.4rem 6.4rem;align-items:center;padding:.9rem 1.3rem;gap:.5rem}
.cols{padding-block:.6rem;font-size:.82rem;color:var(--muted);border-bottom:1px solid var(--line)}
.cols span:not(:first-child),.t{text-align:right}
.prow{border-top:1px solid var(--line);position:relative}
.prow:first-of-type{border-top:0}
.pname{display:flex;align-items:baseline;gap:.2rem .7rem;flex-wrap:wrap}
.pname .en{font-family:'Amiri',serif;font-size:1.5rem;font-weight:700}
.pname .ar{font-family:'Amiri',serif;color:var(--gold);font-size:1.15rem}
.t{font-variant-numeric:tabular-nums;font-size:1.15rem;white-space:nowrap}
.t.start{color:var(--muted)}
.t.jam{font-weight:700}
.atstart{font-size:.82rem;font-weight:500;color:var(--muted)}
.prow.info{opacity:.75}
.prow.info .en{font-size:1.2rem;font-weight:400;font-style:italic}
.prow.past{opacity:.45}
.prow.next{background:var(--tint)}
.prow.next::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--gold-b)}
.badge{font-family:'Figtree',sans-serif;font-style:normal;font-size:.72rem;font-weight:700;color:#06291f;background:var(--gold-b);border-radius:999px;padding:.1rem .55rem}
.fine{margin:0;padding:.9rem 1.3rem;border-top:1px solid var(--line);color:var(--muted);font-size:.82rem}

/* side column: just lines, no boxes */
.side section{padding:0 0 1.6rem;margin-bottom:1.6rem;border-bottom:1px solid var(--line)}
.side h2{font-size:1.6rem;margin-bottom:.7rem}
.side dl{margin:0;display:grid;gap:.7rem}
.side dt{font-weight:600}
.side dd{margin:0;color:var(--muted);font-size:.95rem}
.big-times{display:flex;gap:2rem;flex-wrap:wrap}
.big-times div{font-variant-numeric:tabular-nums}
.big-times b{display:block;font-family:'Amiri',serif;font-size:2.3rem;line-height:1}
.big-times span{font-size:.88rem;color:var(--muted)}
.side .donate{background:var(--em-bg,var(--em));color:#f4ecd6;border-radius:20px;padding:1.6rem;margin-bottom:0;border:0}
.donate h2{color:#f4ecd6}
.donate p{margin:.2rem 0 1rem;opacity:.9}
.btn{display:inline-block;font:inherit;font-weight:600;text-decoration:none;cursor:pointer;border:0;border-radius:999px;padding:.7rem 1.3rem;background:var(--gold-b);color:#06291f}
.btn:hover{filter:brightness(1.07)}
.btn.line{background:transparent;border:1px solid var(--line);color:var(--ink)}

/* monthly table */
.scroll{overflow-x:auto;border-top:1px solid var(--line)}

/* the other pages */
.page{padding:2.5rem 0 4rem}
.page>.wrap>h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:.4rem}
.lead{color:var(--muted);max-width:56ch;margin:0 0 2rem;font-size:1.1rem}
.news{column-gap:1.3rem}
@media(min-width:700px){.news{columns:2}}
@media(min-width:1040px){.news{columns:3}}
.post{break-inside:avoid;margin:0 0 1.3rem;background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--card-shadow)}
.post img{display:block;width:100%;height:auto;cursor:zoom-in}
.post .body{padding:1.1rem 1.2rem 1.3rem}
.post time{font-size:.82rem;color:var(--muted)}
.post h3{font-size:1.45rem;margin:.2rem 0 .4rem}
.post p{margin:0 0 .8rem;color:var(--muted)}
.post a.more{font-weight:600;color:var(--gold);text-underline-offset:3px}
.two{display:grid;gap:2.5rem}
@media(min-width:860px){.two{grid-template-columns:1.1fr .9fr}}
.prose p{max-width:62ch}
.prose h2{font-size:1.8rem;margin:1.8rem 0 .5rem}
.prose h2:first-child{margin-top:0}
.facts{list-style:none;margin:0;padding:0;display:grid;gap:0}
.facts li{padding:.9rem 0;border-top:1px solid var(--line)}
.facts li:last-child{border-bottom:1px solid var(--line)}
.facts b{display:block;font-family:'Amiri',serif;font-size:1.25rem}
.facts span{color:var(--muted);font-size:.95rem}
form.c{display:grid;gap:1rem}
.c label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
.c input,.c textarea{font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:.75rem .9rem}
.c textarea{min-height:140px;resize:vertical}
.status{min-height:1.5rem;color:var(--gold);font-weight:600}
.lb{position:fixed;inset:0;z-index:60;background:rgba(3,15,12,.92);display:grid;place-items:center;padding:1.2rem;cursor:zoom-out}
.lb img{max-width:min(900px,100%);max-height:90vh;width:auto;height:auto;border-radius:12px}
footer{border-top:1px solid var(--line);padding:2rem 0 calc(2.5rem + var(--tabs-h,0px));color:var(--muted);font-size:.9rem}
footer .wrap{display:grid;gap:.4rem}
.flogo{display:flex;align-items:center;gap:.8rem;margin-bottom:.4rem}
.flogo img{width:44px;height:44px;border-radius:50%;background:var(--logo-bg);padding:var(--logo-pad);border:1.5px solid var(--logo-ring);object-fit:contain}

@media(max-width:759px){
  .top .wrap{min-height:58px}
  .brand small{display:none}
  :root{--tabs-h:7rem}                                     /* until the script has measured the real height of the bar */
  .tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--bar);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom,0px))}
  .tabs a{text-align:center;border-radius:12px;padding:.55rem .05rem .45rem;font-size:.72rem;line-height:1.2;display:flex;flex-direction:column;gap:.18rem;align-items:center;justify-content:center}
  .cols,.prow{grid-template-columns:minmax(0,1fr) 5.3rem 5.3rem;padding-inline:1rem;gap:.3rem}
  .t{font-size:1.02rem}
  .pname .ar{display:none}
  .pname .en{font-size:1.4rem}
}
@media(prefers-reduced-motion:reduce){.draw{animation:none;stroke-dashoffset:0}}

/* bits added once it went live */
.notice{background:var(--em-bg,var(--em));color:#f4ecd6;text-align:center;padding:.7rem 1.2rem;font-weight:500;font-size:.95rem}
.prov{margin:0;padding:.8rem 1.3rem;border-bottom:1px solid var(--line);background:var(--tint);font-size:.9rem}
.mnav{display:flex;align-items:center;gap:.5rem}
.mnav button{font:inherit;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer}
.mnav button:disabled{opacity:.35;cursor:default}
.mhead{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1.3rem;border-top:1px solid var(--line)}
.mhead h3{font-size:1.25rem}
.state{padding:2rem 1.3rem;text-align:center;color:var(--muted)}
.state button{margin-top:.8rem}
.lead a:not(.btn),.prose a:not(.btn){color:var(--gold)}
.empty{color:var(--muted);padding:1rem 0}
.post.pin::before{content:"Pinned";display:block;background:var(--tint);color:var(--ink);font-size:.78rem;font-weight:600;padding:.3rem 1.2rem}
.dl{display:inline-block;margin:.9rem 1.3rem;color:var(--gold);font-weight:600}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine.nobox{padding:.8rem 0 0;border:0}
.facts a.strong{font-weight:600}
.facts a.gold{color:var(--gold)}
.facts a.wa{display:inline-flex;align-items:center;gap:.6rem;margin-top:.35rem;padding:.55rem 1.1rem;border-radius:999px;background:#25d366;color:#06391b;font-weight:600;text-decoration:none}
.facts a.wa:hover{filter:brightness(1.06)}
.wa svg{width:1.35rem;height:1.35rem;flex:none;fill:currentColor}
.facts a.wa span{color:inherit;font-size:inherit}
.arch-open{margin-top:2.4cqw;max-width:90%;font-size:4cqw;line-height:1.35;color:var(--gold-soft,#ead9a4)}
.prow .t.start.dash{opacity:.4}
.arch-open{text-wrap:balance}
.notice.wa{padding:0;background:#25d366;color:#06391b}
.notice.wa a{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.75rem 1.2rem;color:inherit;font-weight:600;text-decoration:none}
.notice.wa a:hover{filter:brightness(1.06)}
.notice.wa svg{width:1.35rem;height:1.35rem;flex:none;fill:currentColor}

/* the arch colours come from variables, so a custom theme can change them (the fallbacks are the normal colours) */
.arch .a-out{fill:url(#archG)}
.arch .a-in{fill:var(--arch-in,#052a22)}
.arch .g1{stop-color:var(--g1,#0b463d)}
.arch .g2{stop-color:var(--g2,#0b463d)}
.arch .draw{stroke:var(--gold-b,#d9b45a)}
.arch .gd{fill:var(--gold-b,#d9b45a)}
.arch .gp{stroke:var(--gold-b,#d9b45a)}

/* the hidden customise page */
.cz-h{font-size:1.5rem;margin:1.8rem 0 .8rem}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--paper)}
.seg button{font:inherit;font-weight:600;padding:.6rem 1.2rem;border:0;background:none;color:var(--muted);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--em-bg,var(--em));color:#f4ecd6}
.themes{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}
@media(min-width:760px){.themes{grid-template-columns:repeat(4,1fr)}}
.theme-pill{white-space:nowrap;font:inherit;font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.95rem 1.1rem;border-radius:999px;cursor:pointer;
  color:var(--p2);background:var(--p1);border:2px solid color-mix(in srgb,var(--p2) 45%,transparent);transition:transform .12s}
.theme-pill:hover{transform:translateY(-1px)}
.themes.grad .theme-pill{background:linear-gradient(135deg,var(--p1),var(--p3))}
.theme-pill[aria-pressed="true"]{border-color:var(--p2);box-shadow:0 0 0 3px color-mix(in srgb,var(--p2) 35%,transparent)}
.theme-pill i{font-style:normal;opacity:0}
.theme-pill[aria-pressed="true"] i{opacity:1}
.cz-grad{margin-top:1rem;font-weight:600}
.cz-own{display:flex;flex-wrap:wrap;gap:1rem 1.6rem}
.cz-own label{display:grid;gap:.35rem;font-weight:600;font-size:.92rem}
.cz-own input[type=color]{width:5.5rem;height:2.8rem;padding:.15rem;border:1px solid var(--line);border-radius:12px;background:var(--paper);cursor:pointer}
.cz-sample{display:flex;flex-wrap:wrap;gap:1.2rem;align-items:center;margin:1.6rem 0}
.cz-arch{display:grid;gap:.15rem;justify-items:center;padding:1.3rem 2.2rem 1rem;border-radius:5rem 5rem .6rem .6rem;color:#f4ecd6;background:var(--em-bg,var(--em));border:2px solid var(--gold-b)}
.cz-arch small{opacity:.85}.cz-arch b{font-family:'Amiri',Georgia,serif;font-size:1.9rem;line-height:1.1}.cz-arch span{color:var(--gold-b);font-weight:700}
.cz-side{display:grid;gap:.8rem;justify-items:start}
.cz-bar{padding:.55rem 1.1rem;border-radius:.7rem;background:var(--em-bg,var(--em));color:#f4ecd6;font-weight:500}

/* medium windows: six links need to fit on one line next to the name */
@media(min-width:760px) and (max-width:1060px){.tabs{gap:.1rem}.tabs a{white-space:nowrap;padding:.5rem .55rem;font-size:.9rem}}

/* a small line under the countdown saying what it counts to ("until it starts", "until jamaat") */
.arch-count{margin-bottom:.4cqw}
.arch-sub{font-size:4.2cqw;line-height:1.3;color:var(--gold-soft,#ead9a4);opacity:.92;margin-bottom:2.2cqw}

/* the bell in the top menu, and the notifications page */
.bell{position:relative;width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:var(--paper);color:var(--ink);text-decoration:none}
.bell:hover{background:var(--tint)}
.bell svg{width:20px;height:20px}
.bell.on::after{content:"";position:absolute;top:7px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--gold-b);border:2px solid var(--paper)}
.nf-help{margin:1rem 0;padding:.9rem 1.1rem;border-radius:14px;background:var(--tint);border:1px solid var(--line)}
.nf-box{display:grid;gap:.8rem;padding:1.1rem 1.2rem;border:1px solid var(--line);border-radius:16px;background:var(--paper);max-width:34rem}
.nf-box label:not(.inline){display:grid;gap:.35rem;font-weight:600}
.nf-box select{font:inherit;padding:.6rem .8rem;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink)}
.nf-box.dim{opacity:.5;pointer-events:none}
.nf-master{font-weight:700;margin-bottom:.7rem}
.nf-actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem}
.nf-off{background:transparent;border:1px solid var(--line);color:var(--ink)}
@media(max-width:380px){.brand b{font-size:1.08rem}.hright{gap:.35rem}}

/* the big dates at the top of the home page, now that the heading has moved down */
.dates{gap:.35rem}
.dates #gdate{font-family:'Amiri',Georgia,serif;font-weight:700;font-size:clamp(1.7rem,5.6vw,2.6rem);line-height:1.15}
.dates .h{font-size:clamp(1.1rem,3.4vw,1.5rem)}
/* the mosque heading, under today's prayers */
.intro{margin-top:2rem;padding:1.5rem 1.4rem;background:var(--paper);border:1px solid var(--line);border-radius:20px;box-shadow:var(--card-shadow)}
.intro h1{font-size:clamp(1.7rem,5.2vw,2.4rem);letter-spacing:.005em}
.intro .sub{margin:.5rem 0 0;color:var(--muted);font-size:1.05rem;max-width:40ch}
/* the monthly page */
#view-timetable .wrap{max-width:860px}
#view-timetable .mhead{padding:.8rem 0;border-top:0}
.mpic{margin:.4rem auto 0;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--card-shadow)}
.mpic img{display:block;width:100%;height:auto;cursor:zoom-in}
#view-timetable .dl{margin:.9rem 0 0}
#view-timetable .fine{margin:.6rem 0 0}
/* with no picture: a table laid out like the mosque's Excel sheet (always on white paper, like the picture) */
.sheetwrap{margin:.4rem 0 0;border:2px solid #111;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif;overflow-x:auto}
table.sheet{border-collapse:collapse;width:100%;min-width:700px;font-size:.88rem;text-align:center;font-variant-numeric:tabular-nums}
.sheet th,.sheet td{border:1px solid #111;padding:.28rem .3rem;white-space:nowrap}
.sheet .s-title{background:#757575;color:#fff;font-size:1.3rem;padding:.5rem}
.sheet .s-addr{font-size:1rem;padding:.4rem}
.sheet .s-month{background:#d6dce4;font-size:1.6rem;padding:.4rem}
.sheet thead th{font-weight:700;background:#fce4d6}
.sheet thead th.s-title{background:#757575}
.sheet thead th.s-addr{background:#fff}
.sheet thead th.s-month{background:#d6dce4}
.sheet thead th.s-start{background:#ffff00;font-weight:400}
.sheet thead th.s-shuruq{background:#ffc000;font-weight:400}
.sheet thead th.s-kubra{background:#ff0000;font-weight:400}
.sheet td.d,.sheet td.j{font-weight:700}
.sheet td.dh{color:#ff0000}
.sheet tr.fri td{background:#92d050}
.sheet tr.today td{box-shadow:inset 0 2px 0 #111,inset 0 -2px 0 #111}

/* tablets and small laptops: the menu goes on its own row under the logo and name, so nothing is squashed */
@media(min-width:760px) and (max-width:1199px){
  .top .wrap{flex-wrap:wrap;justify-content:flex-start;row-gap:0;padding-bottom:.4rem}
  .hleft{margin-right:auto}
  .hright{display:contents}
  .bell,.theme{flex:none}
  .tabs{order:3;flex:1 0 100%;justify-content:center;gap:.2rem}
  .tabs a{padding:.5rem .8rem;font-size:.92rem;white-space:nowrap}
}

/* the bar: the mosque logo, the name and the bismillah roundel. both logos are drawn the same height, the name's box hugs its
   text (it is broken into two lines by hand on phones), and the space either side of the name is the same */
.top{--mark:44px;--bgap:.9rem;--bis-scale:.9}      /* --bis-scale: the roundel is drawn a little smaller than the mark size so it looks the same size as the mosque logo */
.hleft{display:flex;align-items:center;gap:var(--bgap);min-width:0}
.brand{gap:var(--bgap);min-width:0}
.brand span{min-width:0}
.brand .logo{width:calc(var(--mark) / .95);height:calc(var(--mark) / .95)}   /* the mosque logo's picture has a thin empty edge: it fills 95% of its box */
.brand .nl{display:none}
.bar-bis{flex:none;display:block;line-height:0;color:var(--bis)}
.bar-bis svg{display:block;height:calc(var(--mark) * var(--bis-scale));width:auto;fill:currentColor;stroke:currentColor;stroke-width:3;stroke-linejoin:round;overflow:visible}   /* a touch of outline thickens the thin calligraphy to match the mosque logo's weight */
/* phones: everything in the bar scales with the width of the screen, so the leftover room is about the same as the other gaps on every phone.
   --u is the room the bar's contents share (the screen minus the page margins and the gap between the two buttons) */
@media(max-width:759px){
  .top{
    --u:calc(100vw - 51px);
    --mark:min(calc(var(--u) * .118), 50px);
    --bgap:min(calc(var(--u) * .028), 12px);
    --btn:min(calc(var(--u) * .1297), 48px);
  }
  .top .wrap{gap:var(--bgap)}                          /* the least room between the logo-and-name group and the buttons is the same gap as everywhere else */
  .brand .nl{display:inline}
  .brand b{font-size:min(max(calc(var(--u) * .054), 15px), 22px)}
  .hright{gap:6px}
  .theme,.bell{width:var(--btn);height:var(--btn)}
}

/* the icons in the menu show only on the phone's bottom bar; the top menu on bigger screens is words only */
.tabs a svg.ti{display:none}
.tabs a{position:relative}
.tabs a.has-new::after{content:"";position:absolute;top:.4rem;right:.5rem;width:9px;height:9px;border-radius:50%;background:var(--gold-b);border:2px solid var(--bg)}
@media(max-width:759px){
  .tabs a svg.ti{display:block;width:23px;height:23px}      /* phones: an icon above each word */
  .tabs a.has-new::after{right:auto;left:calc(50% + 7px)}
}
/* the News page: four buttons choose General, Brothers, Sisters or Kids */
.news-tabs{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin:.4rem 0 1.1rem;padding:.3rem 0 .5rem}
.news-tabs::-webkit-scrollbar{display:none}
.news-tabs button{flex:none;position:relative;padding:.5rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--muted);font:inherit;font-weight:600;font-size:.88rem;line-height:1.2;cursor:pointer}
.news-tabs button:hover{color:var(--ink)}
.news-tabs button[aria-pressed="true"]{background:var(--tint);color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold-b)}
.news-tabs button.new::after{content:"";position:absolute;top:-1px;right:0;width:10px;height:10px;border-radius:50%;background:var(--gold-b);border:2px solid var(--bg)}
@media(min-width:760px){.news-tabs button{font-size:1rem;padding:.55rem 1.1rem}}

/* the other branches, on the About page */
.branches{margin-top:2.6rem}
.branches h2{font-family:'Amiri',Georgia,serif;font-size:1.7rem;margin:0 0 .9rem}
.br-filter{width:100%;max-width:26rem;padding:.7rem 1rem;margin:0 0 1rem;border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit}
.br-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(15rem,1fr))}
.br{padding:1rem 1.1rem;background:var(--paper);border:1px solid var(--line);border-radius:16px}
.br[hidden]{display:none}
.br h3{margin:0 0 .15rem;font-size:1.15rem}
.br p{margin:.15rem 0;color:var(--muted);font-size:.95rem}
.br .br-town{color:var(--gold);font-weight:600}
.br .br-links{display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin-top:.6rem}
.br-links a{color:var(--gold);font-weight:600}

/* a long masjid name: on phones the name is set a little smaller, so it wraps less */
@media(max-width:759px){.brand b.long{font-size:min(max(calc(var(--u) * .042), 12.5px), 17px)}}

/* sorting the other branches: A-Z, near me, or a postcode */
.br-sort{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0 0 1rem}
.br-sort-label{color:var(--muted);font-weight:600;margin-right:.2rem}
.br-sort button{padding:.45rem .9rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--muted);font:inherit;font-weight:600;font-size:.9rem;cursor:pointer}
.br-sort button[aria-pressed="true"]{background:var(--tint);color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold-b)}
.br-pc{display:flex;gap:.4rem;flex:1 1 11rem;max-width:16rem}
.br-pc input{flex:1;min-width:0;padding:.45rem .8rem;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);font:inherit;font-size:.9rem;text-transform:uppercase}
.br-pc input::placeholder{text-transform:none}
.br-note{flex-basis:100%;margin:.1rem 0 0;color:var(--muted);font-size:.88rem}
.br .br-dist{color:var(--ink);font-weight:600;font-size:.9rem}