Mobilny stos nawigacji usług miejskich

<div data-nav-kind="mobile">
<main class="civic-app">
  <header><span>Urząd dzielnicy / Punkt online</span><h1>Sprawy<br>mieszkańca</h1><button id="civic-open" type="button" aria-haspopup="dialog" aria-controls="civic-dialog" aria-expanded="false">Wybierz sprawę</button></header>
  <section id="civic-documents"><b>Dokumenty</b><p>Dowód osobisty, meldunek i odpisy.</p></section>
  <section id="civic-home"><b>Dom i lokal</b><p>Odpady, lokale i podatki.</p></section>
  <section id="civic-transport"><b>Transport</b><p>Parkowanie i sprawy kierowców.</p></section>
  <section id="civic-id"><b>Dowód osobisty</b><p>Złożenie wniosku i odbiór dokumentu.</p></section>
  <section id="civic-address"><b>Meldunek</b><p>Zgłoszenie pobytu stałego lub czasowego.</p></section>
  <section id="civic-copy"><b>Odpis aktu</b><p>Wniosek o dokument z rejestru stanu cywilnego.</p></section>
  <p id="civic-status" aria-live="polite" role="status">Nie wybrano sprawy.</p>
</main>
<dialog id="civic-dialog" aria-labelledby="civic-title" aria-describedby="civic-desc">
  <header><button id="civic-back" type="button">← Wstecz</button><button class="civic-close" type="button" aria-label="Zamknij nawigację">×</button></header>
  <div class="civic-heading"><span id="civic-step">Poziom 1 z 2</span><h2 id="civic-title" tabindex="-1">Wybierz dział</h2><p id="civic-desc">Przejdź do działu, a potem wybierz konkretną sprawę.</p></div>
  <div class="civic-stack">
    <section id="civic-root-level" class="civic-level">
      <nav aria-label="Działy usług miejskich"><ul>
        <li><a href="#civic-documents" data-civic-next="civic-document-level" aria-current="page"><b>Dokumenty</b><span>3 sprawy</span></a></li>
        <li><a href="#civic-home" data-civic-name="Dom i lokal"><b>Dom i lokal</b><span>Odpady i podatki</span></a></li>
        <li><a href="#civic-transport" data-civic-name="Transport"><b>Transport</b><span>Parking i kierowcy</span></a></li>
      </ul></nav>
    </section>
    <section id="civic-document-level" class="civic-level" hidden>
      <nav aria-label="Sprawy dotyczące dokumentów"><ul>
        <li><a href="#civic-id" data-civic-name="Dowód osobisty" aria-current="page"><b>Dowód osobisty</b><span>Wniosek i odbiór</span></a></li>
        <li><a href="#civic-address" data-civic-name="Meldunek"><b>Meldunek</b><span>Pobyt stały lub czasowy</span></a></li>
        <li><a href="#civic-copy" data-civic-name="Odpis aktu"><b>Odpis aktu</b><span>Dokument z rejestru</span></a></li>
      </ul></nav>
    </section>
  </div>
</dialog>
</div>

