/* One narrow reading column; each stanza stacks Urdu, transliteration, translation, then the refrain. */
:root{--bg:#eef2ef;--fg:#16302b;--muted:#4f6660;--accent:#0f6a58;--on-accent:#fff;--rule:#c5d2cc;--tint:#e0e9e4;--field:#f8faf9;--warn:#8a4b08;--warnbg:#f6ead6;--err:#a12a1f;
--ur:"Noto Nastaliq Urdu","Jameel Noori Nastaleeq","Urdu Typesetting",serif;--serif:"Gentium Book Plus",Gentium,Georgia,serif;--sans:"Alegreya Sans",system-ui,sans-serif;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#10201d;--fg:#e4eeea;--muted:#a3b8b1;--accent:#6fd0b8;--on-accent:#0c1b18;--rule:#2d443e;--tint:#182d29;--field:#0c1b18;--warn:#f0c483;--warnbg:#33281a;--err:#f29a8e;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:1.0625rem/1.6 var(--serif);padding-bottom:64px}
nav.top,main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
nav.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 16px;padding-top:max(10px,env(safe-area-inset-top,0px));padding-bottom:10px;max-width:calc(40rem + 32px);margin-inline:auto;font-family:var(--sans)}
.brand{font-weight:700;font-size:1.15rem;color:var(--accent);text-decoration:none}
.links{display:flex;flex-wrap:wrap;gap:0 14px}
.links a{display:inline-flex;align-items:center;min-height:44px;color:var(--fg);text-decoration:none;font-weight:500}
.links a:hover{text-decoration:underline}
main{max-width:calc(40rem + 32px);margin-inline:auto;display:grid;gap:32px;padding-top:12px;min-width:0}
main>*{min-width:0}
a{color:var(--accent)}
p{margin:0}
.ur{font-family:var(--ur);font-size:1.3rem;line-height:2.5;display:grid;gap:2px}
.tr{font-style:italic;color:var(--muted);font-size:.98rem;line-height:1.5;display:grid;gap:3px}
.en{font-size:1.0625rem;line-height:1.5;display:grid;gap:3px}
.uri{font-family:var(--ur);font-size:.95em;line-height:2.2}
header{display:grid;gap:12px}
.eyebrow{font:700 .8rem/1.3 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.eyebrow a{text-decoration:none}
h1{font:400 2rem/1.15 var(--serif);margin:0;text-wrap:balance}
h2{font:400 1.4rem/1.25 var(--serif);margin:0}
.lede{color:var(--muted);max-width:60ch}
.title-ur{font-size:1.5rem}
.head{display:grid;gap:6px;text-align:center}
.head .ur{font-size:1.75rem;font-weight:600;color:var(--accent);line-height:2.4}
.head h1{font-size:1.5rem}
.head .tr{justify-items:center}
.draft-banner{background:var(--warnbg);color:var(--warn);padding:10px 14px;border-radius:4px;font-size:.95rem}
.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);padding-block:8px;border-bottom:1px solid var(--rule);display:flex;gap:6px;flex-wrap:nowrap}
.bar button{font:700 .85rem var(--sans);min-height:44px;padding:0 12px;border-radius:999px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer}
.bar button[aria-pressed="false"]{background:transparent;color:var(--muted);border-color:var(--rule)}
button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.poem{display:grid;gap:26px;min-width:0}
.poem>*{min-width:0}
.opening{display:grid;gap:6px;text-align:center}
.opening .ur{font-size:1.25rem}
.stanza{display:grid;gap:12px;padding-top:16px;border-top:1px solid var(--rule);scroll-margin-top:72px}
.shead{display:flex;align-items:center;gap:10px}
.num{font:700 .8rem var(--sans);letter-spacing:.08em;color:var(--accent)}
.tag{font:700 .7rem var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--warn);background:var(--warnbg);padding:2px 7px;border-radius:3px}
.refrain{display:grid;gap:6px;background:var(--tint);padding:12px 16px;border-radius:4px}
.refrain .ur{font-size:1.08rem;line-height:2.35;color:var(--accent)}
.refrain .tr{font-size:.9rem}.refrain .en{font-size:.95rem}
.foot{display:grid;gap:6px;padding-top:12px;border-top:3px double var(--rule)}
.foot .ur{font-size:1.1rem}
.foot small{font:500 .8rem var(--sans);color:var(--muted)}
.notes{display:grid;gap:10px;border-top:1px solid var(--rule);padding-top:20px}
.notes h3{font:700 .85rem var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:8px 0 0}
.notes ul{margin:0;padding-inline-start:1.1em;display:grid;gap:6px}
.tools{display:flex;flex-wrap:wrap;gap:6px}
.tools button,.row button,.form button:not(.primary),.btn{font:700 .85rem var(--sans);min-height:44px;padding:0 12px;border-radius:6px;border:1px solid var(--rule);background:transparent;color:var(--fg);cursor:pointer;display:inline-flex;align-items:center;text-decoration:none}
.tools button:hover,.row button:hover,.btn:hover{border-color:var(--accent);color:var(--accent)}
button.primary{font:700 .95rem var(--sans);min-height:44px;padding:0 18px;border-radius:6px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer}
button[disabled]{opacity:.6;cursor:default}
.flagnote{background:var(--warnbg);color:var(--warn);padding:8px 12px;border-radius:4px;font-size:.92rem}
.sugg{display:grid;gap:8px;border:1px dashed var(--accent);border-radius:4px;padding:12px}
.sugg-h{font:700 .85rem var(--sans);color:var(--accent)}
.panel{display:grid;gap:10px;background:var(--tint);padding:12px;border-radius:6px;min-width:0}
.panel label,.form label{font:700 .85rem var(--sans);color:var(--muted)}
textarea,input:not([type=hidden]),select{width:100%;font:1rem/1.5 var(--serif);color:var(--fg);background:var(--field);border:1px solid var(--rule);border-radius:6px;padding:10px;min-height:44px;font-size:16px}
textarea[dir=rtl]{font-family:var(--ur);line-height:2.3;font-size:1.05rem}
.panel .err,.error{color:var(--err);font-weight:700}
.ok{background:var(--tint);padding:12px;border-radius:6px;overflow-wrap:anywhere}
code{font-size:.95em}
.hist{display:grid;gap:8px;list-style:none;margin:0;padding:0}
.hist li{border-top:1px solid var(--rule);padding-top:8px;display:grid;gap:6px;overflow-wrap:anywhere}
.list{list-style:none;margin:0;padding:0;display:grid}
.list>li{border-top:1px solid var(--rule)}
.list>li>a{display:grid;gap:2px;padding:12px 0;text-decoration:none;color:var(--fg)}
.list .ur{font-size:1.1rem;line-height:2.2}
.sub{display:block;color:var(--muted);font:500 .85rem var(--sans)}
.snip{display:block;color:var(--muted);font-size:.95rem}
.plain>li{padding:10px 0}
.user{display:grid;gap:8px;padding:12px 0}
.row{display:flex;flex-wrap:wrap;gap:6px}
.group{display:grid;gap:12px}
.form{display:grid;gap:8px;max-width:26rem}
.form.inline{max-width:none}
.form button{justify-self:start;margin-top:6px}
.step{font-size:1.1rem;margin-top:12px}
.hint{color:var(--muted);font-size:.9rem}
.secret{font-family:ui-monospace,Menlo,monospace;font-size:.9rem;overflow-wrap:anywhere}
.qr{width:220px;height:220px;max-width:100%;border-radius:4px}
.pager{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;border-top:1px solid var(--rule);padding-top:16px;font-family:var(--sans);font-weight:500}
.pager a{min-height:44px;display:inline-flex;align-items:center}
.pager .next{margin-inline-start:auto;text-align:right}
#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:max(16px,env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:6px;font:700 .9rem var(--sans);z-index:20;max-width:calc(100% - 32px)}
.hide-ur .stanza>.ur,.hide-ur .refrain>.ur,.hide-ur .opening>.ur,.hide-ur .foot>.ur,.hide-ur .sugg>.ur{display:none}
.hide-tr .stanza>.tr,.hide-tr .refrain>.tr,.hide-tr .opening>.tr,.hide-tr .foot>.tr,.hide-tr .sugg>.tr{display:none}
.hide-en .stanza>.en,.hide-en .refrain>.en,.hide-en .opening>.en,.hide-en .foot>.en,.hide-en .sugg>.en{display:none}
[hidden]{display:none!important}
@media (max-width:420px){.ur{font-size:1.14rem;line-height:2.45}.head .ur{font-size:1.5rem}.refrain .ur{font-size:1rem}h1{font-size:1.75rem}.en{font-size:1rem}.bar button{padding:0 10px}}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}