/* Bead counter (tasbih, prayer). Scoped to [data-beads]. */
[data-beads] .beads-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
[data-beads] .beads-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 12px; }
[data-beads] .beads-opts select.inp { appearance: auto; min-height: 48px; }
[data-beads] .beads-chips { display: flex; flex-wrap: wrap; gap: 6px; }
[data-beads] .beads-chip { font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: var(--pill); background: var(--canvas); color: var(--mute); }
[data-beads] .beads-chip.is-now { background: var(--ink); color: var(--on-ink); }
[data-beads] .beads-chip.is-past { color: var(--body); text-decoration: line-through; text-decoration-thickness: 1.5px; }

[data-beads] .beads-tap { gap: 6px; text-align: center; }
[data-beads] .beads-grp { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--body); }
[data-beads] .beads-ar { font-family: "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  font-size: clamp(34px, 9vw, 60px); line-height: 1.35; font-weight: 600; unicode-bidi: isolate; }
[data-beads] .beads-ring { position: relative; width: clamp(190px, 56vw, 300px); height: clamp(190px, 56vw, 300px); display: flex; align-items: center; justify-content: center; }
[data-beads] .beads-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
[data-beads] .beads-ring circle { fill: none; stroke-width: 7; }
[data-beads] .beads-track { stroke: var(--soft); }
[data-beads] .beads-arc { stroke: var(--ink); stroke-linecap: round; transition: stroke-dashoffset .15s; }
[data-beads] .beads-ring.is-done .beads-arc { stroke: var(--signal); }
[data-beads] .beads-num { display: flex; flex-direction: column; align-items: center; }
[data-beads] .beads-ring .value { font-size: clamp(64px, 20vw, 120px); }
[data-beads] .beads-ring .value[data-len="m"] { font-size: clamp(48px, 14vw, 88px); }
[data-beads] .beads-ring .value[data-len="l"] { font-size: clamp(34px, 10vw, 60px); }
[data-beads] .beads-of { color: var(--body); font-size: 16px; font-weight: 600; margin-top: 4px; font-variant-numeric: tabular-nums; }
[data-beads] .beads-label { font-size: clamp(20px, 5vw, 28px); font-weight: 700; letter-spacing: -0.01em; }
[data-beads] .beads-mean { color: var(--body); font-size: 16px; }
[data-beads] .beads-next { color: var(--mute); font-size: 14px; min-height: 21px; }

[data-beads] .beads-bar { display: flex; align-items: center; gap: 12px; }
[data-beads] .beads-track2 { flex: 1; height: 8px; border-radius: var(--pill); background: var(--canvas); overflow: hidden; }
[data-beads] .beads-track2 span { display: block; height: 100%; width: 0; background: var(--ink); border-radius: var(--pill); }
[data-beads] .beads-bartext { font-size: 14px; color: var(--body); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-beads] .beads-stats { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--body); padding: 0 4px; }
[data-beads] .beads-stats b { color: var(--ink); font-size: 18px; font-variant-numeric: tabular-nums; margin-left: 4px; }

[data-beads] .beads-note { grid-column: 1 / -1; margin: 0; font-size: 14px; }
[data-beads] .beads-hist { padding: 0 16px 16px; display: flex; flex-direction: column; gap: 12px; }
[data-beads] .beads-hist p { margin: 0; }
[data-beads] .beads-hist table.t td:nth-child(2) { text-align: left; }

body.is-focus [data-beads] .beads-ring { width: min(44vh, 80vw); height: min(44vh, 80vw); }
@media (prefers-reduced-motion: reduce) { [data-beads] .beads-arc { transition: none; } }
[data-beads] .beads-cap { margin: 0 0 8px; font-size: 14px; }