/* Ateeq. Kiswah black band, marble white ground, one gold thread. Green appears only at the Mas'a markers. */
:root {
  --marble: #F4F1EA; --card: #FFFDF7; --ink: #1B1812; --stone: #665F50; --hair: #E2DCCD;
  --kiswah: #12100C; --band-ink: #F5EEDC; --gold: #836124; --gold-line: #B8924B; --gold-2: #DDBE78;
  --gold-soft: #F2E7CC; --green: #1D8A58; --danger: #A33A2F; --btn-bg: #12100C; --btn-fg: #DDBE78; --on-line: #14110B;
  --ts: 1;
  --radius: 16px;
  --nav-h: 64px;
  --dua-size: 25px;
  --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-in-out: cubic-bezier(.77, 0, .175, 1);
  --ui: 'Noto Kufi Arabic', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --naskh: 'Scheherazade New', 'Noto Naskh Arabic', 'Times New Roman', serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marble: #0C0B09; --card: #17150F; --ink: #EFE9DC; --stone: #ABA391; --hair: #2D2920;
    --kiswah: #050403; --gold: #DDBE78; --gold-line: #C9A55C; --gold-soft: #2A2417; --green: #3DB57F;
    --danger: #E07A6C; --btn-bg: #D2B06A; --btn-fg: #14110B; color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --marble: #0C0B09; --card: #17150F; --ink: #EFE9DC; --stone: #ABA391; --hair: #2D2920;
  --kiswah: #050403; --gold: #DDBE78; --gold-line: #C9A55C; --gold-soft: #2A2417; --green: #3DB57F;
  --danger: #E07A6C; --btn-bg: #D2B06A; --btn-fg: #14110B; color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
html, body { overscroll-behavior-y: contain; }
body {
  margin: 0; background: var(--marble); color: var(--ink);
  font-family: var(--ui); font-size: calc(16px * var(--ts, 1)); line-height: 1.75;
  padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);
  -webkit-tap-highlight-color: transparent;
}
[dir="ltr"] body { line-height: 1.6; }
a { color: inherit; }
button { font: inherit; }
button, a, [role="button"], .switch, .chk label { touch-action: manipulation; }
button, [role="button"], .seg a, .tool, .links a, #tabs a, .chip, .swatch, .node, .look-btn, .count-card, .sec-card, .src-card { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* every pressable answers the finger at once, then springs back */
.btn, .tool, .sec-card, .src-card, .swatch, .chip, .look-btn, .count-card, .icon-btn, .tick, .seg button, .seg a, #tabs a .ic { transition: transform 160ms var(--ease-out), background-color 160ms ease, border-color 160ms ease; }
.btn:active, .tool:active, .sec-card:active, .src-card:active, .swatch:active, .chip:active, .look-btn:active, .count-card:active, .tick:active { transform: scale(.97); }
.icon-btn:active, .seg button:active, .seg a:active { transform: scale(.94); }
#tabs a:active .ic { transform: scale(.88); }
.links a:active, .links button:active, .switch:active, .stop a:active, .chk label:active, .radio:active { background-color: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.wrap { max-width: 640px; margin: 0 auto; padding: 14px 16px 28px; }

.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ic.fill { fill: currentColor; }
[dir="ltr"] .back .ic { transform: scaleX(-1); }
[dir="rtl"] .ic.fwd { transform: scaleX(-1); }

/* the band */
.hizam { background: var(--kiswah); color: var(--band-ink); position: sticky; top: 0; z-index: 20; padding-top: env(safe-area-inset-top); border-bottom: 3px solid var(--gold-line); }
.hz-in { position: relative; max-width: 640px; margin: 0 auto; display: flex; align-items: center; gap: 8px; padding: 10px 16px 16px; min-height: 66px; }
.hz-in::after { content: ''; position: absolute; inset-inline: 0; bottom: 6px; height: 1px; background: var(--gold-line); opacity: .45; }
.hz-t { min-width: 0; }
.hizam h1 { font-family: var(--naskh); font-weight: 700; color: var(--gold-2); font-size: calc(27px * var(--ts, 1)); line-height: 1.3; margin: 0; }
.hizam p { margin: 0; font-size: calc(12.5px * var(--ts, 1)); color: var(--band-ink); opacity: .8; line-height: 1.6; }
.hizam.big .hz-in { padding: 18px 18px 24px; }
.hizam.big h1 { font-size: calc(48px * var(--ts, 1)); line-height: 1.15; }
.hizam.big p { font-size: calc(13.5px * var(--ts, 1)); margin-top: 4px; }
.back { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: var(--gold-2); flex: none; margin-inline-start: -8px; }

/* surfaces */
.card { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 16px; margin: 12px 0; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 10px 18px; border-radius: 14px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; text-align: center; }
.btn .ic { width: 20px; height: 20px; }
.btn.primary { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.sm { min-height: 40px; padding: 6px 12px; font-size: calc(14px * var(--ts, 1)); }
.btn.wide { width: 100%; margin: 8px 0 4px; }
.btn[disabled] { opacity: .4; cursor: default; }
.btn.danger { color: var(--danger); }
.linkish { background: none; border: 0; color: var(--stone); text-decoration: underline; font-size: calc(14px * var(--ts, 1)); margin: 10px auto; display: block; cursor: pointer; }
.sec-h { font-size: calc(15px * var(--ts, 1)); color: var(--stone); font-weight: 600; margin: 24px 0 8px; display: flex; gap: 8px; align-items: center; }
.lead { font-size: calc(15.5px * var(--ts, 1)); line-height: 1.95; margin: 6px 0 12px; }
.note { color: var(--stone); font-size: calc(13.5px * var(--ts, 1)); margin: 8px 0; line-height: 1.85; }
.note.center { text-align: center; }
.empty { text-align: center; color: var(--stone); padding: 26px 12px; margin: 0; }
.count { color: var(--stone); font-size: calc(13.5px * var(--ts, 1)); margin: 8px 0 0; }

/* home */
.date { color: var(--stone); font-size: calc(14px * var(--ts, 1)); margin: 2px 0 0; }
.jc-top { display: flex; justify-content: space-between; font-size: calc(13px * var(--ts, 1)); color: var(--stone); }
.jc-title { color: var(--gold); font-weight: 600; }
.path { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; position: relative; }
.path::before { content: ''; position: absolute; inset-inline: 10px; top: 50%; height: 2px; background: var(--hair); }
.node { position: relative; width: 24px; height: 24px; display: grid; place-items: center; }
.node i { display: block; width: 11px; height: 11px; transform: rotate(45deg); background: var(--card); border: 1.5px solid var(--stone); }
.node.done i { background: var(--gold-line); border-color: var(--gold-line); }
.node.now i { width: 15px; height: 15px; background: var(--kiswah); border-color: var(--gold-line); box-shadow: 0 0 0 4px var(--gold-soft); }
.jc-label { margin: 6px 0 0; font-size: calc(13px * var(--ts, 1)); color: var(--stone); }
.jc-now { font-family: var(--naskh); font-size: calc(31px * var(--ts, 1)); margin: 0; line-height: 1.35; }
.jc-place { margin: 0 0 14px; color: var(--stone); }
.journey-card .btn { width: 100%; margin-top: 6px; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tool { background: var(--card); border: 1px solid var(--hair); border-radius: 18px; padding: 14px; text-decoration: none; display: flex; flex-direction: column; gap: 2px; min-height: 116px; }
.tool .ic { width: 26px; height: 26px; color: var(--gold-line); margin-bottom: 8px; }
.tool b { font-size: calc(15.5px * var(--ts, 1)); }
.tool span { font-size: calc(12.5px * var(--ts, 1)); color: var(--stone); line-height: 1.55; }

/* journey */
.stops { list-style: none; padding: 0; margin: 6px 0 14px; position: relative; }
.stops::before { content: ''; position: absolute; inset-inline-start: 25px; top: 24px; bottom: 24px; width: 2px; background: var(--hair); }
.stop a { display: flex; align-items: center; gap: 14px; padding: 8px 4px; text-decoration: none; position: relative; }
.num { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--card); border: 1px solid var(--hair); font-family: var(--naskh); font-size: calc(21px * var(--ts, 1)); font-weight: 700; position: relative; z-index: 1; }
.stop.done .num { background: var(--gold-line); border-color: var(--gold-line); color: var(--on-line); }
.stop.now .num { background: var(--kiswah); color: var(--gold-2); border-color: var(--kiswah); }
.stop-t { display: flex; flex-direction: column; flex: 1; line-height: 1.5; }
.stop-t b { font-size: calc(17px * var(--ts, 1)); }
.stop-t small { color: var(--stone); font-size: calc(13px * var(--ts, 1)); }
.ic.ok { color: var(--gold-line); }

/* station */
.seg { display: flex; gap: 4px; overflow-x: auto; padding: 4px; background: var(--card); border: 1px solid var(--hair); border-radius: 14px; margin: 12px 0; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg a, .seg button { flex: 1 0 auto; text-align: center; padding: 8px 14px; border-radius: 10px; text-decoration: none; font-size: calc(14.5px * var(--ts, 1)); background: none; border: 0; color: var(--ink); cursor: pointer; white-space: nowrap; }
.seg .on { background: var(--btn-bg); color: var(--btn-fg); font-weight: 600; }
/* every small switch is a full width control with equal, tall segments, like the one on the home screen */
.seg.small { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; width: 100%; gap: 6px; padding: 4px; margin: 0; }
.seg.small button { min-height: 48px; padding: 10px 8px; border: 0; background: none; white-space: normal; line-height: 1.4; font-size: calc(15px * var(--ts, 1)); }
.lines { margin: 0; padding: 0; list-style: none; counter-reset: s; }
.lines li { position: relative; padding: 12px 0; padding-inline-start: 44px; border-bottom: 1px solid var(--hair); line-height: 1.95; }
.lines li:last-child { border-bottom: 0; }
.lines.do li { counter-increment: s; }
.lines.do li::before { content: counter(s, arabic-indic); position: absolute; inset-inline-start: 0; top: 13px; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--kiswah); color: var(--gold-2); font-family: var(--naskh); font-weight: 700; font-size: calc(17px * var(--ts, 1)); line-height: 1; }
[dir="ltr"] .lines.do li::before { content: counter(s); font-family: var(--ui); font-size: calc(14px * var(--ts, 1)); }
.lines.watch li::before { content: ''; position: absolute; inset-inline-start: 10px; top: 23px; width: 10px; height: 10px; transform: rotate(45deg); background: var(--danger); }
.lines.calm li::before { content: ''; position: absolute; inset-inline-start: 9px; top: 22px; width: 12px; height: 12px; border-radius: 50%; background: var(--gold-line); }
.lines.women li::before { content: ''; position: absolute; inset-inline-start: 9px; top: 22px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--gold-line); }
.lines.dot li { padding-inline-start: 24px; }
.lines.dot li::before { content: ''; position: absolute; inset-inline-start: 6px; top: 24px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-line); }
.panel { margin-top: 4px; }
.st-nav { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; margin: 22px 0 8px; }
details.srcs { margin: 18px 0 6px; }
details.srcs summary { cursor: pointer; color: var(--stone); font-size: calc(14px * var(--ts, 1)); }
.srclist { list-style: none; padding: 0; margin: 8px 0 0; }
.srclist li { padding: 5px 0; font-size: calc(13.5px * var(--ts, 1)); line-height: 1.75; }
.srclist a { color: var(--gold); }

