/* 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}

/* Cores dos cursos da coleção elementar (v1…v11), nos mesmos temas do tokens.css */
:root{ --v1:#8a4b00; --v2:#5b6f00; --v3:#b0307a; --v4:#006d8f; --v5:#a8321f; --v7:#3d5aa8; --v9:#2f7f3a; --v10:#7a4fb5; --v11:#946008; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --v1:#ffb454; --v2:#c4dc5a; --v3:#ff8cc4; --v4:#5fd0f0; --v5:#ff8f7a; --v7:#9fb4ff; --v9:#7fdc8a; --v10:#c9a6ff; --v11:#f3c23a; } }
:root[data-theme="dark"], [data-theme="dark"]{ --v1:#ffb454; --v2:#c4dc5a; --v3:#ff8cc4; --v4:#5fd0f0; --v5:#ff8f7a; --v7:#9fb4ff; --v9:#7fdc8a; --v10:#c9a6ff; --v11:#f3c23a; }
:root[data-theme="light"], [data-theme="light"]{ --v1:#8a4b00; --v2:#5b6f00; --v3:#b0307a; --v4:#006d8f; --v5:#a8321f; --v7:#3d5aa8; --v9:#2f7f3a; --v10:#7a4fb5; --v11:#946008; }