/* ── Progress report engine (shared, synced from tools/progress/) ─────────────────────
   Self-contained tokens on .rl-report, so the report looks the same in every app whatever the
   host page's variables are. Green done, red missed, gold numbers, no third colour except the
   consistency gradient an app asks for explicitly. Numbers are Inter, lining and tabular. */
.rl-report { --rl-ok: #2ea36b; --rl-bad: #b8463c; --rl-amber: #d9a441; --rl-neutral: #16130b; --rl-pre: #121009; --rl-gold: #c9a84c; --rl-bright: #f0c040; --rl-dim: #9a8845; --rl-border: #3a3020; --rl-card: #0d0b06; --rl-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; width: 100%; text-align: left; font-family: var(--rl-sans); color: var(--rl-gold); }
.rl-hero { display: grid; grid-template-columns: 1fr auto auto; gap: 10px 12px; align-items: stretch; padding: 16px 16px 12px; background: linear-gradient(180deg, #14110a, #0d0b06); border: 1px solid var(--rl-border); border-top: 1px solid var(--rl-gold); border-radius: 12px; }
.rl-hero-main { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.rl-hero-pct { font-size: 2.5rem; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.03em; color: var(--rl-bright); }
.rl-hero-lab { font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rl-dim); }
.rl-hero-side { display: flex; flex-direction: column; justify-content: center; align-items: center; min-width: 64px; padding: 6px 10px; border-left: 1px solid var(--rl-border); }
.rl-hero-side b { font-size: 1.45rem; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; color: var(--rl-bright); }
.rl-hero-side span { margin-top: 5px; font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rl-dim); text-align: center; white-space: nowrap; }
.rl-hero-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; padding-top: 9px; border-top: 1px solid var(--rl-border); }
.rl-trend, .rl-time { font-size: 0.7rem; letter-spacing: 0.04em; color: var(--rl-dim); white-space: nowrap; }
.rl-block { margin-top: 12px; padding: 14px 14px 12px; background: var(--rl-card); border: 1px solid var(--rl-border); border-radius: 12px; }
.rl-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.rl-title { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rl-dim); }
.rl-pct { font-size: 1.2rem; line-height: 1; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; color: var(--rl-bright); white-space: nowrap; }
.rl-sub { margin: 4px 0 12px; font-size: 0.72rem; color: var(--rl-gold); }
.rl-tot .rl-head { margin-bottom: 4px; }
.rl-totrow { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline; padding: 7px 0; border-top: 1px solid var(--rl-border); font-size: 0.74rem; color: var(--rl-gold); }
.rl-totrow:first-of-type { border-top: 0; }
.rl-totrow b { font-size: 1.05rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--rl-bright); }
.rl-totdays { font-size: 0.66rem; color: var(--rl-dim); min-width: 52px; text-align: right; }
/* Equal columns across the block, so a grid is evenly divided in its box on every width. */
.rl-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.rl-g7 { gap: 8px; margin-bottom: 18px; }
.rl-gw { gap: 5px; }
.rl-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; font-size: 0.58rem; letter-spacing: 0.08em; text-align: center; color: var(--rl-dim); }
.rl-blank { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.rl-cell { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 44px; justify-self: center; aspect-ratio: 1 / 1; border-radius: 5px; background: var(--rl-neutral); position: relative; }
.rl-g7 .rl-cell { border-radius: 8px; }
.rl-cell i { position: absolute; left: 0; right: 0; top: 100%; margin-top: 5px; font-style: normal; font-size: 0.58rem; letter-spacing: 0.08em; text-align: center; color: var(--rl-dim); white-space: nowrap; }
.rl-cell .rl-n { font-size: 0.56rem; font-weight: 600; letter-spacing: -0.01em; color: #0a0a00; font-variant-numeric: lining-nums tabular-nums; }
.rl-cell.rl-today .rl-n, .rl-cell.rl-zero .rl-n, .rl-cell.rl-pre .rl-n { color: var(--rl-bright); }
.rl-cell.rl-any .rl-n { color: var(--rl-bright); }
.rl-gcount .rl-cell .rl-n { font-size: 0.5rem; }
.rl-on { background: var(--rl-ok); }
.rl-off { background: var(--rl-bad); }
.rl-today { background: transparent; border: 1px solid var(--rl-gold); box-shadow: 0 0 10px rgba(240, 192, 64, 0.25); }
.rl-pre, .rl-future, .rl-zero { background: var(--rl-pre); }
.rl-notyet { background: var(--rl-neutral); }
/* the 24-hour prayers strip (owner, 2026-09-13): five tracks, one per prayer, its name beneath */
.rl-g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.rl-g0 { background: var(--rl-bad); } .rl-g1 { background: var(--rl-amber); } .rl-g2 { background: var(--rl-ok); }
.rl-any { background: #2b2412; }
/* The 90-day grid: weeks as columns, weekdays as rows, every day a cell. */
.rl-hmflex { display: flex; align-items: stretch; gap: 6px; margin-bottom: 16px; }
.rl-hmrows { display: grid; grid-template-rows: repeat(7, 1fr); gap: 2px; font-size: 0.52rem; letter-spacing: 0.06em; color: var(--rl-dim); text-align: center; width: 10px; }
.rl-hmrows span { display: flex; align-items: center; justify-content: center; }
.rl-hmwrap { display: grid; gap: 2px; flex: 1; min-width: 0; }
.rl-hm90 { gap: 4px; }
.rl-hm90 .rl-hmcol { gap: 4px; }
.rl-hm90 .rl-hm { border-radius: 4px; max-width: 28px; justify-self: center; }
.rl-hmcol { display: grid; grid-template-rows: repeat(7, auto); gap: 2px; min-width: 0; }
.rl-hm { display: block; width: 100%; min-width: 0; aspect-ratio: 1 / 1; min-height: 12px; border-radius: 1.5px; background: var(--rl-neutral); }
.rl-hm.rl-on { background: var(--rl-ok); } .rl-hm.rl-off { background: var(--rl-bad); } .rl-hm.rl-pre, .rl-hm.rl-future, .rl-hm.rl-zero { background: var(--rl-pre); } .rl-hm.rl-any { background: #2b2412; }
.rl-hm.rl-today { background: transparent; box-shadow: inset 0 0 0 1px var(--rl-gold); border: 0; }
/* Week tiles: the last 13 weeks in the 7-column grid, each carrying its week's own number,
   the week's Monday under it; the rows sit apart so the labels never touch the next row. */
.rl-gwk { gap: 24px 8px; margin-bottom: 20px; }
.rl-cell.rl-wk { max-width: 48px; border-radius: 8px; }
.rl-cell.rl-wk .rl-n { color: var(--rl-bright); font-size: 0.6rem; }
.rl-cell.rl-wk.rl-pre .rl-n { color: var(--rl-dim); }
.rl-cell.rl-wk i { font-size: 0.5rem; letter-spacing: 0.02em; margin-top: 4px; }
.rl-insight { margin: 12px 0 2px; font-size: 0.7rem; letter-spacing: 0.03em; text-align: center; color: var(--rl-dim); }
.rl-insight b { color: var(--rl-gold); font-weight: 600; }
/* Slot rows: one row per prayer, one column per day. */
.rl-slotmat { display: grid; gap: 3px 2px; align-items: center; }
.rl-slothead { font-size: 0.5rem; letter-spacing: 0.04em; text-align: center; color: var(--rl-dim); line-height: 1; }
.rl-slotlab { font-size: 0.56rem; font-weight: 600; letter-spacing: 0.06em; color: var(--rl-dim); text-align: left; }
.rl-slot { border-radius: 2px; }
.rl-slotmat .rl-mc.rl-today { box-shadow: inset 0 0 0 1px var(--rl-gold); }
/* Twelve month calendars, Monday to Sunday, three across on a phone and four on a desktop. */
.rl-year { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 10px; }
.rl-mon { min-width: 0; }
.rl-mon-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rl-dim); }
.rl-mon-v { display: block; margin: 0 0 5px; font-size: 0.95rem; line-height: 1.1; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -0.02em; color: var(--rl-bright); }
.rl-mon.now .rl-mon-h span { color: var(--rl-bright); }
.rl-mgrid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.rl-mc { display: block; width: 100%; min-width: 0; aspect-ratio: 1 / 1; min-height: 10px; border-radius: 2px; background: var(--rl-neutral); }
/* Colour rules restated at cell specificity: .rl-mc sets the neutral background above, so a bare
   .rl-on would lose to it. The same pattern the heatmap cells used. */
.rl-mc.rl-on { background: var(--rl-ok); } .rl-mc.rl-off { background: var(--rl-bad); } .rl-mc.rl-pre, .rl-mc.rl-future, .rl-mc.rl-zero { background: var(--rl-pre); }
.rl-mc.rl-g0 { background: var(--rl-bad); } .rl-mc.rl-g1 { background: var(--rl-amber); } .rl-mc.rl-g2 { background: var(--rl-ok); }
.rl-mc.rl-any { background: #2b2412; }
.rl-mc.rl-today { background: transparent; border: 0; box-shadow: inset 0 0 0 1px var(--rl-gold); }
.rl-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rl-dim); }
.rl-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rl-legend .rl-cell { width: 10px; height: 10px; aspect-ratio: auto; border-radius: 3px; max-width: none; }
.rl-foot { margin: 12px 0 0; font-size: 0.68rem; line-height: 1.5; text-align: center; color: var(--rl-dim); }
@keyframes rlFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rl-anim .rl-hero, .rl-anim .rl-block { animation: rlFade 0.4s ease both; }
.rl-anim .rl-block:nth-of-type(2) { animation-delay: 0.06s; } .rl-anim .rl-block:nth-of-type(3) { animation-delay: 0.12s; }
.rl-anim .rl-block:nth-of-type(4) { animation-delay: 0.18s; } .rl-anim .rl-block:nth-of-type(5) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .rl-anim .rl-hero, .rl-anim .rl-block { animation: none; } }
@media (min-width: 600px) {
  .rl-gw { row-gap: 12px; }
  .rl-hm90 .rl-hmcol { gap: 8px; }
  .rl-year { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 14px; }
}
@media (max-width: 480px) {
  .rl-hero { gap: 8px; padding: 14px 12px 10px; }
  .rl-hero-side { min-width: 54px; padding: 4px 6px; }
  .rl-hero-side b { font-size: 1.3rem; }
  .rl-hero-pct { font-size: 2.2rem; }
  .rl-hm90, .rl-hm90 .rl-hmcol { gap: 3px; }
}


