/* ==========================================================================
   QueStudy — App-Shell Feature Pages
   Loaded on Questudy plugin feature pages (templates/page-feature-shell.php).
   Harmonizes plugin output with the app shell: single-column content grid,
   compact feature bar, fullscreen immersive mode, and container cleanup.
   ========================================================================== */

/* -------------------------------------------------------------------------
   Feature page layout: single content column, no right sidebar
   ------------------------------------------------------------------------- */
body.qs-app-feature .qs-app-content {
    grid-template-columns: minmax(0, 1fr);
    max-width: 1360px;
}

body.qs-app-feature .qs-main-content {
    gap: 20px;
}

/* Plugin content sits directly in the grid; let plugin wrappers own width */
body.qs-app-feature .qs-plugin-content.qs-container {
    max-width: none;
    padding: 0;
    width: 100%;
}

.qs-plugin-content > * {
    max-width: 100%;
}

/* -------------------------------------------------------------------------
   Compact feature bar (orientation row under the topbar)
   ------------------------------------------------------------------------- */
.qs-feature-bar {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 22px;
}

.qs-feature-bar-ico {
    width: 40px;
    height: 40px;
    flex: none;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--qs-app-primary-soft);
    color: var(--qs-app-primary);
}

.qs-feature-bar-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--qs-app-text);
}

/* -------------------------------------------------------------------------
   Immersive mode (CBT exam / results / review): full viewport, no chrome
   ------------------------------------------------------------------------- */
body.qs-immersive {
    background: var(--qs-app-bg);
}

body.qs-immersive .qs-app-content,
body.qs-immersive .qs-app-content--immersive {
    display: block;
    max-width: none;
    padding: 0;
    width: 100%;
}

body.qs-immersive .qs-plugin-content--immersive {
    width: 100%;
    max-width: none;
    min-height: 100vh;
}

/* -------------------------------------------------------------------------
   Plugin wrapper tidy-up inside the app shell
   ------------------------------------------------------------------------- */
.qs-plugin-content .qp-page-premium,
.qs-plugin-content .questudy-past-questions-wrap,
.qs-plugin-content .questudy-generator-wrap,
.qs-plugin-content .questudy-cbt-interface {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

@media (max-width: 1120px) {
    body.qs-app-feature .qs-app-content {
        padding: 18px 16px 40px;
    }

    .qs-feature-bar {
        margin-bottom: 16px;
    }
}

/* -------------------------------------------------------------------------
   Feature error panel (defensive render fallback)
   ------------------------------------------------------------------------- */
.qs-feature-error {
    padding: 26px 22px;
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 14px;
    background: color-mix(in srgb, #ef4444 8%, var(--qs-app-bg));
    color: var(--qs-app-text);
}

.qs-feature-error strong {
    display: block;
    font-size: 1rem;
    font-weight: 800;
    margin-bottom: 6px;
}

.qs-feature-error p {
    margin: 0 0 8px;
    opacity: 0.82;
}

.qs-feature-error-detail {
    display: block;
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    font-size: 0.8rem;
    word-break: break-word;
}