/* duas */
.dua { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 16px 8px; margin: 12px 0; }
.dua-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.dua-h h3 { margin: 0; font-size: calc(14px * var(--ts, 1)); color: var(--gold); font-weight: 600; }
.ref { display: inline-block; font-size: calc(12px * var(--ts, 1)); color: var(--gold); border: 1px solid var(--gold-line); border-radius: 999px; padding: 0 10px; line-height: 1.9; white-space: nowrap; }
.dua-ar { font-family: var(--naskh); font-size: calc(var(--dua-size) * var(--ts, 1)); line-height: 2.05; margin: 8px 0; color: var(--ink); font-feature-settings: 'kern'; }
.dua-ar.sm { font-size: calc((var(--dua-size) - 3px) * var(--ts, 1)); }
.dua-ar.xs { font-size: calc((var(--dua-size) - 6px) * var(--ts, 1)); margin: 2px 0; }
.tr { font-style: italic; color: var(--stone); margin: 4px 0; font-size: calc(14px * var(--ts, 1)); line-height: 1.6; }
.mean { margin: 6px 0; font-size: calc(15px * var(--ts, 1)); line-height: 1.7; }
.dua-act { display: flex; gap: 2px; justify-content: flex-end; border-top: 1px dashed var(--hair); margin-top: 6px; padding-top: 4px; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; border: 0; background: none; color: var(--stone); cursor: pointer; }
.icon-btn.on { color: var(--gold-line); }
.found-in { margin: 18px 0 -6px; font-size: calc(13px * var(--ts, 1)); }
.found-in a { color: var(--gold); }
.search { width: 100%; font: inherit; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); margin: 2px 0 6px; }
.grid-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.sec-card { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px; text-decoration: none; display: flex; flex-direction: column; gap: 0; min-height: 80px; position: relative; overflow: hidden; }
.sec-card::before { content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-line); }
.sec-card b { font-family: var(--naskh); font-size: calc(20px * var(--ts, 1)); font-weight: 700; line-height: 1.45; }
.sec-card span { color: var(--stone); font-size: calc(12.5px * var(--ts, 1)); }
.dua.mine .dua-ar { font-size: calc((var(--dua-size) - 3px) * var(--ts, 1)); }