/* the share chip under the hero, sub-dashboards only */
.rl-share-row { text-align: center; margin: 10px 0 2px; }
.rl-share { font-family: Georgia, 'Times New Roman', serif; font-size: .82rem; letter-spacing: .02em; color: #c9a84c; background: transparent; border: 1px solid #3a3020; border-radius: 999px; padding: 7px 18px; cursor: pointer; transition: background .15s ease; }
@media (hover: hover) { .rl-share:hover { background: rgba(201, 168, 76, .08); } }

/* == the report's own range pills (rangeSwitch): 7/30/90/365, always opening on 30 ======== */
.rl-rng { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 0 0 14px; }
.rl-rng-lab { font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: #9a8845; margin-right: 4px; font-weight: 600; }
.rl-rng-b { min-height: 32px; min-width: 42px; padding: 5px 12px; font-size: .76rem; font-variant-numeric: tabular-nums; color: #9a8845; background: transparent; border: 1px solid #3a3020; border-radius: 999px; cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; transition: color .2s ease, background .2s ease, border-color .2s ease; }
@media (hover: hover) { .rl-rng-b:hover { color: #c9a84c; border-color: #c9a84c; } }
.rl-rng-b.on { color: #0a0a0a; background: #c9a84c; border-color: #c9a84c; font-weight: 600; }

/* == by prayer: the self-analysis table under every prayers grid ========================== */
.rl-prt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rl-border); }
.rl-prt-h { margin: 0 0 8px; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rl-dim); text-align: center; }
.rl-prt-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto 44px; gap: 10px; align-items: center; padding: 5px 0; }
.rl-prt-l { font-size: 0.74rem; color: var(--rl-gold); }
.rl-prt-bar { display: block; height: 6px; border-radius: 3px; background: #171307; overflow: hidden; }
.rl-prt-bar i { display: block; height: 100%; border-radius: 3px; background: var(--rl-gold); }
.rl-prt-n { font-size: 0.74rem; font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--rl-bright); white-space: nowrap; }
.rl-prt-p { font-size: 0.72rem; font-variant-numeric: tabular-nums; color: var(--rl-dim); text-align: right; }

/* == share of each third: percentage split per prayer under When-you-pray ================= */
.rl-p3t { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rl-border); }
.rl-p3t-row { display: grid; grid-template-columns: 66px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 5px 0; }
.rl-p3t-row.none { opacity: 0.45; }
.rl-p3t-bar { display: flex; height: 6px; border-radius: 3px; background: #171307; overflow: hidden; }
.rl-p3t-bar i { display: block; height: 100%; }
.rl-p3t-g { background: #2f7d4f; }
.rl-p3t-a { background: #c9902c; }
.rl-p3t-r { background: #5a2620; }
.rl-p3t-p { display: flex; gap: 8px; font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.rl-p3t-p b { font-weight: 600; min-width: 22px; text-align: right; }

/* == when you pray: thirds of each prayer's own window ==================================== */
.rl-p3row { display: grid; grid-template-columns: 68px repeat(3, 1fr); align-items: center; gap: 8px; padding: 4px 0; }
.rl-p3lab { font-size: .74rem; color: #c9a84c; }
.rl-p3head span { font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: #7a6a30; text-align: center; font-weight: 600; }
.rl-p3c { background: #171307; border-radius: 10px; padding: 9px 4px; text-align: center; font-variant-numeric: tabular-nums; color: #9a8845; font-size: .82rem; }
/* (the old rl-p3e/p3m/p3l/p3nf band classes are gone - the engine emits rl-c0/1/2) */

/* == traffic light, the FIVE only: green first, amber middle, red last - position in the
      window, never a judgement. Tahajjud keeps its own neutral gold system untouched. ===== */
.rl-p3head .rl-h0 { color: #3ecf7a; }
.rl-p3head .rl-h1 { color: #c9902c; }
.rl-p3head .rl-h2 { color: #c96a4a; }
.rl-p3c.rl-c0.has { background: rgba(47, 125, 79, .22); color: #3ecf7a; }
.rl-p3c.rl-c1.has { background: rgba(201, 144, 44, .18); color: #c9902c; }
.rl-p3c.rl-c2.has { background: rgba(122, 38, 32, .32); color: #c96a4a; }
.rl-p3c.rl-c0.on { background: #2f7d4f; color: #0a0a0a; font-weight: 600; }
.rl-p3c.rl-c1.on { background: #c9902c; color: #0a0a0a; font-weight: 600; }
.rl-p3c.rl-c2.on { background: #5a2620; color: #f0c040; font-weight: 600; }

/* == compact + one orientation (owner, 2026-09-01): grids shrunk about a third, and the
      30-day calendar now runs weeks-as-columns with weekdays on the LEFT, exactly like the
      90-day heat - one style everywhere. ==================================================== */
.rl-cell { max-width: 30px; height: 30px; border-radius: 4px; }
.rl-g7 { gap: 6px; margin-bottom: 18px; }
.rl-g7 .rl-cell { max-width: 30px; height: 30px; border-radius: 4px; }
.rl-g5 .rl-cell { max-width: 40px; height: 40px; border-radius: 8px; }
.rl-cell .rl-n { font-size: 0.48rem; }
.rl-cell i { font-size: 0.52rem; margin-top: 4px; }
.rl-cell.rl-wk { max-width: 36px; height: 36px; border-radius: 6px; }
.rl-gwk { gap: 16px 6px; margin-bottom: 16px; }
/* EVEN-SPREAD LAW (owner, 2026-09-01): tracks stay FLUID minmax(0,1fr) from the base
   rules so the seven columns spread evenly across the box, duas-style; only the CELLS
   are capped small (30px, centred per track). Never pack tracks to fixed px. */
.rl-gw { gap: 6px; }
.rl-dow { gap: 6px; }