/* Success Tracker, mobile first.
   Idea: the day is a sky. Each prayer owns the colour of its hour (dawn slate, noon cyan,
   asr amber, sunset red, night navy); the hero draws the sun's arc and lights a node for
   every prayer you ticked. Gold is the single accent, kept to the leader mark and rings.
   Type: 5 sizes only (12 / 15 / 20 / 34 / 88). Spacing on a 4px scale. Tap targets 56px. */
:root{
  --bg:#EDF0F4; --surface:#FFFFFF; --surface-2:#F4F6F9; --ink:#0F1A2B; --muted:#56657A;
  --line:rgba(15,26,43,.12); --line-strong:rgba(15,26,43,.24);
  --slab:#0F1A2B; --on-slab:#EEF2F7; --slab-muted:#9DABBE; --slab-line:rgba(238,242,247,.16);
  --gold:#B07F22; --on:#FFFFFF; --danger:#B3372F;
  --fajr:#2B4C7E; --zuhr:#0B84AE; --asr:#B8730C; --maghrib:#C2412D; --isha:#1E2B52;
  --nafl:#0E7C66; --roza:#5E6A12; --gym:#B0306C;
  --display:"Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --body:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  --arabic:"Amiri", "Traditional Arabic", "Noto Naskh Arabic", serif;
  --fs-label:12px; --fs-body:15px; --fs-head:20px; --fs-title:34px; --fs-hero:88px;
  --r-card:20px; --r-tile:14px;
  --tab-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#070C15; --surface:#101928; --surface-2:#152032; --ink:#E8EDF4; --muted:#95A4B8;
    --line:rgba(232,237,244,.1); --line-strong:rgba(232,237,244,.22);
    --slab:#16223A; --on-slab:#EEF2F7; --slab-muted:#A3B1C4; --slab-line:rgba(238,242,247,.14);
    --gold:#E3B45A; --on:#08101C; --danger:#F07E72;
    --fajr:#86A8DE; --zuhr:#4DC2E8; --asr:#EDA646; --maghrib:#F4826B; --isha:#AAB7E0;
    --nafl:#44C7A5; --roza:#BDCC5E; --gym:#F08DBB;
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--fs-body)/1.5 var(--body);-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-user-select:none;user-select:none}
:focus-visible{outline:3px solid var(--zuhr);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}
.muted{color:var(--muted);margin:0}
svg{display:block}
/* fine grain on a fixed layer, never on scrolling content */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Login ---------- */
.is-login{min-height:100vh;min-height:100dvh;background:var(--slab);color:var(--on-slab)}
.login{max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) max(20px, env(safe-area-inset-right,0px)) max(24px, env(safe-area-inset-bottom,0px)) max(20px, env(safe-area-inset-left,0px))}
.login-sky{margin:24px -20px 0;height:200px}
.login-sky svg{width:100%;height:100%}
.ls-arc{fill:none;stroke:var(--slab-line);stroke-width:1.5;stroke-dasharray:3 6}
.ls-horizon{stroke:var(--slab-line);stroke-width:1.5}
.ls-node{fill:var(--c)}
.ls-mihrab{fill:none;stroke:var(--gold);stroke-width:2}
.ls-moon{fill:var(--slab-muted)}
.login-body{display:flex;flex-direction:column;gap:16px;margin-top:8px}
.login-title{font:800 64px/.9 var(--display);letter-spacing:-.045em;margin:0}
.login-lede{color:var(--slab-muted);margin:0 0 8px;max-width:34ch}
.loginbox{display:flex;flex-direction:column;gap:16px}
.is-login .field input{background:rgba(238,242,247,.06);border-color:var(--slab-line);color:var(--on-slab)}
.is-login .field span{color:var(--slab-muted)}
.is-login .btn-primary{background:var(--on-slab);color:var(--slab);border-color:var(--on-slab)}
.alert{margin:0;padding:12px 16px;border-radius:12px;background:rgba(194,65,45,.18);border:1px solid rgba(244,130,107,.5);color:var(--on-slab)}