/* forms */
.form { display: flex; flex-direction: column; gap: 10px; }
.form label { display: flex; flex-direction: column; gap: 4px; font-size: calc(14px * var(--ts, 1)); color: var(--stone); }
.form input, .form textarea, .inline-add input, input.time { font: inherit; color: var(--ink); background: var(--marble); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; width: 100%; }
.form textarea { resize: vertical; }
.inline-add { display: flex; gap: 8px; margin-top: 10px; }
.inline-add input { flex: 1; min-width: 0; }

/* trusts */
.trusts { list-style: none; padding: 0; margin: 8px 0; }
.trust { display: flex; gap: 10px; align-items: flex-start; background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 12px; margin: 8px 0; }
.tick { width: 36px; height: 36px; flex: none; border-radius: 10px; border: 1.5px solid var(--gold-line); background: none; color: transparent; display: grid; place-items: center; cursor: pointer; }
.trust.done .tick { background: var(--gold-line); color: var(--on-line); }
.tr-t { flex: 1; min-width: 0; line-height: 1.6; }
.tr-t b { font-size: calc(16px * var(--ts, 1)); }
.tr-t p { margin: 2px 0 0; color: var(--stone); font-size: calc(14px * var(--ts, 1)); overflow-wrap: anywhere; }
.tr-t small { color: var(--gold); font-size: calc(12.5px * var(--ts, 1)); }
.trust.done .tr-t b { text-decoration: line-through; text-decoration-color: var(--gold-line); }

