/* Safar workspace: shared tokens, application shell and controls.
   Used by the dashboard (inlined by tools/build.py) and by the sign-in and admin pages (served in /auth.css).
   See DESIGN.md for the reasoning behind each value. */
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin.woff2) format("woff2");font-weight:300 900;font-display:swap;
 unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Figtree";src:url(/fonts/figtree-latin-ext.woff2) format("woff2");font-weight:300 900;font-display:swap;
 unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
 /* Brand: Safar navy from the logo (#003B6B). Reserved for the brand, selected indicators and the one primary action. */
 --navy:#003b6b;--navy-2:#002c52;--navy-soft:#e9eff6;
 /* Navigation: a Safar navy rail, as Journey2Jannah carries its own colour in its rail. The selected item is a
    white tab with navy type. */
 --rail-bg:#003b6b;--rail-ink:#e6eef6;--rail-mute:#a9c0d6;--rail-line:rgba(255,255,255,.14);--rail-hover:rgba(255,255,255,.1);--rail-on:#fff;
 /* Surfaces and text: a soft, cool canvas (a touch of blue in the grey), floating white cards, deep slate type */
 --bg:#f2f4f8;--surface:#fff;--surface-2:#f6f7fb;--sunk:#eef0f5;--line:#e4e7ee;--line-2:#cbd1dc;
 --ink:#1c2230;--ink-2:#3c4557;--mute:#5a6375;
 /* Actions and status. Every colour that carries white text is at least 4.5:1. */
 --primary:#003b6b;--primary-hover:#002c52;--primary-soft:#e9eff6;--primary-ink:#0b4a82;
 --ok:#4e7d5b;--ok-soft:#edf3ee;--ok-ink:#2f5a3b;
 --warn:#b45309;--warn-soft:#fbf3e8;--warn-ink:#874006;
 --bad:#b42318;--bad-soft:#fcefed;--bad-ink:#8f1d14;
 --focus:#2563a8;
 /* Restrained accents: sage for healthy states, gold for achievement. The sky and teal names stay for
    older rules but now resolve to the same quiet family, so no tinted panels remain. */
 --sage:#5e8a69;--sage-soft:#eef3ef;--sage-ink:#2f5a3b;
 --sky:#4a6f94;--sky-soft:#f6f7f9;--sky-ink:#2f4c69;
 --teal:#5e8a69;--teal-soft:#f6f7f9;--teal-ink:#2f5a3b;
 --gold:#b98a1e;--gold-soft:#f8f2e2;--gold-ink:#664a0b;
 /* Meaningful colours kept from the original dashboard: houses and house tokens */
 --makkah:#c9930c;--aqsa:#2386d1;--madinah:#1c9a68;
 --tok-g:#16a34a;--tok-b:#2563eb;--tok-r:#dc2626;--tok-g-ink:#15703a;--tok-b-ink:#1d4ed8;--tok-r-ink:#b91c1c;
 /* Warning levels: 1 notice, 2 serious, 3 miss break */
 --w1:#e2b53a;--w1-ink:#4a3200;--w2:#c2410c;--w3:#b42318;
 /* Shape, space, type */
 /* Rounder, friendlier shapes: pill buttons and inputs with 12px corners, cards with 20px corners. */
 --r-sm:8px;--r:12px;--r-lg:20px;--r-pill:999px;
 --font:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
 --font-display:var(--font);
 /* Cards float on the canvas with a wide, faint shadow instead of a hairline border. */
 --shadow:0 1px 2px rgba(28,34,48,.04),0 6px 24px rgba(28,34,48,.06);
 --shadow-lift:0 16px 40px rgba(28,34,48,.18);
 --rail:232px;
 /* Older names used by the admin pages */
 --navy-ink:var(--rail-ink);--navy-mute:var(--rail-mute);--navy-line:var(--rail-line);
 --band-ink:var(--ink);--band-mute:var(--mute);--band-line:var(--line-2);
 /* One light look everywhere: the dashboard is used in classrooms in daylight, and an OS dark setting
    previously turned the selected tab navy on navy. */
 color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.5 var(--font);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;line-height:1.2;text-wrap:balance}
