/* ===========================================================================
   About pages ("guide" pages)

   Static explainers reached from the info icon beside a sidebar section title
   (.nav-section-info in v2-styles.css). One page per section in every module.
   Self-contained on purpose: a guide page in any module loads only this file,
   so it never depends on that module's dashboard stylesheets. The look copies
   the Analytics Month In Review banner and the Inspections dashboard panel so
   the pages read as part of the app.

   Structure of a page:
     .page-content.fg-page
       .fg-banner > .fg-banner-main > .fg-banner-title + .fg-banner-sub
       .fg-intro (one or two paragraphs)
       .fg-jump (one pill per link, in sidebar order; omit on single-link sections)
       .fg-panel.fg-feature  (one per sidebar link)
         .fg-panel-header > .fg-panel-title + a.fg-open
         .fg-panel-body > .fg-row* (fg-label + fg-text) + .fg-payoff
       .fg-grid (two-up footer: "reading them together / where to go next" + rules)
   =========================================================================== */

/* ========================================
   Banner
   ======================================== */

.fg-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    background: linear-gradient(135deg, #ffffff 0%, #ecfdf5 100%);
    border: 1px solid #d1fae5;
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 32px;
}

.fg-banner-main {
    min-width: 0;
}

.fg-banner-title {
    font-size: 22px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.fg-banner-sub {
    font-size: 13px;
    color: #64748b;
    margin-top: 6px;
}

/* ========================================
   Intro and jump links
   ======================================== */

.fg-intro {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.6;
    color: #334155;
}

.fg-intro p {
    margin: 0 0 10px;
}

.fg-intro p:last-child {
    margin-bottom: 0;
}

.fg-jump {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 24px;
}

.fg-jump a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    transition: all 0.15s;
}

.fg-jump a:hover {
    border-color: #059669;
    color: #047857;
}

.fg-jump a i {
    color: #059669;
    font-size: 11px;
}

/* ========================================
   Feature panel
   ======================================== */

.fg-panel {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
}

.fg-feature {
    scroll-margin-top: 16px;
}

.fg-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
}

.fg-panel-title {
    font-size: 15px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.fg-panel-title i {
    margin-right: 8px;
    color: #059669;
}

.fg-open {
    font-size: 13px;
    font-weight: 600;
    color: #059669;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: color 0.15s;
}

.fg-open:hover {
    color: #047857;
}

.fg-open i {
    font-size: 11px;
}

.fg-panel-body {
    padding: 8px 20px 20px;
}

.fg-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid #f1f5f9;
}

.fg-row:last-of-type {
    border-bottom: none;
}

.fg-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #64748b;
    padding-top: 2px;
}

.fg-text {
    font-size: 13.5px;
    line-height: 1.6;
    color: #334155;
}

.fg-points {
    margin: 0;
    padding-left: 18px;
    font-size: 13.5px;
    line-height: 1.6;
    color: #334155;
}

.fg-points li + li {
    margin-top: 6px;
}

.fg-points strong {
    color: #0f172a;
}

/* Cross-references to other pages inside the footer panels. */
.fg-points a {
    color: #059669;
    font-weight: 600;
    text-decoration: none;
}

.fg-points a:hover {
    color: #047857;
    text-decoration: underline;
}

.fg-para {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #334155;
}

/* The payoff strip: same green family as the links and panel icons. */
.fg-payoff {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #065f46;
}

.fg-payoff i {
    color: #059669;
    font-size: 14px;
    margin-top: 2px;
}

.fg-payoff strong {
    color: #064e3b;
}

/* ========================================
   Two-up footer
   ======================================== */

.fg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Footer panels have no label rows; give their body its full padding back. */
.fg-grid .fg-panel-body {
    padding: 20px;
}

@media (max-width: 900px) {
    .fg-grid {
        grid-template-columns: 1fr;
    }

    .fg-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .fg-panel-header {
        flex-wrap: wrap;
    }
}