/* Layout for the authenticated /me account self-service pages when they are rendered as STATIC SSR
   inside the app-shell chrome (AppHeader + status AppFootbar), as opposed to the pre-auth AccountShell
   brand shell used by the sign-in funnel. Global (non-isolated), linked from App.razor — same reason as
   app-chrome.css / grid-shell.css: this app does not serve Client-project scoped CSS, so the Client
   AccountLayout.razor.css cannot style a server-rendered page. The header + footbar themselves are styled
   by the global app-chrome.css; this sheet owns only the outer column and the content container. Every
   rule is scoped under .account-app-shell so it cannot collide. Colour comes from the per-theme
   var(--shell-*) roles declared in custom.css — no literal colour belongs here, because a literal is
   exactly what makes a theme unswitchable. */

.account-app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--shell-surface);
    color: var(--shell-on-surface-body);
}

/* Body: nav stacks above content on mobile, two columns from the tablet breakpoint up (mirrors the
   interactive AccountLayout). Reflows to a single column on narrow viewports — /me is not gated. */
.account-app-shell__body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* The section nav is a CCTC PanelMenu (AccountSections.Groups). Theme its --cctc-panelmenu-* variables
   from the shell's own surface roles — the CCTC library defaults are light, so without this the nav would
   fall back to them whatever the page surface. The nav-text step is chosen per colourway to clear WCAG
   1.4.3 on that surface (see the --shell-nav-ink notes in custom.css); the active item goes to the full
   body ink. */
.account-app-shell__nav {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--shell-rule-panel);

    --cctc-panelmenu-color: var(--shell-nav-ink);
    --cctc-panelmenu-background-color: transparent;
    --cctc-panelmenu-border-color: transparent;
    --cctc-panelmenu-group-background-color: transparent;
    --cctc-panelmenu-hover-background-color: var(--shell-fill);
    --cctc-panelmenu-active-background-color: var(--shell-fill-active);
    --cctc-panelmenu-highlight-color: var(--shell-on-surface);
    --cctc-panelmenu-highlight-border-color: var(--shell-accent);
}

/* Non-interactive group label above each panel's items (the prototype's static "Account" / "Workspace" /
   "Preferences" headings). Small-caps eyebrow in the shell's muted label ink — the step is chosen per
   colourway to clear WCAG 1.4.3 4.5:1 on that surface (see --shell-label-ink in custom.css). */
.account-app-shell__nav .account-nav-group + .account-nav-group {
    margin-top: 1rem;
}

.account-app-shell__nav .account-nav-group__label {
    padding: 0.25rem 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--shell-label-ink);
}

@media (min-width: 48rem) {
    .account-app-shell__body {
        flex-direction: row;
    }

    .account-app-shell__nav {
        flex: 0 0 14rem;
        border-bottom: none;
        border-right: 1px solid var(--shell-rule-panel);
        padding: 1.5rem 0.75rem;
    }
}

.account-app-shell__main {
    flex: 1 1 auto;
    padding: 2rem 1.5rem 3rem;
}

/* Left-aligned (not centred): the content sits against the section-nav, capped to a readable measure. */
.account-app-shell__content {
    max-width: 40rem;
    margin: 0;
}

.account-app-shell__content h1 {
    margin: 0 0 0.25rem;
}

.account-app-shell__lead {
    margin: 0 0 1.75rem;
    color: var(--shell-lead-ink);
}

/* Standard skip link: off-screen until focused, then pinned top-left. */
.account-app-shell .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 10;
    padding: 0.5rem 0.75rem;
    background: var(--shell-surface-deep);
    color: var(--shell-on-deep);
}

.account-app-shell .skip-link:focus {
    left: 0.5rem;
    top: 0.5rem;
}