/* Infinitésimo · estrutura do app. componentes.css descreve a aparência (mesma dos mocks);
   aqui ficam as regras de posição que os mocks estáticos não precisam: coluna única, lição em tela cheia, sheet, toast e faixa offline. */
html,body{min-height:100%}
#app{max-width:560px;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;display:flex;flex-direction:column;gap:14px;padding:10px 16px 24px;min-width:0}
main .hero,main .bubble{padding-inline:0}
.tabs{margin-top:auto}
.rede{position:fixed;top:0;left:0;right:0;z-index:20}
#sheet .sheet-wrap{position:fixed;inset:0;z-index:50}
#sheet .sheet{max-height:85vh;overflow:auto}
.toast{z-index:60;pointer-events:none}
#lesson .lesson{position:fixed;inset:0;z-index:30;display:flex;flex-direction:column}
#lesson .inner{width:100%;max-width:560px;margin:0 auto;flex:1;display:flex;flex-direction:column;min-height:0}
#lesson .lbody{flex:1;overflow:auto;min-height:0}
#lesson .lfoot{position:static;max-height:60vh;overflow:auto}
#lesson .lfoot .fb,#lesson .lfoot .acoes{margin-bottom:8px}
@media (max-width:359px){main{padding-inline:12px}}
.pagehead h1{font-size:32px;line-height:1.05;margin-top:4px}
main .unit,main .region .unit{margin-inline:0}
.combo:empty{display:none}
.region .path::before{left:50%;transform:translateX(-50%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .region .path::before{filter:invert(1)}:root:not([data-theme="light"]) .crowns{border-color:var(--xp-fill)}}
.dsf{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:10px 0;border-top:1px solid var(--line)}
.dsf .row.spread{width:100%}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero h1 em{background:linear-gradient(transparent 84%,var(--marker) 84%)}}
:root[data-theme="dark"] .hero h1 em{background:linear-gradient(transparent 84%,var(--marker) 84%)}
.skills-fim{width:100%;display:flex;flex-direction:column;gap:8px;text-align:left}