/* Estrutura comum de navegação: voltar/menu, título e caminho em linhas próprias. */
:root .app-shell .app-masthead {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin:0;
    padding-left:clamp(20px,2.5vw,40px);
    padding-right:clamp(20px,2.5vw,40px);
}

:root .app-shell .page-header {
    position:sticky;
    top:calc(85px + var(--nm-safe-top,0px));
    z-index:24;
    display:grid;
    grid-template-columns:44px minmax(0,1fr) 44px;
    grid-template-rows:44px auto auto;
    align-items:center;
    column-gap:12px;
    row-gap:5px;
    box-sizing:border-box;
    width:100%;
    max-width:none;
    min-height:0;
    margin:0;
    padding:16px clamp(20px,2.5vw,40px) 12px;
    background:var(--h-bg);
    border-color:var(--h-border);
}

:root .app-shell .page-header > div:has(> .title, > .breadcrumbs) {
    display:contents;
}

:root .app-shell .page-header .title {
    grid-column:1 / -1;
    grid-row:2;
    align-self:start;
    width:100%;
    margin:0;
    font-family:var(--h-serif);
    font-size:30px;
    font-weight:400;
    line-height:1.25;
    text-align:left;
    color:var(--h-text);
}

:root .app-shell .page-header > .drawer-toggle,
:root .app-shell .page-header > .breadcrumb-back,
:root .app-shell .page-header > :is(button.round-btn,a.round-btn)[aria-label="Voltar"] {
    grid-column:1;
    grid-row:1;
    justify-self:start;
    align-self:center;
}

:root .app-shell .page-header:has(> .breadcrumb-back) > .drawer-toggle,
:root .app-shell .page-header:has(> .breadcrumb-back) > :is(button.round-btn,a.round-btn)[aria-label="Voltar"] ~ .breadcrumb-back {
    display:none;
}

:root .app-shell .page-header > .breadcrumbs {
    grid-column:1 / -1;
    grid-row:3;
    display:flex;
    align-items:center;
    width:100%;
    min-height:40px;
    margin:0;
    padding:0;
    border:0;
}

:root .app-shell .page-header > .breadcrumbs ol {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    min-width:0;
    margin:0;
    padding:0;
    list-style:none;
    font-size:13px;
    line-height:1.5;
}

:root .app-shell .page-header > .breadcrumbs li {
    display:flex;
    align-items:center;
    min-width:0;
}

:root .app-shell .page-header > .breadcrumbs li + li::before {
    content:'›';
    margin:0 8px;
    color:var(--h-muted);
}

:root .app-shell .page-header > .breadcrumbs li a {
    display:inline-flex;
    align-items:center;
    min-height:36px;
    color:var(--h-accent);
    text-decoration:underline;
    text-underline-offset:3px;
}

:root .app-shell .page-header > .breadcrumbs [aria-current] {
    font-weight:600;
    overflow-wrap:anywhere;
}

:root .app-shell .page-header > .breadcrumb-back {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;
    padding:0;
    border:1px solid var(--h-border);
    border-radius:14px;
    background:var(--h-soft);
    color:var(--h-accent);
    text-decoration:none;
}

:root .app-shell .page-header > :is(button.round-btn,a.round-btn):not([aria-label="Voltar"]),
:root .app-shell .page-header > :is(.page-header-end-spacer,.manual-header-spacer,.trilha-header-mark),
:root .app-shell .page-header > span[style*="width"] {
    grid-column:3;
    grid-row:1;
    justify-self:end;
}

:root .app-shell .page-header.article-page-header > button[aria-label="Configurar leitura"] {
    grid-column:2;
    justify-self:end;
}

:root .app-shell .page-header.article-page-header > button[aria-label="Compartilhar"] {
    grid-column:3;
    justify-self:end;
}

:root .app-shell .page-header.connect-route-nav {
    min-height:0;
    padding-top:16px;
    padding-bottom:12px;
}

:root .app-shell .page-header.connect-route-nav > .drawer-toggle {
    display:none;
}

:root .app-shell .page-header.connect-route-nav .title {
    grid-row:2;
}

:root .app-shell .page-body,
:root .app-shell .page-body.narrow {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin:0;
    padding:28px clamp(20px,2.5vw,40px) 44px;
}

:root .app-shell .metas-page {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin:0;
    padding:28px clamp(20px,2.5vw,40px) 44px;
}

:root .app-shell :is(.feature-page,.calendar-page,.editorial-page,.manual-page,.article-detail-page,.games-catalog-page,.game-detail-page,.dates-page,.trip-detail-page) {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin-left:0;
    margin-right:0;
    padding-left:clamp(20px,2.5vw,40px);
    padding-right:clamp(20px,2.5vw,40px);
}

:root .app-shell .home-page {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin:0;
    padding-left:clamp(20px,2.5vw,40px);
    padding-right:clamp(20px,2.5vw,40px);
}

:root .app-shell .chat-page {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin:0;
    border-radius:0;
}

:root .app-shell .article-detail-page .article-body {
    max-width:none;
}

:root .app-shell .meta-create-form {
    max-width:none;
    justify-self:stretch;
}

:root .app-shell .goal-picker > :is(h1,.feature-subtitle) {
    text-align:left;
}

@media (min-width:820px) {
    :root .app-shell .goal-category-grid {
        grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));
    }
}

@media (max-width:819px) {
    :root .app-shell .page-header {
        top:calc(70px + var(--nm-safe-top,0px));
        grid-template-columns:44px minmax(0,1fr) 44px;
        row-gap:4px;
        padding:12px 20px 10px;
    }

    :root .app-shell .page-header .title {
        font-size:26px;
    }

    :root .app-shell .page-header > .breadcrumbs ol {
        font-size:12px;
    }

    :root .app-shell .page-header > .breadcrumbs li + li::before {
        margin:0 6px;
    }

    :root .app-shell .page-body,
    :root .app-shell .page-body.narrow {
        padding:24px 20px 36px;
    }

    :root .app-shell .metas-page {
        padding:24px 20px 36px;
    }

    :root .app-shell :is(.feature-page,.calendar-page,.editorial-page,.manual-page,.article-detail-page,.games-catalog-page,.game-detail-page,.dates-page,.trip-detail-page) {
        padding-left:20px;
        padding-right:20px;
    }

    :root .app-shell .page-header.chat-page-header,
    :root .app-shell .chat-page .page-header {
        position:relative;
        top:auto;
        flex:0 0 auto;
        padding:12px 16px 10px;
    }

    :root .app-shell .home-page {
        padding-left:20px;
        padding-right:20px;
    }

    :root .app-shell .app-masthead {
        padding-left:20px;
        padding-right:20px;
    }
}