h1{font-size:1.75rem;font-weight:800;letter-spacing:-.015em;font-family:var(--font-display)}
.brand b{font-family:var(--font-display);font-weight:800}
h2{font-size:1.125rem;font-weight:800;letter-spacing:-.005em}
h3{font-size:1rem;font-weight:750}
p{margin:0 0 .75rem}
a{color:var(--primary-ink);text-underline-offset:.18em}
button,a,summary,label,input,select,textarea{touch-action:manipulation;-webkit-tap-highlight-color:rgba(0,59,107,.12)}
a:hover{color:var(--primary-hover)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:#fff;color:var(--navy);font-weight:700;padding:10px 14px;border-radius:var(--r);box-shadow:var(--shadow-lift)}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.hide,[hidden]{display:none!important}
.sub,.hint{color:var(--mute)}
.hint{font-size:.875rem}
.num{font-variant-numeric:tabular-nums}

/* ---------- Application shell: graphite rail on wide screens, top bar on narrow ones ---------- */
.shell{min-height:100vh;min-height:100dvh}
/* <header> and <main> stay bare tags: the server adds inert to them while records load. */
.shell>header{display:contents}
.rail{background:var(--rail-bg);color:var(--rail-ink);display:flex;flex-direction:column;z-index:20}
.rail a,.rail button{color:inherit}
.rail .brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:#fff;padding:16px 16px 12px;min-width:0}
/* The navy logo sits on a white disc so it stays visible on the graphite rail. */
.badge{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff}
.badge img{width:34px;height:34px;display:block}
.brand b{display:block;font-size:1.0625rem;font-weight:750;line-height:1.15}
/* The MySafar wordmark: "My" in a light weight, "Safar" in the heavy weight. */
.wm{font-weight:400!important;letter-spacing:-.01em}
.wm span{font-weight:850}
.rail .brand .wm{font-size:1.25rem}
.brand small{display:block;font-size:.8125rem;color:var(--rail-mute);line-height:1.2}
.navt{position:absolute;opacity:0;pointer-events:none}
.menu-btn{display:none}
.navs{display:flex;flex-direction:column;gap:2px;padding:4px 10px 12px;flex:1;min-height:0;overflow-y:auto}
.navh{margin:14px 10px 4px;font-size:.8125rem;font-weight:700;color:var(--rail-mute)}
.nav{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:8px 12px;border-radius:var(--r);border:0;background:none;font:inherit;font-size:.9375rem;text-align:left;text-decoration:none;cursor:pointer;color:var(--rail-ink)}
.nav:hover{background:var(--rail-hover);color:#fff}
.nav[aria-current="page"],.nav[aria-current="true"]{background:var(--rail-on);color:var(--navy);font-weight:800;box-shadow:0 4px 14px rgba(0,20,40,.22)}
.nav[aria-current="page"]:hover,.nav[aria-current="true"]:hover{color:var(--navy)}
.nav:focus-visible{outline-color:#fff}
.nav[aria-current]:focus-visible{outline-color:#9cc3e8}
.nav .ic{flex:none;width:18px;height:18px}
.nav .ext{margin-left:auto;opacity:.75}
.nav.j2j .dot{width:8px;height:8px;border-radius:50%;background:var(--sage);flex:none;margin:0 5px}
.classes{display:flex;flex-direction:column;gap:1px;max-height:40vh;overflow-y:auto;margin:0 -2px;padding:0 2px}
.classes .nav{font-size:.875rem;min-height:36px;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.me{border-top:1px solid var(--navy-line);padding:12px 16px 16px;display:flex;flex-direction:column;gap:8px;font-size:.875rem}
.me .who b{display:block;color:#fff;font-weight:700;overflow-wrap:anywhere}
.me .who span{color:var(--rail-mute)}
.me .row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.me form{margin:0}
.me .linkbtn{font:inherit;font-size:.875rem;font-weight:650;background:none;border:1px solid var(--navy-line);border-radius:var(--r-pill);padding:6px 10px;min-height:36px;cursor:pointer;color:var(--rail-ink);text-decoration:none;display:inline-flex;align-items:center}
.me .linkbtn:hover{background:var(--rail-hover)}
.me .linkbtn[aria-current="page"]{background:var(--rail-on);color:var(--navy);border-color:#fff;font-weight:800}
.work{min-width:0;display:flex;flex-direction:column}
.content{width:100%;max-width:1240px;margin:0 auto;padding:24px 32px 48px}
.content.narrow{max-width:880px}

@media (min-width:960px){
 .shell{display:grid;grid-template-columns:var(--rail) minmax(0,1fr);background:linear-gradient(90deg,var(--rail-bg) var(--rail),var(--bg) var(--rail))}
 .rail{position:sticky;top:0;height:100vh;height:100dvh}
}
/* On wide screens the menu wrapper adds no box: the nav list and the account block sit in the rail as before. */
.navw{display:contents}
.dock,.dscrim,.dkx{display:none}
@media (max-width:959.98px){
 :root{--dock-h:64px;--dock-gap:calc(10px + env(safe-area-inset-bottom,0px))}
 .rail{position:relative;flex-direction:row;flex-wrap:wrap;align-items:center;box-shadow:0 1px 0 rgba(0,0,0,.2)}
 .rail .brand{padding:8px 12px;flex:1}
 .badge{width:34px;height:34px}.badge img{width:28px;height:28px}
 .content{padding:16px 16px calc(var(--dock-h) + 40px + env(safe-area-inset-bottom,0px))}

 /* The dock: the main items, always within thumb reach, as a floating bar of icons at the bottom of the screen.
    The selected item sits in a pastel bubble of its own colour; the rest stay graphite. */
 .dock{position:fixed;z-index:80;left:50%;bottom:var(--dock-gap);transform:translateX(-50%);display:flex;gap:2px;
  width:min(calc(100% - 20px),500px);height:var(--dock-h);padding:5px;border-radius:26px;
  background:rgba(255,255,255,.93);-webkit-backdrop-filter:saturate(1.8) blur(18px);backdrop-filter:saturate(1.8) blur(18px);
  border:1px solid rgba(255,255,255,.9);box-shadow:0 14px 34px rgba(0,30,60,.16),0 2px 8px rgba(0,30,60,.08),0 0 0 1px rgba(28,34,48,.05);
  animation:dockIn .55s cubic-bezier(.2,.9,.3,1.15) .1s both;transition:transform .3s cubic-bezier(.3,.7,.3,1),opacity .2s}
 @keyframes dockIn{from{transform:translate(-50%,calc(100% + 24px));opacity:0}}
 .dk{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:0;border-radius:21px;
  background:none;padding:0;font:inherit;font-size:.6875rem;line-height:1.2;font-weight:650;letter-spacing:.005em;color:var(--ink-2);text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
 .rail .dk{color:var(--ink-2)}
 .rail .dk:hover{color:var(--ink)}
 .dk .dki{display:grid;place-items:center;width:46px;height:30px;border-radius:999px;transition:background-color .25s,transform .35s cubic-bezier(.3,1.7,.5,1)}
 .dk .ic{width:23px;height:23px;stroke-width:1.9}
 .dk span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px}
 .dk:active .dki{transform:scale(.84)}
 .rail .dk[aria-current="page"]{color:var(--navy);font-weight:800}
 .dk[aria-current="page"] .dki{background:var(--dk-bg,var(--navy-soft));color:var(--dk-ink,var(--navy))}
 .dk[aria-current="page"] .ic{stroke-width:2.2;animation:dkPop .5s cubic-bezier(.3,1.6,.5,1)}
 @keyframes dkPop{0%{transform:scale(.7) rotate(-8deg)}60%{transform:scale(1.12) rotate(3deg)}100%{transform:none}}
 .dk:focus-visible{outline:3px solid var(--focus);outline-offset:-3px}
 /* Each item's own pastel, from the greeting chips and the Quran score colours */
 .dk.dk-progressk-home{--dk-bg:#e3eefb;--dk-ink:#0b4a82}
 .dk.dk-progressk-classes{--dk-bg:#e3eefb;--dk-ink:#0b4a82}
 .dk.dk-progressk-record{--dk-bg:#fbf0d6;--dk-ink:#664a0b}
 .dk.dk-progressk-quran{--dk-bg:#dff1e6;--dk-ink:#2f5a3b}
 .dk.dk-progressk-memo{--dk-bg:#fbf0d6;--dk-ink:#7a5608}
 .dk.dk-progress{--dk-bg:#ebe7fb;--dk-ink:#4c3d99}
 .dk.dk-rewards{--dk-bg:#fde8e1;--dk-ink:#9a3412}
 .dk.dk-more{--dk-bg:#e9eff6;--dk-ink:#003b6b}
 .navt:checked~.dock .dk.dk-more,.rail .dk.dk-more.on{color:var(--navy);font-weight:800}
 .navt:checked~.dock .dk.dk-more .dki{background:var(--navy);color:#fff}
 .dk.dk-more .ic{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
 .navt:checked~.dock .dk.dk-more .ic{transform:rotate(90deg)}
 .navt:focus-visible~.dock .dk.dk-more{outline:3px solid var(--focus);outline-offset:-3px}
 /* While typing on a phone the dock steps aside, so it never sits on top of the keyboard. */
 .typing .dock{transform:translate(-50%,calc(100% + 24px));opacity:0;pointer-events:none}

 @media (max-width:379px){.dock{width:calc(100% - 12px);padding:4px;gap:0}.dk{font-size:.625rem}.dk .dki{width:40px}}
 /* More: the full menu opens as a navy card that rises from the dock. */
 .menu-btn{display:none}
 .navw{display:flex;flex-direction:column;position:fixed;z-index:82;left:10px;right:10px;bottom:calc(var(--dock-gap) + var(--dock-h) + 10px);
  max-width:500px;margin:0 auto;max-height:calc(100dvh - var(--dock-h) - 40px);overflow-y:auto;overscroll-behavior:contain;
  background:var(--rail-bg);border-radius:24px;box-shadow:0 20px 50px rgba(0,20,40,.35);padding:8px 0 0;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.97);transform-origin:50% 100%;
  transition:opacity .2s,transform .3s cubic-bezier(.2,.9,.3,1.1),visibility 0s .3s}
 .navt:checked~.navw{opacity:1;visibility:visible;transform:none;transition:opacity .2s,transform .35s cubic-bezier(.2,.9,.3,1.1),visibility 0s}
 .navw .navs{flex:none;overflow:visible;padding:4px 10px 8px}
 .navw .me{display:flex;border-top:1px solid var(--navy-line)}
 .navw .me[hidden]{display:none}
 .navw .dkx{display:flex}
 .navw .dkx[hidden]{display:none}
 .dscrim{display:block;position:fixed;inset:0;z-index:79;background:rgba(10,24,40,.32);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s .2s;cursor:pointer}
 .navt:checked~.dscrim{opacity:1;visibility:visible;transition:opacity .2s,visibility 0s}
}

/* ---------- Page band: the opening of the admin and account pages, with its title and key figures.
   It sits on the grey canvas in graphite type; the dashboard's compact head (.head in template.css) matches it. ---------- */
.band{color:var(--ink);padding:4px 0 0;margin-bottom:16px;position:relative}
.band-top{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;min-height:40px}
.band h1{font-size:1.75rem;font-weight:800;letter-spacing:-.015em;line-height:1.15;overflow-wrap:anywhere;color:var(--navy);margin-right:auto}
.band .acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.band .lede{color:var(--mute);margin:6px 0 0;max-width:60ch}
.figs{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:8px}
.fig{min-width:0;display:flex;align-items:baseline;gap:6px}
.fig b{font-size:1.25rem;font-weight:750;line-height:1.1;letter-spacing:-.01em;font-variant-numeric:tabular-nums;color:var(--ink)}
.fig span{font-size:.875rem;color:var(--mute)}
/* A figure that needs attention keeps graphite digits and gains a small amber marker. */
.fig.alert span::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--warn);margin-right:6px;vertical-align:1px}
.fig.quiet b{font-size:1.125rem}
.band.slim h1{font-size:1.625rem}
@media (max-width:959.98px){
 .band h1{font-size:1.375rem}
 .figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px}
 .fig{flex-direction:column;gap:0}
 .fig b{font-size:1.125rem}
 .fig span{font-size:.8125rem;line-height:1.25}
}
@media (max-width:379px){.band h1{font-size:1.25rem}}

/* ---------- Panels and modules ----------
   White workspaces carry the work. Modules are separated by space and headings, not by tinted fills. */
.panel,.card{background:var(--surface);border:0;border-radius:var(--r-lg);padding:24px;box-shadow:var(--shadow)}
.mod{background:var(--surface);border-radius:var(--r-lg);padding:20px;min-width:0}
.mod.line{border:1px solid var(--line)}

.mod-h{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-bottom:12px;min-height:36px}
.mod-h h2{font-size:1.125rem;font-weight:800}
.cap{font-size:.8125rem;color:var(--mute);margin:0}
.g12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;align-items:start}
.g12.eq{align-items:stretch}
.g12>*{grid-column:1/-1}
@media (min-width:1100px){.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}.s7{grid-column:span 7}.s8{grid-column:span 8}}
.g12+.g12,.g12+.mod,.mod+.g12,.mod+.mod{margin-top:20px}
.g12>.mod{margin-top:0}
/* A small segmented control, for a shared period or measure */
/* A pill track with the chosen option as a white pill inside it */
.seg{display:inline-flex;gap:2px;padding:3px;border:0;border-radius:var(--r-pill);background:var(--sunk)}
.seg button{font:inherit;font-size:.875rem;font-weight:650;border:0;border-radius:var(--r-pill);background:none;color:var(--ink-2);padding:6px 14px;min-height:34px;cursor:pointer}
.seg button:hover{color:var(--ink);background:rgba(255,255,255,.6)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--navy);font-weight:800;box-shadow:0 1px 3px rgba(28,34,48,.12),0 0 0 1px rgba(0,59,107,.12)}
.seg button:focus-visible{outline-offset:-3px}
/* Contextual help: a ? that opens the rules for the screen, by keyboard, touch or pointer */
.help{position:relative;display:inline-block}
.help summary{list-style:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);color:var(--ink-2);font-weight:800;cursor:pointer}
.help summary::-webkit-details-marker{display:none}
.help summary:hover{background:var(--surface-2)}
.help[open] summary{background:var(--sunk)}
.help .hb{position:absolute;z-index:35;top:44px;right:0;width:min(360px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line-2);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);padding:14px 16px;font-size:.9375rem;font-weight:400;text-align:left}
.help .hb p{margin:0 0 8px}.help .hb p:last-child{margin:0}
.help.left .hb{right:auto;left:0}
@media (max-width:640px){.help .hb,.help.left .hb{position:fixed;left:12px;right:12px;top:auto;width:auto;bottom:calc(var(--dock-gap,12px) + var(--dock-h,0px) + 12px);max-height:60vh;overflow-y:auto;z-index:85}}
.panel+.panel,.card+.card{margin-top:16px}
.panel>h2,.card>h2,.panel-h h2{margin-bottom:4px}
.panel-h{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:baseline;justify-content:space-between;margin-bottom:12px}
.panel-h p{margin:0}
.panel .sub,.card .sub{font-size:.9375rem}
.stack>*+*{margin-top:16px}
.cols{display:grid;gap:20px;align-items:start;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))}
.section-title{font-size:1rem;font-weight:700;margin:32px 0 12px;color:var(--ink-2)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-size:.9375rem;font-weight:700;line-height:1.2;min-height:40px;padding:8px 16px;border-radius:var(--r-pill);border:1px solid var(--line-2);background:var(--surface);color:var(--ink);cursor:pointer;text-decoration:none;white-space:nowrap;touch-action:manipulation}
.btn:hover{background:var(--surface-2);border-color:var(--mute)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.btn.primary,.btn.p{background:var(--primary);border-color:var(--primary);color:#fff}
.btn.primary:hover,.btn.p:hover{background:var(--primary-hover);border-color:var(--primary-hover)}
.btn.quiet{background:none;border-color:transparent;color:var(--primary-ink)}
.btn.quiet:hover{background:var(--primary-soft)}
.btn.danger,.btn.x{background:var(--surface);color:var(--bad-ink);border-color:color-mix(in srgb,var(--bad) 55%,var(--line))}
.btn.danger:hover,.btn.x:hover{background:var(--bad-soft)}
.btn.danger.solid,.btn.x.solid{background:var(--bad);border-color:var(--bad);color:#fff}
.btn.sm{min-height:36px;padding:6px 12px;font-size:.875rem}
.btn.lg{min-height:52px;padding:12px 24px;font-size:1rem}
.btn.wide{width:100%}
button.link{font:inherit;background:none;border:0;padding:0;color:var(--primary-ink);cursor:pointer;text-decoration:underline;text-underline-offset:.18em}

/* ---------- Forms ---------- */
.field{display:flex;flex-direction:column;gap:6px;font-size:.875rem;font-weight:600;color:var(--ink-2)}
input,select,textarea{font:inherit;font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r);padding:9px 12px;min-height:44px;max-width:100%}
textarea{min-height:96px;resize:vertical;width:100%}
input:hover,select:hover,textarea:hover{border-color:var(--mute)}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--focus);outline-offset:0;border-color:var(--focus)}
input[type=checkbox],input[type=radio]{min-height:0;width:18px;height:18px;accent-color:var(--primary)}
input[type=file]{padding:7px 10px}
fieldset{border:1px solid var(--line);border-radius:var(--r-lg);margin:0 0 16px;padding:12px 16px}
legend{font-weight:700;padding:0 6px;font-size:.9375rem}

/* ---------- Tables ---------- */
.tablewrap{overflow-x:auto;border:0;border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow)}
.mod .tablewrap,.mod .sheetwrap{border:0;border-radius:0}
.mod fieldset{border:0;border-top:1px solid var(--line);border-radius:0;padding:12px 0 0}
.tbl{width:100%;border-collapse:collapse;font-size:.9375rem}
.tbl th,.tbl td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
.tbl thead th{font-size:.8125rem;font-weight:750;color:var(--mute);background:var(--surface-2);white-space:nowrap}
.tbl tbody tr:last-child>*{border-bottom:0}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.tbl td form{margin:0}

/* ---------- Pills, notices and empty states ---------- */
.pill,.tg{display:inline-flex;align-items:center;gap:4px;font-size:.8125rem;font-weight:600;line-height:1.3;border-radius:999px;padding:2px 10px;background:var(--sunk);color:var(--ink-2);white-space:nowrap}
.pill.blue{background:var(--primary-soft);color:var(--primary-ink)}
.pill.grey{background:var(--sunk);color:var(--mute)}
.pill.amber{background:var(--warn-soft);color:var(--warn-ink)}
.pill.red{background:var(--bad-soft);color:var(--bad-ink)}
.pill.green,.tg.nw{background:var(--ok-soft);color:var(--ok-ink)}
.notice,.error{display:flex;gap:10px;align-items:flex-start;border-radius:var(--r-lg);padding:12px 16px;margin:0 0 16px;border:1px solid}
.notice{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 40%,transparent);color:var(--ok-ink)}
.error{background:var(--bad-soft);border-color:color-mix(in srgb,var(--bad) 40%,transparent);color:var(--bad-ink)}
.empty{padding:24px;border:2px dashed var(--line);border-radius:var(--r-lg);color:var(--mute);text-align:center}
.empty b{display:block;color:var(--ink);margin-bottom:2px}
.hdot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:none;background:var(--line-2)}
.hdot.Makkah{background:var(--makkah)}.hdot.Al-Aqsa{background:var(--aqsa)}.hdot.Madinah{background:var(--madinah)}

/* Tables on narrow screens become labelled rows */
@media (max-width:640px){
 .tbl.stackable thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
 .tbl.stackable,.tbl.stackable tbody,.tbl.stackable tr,.tbl.stackable td{display:block;width:100%}
 .tbl.stackable tr{padding:10px 14px;border-bottom:1px solid var(--line)}
 .tbl.stackable tbody tr:last-child{border-bottom:0}
 .tbl.stackable td{border:0;padding:3px 0;display:flex;gap:12px;justify-content:space-between;text-align:right}
 .tbl.stackable td::before{content:attr(data-label);color:var(--mute);font-size:.8125rem;font-weight:600;text-align:left;flex:none}
 .tbl.stackable td.lead{font-weight:700;font-size:1rem;text-align:left;justify-content:flex-start}
 .tbl.stackable td.lead::before{display:none}
 .tbl.stackable td[colspan]{justify-content:center}
 .tbl.stackable td[colspan]::before{display:none}
 .tbl.stackable td:empty{display:none}
}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* Sign-in, account and admin pages. Served after src/tokens.css in /auth.css, so the shell,
   tokens and controls are the same as on the dashboard. */
.content>h2{margin:28px 0 12px}
.band .crumb{margin:0 0 6px;font-size:.875rem}
.band .crumb a{color:var(--band-mute)}
.band+.tablewrap,.band+.mod{margin-top:0}
.mod>h2{margin-bottom:6px}
.mod form{margin:0}
.panel form,.card form{margin:0}
form .field{margin:0 0 14px}
.field input,.field select{width:100%;font-weight:400}
.formrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 12px}
label.check{display:flex;gap:10px;align-items:center;font-weight:400;font-size:.9375rem;color:var(--ink);min-height:36px}
label.check input{margin:0}
.rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(240px,100%),1fr));gap:0 16px;max-height:280px;overflow:auto}
.rooms label.check{align-items:flex-start;padding:6px 0}
.rooms label.check input{margin-top:3px}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.actions form{margin:0}
.linkbox{border-color:var(--primary);background:var(--primary-soft);margin-bottom:20px}
.linkbox input{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.875rem}

