/* PAN Guide additions — loaded AFTER aadhaar.css (shared .aa design system).
   Component: .pn-flow — a dated process strip that "draws" itself when scrolled into view.
   Without JS (or with reduced motion) it is a plain, fully visible ordered list. */
.aa .pn-flow{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(var(--pn-n,5),minmax(0,1fr)); gap:0; counter-reset:pn }
.aa .pn-flow > li{ position:relative; display:grid; gap:4px; align-content:start; padding:34px 12px 4px 0; min-width:0 }
.aa .pn-flow > li::before{ content:counter(pn); counter-increment:pn; position:absolute; top:0; left:0; z-index:1; width:26px; height:26px; border-radius:50%;
  display:grid; place-items:center; font:700 .8rem var(--aa-f-body); color:#fff; background:var(--pn-c,var(--aa-you)) }
.aa .pn-flow > li::after{ content:""; position:absolute; top:12px; left:30px; right:4px; height:3px; border-radius:2px; background:var(--pn-c,var(--aa-you)); opacity:.35;
  transform-origin:left center; transition:transform .5s ease calc(var(--pn-i,0) * .35s + .2s) }
.aa .pn-flow > li:last-child::after{ display:none }
.aa .pn-flow > li > *{ transition:opacity .4s ease calc(var(--pn-i,0) * .35s), transform .4s ease calc(var(--pn-i,0) * .35s) }
.aa .pn-flow .pn-when{ font:700 .75rem/1.2 var(--aa-f-body); text-transform:uppercase; letter-spacing:.06em; color:var(--pn-c,var(--aa-you)) }
.aa .pn-flow b{ line-height:1.3 }
.aa .pn-flow small{ color:var(--aa-muted); font-size:.85rem; line-height:1.4 }
.aa .pn-flow .you{ --pn-c:var(--aa-you) }
.aa .pn-flow .wait{ --pn-c:var(--aa-otp) }
.aa .pn-flow .gov{ --pn-c:var(--aa-uidai) }
.aa .pn-flow .done{ --pn-c:var(--aa-uidai) }
.aa .pn-flow .done::before{ content:"✓" }
.aa-js .pn-flow:not(.is-in) > li::after{ transform:scaleX(0) }
.aa-js .pn-flow:not(.is-in) > li > *{ opacity:0; transform:translateY(6px) }
@media (max-width:640px){
  .aa .pn-flow{ grid-template-columns:1fr }
  .aa .pn-flow > li{ padding:0 0 18px 40px; min-height:52px }
  .aa .pn-flow > li::after{ top:30px; bottom:2px; left:12px; right:auto; width:3px; height:auto; transform-origin:top center }
  .aa-js .pn-flow:not(.is-in) > li::after{ transform:scaleY(0) }
}
.aa .pn-flow-cap{ font-size:.85rem; color:var(--aa-muted) }
/* PAN card mini-illustration used in walkthrough end frames */
.aa .pn-card{ border-radius:8px; padding:8px 9px; background:linear-gradient(135deg,#e7eefc,#f4f6f8); border:1px solid #c9d1db; display:grid; gap:3px; font-size:11px }
.aa .pn-card .pn-no{ font:700 13px var(--aa-f-mono); letter-spacing:.12em }

/* TOC with coloured icon tiles (.aa-toc.pn-toc-ic). Icons are inline SVG, decorative (aria-hidden). */
.aa .pn-toc-ic ol{ list-style:none; padding:4px 0 10px; display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:4px 16px }
.aa .pn-toc-ic li{ --c:var(--aa-you); --b:var(--aa-you-soft) }
.aa .pn-toc-ic li a{ display:flex; align-items:center; gap:10px; min-height:44px; padding:4px 6px; border-radius:8px; text-decoration:none; color:var(--aa-ink) }
.aa .pn-toc-ic li a:hover{ background:var(--b) }
.aa .pn-toc-ic li a:hover{ text-decoration:underline; text-underline-offset:3px }
.aa .pn-ic{ flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; background:var(--b); color:var(--c); transition:transform .15s }
.aa .pn-ic svg{ width:18px; height:18px }
.aa .pn-toc-ic li a:hover .pn-ic{ transform:scale(1.08) }
.aa .pn-toc-ic li.pn-c-blue{ --c:#1f56c2; --b:#e7eefc } .aa .pn-toc-ic li.pn-c-indigo{ --c:#4338ca; --b:#e8e7fb } .aa .pn-toc-ic li.pn-c-teal{ --c:#0f766e; --b:#dff3f0 }
.aa .pn-toc-ic li.pn-c-green{ --c:#1d7a52; --b:#e3f3ea } .aa .pn-toc-ic li.pn-c-amber{ --c:#a35f00; --b:#fdf1dc } .aa .pn-toc-ic li.pn-c-yellow{ --c:#8a6100; --b:#fdf3c8 }
.aa .pn-toc-ic li.pn-c-orange{ --c:#c2410c; --b:#fdebe1 } .aa .pn-toc-ic li.pn-c-red{ --c:#b42318; --b:#fdeceb } .aa .pn-toc-ic li.pn-c-pink{ --c:#be185d; --b:#fce7f1 }
.aa .pn-toc-ic li.pn-c-purple{ --c:#7e22ce; --b:#f2e8fc } .aa .pn-toc-ic li.pn-c-slate{ --c:#475569; --b:#eef1f5 }

/* Heading icons: small decorative illustration before H2/H3 text (img alt="", files in assets/icons). */
.aa .pn-hic{ display:inline-block; width:1.4em; height:1.4em; vertical-align:-.28em; margin-right:.45em; flex:none }
.aa h3 .pn-hic{ width:1.45em; height:1.45em; vertical-align:-.36em }
.aa .aa-steps h3 .pn-hic{ width:1.4em; height:1.4em; vertical-align:-.34em }
.aa .aa-faq h2 .pn-hic, .aa .aa-sources h2 .pn-hic{ width:1.15em; height:1.15em }

/* ---------- Tools ---------- */
.pn-tool fieldset{border:1px solid var(--aa-line);border-radius:var(--aa-r,10px);padding:10px 12px;margin:0;min-width:0;display:grid;gap:10px}
.pn-tool legend{font-weight:600;font-size:.92rem;padding:0 4px}
.pn-tool select{min-height:44px;border:1.5px solid var(--aa-line);border-radius:8px;padding:8px 10px;font:inherit;color:var(--aa-ink);background:var(--aa-bg);max-width:100%}
.pn-tool input{max-width:100%;box-sizing:border-box;width:100%}
.pn-nm-btns{display:flex;flex-wrap:wrap;gap:8px}
.pn-nm-btns[hidden],.pn-nojs[hidden]{display:none}
.pn-nm-res{border-radius:12px;padding:12px 14px;border-left:6px solid var(--aa-otp);background:var(--aa-otp-soft);overflow-wrap:anywhere}
.pn-nm-same{border-color:var(--aa-uidai);background:var(--aa-uidai-soft)}
.pn-nm-big{border-color:var(--aa-warn);background:var(--aa-warn-soft)}
.pn-nm-multi{border-color:var(--aa-warn)}
.pn-nm-v{font-weight:700;font-size:1.1rem;margin:0 0 6px}
.pn-nm-cmp{font-size:.9rem;margin:0 0 6px}
.pn-nm-res h3{font-size:.98rem;margin:10px 0 4px}
.pn-nm-res ul{margin:0;padding-left:20px}
.pn-nm-res li{margin:2px 0}
.pn-nm-foot{font-size:.85rem;color:var(--aa-muted);margin:10px 0 0}
.pn-nm-err{color:var(--aa-warn);font-weight:600;margin:0}

.pn-pp fieldset{border:1px solid var(--aa-line);border-radius:var(--aa-r,10px);padding:10px 12px;margin:0;min-width:0;display:grid;gap:6px}
.pn-pp legend{font-weight:600;font-size:.92rem;padding:0 4px}
.pn-tool.pn-pp label.pn-pp-opt{display:flex;align-items:center;gap:10px;font-weight:400;min-height:44px;cursor:pointer}
.pn-tool.pn-pp input[type=radio]{width:20px;height:20px;min-height:0;margin:0;flex:none;accent-color:var(--aa-you)}
.pn-pp input[type=date],.pn-pp input[type=text]{width:100%;max-width:100%;box-sizing:border-box}
.pn-pp-btns{display:flex;flex-wrap:wrap;gap:8px}
.pn-pp-btns[hidden],.pn-pp .pn-nojs[hidden]{display:none}
.pn-pp-res{border-radius:12px;padding:12px 14px;border-left:6px solid var(--aa-uidai);background:var(--aa-uidai-soft);overflow-wrap:anywhere}
.pn-pp-res p{margin:0 0 8px}
.pn-pp-lab{font-weight:700}
.pn-pp-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 8px}
.pn-pp-pw{font-family:var(--aa-f-mono,monospace);font-size:1.6rem;font-weight:700;letter-spacing:.12em;padding:4px 10px;border:1.5px dashed var(--aa-line);border-radius:8px;background:var(--aa-bg);user-select:all}
.pn-pp-msg{font-size:.88rem;font-weight:600}
.pn-pp-src{font-size:.9rem}
.pn-pp-tips{margin:0 0 8px;padding-left:20px}
.pn-pp-tips li{margin:2px 0}
.pn-pp-foot{font-size:.85rem;color:var(--aa-muted)}
.pn-pp-err{color:var(--aa-warn);font-weight:600;margin:0}

/* ---------- "Remember my details" bar (all tools) ---------- */
.aa .pn-mem{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--aa-line,#dde2e8)}
.aa .pn-mem-rem{display:flex;align-items:center;gap:8px;font-weight:600;cursor:pointer;min-height:44px}
.aa .pn-mem-rem input{width:20px;height:20px;margin:0;flex:none}
.aa .pn-mem-forget{min-height:40px}
.aa .pn-mem-st{font-size:.92em;color:#1a7f37}
.aa .pn-mem-note{flex-basis:100%;margin:0;font-size:.88em;color:#566170}

/* Lightning canvas on the H1 can briefly extend past the page edge while it animates: clip it (clip, unlike hidden, keeps sticky positioning working) */
article.aa{overflow-x:clip}

/* ---------- More languages (owner, 17 Oct 2026): Marathi, Bengali, Telugu, Tamil, Gujarati, Kannada ---------- */
.aa, .aa-sitefoot{
  --aa-f-display:"Noto Serif","Noto Serif Devanagari","Noto Sans Bengali","Noto Sans Telugu","Noto Sans Tamil","Noto Sans Gujarati","Noto Sans Kannada",Georgia,serif;
  --aa-f-body:"Noto Sans","Noto Sans Devanagari","Noto Sans Bengali","Noto Sans Telugu","Noto Sans Tamil","Noto Sans Gujarati","Noto Sans Kannada",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.aa:lang(mr), .aa:lang(bn), .aa:lang(te), .aa:lang(ta), .aa:lang(gu), .aa:lang(kn){ line-height:1.8; font-size:18px }
.aa:lang(ta) h1, .aa:lang(te) h1, .aa:lang(kn) h1{ font-size:clamp(1.5rem, 4.2vw, 2.2rem) }   /* long words in these scripts */
.aa:lang(ta), .aa:lang(te), .aa:lang(kn), .aa:lang(bn){ overflow-wrap:anywhere }
/* language menu (replaces the single Hindi/English switch) */
.aa-langmenu{ position:relative }
.aa-langmenu > summary{ list-style:none; cursor:pointer }
.aa-langmenu > summary::-webkit-details-marker{ display:none }
.aa-langmenu > summary::after{ content:"▾"; margin-left:2px; color:var(--aa-muted) }
.aa-langmenu-k{ color:var(--aa-muted); font-weight:400 }
.aa-langmenu > ul{ position:absolute; z-index:30; left:0; top:calc(100% + 6px); margin:0; padding:6px; list-style:none; min-width:180px;
  background:#fff; border:1px solid var(--aa-line); border-radius:12px; box-shadow:0 8px 24px rgba(23,32,43,.14) }
.aa-langmenu > ul li{ margin:0 }
.aa-langmenu > ul a{ display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:8px; text-decoration:none; color:var(--aa-ink) }
.aa-langmenu > ul a:hover, .aa-langmenu > ul a:focus-visible{ background:var(--aa-you-soft) }
.aa .aa-fallback{ font-weight:400; color:var(--aa-muted); font-size:.82em }