/* Wah-Kit Spiritual corner: verses, prayer beads, meditation */
.sp { --sp1: #7A5230; --sp2: #A3772F; --spsoft: #F6EEE5; max-width: 760px; display: flex; flex-direction: column; gap: 14px; }
.sp-back { margin: 16px 0 -8px; font-size: 14px; } .sp-back a { color: var(--ink-soft); }
.sp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 14px; max-width: 1000px; }
.sp-hcard { display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: 20px; background: linear-gradient(165deg, #fff, #F4F1EA); border: 1px solid #E6DECF; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
.sp-hcard:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(29, 26, 57, .08); }
.sp-hcard .fi { font-size: 40px; line-height: 1; } .sp-hcard b { font: 800 20px var(--font-display); margin-top: 6px; }
.sp-hcard small { color: var(--ink-soft); font-size: 14.5px; line-height: 1.45; flex: 1; } .sp-hcard .go { color: #8A5A1E; font-weight: 700; font-size: 14px; margin-top: 6px; }
.sp-note-p { color: var(--ink-soft); font-size: 14px; max-width: 760px; }
.sp-more { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 14px; }
.sp-more a { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; }

.sp-faiths { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; }
.sp-faith { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 8px 12px; border-radius: 16px; border: 2px solid var(--line); background: var(--surface); font: 700 15.5px var(--font-body); color: var(--ink); cursor: pointer; }
.sp-faith .i { font-size: 22px; }
.sp-faith[data-f=christian].on { border-color: #1E3A8A; background: #EEF2FB; color: #1E3A8A; }
.sp-faith[data-f=islam].on { border-color: #0F6B4F; background: #E8F5EF; color: #0F6B4F; }
.sp-faith[data-f=hindu].on { border-color: #B4400F; background: #FFF1E4; color: #9A3412; }
.sp-faith[data-f=any].on { border-color: #7A5230; background: #F6EEE5; color: #5C3B1E; }
.sp-hint { color: var(--ink-soft); text-align: center; padding: 18px; background: var(--surface); border-radius: 16px; border: 1px dashed var(--line); margin: 0; }
.sp-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
.sp-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sp-main { background: var(--sp1); color: #fff; border-color: var(--sp1); }
.sp-main:hover { filter: brightness(1.08); }
.sp-wa { background: #25D366; color: #fff; border-color: #25D366; }
.sp-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); cursor: pointer; }
.sp-chk input { width: 18px; height: 18px; accent-color: var(--sp1); }
.sp-note { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.sp-flash { margin: 0; padding: 12px 14px; border-radius: 12px; background: #E9F8EE; color: #145A33; font-weight: 600; }

/* the verse */
.sp-vcard { position: relative; overflow: hidden; padding: 26px 24px 22px; background: linear-gradient(170deg, #fff 30%, var(--spsoft)); border: 1px solid color-mix(in srgb, var(--sp2) 35%, var(--line)); box-shadow: inset 0 0 0 6px #fff, inset 0 0 0 7px color-mix(in srgb, var(--sp2) 30%, transparent); display: flex; flex-direction: column; gap: 14px; }
.sp-vtop { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; color: var(--sp1); font-weight: 700; font-size: 14.5px; text-transform: none; }
.sp-vtop small { color: var(--ink-soft); font-weight: 500; }
.sp-en { margin: 0; font: italic 400 21px/1.55 Georgia, 'Times New Roman', serif; color: #23222E; }
.sp-en sup { font-style: normal; font-size: 11px; color: var(--sp2); margin: 0 3px 0 4px; font-family: var(--font-body); }
.sp-ar { margin: 0; font: 400 30px/2 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Geeza Pro', 'Segoe UI', serif; color: var(--sp1); text-align: right; }
.sp-ayah { font-size: .8em; color: var(--sp2); white-space: nowrap; }
.sp-sa { margin: 0; font: 600 23px/1.75 'Noto Serif Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', 'Mangal', serif; color: var(--sp1); white-space: pre-line; }
.sp-roman { margin: -6px 0 0; font: italic 15px/1.6 Georgia, serif; color: #6B5A4A; white-space: pre-line; }
.sp-ref { margin: 0; text-align: right; font: 700 15px Georgia, serif; color: var(--sp2); }
.sp-about { font-size: 14px; color: var(--ink-soft); } .sp-about summary { cursor: pointer; font-weight: 600; } .sp-about p { margin: 8px 0 0; line-height: 1.55; }
.linkbtn { border: 0; background: none; color: var(--ink-soft); text-decoration: underline; font: 14px var(--font-body); cursor: pointer; padding: 6px; }

/* settings blocks */
.sp-bset { display: flex; flex-direction: column; gap: 14px; }
.sp-f { display: flex; flex-direction: column; gap: 7px; font-size: 13.5px; font-weight: 700; color: var(--ink-soft); min-width: 0; }
.sp-f select, .sp-f input[type=text], .sp-row input[type=text] { min-height: 46px; border: 1px solid var(--line); border-radius: 12px; padding: 0 12px; font: 16px var(--font-body); color: var(--ink); background: #fff; width: 100%; box-sizing: border-box; min-width: 0; }
.sp-inline { flex-direction: row; align-items: center; } .sp-inline select { width: auto; }
.sp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sp-chips button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 600 14px var(--font-body); color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.sp-chips button.on { background: var(--sp1); border-color: var(--sp1); color: #fff; }
.sp-chips i { width: 18px; height: 18px; border-radius: 50%; display: inline-block; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
.sp-num { width: 90px; min-height: 40px; border: 1px solid var(--line); border-radius: 999px; padding: 0 12px; font: 15px var(--font-body); }
.sp-tabs { display: flex; gap: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 4px; }
.sp-tabs button { flex: 1; min-height: 46px; border: 0; border-radius: 10px; background: none; font: 700 15px var(--font-body); color: var(--ink-soft); cursor: pointer; }
.sp-tabs button.on { background: var(--sp1); color: #fff; }
.sp-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.sp-opts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: center; }
.sp-today { font-size: 13.5px; color: var(--sp1); font-weight: 700; }

/* the beads */
.sp-counter { display: flex; flex-direction: column; gap: 10px; align-items: center; background: radial-gradient(circle at 50% 40%, #fff 0, var(--spsoft) 100%); }
.sp-stage { position: relative; width: min(100%, 400px); border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 50%; }
.sp-stage:focus-visible { outline: 3px solid var(--sp2); outline-offset: 4px; }
.sp-beads-svg { width: 100%; height: auto; display: block; }
.sp-center { position: absolute; left: 0; right: 0; top: 0; aspect-ratio: 360 / 350; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.sp-n { font: 800 64px/1 var(--font-display); color: var(--sp1); }
.sp-of { font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.sp-round { font-size: 13px; color: var(--sp2); font-weight: 700; min-height: 16px; }
.sp-glow { animation: spglow 1.6s ease-in-out infinite; }
@keyframes spglow { 50% { opacity: .45; } }
.sp-ring { animation: spglow 1.6s ease-in-out infinite; }
.sp-say { text-align: center; max-width: 560px; min-height: 60px; }
.sp-say p { margin: 0; }
.sp-say-t { font: 700 22px/1.5 Georgia, serif; color: var(--sp1); white-space: pre-line; }
.sp-say-t.ar { font: 400 30px/1.8 'Noto Naskh Arabic', 'Amiri', 'Traditional Arabic', 'Geeza Pro', serif; }
.sp-say-t.sa { font: 600 24px/1.6 'Noto Serif Devanagari', 'Nirmala UI', 'Kohinoor Devanagari', 'Mangal', serif; }
.sp-say-t.long { font-size: 16.5px; font-weight: 500; }
.sp-say-r { font: italic 15px/1.5 Georgia, serif; color: #6B5A4A; white-space: pre-line; margin-top: 2px !important; }
.sp-say-m { font-size: 13.5px; color: var(--ink-soft); margin-top: 4px !important; }
.sp-say-m.prayer { font: italic 14px/1.55 Georgia, serif; color: #4A4766; margin-top: 8px !important; }
.sp-done { margin: 0; min-height: 20px; font-weight: 700; color: var(--sp1); text-align: center; }
.sp-eyes { position: fixed; inset: 0; z-index: 200; background: #0B0B12; color: #C9C3B8; display: flex; align-items: center; justify-content: center; text-align: center; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.sp-eyes b { display: block; font: 800 96px/1 var(--font-display); color: #8F857A; }
.sp-eyes small { font-size: 18px; color: #6E665E; } .sp-eyes p { color: #4B4640; font-size: 14px; margin-top: 30px; }
.sp-eyes-x { position: absolute; top: calc(16px + env(safe-area-inset-top)); right: 16px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #3A3833; background: #17161D; color: #A39C91; font: 600 15px var(--font-body); }
html.sp-noscroll, html.sp-noscroll body { overflow: hidden; }

/* my own voice */
.sp-voice { display: flex; flex-direction: column; gap: 12px; }
.sp-vintro { margin: 0; color: var(--ink-soft); font-size: 14.5px; text-align: center; }
.sp-rec { background: #B91C1C; color: #fff; border-color: #B91C1C; } .sp-rec.on { animation: spglow 1.2s infinite; }
.sp-vmsg { margin: 0; text-align: center; font-size: 14px; color: var(--sp1); font-weight: 600; min-height: 18px; }
.sp-voice .sp-row input[type=text] { flex: 1 1 200px; width: auto; }
.sp-saved { display: flex; flex-direction: column; gap: 6px; } .sp-saved > b { font-size: 13.5px; color: var(--ink-soft); }
.sp-srow { display: flex; gap: 6px; } .sp-schip { flex: 1; text-align: left; min-height: 42px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; font: 600 14.5px var(--font-body); cursor: pointer; color: var(--ink); }
.sp-sdel { width: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; }

/* meditation */
.sp-big { min-height: 54px; font-size: 17px; }
.sp-record { text-align: center; color: #5C3B1E; font-weight: 600; font-size: 14.5px; margin: 0; }
.sp-pats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.sp-pat { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line); background: #fff; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.sp-pat b { font-size: 15px; } .sp-pat small { color: var(--ink-soft); font-size: 13px; font-weight: 400; }
.sp-pat.on { border-color: var(--sp1); box-shadow: inset 0 0 0 1px var(--sp1); background: var(--spsoft); }
.sp-sit { position: fixed; inset: 0; z-index: 200; background: radial-gradient(circle at 50% 40%, #1E1B2E, #0B0A12); color: #D8D2C6; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 24px; text-align: center; }
.sp-sitmsg { margin: 0; color: #A69E90; font-size: 16px; }
.sp-sitring { --p: 0; width: min(70vw, 300px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(closest-side, #15131F 86%, transparent 87% 100%), conic-gradient(#C9A15F calc(var(--p) * 100%), #2A2638 0); }
.sp-sitring b { font: 700 56px/1 var(--font-display); color: #E9E2D3; letter-spacing: 1px; } .sp-sitring small { color: #8C8476; margin-top: 6px; }
.sp-sitbtn { min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid #3B3650; background: #1A1826; color: #D8D2C6; font: 600 16px var(--font-body); cursor: pointer; }
.sp-sitnote { margin: 0; color: #6E6758; font-size: 14px; }
.sp-bwrap { position: relative; width: min(78vw, 320px); aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.sp-breath { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8FD3C7, #3F8F9A 60%, #24526B); box-shadow: 0 0 60px rgba(120, 210, 200, .35); transform: scale(.45); }
.sp-btext { position: relative; display: flex; flex-direction: column; align-items: center; color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .4); }
.sp-bword { font: 700 26px var(--font-display); } .sp-bsec { font-size: 20px; opacity: .85; }
@media (max-width: 640px) {
  .sp-en { font-size: 19px; } .sp-ar { font-size: 26px; } .sp-sa { font-size: 20px; }
  .sp-vcard { padding: 22px 18px 18px; }
  .sp-acts .btn { flex: 1 1 45%; }
  .sp-n { font-size: 54px; }
  .sp-faith { min-height: 64px; flex-direction: column; gap: 2px; font-size: 13.5px; padding: 6px 4px; } .sp-faith .i { font-size: 22px; }
}
.how { margin-top: 26px; max-width: 860px; color: var(--ink-soft); }
.how h2 { font-size: 22px; color: var(--ink); margin-bottom: 8px; }
.how ol { padding-left: 22px; margin: 0; }
.how li { margin: 4px 0; }