/* Urdu / Arabic-script text uses Mehr Nastaliq. The file is looked up next to the app first (fonts/), then on uloomweb.com.
   unicode-range limits it to Arabic-script characters, so Latin text keeps the normal font. */
@font-face {
  font-family: "Mehr Nastaliq Web";
  src: url("../fonts/MehrNastaliqWeb.woff2") format("woff2"), url("https://uloomweb.com/fonts/MehrNastaliqWeb.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F, U+2010-2011, U+00A0, U+060C, U+061B, U+061F;
}
:root {
  --bg: #f6f4ee; --surface: #ffffff; --ink: #1d2a27; --muted: #5d6b67;
  --line: #d9d6ca; --brand: #0f5c4d; --brand-ink: #ffffff; --accent: #b4801f;
  --hi: #fff6dc; --hi2: #e6f3ee; --danger: #a33;
  --radius: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #12191a; --surface: #1b2526; --ink: #e8efec; --muted: #9fb0aa;
    --line: #2f3d3e; --brand: #3fb59b; --brand-ink: #06231d; --accent: #e0b055;
    --hi: #3a331c; --hi2: #1d3530; --danger: #e77;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.5 "Mehr Nastaliq Web", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Nastaliq Urdu", sans-serif;
  /* keep Nastaliq words whole: no fake bold/italic, no letter-spacing, ligatures and joining left to the font */
  font-synthesis: none; letter-spacing: 0; text-rendering: optimizeLegibility; font-variant-ligatures: common-ligatures contextual; font-kerning: normal; }
.ur { font-family: "Mehr Nastaliq Web", "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Alvi Nastaleeq", "Segoe UI", serif;
  font-size: 1.25em; line-height: 1.35; opacity: 1; margin-inline-start: .35em; word-break: keep-all; overflow-wrap: normal; hyphens: none; }

.top { background: var(--brand); color: var(--brand-ink); padding: .6rem 1rem 0; position: sticky; top: 0; z-index: 5; }
.brand { display: flex; gap: .6rem; align-items: center; padding-bottom: .4rem; }
.brand h1 { margin: 0; font-size: 1.25rem; line-height: 1.1; }
.brand .sub { margin: 0; font-size: .85rem; opacity: .9; }
.tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; margin: 0 -.25rem; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button { flex: 0 0 auto; background: transparent; color: inherit; border: 0; padding: .55rem .8rem;
  border-radius: 8px 8px 0 0; font: inherit; cursor: pointer; opacity: .85; }
.tabs button.on { background: var(--bg); color: var(--ink); opacity: 1; font-weight: 600; }
.tabs button:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 1px; }

main { max-width: 96rem; margin: 0 auto; padding: 1rem; }
.panel { display: none; } .panel.on { display: block; }
footer { text-align: center; color: var(--muted); font-size: .8rem; padding: .4rem 1rem .6rem; }

.modes { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .8rem; }
.modes button { border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: .4rem .9rem; border-radius: 999px; font: inherit; cursor: pointer; }
.modes button.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

.controls { display: flex; flex-wrap: wrap; gap: .7rem 1rem; align-items: end;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; }
.controls label { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); gap: .2rem; }
.controls label[hidden], .controls label.off { display: none; }
input, select, button { font: inherit; }
input[type=number], input[type=date], input[type=time], input[type=search], input[type=text], input:not([type]), select {
  padding: .45rem .55rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--ink); min-height: 2.4rem; }
input[type=number] { width: 6.5rem; }
.btns { display: flex; gap: .5rem; flex-wrap: wrap; }
button { border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  padding: .45rem .9rem; border-radius: 8px; cursor: pointer; min-height: 2.4rem; }
button.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); font-weight: 600; }
button:hover { filter: brightness(.96); }

