/* Among the Stones look, as in Alxamia: Noto Serif body, bold uppercase Noto
   Sans headings, italic uppercase small text, dotted rules, one mark per
   screen. The mark is verdigris, after the green dots of Maghribi mushafs. */
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Serif"; src: url("fonts/noto-serif-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("fonts/noto-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Noto Sans"; src: url("fonts/noto-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Noto Naskh Arabic"; src: url("fonts/NotoNaskhArabic.ttf"); font-display: swap; }

:root {
  --bg: #fff; --text: #222; --head: #111; --muted: #6b6b6b; --field: #fafafa;
  --rule: #111; --rule-row: #ddd; --rule-divider: #bbb; --highlight: #2f6b57; --on-highlight: #fff;
  --sans: "Noto Sans", Arial, sans-serif;
  --tabs-h: 3.5rem;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1914; --text: #d4d4d4; --head: #e8e8e8; --muted: #aaa; --field: #24201a;
    --rule: #555; --rule-row: #3a3a3a; --rule-divider: #555; --highlight: #8cc4ad; --on-highlight: #102019;
    color-scheme: dark;
  }
}
@media (prefers-contrast: more) {
  :root { --muted: #3d3d3d; --rule-row: #777; --text: #000; }
  @media (prefers-color-scheme: dark) { :root { --muted: #d0d0d0; --rule-row: #999; --text: #fff; } }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 100%/1.6 "Noto Serif", Georgia, serif; }
@media (min-width: 37.5em) { body { font-size: 1.125em; } }
/* Practice is read from the prayer mat: a step up */
body.practicing { font-size: 112.5%; }
@media (min-width: 37.5em) { body.practicing { font-size: 1.25em; } }

main { max-width: 40rem; margin: 0 auto; padding-block: max(1rem, env(safe-area-inset-top, 0px)) 3rem; outline: none;
       padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
/* Opened from the home screen, iOS blurs the strip under the status bar: start below it */
@media (display-mode: standalone) { main { padding-top: max(2.25rem, env(safe-area-inset-top, 0px)); } }

a { color: var(--head); text-underline-offset: .15em; text-decoration-thickness: 1px; }
header.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
.site-title { font: 700 1.375em/1.2 var(--sans); letter-spacing: 2px; text-transform: uppercase; color: var(--head); margin: 0; }
.site-title a { color: inherit; text-decoration: none; }
header.top .seg { gap: .25rem .9rem; }
/* Same height as Alxamia's header; the negative margin keeps a finger-sized tap area without moving anything */
header.top .seg button { font-size: .75em; min-height: 0; padding: .55em 0; margin: -.4em 0; }
nav.modes { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .35rem 0 .9rem; border-bottom: 1px dotted var(--rule); padding-bottom: .2rem; }
nav.modes a { color: var(--muted); text-decoration: none; padding: .6em 0; margin: -.45em 0; display: inline-flex; align-items: center;
              font: 700 .75em var(--sans); text-transform: uppercase; letter-spacing: 1px; }
nav.modes a[aria-current="page"] { color: var(--head); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
nav.modes a:hover { color: var(--head); }
mark { background: var(--highlight); color: var(--on-highlight); padding: .05em .05em; border-radius: 5px;
       -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.small { font: italic 400 .8125em/1.4 var(--sans); text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
h1, h2, h3 { font-family: var(--sans); font-weight: 700; text-transform: uppercase; color: var(--head); }
.page-title { font-size: 1.5em; line-height: 1.35; letter-spacing: 1px; margin: .5rem 0 .4rem; }
.section { font-size: .875em; letter-spacing: 1px; margin: 1.6rem 0 .5rem; padding-top: .45rem; border-top: 1px dotted var(--rule); }
.sub { font-size: .75em; letter-spacing: 1px; margin: 1.1rem 0 .3rem; }
.intro { font-style: italic; font-size: .875em; line-height: 1.45; margin: .3rem 0 .1rem; }
.section.first { margin-top: .4rem; padding-top: 0; border-top: 0; }
.lead { font-size: 1.0625em; margin: .6rem 0; }
.help { font-size: .875em; color: var(--muted); margin: .4rem 0; }
.note { font-size: .9375em; margin: .7rem 0; padding-left: .75rem; border-left: 1px dotted var(--rule); }
.basis { margin: .8rem 0 0; }
.crumbs { margin: .6rem 0 0; }
.crumbs a { color: inherit; }
.title-meta { margin: 0 0 .4rem; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }

/* Arabic: generous size and line height so no mark clips */
.ar, .ar-inline { font-family: "Noto Naskh Arabic", "Geeza Pro", serif; color: var(--head); }
.ar { font-size: 1.75rem; line-height: 2.25; text-align: right; margin: 0; overflow-wrap: anywhere; }
.ar p { margin: 0; }
.ar-inline { font-size: 1.15em; line-height: 1.4; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tr { font-style: italic; margin: .1rem 0 0; }
.mean { margin: .15rem 0 0; font-size: .9375em; }

/* Legal weight: a word in a shape, never color alone */
.badge { display: inline-block; font: 700 .6875em/1 var(--sans); text-transform: uppercase; letter-spacing: .06em;
         padding: .32em .5em .28em; border-radius: 3px; border: 1px solid var(--head); white-space: nowrap; vertical-align: .12em; }
.badge.pillar, .badge.condition { background: var(--head); color: var(--bg); }
.badge.condition { text-decoration: underline dotted; text-underline-offset: .2em; }
.badge.sunnah { background: var(--bg); color: var(--head); }
.badge.recommended { font-style: italic; font-weight: 400; color: var(--muted); border-color: transparent; padding-inline: 0; }

/* Ledger rows */
ul, ol { padding: 0; margin: 0; list-style: none; }
.ledger li { border-bottom: 1px dotted var(--rule-row); }
.ledger li:first-child { border-top: 1px dotted var(--rule); }
.ledger a { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; padding: .7rem 0; min-height: 44px; text-decoration: none; color: var(--text); }
.ledger a:hover .row-name { text-decoration: underline; }
.row-name { font: 700 .9375em/1.3 var(--sans); text-transform: uppercase; letter-spacing: .5px; color: var(--head); }
.ledger .small, .ledger .ar-inline { margin-left: auto; }
.ledger .ar-inline + .small { margin-left: 0; flex-basis: 100%; }
.steps a { display: grid; grid-template-columns: 6.6em 1fr; align-items: baseline; gap: 0; padding: 0; }
.step-key { align-self: stretch; padding: .7rem .8rem .7rem 0; border-right: 1px dotted var(--rule-divider); }
.step-value { padding: .7rem 0 .7rem .8rem; display: flex; flex-direction: column; gap: .1rem; }
.cue { font-style: italic; color: var(--muted); font-size: .9375em; }

.acts li, .plain li, .numbered > li { padding: .4rem 0; border-bottom: 1px dotted var(--rule-row); }
.acts li .badge { margin-right: .4rem; }
.plain li::before { content: "·"; margin-right: .5rem; color: var(--muted); }
.numbered { counter-reset: n; }
.numbered > li { counter-increment: n; padding-left: 2rem; position: relative; }
.numbered > li::before { content: counter(n); position: absolute; left: 0; font: 700 .875em/1.9 var(--sans); color: var(--muted); }
.numbered .badge { margin-right: .4rem; }

/* What to say */
.say { margin: .8rem 0 1.2rem; }
.say-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .3rem; }
.say-name { font: 700 .875em var(--sans); text-transform: uppercase; letter-spacing: .5px; color: var(--head); }
.lines li { padding: .5rem 0 .6rem; border-top: 1px dotted var(--rule-row); }
.lines + .small { margin: .2rem 0 0; }
details { margin: .6rem 0; border-top: 1px dotted var(--rule-row); padding-top: .4rem; }
summary { cursor: pointer; font: 700 .8125em/2.6 var(--sans); text-transform: uppercase; letter-spacing: .5px; color: var(--head); min-height: 44px; }

/* Controls */
.bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: .8rem 0 .2rem; }
.seg { display: inline-flex; flex-wrap: wrap; gap: .25rem 1.1rem; margin: .2rem 0; }
.seg button { border: 0; background: none; padding: .4em 0; min-height: 44px; cursor: pointer; color: var(--muted);
              font: 700 .8125em var(--sans); text-transform: uppercase; letter-spacing: 1px; border-bottom: 2px solid transparent; }
.seg button[aria-pressed="true"] { color: var(--head); border-bottom-color: var(--head); }
.seg.minor button { font-size: .75em; }
.seg button:hover { color: var(--head); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .4rem 1rem;
          font: 700 .8125em var(--sans); text-transform: uppercase; letter-spacing: 1px; color: var(--head);
          background: var(--bg); border: 1px solid var(--head); border-radius: 5px; text-decoration: none; cursor: pointer; }
.button.primary { background: var(--head); color: var(--bg); }
.button[disabled] { opacity: .35; cursor: default; }
:focus-visible { outline: 2px solid var(--head); outline-offset: 2px; }
/* Focus moves to the page on every route change, for screen readers; no ring for that */
main:focus, .pr:focus { outline: none; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 2rem 0 0; padding-top: .8rem; border-top: 1px dotted var(--rule); }

.duas li { display: flex; align-items: flex-start; gap: .5rem; }
.duas label { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; flex: 1; cursor: pointer; }
.duas input { width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--head); flex: none; }
.duas .up { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; }

/* Practice: one posture at a time, readable from the prayer mat */
body.practicing { overflow-x: hidden; }
.pr { min-height: 100dvh; display: flex; flex-direction: column; outline: none; cursor: pointer;
      padding: max(1rem, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(1rem, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
      -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.pr-top { display: flex; justify-content: space-between; align-items: center; }
.pr-exit { font: 700 .8125em var(--sans); text-transform: uppercase; letter-spacing: 1px; color: var(--muted); min-height: 44px; display: inline-flex; align-items: center; }
.pr-body { flex: 1; display: flex; flex-direction: column; justify-content: center; max-width: 40rem; width: 100%; margin: 0 auto; }
.pr-pos { font: 700 1.5em/1.3 var(--sans); text-transform: uppercase; letter-spacing: 2px; color: var(--head); margin: 0 0 .5rem; }
.pr-name { font-size: clamp(2rem, 9vw, 3.25rem); line-height: 1.1; letter-spacing: 1px; margin: 0 0 1rem; }
.pr-cues li { padding: .35rem 0; border-top: 1px dotted var(--rule-row); }
.pr-cue { font-size: 1.5em; line-height: 1.35; font-style: italic; color: var(--head); }
.pr-do { font-size: 1.25em; line-height: 1.45; margin: 0; }
.pr-dhikr { font-size: 2em; line-height: 1.3; font-style: italic; color: var(--head); margin: 0 0 .6rem; }
.pr-count { font: 700 4.5em/1.1 var(--sans); color: var(--head); margin: .2rem 0 .8rem; font-variant-numeric: tabular-nums; }
.pr-words { cursor: auto; -webkit-user-select: text; user-select: text; margin-top: 1rem; }
.pr-words .ar { font-size: 2.1em; }
.pr-words .tr { font-size: 1.125em; }
.pr-foot { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; max-width: 40rem; width: 100%; margin: 0 auto; }
.pr-hint { margin-left: auto; }
@media (max-width: 30em) { .pr-hint { display: none; } }

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { nav.modes, .pager, .bar { display: none; } }
@media (max-width: 22.5em) { nav.modes { column-gap: .7rem; } nav.modes a { letter-spacing: .5px; } }
.nw { white-space: nowrap; }
.seg a { display: inline-flex; align-items: center; min-height: 44px; font: 700 .8125em var(--sans); text-transform: uppercase; letter-spacing: 1px; color: var(--head); }