/* Solar System scene. Scoped under .ss; tokens follow ashranhelmi.com / Kociverse (dark, glass frames, Bitcount + Lato).
   Desktop: bodies list docked left, HUD docked right, time bar bottom centre.
   Phone: top bar + drawer for the list, HUD becomes a bottom sheet (subtitles first, tap to expand). */
.ss{
  --background:#05070a; --foreground:#f2f4f7; --muted:#9aa3ad; --accent:#eef1f4;
  --warm:#f3dcc8; --cool:#cfdcea; --sun:#ffcf7a; --line:rgba(255,255,255,.15); --glass:rgba(10,13,18,.62);
  --frame-radius:1.5rem; --frame-shadow:0 20px 80px rgba(0,0,0,.35); --ease-out:cubic-bezier(.16,1,.3,1);
  --gut-l:max(16px,env(safe-area-inset-left,0px)); --gut-r:max(16px,env(safe-area-inset-right,0px));
  --top:calc(env(safe-area-inset-top,0px) + 16px); --bot:calc(env(safe-area-inset-bottom,0px) + 16px);
  color-scheme:dark;
  position:fixed;inset:0;margin:0;background:var(--background);color:var(--foreground);overflow:hidden;font-family:var(--font-body);-webkit-tap-highlight-color:transparent
}
.ss,.ss *,.ss *::before,.ss *::after{box-sizing:border-box}
.ss #gl{position:fixed;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.ss #gl:active{cursor:grabbing}
.ss button{font:inherit;color:inherit}
.ss button:focus-visible,.ss a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss a{color:inherit}
.ss .frame{border-radius:var(--frame-radius);border:1px solid var(--line);box-shadow:var(--frame-shadow);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ss .cap{font:400 10px var(--font-heading);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* labels over the 3D scene */
.ss .labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.ss .lbl{position:absolute;left:0;top:0;font:400 11px var(--font-heading);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;padding:4px 9px;border-radius:999px;background:rgba(5,7,10,.45);border:1px solid var(--line);pointer-events:auto;cursor:pointer;transition:opacity .35s var(--ease-out),border-color .3s,background .3s;color:var(--cool)}
.ss .lbl.sun{color:var(--sun)}
.ss .lbl.small{font-size:9px;padding:3px 7px;color:var(--muted)}
.ss .lbl.craft{color:var(--warm);font-size:9px}
.ss .lbl.on{border-color:currentColor;background:rgba(5,7,10,.85)}
.ss .lbl.off{opacity:0;pointer-events:none}

/* target lock: corner brackets + centre ticks round the chosen world; a thinner, dimmer frame on hover */
.ss .lock{position:absolute;left:0;top:0;pointer-events:none;transition:opacity .25s var(--ease-out);color:var(--accent)}
.ss .lock>div{position:absolute;inset:0}
.ss .lock i{position:absolute;width:18%;height:18%;max-width:18px;max-height:18px;min-width:7px;min-height:7px;border:0 solid currentColor}
.ss .lock .tl{left:0;top:0;border-width:2px 0 0 2px}.ss .lock .tr{right:0;top:0;border-width:2px 2px 0 0}
.ss .lock .bl{left:0;bottom:0;border-width:0 0 2px 2px}.ss .lock .br{right:0;bottom:0;border-width:0 2px 2px 0}
.ss .lock .tt,.ss .lock .tb{left:50%;width:1.5px;height:7px;min-height:0;min-width:0;background:currentColor;transform:translateX(-50%)}
.ss .lock .tt{top:-10px}.ss .lock .tb{bottom:-10px}
.ss .lock .tlf,.ss .lock .trt{top:50%;height:1.5px;width:7px;min-height:0;min-width:0;background:currentColor;transform:translateY(-50%)}
.ss .lock .tlf{left:-10px}.ss .lock .trt{right:-10px}
.ss .lock.sel{filter:drop-shadow(0 0 4px rgba(238,241,244,.55))}
.ss .lock.sel.in>div{animation:ss-lockin .55s var(--ease-out),ss-breathe 2.6s .55s ease-in-out infinite}
.ss .lock.hov{color:rgba(238,241,244,.75);filter:drop-shadow(0 0 3px rgba(0,0,0,.8))}
.ss .lock.hov .tl{border-width:1.5px 0 0 1.5px}.ss .lock.hov .tr{border-width:1.5px 1.5px 0 0}.ss .lock.hov .bl{border-width:0 0 1.5px 1.5px}.ss .lock.hov .br{border-width:0 1.5px 1.5px 0}
.ss .lock.hov .tt,.ss .lock.hov .tb,.ss .lock.hov .tlf,.ss .lock.hov .trt{display:none}
@keyframes ss-lockin{from{transform:scale(1.7) rotate(12deg);opacity:0}60%{opacity:1}to{transform:none}}
@keyframes ss-breathe{50%{transform:scale(1.05)}}

/* left column */
.ss .left{position:fixed;top:var(--top);left:var(--gut-l);bottom:var(--bot);width:280px;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.ss .left>*{pointer-events:auto}
.ss .brand{padding:16px 18px;display:grid;gap:8px}
.ss .brand h1{margin:0;font:400 24px/1.05 var(--font-heading);letter-spacing:.02em}
.ss .brand p{margin:0;font:300 13px/1.5 var(--font-body);color:var(--muted)}
.ss .layers{display:grid;gap:4px;margin-top:2px}
.ss .lbtn{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;width:100%;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.04);color:var(--foreground);cursor:pointer;text-align:left;transition:background .2s,border-color .2s}
.ss .lbtn:hover{background:rgba(255,255,255,.08)}
/* icon, count and chevron sit on one centre line */
.ss .lbtn .cnt{font:400 10px/1 var(--font-heading);letter-spacing:.12em;text-transform:uppercase}
.ss .lbtn .ico svg{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.ss .lbtn .cnt{color:var(--muted)}
.ss .lbtn .chev svg{display:block;width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transform:rotate(180deg);transition:transform .3s var(--ease-out)}
.ss .lbtn[aria-expanded="true"] .chev svg{transform:none}
.ss .lrowbar{display:flex;gap:6px}
.ss .lrowbar .lbtn:first-child{flex:1;min-width:0}
.ss .gbtn{display:grid;grid-template-columns:1fr;place-items:center;width:40px;flex:none;padding:0}
.ss .gbtn[aria-expanded="true"]{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}
.ss .srow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;color:var(--foreground);font:400 11px var(--font-heading);letter-spacing:.08em;text-transform:uppercase}
.ss .llist{display:grid;gap:0;padding:4px 0;border:1px solid var(--line);border-radius:12px;background:rgba(5,7,10,.4)}
.ss .llist[hidden]{display:none}
.ss .lrow{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:8px 12px;border:0;background:none;color:var(--muted);cursor:pointer;font:400 11px var(--font-heading);letter-spacing:.08em;text-transform:uppercase;text-align:left}
.ss .lrow:hover{background:rgba(255,255,255,.04)}
.ss .lrow[aria-checked="true"]{color:var(--foreground)}
.ss .lrow .sw{position:relative;flex:none;width:30px;height:17px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid var(--line);transition:background .25s,border-color .25s}
.ss .lrow .sw i{position:absolute;top:2px;left:2px;width:11px;height:11px;border-radius:50%;background:var(--muted);transition:transform .25s var(--ease-out),background .25s}
.ss .lrow[aria-checked="true"] .sw{background:rgba(47,191,113,.35);border-color:rgba(47,191,113,.7)}
.ss .lrow[aria-checked="true"] .sw i{transform:translateX(13px);background:#eafff3}
.ss .chip{border:1px solid var(--line);background:rgba(255,255,255,.04);border-radius:999px;padding:6px 11px;font:400 10px var(--font-heading);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;color:var(--muted);transition:background .25s,color .25s,border-color .25s}
.ss .chip[aria-pressed="true"]{color:var(--foreground);border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.1)}
.ss .list{padding:8px;overflow:auto;min-height:0;flex:0 1 auto;scrollbar-width:thin}
.ss .grp{padding:10px 10px 4px}
.ss .row{display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:10px;align-items:center;width:100%;text-align:left;background:none;border:1px solid transparent;border-radius:12px;padding:6px 10px;cursor:pointer;transition:background .25s,border-color .25s}
.ss .row:hover{background:rgba(255,255,255,.06)}
.ss .row[aria-current="true"]{background:rgba(255,255,255,.08);border-color:var(--line)}
.ss .row .dot{width:10px;height:10px;border-radius:50%}
.ss .row .nm{font:400 13px var(--font-heading);letter-spacing:.04em}
.ss .row .ds{font:300 11px var(--font-body);color:var(--muted);font-variant-numeric:tabular-nums}

/* time bar */
.ss .time{position:fixed;left:50%;bottom:var(--bot);transform:translateX(-50%);display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px}
.ss .time .date{font:400 13px var(--font-heading);letter-spacing:.06em;min-width:148px;text-align:center;font-variant-numeric:tabular-nums}
.ss .time .spd{font:300 11px var(--font-body);color:var(--muted);min-width:76px;text-align:center}
.ss .ib{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.04);cursor:pointer;transition:background .25s}
.ss .ib:hover{background:rgba(255,255,255,.12)}
.ss .ib svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ss .ib.txt{width:auto;padding:0 12px;font:400 10px var(--font-heading);letter-spacing:.12em;text-transform:uppercase}

/* story tour bar: above the time bar (desktop); a compact copy lives in the phone bar */
.ss .story{display:flex;align-items:center;gap:6px}
.ss .story.frame{position:fixed;left:50%;bottom:calc(var(--bot) + 64px);transform:translateX(-50%);padding:6px 8px 6px 16px;border-radius:999px}
.ss .story .cap{margin-right:4px}
.ss .story .st{font:300 12px var(--font-body);color:var(--muted);min-width:150px;padding:0 6px;white-space:nowrap;font-variant-numeric:tabular-nums}
.ss .story.mini{flex:1;justify-content:flex-end;gap:4px}
.ss .story.mini .st{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;font-size:11px;padding:0 4px}

/* full screen: only the scene, subtitles and the story bar */
.ss.immersive .left,.ss.immersive .hud,.ss.immersive .note,.ss.immersive .foot,.ss.immersive .time,.ss.immersive .pbar,.ss.immersive .scrim{display:none!important}
.ss.immersive .story.frame{display:flex;bottom:var(--bot)}
.ss.immersive .captions{width:min(900px,calc(100vw - 32px));top:var(--top);bottom:auto}

/* scale note */
.ss .note{margin:0;padding:0 4px;flex:none;font:300 11px/1.45 var(--font-body);color:var(--muted)}
.ss .note b{font-weight:700;color:var(--foreground)}
.ss .foot{margin:0;padding:0 4px;flex:none;font:400 10px var(--font-heading);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ss .foot a{color:var(--foreground);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px}
.ss .foot a:hover{border-color:var(--sun);color:var(--sun)}

/* HUD */
.ss .hud{position:fixed;right:var(--gut-r);top:var(--top);bottom:var(--bot);width:340px;display:flex;flex-direction:column;overflow:hidden;transition:transform .7s var(--ease-out),opacity .7s var(--ease-out)}
.ss .hud.hide{transform:translateX(24px);opacity:0;pointer-events:none}
.ss .hud .head{padding:14px 16px 10px;border-bottom:1px solid var(--line);display:grid;gap:6px}
.ss .hud .bar{display:flex;justify-content:space-between;align-items:center;gap:8px}
.ss .hud .bar i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:7px;box-shadow:0 0 8px var(--accent);animation:ss-blink 1.6s step-end infinite}
.ss .hud h2{margin:0;font:400 26px/1.05 var(--font-heading);letter-spacing:.02em}
.ss .hud .tag{font:300 12px var(--font-body);color:var(--muted)}
.ss .hud .x{width:32px;height:32px}
.ss .hud .body{overflow:auto;overflow-x:hidden;padding:12px 16px 16px;display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-content:start;scrollbar-width:thin}
/* everything in a card fits the card's width: no item may widen the column, long words and links wrap (DHelm 20 Oct) */
.ss .hud .body>*,.ss .hud .body *{min-width:0}
.ss .hud .body p,.ss .hud .body a,.ss .hud .body span{overflow-wrap:anywhere}
.ss .hud .body [lang=ar]{overflow-wrap:normal;word-break:normal}   /* Arabic wraps between words only: a broken word loses its joined letters */
.ss .narr{display:grid;gap:8px}
.ss .narr .ctl{display:flex;align-items:center;gap:8px}
.ss .wave{display:flex;gap:3px;align-items:center;height:16px;flex:1}
.ss .wave span{flex:1;background:var(--accent);opacity:.7;border-radius:2px;height:2px;transition:height .08s linear}
.ss .seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.ss .seg button{background:none;border:0;padding:5px 9px;font:400 10px var(--font-heading);letter-spacing:.1em;cursor:pointer;color:var(--muted)}
.ss .seg button[aria-pressed="true"]{background:var(--accent);color:#05070a}
.ss .seg button:disabled{opacity:.35;cursor:default}
.ss .subt{min-height:2.8em;font:700 15px/1.4 var(--font-body);text-align:center;text-wrap:balance;padding:4px 2px}
.ss .subt:empty::before{content:"";}
.ss .facts{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ss .facts div{background:rgba(5,7,10,.7);padding:8px 10px;display:grid;gap:2px}
.ss .facts b{font:400 15px var(--font-heading);font-variant-numeric:tabular-nums}
.ss .facts span{font:300 11px var(--font-body);color:var(--muted)}
.ss .src{font:300 11px/1.4 var(--font-body);color:var(--muted)}
.ss .src a{text-decoration:underline;text-underline-offset:2px}
.ss .shots{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.ss .shots.one{grid-template-columns:1fr}
.ss .shot{position:relative;display:block;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:#000;aspect-ratio:1;text-decoration:none}
.ss .shot img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.ss .shot:hover img{transform:scale(1.04)}
.ss .shot em{position:absolute;left:0;right:0;bottom:0;padding:16px 7px 6px;font:400 11px/1.3 var(--font-body);font-style:normal;background:linear-gradient(transparent,rgba(0,0,0,.85));color:#fff}
.ss .shot .il{position:absolute;top:6px;left:6px;font:400 9px var(--font-heading);letter-spacing:.08em;text-transform:uppercase;background:rgba(243,220,200,.92);color:#05070a;border-radius:4px;padding:2px 5px}
.ss .shot .vid{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.6);display:grid;place-items:center}
.ss .shot .vid svg{width:10px;height:10px;fill:#fff}
.ss .moons{display:grid;gap:4px}
.ss .moons div{display:flex;justify-content:space-between;gap:8px;font:300 12px var(--font-body);border-bottom:1px solid var(--line);padding:5px 0}
.ss .moons div b{font:400 12px var(--font-heading);letter-spacing:.04em}
.ss .moons div span{color:var(--muted);text-align:right}
.ss .sec{display:grid;gap:8px}

/* subtitles: top centre, between the side panels, film-style */
.ss .captions{position:fixed;top:calc(var(--top) + 8px);left:50%;transform:translateX(-50%);width:min(720px,calc(100vw - 296px - 356px - 48px));text-align:center;pointer-events:none;z-index:6;opacity:0;transition:opacity .25s var(--ease-out)}
.ss .captions.on{opacity:1}
.ss .captions span{display:inline;font:700 22px/1.55 var(--font-body);color:#fff;background:rgba(5,7,10,.72);padding:4px 12px;border-radius:6px;box-decoration-break:clone;-webkit-box-decoration-break:clone;text-wrap:balance}
.ss .quote{margin:0;font:400 14px/1.5 var(--font-body);color:var(--foreground);border-left:2px solid var(--line);padding-left:10px}
.ss .chart svg{width:100%;height:auto;display:block}
.ss .chart .bars rect{fill:#b9a58c}
.ss .chart .res line{stroke:#ffcf7a;stroke-width:.8;stroke-dasharray:2 2}
.ss .chart .res text{fill:#ffcf7a;font:400 8px var(--font-heading)}
.ss .chart text.t{fill:#9aa3ad;font:400 8px var(--font-body)}

/* the Quran and the Solar System */
.ss .ayah{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02);transition:border-color .3s,background .3s}
.ss .ayah.on{border-color:rgba(207,227,200,.55);background:rgba(207,227,200,.06)}
.ss .ayah .ahead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ss .ayah .ahead a.cap{color:var(--foreground);text-decoration:none}
.ss .ayah .ar{margin:0;font:400 22px/2.1 "Amiri Quran","Amiri",serif;text-align:right;color:var(--foreground)}
.ss .ayah .tr{margin:0;font:300 13px/1.5 var(--font-body);color:var(--foreground)}
.ss .ayah .tr b{font:400 9px var(--font-heading);letter-spacing:.1em;color:var(--muted);margin-right:4px}
.ss .ayah .obs{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.ss .ayah .obs .quote{font-size:13px}

/* rows pull out by their own padding, so their text and the group labels line up with the rest of the card */
.ss .qindex{display:grid;gap:2px;margin:2px -11px 4px}
.ss .qplay .ctl{flex-wrap:wrap}
.ss .qplay .qlbl{font:400 11px var(--font-heading);letter-spacing:.12em;text-transform:uppercase;color:var(--foreground)}
.ss .qplay .qopts{display:flex;gap:6px;flex-basis:100%;margin-left:-8px}
.ss .qplay .qsw{width:auto;padding:6px 8px;gap:8px;border-radius:10px;font-size:10px}
.ss .qplay>.src{margin:0}
/* surah player: dropdowns in the Layers-button look, chevron inset from the right (dropdown standard) */
.ss .splay{display:grid;gap:10px}
.ss .splay .sels{display:grid;gap:6px}
.ss .sel{appearance:none;-webkit-appearance:none;width:100%;min-width:0;padding:9px 36px 9px 12px;border:1px solid var(--line);border-radius:12px;color:var(--foreground);font:400 13px var(--font-body);cursor:pointer;
  background:rgba(255,255,255,.04) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9d1d9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center/14px}
.ss .sel:hover{background-color:rgba(255,255,255,.08)}
.ss .sel option{background:#0d1117;color:#e6edf3}
.ss .splay .ctl{display:flex;align-items:center;gap:10px}
.ss .seek{flex:1;min-width:0;accent-color:var(--accent);cursor:pointer}
.ss .splay .tm{font:400 11px var(--font-heading);letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.ss .splay>.src{margin:0}
.ss .qindex .grp{margin:0 11px;padding:14px 0 4px;color:var(--muted)}
/* verse + surah on one line, the heading below in full (DHelm 20 Oct: like the phone layout, no truncation) */
.ss .qrow{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:4px 10px;width:100%;padding:8px 10px;border:1px solid transparent;border-radius:10px;background:none;color:var(--foreground);text-align:left;cursor:pointer;transition:background .2s,border-color .2s}
.ss .qrow:hover{background:rgba(255,255,255,.04)}
.ss .qrow.on{border-color:rgba(207,227,200,.45);background:rgba(207,227,200,.06)}
.ss .qrow .k{font:400 11px var(--font-heading);letter-spacing:.06em;color:#cfe3c8;font-variant-numeric:tabular-nums}
.ss .qrow .nm{font:400 12px var(--font-heading);letter-spacing:.04em}
.ss .qrow .ds{grid-column:1/-1;font:300 12px/1.4 var(--font-body);color:var(--muted);text-align:left}
.ss .captions span.ar{font:400 24px/1.9 "Amiri Quran","Amiri",serif}
.ss .captions span.qtr{display:inline-block;margin-top:6px;font:400 17px/1.5 var(--font-body);color:#e9edf1}

/* gate */
.ss .gate{position:fixed;inset:0;display:grid;place-items:start center;overflow:auto;background:radial-gradient(ellipse at center,rgba(5,7,10,.72),rgba(5,7,10,.92));z-index:30;transition:opacity 1s var(--ease-out);padding:max(24px,calc(50vh - 190px)) 24px 24px}
.ss .gate.go{opacity:0;pointer-events:none}
.ss .gate>div{display:grid;gap:16px;justify-items:center;text-align:center;max-width:640px}
.ss .gate h1{margin:0;font:400 clamp(30px,6vw,52px)/1 var(--font-heading);letter-spacing:.04em}
.ss .gate p{margin:0;font:300 15px/1.55 var(--font-body);color:var(--muted)}
.ss .gate button{font:400 12px var(--font-heading);letter-spacing:.16em;text-transform:uppercase;border:1px solid rgba(255,255,255,.4);border-radius:999px;padding:12px 22px;background:rgba(255,255,255,.06);cursor:pointer}
.ss .gate button:hover{background:rgba(255,255,255,.14)}
.ss .gate .load{font:300 12px var(--font-body);color:var(--muted)}
.ss .gate .hint{font-size:13px}
.ss .gate .go{display:grid;gap:8px;justify-items:center}
.ss .gate .seg.pick{margin-bottom:6px}
.ss .gate .seg.pick button{border:0;border-radius:0;padding:7px 14px;font-size:11px;letter-spacing:.14em;background:none;color:var(--muted)}
.ss .gate .seg.pick button[aria-pressed="true"]{background:var(--accent);color:#05070a}
.ss .gate button.quiet{border:0;background:none;padding:4px;font-size:10px;color:var(--muted)}
/* boot log: left-aligned like a terminal, the Kociverse way */
/* boot log: a terminal readout. Each line: text, dotted leader, status badge; the detail sits underneath, small and grey */
.ss .gate .boot{display:grid;gap:2px;width:min(460px,88vw);text-align:left;font:400 12px/1.5 var(--font-heading);letter-spacing:.03em;color:var(--muted);padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:rgba(5,7,10,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.ss .gate .boot:empty{display:none}
.ss .gate .boot p{margin:0;display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;gap:8px;font:inherit;color:var(--foreground);animation:ss-line .35s var(--ease-out)}
.ss .gate .boot u{border-bottom:1px dotted rgba(255,255,255,.22);transform:translateY(-3px);text-decoration:none}
.ss .gate .boot b{font:400 10px/1 var(--font-heading);letter-spacing:.1em;padding:3px 6px 2px;border-radius:4px;color:var(--muted);border:1px solid var(--line);min-width:34px;text-align:center}
.ss .gate .boot .ok b{background:#2fbf71;border-color:#2fbf71;color:#04150b;box-shadow:0 0 12px rgba(47,191,113,.35)}
.ss .gate .boot .skip b{background:#e0a33a;border-color:#e0a33a;color:#1a1003}
.ss .gate .boot em{grid-column:1/-1;font:300 11px/1.4 var(--font-body);font-style:normal;color:var(--muted);opacity:.65;margin:0 0 5px}
.ss .gate .boot .live{grid-template-columns:auto;color:#2fbf71;margin-top:4px}
.ss .gate .boot .live span::after{content:'_';margin-left:2px;animation:ss-blink 1s steps(2) infinite}
@keyframes ss-line{from{opacity:0;transform:translateY(4px)}}
/* logo: the Sun pulsing, a small world going round it */
.ss .gate .logo{position:relative;width:76px;height:76px;margin-bottom:2px}
.ss .gate .logo .sun{position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px;border-radius:50%;background:radial-gradient(circle at 40% 38%,#fff6d8,#ffcf7a 45%,#f39a2b);box-shadow:0 0 14px 4px rgba(255,190,90,.55),0 0 40px 10px rgba(255,160,60,.25);animation:ss-pulse 2.4s ease-in-out infinite}
.ss .gate .logo .orb{position:absolute;inset:6px;border-radius:50%;border:1px solid rgba(255,255,255,.12);animation:ss-orbit 6s linear infinite}
.ss .gate .logo .orb i{position:absolute;left:50%;top:-3px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#9fd0ff;box-shadow:0 0 8px rgba(159,208,255,.8)}
@keyframes ss-pulse{50%{transform:scale(1.12);box-shadow:0 0 20px 6px rgba(255,190,90,.7),0 0 60px 16px rgba(255,160,60,.3)}}
@keyframes ss-orbit{to{transform:rotate(360deg)}}
@media (max-width:820px){
  .ss .gate{padding-top:max(20px,8vh)}
  .ss .gate>div{gap:12px}
  .ss .gate .logo{width:60px;height:60px}
  .ss .gate p{font-size:14px}
  .ss .gate .boot{font-size:11px;padding:10px 12px}
  .ss .gate .boot em{font-size:10.5px;margin-bottom:3px}
}
.ss .gate.booting .hint,.ss .gate.booting>div>p:not(.hint){opacity:.6}
/* cinematic: a soft vignette over the scene (under the panels) */
.ss::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55));z-index:1}
.ss .labels.nolbl .lbl{display:none}
.ss .labels{z-index:2}.ss .left,.ss .hud,.ss .time,.ss .note,.ss .pbar,.ss .story{z-index:5}
/* phone: this must come after the line above, or the drawer's backdrop covers the menu button (it did, 19 Oct) */
@media (max-width:820px){.ss .left{z-index:22}.ss .pbar{z-index:23}}
.ss .pbar,.ss .scrim{display:none}
@keyframes ss-blink{50%{opacity:.2}}

/* ---- phone ---- */
@media (max-width:820px){
  .ss .left{top:0;left:0;bottom:0;width:min(300px,86vw);padding:calc(var(--top) + 52px) 12px 12px;transform:translateX(-105%);transition:transform .5s var(--ease-out);z-index:22;background:rgba(5,7,10,.94)}
  .ss .left .brand{padding:0;border:0;background:none;box-shadow:none}
  .ss .left .brand h1,.ss .left .brand>p{display:none}
  .ss.drawer .left{transform:none}
  .ss .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:21;opacity:0;pointer-events:none;transition:opacity .4s}
  .ss.drawer .scrim{opacity:1;pointer-events:auto}
  .ss .pbar{display:flex;position:fixed;top:var(--top);left:var(--gut-l);right:var(--gut-r);z-index:23;align-items:center;justify-content:space-between;gap:8px;padding:6px;border-radius:999px}
  .ss .story.frame{display:none}
  .ss.immersive .story.frame{left:var(--gut-l);right:var(--gut-r);transform:none;padding-left:8px}
  .ss.immersive .story .cap{display:none}
  .ss.immersive .story .st{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis}
  /* phone (DHelm 19 Oct): story bar on top with buttons only, its title just under it outside the bar; time bar at the bottom */
  .ss .story.mini .st{position:absolute;top:calc(100% + 6px);left:0;right:0;text-align:center;font-size:12px;color:var(--foreground);text-shadow:0 1px 6px #000,0 0 2px #000;pointer-events:none}
  .ss.drawer .story.mini .st{opacity:0}
  /* Reflection list: verse and surah on one line, the heading underneath in full */
  .ss .qrow .ds{font-size:13px}
  .ss .time{padding:4px 6px}
  .ss .time .date{min-width:112px;font-size:12px}
  .ss .time .spd{display:none}
  .ss .hud{left:var(--gut-l);right:var(--gut-r);top:auto;bottom:calc(var(--bot) + 60px);width:auto;max-height:46vh;border-radius:1.25rem}
  .ss .hud.min{max-height:none}
  .ss .hud.min .body{display:none}
  /* collapsed: one slim row only (toggle, title, close); the chevron turns: down = collapse, up = expand */
  .ss .hud .mn svg{transition:transform .3s var(--ease-out);transform:rotate(180deg)}
  .ss .hud.min .mn svg{transform:none}
  .ss .hud.min .head{grid-template-columns:1fr;padding:6px 10px;border-bottom:0}
  .ss .hud.min .head .tag,.ss .hud.min .head .bar>span{display:none}
  .ss .hud.min .head h2{position:absolute;left:58px;right:58px;top:50%;transform:translateY(-50%);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none}
  /* an open, expanded card takes the bottom: the time bar tucks away and comes back when the card is collapsed or closed */
  .ss .time{transition:transform .45s var(--ease-out),opacity .3s}
  .ss:has(.hud:not(.hide):not(.min)) .time{transform:translate(-50%,calc(100% + var(--bot) + 8px));opacity:0;pointer-events:none}
  .ss:has(.hud:not(.hide):not(.min)) .hud{bottom:var(--bot);max-height:58vh}
  .ss .hud .head{padding:10px 14px 8px}
  .ss .hud h2{font-size:20px}
  .ss .lbl{font-size:10px}
  .ss .captions{top:calc(var(--top) + 92px);width:calc(100vw - 32px)}
  .ss .captions span{font-size:16px}
  .ss .captions span.qtr{font-size:14px}
}
@media (min-width:821px) and (max-width:1180px){.ss .captions{width:calc(100vw - 32px);top:auto;bottom:calc(var(--bot) + 124px)}.ss .hud{bottom:calc(var(--bot) + 116px)}.ss .story .cap{display:none}.ss .story .st{min-width:0}}
@media (prefers-reduced-motion:reduce){.ss *{transition:none!important;animation:none!important}}