.out { margin-top: 1rem; }
.out .head { margin: 0 0 .6rem; }
.out h2 { margin: 0 0 .2rem; font-size: 1.1rem; }
.out .meta { margin: 0 0 .8rem; color: var(--muted); font-size: .9rem; }
.tblwrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1rem; }
table.sch { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; min-width: 40rem; }
table.sch caption { text-align: start; font-weight: 600; padding: .6rem .8rem .2rem; }
table.sch th, table.sch td { padding: .3rem .4rem; text-align: center; white-space: nowrap; }
table.sch thead th { position: sticky; top: 0; z-index: 2; background: var(--hi2); font-weight: 600; border-bottom: 1px solid var(--line); line-height: 1.25; }
table.sch thead th small { display: block; white-space: normal; line-height: 1.2; font-weight: 400; color: var(--muted); font-size: .72rem; }
table.sch tbody tr { background: var(--surface); }
table.sch tbody tr:nth-child(even) { background: color-mix(in srgb, var(--bg) 55%, var(--surface)); }   /* opaque: scrolled cells must not show through the sticky header / first column */
table.sch tbody tr.today { outline: 2px solid var(--accent); outline-offset: -2px; background: var(--hi); }
table.sch tbody tr.fri td:first-child, table.sch tbody tr.fri td:nth-child(2) { color: var(--brand); font-weight: 600; }
table.sch .xt { background: var(--hi); }                   /* ishraq / asr makruh */
table.sch thead th.xt { background: var(--hi); }
table.sch td:first-child, table.sch th:first-child { text-align: start; position: sticky; left: 0; background: inherit; z-index: 1; }
table.sch thead th:first-child { z-index: 3; background: var(--hi2); }
table.sch caption { position: sticky; left: 0; }
.note { color: var(--muted); font-size: .85rem; margin: .2rem 0 1rem; }