*{box-sizing:border-box}[data-nav-kind="mobile"]{width:min(100%,430px);margin:auto}html{color-scheme:light}body{margin:0;min-width:0;background:#c9c8bd;color:#263b32;font:16px/1.5 Arial,sans-serif}.civic-app{width:min(100%,430px);min-height:100dvh;margin:auto;background:#f0eee5;border-inline:1px solid #777a70}.civic-app>header{padding:22px 18px 26px;border-top:12px solid #315e4c;border-bottom:1px solid #777a70}.civic-app header span{font:12px "Courier New",monospace}.civic-app h1{margin:15px 0 24px;font:700 49px/.88 Georgia,serif}.civic-app button,dialog button,dialog a{min-height:44px}.civic-app>header button{border:2px solid #315e4c;background:#315e4c;color:#fff;padding:9px 16px;font-weight:800;cursor:pointer}.civic-app section{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:77px;padding:14px 18px;border-bottom:1px solid #9b9b90}.civic-app section b{font-size:18px}.civic-app section p{max-width:230px;margin:0;color:#565f59;font-size:13px;text-align:right}.civic-app>p{min-height:51px;margin:0;padding:13px 18px;border-left:12px solid #d26438;background:#263b32;color:#fff}dialog{display:none;width:min(100%,430px);height:100dvh;max-height:none;margin:auto;padding:0;border:0;background:#f0eee5;color:#263b32;overflow-y:auto}dialog[open]{display:block;animation:civic-in .2s ease-out}dialog::backdrop{background:#263b32}dialog>header{position:sticky;z-index:2;top:0;display:flex;justify-content:space-between;padding:10px 14px;border-bottom:1px solid #777a70;background:#f0eee5}dialog>header button{border:1px solid #263b32;background:transparent;color:#263b32;padding:7px 12px;font-weight:800;cursor:pointer}.civic-close{width:46px;padding:0;font-size:25px}.civic-heading{padding:18px;border-bottom:5px solid #315e4c}.civic-heading span{color:#b74623;font:12px "Courier New",monospace}.civic-heading h2{margin:7px 0 4px;font:700 39px/.95 Georgia,serif}.civic-heading p{margin:8px 0 0}.civic-stack{padding:0 18px 22px}nav ul{list-style:none;margin:0;padding:0}nav li{border-bottom:1px solid #777a70}nav a{display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px;padding:12px 4px;color:#263b32;text-decoration:none}nav a b{font-size:19px}nav a span{max-width:145px;color:#565f59;font-size:12px;text-align:right}.civic-level:before{content:"";display:block;width:64px;height:8px;margin:16px 0;background:#d26438}.civic-level[hidden]{display:none!important}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:4px solid #1a5da8;outline-offset:3px}@keyframes civic-in{from{transform:translateX(22px);opacity:0}to{transform:none;opacity:1}}@media(max-width:470px){.civic-app{border:0}}@media(max-height:400px){.civic-heading{padding-block:9px}.civic-heading p{display:none}.civic-level:before{margin-block:8px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

$(()=>{const dialog=$('#civic-dialog')[0],$dialog=$(dialog),opener=$('#civic-open')[0];let current='civic-root-level';const focusable=()=>[...dialog.querySelectorAll('button:not([disabled]),a[href]:not([tabindex="-1"]),[tabindex]:not([tabindex="-1"])')].filter(el=>el.getClientRects().length);function level(id,focus=true){current=id;$('.civic-level').prop('hidden',true);$('#'+id).prop('hidden',false);const root=id==='civic-root-level';$('#civic-step').text(root?'Poziom 1 z 2':'Poziom 2 z 2');$('#civic-title').text(root?'Wybierz dział':'Dokumenty');if(focus)(root?$('#civic-title'):$('#'+id+' a').first()).trigger('focus')}function close(){if(dialog.open)dialog.close('close')}$('#civic-open').on('click',()=>{level('civic-root-level',false);$(opener).attr('aria-expanded','true');dialog.showModal();$('#civic-title').trigger('focus')});$('[data-civic-next]').on('click',function(event){event.preventDefault();level($(this).data('civic-next'))});$('#civic-back').on('click',()=>{if(current!=='civic-root-level')level('civic-root-level');else close()});$('[data-civic-name]').on('click',function(){$('#civic-status').text('Wybrana sprawa: '+$(this).data('civic-name')+'.');close()});$('.civic-close').on('click',close);$dialog.on('cancel',event=>{event.preventDefault();if(current!=='civic-root-level')level('civic-root-level');else close()}).on('close',()=>{$(opener).attr('aria-expanded','false');opener.focus()}).on('keydown',event=>{if(event.key==='Escape'){event.preventDefault();close();return}if(event.key!=='Tab')return;const items=focusable(),first=items[0],last=items[items.length-1];if(!items.length){event.preventDefault();dialog.focus()}else if(event.shiftKey&&items.indexOf(document.activeElement)<=0){event.preventDefault();last.focus()}else if(!event.shiftKey&&(items.indexOf(document.activeElement)<0||document.activeElement===last)){event.preventDefault();first.focus()}});$('nav a[href^="#"]').on('click',function(event){event.preventDefault();const nav=$(this).closest('nav');nav.find('[aria-current]').removeAttr('aria-current');$(this).attr('aria-current','page')});});