/* Ramadan Strivers — tools.css: the Ramadan countdown and date note, Qibla, story images, setup questions,
   and the daily fast and make-up fast cards (js/tools.js, js/tracker.js). */

/* Countdown and the estimated date ------------------------------------------------------------------------- */
.tl-cd-n { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 2px 0 4px; }
.tl-cd-num { font-size: 56px; line-height: 1; font-weight: 300; letter-spacing: -.03em; color: var(--ink); }
.tl-cd-unit { font-size: 17px; font-weight: 700; color: var(--ink-2, var(--ink)); }
.tl-date-l { font-weight: 600; color: var(--ink); overflow-wrap: anywhere; }
.tl-moon-q { font-size: 14px; font-weight: 600; color: var(--ink-3); margin-bottom: 8px; }
.tl-moon-seg { width: 100%; }
.tl-moon-seg .seg-btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; }

/* Qibla ------------------------------------------------------------------------------------------------------ */
.tl-qibla { display: flex; justify-content: center; padding: 6px 0 2px; }
.tl-dial { width: min(260px, 72vw); height: auto; }
.tl-ring { fill: var(--card-2, var(--accent-soft)); stroke: var(--hairline); stroke-width: 1.5; }
.tl-tk { stroke: var(--ink-3); stroke-width: 1; opacity: .45; }
.tl-tk-m { stroke: var(--ink); stroke-width: 2.4; }
.tl-n { font: 800 15px/1 inherit; fill: var(--ink); }
.tl-needle { stroke: var(--accent); stroke-width: 4; stroke-linecap: round; }
.tl-head { fill: var(--accent); }
.tl-kaaba { fill: var(--ink); }
.tl-hub { fill: var(--accent); stroke: var(--card, #fff); stroke-width: 2; }
.tl-qibla-deg { text-align: center; font-size: 20px; font-weight: 700; margin-top: 8px; }
#tl-rose { transition: transform .15s linear; }
@media (prefers-reduced-motion: reduce) { #tl-rose { transition: none; } }

/* Story images ----------------------------------------------------------------------------------------------- */
.tl-story-img { display: block; width: min(240px, 60vw); height: auto; margin: 0 auto; border-radius: 18px; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
.tl-story-sheet .caption { text-align: center; }

/* Setup questions -------------------------------------------------------------------------------------------- */
.tl-q { font-size: 16px; font-weight: 700; margin: var(--s4) 0 var(--s2); }
.tl-choices { display: grid; gap: 8px; }
.tl-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px; text-align: start;
  border: 1.5px solid var(--hairline); border-radius: 16px; background: var(--card, transparent); color: var(--ink); font: inherit; cursor: pointer;
}
.tl-choice > .ic { flex: none; color: var(--accent-ink); }
.tl-choice > span { display: flex; flex-direction: column; min-width: 0; }
.tl-choice-t { font-weight: 700; }
.tl-choice-s { font-size: 13px; color: var(--ink-3); }
.tl-choice.is-on { border-color: var(--accent); background: var(--accent-soft); }
.tl-choice:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (hover: hover) { .tl-choice:hover { border-color: var(--accent); } }

/* The day's fast and make-up fasts --------------------------------------------------------------------------- */
.tr-fseg { width: 100%; }
.tr-fseg .seg-btn { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.2; }
.tr-fq { font-weight: 600; font-size: 14px; color: var(--ink-3); }
.tr-qada-big { font-size: 20px; font-weight: 700; }

/* Home display: the estimated-date note */
.so-disp-note { font-size: 14px; opacity: .7; margin-top: 4px; }

/* Usage statistics notice (js/track.js) ---------------------------------------------------------------------- */
.tk-notice {
  position: fixed; inset-inline: 12px; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); z-index: 40; max-width: 520px; margin-inline: auto;
  padding: 14px 16px; border-radius: 18px; background: var(--card); color: var(--ink); border: 1px solid var(--hairline); box-shadow: 0 12px 40px rgba(0, 0, 0, .22);
}
.tk-notice-t { font-size: 14px; line-height: 1.45; }
.tk-notice-t a { color: var(--accent-ink); font-weight: 700; }
.tk-notice-b { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

/* Start here: guide chapters, how to pray, words explained (js/start.js) -------------------------------------- */
.st-p { line-height: 1.6; margin-top: 10px; }
.st-p:first-child { margin-top: 0; }
.st-h { font-size: 22px; line-height: 1.25; font-weight: 700; margin-bottom: 4px; }
.st-refs { margin-top: var(--s4); }
.st-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s4); }
.st-step { display: flex; gap: 14px; align-items: flex-start; }
.st-step > div { min-width: 0; flex: 1 1 auto; }
.st-step-n { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--accent-soft); color: var(--accent-ink); }
.st-step-t { font-size: 16px; font-weight: 700; }
.st-pose { flex: none; width: 56px; height: 56px; padding: 4px; border-radius: 16px; background: var(--accent-soft); color: var(--accent-ink); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.st-pose circle { fill: currentColor; stroke: none; }
.st-ar { margin-top: 10px; }
.st-tr { font-style: italic; color: var(--ink-2, var(--ink)); margin-top: 6px; }
.st-mean { color: var(--ink-3); margin-top: 4px; }
.st-words { margin-top: var(--s3); }
.st-word { padding: 12px 0; border-top: 1px solid var(--hairline); }
.st-word dt { font-weight: 700; }
.st-word dd { margin: 2px 0 0; color: var(--ink-2, var(--ink)); line-height: 1.5; }
.tr-term { margin-top: 4px; }

/* Kids: night sky, story, grown-up check, short surahs (js/kids.js) and the family goal --------------------- */
.kd-sky { display: block; width: 100%; height: auto; }
.kd-sky-bg { fill: #0B2219; }
.kd-moon { fill: #A7F3D0; }
.kd-star { fill: rgba(167, 243, 208, .16); }
.kd-star.is-on { fill: #6EE7B7; filter: drop-shadow(0 0 3px rgba(110, 231, 183, .9)); }
.kd-q { padding: 14px; border-radius: 16px; background: var(--accent-soft); }
.kd-q-t { font-weight: 700; margin-bottom: 10px; }
.kd-a-t { font-weight: 600; color: var(--accent-ink); }
.kd-s-n { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--accent-soft); color: var(--accent-ink); }
.kd-s-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--hairline); display: grid; place-items: center; color: var(--card); }
.kd-s.is-1 .kd-s-dot { border-color: var(--accent); background: linear-gradient(90deg, var(--accent) 50%, transparent 50%); }
.kd-s.is-2 .kd-s-dot { border-color: var(--accent); background: var(--accent); }
.so-childopt { display: flex; gap: 10px; align-items: flex-start; margin-top: var(--s3); font-size: 14px; line-height: 1.4; }
.so-childopt input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); margin-top: 2px; }
.so-goal-t { font-size: 18px; font-weight: 700; }

/* ------------------------------------------------------------------ organisers, leagues and the super admin (js/org.js, js/admin.js) */
.or-rank { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--card-2); color: var(--ink-2); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }
.or-goal { font-size: 17px; margin: 0 0 var(--s2); }
.or-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: end; }
.or-three { display: grid; grid-template-columns: 1fr 1fr 96px; gap: var(--s3); align-items: end; }
.or-deed { display: grid; grid-template-columns: 1fr 96px; gap: var(--s3); align-items: end; }
.or-two > *, .or-three > *, .or-deed > * { min-width: 0; }
.or-vs { display: inline-block; margin-inline: 6px; padding: 1px 8px; border-radius: 999px; background: var(--card-2); font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }
.or-row-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 0 0 var(--s3); }
.or-me { background: var(--accent-soft); border-radius: var(--r-block); }
.or-ver { color: var(--accent); display: inline-flex; vertical-align: -2px; }
.or-check { display: flex; gap: 10px; align-items: center; font-size: 14px; }
.or-check input { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
.or-adm-tabs { margin-bottom: var(--s3); }
@media (max-width: 380px) { .or-three { grid-template-columns: 1fr 1fr; } .or-three > :last-child { grid-column: 1 / -1; } }