.daycards { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .6rem; }
.dc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .8rem; }
.dc.xt { background: var(--hi); border-color: var(--accent); }
.dc .n { font-size: .85rem; color: var(--muted); display: flex; justify-content: space-between; gap: .4rem; }
.dc .t { font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.dc .d { font-size: .78rem; color: var(--muted); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1rem; align-items: start; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
.card.wide, .btns.wide { grid-column: 1 / -1; }
.card h2 { margin: 0 0 .7rem; font-size: 1.05rem; }
/* download tab: benefit / drawback lists */
.card ul.dl { list-style: none; margin: .4rem 0 .8rem; padding: 0; }
.card ul.dl li { margin: .35rem 0; padding-inline-start: 1.4rem; position: relative; }
.card ul.dl li::before { position: absolute; inset-inline-start: .1rem; font-weight: 700; }
.card ul.dl li.yes::before { content: "\2713"; color: #1a9850; }
.card ul.dl li.no::before { content: "\2717"; color: #c0392b; }
.card p.ur, .card ul.dl.ur li { line-height: 2; }
.card h3 { margin: 1.1rem 0 .3rem; font-size: 1rem; }
.card.prose { max-width: none; }   /* full width like every other section (was capped at 48rem for readability, which left the Help tab's right side empty) */
.two { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 34rem) { .two { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: .6rem .7rem .8rem; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
legend { padding: 0 .3rem; color: var(--muted); font-size: .85rem; }
.row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: end; }
.row label { display: flex; flex-direction: column; font-size: .82rem; color: var(--muted); gap: .15rem; }
.card form > label { display: flex; flex-direction: column; font-size: .85rem; color: var(--muted); gap: .2rem; margin-bottom: .6rem; }
.chk { display: flex !important; flex-direction: row !important; align-items: center; gap: .5rem; color: var(--ink) !important; font-size: 1rem !important; margin: .35rem 0; }
.ind { display: flex; flex-direction: column; margin: .1rem 0 .6rem 1.7rem; font-size: .85rem; color: var(--muted); gap: .2rem; }
.hint { color: var(--muted); font-size: .85rem; margin: .5rem 0 0; }
.result { margin: .8rem 0 0; font-size: 1.05rem; min-height: 1.5rem; }
.result b { color: var(--brand); }
#locList { width: 100%; margin-top: .6rem; padding: .3rem; }
#locSearch { width: 100%; }
.dst { display: grid; gap: .6rem; margin: .4rem 0 .8rem; }
.err { color: var(--danger); font-weight: 600; }

.compass { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
@media (max-width: 40rem) { .compass { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.compass svg { width: min(18rem, 80vw); height: auto; }
.compass .big { font-size: 2rem; font-weight: 700; color: var(--brand); }
.compass .circ { stroke: var(--line); fill: var(--bg); }
.compass .tick, .compass .lbl { fill: var(--muted); font-size: 11px; }
.compass .needle { stroke: var(--brand); stroke-width: 3; }
.compass .kaaba { fill: var(--accent); }

/* ---- Location tab: list at left, coordinates at right, all on one screen ---- */
.locgrid { display: grid; gap: 1rem; align-items: start;
  grid-template-columns: minmax(16rem, 1fr) minmax(22rem, 1.25fr);
  grid-template-areas: "gaz coords" "geo coords"; }
.locgrid .gaz { grid-area: gaz; } .locgrid .coords { grid-area: coords; } .locgrid .geo { grid-area: geo; }
@media (max-width: 52rem) { .locgrid { grid-template-columns: 1fr; grid-template-areas: "gaz" "coords" "geo"; } }
.locgrid .card { padding: .8rem 1rem; }
.locgrid h2, .optgrid h2 { margin-bottom: .5rem; }
.grp { display: flex; flex-direction: column; gap: .2rem; margin-bottom: .5rem; }
.lt { font-size: .85rem; color: var(--muted); }
.coords .row { flex-wrap: nowrap; align-items: stretch; }
.coords .row input, .coords .row select { flex: 1 1 0; min-width: 0; width: 100%; }
.coords .row select { flex: 0 0 4.6rem; width: 4.6rem; }
.coords .grp > input { width: 100%; }
.coords .chk { margin: .1rem 0 .4rem; }
.coords .err { min-height: 0; margin: .2rem 0 .4rem; }
#locList { height: 14.5rem; }
.rule { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.rule b { min-width: 3.4rem; }
.rule input[type=number] { width: 4rem; }
.rule select { max-width: 8rem; }
.dst { display: grid; gap: .4rem; margin: .2rem 0 .6rem; }
.dst .hint { margin: 0; }
[hidden] { display: none !important; }
.geo .result { min-height: 0; font-size: .95rem; }

/* ---- Options tab ---- */
.optgrid { display: grid; gap: 1rem; align-items: start; grid-template-columns: minmax(0, 2.3fr) minmax(16rem, 1fr); grid-template-areas: "method offs" "chasht offs" "misc offs"; }
@media (max-width: 62rem) { .optgrid { grid-template-columns: 1fr; grid-template-areas: "method" "chasht" "offs" "misc"; } }
.optgrid .wide { grid-column: 1 / -1; }
.optgrid .card { padding: .8rem 1rem; }
#oMethod { width: 100%; }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: .15rem .9rem; margin: .7rem 0 .4rem; font-size: .93rem; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; }
.kv .ur { margin-inline-start: .4rem; }
.cust { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin-top: .6rem; }
.cust fieldset { padding: .4rem .7rem .6rem; gap: .1rem; }
.cust .chk { margin: .2rem 0; font-size: .92rem !important; }
.cust .ind { margin: 0 0 .4rem 1.6rem; }
.cust input[type=text], .cust input[type=number] { width: 100%; }

@media print {
  .top, footer, .controls, .modes { display: none !important; }
  body { background: #fff; color: #000; }
  main { padding: 0; max-width: none; }
  .panel { display: none !important; } .panel.on { display: block !important; }
  .tblwrap { border: 0; overflow: visible; max-height: none; }
  table.sch thead th { position: static; }
  table.sch { min-width: 0; font-size: 10.5pt; }
  table.sch tbody tr:nth-child(even) { background: #f3f3f3; }
  table.sch .xt, table.sch thead th.xt { background: #eee; }
  table.sch tbody tr.today { outline: 0; background: transparent; }
  .month-break { break-after: page; }
}

.offrow { display: grid; grid-template-columns: 1fr 1.8rem 3.4rem 1.8rem; gap: .25rem; align-items: center; margin-bottom: .25rem; font-size: .9rem; }
.offrow button { padding: .15rem 0; line-height: 1.2; }
.offrow input { width: 100%; text-align: center; padding: .2rem .1rem; }
.method { grid-area: method; } .offs { grid-area: offs; } .misc { grid-area: misc; } .chasht { grid-area: chasht; }
.mgrid { display: grid; grid-template-columns: 1.2fr 1.2fr .9fr; gap: 1rem; align-items: start; }
.mact { display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; min-height: 100%; }
.mact .btns { flex-direction: column; align-items: stretch; }
@media (max-width: 52rem) { .mgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .mgrid { grid-template-columns: 1fr; } }
.offs h2 { margin-bottom: .4rem; }
.offrow > span { line-height: 1.7; }
.offrow button, .offrow input { height: 1.7rem; min-height: 0; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.offrow { margin-bottom: .12rem; }
.misc .ind { margin-left: 0; }
.misc h2 { font-size: 1rem; }
@media (max-width: 62rem) { .offrow button, .offrow input { height: 2.2rem; } }
.controls label.rad { color: var(--ink); font-size: .95rem; }
.controls label.rad small { color: var(--muted); margin-inline-start: 1.5rem; }
.controls label.rad input { margin-inline-end: .4rem; }
.ramnote { font-size: 1.05rem; line-height: 2.1; margin: .8rem 0; opacity: 1; text-align: center; }

/* Tables that fit the page scroll with the page (header sticks under the top bar, like any normal page);
   only tables wider than the screen get their own horizontal scroll box (see fitTables in app.js). */
.tblwrap.fit { overflow: clip; }
.tblwrap.fit table.sch thead th { top: var(--topH, 0px); }
.tblwrap.wide { overflow: auto; max-height: calc(100vh - var(--topH, 6rem) - 1rem); }
.ramnote mark { background: none; color: var(--brand); font-weight: inherit; padding: 0; }
/* Urdu is larger now; keep compact controls from growing taller because of it (the glyphs may extend past the line box, nothing is clipped) */
.offrow .ur, #tabs .ur, button .ur, .kv .ur, .coords .ur, .lt .ur, label .ur { line-height: 1.1; }
.offrow > span { line-height: 1.2; }
/* DMS / Decimal switch under "Manual coordinates" */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 0 0 .6rem; background: var(--surface); }
.seg button { border: 0; border-radius: 0; min-height: 0; padding: .3rem .8rem; background: transparent; }
.seg button + button { border-inline-start: 1px solid var(--line); }
.seg button.on { background: var(--brand); color: var(--brand-ink); }
.coords .row.fdms input[type=number] { min-width: 0; }
.signs { display: flex; gap: .3rem; flex: 0 0 5.6rem; align-items: center; }
.signs .chk { margin: 0; font-size: 1.1rem; gap: .25rem; }
.coords .row .signs { width: 5.6rem; }
.coords .row .signs input { flex: none; width: auto; min-width: 0; }

/* Moon tab (MoonCalc engine) */
.mute { color: var(--muted); }
table.sch td.ok { font-weight: 600; }
canvas.mooncv { display: block; margin: 0 auto; background: #05080f; border-radius: 8px; max-width: 100%; }
.moon-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-bottom: 1rem; }
.moon-stack { display: grid; gap: 1rem; }
.moon-cols .tblwrap, .moon-stack .tblwrap { margin-bottom: 0; }
.moon-cols > *, .moon-stack > * { min-width: 0; }              /* let grid cells shrink below content size */
.moon-cols .tblwrap { max-width: 100%; overflow-x: auto; }    /* wide content scrolls inside its own box */
.moon-cols table.sch { min-width: 0; }                        /* moon tables fit their column, not 40rem */
.moon-cols table.sch td, .moon-cols table.sch th { white-space: normal; }  /* wrap long labels/texts (e.g. the criterion table's times and predictions) instead of widening the table past its column */
@media (max-width: 62rem) { .moon-cols { grid-template-columns: minmax(0, 1fr); } }
/* Close-up top row: the disc card and the crescent table are equal height. */
.moon-cols.eqh { align-items: stretch; }
.moon-cols.eqh .card { height: 100%; box-sizing: border-box; margin-bottom: 0; }
.moon-cols.eqh .moon-stack { display: flex; flex-direction: column; }
.moon-cols.eqh .moon-stack .tblwrap { flex: 1; }

/* ================= Phones and small screens =================
   Every rule in this section sits inside a max-width media query, so
   viewports wider than 48rem (the desktop view) are completely
   unaffected by anything here. */
@media (max-width: 48rem) {
  /* Slimmer sticky bar. A long place name is never cut off: it may
     flow onto a second line, in a modest size with modest leading,
     so every letter stays readable (user's choice over truncating
     with an ellipsis). */
  .top { padding: .45rem .6rem 0; }
  .brand { padding-bottom: .3rem; gap: .5rem; }
  .brand h1 { font-size: 1.05rem; }
  .brand .sub { font-size: .82rem; line-height: 1.3; }
  .tabs button { padding: .6rem .65rem; min-height: 2.75rem; }

  main { padding: .7rem .55rem 1rem; }

  /* Form rows pair up in two tidy columns instead of ragged wrapping;
     the buttons keep a row of their own. */
  .controls { padding: .7rem .8rem; gap: .6rem .8rem; }
  .controls label:not(.rad) { flex: 1 1 8.5rem; }
  .controls label:not(.rad) input, .controls label:not(.rad) select { width: 100%; }
  .controls .btns { flex: 1 1 100%; }

  /* Touch targets a finger can actually hit (44px). */
  input[type=number], input[type=date], input[type=time], input[type=search], input[type=text], input:not([type]), select, button { min-height: 2.75rem; }
  .modes { gap: .35rem; margin-bottom: .6rem; }
  .modes button { padding: .45rem .8rem; }

  /* Prayer / calendar tables: smaller type and tighter cells, so a
     month needs far less sideways scrolling. (Moon tables already wrap
     and keep their own rules - their min-width: 0 wins on specificity.) */
  table.sch { min-width: 33rem; font-size: .83rem; }
  table.sch th, table.sch td { padding: .26rem .3rem; }
  table.sch caption { font-size: .95rem; padding: .5rem .6rem .15rem; }

  .daycards { gap: .5rem; }
  .dc { padding: .55rem .65rem; }
  .dc .t { font-size: 1.3rem; }

  .card { padding: .8rem; }
  .card h2 { font-size: 1rem; margin-bottom: .55rem; }
  .out h2 { font-size: 1.02rem; }
  .note { font-size: .82rem; }
  .kv { font-size: .9rem; gap: .15rem .6rem; }

  /* Offset steppers: wide, tall +/- buttons instead of 29px slivers. */
  .offrow { grid-template-columns: 1fr 2.6rem 3.8rem 2.6rem; gap: .35rem; font-size: .95rem; }
  .offrow button, .offrow input { height: 2.6rem; }

  .compass { padding: .8rem; gap: .8rem; }
  .compass .big { font-size: 1.55rem; }

  /* Location tab: coordinate rows keep their fields on one line. */
  .coords .row input, .coords .row select { padding: .4rem .35rem; }
  #locList { height: 11rem; }

  footer { padding-bottom: 1rem; }
}

/* Very small phones: squeeze the schedule table a touch more. */
@media (max-width: 24rem) {
  .brand h1 { font-size: .98rem; }
  table.sch { min-width: 30rem; font-size: .78rem; }
  .dc .t { font-size: 1.18rem; }
}

/* Visibility map (Moon tab) */
.mapwrap { overflow-x: auto; }
canvas.mapcv { display: block; width: 100%; height: auto; background: #22344f; border-radius: 8px; }
.mapmom { display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; margin: .3rem 0 .6rem; }
.mapmom label { display: flex; align-items: center; gap: .35rem; cursor: pointer; }
.maplegend { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin-top: .4rem; font-size: .88rem; }
.maplegend .mchip { display: inline-block; width: .9rem; height: .9rem; border-radius: 3px;
  margin-inline-end: .35rem; vertical-align: -.12rem; border: 1px solid rgba(0,0,0,.3); }
/* The map strip: bottom of the Moon screen, stretched to the full screen width
   (breaks out of the centred main column). overflow-x: clip on body absorbs the
   scrollbar-width overshoot of 100vw without breaking position: sticky. */
body { overflow-x: clip; }
#moonMapFoot { width: 95vw; margin-left: calc(50% - 47.5vw); margin-top: 1rem; }
#moonMapFoot .mapwrap { overflow-x: visible; }
#moonMapFoot canvas.mapcv { border-radius: 0; }
/* The Moon form is two zones: the fields flow in their own area on the
   left, and the explanatory note keeps a permanent seat on the right,
   level with the input boxes — it no longer drops onto its own line
   when the fields fill the row (the user's placement). On narrow
   screens the note takes the full width below the fields. */
#moonForm { flex-wrap: nowrap; }
#moonForm .mfields { display: flex; flex-wrap: wrap; gap: inherit; align-items: end; flex: 1 1 auto; min-width: 0; }
#moonForm .formnote { flex: 0 1 20rem; margin: 0; align-self: center; }
@media (max-width: 60rem) {
  #moonForm { flex-wrap: wrap; }
  #moonForm .formnote { flex-basis: 100%; }
}

/* Qibla shadow diagram (day): the desktop program's green disc. */
.shwrap { display: flex; justify-content: center; }
.shwrap svg { width: min(24rem, 92vw); height: auto; }
.shdisc { fill: #c9ecc9; stroke: var(--line); }
.shline { stroke: currentColor; opacity: .4; }
.shwrap .tlbl { font-size: 12.5px; fill: var(--ink); }
.shwrap .qlbl { font-size: 17px; font-weight: 700; fill: var(--ink); }
.shwrap .needle { stroke: var(--brand); stroke-width: 3; }
.shwrap .kaaba { fill: var(--accent); }
.shwrap .lbl { fill: var(--muted); font-size: 11px; }
.shwrap .albl { font-size: 11px; fill: var(--muted); }

/* Download tab: links styled as the app's primary buttons. */
a.btn { display: inline-block; text-decoration: none; border: 1px solid var(--brand); background: var(--brand); color: var(--brand-ink); font-weight: 600; padding: .45rem .9rem; border-radius: 8px; min-height: 2.4rem; }
a.btn:hover { filter: brightness(.96); }