/* Accounts: one white list, a row per person; open a row to change it */
.accounts{background:var(--surface);border:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.accounts>h2{padding:16px 20px 12px;margin:0;border-bottom:1px solid var(--line)}
details.user{border-bottom:1px solid var(--line)}
details.user:last-child{border-bottom:0}
details.user summary{display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;align-items:center;cursor:pointer;list-style:none;padding:12px 20px;min-height:60px}
details.user summary::-webkit-details-marker{display:none}
details.user summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg);margin-left:4px;flex:none}
details.user[open] summary::after{transform:rotate(-135deg)}
details.user summary:hover{background:var(--surface-2)}
details.user[open] summary{background:var(--surface-2)}
details.user .who{min-width:0;display:flex;flex-direction:column}
details.user .who b{overflow-wrap:anywhere}
details.user .who .sub{font-size:.875rem;overflow-wrap:anywhere}
details.user .tags{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-left:auto}
details.user .body{padding:4px 20px 20px;background:var(--surface-2)}
details.user .body>p:first-child{margin-top:4px}
details.user.off .who{opacity:.7}
.invite,.mail{margin-top:24px;scroll-margin-top:72px}
.mail form{margin-top:12px}
.invite:target,.invite:focus{outline:3px solid var(--focus);outline-offset:2px}
@media (max-width:959.98px){.accounts{margin:0 -16px;border-radius:0;border-left:0;border-right:0}details.user summary{padding:12px 16px}details.user .body{padding:4px 16px 16px}}
.danger-zone{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}