/* preparation */
.progress { height: 8px; border-radius: 99px; background: var(--hair); overflow: hidden; margin-top: 10px; }
.progress div { height: 100%; background: var(--gold-line); border-radius: 99px; }
.grp h2 { font-family: var(--naskh); font-size: calc(23px * var(--ts, 1)); margin: 0 0 2px; }
.chk { display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--hair); }
.chk:last-of-type { border-bottom: 0; }
.chk label { display: flex; gap: 12px; align-items: flex-start; flex: 1; padding: 11px 0; cursor: pointer; line-height: 1.8; position: relative; }
.chk input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chk .box { width: 24px; height: 24px; flex: none; border-radius: 7px; border: 1.5px solid var(--gold-line); display: grid; place-items: center; color: transparent; margin-top: 4px; }
.chk .box .ic { width: 16px; height: 16px; stroke-width: 2.4; }
.chk.on .box { background: var(--gold-line); color: var(--on-line); }
.chk.on .txt { color: var(--stone); }
.chk input:focus-visible + .box { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.go { color: var(--stone); padding: 8px; display: grid; place-items: center; }

/* counters */
body[data-view="tawaf"] .wrap, body[data-view="sai"] .wrap { padding-bottom: 130px; }
.tawaf-svg { display: block; width: min(100%, 360px); margin: 2px auto 0; direction: ltr; }
.tawaf-svg .mataf { fill: var(--card); stroke: var(--hair); }
.tawaf-svg .seg { fill: none; stroke: var(--hair); stroke-width: 14; stroke-linecap: round; }
.tawaf-svg .seg.done { stroke: var(--gold-line); }
.tawaf-svg .seg.now { stroke: var(--ink); }
.tawaf-svg .dir { fill: var(--gold-line); }
.tawaf-svg .start { stroke: var(--gold-line); stroke-width: 2; stroke-dasharray: 4 4; }
.tawaf-svg .hijr { fill: none; stroke: var(--stone); stroke-width: 3.5; stroke-linecap: round; }
.tawaf-svg .maqam { fill: var(--card); stroke: var(--gold-line); stroke-width: 2; }
.tawaf-svg .kaaba { fill: #151310; stroke: #3A352B; stroke-width: 1; }
.tawaf-svg .hizam-line { fill: none; stroke: #D8B96F; stroke-width: 3; }
.tawaf-svg .stone { fill: #D8B96F; stroke: #151310; stroke-width: 2; }
.tawaf-svg .yamani { fill: var(--card); stroke: var(--gold-line); stroke-width: 2; }
.tawaf-svg .count { font-family: var(--naskh); font-size: 48px; font-weight: 700; fill: #D8B96F; text-anchor: middle; }
.tawaf-svg .of { font-family: var(--ui); font-size: 12px; fill: #CFC7B4; text-anchor: middle; }
.tawaf-svg .lbl { font-family: var(--ui); font-size: 11.5px; fill: var(--stone); text-anchor: middle; }
@media (prefers-reduced-motion: no-preference) {
  .tawaf-svg .seg.now { animation: breathe 1.8s ease-in-out infinite; }
  .node.now i { animation: breathe 2.4s ease-in-out infinite; }
}
@keyframes breathe { 50% { opacity: .45; } }
.lap-now { text-align: center; font-family: var(--naskh); font-size: calc(29px * var(--ts, 1)); font-weight: 700; margin: 0; }
.tips { list-style: none; padding: 0; margin: 10px 0; }
.tips li { background: var(--card); border: 1px solid var(--hair); border-radius: 12px; padding: 8px 12px; margin: 6px 0; font-size: calc(14.5px * var(--ts, 1)); line-height: 1.75; }
.corner-dua { background: var(--kiswah); color: var(--band-ink); border-radius: var(--radius); padding: 12px 14px 10px; margin: 12px 0; border-bottom: 3px solid var(--gold-line); }
.corner-dua .lbl { margin: 0; font-size: calc(13px * var(--ts, 1)); color: #D8B96F; }
.corner-dua .dua-ar { color: var(--band-ink); margin: 2px 0; }
.corner-dua .mean { color: #CFC7B4; }
.row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 4px; }
.row3.two { grid-template-columns: 1fr 1fr; }
.row3 .btn { padding: 6px 8px; font-size: calc(13.5px * var(--ts, 1)); }
.dock { position: fixed; inset-inline: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); padding: 10px 16px 8px; z-index: 15; background: linear-gradient(to top, var(--marble) 72%, transparent); }
.tap { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; max-width: 608px; margin: 0 auto; min-height: 78px; border-radius: 20px; border: 0; background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; box-shadow: 0 8px 24px rgba(21, 19, 16, .22); touch-action: manipulation; }
.tap span { font-size: calc(21px * var(--ts, 1)); font-weight: 700; line-height: 1.4; }
.tap small { font-size: calc(12.5px * var(--ts, 1)); opacity: .82; }
.tap:active { transform: scale(.985); }
.pause-box { max-width: 608px; margin: 0 auto; background: var(--card); border: 1px solid var(--gold-line); border-radius: 20px; padding: 12px; text-align: center; }
.pause-box p { margin: 0 0 8px; }
.pause-box .btn { width: 100%; }
.done-box { text-align: center; padding: 6px 0; }
.done-box .ic { width: 46px; height: 46px; color: var(--gold-line); stroke-width: 2; }
.done-box h2 { font-family: var(--naskh); font-size: calc(27px * var(--ts, 1)); margin: 2px 0 12px; }
.doubt p { margin: 0 0 10px; }
.moment { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--hair); background: var(--card); text-decoration: none; font-size: calc(14px * var(--ts, 1)); margin-top: 8px; }
.chip .ic { width: 18px; height: 18px; }
.chip.gold { border-color: var(--gold-line); color: var(--gold); }

.sai-grid { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: start; }
.sai-svg { width: 96px; height: auto; direction: ltr; position: sticky; top: 92px; }
.sai-svg .hill { fill: var(--hair); }
.sai-svg .track { fill: var(--hair); }
.sai-svg .green { fill: var(--green); }
.sai-svg .you { fill: var(--gold-line); stroke: var(--ink); stroke-width: 3; }
.sai-svg .dir { fill: var(--ink); }
.sai-svg .lbl { font-family: var(--naskh); font-weight: 700; font-size: 19px; fill: var(--ink); text-anchor: middle; }
.legs { list-style: none; display: flex; gap: 5px; padding: 0; margin: 0 0 8px; flex-wrap: wrap; }
.legs li { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; border: 1px solid var(--hair); background: var(--card); font-family: var(--naskh); font-weight: 700; font-size: calc(16px * var(--ts, 1)); }
.legs li.done { background: var(--gold-line); border-color: var(--gold-line); color: var(--on-line); }
.legs li.now { background: var(--btn-bg); color: var(--btn-fg); border-color: transparent; }
.endcard { margin-top: 4px; }
.endcard h2 { font-family: var(--naskh); font-size: calc(24px * var(--ts, 1)); margin: 0 0 4px; }
.mini { border-bottom: 1px dashed var(--hair); padding-bottom: 6px; margin-bottom: 6px; }
.mini-t { margin: 0; font-size: calc(12.5px * var(--ts, 1)); color: var(--gold); }
.rounds { display: flex; align-items: center; gap: 6px; margin: 8px 0; }
.rounds i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--gold-line); }
.rounds i.on { background: var(--gold-line); }
.rounds span { font-size: calc(13.5px * var(--ts, 1)); color: var(--stone); margin-inline-start: 6px; }
.walk { margin: 12px 0; }
.walk .go { font-family: var(--naskh); font-size: calc(25px * var(--ts, 1)); font-weight: 700; margin: 0; }
.green-tip { display: flex; gap: 8px; align-items: center; font-size: calc(14px * var(--ts, 1)); color: var(--stone); margin: 4px 0; line-height: 1.6; }
.green-tip i { width: 12px; height: 24px; border-radius: 4px; background: var(--green); flex: none; }

/* miqat */
.hadith { margin: 12px 0; padding: 14px 16px; background: var(--card); border: 1px solid var(--hair); border-inline-start: 3px solid var(--gold-line); border-radius: 12px; font-family: var(--naskh); font-size: calc(20px * var(--ts, 1)); line-height: 2; }
[dir="ltr"] .hadith { font-family: var(--ui); font-size: calc(15px * var(--ts, 1)); line-height: 1.7; }
.miqat-svg { display: block; width: min(100%, 360px); margin: 8px auto 0; direction: ltr; }
.miqat-svg .ring { fill: none; stroke: var(--hair); stroke-dasharray: 3 5; }
.miqat-svg .spoke { stroke: var(--hair); }
.miqat-svg .mq-dot { fill: var(--gold-line); stroke: var(--card); stroke-width: 2; }
.miqat-svg .mq-lbl { font-family: var(--naskh); font-weight: 700; font-size: 15px; fill: var(--ink); text-anchor: middle; paint-order: stroke; stroke: var(--marble); stroke-width: 4px; stroke-linejoin: round; }
.miqat-svg .mk { fill: #151310; stroke: #D8B96F; stroke-width: 2; }
.miqat-svg .mk-lbl { font-family: var(--naskh); font-weight: 700; font-size: 16px; fill: var(--ink); text-anchor: middle; }
.miqat-svg .north { font-family: var(--ui); font-size: 11px; fill: var(--stone); text-anchor: middle; }
.miqat-svg .north-ar { fill: var(--stone); }
.mqs { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.mq { background: var(--card); border: 1px solid var(--hair); border-radius: 14px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 0 10px; line-height: 1.7; }
.mq b { font-family: var(--naskh); font-size: calc(22px * var(--ts, 1)); }
.mq span { grid-column: 1; font-size: calc(14px * var(--ts, 1)); }
.mq small { grid-column: 1 / -1; color: var(--stone); font-size: calc(13px * var(--ts, 1)); }
.mq em { grid-row: 1; grid-column: 2; font-style: normal; font-size: calc(12.5px * var(--ts, 1)); color: var(--gold); align-self: center; }
.flight h3 { display: flex; gap: 8px; align-items: center; margin: 0 0 4px; font-size: calc(17px * var(--ts, 1)); }
.flight h3 .ic { color: var(--gold-line); }
.flight .lbl { display: block; font-size: calc(13.5px * var(--ts, 1)); color: var(--stone); margin: 10px 0 6px; }
.radios { display: grid; gap: 6px; }
.radio { display: flex; gap: 10px; align-items: center; border: 1px solid var(--hair); border-radius: 12px; padding: 10px 12px; cursor: pointer; font-size: calc(14.5px * var(--ts, 1)); line-height: 1.6; }
.radio.on { border-color: var(--gold-line); background: var(--gold-soft); }
.radio input { accent-color: var(--gold-line); }
input.time { margin-bottom: 12px; font-size: calc(20px * var(--ts, 1)); text-align: center; }
.flight .btn { width: 100%; }
.fs { margin: 10px 0 0; font-size: calc(15px * var(--ts, 1)); }
.fs.now { font-weight: 700; color: var(--gold); }
.fs.past { color: var(--stone); }

/* hajj */
details.nusk summary { display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none; }
details.nusk summary::-webkit-details-marker { display: none; }
details.nusk summary b { font-family: var(--naskh); font-size: calc(23px * var(--ts, 1)); }
details.nusk[open] summary { margin-bottom: 6px; }
.days { list-style: none; padding: 0; margin: 0; }
.day { background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); padding: 14px 16px; margin: 12px 0; }
.day-h .d { font-size: calc(12.5px * var(--ts, 1)); color: var(--gold); }
.day-h h3 { margin: 0; font-family: var(--naskh); font-size: calc(25px * var(--ts, 1)); line-height: 1.4; }
.day .dua { border-color: var(--hair); background: var(--marble); }

/* more */
.links { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--hair); border-radius: var(--radius); overflow: hidden; margin: 12px 0; }
.links a, .links button { display: flex; align-items: center; gap: 12px; padding: 14px 16px; text-decoration: none; border-bottom: 1px solid var(--hair); }
.links button { width: 100%; background: none; border-inline: 0; border-top: 0; color: var(--ink); text-align: start; cursor: pointer; min-height: 56px; }
.links a:last-child, .links button:last-child { border-bottom: 0; }
.links a span, .links button span { flex: 1; min-width: 0; }
.links a .ic:first-child, .links button .ic:first-child { color: var(--gold-line); }
.links .ic.fwd { color: var(--stone); width: 18px; height: 18px; }
/* share, rate, feedback and the tour: a title with a line under it, like the switches */
.links.acts button { padding: 12px 16px; }
.links.acts b { display: block; font-weight: 600; line-height: 1.6; }
.links.acts small { display: block; color: var(--stone); font-size: calc(12.5px * var(--ts, 1)); line-height: 1.6; }
.set-row { display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--hair); }
.set-row > span { font-weight: 600; font-size: calc(15px * var(--ts, 1)); }
.set-row:last-child { border-bottom: 0; }
.set .seg.small .on { background: var(--btn-bg); color: var(--btn-fg); }
.about p { margin: 6px 0; line-height: 1.95; }
.about a { color: var(--gold); }
.ver { color: var(--stone); font-size: calc(13px * var(--ts, 1)); }

/* chrome */
#tabs { position: fixed; inset-inline: 0; bottom: 0; z-index: 30; display: flex; justify-content: space-around; background: var(--card); border-top: 1px solid var(--hair); padding: 6px 8px env(safe-area-inset-bottom); height: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
#tabs a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-decoration: none; font-size: calc(12px * var(--ts, 1)); color: var(--stone); max-width: 120px; position: relative; }
#tabs a .ic { width: 23px; height: 23px; }
#tabs a.on { color: var(--ink); font-weight: 700; }
#tabs a.on .ic { color: var(--gold-line); }
#tabs a.on::after { content: ''; position: absolute; top: -6px; width: 26px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-line); }
#toast { position: fixed; left: 50%; bottom: calc(var(--nav-h) + 110px); transform: translate(-50%, 16px); background: var(--kiswah); color: var(--gold-2); padding: 8px 16px; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s var(--ease-out); z-index: 50; font-size: calc(14px * var(--ts, 1)); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
#banner { position: fixed; inset-inline: 12px; top: calc(10px + env(safe-area-inset-top)); z-index: 60; background: var(--kiswah); color: var(--band-ink); border: 1px solid var(--gold-line); border-radius: 16px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); max-width: 616px; margin: 0 auto; }
#banner[hidden] { display: none; }
#banner p { margin: 0; flex: 1; font-weight: 700; color: #D8B96F; line-height: 1.7; }
#banner button { background: none; border: 1px solid #D8B96F; color: #D8B96F; border-radius: 10px; width: 42px; height: 42px; display: grid; place-items: center; flex: none; cursor: pointer; }

@media (min-width: 700px) {
  .tools { grid-template-columns: repeat(3, 1fr); }
  .grid-sec { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Hajj and Umrah: journey switch, forms of Hajj, tawaf and sa'i kinds */
.seg.mode { margin: 14px 0 0; }
.seg.mode button { font-size: calc(17px * var(--ts, 1)); font-weight: 600; padding: 10px 14px; }
.jc-title { text-decoration: none; }
.jc-nusk { margin: -4px 0 14px; font-size: calc(14px * var(--ts, 1)); color: var(--stone); }
.jc-nusk b { color: var(--ink); font-weight: 700; }
.jc-nusk a { color: var(--gold); margin-inline-start: 6px; font-weight: 600; }
.nusk-box { background: var(--gold-soft); border: 1px solid var(--gold-line); border-radius: 14px; padding: 10px 14px 2px; margin: 4px 0 12px; }
.nb-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: calc(13.5px * var(--ts, 1)); color: var(--gold); font-weight: 700; }
.nb-h a { color: var(--gold); font-weight: 600; }
.nusk-box .lines li { border-bottom-color: rgba(184, 146, 75, .28); border-bottom-color: color-mix(in srgb, var(--gold-line) 30%, transparent); }
.nusk-box .lines li:last-child { border-bottom: 0; }
.seg.small.kinds { margin: 12px 0 14px; }
.seg.small a { min-height: 48px; padding: 10px 8px; border: 0; background: none; white-space: normal; line-height: 1.4; font-size: calc(15px * var(--ts, 1)); display: flex; align-items: center; justify-content: center; }
.seg.small { overflow: visible; }
.seg.small button.on, .seg.small a.on { background: var(--btn-bg); color: var(--btn-fg); font-weight: 700; }
.nusk-pick .lbl { margin: 0 0 8px; font-size: calc(13.5px * var(--ts, 1)); color: var(--stone); }
.more-link { display: inline-block; margin-top: 12px; color: var(--gold); font-size: calc(14px * var(--ts, 1)); font-weight: 600; }
.nusk-card.on { border-color: var(--gold-line); box-shadow: inset 0 0 0 1px var(--gold-line); }
.nc-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 4px; }
.nc-h h2 { font-family: var(--naskh); font-size: calc(27px * var(--ts, 1)); margin: 0; }
.pill { font-size: calc(12.5px * var(--ts, 1)); background: var(--gold-line); color: var(--on-line); border-radius: 999px; padding: 3px 12px; font-weight: 700; white-space: nowrap; }
.done-box .note { margin: 0 0 12px; }
.done-box .btn { display: flex; width: 100%; margin-top: 8px; }

/* the mark in the band, drawn in the palette's metal */
.brand-mark { width: 58px; height: 58px; flex: none; margin-inline-start: auto; background: linear-gradient(135deg, var(--gold-2), var(--gold-line) 55%, var(--gold-2));
  -webkit-mask: url(../assets/mark-flat.svg) center / contain no-repeat; mask: url(../assets/mark-flat.svg) center / contain no-repeat; }
.hizam.big .brand-mark { width: 72px; height: 72px; }
.date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.look-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--hair); background: var(--card); color: var(--gold); text-decoration: none; font-size: calc(13px * var(--ts, 1)); font-weight: 600; min-height: 40px; }
.look-btn .ic { width: 18px; height: 18px; }