/* ---------- Form controls ---------- */
.field{display:flex;flex-direction:column;gap:8px}
.field span{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.field input{height:56px;border:1px solid var(--line-strong);background:var(--surface);border-radius:14px;padding:0 16px;font-size:16px}
.btn-primary,.btn-secondary{height:56px;border-radius:14px;border:1px solid var(--ink);background:var(--ink);color:var(--bg);font-weight:700;font-size:16px;width:100%}
.btn-secondary{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary.danger{color:var(--danger)}
.msg{margin:0;font-weight:600;color:var(--muted);min-height:1.5em}

/* ---------- App frame ---------- */
.appbar{position:sticky;top:0;z-index:20;background:var(--bg);
  border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.appbar-in{max-width:640px;margin:0 auto;height:56px;display:flex;align-items:center;justify-content:space-between;
  padding-left:max(16px, env(safe-area-inset-left,0px));padding-right:max(16px, env(safe-area-inset-right,0px))}
.brand{display:flex;align-items:center;gap:8px;font:800 var(--fs-head)/1 var(--display);letter-spacing:-.03em}
.brand img{border-radius:8px}
.weekchip{font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:999px;padding:4px 12px}
.app{max-width:640px;margin:0 auto;padding:16px max(16px, env(safe-area-inset-right,0px)) calc(var(--tab-h) + 40px + env(safe-area-inset-bottom,0px)) max(16px, env(safe-area-inset-left,0px))}
.view{display:flex;flex-direction:column;gap:16px}
.banner{margin-bottom:16px;padding:12px 16px;border-radius:12px;background:var(--surface);border:1px solid var(--gold);font-size:14px}

/* ---------- Hero: today on a sky ---------- */
.hero{--fajr:#7FA2D8;--isha:#A4B2DE;background:var(--slab);color:var(--on-slab);border-radius:24px;padding:20px 20px 16px;position:relative;overflow:hidden}
.hero-top{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:32px;
  font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--slab-muted)}
.chip-back{background:var(--on-slab);color:var(--slab);border:0;border-radius:999px;padding:6px 12px;font-size:var(--fs-label);font-weight:700;letter-spacing:.02em;text-transform:none}
.hero-date{font:800 var(--fs-head)/1.2 var(--display);letter-spacing:-.01em;margin:4px 0 0}
.hero-score{font:800 var(--fs-hero)/.85 var(--display);letter-spacing:-.05em;margin-top:12px;display:flex;align-items:baseline;gap:8px}
.hero-score small{font:400 var(--fs-head)/1 var(--display);letter-spacing:0;color:var(--slab-muted)}
.arc{width:100%;height:auto;margin-top:4px}
.arc .ground{fill:rgba(238,242,247,.04)}
.arc .path{fill:none;stroke:var(--slab-line);stroke-width:1.5;stroke-dasharray:3 5}
.arc .horizon{stroke:var(--slab-line);stroke-width:1.5}
.arc .node{fill:var(--slab);stroke:var(--c);stroke-width:2}
.arc .node.on{fill:var(--c)}
.arc .ring{fill:none;stroke:var(--gold);stroke-width:1.5}
.arc .lbl{fill:var(--slab-muted);font:700 10px var(--body);letter-spacing:.06em;text-transform:uppercase}
.arc .lbl.on{fill:var(--on-slab)}
.arc .tick{fill:none;stroke:var(--slab);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hero-stats{display:grid;grid-template-columns:repeat(4, minmax(0,1fr));gap:8px;margin-top:8px;border-top:1px solid var(--slab-line);padding-top:12px}
.stat{display:flex;flex-direction:column;gap:2px;min-width:0}
.stat b{font:800 var(--fs-head)/1 var(--display)}
.stat span{font-size:var(--fs-label);color:var(--slab-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---------- Day strip ---------- */
.days{display:grid;grid-template-columns:repeat(7, minmax(0,1fr));gap:4px}
.day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;border-radius:14px;border:1px solid transparent;background:transparent;min-width:0;text-decoration:none;color:inherit}
.day .dw{font-size:var(--fs-label);font-weight:700;color:var(--muted);letter-spacing:.04em}
.day .ring{position:relative;width:40px;height:40px}
.day .ring svg{width:40px;height:40px;transform:rotate(-90deg)}
.day .ring circle{fill:none;stroke-width:3}
.day .ring .bgc{stroke:var(--line)}
.day .ring .fgc{stroke:var(--ink);stroke-linecap:round}
.day .dn{position:absolute;inset:0;display:grid;place-items:center;font:800 var(--fs-body)/1 var(--display)}
.day.today .dw{color:var(--ink)}
.day.today .ring .bgc{stroke:var(--line-strong)}
.day.future{opacity:.4}
.day[aria-current="date"], .day[aria-pressed="true"]{background:var(--surface);border-color:var(--line)}
.day[aria-pressed="true"] .ring .fgc{stroke:var(--gold)}

/* ---------- Sheet ---------- */
.sheet{display:flex;flex-direction:column;gap:12px}
.group-title{display:flex;align-items:baseline;justify-content:space-between;margin:12px 4px 0;
  font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden}
.card-head{display:flex;align-items:center;gap:12px;padding:12px 16px;
  background:linear-gradient(100deg, color-mix(in srgb, var(--c) 16%, var(--surface)), var(--surface) 75%);
  border-bottom:1px solid var(--line)}
.glyph{flex:none;width:40px;height:40px;border-radius:12px;background:var(--c);color:var(--on);display:grid;place-items:center}
.glyph svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card-name{display:flex;flex-direction:column;min-width:0;flex:1}
.card-name b{font:800 var(--fs-head)/1.1 var(--display);letter-spacing:-.01em}
.card-name span{font-size:var(--fs-label);color:var(--muted)}
.card-ar{font:700 var(--fs-head)/1 var(--arabic);color:var(--c)}
.count{font:800 var(--fs-body)/1 var(--display);color:var(--muted);min-width:36px;text-align:right}
.count.full{color:var(--c)}
.tiles{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;padding:12px}
.tiles.one{grid-template-columns:1fr}
.tile{min-height:56px;border-radius:var(--r-tile);border:1.5px solid var(--line-strong);background:var(--surface-2);
  display:flex;align-items:center;gap:12px;padding:8px 12px;text-align:left;font-weight:700;line-height:1.2;min-width:0;
  transition:background-color .12s ease, border-color .12s ease, color .12s ease}
.tile .box{flex:none;width:24px;height:24px;border-radius:8px;border:1.5px solid var(--line-strong);background:var(--surface);display:grid;place-items:center}
.tile .box svg{width:14px;height:14px;opacity:0;fill:none;stroke:var(--c);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tile .t{display:flex;flex-direction:column;min-width:0}
.tile small{font-weight:400;font-size:var(--fs-label);color:var(--muted)}
.tile .ic{margin-left:auto;flex:none;opacity:.5}
.tile .ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tile[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:var(--on)}
.tile[aria-pressed="true"] small{color:inherit;opacity:.85}
.tile[aria-pressed="true"] .box{background:var(--on);border-color:var(--on)}
.tile[aria-pressed="true"] .box svg{opacity:1}
.tile[aria-pressed="true"] .ic{opacity:.9}
.tile:active{transform:scale(.98)}
.tile:disabled{cursor:default}
.tile:disabled:active{transform:none}
.sheet.locked .tile:not([aria-pressed="true"]){opacity:.6}
.fine{font-size:var(--fs-label);color:var(--muted);margin:4px 4px 0}

/* ---------- Board ---------- */
.view-head{display:flex;flex-direction:column;gap:4px;margin:8px 4px 4px}
.view-title{font:800 var(--fs-title)/1 var(--display);letter-spacing:-.03em;margin:0}
.view-sub{margin:0;color:var(--muted)}
.ranks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.rank{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;overflow:hidden;cursor:pointer}
.rank.first{background:var(--slab);color:var(--on-slab);border-color:var(--slab)}
.rank .numeral{position:absolute;right:-4px;top:-20px;font:800 var(--fs-hero)/1 var(--display);letter-spacing:-.06em;color:var(--line-strong);pointer-events:none}
.rank.first .numeral{color:color-mix(in srgb, var(--gold) 55%, transparent)}
.rank-top{display:flex;align-items:baseline;gap:12px;position:relative}
.rank-name{font:800 var(--fs-head)/1.1 var(--display);letter-spacing:-.01em}
.rank-you{font-size:var(--fs-label);color:var(--muted)}
.rank.first .rank-you{color:var(--slab-muted)}
.rank-score{font:800 var(--fs-title)/1 var(--display);letter-spacing:-.03em;margin-top:8px;position:relative}
.rank-score small{font:400 var(--fs-body)/1 var(--body);color:var(--muted);margin-left:4px}
.rank.first .rank-score small{color:var(--slab-muted)}
.lead{font-size:var(--fs-label);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold)}
.mix{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--line);margin-top:12px;position:relative}
.mix i{display:block;height:100%}
.rank.first .mix{background:var(--slab-line)}
.dots{display:grid;grid-template-columns:repeat(7, 1fr);gap:4px;margin-top:8px;position:relative}
.dots i{height:4px;border-radius:2px;background:currentColor;display:block}
.block-title{font:800 var(--fs-head)/1.2 var(--display);letter-spacing:-.01em;margin:16px 4px 0}
.panel .block-title{margin:0}
.matrix-wrap{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);overflow-x:auto}
.matrix{border-collapse:collapse;width:100%}
.matrix th,.matrix td{padding:12px 8px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap}
.matrix th:first-child,.matrix td:first-child{text-align:left;padding-left:16px}
.matrix th:last-child,.matrix td:last-child{padding-right:16px}
.matrix tr:last-child td{border-bottom:0}
.matrix thead th{font-size:var(--fs-label);font-weight:700;color:var(--muted);letter-spacing:.04em}
.matrix td.cat{font-weight:700}
.matrix td.cat small{display:block;font-weight:400;font-size:var(--fs-label);color:var(--muted)}
.matrix td.cat .sw{display:inline-block;width:8px;height:8px;border-radius:2px;background:var(--c);margin-right:8px;vertical-align:1px}
.matrix td.best{font-weight:800;color:var(--ink);box-shadow:inset 0 -2px 0 var(--gold)}
.matrix tr.total td{font:800 var(--fs-head)/1 var(--display)}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:0 4px;font-size:var(--fs-label);color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:4px}
.legend i{width:8px;height:8px;border-radius:2px;background:var(--c);display:inline-block}

/* ---------- Me ---------- */
.me-card{display:flex;align-items:center;gap:16px;padding:20px;border-radius:24px;background:var(--slab);color:var(--on-slab)}
.avatar{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:var(--slab);font:800 var(--fs-title)/1 var(--display)}
.me-name{font:800 var(--fs-head)/1.2 var(--display)}
.me-user{color:var(--slab-muted);font-size:14px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);padding:16px;display:flex;flex-direction:column;gap:8px}
.stack{gap:16px}

/* ---------- Tab bar + toast ---------- */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--surface);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:0 max(8px, env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(8px, env(safe-area-inset-left,0px))}
.tab{height:var(--tab-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:var(--muted);text-decoration:none;font-size:var(--fs-label);font-weight:700;letter-spacing:.02em}
.tab svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tab[aria-current="page"]{color:var(--ink)}
.tab[aria-current="page"] svg{stroke-width:2.2}
.tab[aria-current="page"]::after{content:"";width:20px;height:3px;border-radius:2px;background:var(--gold);margin-top:-2px}
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 12px + env(safe-area-inset-bottom,0px));z-index:40;transform:translate(-50%, 8px);
  background:var(--ink);color:var(--bg);font-weight:700;font-size:14px;padding:8px 16px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%, 0)}
.toast.err{background:var(--danger);color:#fff}

/* ---------- Wider screens: same app, more air ---------- */
@media (min-width:720px){
  :root{--fs-hero:88px}
  .app{padding-top:24px}
  .hero{padding:28px 28px 20px}
  .login-title{font-size:88px}
}
@media (max-width:360px){
  :root{--fs-hero:72px}
  .hero-stats{grid-template-columns:repeat(2, minmax(0,1fr))}
  .tile{gap:8px;padding:8px}
}
@media (prefers-reduced-motion:reduce){
  .tile,.toast{transition:none}
  .tile:active{transform:none}
}