/*
 * PrepGro App Shell — journey bar + module page grounds.
 *
 * Consumes the theme's `--pg-*` token contract with hex fallbacks (the
 * owner-approved admin-ground values), so the plugin works even before the
 * theme token bundle ships. Module grounds tint the page canvas only; all
 * content surfaces stay neutral. No animation — nothing to reduce for
 * prefers-reduced-motion; the one hover transition is gated below.
 */

/* ── Module page grounds ─────────────────────────────────────────── */
body.pg-module-evaluate { background: var(--pg-evaluate-ground, #dae7f9); }
body.pg-module-elevate  { background: var(--pg-elevate-ground, #d6ecef); }
body.pg-module-excel    { background: var(--pg-excel-ground, #f4eddb); }
body.pg-module-core     { background: var(--pg-color-surface-muted, #f5f7fb); }

/* ── App page frame ──────────────────────────────────────────────── */
/* The theme's page template is deliberately full-width for legacy
   edge-to-edge engine pages; app pages get a proper reading frame so
   portal content sits centered on the module ground. */
body.pg-app .wp-block-post-content {
    max-width: 1140px;
    margin-left: auto;
    margin-right: auto;
    padding: 0 24px 64px;
}
@media (max-width: 599px) {
    body.pg-app .wp-block-post-content { padding: 0 16px 48px; }
}

/* Dashboard page (Option A nav, 2026-08-12): the React app brings its own
   sidebar shell — full-bleed frame, no journey bar (App_Shell renders none).
   Extra .pg-dash-full beats the mobile padding override below regardless of
   source order. */
body.pg-app.pg-dash-full .wp-block-post-content {
    max-width: none;
    padding: 0;
}

/* ── Shell bar ───────────────────────────────────────────────────── */
.pg-appshell {
    --pg-shell-accent: var(--pg-color-brand-primary, #2563eb);
    --pg-shell-on: #ffffff;
    --pg-shell-border: var(--pg-color-border-subtle, #dfe5ee);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0 1.5rem;
    padding: 0.5rem 0.9rem;
    background: var(--pg-color-surface-raised, #ffffff);
    border: 1px solid var(--pg-shell-border);
    border-radius: 14px;
}
.pg-appshell[data-pg-module="evaluate"] {
    --pg-shell-accent: var(--pg-evaluate-accent, #2563eb);
    --pg-shell-on: #ffffff;
    --pg-shell-border: var(--pg-evaluate-border, #bdd3f0);
}
/* Same correction as the dashboard sidebar: --pg-elevate-accent resolves to
   teal-700 (#0f766e) on this site, not the #0fb2c9 fallback these figures
   were chosen against, so near-black ink on it was 2.4:1. */
.pg-appshell[data-pg-module="elevate"] {
    --pg-shell-accent: var(--pg-elevate-accent, #0f766e);
    --pg-shell-on: #ffffff;
    --pg-shell-border: var(--pg-elevate-border, #b7dce2);
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appshell[data-pg-module="elevate"] {
    --pg-shell-on: #06363d;
}
.pg-appshell[data-pg-module="excel"] {
    --pg-shell-accent: var(--pg-excel-accent, #ffb020);
    --pg-shell-on: #3a2600;
    --pg-shell-border: var(--pg-excel-border, #e4d6b0);
}

/* ── Journey steps ───────────────────────────────────────────────── */
.pg-appbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap; /* reshape, don't scroll: steps drop to a second line */
    gap: 0.35rem;
    overflow-x: auto; /* belt-and-braces for extreme widths… */
    scrollbar-width: none; /* …but never paint a scrollbar for it */
    -webkit-overflow-scrolling: touch;
}
.pg-appbar::-webkit-scrollbar { display: none; }
.pg-appbar__step {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 44px;
    padding: 0.25rem 0.7rem;
    border-radius: 10px;
    text-decoration: none;
    color: var(--pg-color-text-primary, #0f1419);
    white-space: nowrap;
}
.pg-appbar__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    font-size: 0.82rem;
    font-weight: 700;
    background: var(--pg-color-surface-muted, #eef1f6);
    color: var(--pg-color-text-secondary, #5b6472);
}
.pg-appbar__text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    font-weight: 600;
    font-size: 0.95rem;
}
.pg-appbar__text em {
    font-style: normal;
    font-weight: 400;
    font-size: 0.74rem;
    color: var(--pg-color-text-secondary, #5b6472);
}
.pg-appbar__step.is-active {
    box-shadow: inset 0 -3px 0 0 var(--pg-shell-accent);
    border-radius: 10px 10px 4px 4px;
}
.pg-appbar__step.is-active .pg-appbar__num {
    background: var(--pg-shell-accent);
    color: var(--pg-shell-on);
}
.pg-appbar__sep {
    color: var(--pg-color-text-secondary, #8b94a3);
    flex: none;
    user-select: none;
}

/* ── Side (role) links ───────────────────────────────────────────── */
.pg-appbar__side {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.pg-appbar__sidelink {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.25rem 0.75rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--pg-color-text-primary, #0f1419);
}
.pg-appbar__sidelink.is-current {
    background: var(--pg-color-surface-muted, #eef1f6);
}

/* ── Interaction states ──────────────────────────────────────────── */
.pg-appbar__step:hover,
.pg-appbar__sidelink:hover {
    background: var(--pg-color-surface-muted, #eef1f6);
}
@media (prefers-reduced-motion: no-preference) {
    .pg-appbar__step,
    .pg-appbar__sidelink {
        transition: background-color 120ms ease;
    }
}
.pg-appbar__step:focus-visible,
.pg-appbar__sidelink:focus-visible {
    outline: 2px solid var(--pg-color-focus-ring, #2563eb);
    outline-offset: 2px;
}

/* ── Small screens ───────────────────────────────────────────────── */
@media (max-width: 719px) {
    .pg-appshell { padding: 0.4rem 0.6rem; }
    .pg-appbar__text em { display: none; }
    /* Phone: separators out, tighter steps — three fit one row at 360px. */
    .pg-appbar__sep { display: none; }
    .pg-appbar { gap: 0.15rem; }
    .pg-appbar__step { padding: 0.25rem 0.4rem; gap: 0.4rem; min-height: 40px; }
    .pg-appbar__num { width: 22px; height: 22px; font-size: 0.74rem; }
    .pg-appbar__text { font-size: 0.88rem; }
}

/* ── Dark theme (Acorn Next) ──────────────────────────────────────────
   Same toggle/attribute as the React dashboard and admin surfaces
   (html[data-pge-admin-theme="dark"][data-pge-dark-scope], localStorage pge_admin_theme; the
   App_Shell boots the attribute pre-paint on app pages). Module grounds
   go to one deep blue-black canvas; pillar identity stays in the bar's
   accent tokens, which are untouched. */
html[data-pge-admin-theme="dark"][data-pge-dark-scope] body.pg-module-evaluate,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] body.pg-module-elevate,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] body.pg-module-excel,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] body.pg-module-core {
    background: #0f131c;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appshell {
    background: #1c2230;
    border-color: #2a3345;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__step,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__sidelink {
    color: #eef2f9;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__num {
    background: #232c3d;
    color: #93a0b5;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__step.is-active .pg-appbar__num {
    background: var(--pg-shell-accent);
    color: var(--pg-shell-on);
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__text em,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__sep {
    color: #93a0b5;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__step:hover,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__sidelink:hover,
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__sidelink.is-current {
    background: #232c3d;
}

/* ── Theme toggle (rendered by App_Shell in the side nav) ───────────── */
.pg-appbar__theme {
    appearance: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 999px;
    border: 1px solid var(--pg-color-border-subtle, #dfe5ee);
    background: var(--pg-color-surface-raised, #ffffff);
    color: var(--pg-color-text-secondary, #5b6472);
}
.pg-appbar__theme .pg-icon-sun { display: none; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__theme {
    border-color: #2a3345;
    background: #232c3d;
    color: #93a0b5;
}
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__theme .pg-icon-sun { display: inline-flex; }
html[data-pge-admin-theme="dark"][data-pge-dark-scope] .pg-appbar__theme .pg-icon-moon { display: none; }