/* appearance and accessibility */
.preview { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hair); background: var(--marble); margin: 12px 0; }
.pv-band { background: var(--kiswah); color: var(--band-ink); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 3px solid var(--gold-line); }
.pv-band b { font-family: var(--naskh); font-size: calc(30px * var(--ts, 1)); color: var(--gold-2); line-height: 1.2; }
.pv-band small { display: block; font-size: calc(12px * var(--ts, 1)); opacity: .8; }
.pv-band .brand-mark { width: 46px; height: 46px; margin: 0; }
.pv-body { padding: 12px 16px 16px; }
.pv-body .dua-ar { margin: 0 0 8px; }
.pv-body .note { margin: 0 0 10px; }
.pv-body .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.pv-body .ref { font-size: calc(12px * var(--ts, 1)); }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(94px, 1fr)); gap: 8px; }
.swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); cursor: pointer; font-size: calc(12.5px * var(--ts, 1)); line-height: 1.5; text-align: center; }
.swatch.on { border-color: var(--gold-line); box-shadow: inset 0 0 0 1px var(--gold-line); font-weight: 700; }
.swatch i { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 0 58%, var(--b) 58% 100%); box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--hair); }
.swatch.on i { box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--gold-line); }
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.pick { display: flex; flex-direction: column; gap: 6px; font-size: calc(13px * var(--ts, 1)); color: var(--stone); }
.pick input[type="color"] { width: 100%; height: 46px; border: 1px solid var(--hair); border-radius: 12px; background: var(--card); padding: 4px; cursor: pointer; }
.switch { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; background: none; border: 0; border-bottom: 1px solid var(--hair); color: var(--ink); cursor: pointer; text-align: start; min-height: 52px; }
.switch:last-child { border-bottom: 0; }
.switch .sw-t b { display: block; font-weight: 600; }
.switch .sw-t small { display: block; color: var(--stone); font-size: calc(12.5px * var(--ts, 1)); line-height: 1.6; }
.knob { position: relative; width: 50px; height: 30px; flex: none; border-radius: 999px; background: var(--hair); transition: background-color .2s ease; }
.knob::after { content: ''; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--card); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s var(--ease-out), background-color .2s ease; }
.switch[aria-checked="true"] .knob { background: var(--btn-bg); }
.switch[aria-checked="true"] .knob::after { transform: translateX(20px); background: var(--btn-fg); }
[dir="rtl"] .switch[aria-checked="true"] .knob::after { transform: translateX(-20px); }
.set .lbl { margin: 0 0 8px; color: var(--stone); font-size: calc(13.5px * var(--ts, 1)); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* accessibility switches */
:root[data-bold="1"] body { font-weight: 600; }
:root[data-bold="1"] b, :root[data-bold="1"] strong, :root[data-bold="1"] h2, :root[data-bold="1"] h3, :root[data-bold="1"] .btn { font-weight: 800; }
:root[data-bold="1"] .dua-ar { font-weight: 700; }
:root[data-contrast="1"] p a, :root[data-contrast="1"] .srclist a, :root[data-contrast="1"] .nb-h a, :root[data-contrast="1"] .more-link { text-decoration: underline; text-underline-offset: 3px; }
:root[data-contrast="1"] .card, :root[data-contrast="1"] .tool, :root[data-contrast="1"] .seg, :root[data-contrast="1"] .btn { border-width: 1.5px; }
:root[data-contrast="1"] :focus-visible { outline-width: 3px; outline-color: var(--ink); }
:root[data-large="1"] .seg:not(.small) { flex-wrap: wrap; }
:root[data-large="1"] .seg:not(.small) a, :root[data-large="1"] .seg:not(.small) button { flex: 1 1 auto; }
:root[data-spacing="1"] body { line-height: 2.1; }
:root[data-spacing="1"] .lines li, :root[data-spacing="1"] .lead, :root[data-spacing="1"] .note, :root[data-spacing="1"] .tips li { line-height: 2.3; }
:root[data-spacing="1"] .dua-ar { line-height: 2.5; }
:root[data-motion="1"] *, :root[data-motion="1"] *::before, :root[data-motion="1"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }

/* the welcome: the mark where the phone's launch screen left it, then the talbiyah in gold */
#splash { position: fixed; inset: 0; z-index: 100; background: radial-gradient(ellipse at 50% 46%, #241E15 0%, #110F0B 58%, #070605 100%); transition: opacity .7s ease, visibility .7s ease; cursor: pointer; }
#splash.out { opacity: 0; visibility: hidden; }
.sp-mark { position: absolute; left: 50%; top: 50%; width: 176px; height: 176px; margin: -88px 0 0 -88px; animation: sp-mark 1.1s ease both; }
.sp-words { position: absolute; left: 0; right: 0; top: calc(50% + 112px); text-align: center; padding: 0 24px; }
.sp-words p { margin: 0; font-family: var(--naskh); font-weight: 700; }
.sp-one { font-size: calc(46px * var(--ts, 1)); line-height: 1.5; background: linear-gradient(100deg, #A67B33 0%, #E4C57C 22%, #FBF0C8 42%, #EDD48E 62%, #B8893C 82%, #A67B33 100%); background-size: 260% 100%; background-position: 35% 0; padding: .05em .1em .4em; margin-bottom: -.35em; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sp-rise .9s .3s ease both; }
.sp-two { font-size: calc(25px * var(--ts, 1)); line-height: 1.8; color: #E4D3A8; opacity: .85; animation: sp-rise .9s .75s ease both; }
.sp-name { font-size: calc(17px * var(--ts, 1)); line-height: 2.6; color: #CDBB92; letter-spacing: 1px; opacity: .7; animation: sp-rise .9s 1.05s ease both; }
@keyframes sp-mark { from { opacity: .0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #splash *, #splash { animation: none !important; transition-duration: .2s !important; } .sp-one { background-position: 35% 0; } }
:root[data-motion="1"] #splash *, :root[data-motion="1"] #splash { animation: none !important; transition-duration: .2s !important; }

/* the tour: one card at a time, rising from the bottom over a dimmed page */
#tour { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; padding: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom)); background: rgba(7, 6, 5, .7); animation: tour-dim .3s ease both; }
#tour[hidden] { display: none; }
body[data-tour="1"] { overflow: hidden; }
.tour-card { --rise: 28px; touch-action: pan-y; width: 100%; max-width: 560px; background: var(--card); color: var(--ink); border: 1px solid var(--gold-line); border-radius: 26px; padding: 26px 20px 16px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 0 0 5px var(--card), inset 0 0 0 6px rgba(184, 146, 75, .45); animation: tour-rise .38s var(--ease-out) both; }
.tour-card.step { --rise: 10px; animation-duration: .22s; }
.tour-ic { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 10px; border-radius: 50%; background: radial-gradient(circle at 50% 35%, var(--gold-soft) 0%, var(--card) 80%); box-shadow: inset 0 0 0 1px var(--gold-line); color: var(--gold); }
.tour-ic .ic { width: 36px; height: 36px; stroke-width: 1.5; }
.tour-n { margin: 0; font-size: calc(12.5px * var(--ts, 1)); font-weight: 700; letter-spacing: .4px; color: var(--gold); }
.tour-card h2 { margin: 2px 0 6px; font-family: var(--naskh); font-weight: 700; font-size: calc(30px * var(--ts, 1)); line-height: 1.35; outline: none; }
.tour-b { margin: 0 auto 16px; max-width: 460px; font-size: calc(15.5px * var(--ts, 1)); line-height: 1.95; color: var(--ink); }
[dir="ltr"] .tour-b { line-height: 1.7; }
.tour-dots { display: flex; justify-content: center; gap: 8px; margin: 0 0 16px; }
.tour-dots i { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--gold-line); background: transparent; transition: background .2s; }
.tour-dots i.done { background: var(--gold-line); }
.tour-dots i.on { background: var(--kiswah); border-color: var(--gold-line); box-shadow: 0 0 0 3px var(--gold-soft); }
.tour-card .btn.wide { margin: 0 0 8px; min-height: 54px; font-size: calc(17px * var(--ts, 1)); }
.tour-card .btn.ghost { margin-bottom: 0; border-color: transparent; color: var(--stone); }
@keyframes tour-dim { from { opacity: 0; } to { opacity: 1; } }
@keyframes tour-rise { from { opacity: 0; transform: translateY(var(--rise)); } to { opacity: 1; transform: none; } }
@media (min-width: 700px) { #tour { align-items: center; } }

/* the faith that runs under the journey: a verse or a hadith in a gold frame */
.faith { position: relative; margin: 14px 0; padding: 20px 18px 16px; text-align: center; border-radius: var(--radius); border: 1px solid var(--gold-line);
  background: radial-gradient(ellipse at 50% 0%, var(--gold-soft) 0%, var(--card) 72%); box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6px rgba(184, 146, 75, .45); }
.faith::before, .faith::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; background: var(--gold-line); transform: rotate(45deg); }
.faith::before { inset-inline-start: -5px; }
.faith::after { inset-inline-end: -5px; }
.faith-orn { display: block; width: 34px; height: 34px; margin: 0 auto 6px; background: linear-gradient(135deg, var(--gold-2), var(--gold-line) 55%, var(--gold-2));
  -webkit-mask: url(../assets/mark-flat.svg) center / contain no-repeat; mask: url(../assets/mark-flat.svg) center / contain no-repeat; }
.faith-lbl { display: block; font-size: calc(12px * var(--ts, 1)); font-weight: 700; letter-spacing: .6px; color: var(--gold); margin-bottom: 4px; }
.faith-ar { margin: 0; font-family: var(--naskh); font-weight: 700; font-size: calc(24px * var(--ts, 1)); line-height: 2.05; color: var(--ink); }
.faith-ar .br { color: var(--gold-line); font-weight: 400; margin: 0 2px; }
.faith-en { margin: 6px 0 0; font-size: calc(14px * var(--ts, 1)); line-height: 1.7; color: var(--ink); }
.faith-ref { margin: 8px 0 0; font-size: calc(12.5px * var(--ts, 1)); color: var(--gold); font-weight: 600; }
.faith.at-station { margin-top: 4px; padding: 14px 16px 12px; }
.faith.at-station .faith-orn { width: 26px; height: 26px; margin-bottom: 2px; }
.faith.at-station .faith-ar { font-size: calc(22px * var(--ts, 1)); }

/* the sources page */
.plaque { position: relative; text-align: center; margin: 4px 0 14px; padding: 22px 18px 18px; border-radius: var(--radius); background: var(--kiswah); color: var(--band-ink);
  border-bottom: 3px solid var(--gold-line); box-shadow: inset 0 0 0 5px var(--kiswah), inset 0 0 0 6px rgba(221, 190, 120, .4); }
.plaque .brand-mark { display: block; width: 64px; height: 64px; margin: 0 auto 6px; }
.plaque h2 { margin: 0 0 4px; font-family: var(--naskh); font-size: calc(24px * var(--ts, 1)); color: var(--gold-2); }
.plaque .faith-ar { color: var(--band-ink); font-size: calc(30px * var(--ts, 1)); }
.plaque .faith-ar .br { color: var(--gold-2); }
.plaque .faith-en { color: var(--band-ink); opacity: .9; }
.plaque .faith-ref { color: var(--gold-2); }
.plaque-note { margin: 10px auto 0; max-width: 460px; font-size: calc(13.5px * var(--ts, 1)); line-height: 1.8; color: var(--band-ink); opacity: .85; }
.src-cards { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 16px; }
.src-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--hair); text-decoration: none; color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .src-card:hover { border-color: var(--gold-line); } }
.src-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--gold-soft); color: var(--gold); }
.src-ic .ic { width: 21px; height: 21px; }
.src-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.src-t b { font-weight: 700; line-height: 1.6; }
.src-t span { font-size: calc(13px * var(--ts, 1)); color: var(--stone); line-height: 1.7; }
.src-t small { font-size: calc(11.5px * var(--ts, 1)); color: var(--gold); text-align: start; }
.src-go { color: var(--stone); flex: none; }
.src-go .ic { width: 18px; height: 18px; }
[dir="rtl"] .src-go .ic { transform: scaleX(-1); }
[dir="rtl"] .src-t small { text-align: right; }
.dua-ar, .faith-ar { overflow-wrap: break-word; }
.tr-t b, .chk .txt, .stop-t b, .src-t b, .tour-card h2 { overflow-wrap: anywhere; }

/* both calendars on the home screen, and the count to Arafah */
.date span { display: block; }
.date .greg { font-size: calc(12.5px * var(--ts, 1)); color: var(--stone); margin-top: 1px; }
.count-card { display: flex; align-items: center; gap: 14px; margin: 12px 0; padding: 14px 16px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--gold-line); color: var(--ink); text-decoration: none; }
.count-card .ic { width: 30px; height: 30px; flex: none; color: var(--gold); }
.cc-t b { display: block; font-family: var(--naskh); font-weight: 700; font-size: calc(25px * var(--ts, 1)); line-height: 1.4; color: var(--gold); }
.cc-t small { display: block; font-size: calc(13px * var(--ts, 1)); line-height: 1.7; color: var(--stone); }

/* the tasbeeh */
.tasbeeh { text-align: center; }
.seg.small.wrapseg { grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); margin-top: 12px; }
.seg.small.wrapseg button { font-family: var(--naskh); font-size: calc(18px * var(--ts, 1)); }
.tb-phrase { margin: 18px 0 4px; font-size: calc((var(--dua-size) + 6px) * var(--ts, 1)); }
.tb-en { margin: 0 0 6px; }
.bead { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 230px; height: 230px; margin: 14px auto 8px; border: 0; border-radius: 50%;
  background: radial-gradient(circle at 50% 38%, var(--gold-soft) 0%, var(--card) 72%); box-shadow: inset 0 0 0 1px var(--gold-line), 0 12px 32px rgba(0, 0, 0, .14); color: var(--ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bead:active { transform: scale(.985); }
.tb-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.tb-track { fill: none; stroke: var(--hair); stroke-width: 6; }
.tb-fill { fill: none; stroke: var(--gold-line); stroke-width: 6; stroke-linecap: round; transition: stroke-dasharray .2s ease; }
.bead-n { position: relative; font-size: calc(64px * var(--ts, 1)); font-weight: 700; line-height: 1.1; }
.bead-of { position: relative; font-size: calc(14px * var(--ts, 1)); color: var(--gold); font-weight: 600; }
.tb-round, .tb-total { margin: 6px 0; font-size: calc(13.5px * var(--ts, 1)); color: var(--stone); }
.tasbeeh .set-row { margin-top: 10px; border-bottom: 0; }
.tasbeeh .set-row > span { text-align: start; }

/* the dates */
.date-today { text-align: center; }
.dt-h { margin: 4px 0 2px; font-family: var(--naskh); font-weight: 700; font-size: calc(27px * var(--ts, 1)); }
.dt-g { margin: 0; font-size: calc(15px * var(--ts, 1)); color: var(--stone); }
.conv .seg { margin-bottom: 12px; }

.conv-h { display: grid; grid-template-columns: 1fr 1.7fr 1.2fr; gap: 8px; }
.conv select, .conv input[type="date"] { width: 100%; min-height: 46px; padding: 8px 10px; border-radius: 12px; border: 1px solid var(--hair); background: var(--card); color: var(--ink); font: inherit; font-size: max(16px, calc(15px * var(--ts, 1))); }
.conv-out { margin: 14px 0 0; padding: 14px; border-radius: 12px; background: var(--gold-soft); text-align: center; }
.conv-out b { display: block; font-family: var(--naskh); font-weight: 700; font-size: calc(25px * var(--ts, 1)); color: var(--ink); }
.conv-out span { font-size: calc(14px * var(--ts, 1)); font-weight: 600; color: var(--gold); }
.conv-out.short { font-size: calc(14px * var(--ts, 1)); color: var(--ink); }
.hajj-days .hd-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--hair); }
.hajj-days .hd-row:last-child { border-bottom: 0; }
.hd-row b { display: block; font-weight: 700; }
.hd-row small { display: block; font-size: calc(12.5px * var(--ts, 1)); color: var(--stone); }
.hd-row.key b { color: var(--gold); }
.hd-g { font-size: calc(14px * var(--ts, 1)); text-align: end; }