/* Natati Li phone layout: the single-column page wearing the same theme, fonts and parts as the wide-screen version. Scoped to body:not(.desk). */
body:not(.desk){--dkp:var(--R);--dkg:#e8c872;--dkt:#8fd6cf;--sh2:0 1px 2px color-mix(in srgb,var(--tx) 6%,transparent),0 12px 28px -18px color-mix(in srgb,var(--tx) 38%,transparent);
 --ui:'NatInter',Inter,-apple-system,"Segoe UI",system-ui,sans-serif;--he:'NatNSH','Noto Serif Hebrew','Frank Ruhl Libre','SBL Hebrew',serif;--disp:'NatFRL','Frank Ruhl Libre',Georgia,serif;
 font-family:var(--ui);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
:root[data-theme="natati"] body:not(.desk){--dkp:#0f3b73}
body:not(.desk)::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;background:radial-gradient(520px 360px at 95% -4%,color-mix(in srgb,var(--R) 12%,transparent),transparent 70%),radial-gradient(460px 420px at -10% 52%,color-mix(in srgb,var(--V) 8%,transparent),transparent 70%)}
body:not(.desk) h1,body:not(.desk) h2,body:not(.desk) h3{font-family:var(--disp)}
body:not(.desk) .he,body:not(.desk) [lang="he"],body:not(.desk) #rd,body:not(.desk) #rd .w,body:not(.desk) .rf,body:not(.desk) .pat,body:not(.desk) input[dir="rtl"]{font-family:var(--he)}
body:not(.desk) .he{line-height:1.7}
body:not(.desk) #rd{line-height:2.1}
body:not(.desk) button,body:not(.desk) select,body:not(.desk) input{font-family:var(--ui)}
body:not(.desk) .card{border-radius:18px;box-shadow:var(--sh2)}
body:not(.desk) main{padding-top:6px}
/* old title block is replaced by the bar */
body:not(.desk) header.hero>h1,body:not(.desk) header.hero>.hnm,body:not(.desk) .hero-art{display:none}
body:not(.desk) header.hero{padding:0}
/* top bar */
body:not(.desk) #mbar{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--sf) 88%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-bottom:1px solid var(--bd)}
body:not(.desk) .mb-in{display:flex;align-items:center;gap:10px;padding:8px 14px;min-height:56px}
body:not(.desk) .dk-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--tx);min-width:0;flex:1}
body:not(.desk) .dk-brand svg{width:36px;height:36px;flex:none}
body:not(.desk) .dk-bn{display:flex;flex-direction:column;line-height:1.1;min-width:0}
body:not(.desk) .dk-bn b{font:700 21px/1.1 var(--disp);letter-spacing:-.01em}
body:not(.desk) .dk-bn .he{font-size:12.5px;line-height:1.3;color:var(--mu)}
body:not(.desk) .mb-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--bd);background:var(--sf);color:var(--tx);border-radius:999px;padding:7px 12px;font-size:13.5px;font-weight:600;box-shadow:none;white-space:nowrap}
body:not(.desk) .mb-btn[aria-expanded="true"]{border-color:var(--dkp);color:var(--dkp)}
body:not(.desk) #mctl{display:none;padding:4px 14px 14px;border-top:1px solid var(--bd)}
body:not(.desk) #mctl.on{display:block;max-height:calc(100vh - 64px);overflow:auto}
body:not(.desk) #mctl .themes{margin:10px 0;width:fit-content;max-width:100%}
body:not(.desk) #mctl .custrow{margin:0}
/* mission */
body:not(.desk) #dkmis{position:relative;overflow:hidden;margin:14px 14px 4px;border-radius:22px;padding:22px 18px 20px;color:#f3f7fd;text-align:center;isolation:isolate;
 background:radial-gradient(360px 240px at 96% 0%,rgba(232,200,114,.2),transparent 70%),linear-gradient(130deg,color-mix(in srgb,var(--R) 38%,#06142b),color-mix(in srgb,var(--R) 20%,#050f22));box-shadow:0 22px 50px -28px rgba(4,14,34,.75)}
body:not(.desk) .dk-ghost{position:absolute;left:-8px;bottom:-60px;font-size:150px;line-height:1;color:#fff;opacity:.05;pointer-events:none;z-index:-1;white-space:nowrap}
body:not(.desk) .dk-eyebrow{margin:0 0 10px;font:600 11px/1.5 var(--ui);letter-spacing:.12em;text-transform:uppercase;color:var(--dkg)}
body:not(.desk) .dk-eyebrow .he{letter-spacing:0;text-transform:none;font-size:13.5px}
body:not(.desk) .dk-verse{margin:0 auto;padding:0;border:0;text-align:center;font-size:25px;line-height:1.75;font-weight:500;color:#fff;text-wrap:balance}
body:not(.desk) .dk-eng{margin:12px auto 2px;font:400 15px/1.6 var(--disp);color:#dbe6f6}
body:not(.desk) .dk-src{margin:0 0 12px;font-size:11.5px;color:#a9bcd8}
body:not(.desk) .dk-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0;padding:0;list-style:none}
body:not(.desk) .dk-pills li{padding:4px 11px;border-radius:999px;font-size:12px;font-weight:600;color:#eaf1fb;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.07)}
body:not(.desk) .dk-mis-side{margin-top:16px;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);display:flex;gap:10px;align-items:baseline;justify-content:center;flex-wrap:wrap;text-align:center}
body:not(.desk) .dk-name{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;justify-content:center}
body:not(.desk) .dk-name .he{font-size:24px;line-height:1.4;color:#fff}
body:not(.desk) .dk-name b{font:600 11px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--dkg)}
body:not(.desk) .dk-mis-side p,body:not(.desk) .dk-seed{display:none}
/* launcher: Starting Guide, then Literacy and Binyanim side by side, TaNaKh Road below with Progress under it */
body:not(.desk) .rdbtn-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch;margin:12px 0 10px;text-align:left}
body:not(.desk) .rdbtn-wrap .gdslot{grid-column:1/-1;order:-1;display:flex;justify-content:center;margin:0}
body:not(.desk) .rdbtn-wrap .rdrow{display:contents}
body:not(.desk) .rdbtn-wrap .bsb.lit{order:1}body:not(.desk) .rdbtn-wrap .bsb.bin{order:2}
body:not(.desk) .rdbtn-wrap .rdbtn{order:3;grid-column:1/-1}
body:not(.desk) .rdbtn-wrap .rdprog{order:4;grid-column:1/-1;justify-self:end;box-shadow:none;margin:0}
body:not(.desk) .rdbtn-wrap .rdcap{order:5;grid-column:1/-1;max-width:none;text-align:left;margin:0 2px;color:var(--mu);font-size:13.5px}
body:not(.desk) .bsb,body:not(.desk) .rdbtn{width:auto;border-radius:20px;box-shadow:var(--sh2)}
body:not(.desk) .bsb{min-height:128px;padding:16px 16px;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:6px;text-align:left;font:700 17px/1.2 var(--disp);color:var(--tx);background:var(--sf);position:relative}
body:not(.desk) .bsb svg{width:40px;height:40px;margin-bottom:auto;flex:none}
body:not(.desk) .bsb small{display:block;font:500 12.5px/1.4 var(--ui);color:var(--mu)}
body:not(.desk) .rdbtn{min-height:112px;padding:16px 18px;flex-direction:row;align-items:center;justify-content:flex-start;gap:14px;color:#fff;border:0;position:relative;overflow:hidden;
 background:radial-gradient(240px 160px at 92% 0%,rgba(232,200,114,.28),transparent 70%),linear-gradient(135deg,color-mix(in srgb,var(--R) 40%,#06142b),color-mix(in srgb,var(--R) 24%,#050f22))}
body:not(.desk) .rdbtn svg{width:76px;height:52px;color:#fff;flex:none}
body:not(.desk) .rdbtn .rdt{align-items:flex-start;text-align:left}
body:not(.desk) .rdbtn .rdt b{font:700 21px/1.15 var(--disp);color:#fff}
body:not(.desk) .rdbtn .rdt small{color:#c9d8ee;font-size:12.5px;text-align:left}
body:not(.desk) .gdslot #gdbtn{display:inline-flex!important;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 22px;font-weight:700;font-size:14.5px;background:var(--dkp);color:var(--onac);box-shadow:0 8px 20px -10px color-mix(in srgb,var(--dkp) 80%,#000)}
/* tab menu */
body:not(.desk) #tabs{background:color-mix(in srgb,var(--tx) 5%,var(--sf));border:1px solid var(--bd);border-radius:16px;padding:4px;margin:14px 0 6px}
body:not(.desk) #tabs .trow button{border-radius:10px;border:0;background:transparent;box-shadow:none;color:var(--mu);font-weight:500}
body:not(.desk) #tabs .trow button.on{background:var(--dkp);color:var(--onac);box-shadow:0 4px 12px -6px color-mix(in srgb,var(--dkp) 90%,#000)}
body:not(.desk) .legend{margin:8px 0}
/* grammar reference as menus */
body:not(.desk) #ref .card.ref{padding:16px}
body:not(.desk) #ref .card.ref>h2{font-size:21px;margin:0 0 4px}
body:not(.desk) .dk-acc{border:1px solid var(--bd);border-radius:14px;margin:10px 0;background:var(--sf);overflow:hidden}
body:not(.desk) .dk-acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px}
body:not(.desk) .dk-acc>summary::-webkit-details-marker{display:none}
body:not(.desk) .dk-acc>summary::after{content:"";width:9px;height:9px;border-right:2px solid var(--mu);border-bottom:2px solid var(--mu);transform:rotate(45deg);margin:-4px 4px 0 0;transition:transform .2s;flex:none}
body:not(.desk) .dk-acc[open]>summary::after{transform:rotate(-135deg);margin-top:4px}
body:not(.desk) .dk-acc>summary h3{text-transform:none;letter-spacing:0;font:600 16px/1.3 var(--disp);margin:0;padding:0;color:var(--tx)}
body:not(.desk) .dk-acc[open]>summary{border-bottom:1px solid var(--bd)}
body:not(.desk) .dk-acc>:not(summary){margin-left:14px;margin-right:14px}
body:not(.desk) .dk-acc>:last-child{margin-bottom:14px}
body:not(.desk) .dk-acc>summary+*{margin-top:12px}
body:not(.desk) footer.copy{margin-top:40px;padding-top:22px;border-top:1px solid var(--bd)}
body:not(.desk) .dk-lnk{border:0;background:none;padding:0;color:var(--R);text-decoration:underline;cursor:pointer;font:inherit}
body:not(.desk) #tip,body:not(.desk) #auMenu{z-index:90}

/* Roots / Search stacked above Binyanim Basics (right edge), Flashcards under TaNaKh Road (left edge); these three tabs live here instead of in the tab strip */
body:not(.desk) .rdbtn-wrap .mq-stack{order:0;grid-column:2;justify-self:end;display:flex;flex-direction:column;gap:8px;align-items:stretch}
body:not(.desk) .mq-stack button{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--bd);background:var(--sf);color:var(--tx);border-radius:999px;padding:8px 18px;font-size:14px;font-weight:600;box-shadow:none;white-space:nowrap}
body:not(.desk) .rdbtn-wrap .mq-fc{order:4;grid-column:1;justify-self:start;margin:0}
body:not(.desk) .rdbtn-wrap .rdprog{grid-column:2;justify-self:end}
body:not(.desk) #tabs [data-t="flash"],body:not(.desk) #tabs [data-t="conc"],body:not(.desk) #tabs [data-t="search"]{display:none}
body:not(.desk) .dk-fcb{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bd);background:var(--sf);color:var(--tx);border-radius:999px;padding:8px 16px;font-size:14px;font-weight:600;box-shadow:none;white-space:nowrap}
body:not(.desk) .rdbtn-wrap .rdprog{order:5}
body:not(.desk) .rdbtn-wrap .rdcap{order:6}

/* one flat row: Starting Guide, Roots, Search */
body:not(.desk) .rdbtn-wrap .gdslot{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;width:100%;margin:0}
body:not(.desk) .gdslot .mq-stack{order:0;grid-column:auto;justify-self:auto;display:flex;flex-direction:row;gap:6px;align-items:center;margin:0}
body:not(.desk) .gdslot .mq-stack button{padding:8px 11px;font-size:13.5px;gap:5px}
body:not(.desk) .gdslot #gdbtn{padding:9px 14px;font-size:14px;white-space:nowrap}