/* Sign-in and other single-card pages. After Journey2Jannah's sign-in: a navy welcome panel with a short
   saying on the left, and a roomy white card on the right. Phones get just the card under a navy strip. */
.solo{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;background:var(--bg)}
.solo-band{background:var(--navy);height:6px}
.welcome{display:none}
.solo main{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px}
.solo .card{width:100%;max-width:440px;padding:36px 36px 30px;border-radius:24px}
.solo .notice,.solo .error{width:100%;max-width:440px}
.solo .mark{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.solo .mark .badge{width:48px;height:48px;background:var(--navy);box-shadow:none}
.solo .mark .badge img{width:44px;height:44px;border-radius:50%;background:#fff}
.solo .mark b{display:block;font-size:1.0625rem;font-weight:800}
.solo .mark small{display:block;color:var(--mute);font-size:.875rem}
.solo h1{font-size:2rem;margin-bottom:6px;color:var(--ink)}
.solo .lede{color:var(--mute);margin-bottom:22px}
.solo .field input{min-height:52px;padding:12px 46px 12px 16px}
.fin{position:relative;display:block}
.fin .ic{position:absolute;right:15px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--mute);pointer-events:none}
.solo .btn.primary{width:100%;min-height:54px;margin-top:6px;font-size:1rem;font-weight:800}
.solo form[action="/login"] .btn.primary{letter-spacing:.08em;text-transform:uppercase}
.solo .alt{margin:22px 0 0;padding-top:0;border-top:0;font-size:.9375rem;text-align:center}
.solo .alt p{margin:0 0 6px}
@media (min-width:880px){
 .solo{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto}
 .solo-band{display:none}
 .welcome{grid-row:1/3;display:flex;flex-direction:column;background:var(--navy);color:#fff;padding:28px 40px 0;position:relative;overflow:hidden;
  background-image:radial-gradient(circle at 85% 12%,rgba(255,255,255,.08) 0 90px,transparent 91px),radial-gradient(circle at 8% 80%,rgba(255,255,255,.06) 0 140px,transparent 141px)}
 .solo main{grid-column:2}
}
.wmark{display:flex;align-items:center;gap:12px}
.wmark .badge{width:46px;height:46px}
.wmark b{display:block;font-size:1.0625rem;font-weight:800}
.wmark small{display:block;color:#a9c0d6;font-size:.875rem}
.wquote{position:relative;margin:auto auto 0;max-width:460px;background:rgba(0,20,40,.28);border-radius:22px;padding:52px 36px 32px;text-align:center}
.wtab{position:absolute;top:-24px;left:50%;transform:translateX(-50%);background:#e9b45c;color:#2b1d02;font-weight:800;font-size:1.25rem;letter-spacing:.12em;text-transform:uppercase;padding:10px 34px;border-radius:12px;white-space:nowrap}
.wquote blockquote{margin:0}
.wquote p{font-size:1.375rem;font-weight:650;line-height:1.45;margin:0 0 14px;text-wrap:balance}
.wquote figcaption{color:#c9d8e6;font-size:.9375rem}
.wart{display:block;width:100%;max-width:420px;margin:28px auto 0;color:#7fa6c9;opacity:.75}
.contact{display:flex;flex-direction:column;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;margin:0 0 16px}
.contact b{font-size:.9375rem}
.center{text-align:center}

.solo form.center{margin-top:16px}
.hint.after{margin:10px 0 0}
.inline-form{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}
.inline-form .field{margin:0;flex:1 1 240px}
details.confirm summary{list-style:none}
details.confirm summary::-webkit-details-marker{display:none}
details.confirm form{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-2);max-width:300px}
details.confirm p{font-size:.875rem;margin:0 0 8px}

/* Opening titles (sign-in page, fresh visits only). A deep navy stage; the eight-point star draws itself in gold
   around the logo, the name rises in, then the stage fades away into the sign-in screen while
   the form rises. Pointer events pass through, so the form can be used at once. Off under reduced motion. */
.intro{position:fixed;inset:0;z-index:50;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff;
 background:var(--navy);background-image:radial-gradient(circle at 85% 12%,rgba(255,255,255,.08) 0 90px,transparent 91px),radial-gradient(circle at 8% 80%,rgba(255,255,255,.06) 0 140px,transparent 141px);
 animation:i-dissolve 1.4s cubic-bezier(.4,0,.2,1) 2.6s both,i-gone 0s linear 4s forwards}
.intro::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(0,24,46,.2) 0,#00172d 75%);animation:i-fade .8s ease 2.5s both}
.intro>*{position:relative}
.istars{position:absolute;inset:0}
.istars i{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:0;animation:i-twinkle 2.6s ease-in-out both}
.istars i:nth-child(1){left:12%;top:18%;animation-delay:.1s}.istars i:nth-child(2){left:24%;top:72%;animation-delay:.5s}
.istars i:nth-child(3){left:38%;top:12%;animation-delay:.3s}.istars i:nth-child(4){left:52%;top:86%;animation-delay:.8s}
.istars i:nth-child(5){left:66%;top:22%;animation-delay:.2s}.istars i:nth-child(6){left:78%;top:64%;animation-delay:.6s}
.istars i:nth-child(7){left:88%;top:34%;animation-delay:.4s}.istars i:nth-child(8){left:8%;top:52%;animation-delay:.9s}
.istars i:nth-child(9){left:32%;top:44%;animation-delay:.7s;width:2px;height:2px}.istars i:nth-child(10){left:70%;top:46%;animation-delay:1s;width:2px;height:2px}
.istars i:nth-child(11){left:92%;top:82%;animation-delay:.35s}.istars i:nth-child(12){left:46%;top:30%;animation-delay:1.1s;width:2px;height:2px}
.icore{position:relative;width:220px;height:220px;display:grid;place-items:center;animation:i-out .5s ease 2.55s both}
.istar{position:absolute;inset:0;width:100%;height:100%;animation:i-spin 3.2s cubic-bezier(.3,0,.2,1) both}
.isq{stroke:#e9b45c;stroke-dasharray:440;stroke-dashoffset:440;animation:i-draw 1.2s cubic-bezier(.6,0,.2,1) .25s forwards}
.isq.b{animation-delay:.55s}
.iring{stroke:rgba(255,255,255,.35);stroke-dasharray:390;stroke-dashoffset:390;animation:i-draw 1s ease .9s forwards}
.ilogo{width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 0 rgba(233,180,92,.55);animation:i-pop .7s cubic-bezier(.2,1.4,.4,1) 1.1s both,i-glow 1.4s ease-out 1.6s both}
.ilogo img{width:84px;height:84px;border-radius:50%}
.iname{margin:8px 0 0;font-size:2.5rem;line-height:1.1;animation:i-rise .8s cubic-bezier(.2,.8,.2,1) 1.5s both,i-out .5s ease 2.55s forwards}
.iname .wm{font-weight:500}.iname .wm span{font-weight:800}
/* The page settles in under the folding stage: the card floats up out of a soft blur, its parts following one by
   one, and the welcome panel's quote and art drift in, so nothing simply appears. */
.cine main>.card,.cine main>.notice,.cine main>.error{animation:i-settle 1.5s cubic-bezier(.16,1,.3,1) 2.7s both}
.cine .card>*{animation:i-rise .9s cubic-bezier(.16,1,.3,1) both}
.cine .card>:nth-child(1){animation-delay:3.05s}.cine .card>:nth-child(2){animation-delay:3.15s}.cine .card>:nth-child(3){animation-delay:3.25s}
.cine .card>:nth-child(4){animation-delay:3.35s}.cine .card>:nth-child(5){animation-delay:3.45s}
.cine .welcome>.wmark{animation:i-rise 1s cubic-bezier(.16,1,.3,1) 3.2s both}
.cine .welcome>.wquote{animation:i-settle 1.2s cubic-bezier(.16,1,.3,1) 3.1s both}
.cine .welcome>.wart{animation:i-rise 1.2s cubic-bezier(.16,1,.3,1) 3.35s both}
.cine .wsky{animation:i-fade-in 1.5s ease 3.4s both}
@keyframes i-settle{from{opacity:0;transform:translateY(28px) scale(.97);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes i-twinkle{0%{opacity:0;transform:scale(.4)}40%{opacity:.9;transform:scale(1)}100%{opacity:.35}}
@keyframes i-draw{to{stroke-dashoffset:0}}
@keyframes i-spin{from{transform:rotate(-60deg) scale(.86)}to{transform:rotate(0) scale(1)}}
@keyframes i-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes i-glow{0%{box-shadow:0 0 0 0 rgba(233,180,92,.55)}100%{box-shadow:0 0 0 38px rgba(233,180,92,0)}}
@keyframes i-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes i-track{from{opacity:0;letter-spacing:.6em}to{opacity:1;letter-spacing:.18em}}
@keyframes i-out{to{opacity:0;transform:scale(.94)}}
@keyframes i-fade{to{opacity:0}}
@keyframes i-fade-in{from{opacity:0}}
@keyframes i-gone{to{visibility:hidden}}
@keyframes i-dissolve{to{opacity:0}}
@media (prefers-reduced-motion:reduce){.intro{display:none}}

/* Idle sky in the welcome panel: now and then a shooting star crosses it, and a few points twinkle. */
.wsky{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.welcome>:not(.wsky){position:relative}
.shoot{position:absolute;top:0;left:0;width:150px;height:2px;border-radius:2px;opacity:0;
 background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95) 85%,#fff);transform-origin:right center;animation:w-shoot 11s linear infinite}
.shoot::after{content:"";position:absolute;right:-2px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(233,180,92,.6)}
.shoot.s1{left:4%;top:6%;animation-delay:4.5s}
.shoot.s2{left:40%;top:2%;animation-delay:8.5s;animation-duration:13s}
.shoot.s3{left:12%;top:34%;animation-delay:12s;animation-duration:17s;width:110px}
@keyframes w-shoot{0%{opacity:0;transform:translate(0,0) rotate(35deg)}
 1%{opacity:1}7%{opacity:1}9%{opacity:0;transform:translate(340px,240px) rotate(35deg)}100%{opacity:0;transform:translate(340px,240px) rotate(35deg)}}
.tw{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;opacity:.2;animation:w-tw 4s ease-in-out infinite}
.tw.t1{left:18%;top:22%}.tw.t2{left:64%;top:16%;animation-delay:1.3s}.tw.t3{left:82%;top:44%;animation-delay:2.1s}
.tw.t4{left:10%;top:58%;animation-delay:.7s;width:2px;height:2px}.tw.t5{left:46%;top:8%;animation-delay:2.8s;width:2px;height:2px}
@keyframes w-tw{0%,100%{opacity:.15;transform:scale(.7)}50%{opacity:.9;transform:scale(1.2)}}
@media (prefers-reduced-motion:reduce){.wsky{display:none}}
/* The sign-in fields wait inside a disabled fieldset until the opening ends (static/intro.js); it adds no box of its own,
   and the fields look ready while they wait. */
fieldset.hold{border:0;margin:0;padding:0;min-width:0}
fieldset.hold:disabled .btn{opacity:1;cursor:default}
fieldset.hold:disabled input{opacity:1;-webkit-text-fill-color:currentColor}